storacha-network / w3ui Goto Github PK

it would be nice to have a headless component that used reload and next from the UploadsListProvider to make it easy for developers to implement an infinite scrolling uploads list.

I think it would look something like:

function SimpleInfiniteScroll(){
  return (
    <UploadsList>
      <InfiniteScrollList/>
    </UploadsList>
  )
}

function Upload({dataCID, carCID, uploadedAt, uploaderDID}){
  return (
    <div>
      {dataCID} was uploaded at {uploadedAt}
    </div>
  )
}

function SimpleInfiniteScroll(){
  return (
    <UploadsList>
      <InfiniteScrollList itemComponent={Upload}/>
    </UploadsList>
  )
}

• Sign up / Sign in
• Single file upload
• Multiple file upload
• Uploads table

Fix here: main...fix/updateReturnTypes

mirror the work in #145 to the Vue and SolidJS packages

It won't have uplaoded anything because it is not validated.

• Sign up / Sign in
• Single file upload
• Multiple file upload
• Uploads table

Hello,

The link to the discord channel in the contributing guidelines doesn't seem to work: https://github.com/web3-storage/w3ui/blob/2991ad163c27a5a2a898156fb53c2d0cd99b8b3f/CONTRIBUTING.md#questions

The link brings me to an empty discord page that says there are no text channels or I don't have permission to access them. What is the name of the discord server and how can I gain access?

Thanks!

UI testing! A very special hell that we should probably brave sooner than later.

We currently have a codesandbox integration configured that at least builds the example apps in CI.

We should add tests similar to the ones in the HeadlessUI component library, eg:

https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/combobox/combobox.test.tsx

Now that we have a bit of complexity in this library, some basic testing will probably make our lives easier down the road.

Before this work can start, the following must be complete:

• #120
• user flows @jchris which isn't yet ticketed but referenced here: storacha-network/w3up#220

For the last 2 days, the react uploads list has been returning undefined for the dataCid and carCids. Some initial debugging of the network requests looks like the API is not returning the CIDs... has something recently changed?

Thanks for all of your hard work!

For reference, my code is here: http://github.com/codyzu/ipfs-drive

Integrate ucanto 0.9 and the new upload-client so w3ui can work with the new upload-api/access-api.

Per #120 (comment) introduce a new package called react-ui that contains "customizable" components.

This work has started in #136 and @cmunns has a prototype for how the CSS-variable-based customization could work in #140

Components in this library will utilize the "headless" components from #145. Developers should be able to use them out of the box, and we should document the CSS variables they can use to customize the look and feel of the components when used in third party apps.

bug when registering. traces down to here https://github.com/web3-storage/w3ui/blob/main/packages/wallet-core/src/index.ts#L119

(I'm describing my journey of trying to develop a Vue app during the UCAN build apps with IPFS workshop in the Hackerbase)

There's the fancy docs, which are:

• missing the docs for the Provider
• use an uploader variable which is not defined
• use UploaderProviderInjectionKey.encodeFile which is called uploadFile in the latest library version

There's the github docs which

• have the provider
• have a bare-bones UI
• are very different to the code I copied from the fancy docs

There's the codesandbox (linked in the fancy docs) which

• work
• are a bit more similar to the fancy docs, but also different variable names again and
• much more UI stuff

Would be great to have a single source of truth 😅

Also, all docs are based on Vue 2 format, which is a bit sad for me 😋 (but not bad per se)

• Rename in this repo
• Rename in website repo
• Republish modules to npm under new names
• Add npm deprecation messages to @w3ui/wallet-core & @w3ui/*-wallet

Should then allow us to publish modules to npm.

Depends on Gozala/actor#23

If I use UploaderProvider in a Next.js application it works fine in dev mode but breaks the app in production.

A very simple demonstration of this issue can be found in https://github.com/web3-storage/w3ui-swc-minify-bug - simply clone the repo and run npm install && npm run build && npm start to see the error.

I've tracked this down to something in the SWC minifier - as demonstrated on the fixed branch of the w3ui-swc-minify-bug repo the issue goes away if you disable SWC minification:

https://github.com/web3-storage/w3ui-swc-minify-bug/tree/fixed

I don't think there's anything for us to do about this - creating this issue to track the bug I'm about to file in the Next.js repository.

per this comment:

#120 (comment)

add "headless" components to the three react packages:

1. Uploader in @w3ui/react-uploader
2. UploadsList in @w3ui/react-uploads-list
3. Authenticator and Login in @w3ui/react-keyring

This work is ongoing in #136 and #141 and derived from #120

We should make it so most have have allowDirectory=true, without writing any code or UI. In the special case where you want to disallow directory selection, we can provide the option.

The is inline with this change from w3console web3-storage/w3console@c31a8b3

Can just be in markdown in repo for MVP

• Sign up / Sign in
• Single file upload
• Multiple file upload
• Uploads table

I only see 0.0.0 here https://www.npmjs.com/package/@w3ui/react-uploader

With these updates, we are hoping to target users who want to add uploads to their website (e.g., by dropping a widget in to their site)

Work will go into the new w3console repo that @travis is assembling now. (location currently unknown)

• Make w3ui components default theme look like w3ui website (see below)
• Rebuild w3console in latest version of w3ui, refine style to match w3ui default style
• Use lessons learned in w3console layout to inform how w3ui monolithic components will look

Notes from @jchris
I like how the color shifts across the steps, it does a good job of saying step 1, 2, 3

maybe the drop target uploader and the list aren't on the screen on the same time in the monolithic component? like a link to the uploads list from the red screen, that minimizes (but doesn't hide) the drop target, and shows the upload list. color can shift to purple if that's not too extra.

This ticket relates to work found here: #120

Source maps don't seem to be working.

to get some level of testing and to document how to use the "Customizable UI" components built in #147 and #148, we should rework the examples to use them once they are complete

#140 starts to move in this direction, but doesn't use the customizable components because they aren't built yet

matching the next function that loads the next page of values, we should have a prev function that remembers the cursor of the page before the current one and navigates to it when prev is called.

this should be as simple as remembering the previous cursor in a new useState and using it in a new prev function that looks very similar to next

mirror the work in #147 to Vue and SolidJS once it's stable

Hello,

I built a simple application based on our work at your NodeConf workshop (great workshop, by the way!).

Repo: https://github.com/codyzu/ipfs-drive
Deployed application: https://codyzu.github.io/ipfs-drive

I have a simple login/logout workflow. Login uses registerAndStoreIdentity and logout uses unloadAndRemoveIdentity .

Workflow

Login + verify email
Add uploads
Logout
Login + verify email

Expected behavior

I expected to see my uploads after logging out and then back in.

Actual behavior

Every time I logout and then login, all of my uploads are "lost".

Observations

Every time I login, I am assigned a new signing key DID. I assume this has something to do with why the upload list disappears.

Is this the expected behavior? If I compare it to the web3.storage web interface, if I logout then login (conceptually this feels like the same workflow), my uploads remain.

Maybe I have too much of a web 2.0 perspective. However, I would still expect if I logged in with 2 different devices, that I would see the same uploads. This does not appear to be the case.

Can you help me understand what is happening? Thanks! Sorry, I would have posted this discord, but I wasn't able to access the server (#101 )

This is currently implemented as a provider, but it may be more flexible to implement this similar to the solid component - a "resource" that takes an identity.

The code snippets on the website need updating. They are simplified, and mostly just have styles removed, but also have some code simplifications to make it as easy as possible to understand.

refs #117

Any app that makes use of IPFS is likely to render CIDs.

I was thinking it would be nice to create a CID component that has the following features:

• Can render a short version of the CID, e.g. bafy...hmfm
• Copy to clipboard
• Link to gateway(s)

Have youse considered anything like this?

@jchris put together a user flow that we'd like to encapsulate into a single component that developers can drop into a webpage or app:

#120 (comment)

we should implement this component as part of (or as a follow-up to) the work in progress in #136

A couple of places in the app code that smell like they could be tucked in:

<AuthProvider>
      <UploaderProvider>
        <UploadsListProvider>
          <IdentityLoader>

Also here:

import { useUploader } from '@w3ui/react-uploader'
import { useUploadsList } from '@w3ui/react-uploads-list'
import { withIdentity } from './components/Authenticator'

I think the fix would be to have a monolithic upload component that includes login automatically, and has an easy way to enable lists with custom markup. Also we need to include the Authenticator so no one has to write it.

I like the withIdentity style of wrapping ContentPage, maybe we can make a monolithic withUploader?

It would be wonderful to also have GitHub auth supported as with http://web3.storage in addition to the email auth.

• Sign up / Sign in
• Single file upload
• Multiple file upload
• Uploads table

• Sign up / Sign in
• Single file upload
• Multiple file upload
• Uploads table