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