search

storacha / w3ui

👩‍🎤 Headless, type-safe, UI components for the next generation Web3.Storage APIs.
Other
64 stars 25 forks source link

proposal: consolidate example apps #256

Open travis opened 1 year ago

travis commented 1 year ago

I chatted with @yusefnapora a bit earlier this week about the future of our example apps. We'd tentatively like to reduce the number of examples to ease the maintenance burden. #255 brings us to 7 example apps for React alone (one of which is just a template, but still requires maintenance). Two of them, ui and w3console, overlap with the other examples, demonstrating most of the functionality found in the more single-purpose examples like file-upload and signin-on. This is likely to become a huge pain for us, especially since we'd like to reproduce the examples in Vue, SolidJS and Vanilla JS.

For React, Vue and SolidJS, at least, it may be simpler to have 2-3 example apps broken up along abstraction lines:

  1. w3console in #255 does a good job of demonstrating how to use the "Customizable" UI components (from #208).
  2. I believe @natevw is working on an example app that shows how to upload photos to w3up, which may be a good use-case for the Headless UI-style components from #136.
  3. It may also be a good idea to have a simple app that demonstrates how to use just the Providers from each of the component packages without even the Headless UI components, but we might also skip that since it's relatively easy to see how to do that in the Headless UI components for a developer who wants this.

We may want to do something slightly different for the "vanilla" JS examples, as building out something as complicated as w3console in vanilla JS seems fairly complicated, but maybe not?

Relatedly, @olizilla introduced integration testing that can be written once and run against all the examples in all the frameworks in https://github.com/web3-storage/w3ui/pull/242 - I'd like to cohere around a strategy for examples apps as soon as possible so we can keep pushing that work forward.

If this sounds like a good idea to everyone, I'd like to move forward with getting apps 1 and 2 above polished enough to write tests against them. w3console as an app may diverge from the example app, but we'd keep it around as a useful teaching tool. I can work with @jchris and @natevw on what app 2 would look like. Once these two apps are done in at least a basic form, we could delete the other apps (maybe keeping around template for new developers?) and write tests.

Thoughts?

natevw commented 1 year ago

fwiw re. the "app 2" discussion, I haven't been pursuing that recently but it would basically be another version of https://github.com/Codigo-Fuentes/selfie-app-demo updated with newer components and such. See also https://blog.web3.storage/posts/selfie-app which is a [somewhat bitrotted?] walkthrough tutorial going from the react file-upload demo and converting it step-by-step into basically into a selfie-app-demo end result.

olizilla commented 1 year ago

A (minimal) w3console implementation per UI library or a component playground / guided introduction like an expanded version of the examples/react/ui proposed in #208 would be a good start. Other examples can live in separate repos and be linked to from the readme for now.