feat: "Headless" UI components #136
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 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 8645fbb:
|
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.
This was referenced Dec 6, 2022
UploadsList headless and customizable components
This was referenced Dec 7, 2022
add "headless" Authenticator component and use it to build a "customizable" SimpleAuthenticator that works the way the Authenticator components in our examples work
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>
travis
added a commit
that referenced
this pull request
Feb 8, 2023
🤖 I have created a release *beep* *boop* --- ## [3.0.0](react-keyring-v2.1.0...react-keyring-v3.0.0) (2023-02-06) ### ⚠ BREAKING CHANGES * no breaking changes, but a major version bump because I made an error operating release-please ### Features * "Headless" UI components ([#136](#136)) ([46583e0](46583e0)) * delegate access to spaces ([#293](#293)) ([441d757](441d757)) * import a space into w3console ([#309](#309)) ([a69a95b](a69a95b)) --- 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@dag.house>
travis
added a commit
that referenced
this pull request
Feb 8, 2023
🤖 I have created a release *beep* *boop* --- ## [2.1.0](react-uploads-list-v2.0.1...react-uploads-list-v2.1.0) (2023-02-06) ### Features * "Headless" UI components ([#136](#136)) ([46583e0](46583e0) ### Bug Fixes * load first page of uploads list in provider ([#288](#288)) ([6778d6c](6778d6c)) --- 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@dag.house>
travis
added a commit
that referenced
this pull request
Feb 8, 2023
🤖 I have created a release *beep* *boop* --- ## [3.1.0](react-uploader-v3.0.1...react-uploader-v3.1.0) (2023-02-06) ### Features * "Headless" UI components ([#136](#136)) ([46583e0](46583e0)) --- 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@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.
"Headless" UI React components
react-{keyring|uploader|uploads-list}now all provide "headless" UI components modeled after https://headlessui.com/The Big Idea with these is that they provide functionality and look like regular UI components but don't force developers into any particular markup or styling choices. They're very useful "lego" building blocks that work together to encapsulate the details of interacting with our services and let developer focus on building UI however they prefer to do so. Properties like
classNameare passed along to the underlying component.As of this writing, it's not possible to change the markup tag for some of the headless components - this should be fixed (possibly in this PR?) by adding an
asproperty to these components similar to HeadlessUI (https://headlessui.com/react/menu#menu)