feat: Customizable UI components #208
Conversation
This PR makes breaking changes to core and framework components to integrate the access agent (+ucanto 0.9) and the new upload client. resolves #127 BREAKING CHANGE: core and framework components have changed considerably. Please read the updated doucmentation.
This just updates the vanilla sign up/in example to use the new stuff from #119. I've got the file upload example nearly done as well, but need to wrap things up for the day, so I'll finish it tomorrow. @alanshaw this PR is targeting the branch from #119, so feel free to pull it in there if you want. Otherwise I'll retarget this one after that one merges. Co-authored-by: Alan Shaw <alan.shaw@protocol.ai>
I got all these working in a basic way, but had trouble passing the staging service principals and connections through to the providers to test against staging - I think this is the right way to pass them through in Vue: <img width="1264" alt="Screen Shot 2022-11-28 at 5 22 51 PM" src="https://user-images.githubusercontent.com/1113/204416026-4f89cea3-8701-4d56-bc7f-3b4f1d6473e1.png"> but Vue complains like this: <img width="686" alt="Screen Shot 2022-11-28 at 5 24 08 PM" src="https://user-images.githubusercontent.com/1113/204416045-062e3ca3-1863-4121-be34-df3ab577eab3.png"> and the servicePrincipal and connection are undefined inside KeyringProvider - @alanshaw am I just bad at Vue or do we need to do something special to make sure servicePrincipal and connection are defined as "props" in the Providers? Co-authored-by: Alan Shaw <alan.shaw@protocol.ai>
This should do the trick to update the various examples, but I haven't tested end to end because I kept getting 500s from the uploads service. Co-authored-by: Alan Shaw <alan.shaw@protocol.ai>
add initial sketch of UI component for uploader, modeled on headlessui's components far from a final design on this, but wanted to throw something quick together to help planning
also get the build working so I can create an example that uses these
I think it makes more sense to include these "headless UI" style components in the @w3ui/react-* packages rather than bundling them together in the react-ui package. It feels more intuitive given the naming - if we do want to have the "no UI" style components in a separate package I'd advocate for callling that package `react-uploader-provider` or `react-uploader-api` or something, but given how much code this is and the fact that tree shaking is pretty good, it seems ok to me to bundle them together. the react-ui package will be reserved for higher level "customizable UI" style components and can now have opinions about the right way to do customization at the top level rather than having two different flavors of customizability in a single package.
UploadsList headless and customizable components
add "headless" Authenticator component and use it to build a "customizable" SimpleAuthenticator that works the way the Authenticator components in our examples work
clear out a few extraneous post-merge changes
* make sure to loadAgent now that the package doesn't * update uploads list for new data uploads list data format
combine all three simple components to create an easy to use dropin component and add W3Upload to the react ui example app
(this PR replaces #151 which was against a now-obsolete branch) At least in certain contexts (specifically I was viewing from the URL <https://github.com/web3-storage/w3ui/blob/w3ui/docs/react-uploads-list.md> via the `next` branch) the useKeyring documentation link led to a 404 when clicked. Adding the `.md` extension seems to be all that's needed.
|
Minor but I think we should introduce our layers the other way around in the example app... so Drop-In UI is first. As an impatient developer, the drop-in UI is the simplest to understand and use. If it does what I need I'm done! I can stop reading... but maybe i'm curious, ooh can i make it cornflower blue? oh rad there is a Customizable UI too... but english isn't my first language, can i change the lables oh rad i can rebuild the UI as I like from the Headless UI! (this is only important here as it sets the first demonstration of how to explain these ideas and as such could be come the de-facto way to explain them) I'm not convinced yet that we need to introduce 4 levels here. I see it more as 2 levels like "Drop in components that you can customize the lookNfeel of, or Headless components that you can use as utils to build what you need". I don't want to have to think too hard to start using w3ui! |
|
We need to resolve the conversation from #136 (review) included here to make it easier to follow:
no doubt I will retred old ground here; bare with me i need to arrange my thoughts! tanstack was the inspiration for the existing packages. The terminology used there is headless vs component based libraries. https://tanstack.com/table/v8/docs/guide/introduction#component-based-libraries-vs-headless-libraries tanstack implements UI agnostic "core" libs and adapters that map the core state handling logic to each ui libraries preferred way... e.g @tanstack/react-table provides react hooks. tanstack deliberately avoids offering components that provide markup, so we are adding another dimension to our offering with our customisable components and headless ones... it's good, but we have to take care when explaining it. I understand that https://github.com/tailwindlabs/headlessui is an inspiration for the I note that we're likely to end up with top level packages for the headless implementations, and then the same again as a tree of components nested under To nudge this forwards I suggest we proceed with @travis's layout with minor tweaks to the naming:
and we can (maybe, later) re-export all the headless react components from I lean towards landing this sooner rather than later with those minimal changes and see how it goes. We'll iterate on the react experience on main until we're happy with it, and then port the decisions to the other UI lib implementations. |
|
+1 to all these suggestions, would love to get them landed asap! |
License: MIT Signed-off-by: Oli Evans <oli@protocol.ai>
License: MIT Signed-off-by: Oli Evans <oli@protocol.ai>
License: MIT Signed-off-by: Oli Evans <oli@protocol.ai>
License: MIT Signed-off-by: Oli Evans <oli@protocol.ai>
License: MIT Signed-off-by: Oli Evans <oli@protocol.ai>
Introduce w3console, a demonstration of the "Customizable" components introduced in #208 and the start of a new console for interacting with w3up. w3console is built primarily with "Customizable" components and is a demonstration of how those components can be customized with a mix of CSS variables and popular tools like TailwindCSS. https://github.com/web3-storage/w3ui/pull/255/files#diff-e018ff5c0db64a5ab5309ee989a3e1506b6a715f75e6d1c59bf0dbfe4c068296 is now a great example of how the customizable components can be used - not much code, lots of functionality https://github.com/web3-storage/w3ui/pull/255/files#diff-e103e84df17b851f230d8a61eb981470f2d4b67047c4686d083c3bfe1195ee61 shows how we can use CSS variables and TailwindCSS to customize these components Signed-off-by: Oli Evans <oli@protocol.ai> Co-authored-by: Alan Shaw <alan.shaw@protocol.ai> Co-authored-by: Yusef Napora <yusef@napora.org> Co-authored-by: Nathan Vander Wilt <natevw@yahoo.com> Co-authored-by: Oli Evans <oli@protocol.ai>
🤖 I have created a release *beep* *boop* --- ## 1.0.0 (2023-11-28) ### Features * adds space-finder autocomplete combobox ([#268](#268)) ([3dcd647](3dcd647)) * allow users to set page size in W3APIProvider ([#308](#308)) ([814a293](814a293)) * club tropical w3 auth boxen ([#350](#350)) ([2266eb2](2266eb2)) * Customizable UI components ([#208](#208)) ([0a776fe](0a776fe)) * implement reverse paging ([#381](#381)) ([10f059a](10f059a)) * Improve upload component flow ([#285](#285)) ([ba9a3bf](ba9a3bf)) * simplify ([#591](#591)) ([d1dfdf0](d1dfdf0)) * Storybook story improvements ([#294](#294)) ([e0de2cc](e0de2cc)) ### Bug Fixes * fix w3console styling ([#320](#320)) ([74a298c](74a298c)) * remove authenticator class when registed ([#352](#352)) ([3668f3b](3668f3b)) * w3console polish ([#284](#284)) ([9a67365](9a67365)) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Alan Shaw <alan.shaw@protocol.ai>
🤖 I have created a release *beep* *boop* --- ## [1.2.0](react-v1.1.1...react-v1.2.0) (2023-11-30) ### Features * add a logout function ([#595](#595)) ([0995fd5](0995fd5)) * adds space-finder autocomplete combobox ([#268](#268)) ([3dcd647](3dcd647)) * allow users to set page size in W3APIProvider ([#308](#308)) ([814a293](814a293)) * club tropical w3 auth boxen ([#350](#350)) ([2266eb2](2266eb2)) * Customizable UI components ([#208](#208)) ([0a776fe](0a776fe)) * implement reverse paging ([#381](#381)) ([10f059a](10f059a)) * Improve upload component flow ([#285](#285)) ([ba9a3bf](ba9a3bf)) * simplify ([#591](#591)) ([d1dfdf0](d1dfdf0)) * Storybook story improvements ([#294](#294)) ([e0de2cc](e0de2cc)) ### Bug Fixes * fix w3console styling ([#320](#320)) ([74a298c](74a298c)) * homepage URL in package.json ([1229119](1229119)) * remove authenticator class when registed ([#352](#352)) ([3668f3b](3668f3b)) * w3console polish ([#284](#284)) ([9a67365](9a67365)) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
I've introduced a new package called react-ui that uses the headless components to build higher level components with some markup and styling. The markup is not customizable, but @cmunns has been proving out how we can make the styling customizable using CSS variables in #140
react-ui has 3 components that simply wrap the underlying react-{keyring|uploader|uploads-list} packages and one that brings them all together into a component that developers should be able to simply drop into their applications and start uploading files. I'm conflicted on whether we should merge this now and iterate on main or separate the headless UI components into their own PR and merge react-ui later once we've figured out the CSS variable story - looking for feedback!