Port ValueFlows kanban WebComponent to Svelte
Closed this issue · 5 comments
Svelte is looking like a good choice so far! (but we won't know for sure until we've proven all claims made in #1)
A good start would be porting an existing native WebComponent that was built for ValueFlows into the new frameworks to see what the comparison looks like. I recommend we do this with @ivanminutillo's kanban webcomponent because that's a real need for the Holo-REA team as well as both InvestorEngine and CoMakery.
So basically the goal is- stub something out (see the resources linked in #1 as a guide), we probably just need the basics for this task. Each of these should be thought of as a separate feature and pushed to master after completion. (Feel free to break up into separate tasks if desired.)
- get a Svelte storybook set up to develop within
- port Ivan's kanban component into the new framework
- keep PostCSS. The existing CSS looks pretty standard.
- if it uses GraphQL already, note that some of the queries will probably need to be changed as the VF spec has evolved since this work was undertaken.
- setup PostCSS to use W3C CSS advanced features syntax, with the compiler just doing the browser compatibility stuff
- get JavaScript sourcemaps working
- get CSS sourcemaps working
- attempt getting TypeScript or FlowType working with components
- pull common component styles into theme variables (start with fonts, colours, line heights, padding)
- pay attention to the use of a "manifest file" for each component to declare its dependencies on shared style globals.
if it uses GraphQL already, note that some of the queries will probably need to be changed
It should use graphql, and definitely some of the queries will need to be changed. And please let us know if we don't have a query implemented that you need.
Getting pretty close to a first pass as this; the port was pretty easy but as always, fiddling with the build system is a pain. Typescript handling in Svelte turned out to be iffy so I'm going to see if I can setup Flowtype & TypeScript typedef generation another way.
A kanban board is basically a card interface with multiple columns of cards.
The usual interpretation of the columns is something like Backlog, Doing, Done.
Alternative might be multiple stages of the same process flow, like Document Translation, Proofread, Edit, and Publish. (For the Guerrilla Translators...)
For development, I'd go with whichever interpretation the first user group wants and vary later.
Alternative might be multiple stages of the same process flow, like Document Translation, Proofread, Edit, and Publish. (For the Guerrilla Translators...)
I love the idea to have column templates for different workflows that can be shared.
We have moved the ValueFlows organization from GitHub to https://lab.allmende.io/valueflows.
This issue has been closed here, and all further discussion on this issue can be done at
If you have not done so, you are very welcome to register at https://lab.allmende.io and join the ValueFlows organization there.