feat: support as prop in uploader component
#236
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 was referenced Jan 19, 2023
This was referenced Jan 27, 2023
travis
added a commit
that referenced
this pull request
Feb 3, 2023
🤖 I have created a release *beep* *boop* --- ## [2.1.0](react-keyring-v2.0.1...react-keyring-v2.1.0) (2023-02-03) ### Features * "Headless" UI components ([#136](#136)) ([46583e0](46583e0)) * delegate access to spaces ([#293](#293)) ([441d757](441d757)) * support `as` prop in uploader component ([#236](#236)) ([c802e99](c802e99)), closes [#235](#235) --- 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: Travis Vachon <travis.vachon@gmail.com> Co-authored-by: Travis Vachon <travis@dag.house>
This was referenced Mar 23, 2023
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.
follow the pattern set by HeadlessUI and others of supporting the very useful "as" property in the uploader component. this:
buttonto anatag)FragmenttoasSee https://headlessui.com/react/menu#rendering-a-different-element-for-a-component for more documentation on how this is commonly used
This introduces a new dependency on ariakit-react-utils (https://ariakit.org/) to avoid reproducing the intricate puzzle of types in the
createComponentandcreateElementfunctions from that library. I suspect other utilities will be useful as we improve the accessibility defaults of this library so I think this dependency is worth adding, but we could copy/paste the specific code we need with proper attribution if we want to avoid pulling in the whole library.resolves #235