feat: w3console example app #255
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 3d563c2:
|
when I actually tried to use these components I ran into a number of issues: a) needed more classes in the authenticator to style it properly b) needed an `onUploadComplete` callback in the `Uploader` in order to reload the uploads list post-upload c) decided to rework the `Uploader` to keep the upload dropbox visible at all times d) needed to move `useUploaderComponent` inside the `Uploader` that provides its context - it was totally broken as-is e) restructured the `UploadsList` and added more styles
|
this PR originally had a bunch of changes to the customizable components, but I decided to move them to the upstream PR: |
this is EXCELLENT - we can use CSS variables for component customization without going outside Tailwind's design system. 😍😍😍
|
Rad! you probably got this figured out already but note that the |
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>
License: MIT Signed-off-by: Oli Evans <oli@protocol.ai>
|
chatted with @olizilla this morning - he's reviewed my changes and I've reviewed his, so merging this to make coordination and planning easier - it's a self-contained example so pretty low risk. |
travis
pushed a commit
that referenced
this pull request
Mar 23, 2023
🤖 I have created a release *beep* *boop* --- ## 1.0.0 (2023-03-23) ### ⚠ BREAKING CHANGES * use new account model ([#400](#400)) ### Features * add terms of service page ([#417](#417)) ([6deb24d](6deb24d)) * 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)) * delegate access to spaces ([#293](#293)) ([441d757](441d757)) * import a space into w3console ([#309](#309)) ([a69a95b](a69a95b)) * Improve upload component flow ([#285](#285)) ([ba9a3bf](ba9a3bf)) * publish console to IPFS & Cloudflare from CI ([#287](#287)) ([e2a833e](e2a833e)) * Storybook story improvements ([#294](#294)) ([e0de2cc](e0de2cc)) * use new account model ([#400](#400)) ([66dd20b](66dd20b)) * w3console example app ([#255](#255)) ([df08029](df08029)) ### Bug Fixes * add _headers ([#418](#418)) ([4eb1da1](4eb1da1)) * 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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Using the Customizable components in this app drove a few important bugfixes and improvements in those components, so I'm setting this PR to merge into that PR for now - I think it may make sense to bundle this together with those changes in general. We need to keep iterating on the visual design, but that doesn't necessarily need to happen before merge.
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