https://github.com/ivanminutillo/kanban-webcomponent
A kanban web-component built with stenciljs, based on valueflows syntax
https://github.com/ivanminutillo/kanban-webcomponent
postcss stenciljs valueflows webcomponent
Last synced: about 2 months ago
JSON representation
A kanban web-component built with stenciljs, based on valueflows syntax
- Host: GitHub
- URL: https://github.com/ivanminutillo/kanban-webcomponent
- Owner: ivanminutillo
- License: mit
- Created: 2018-02-07T11:06:45.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-26T11:16:24.000Z (about 7 years ago)
- Last Synced: 2025-03-13T10:11:20.607Z (2 months ago)
- Topics: postcss, stenciljs, valueflows, webcomponent
- Language: JavaScript
- Homepage:
- Size: 390 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - ivanminutillo/kanban-webcomponent - A kanban web-component built with stenciljs, based on valueflows syntax (others)
README
# A Valueflows Kanban WebComponent
This is a draft of a kanban Web Component built with Stenciljs and based on valueflows syntax.
This project is based on [stencil component starter](https://github.com/ionic-team/stencil-component-starter) repository, although I used postcss instead of SASS in my workflow.
## Custom TAGS available with this module
### oce-kanban
*The whole kanban with bins and cards*
``
**Props**
- bins: `Array`
### oce-bin
*A single bin, to be filled with cards*
``
**Props**
- cards: `Array`,
- outputs: `Array`,
- due: string,
- title: string,
- note: string
### oce-card
*A single card that represent a commitment*
`{console.log('hello')}} />`
**Props**
- members: `Array`,
- due: string,
- note: string,
- action: Function
#### oce-output
*The ouptut resource of a bin* ``
**Props**
- resourceClassifiedAs : {
name: string
}
## Getting Started
Follow these steps to run locally the kanban webcomponent:
```bash
git clone https://github.com/ivanminutillo/kanban-webcomponent.git
cd kanban-webcomponent
git remote rm origin
```
and run:
```bash
npm install
npm start
```
To watch for file changes during develop, run:
```bash
npm run dev --es5
```
### Prerequisites
It uses post-css to create and compile css. Postcss-cli is required to build correctly the project:
```bash
npm i -g|-D postcss-cli
```
## Using this component
### Script tag
- Insert the following scripts tag `` to access the webcomponet and `` if you want to import the style, in the head of your index.html
- Then you can use `` webcomponent anywhere in your template, JSX, html etc
### Node Modules
- Run `npm install kanban-webcomponent --save`
- Put this script tag `` in the head of your index.html
- Import the style from the `node-modules` according to your preferences
- Then you can use the element anywhere in your template, JSX, html etc
## Built With
* [Stenciljs](https://github.com/ionic-team/stencil) - A web component compiler
* [PostCSS](https://github.com/postcss/postcss) - a tool for transforming styles with JS plugins
## Contributing
TODO
## Versioning
TODO
## Authors
* **Ivan Minutillo** - *Initial work* - [twitter](https://twitter.com/m44070)
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Acknowledgments
* Ionic Team for the stenciljs amazing tool