vf-ui issueshttps://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues2023-07-25T08:39:39Zhttps://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/18Repository & build system reorg and cleanup2023-07-25T08:39:39ZpospiRepository & build system reorg and cleanupKinda related to #5 but there is now much more mess to clean up on this as we work through extracting UI kits from some Neighbourhoods projects into component repositories.
https://github.com/neighbour-hoods/bugs-n-features-requests/iss...Kinda related to #5 but there is now much more mess to clean up on this as we work through extracting UI kits from some Neighbourhoods projects into component repositories.
https://github.com/neighbour-hoods/bugs-n-features-requests/issues/4 is probably the best place to keep abreast of this conversation for now. Once we have some decisions, expect some of the recently added PNPM and Vite build configuration mess to be cleaned up and better managed.
At present the build system generates a bundled package for all components within the repository *and all their dependencies*, which is unnecessarily large. But it works well enough for inclusion in other projects which is the minimum-viable functionality.
For completeness, the projects containing generic components which are yet to be refactored out into this repo are:
- https://github.com/neighbour-hoods/timetracking-applet
- https://github.com/neighbour-hoods/marketplace-appletpospipospihttps://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/17widget: resource search autocomplete2021-04-14T12:29:37Zpospiwidget: resource search autocompleteUse #13 to implement a combined "smart resource resolver" control which allows network participants to quickly find resource types & definitions they commonly use.
The autocomplete should match the entered text against text fields in `E...Use #13 to implement a combined "smart resource resolver" control which allows network participants to quickly find resource types & definitions they commonly use.
The autocomplete should match the entered text against text fields in `EconomicResources`, `ResourceSpecifications` and `ResourceClassifications` and surface matches grouped in the same order.
The idea is to show more specific *types* of things in a first phase. Higher-order components extending this one could be authored which add additional intelligence- eg. ordering frequently used matches with higher priority based on prior use.https://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/16widget: efficient list view2021-04-14T12:21:20Zpospiwidget: efficient list viewNeed something that can smoothly handle large ordered datasets
https://svelte.dev/repl/f78ddd84a1a540a9a40512df39ef751b?version=3.8.1Need something that can smoothly handle large ordered datasets
https://svelte.dev/repl/f78ddd84a1a540a9a40512df39ef751b?version=3.8.1https://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/15widget: location input2021-04-14T12:20:25Zpospiwidget: location input- [ ] Reverse geocoding service using some open (& pluggable) provider
- [ ] Map interface to view / set location using OSS map toolkit (suggest Leafletjs?)
Possible base libraries:
https://github.com/beyonk-adventures/svelte-mapbox
ht...- [ ] Reverse geocoding service using some open (& pluggable) provider
- [ ] Map interface to view / set location using OSS map toolkit (suggest Leafletjs?)
Possible base libraries:
https://github.com/beyonk-adventures/svelte-mapbox
https://codepen.io/jimutt/pen/XLjaqVhttps://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/14widget: date picker2021-04-14T12:18:06Zpospiwidget: date pickerWe need something that is able to select dates with variable precision (day, hour, millisecond).
- [ ] Date input (day precision, returns shortened ISO8601 string)
- [ ] DateTime input (millisecond precision)
- [ ] DateTime input with t...We need something that is able to select dates with variable precision (day, hour, millisecond).
- [ ] Date input (day precision, returns shortened ISO8601 string)
- [ ] DateTime input (millisecond precision)
- [ ] DateTime input with timezone override
- [ ] Date range input
- [ ] DateTime range input
Given the complexity of the latter two of these, this will probably involve building higher-order components out of a simpler base UI. Some possibilities:
https://www.npmjs.com/package/praecox-datepicker
https://svelte.dev/repl/e010922893964594a8a888aae1ec4fd5?version=3.19.2https://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/13widget: autocomplete2021-04-14T12:29:37Zpospiwidget: autocompleteNeed a general-purpose autocomplete component which can read data from various sources (direct input, async method, GraphQL). Should have single-select and multi-select capability. Keyboard and screenreader friendly.
https://github.com/...Need a general-purpose autocomplete component which can read data from various sources (direct input, async method, GraphQL). Should have single-select and multi-select capability. Keyboard and screenreader friendly.
https://github.com/Ascarbek/svelte-suggestbox#readme may provide a good foundation to work from.https://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/12Upgrade and adopt relevant prior works from Shroom project2020-11-19T06:53:24ZpospiUpgrade and adopt relevant prior works from Shroom projectSee https://github.com/holo-rea/app-personal-agent where I have forked Ivan's older work to align with the current release of the spec.See https://github.com/holo-rea/app-personal-agent where I have forked Ivan's older work to align with the current release of the spec.https://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/11App: General-purpose marketplace2020-11-19T06:51:09ZpospiApp: General-purpose marketplaceThis project already underway, just wanted to leave this here as a stub / link: https://github.com/holo-rea/app-offers-needs-marketplace
> The 'kitchen sink' of REA-based marketplaces: gifting, requests, offers & needs, exchanges, sales...This project already underway, just wanted to leave this here as a stub / link: https://github.com/holo-rea/app-offers-needs-marketplace
> The 'kitchen sink' of REA-based marketplaces: gifting, requests, offers & needs, exchanges, sales, multilateral trades & multi-value exchanges.pospipospihttps://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/10App: task tracker / timer2020-08-31T08:42:44ZpospiApp: task tracker / timerThis is just a UI that has a play / pause button to track time, something like Toggl.
I'm pretty sure the ideal implementation is for it to cache some pending `EconomicEvents` in `localStorage`, set a `hasBeginning` when activated, and ...This is just a UI that has a play / pause button to track time, something like Toggl.
I'm pretty sure the ideal implementation is for it to cache some pending `EconomicEvents` in `localStorage`, set a `hasBeginning` when activated, and store the final event with a `hasEnd` at the current time on stopping the timer. It also lets you tag those time trackings against `ResourceSpecifications` or `ResourceClassifications`; otherwise should be pretty straightforward.https://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/9No-code and low-code development2020-02-27T19:52:40ZBob HaugenNo-code and low-code developmentWe should be able to do this very well, given vf-graphql, a suite of UI components, and a component that does not exist yet, the component wiring breadboard...
* https://openui5.org/
* https://redmonk.com/jgovernor/2020/02/21/new-clien...We should be able to do this very well, given vf-graphql, a suite of UI components, and a component that does not exist yet, the component wiring breadboard...
* https://openui5.org/
* https://redmonk.com/jgovernor/2020/02/21/new-client-profile-neptune-software/
*(founded by another of my mythical cousins...)
* https://www.bettyblocks.com/
* https://www.outsystems.com/
* https://www.mendix.com/
and wiring:
* https://glitch.com/https://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/8App: promise manager2020-02-22T13:36:04ZpospiApp: promise managerEnable something like https://en.wikipedia.org/wiki/Promise_theory by creating a nice app to manage commitments in economic networks.Enable something like https://en.wikipedia.org/wiki/Promise_theory by creating a nice app to manage commitments in economic networks.https://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/7App: event firehose / chat stream2020-01-26T12:47:46ZpospiApp: event firehose / chat streamA simple app with high utility would be to create an interface to all data in an REA network which presents events as a time-ordered list, in a conversational UI.
We could mix in a Holochain chat app in the process of doing this and a...A simple app with high utility would be to create an interface to all data in an REA network which presents events as a time-ordered list, in a conversational UI.
We could mix in a Holochain chat app in the process of doing this and allow participants in the network to comment on and query economic events as they unfold.https://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/6App: task management board2020-01-03T05:27:23ZpospiApp: task management boardLikely first candidate for #3.
Basically just means taking #2 and wiring it up to the Holochain backend data source. Work to be committed in https://github.com/holo-rea/holo-rea/.Likely first candidate for #3.
Basically just means taking #2 and wiring it up to the Holochain backend data source. Work to be committed in https://github.com/holo-rea/holo-rea/.Kanban board componentpospipospihttps://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/5Implement build system for framework-agnostic UI components2023-07-25T08:39:40ZpospiImplement build system for framework-agnostic UI componentsPulling this out of #2 to track progress as it's becoming a more complex job than anticipated, so I'd rather break it up piecemeal and do the minimum necessary right now.
MVP of the build system needs to generate a "standard" package ...Pulling this out of #2 to track progress as it's becoming a more complex job than anticipated, so I'd rather break it up piecemeal and do the minimum necessary right now.
MVP of the build system needs to generate a "standard" package (pure WebComponents) as well as a `-react` version of the library which includes React components generated from a template. We can add more as needed, but I'd be keen for someone to do an Angular version sooner rather than later.
I'm kinda surprised to be finding that this hasn't already been done elsewhere. In what the Svelte docs point you to, you get a Rollup config that generates a bundled app. Then there's the Webpack loader to do the same using its toolchain. But I don't want any of that- I want to "write Svelte once, deploy anywhere" with minimal friction to the end developer. I think the user story is "I can bring vf-ui components into my project of choice, without having to reconfigure my build system or bundler or [eject from CRNA](https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md)". So that means I want:
- zero-config components written in the native component format of the framework (eg. `ReactComponent`)
- pluggable styles that work "natively" (at the framework's module resolution layer)
- file separation between component DOM logic and styles, to promote re-styling
- a default export of the component which mixes in a theme that is loaded from another file on top of the "unstyled" component
Most of the way toward making this work. But am suspicious that I'm reinventing the wheel. Might cross-post in Svelte issues...pospipospihttps://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/4Implement UI language translations2019-11-27T08:09:05ZpospiImplement UI language translationshttps://github.com/kaisermann/svelte-i18n looks really nice- it provides a simple API for observing changes to the browser locale, but also for asynchronously loading locale files into the browser in response to such changes.https://github.com/kaisermann/svelte-i18n looks really nice- it provides a simple API for observing changes to the browser locale, but also for asynchronously loading locale files into the browser in response to such changes.https://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/3Scaffold a demo app which integrates with the Holo-REA backend2019-12-14T00:28:38ZpospiScaffold a demo app which integrates with the Holo-REA backendOnce we have a component to test (see #2), we should integrate it with a real backend. At this stage my gut feeling is that it makes sense to develop the actual *app* within the Holo-REA codebase, in the `examples` folder.
- [ ] set u...Once we have a component to test (see #2), we should integrate it with a real backend. At this stage my gut feeling is that it makes sense to develop the actual *app* within the Holo-REA codebase, in the `examples` folder.
- [ ] set up [Sapper](https://sapper.svelte.dev/docs) to serve the site
- [ ] bring in `vf-graphql-holochain` and `svelte-apollo` to get GraphQL integrated (the former module should be set up through the project's Yarn workspace, not loaded via NPM)pospipospihttps://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/2Port ValueFlows kanban WebComponent to Svelte2020-01-03T19:36:34ZpospiPort ValueFlows kanban WebComponent to SvelteSvelte 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 ...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](https://github.com/ivanminutillo/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.)*
- [x] get a Svelte storybook set up to develop within
- [x] 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.
- [x] setup PostCSS to use W3C CSS advanced features syntax, with the compiler just doing the browser compatibility stuff
- [x] get JavaScript sourcemaps working
- [x] get CSS sourcemaps working
- [ ] attempt [getting TypeScript](https://github.com/kaisermann/svelte-preprocess) 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.Kanban board componentpospipospihttps://lab.allmende.io/valueflows/app-frameworks/vf-ui/-/issues/1Defining architectural requirements for ValueFlows UI project2019-11-22T08:22:52ZpospiDefining architectural requirements for ValueFlows UI projectHey all (and to some old & new faces who might be interested) - as roadmaps within and beyond our ecosystems continue to mature, it seems we are at a point where we can start building a *truly* portable user interface framework for rapid...Hey all (and to some old & new faces who might be interested) - as roadmaps within and beyond our ecosystems continue to mature, it seems we are at a point where we can start building a *truly* portable user interface framework for rapid iteration of techno-social systems.
I'd like to use this thread to formalise precisely what this means in terms of ValueFlows-compatible user interface frameworks. There are things we could do in other areas (eg. aligning [patchql](https://github.com/sunrise-choir/ssb-patchql/) with [Humm](https://github.com/sunrise-choir/ssb-patchql/)'s record schema); but for resource coordination problems I think I'm preaching to the choir here when I say that ValueFlows can unlock a lot of possibilities.
Beyond portability, modularity and extensibility a lot of effort also needs to go in to developer ease-of-use, because we want contributing to the project at any level to be as accessible as possible.
So this is just some thoughts and links to get the discussion started, I'd really love to iterate this with your help and see where we can combine forces to reduce overhead and co-enable each other as we progress (:
### Backend portability
- [GraphQL spec](https://www.npmjs.com/package/@valueflows/vf-graphql) ensures that implementations are aligned and provides validation methods to verify compliance. This decouples UI components from depending on a particular backend.
- [WIP Holochain implementation](https://github.com/holo-rea/holo-rea/tree/master/modules/vf-graphql-holochain#readme)
- [issue](https://github.com/valueflows/vf-graphql/issues/8) to merge with @luandro's [economic-sentences](https://github.com/open-app/economic-sentences-graphql) GraphQL plugin
- [Graph federation helpers](https://www.apollographql.com/docs/apollo-server/api/apollo-federation/) allow us to compose multiple schemas together declaratively into a single merged API. This decouples the UI components completely from the data sources, even when mixing multiple backends (eg. Scuttlebutt + HoloREA) within the same app.
### Frontend portability
**Framework agnostic:**
- We should aim to deliver our UI components as pure WebComponents. Browser support for these is now [mature](https://caniuse.com/#feat=custom-elementsv1) and they enable portability between all possible UI frameworks (eg. React, Angular, Polymer, ...)
- Component wrappers for particular runtimes will have to be delivered in addition to the raw WebComponents (eg. [for React](https://www.npmjs.com/package/webcomponents-in-react)).
- We should generate these as part of the build / publish process and deploy different packages for use with different libraries.
- We should use [Svelte](https://svelte.dev/) to develop the components themselves. It's extremely simple and accessible, I gave it to a junior dev & complete novice once and they managed to build a quite nice website (and have fun doing it!)
- We need to proof [getting Storybook working with it](https://storybook.js.org/docs/guides/guide-svelte/)
- We need to proof exporting both TypeScript and FlowType type definitions from the components to enable compatibility with both mainstream JS preprocessors commonly used in UI projects. Flow is much less restrictive than TypeScript, so perhaps using TS and [generating flow from TS definitions](https://github.com/joarwilk/flowgen) is the appropriate direction to convert in. Also, Svelte uses TypeScript by default.
- [svelte-apollo](https://www.npmjs.com/package/svelte-apollo) is already done so is [svelte-redux-connect](https://www.npmjs.com/package/svelte-redux-connect), so I think all the bindings we need for state management and API requests are already good to go.
- There cannot be any global styles whatsoever in the framework as this breaks predictability when importing in to existing web apps which have their own style globals.
**Platform agnostic:**
- If we keep our data layer cleanly separated from our view layer, we can build equivalent React Native views for every web view and enable the frontend logic (excluding routing) to be shared between platforms.
- Apollo GraphQL works both in web & Electron environments as well as React Native.
- Must support serverside rendering for pre-render and no-JS environments. For Svelte we need to proof [use of Sapper](https://sapper.svelte.dev/docs/#sapper_export).
### Customisability
- We should make UI components white-label-able and customisable at as many levels as possible. [Minimum requirements](https://github.com/django-rea/rea-app/wiki/UI-Component-Architecture#implementation-concerns) are to support:
- simple re-theming via customisation of global theme variables
- deep visual customisation via an accessible style framework
- ability to inject custom theme styles to entirely change visual appearance and only use the component's logic
- I have no real strong opinions on the CSS preprocessor we do or don't use unless others do; but we should probably sign off on something so I nominate SCSS. What are the cool kids doing these days?
- Style framework will probably have a similar architecture to [rea-app](https://github.com/django-rea/rea-app/), in that CSS framework mixins and variables are used to share common style elements between locally-scoped component styles. Note that this configuration impacts the repository layout and build system and will require enforcing some directory and file naming conventions. Using a templating framework to automate creating new components is probably a good idea.Lynn FosterBob HaugenMikeyConnor TurlandpospiLynn Foster