Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: storacha/w3ui
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: react-keyring-v5.1.1
Choose a base ref
...
head repository: storacha/w3ui
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: react-keyring-v5.2.0
Choose a head ref
  • 17 commits
  • 110 files changed
  • 4 contributors

Commits on Mar 30, 2023

  1. chore(main): release react-uploader 4.0.1 (#457)

    🤖 I have created a release *beep* *boop*
    ---
    
    
    ##
    [4.0.1](react-uploader-v4.0.0...react-uploader-v4.0.1)
    (2023-03-30)
    
    
    ### Bug Fixes
    
    * tweak stylization of w3ui in react-uploader README
    ([#437](#437))
    ([3259e27](3259e27))
    
    ---
    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 <[email protected]>
    github-actions[bot] and Alan Shaw authored Mar 30, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    d5eb05e View commit details
  2. chore(main): release react-uploads-list 3.0.1 (#455)

    🤖 I have created a release *beep* *boop*
    ---
    
    
    ##
    [3.0.1](react-uploads-list-v3.0.0...react-uploads-list-v3.0.1)
    (2023-03-30)
    
    
    ### Bug Fixes
    
    * tweak READMEs for packages that release-please didn't release right
    ([#440](#440))
    ([845a6b6](845a6b6))
    
    ---
    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 <[email protected]>
    github-actions[bot] and Alan Shaw authored Mar 30, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    56eddef View commit details

Commits on Apr 6, 2023

  1. feat: get w3console looking acceptable on mobile (#500)

    Plenty of polish we could still do, but this takes care of the most
    egregious problems on smaller screens:
    
    
    https://user-images.githubusercontent.com/1113/230239853-c93deef4-f8fd-426c-8002-1a8ff192cd5c.mov
    
    We're using HeadlessUI's Dialog and Transition components to make the
    small-screen sidebar feel nice.
    Travis Vachon authored Apr 6, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    118cb22 View commit details
  2. chore(main): release vue-keyring 4.1.1 (#495)

    🤖 I have created a release *beep* *boop*
    ---
    
    
    ##
    [4.1.1](vue-keyring-v4.1.0...vue-keyring-v4.1.1)
    (2023-04-06)
    
    
    ### Bug Fixes
    
    * more email type
    ([#494](#494))
    ([355e794](355e794))
    
    ---
    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>
    github-actions[bot] authored Apr 6, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    adac99c View commit details

Commits on Apr 10, 2023

  1. feat: add warnings about the public and permanent nature of w3up uplo…

    …ads (#502)
    
    we'll probably want to rework this in the future, but I think this
    probably looks good enough for now:
    
    
    <img width="1223" alt="Screenshot 2023-04-07 at 1 47 15 PM"
    src="https://user-images.githubusercontent.com/1113/230676964-186cb768-c7a6-4fe2-8e92-b8e153e57418.png">
    <img width="369" alt="Screenshot 2023-04-07 at 1 47 29 PM"
    src="https://user-images.githubusercontent.com/1113/230676965-589803a8-9fde-4505-8d92-5273aaa3ad83.png">
    resolves #464
    Travis Vachon authored Apr 10, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    6cc58f8 View commit details
  2. fix: update @web3-storage/access dep to fix email + issue (#503)

    Trying to auth with an email with a + in it currently fails, upgrade to
    the latest version of @web3-storage/access which fixes that.
    
    While I was in here I did a bit of refactoring so that only
    `keyring-core` depends on `@web3-storage/access`
    Travis Vachon authored Apr 10, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    d3b0bba View commit details

Commits on Apr 11, 2023

  1. chore: remove @w3ui/react-ui package (#508)

    we're not going to keep developing this package, so remove it
    Travis Vachon authored Apr 11, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    6082f37 View commit details

Commits on Apr 26, 2023

  1. feat: remove space creator from sidebar (#509)

    this gives us a soft restriction on the number of spaces a user can
    create - we'll enforce this server-side in
    storacha/w3up#704
    Travis Vachon authored Apr 26, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    40bc621 View commit details

Commits on Apr 27, 2023

  1. feat: w3console cleanup and updates to packages to support it (#507)

    Integrate some learnings from creating a new app from the ground up with
    some tasks I've been meaning to do for a little while to clean up
    w3console. This is mostly either:
    a) extracting components to their own files OR
    b) lifting up types to eliminate 2-level-deep dependencies (ie, allowing
    w3console to only depend on the `@w3ui/react-*` packages rather than
    pulling in `@w3ui/*-core` and `multiformats`)
    Travis Vachon authored Apr 27, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    78aee2a View commit details

Commits on May 3, 2023

  1. fix: remove playground example (#513)

    since we deprecated and removed the `@w3ui/react` project it doesn't
    make sense to keep playground around - it was mainly there to help
    develop and test the "customizable" components that we're no longer
    using
    Travis Vachon authored May 3, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    12fd5f6 View commit details
  2. feat: upload progress (#499)

    Use the new `onUploadProgress` callback in `@web3-storage/upload-client`
    to add upload progress bars to w3console and the example apps.
    
    This PR also includes a decent amount of bugfixing in the example apps
    to get them working.
    
    
    https://user-images.githubusercontent.com/1113/230191386-f0f635f2-1008-4e1f-91e2-517a65b66e31.mov
    
    ---------
    
    Co-authored-by: Benjamin Goering <[email protected]>
    Travis Vachon and gobengo authored May 3, 2023

    Partially verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    We cannot verify signatures from co-authors, and some of the co-authors attributed to this commit require their commits to be signed.
    Copy the full SHA
    6c9de97 View commit details

Commits on May 8, 2023

  1. feat: update to latest version of ucanto and @web3-storage libraries (#…

    …514)
    
    delightfully simple
    Travis Vachon authored May 8, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    e1ee301 View commit details

Commits on May 9, 2023

  1. chore(main): release keyring-core 4.2.0 (#505)

    🤖 I have created a release *beep* *boop*
    ---
    
    
    ##
    [4.2.0](keyring-core-v4.1.1...keyring-core-v4.2.0)
    (2023-05-08)
    
    
    ### Features
    
    * update to latest version of ucanto and
    [@web3-storage](https://github.com/web3-storage) libraries
    ([#514](#514))
    ([e1ee301](e1ee301))
    * upload progress
    ([#499](#499))
    ([6c9de97](6c9de97))
    
    
    ### Bug Fixes
    
    * update @web3-storage/access dep to fix email + issue
    ([#503](#503))
    ([d3b0bba](d3b0bba))
    
    ---
    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>
    github-actions[bot] authored May 9, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    9435c69 View commit details
  2. chore(main): release uploader-core 5.1.0 (#511)

    🤖 I have created a release *beep* *boop*
    ---
    
    
    ##
    [5.1.0](uploader-core-v5.0.0...uploader-core-v5.1.0)
    (2023-05-09)
    
    
    ### Features
    
    * update to latest version of ucanto and
    [@web3-storage](https://github.com/web3-storage) libraries
    ([#514](#514))
    ([e1ee301](e1ee301))
    * upload progress
    ([#499](#499))
    ([6c9de97](6c9de97))
    * w3console cleanup and updates to packages to support it
    ([#507](#507))
    ([78aee2a](78aee2a))
    
    ---
    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>
    github-actions[bot] authored May 9, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    0f3919e View commit details
  3. chore(main): release uploads-list-core 3.1.0 (#515)

    🤖 I have created a release *beep* *boop*
    ---
    
    
    ##
    [3.1.0](uploads-list-core-v3.0.0...uploads-list-core-v3.1.0)
    (2023-05-09)
    
    
    ### Features
    
    * update to latest version of ucanto and
    [@web3-storage](https://github.com/web3-storage) libraries
    ([#514](#514))
    ([e1ee301](e1ee301))
    
    ---
    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 <[email protected]>
    github-actions[bot] and Travis Vachon authored May 9, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    28c4497 View commit details
  4. chore(main): release react-uploader 4.1.0 (#512)

    🤖 I have created a release *beep* *boop*
    ---
    
    
    ##
    [4.1.0](react-uploader-v4.0.1...react-uploader-v4.1.0)
    (2023-05-09)
    
    
    ### Features
    
    * update to latest version of ucanto and
    [@web3-storage](https://github.com/web3-storage) libraries
    ([#514](#514))
    ([e1ee301](e1ee301))
    * upload progress
    ([#499](#499))
    ([6c9de97](6c9de97))
    * w3console cleanup and updates to packages to support it
    ([#507](#507))
    ([78aee2a](78aee2a))
    
    ---
    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 <[email protected]>
    github-actions[bot] and Travis Vachon authored May 9, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    aa53bf3 View commit details
  5. chore(main): release react-keyring 5.2.0 (#506)

    🤖 I have created a release *beep* *boop*
    ---
    
    
    ##
    [5.2.0](react-keyring-v5.1.1...react-keyring-v5.2.0)
    (2023-05-09)
    
    
    ### Features
    
    * update to latest version of ucanto and
    [@web3-storage](https://github.com/web3-storage) libraries
    ([#514](#514))
    ([e1ee301](e1ee301))
    * upload progress
    ([#499](#499))
    ([6c9de97](6c9de97))
    * w3console cleanup and updates to packages to support it
    ([#507](#507))
    ([78aee2a](78aee2a))
    
    
    ### Bug Fixes
    
    * update @web3-storage/access dep to fix email + issue
    ([#503](#503))
    ([d3b0bba](d3b0bba))
    
    ---
    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 <[email protected]>
    github-actions[bot] and Travis Vachon authored May 9, 2023

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    ebba1bf View commit details
Showing with 1,231 additions and 7,864 deletions.
  1. +7 −7 .release-please-manifest.json
  2. +0 −9 README.md
  3. +3 −3 docs/react-keyring.md
  4. +4 −2 docs/react-uploader.md
  5. +4 −2 docs/react-uploads-list.md
  6. +6 −5 examples/react/file-upload/src/ContentPage.jsx
  7. +24 −0 examples/react/file-upload/src/components/Loader.jsx
  8. +6 −5 examples/react/multi-file-upload/src/ContentPage.jsx
  9. +24 −0 examples/react/multi-file-upload/src/components/Loader.jsx
  10. +0 −24 examples/react/playground/.gitignore
  11. +0 −19 examples/react/playground/.storybook/main.cjs
  12. +0 −9 examples/react/playground/.storybook/preview-head.html
  13. +0 −12 examples/react/playground/.storybook/preview.js
  14. +0 −23 examples/react/playground/README.md
  15. +0 −13 examples/react/playground/index.html
  16. +0 −43 examples/react/playground/package.json
  17. BIN examples/react/playground/public/favicon.ico
  18. +0 −18 examples/react/playground/src/App.jsx
  19. +0 −178 examples/react/playground/src/ContentPage.jsx
  20. +0 −59 examples/react/playground/src/components/Authenticator.jsx
  21. +0 −32 examples/react/playground/src/index.css
  22. +0 −11 examples/react/playground/src/index.jsx
  23. BIN examples/react/playground/src/logo.png
  24. +0 −13 examples/react/playground/src/stories/AuthenticationSubmitted.stories.tsx
  25. +0 −13 examples/react/playground/src/stories/Authenticator.stories.tsx
  26. +0 −118 examples/react/playground/src/stories/Introduction.mdx
  27. +0 −13 examples/react/playground/src/stories/SpaceCreator.stories.tsx
  28. +0 −13 examples/react/playground/src/stories/SpaceCreatorCreating.stories.tsx
  29. +0 −34 examples/react/playground/src/stories/SpaceFinder.stories.tsx
  30. +0 −14 examples/react/playground/src/stories/Uploader.stories.tsx
  31. +0 −189 examples/react/playground/src/stories/UploadsList.stories.tsx
  32. +0 −10 examples/react/playground/vite.config.js
  33. +4 −6 examples/react/w3console/package.json
  34. +9 −5 examples/react/w3console/src/components/Authenticator.tsx
  35. +80 −20 examples/react/w3console/src/components/Layout.tsx
  36. +1 −1 examples/react/w3console/src/components/Loader.tsx
  37. +27 −0 examples/react/w3console/src/components/SpaceEnsurer.tsx
  38. +1 −1 examples/react/w3console/src/components/SpaceFinder.tsx
  39. +41 −0 examples/react/w3console/src/components/SpaceRegistrar.tsx
  40. +79 −0 examples/react/w3console/src/components/SpaceSection.tsx
  41. +76 −24 examples/react/w3console/src/components/Uploader.tsx
  42. +2 −2 examples/react/w3console/src/components/UploadsList.tsx
  43. +1 −5 examples/react/w3console/src/components/W3API.tsx
  44. +2 −4 examples/react/w3console/src/components/services.ts
  45. +19 −0 examples/react/w3console/src/pages/SpaceSelector.tsx
  46. +4 −169 examples/react/w3console/src/pages/index.tsx
  47. +4 −3 examples/solid/file-upload/src/ContentPage.jsx
  48. +1 −1 examples/solid/file-upload/src/components/Authenticator.jsx
  49. +25 −0 examples/solid/file-upload/src/components/Loader.jsx
  50. +4 −3 examples/solid/multi-file-upload/src/ContentPage.jsx
  51. +25 −0 examples/solid/multi-file-upload/src/components/Loader.jsx
  52. +7 −3 examples/vue/file-upload/src/ContentPage.vue
  53. +17 −0 examples/vue/file-upload/src/components/Loader.vue
  54. +4 −4 package.json
  55. +13 −0 packages/keyring-core/CHANGELOG.md
  56. +4 −4 packages/keyring-core/package.json
  57. +6 −2 packages/keyring-core/src/index.ts
  58. +14 −0 packages/react-keyring/CHANGELOG.md
  59. +3 −4 packages/react-keyring/package.json
  60. +1 −0 packages/react-keyring/src/index.ts
  61. +16 −15 packages/react-keyring/src/providers/Keyring.tsx
  62. +16 −0 packages/react-uploader/CHANGELOG.md
  63. +3 −4 packages/react-uploader/package.json
  64. +12 −13 packages/react-uploader/src/Uploader.tsx
  65. +1 −1 packages/react-uploader/src/index.ts
  66. +27 −9 packages/react-uploader/src/providers/Uploader.tsx
  67. +7 −0 packages/react-uploads-list/CHANGELOG.md
  68. +1 −1 packages/react-uploads-list/package.json
  69. +0 −2 packages/react/CHANGELOG.md
  70. +0 −232 packages/react/LICENSE.md
  71. +0 −21 packages/react/README.md
  72. +0 −50 packages/react/package.json
  73. +0 −90 packages/react/src/Authenticator.tsx
  74. +0 −104 packages/react/src/SpaceCreator.tsx
  75. +0 −114 packages/react/src/SpaceFinder.tsx
  76. +0 −184 packages/react/src/Uploader.tsx
  77. +0 −70 packages/react/src/UploadsList.tsx
  78. +0 −16 packages/react/src/W3Upload.tsx
  79. +0 −7 packages/react/src/index.ts
  80. +0 −61 packages/react/src/providers/W3API.tsx
  81. +0 −5 packages/react/src/styles/all.css
  82. +0 −55 packages/react/src/styles/authenticator.css
  83. +0 −27 packages/react/src/styles/base.css
  84. +0 −58 packages/react/src/styles/space-creator.css
  85. +0 −127 packages/react/src/styles/space-finder.css
  86. +0 −166 packages/react/src/styles/uploader.css
  87. +0 −64 packages/react/src/styles/uploads-list.css
  88. +0 −9 packages/react/tsconfig.json
  89. +3 −4 packages/solid-keyring/package.json
  90. +1 −0 packages/solid-keyring/src/index.ts
  91. +13 −9 packages/solid-keyring/src/providers/Keyring.ts
  92. +1 −1 packages/solid-uploader/src/index.ts
  93. +26 −11 packages/solid-uploader/src/providers/Uploader.ts
  94. +1 −1 packages/solid-uploads-list/package.json
  95. +9 −0 packages/uploader-core/CHANGELOG.md
  96. +3 −3 packages/uploader-core/package.json
  97. +10 −5 packages/uploader-core/src/index.ts
  98. +7 −0 packages/uploads-list-core/CHANGELOG.md
  99. +3 −3 packages/uploads-list-core/package.json
  100. +1 −1 packages/uploads-list-core/src/index.ts
  101. +7 −0 packages/vue-keyring/CHANGELOG.md
  102. +3 −4 packages/vue-keyring/package.json
  103. +1 −0 packages/vue-keyring/src/index.ts
  104. +17 −12 packages/vue-keyring/src/providers/Keyring.ts
  105. +1 −1 packages/vue-uploader/src/index.ts
  106. +30 −9 packages/vue-uploader/src/providers/Uploader.ts
  107. +459 −5,129 pnpm-lock.yaml
  108. +0 −10 rollup.config.ts
  109. +0 −1 tsconfig.base.json
  110. +0 −3 tsconfig.json
14 changes: 7 additions & 7 deletions .release-please-manifest.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"packages/keyring-core": "4.1.1",
"packages/uploader-core": "5.0.0",
"packages/uploads-list-core": "3.0.0",
"packages/react-keyring": "5.1.1",
"packages/react-uploader": "4.0.0",
"packages/react-uploads-list": "3.0.0",
"packages/vue-keyring": "4.1.0",
"packages/keyring-core": "4.2.0",
"packages/uploader-core": "5.1.0",
"packages/uploads-list-core": "3.1.0",
"packages/react-keyring": "5.2.0",
"packages/react-uploader": "4.1.0",
"packages/react-uploads-list": "3.0.1",
"packages/vue-keyring": "4.1.1",
"packages/vue-uploader": "4.0.0",
"packages/vue-uploads-list": "3.0.0",
"packages/solid-keyring": "4.1.0",
9 changes: 0 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -45,15 +45,6 @@ This repo contains reusauble UI modules for the web3.storage w3up beta in your f

A demo of the list of uploads that have been made to an account.

## Storybook

To run our [Storybook](https://storybook.js.org/), run:

```bash
cd examples/react/playground
pnpm run storybook
```

## w3console

To run w3console, a full-featured console for web3.storage and demonstration of our React components, run:
6 changes: 3 additions & 3 deletions docs/react-keyring.md
Original file line number Diff line number Diff line change
@@ -32,15 +32,15 @@ Must be used inside of a [`KeyringProvider`](#keyringprovider).

#### `Authenticator.Form`

A `form` element designed to work with the [`Authenticator`](#authenticator) component. Any passed props will be passed along to the `form` element.
A `form` element designed to be used inside of an [`Authenticator`](#authenticator) component. Any passed props will be passed along to the `form` element.

#### `Authenticator.Email`

An email `input` element designed to work with [`Authenticator.Form`](#authenticatorform). Any passed props will be passed along to the `input` component.
An email `input` element designed to be used inside of an [`Authenticator.Form`](#authenticatorform). Any passed props will be passed along to the `input` component.

#### `Authenticator.CancelButton`

A `button` element that will cancel space registration, designed to work with [`Authenticator.Form`](#authenticatorform). Any passed props will be passed along to the `button` element.
A `button` element that will cancel space registration, designed to be used inside of an [`Authenticator.Form`](#authenticatorform). Any passed props will be passed along to the `button` element.

### `KeyringProvider`

6 changes: 4 additions & 2 deletions docs/react-uploader.md
Original file line number Diff line number Diff line change
@@ -28,19 +28,21 @@ Top-level component of the headless Uploader.

Designed to be used with [`Uploader.Form`](#uploaderform) and [`Uploader.Input`](#uploaderinput) to easily create a custom component for uploading files to web3.storage.

Must be used inside of an [`UploaderProvider`](#uploaderprovider).

#### `Uploader.Form`

Form component for the headless Uploader.

Renders a `form` element designed to work with [`Uploader`](#uploader) that will send files from an [`Uploader.Input`](#uploaderinput) component to the web3.storage service when the form is submitted.
Renders a `form` element designed to be used inside of an [`Uploader`](#uploader) that will send files from an [`Uploader.Input`](#uploaderinput) component to the web3.storage service when the form is submitted.

Any passed props will be passed along to the `input` element.

#### `Uploader.Input`

Input component for the headless Uploader.

Renders a file `input` element designed to work with [`Uploader`](#uploader). When used inside of an [`Uploader.Form`](#uploaderform), files added to the input will be uploaded when the form is submitted.
Renders a file `input` element designed to be used inside of an [`Uploader`](#uploader). When used inside of an [`Uploader.Form`](#uploaderform), files added to the input will be uploaded when the form is submitted.

### `UploaderProvider`

6 changes: 4 additions & 2 deletions docs/react-uploads-list.md
Original file line number Diff line number Diff line change
@@ -28,19 +28,21 @@ Top-level component of the headless UploadsList.

Designed to be used with [`UploadsList.NextButton`](#uploadslistnextbutton), [`UploadsList.ReloadButton`](#uploadslistreloadbutton), etc to easily create a custom component for listing uploads in a web3.storage space.

Must be used inside of an [`UploadsListProvider`](#uploadslistprovider).

#### `UploadsList.NextButton`

Button that loads the next page of results in an UploadsList.

Renders a `button` element designed to work with [`UploadsList`](#uploadslist). When pressed, will request the next page of uploads from the service.
Renders a `button` element designed to be used inside of an [`UploadsList`](#uploadslist). When pressed, will request the next page of uploads from the service.

Any passed props will be passed along to the `button` element.

#### `UploadsList.ReloadButton`

Button that reloads an UploadsList.

Renders a `button` element designed to work with [`UploadsList`](#uploadslist). When pressed, will reload list data from the service.
Renders a `button` element designed to be used inside of an [`UploadsList`](#uploadslist). When pressed, will reload list data from the service.

Any passed props will be passed along to the `button` element.

11 changes: 6 additions & 5 deletions examples/react/file-upload/src/ContentPage.jsx
Original file line number Diff line number Diff line change
@@ -2,10 +2,11 @@ import React, { useState } from 'react'
import { useUploader } from '@w3ui/react-uploader'
import { withIdentity } from './components/Authenticator'
import './spinner.css'
import Loader from './components/Loader'

export function ContentPage () {
const [{ storedDAGShards }, uploader] = useUploader()
const [file, setFile] = useState(null)
const [{ storedDAGShards, uploadProgress }, uploader] = useUploader()
const [file, setFile] = useState({})
const [dataCid, setDataCid] = useState('')
const [status, setStatus] = useState('')
const [error, setError] = useState(null)
@@ -27,7 +28,7 @@ export function ContentPage () {
}

if (status === 'uploading') {
return <Uploading file={file} storedDAGShards={storedDAGShards} />
return <Uploading file={file} storedDAGShards={storedDAGShards} uploadProgress={uploadProgress} />
}

if (status === 'done') {
@@ -45,9 +46,9 @@ export function ContentPage () {
)
}

const Uploading = ({ file, storedDAGShards }) => (
const Uploading = ({ file, storedDAGShards, uploadProgress }) => (
<div className='flex items-center'>
<div className='spinner mr3 flex-none' />
<Loader className='mr3' uploadProgress={uploadProgress} />
<div className='flex-auto'>
<p className='truncate'>Uploading DAG for {file.name}</p>
{storedDAGShards.map(({ cid, size }) => (
24 changes: 24 additions & 0 deletions examples/react/file-upload/src/components/Loader.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
function StatusLoader ({ progressStatus }) {
const { total, loaded, lengthComputable } = progressStatus
if (lengthComputable) {
const percentComplete = Math.floor((loaded / total) * 100)
return (
<div className='relative w2 h5 ba b--white flex flex-column justify-end'>
<div className='bg-white w100' style={{ height: `${percentComplete}%` }}>
</div>
</div>
)
} else {
return <ArrowPathIcon className='animate-spin h-4 w-4' />
}
}

export default function Loader ({ uploadProgress, className = '' }) {
return (
<div className={`${className} flex flex-row`}>
{Object.values(uploadProgress).map(
status => <StatusLoader progressStatus={status} key={status.url} />
)}
</div>
)
}
11 changes: 6 additions & 5 deletions examples/react/multi-file-upload/src/ContentPage.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { useState } from 'react'
import { useUploader } from '@w3ui/react-uploader'
import { withIdentity } from './components/Authenticator'
import Loader from './components/Loader'
import './spinner.css'

export function ContentPage () {
const [{ storedDAGShards }, uploader] = useUploader()
const [{ storedDAGShards, uploadProgress }, uploader] = useUploader()
const [files, setFiles] = useState([])
const [allowDirectory, setAllowDirectory] = useState(false)
const [wrapInDirectory, setWrapInDirectory] = useState(false)
@@ -33,7 +34,7 @@ export function ContentPage () {
}

if (status === 'uploading') {
return <Uploading files={files} storedDAGShards={storedDAGShards} />
return <Uploading files={files} storedDAGShards={storedDAGShards} uploadProgress={uploadProgress} />
}

if (status === 'done') {
@@ -60,16 +61,16 @@ export function ContentPage () {
<input type='checkbox' value={wrapInDirectory} onChange={e => setWrapInDirectory(e.target.checked)} /> Wrap file in a directory
</label>
</div>
)
)
: null}
<button type='submit' className='ph3 pv2'>Upload</button>
</form>
)
}

const Uploading = ({ files, storedDAGShards }) => (
const Uploading = ({ files, storedDAGShards, uploadProgress }) => (
<div className='flex items-center'>
<div className='spinner mr3 flex-none' />
<Loader className='mr3' uploadProgress={uploadProgress} />
<div className='flex-auto'>
<p className='truncate'>Uploading DAG for {files.length > 1 ? `${files.length} files` : files[0].name}</p>
{storedDAGShards.map(({ cid, size }) => (
24 changes: 24 additions & 0 deletions examples/react/multi-file-upload/src/components/Loader.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
function StatusLoader ({ progressStatus }) {
const { total, loaded, lengthComputable } = progressStatus
if (lengthComputable) {
const percentComplete = Math.floor((loaded / total) * 100)
return (
<div className='relative w2 h5 ba b--white flex flex-column justify-end'>
<div className='bg-white w100' style={{ height: `${percentComplete}%` }}>
</div>
</div>
)
} else {
return <ArrowPathIcon className='animate-spin h-4 w-4' />
}
}

export default function Loader ({ uploadProgress, className = '' }) {
return (
<div className={`${className} flex flex-row`}>
{Object.values(uploadProgress).map(
status => <StatusLoader progressStatus={status} key={status.url} />
)}
</div>
)
}
24 changes: 0 additions & 24 deletions examples/react/playground/.gitignore

This file was deleted.

19 changes: 0 additions & 19 deletions examples/react/playground/.storybook/main.cjs

This file was deleted.

9 changes: 0 additions & 9 deletions examples/react/playground/.storybook/preview-head.html

This file was deleted.

12 changes: 0 additions & 12 deletions examples/react/playground/.storybook/preview.js

This file was deleted.

23 changes: 0 additions & 23 deletions examples/react/playground/README.md

This file was deleted.

13 changes: 0 additions & 13 deletions examples/react/playground/index.html

This file was deleted.

43 changes: 0 additions & 43 deletions examples/react/playground/package.json

This file was deleted.

Binary file removed examples/react/playground/public/favicon.ico
Binary file not shown.
Loading