Compose an UX for "We"

[adaburrows]

We need to make sure our various components can be re-composed into a different module that is loaded inside of We. The first stage of refactoring in #168 allowed us to have composable and testable libraries for helpers, models, data providers (one local storage, one Holochain zome), and data stores (adaptors for Svelte and React, a simple typed tree-based data store).

• Make ui/src/hcWebsockets.ts composable.
• Break apart ui/src/data/Connection.ts into a state machine that sets things up for the application in a more orderly and composable fashion. (done as part of We need to allow people to select a plan or create a new one #172)
• Make sure routing is accounted for.
• Debug potential CSS conflicts.

ui/src/hcWebsockets.ts

This needs to be made into another composable component in combination with ui/src/data/Connection.ts. The notes below apply to this as well.

ui/src/data/Connection.ts

Oh, this mess. I made it better with the previous refactor, but I really need to make it better and more composable. Also, I need to compare this with the template for We apps so we can make sure we can compose the parts correctly.

• We
• notebooks — example app

So we need to be able to deal with these inputs: async appletRenderers(appWs: AppWebsocket, adminWs, weServices, appletInfo).

Separate Valueflows UI Components into common NPM module?

There are multiple way of doing this. Obviously, the We applet can just pull all the components it needs from the ui folder and I'm learning towards that approach. Even others could just pull from our NPM module and include what they need.

Need to understand screen routing in We

Currently our app has a specific set of pages which use a React based react-router-dom. We may need to introduce a configuration for this or a different kind of routing.