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 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 <oce-kanban bins=[...] /> Props

• bins: Array<bin>

oce-bin

A single bin, to be filled with cards <oce-bin cards={this.cards} outputs={this.outputs} due={this.due} title={this.title} note={this.note} />

Props

• cards: Array<card>,
• outputs: Array<output>,
• due: string,
• title: string,
• note: string

oce-card

A single card that represent a commitment <oce-card members={this.members} due={this.due} note={this.note} action={()=>{console.log('hello')}} />

Props

• members: Array<members>,
• due: string,
• note: string,
• action: Function

oce-output

The ouptut resource of a bin <oce-output outputs={this.outputs} />

Props

• resourceClassifiedAs : { name: string }

Getting Started

Follow these steps to run locally the kanban webcomponent:

git clone https://github.com/ivanminutillo/kanban-webcomponent.git
cd kanban-webcomponent
git remote rm origin

and run:

npm install
npm start

To watch for file changes during develop, run:

npm run dev --es5

Prerequisites

It uses post-css to create and compile css. Postcss-cli is required to build correctly the project:

npm i -g|-D postcss-cli

Using this component

Script tag

• Insert the following scripts tag <script src='https://unpkg.com/kanban-webcomponent/dist/resources-flow.js'></script> to access the webcomponet and <link rel="stylesheet" type="text/css" href="https://unpkg.com/kanban-webcomponent/dist/styles/main.css"> if you want to import the style, in the head of your index.html
• Then you can use <oce-kanban /> webcomponent anywhere in your template, JSX, html etc

Node Modules

• Run npm install kanban-webcomponent --save
• Put this script tag <script src='https://unpkg.com/kanban-webcomponent/dist/resources-flow.js'></script> 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 - A web component compiler
• PostCSS - a tool for transforming styles with JS plugins

Contributing

TODO

Versioning

TODO

Authors

• Ivan Minutillo - Initial work - twitter

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Ionic Team for the stenciljs amazing tool