create new w3console project

[travis]

I think it makes the most sense to create this as an example project in w3ui based on the branch in #208 and then to move to its own repository once that branch lands

[travis]

Big open question is: what framework do we use? Currently leaning toward vite + preact but open to other ideas.

Advantages of vite + preact:

1. we're now using vite across projects and it provides a very nice harness for dev and testing
2. preact in React-compatibility mode will demonstrate compatibility with React and Preact
3. this approach will make w3console more easily composable with existing apps, which isn't easy with something like Next.js

[gobengo]

preact in React-compatibility mode will demonstrate compatibility with React and Preact

React is what we use @web3-storage/website and nft.storage/website today. React has compatability with React. In general, I think it's fair to claim that the addressable audience of devs-who-have-used-react is much bigger than that of devs-who-have-used-preact. So personally I would recommend using 'just react' and not 'preact', or at least would point out that there are no benefits to preact-over-react presented here yet.

with that said, I don't strong object to preact. I'd just recommend getting something functional with just the more common tooling before attempting it with less common tooling.

this approach will make w3console more easily composable with existing apps, which isn't easy with something like Next.js

If composability is a goal, and I think it's a good one, I think a good way of guaranteeing it is to develop it as a component, but demo it inside a component gallery like storybook. If you're demoing something in storybook, it's guaranteed that it's composable. If not, whether the thing is using next.js or vite, it may still be not composable. You can do storybook w/ vite.

If you dev a W3Console component in storybook + vite, we maintain the most optionality for someone else wanting to come along and embed that component in some other project using whatever combination of next/vite/etc or react/preact etc.

[travis]

In general, I think it's fair to claim that the addressable audience of devs-who-have-used-react is much bigger than that of devs-who-have-used-preact.

Yep totally agree here - the idea here is that if we use Preact we'll essentially be targetting React and Preact developers at the same time since Preact provides a subset of React's functionality. That said I've never actually used Preact for anything serious, so I'm not 100% sure this is true - @olizilla @yusefnapora I don't remember if either of you has more experience with Preact, but curious about your take here.

I think a good way of guaranteeing it is to develop it as a component, but demo it inside a component gallery like storybook.

Yea this is basically the plan - we'd like to build w3console out of the "Customizable UI" components in #208. I do think we'll still need a new repository to provide basic app structure and chrome for the thing we want to deploy to beta.console.web3.storage but I'd like to push as much of the functionality of that site into the Customizable UI as possible so that it's easy to see how to reuse our work.

I do think it's worth investigating storybook as a dev/test harness for the Customizable and Headless components in w3ui, especially since its support for snapshot testing (https://storybook.js.org/docs/react/writing-tests/snapshot-testing) might be extremely useful for #150

[olizilla]

I want storybook now i'm working on components. I set it up for ipfs-gui and it was worth the effort. I'm going to add it to the examples/react/playground so we can use it to iterate on our components, while keeping all the storybook dependencies out of our packages that are for public consumption.

As Ben pointed out, vite support in storybook is a thing now which is great, and even better, they just landed pnpm support in the upcoming v7 release available under the stroybook@next tag on npm, so i'm going to start there.

see: storybookjs/storybook#13428 (comment)

[travis]

this is done in #255, #266, #268, #284 and others. we probably want to move it into its own project at some point, but this is enough for this ticket for now!