👩‍🎤 Headless, type-safe, UI components for the next generation Web3.Storage APIs.

Overview
Comments
  • Update w3ui website examples

    Update w3ui website examples

    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

    opened by alanshaw 6
  • chore: move Uploader into react-uploader package

    chore: move Uploader into react-uploader package

    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.

    @alanshaw @cmunns curious what you think about this - happy to move the uploader back if we decide that's a better structure

    opened by travis 6
  • feat!: integrate new ucanto and upload-client

    feat!: integrate new ucanto and upload-client

    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.

    TODO: be more explicit about changes

    opened by alanshaw 5
  • fix: run babel on .js files as well as .ts

    fix: run babel on .js files as well as .ts

    This adds .js to the set of file extensions processed by babel.

    I'm hoping that this will fix #160, since after running npm run build with this change I no longer see any class private members in packages/react-keyring/build/esm/index.js, which is where the example was failing before.

    The downside of this change is that the rolled-up index.js grew from 198kb to 300kb for react-keyring. I assume the other modules are affected as well.

    I also haven't been able to test this in codesandbox, since I don't know how to make it depend on an unreleased npm package (or if that's even possible).

    opened by yusefnapora 4
  • Broken uploads list

    Broken uploads list

    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

    opened by codyzu 3
  • fix: update react uploads list example

    fix: update react uploads list example

    one slightly weird thing about this is that I realized we need to manually call next to get the next page of results - not sure if that's intentional and we might want to add that to the react-uploads-list package for developer convenience

    opened by travis 2
  • Fix/uploads list data

    Fix/uploads list data

    the data passed back from list has changed, so these examples need to be updated. as I was digging in I realized the examples don't seem to be working and I think we need to dig deeper into the packages to understand why, so I'm checkpointing here before I dig into that

    opened by travis 2
  • chore(main): release solid-uploads-list 2.0.1

    chore(main): release solid-uploads-list 2.0.1

    opened by github-actions[bot] 2
  • chore(main): release react-uploads-list 2.0.1

    chore(main): release react-uploads-list 2.0.1

    opened by github-actions[bot] 2
  • chore(main): release vue-uploads-list 2.0.1

    chore(main): release vue-uploads-list 2.0.1

    opened by github-actions[bot] 2
  • chore(main): release solid-uploader 3.0.1

    chore(main): release solid-uploader 3.0.1

    opened by github-actions[bot] 2
  • Missing Space

    Missing Space

    Hi, I'm getting this error Unhandled Runtime Error: missing space while trying to upload a file to ipfs using w3ui.

    Here is the code I wrote for it

    import React, { useState } from 'react'
    import { useUploader } from '@w3ui/react-uploader'
    
    export default function Component () {
      const [, uploader] = useUploader()
      const [file, setFile] = useState(null)
      const [dataCid, setDataCid] = useState('')
    
      const handleUploadSubmit = async e => {
        e.preventDefault()
        const cid = await uploader.uploadFile(file)
        setDataCid(cid)
      }
    
      if (dataCid) {
        return (
          <div>
            <h1>Done!</h1>
            <p>{dataCid.toString()}</p>
            <p><a href={`https://${dataCid}.ipfs.w3s.link`}>View {file.name} on IPFS Gateway.</a></p>
          </div>
        )
      }
    
      return (
        <form onSubmit={handleUploadSubmit}>
          <div>
            <label htmlFor='file'>File:</label>
            <input id='file' type='file' onChange={e => setFile(e.target.files[0])} required />
          </div>
          <button type='submit'>Upload</button>
        </form>
      )
    }
    

    App.jsx file

    import { KeyringProvider, useKeyring } from '@w3ui/react-keyring'
    import { UploaderProvider } from '@w3ui/react-uploader'
    
    const MyApp = ({ Component, pageProps }: AppProps) => {
      return (
         <KeyringProvider>
              <UploaderProvider>
                 <AgentLoader>
                   <Component {...pageProps} />
                 </AgentLoader>
              </UploaderProvider>
          </KeyringProvider>
      )
    }
    
    function AgentLoader ({ children  } : any) {
      const [, { loadAgent }] = useKeyring()
      // eslint-disable-next-line
      useEffect(() => { loadAgent() }, []) // load agent - once.
      return children
    }
    
    export default MyApp;
    
    opened by paschal533 0
  • fix: get react file-upload example working with vite

    fix: get react file-upload example working with vite

    create-react-app projects don't have the proper loaders to handle loading typescript in dependencies. vite is used in our other examples so it makes sense to me that we'd use it for react as well.

    putting this in a separate PR before I update all the other examples to get feedback before committing to this approach, and to avoid too many merge conflicts with the efforts underway to update examples by @cmunns and @natevw

    opened by travis 5
  • feat: move to pnpm workspaces

    feat: move to pnpm workspaces

    This gets us on the same page as other web3-storage repos. It makes the development workflow more seamless thanks to workspace: deps.

    It also uses use publishConfig to optimize dev workflow: by pointing main at the typescript file in development, apps that support autoreloading autoreload when dependencies change - hooray! this gets rid of the build step during development and feels very slick.

    Additional changes:

    1. remove svelte stuff from rollup configs as they broke this build
    2. be more careful about importing types with import type

    In both of these cases this new config resulted in broken builds without these changes.

    opened by travis 3
  • proposal: React, Vue and SolidJS keyrings should call loadAgent automatically

    proposal: React, Vue and SolidJS keyrings should call loadAgent automatically

    As noted in #198, the Vue keyring used to call loadAgent automatically but no longer does. The React and SolidJS keyrings don't automatically call it, which forces the example apps to call it manually in a slightly unintuitive way.

    1. I'd like to have each of these packages call loadAgent once automatically.
    2. I'd also like to introduce a new boolean property on the providers that skips loading the agent for cases where the developer doesn't want to do that for whatever reason
    opened by travis 1
  • proposal: React useUploadsList hook should automatically load one page of results

    proposal: React useUploadsList hook should automatically load one page of results

    while fixing the react uploads list example (https://github.com/web3-storage/w3ui/pull/195) I noticed that the useUploadsList hook doesn't automatically load the first page of results - I think this is a bug but figured I'd double check before changing the current behavior.

    opened by travis 2
Releases(vue-uploads-list-v2.0.1)
Owner
Web3 Storage
The simple file storage service for IPFS & Filecoin
Web3 Storage
100% type-safe query builder for node-postgres :: Generated types, call any function, tree-shakable, implicit type casts, and more

⚠️ This library is currently in alpha. Contributors wanted! tusken Postgres client from a galaxy far, far away. your database is the source-of-truth f

alloc 54 Dec 29, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Zero runtime type-safe CSS in the same file as components

macaron comptime-css is now called macaron! macaron is a zero-runtime and type-safe CSS-in-JS library made with performance in mind Powered by vanilla

Mokshit Jain 205 Jan 4, 2023
(🔗, 🌲) Web3 Link Tree is a free & open-source alternative to Linktree built with React.js, Next.js, Tailwind and Web3-React

Getting Started Read the detailed guide here Customize Add your name, wallet address, social media links and more in config.ts Images Save images to t

Naut 35 Sep 20, 2022
A next-gen framework for type-safe command-line applications

Zors ?? Next-gen framework for building modern, type-safe command-line applications. ?? Tiny (zero dependencies) ?? Runtime agonistic (supports both D

Sidharth Rathi 13 Dec 1, 2022
Web3-citizens-app - React application based on smart contract using web3 and MetaMask extention.

Citizens App (web3-react-redux) React application based on smart contract using web3 and MetaMask extention. Start the applicarion Recomend to install

Denys Voloshyn 3 Aug 25, 2022
A web3 starter project using Typescript, Hardhat, ethers.js and @web3-react

Starter React Typescript Ethers.js Hardhat Project This repo contains a Hardhat and React Dapp starter project. The React Dapp in the frontend dir of

ChainShot 39 Dec 31, 2022
🛠 Solana Web3 Tools - A set of tools to improve the user experience on Web3 Solana Frontends.

?? Solana Web3 Tools - A set of tools to improve the user experience on Web3 Solana Frontends.

Holaplex 30 May 21, 2022
Build type-safe web apps with PureScript.

PUX Build type-safe web applications with PureScript. Documentation | Examples | Chat Pux is a PureScript library for building web applications. Inter

Alex Mingoia 567 Jun 18, 2022
A zero-dependency, buildless, terse, and type-safe way to write HTML in JavaScript.

hdot A sensible way to write HTML in JavaScript. Type-safe. Helps you follow the HTML spec. Terse. Almost character for character with plain HTML. Bui

Will Martin 31 Oct 24, 2022
Type Safe Object Notation & Validation

tson Type Safe Object Notation & Validation ?? Work in Progress, not ready for production... Features ?? Functional ?? Immutable ✅ Well tested Why? Af

null 9 Aug 10, 2022
Cloudy is a set of constructs for the AWS Cloud Development Kit that aim to improve the DX by providing a faster and type-safe code environment.

cloudy-ts These packages aren't yet published on npm. This is still highly experimental. Need to figure out a few things before releasing the first ve

Cristian Pallarés 5 Nov 3, 2022
A compiled-away, type-safe, readable RegExp alternative

?? magic-regexp A compiled-away, type-safe, readable RegExp alternative ✨ Changelog ?? Documentation ▶️ Online playground Features Runtime is zero-dep

Daniel Roe 1.5k Jan 8, 2023
A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.

?? typesafe-i18n A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects. Advantages ?? lightwe

Hofer Ivan 1.3k Jan 4, 2023
A script that combines a folder of SVG files into a single sprites file and generates type definitions for safe usage.

remix-sprites-example A script that combines a folder of .svg files into a single sprites.svg file and type definitions for safe usage. Technical Over

Nicolas Kleiderer 19 Nov 9, 2022
A functional, immutable, type safe and simple dependency injection library inspired by angular.

func-di English | 简体中文 A functional, immutable, type safe and simple dependency injection library inspired by Angular. Why func-di Installation Usage

null 24 Dec 11, 2022
Type safe library for interacting with Mindbody's Public API (v6) and Webhooks

Mindbody API Type safe library for interacting with Mindbody's Public API (v6) and Webhooks ⚠️ Read before installing This library is typed according

SplitPass 4 Dec 9, 2022