chore: move to typescript

also get the build working so I can create an example that uses these

package.json

@@ -37,6 +37,7 @@
     "packages/react-keyring",
     "packages/react-uploader",
     "packages/react-uploads-list",
+    "packages/react-ui",
     "packages/solid-keyring",
     "packages/solid-uploader",
     "packages/solid-uploads-list",

packages/react-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w3ui/react-ui",
-  "version": "1.0.1",
+  "version": "1.0.0",
   "description": "React w3ui UI components.",
   "module": "build/esm/index.js",
   "main": "build/cjs/index.js",
@@ -17,16 +17,16 @@
     "type": "git",
     "url": "git+https://github.com/web3-storage/w3ui.git"
   },
-  "author": "Alan Shaw",
+  "author": "Travis Vachon",
   "license": "Apache-2.0 OR MIT",
   "bugs": {
     "url": "https://github.com/web3-storage/w3ui/issues"
   },
   "homepage": "https://github.com/web3-storage/w3ui/tree/main/packages/react-ui",
   "dependencies": {
-    "@w3ui/react-keyring": "^1.0.2",
-    "@w3ui/react-uploads-list": "^1.0.2",
-    "@w3ui/react-uploader": "^1.0.2"
+    "@w3ui/react-keyring": "^1.0.1",
+    "@w3ui/react-uploads-list": "^1.1.2",
+    "@w3ui/react-uploader": "^2.1.2"
   },
   "devDependencies": {
     "@ucanto/interface": "^3.0.0",

packages/react-ui/src/SimpleUploader.tsx

@@ -0,0 +1,63 @@
+import React, { useContext } from 'react'
+import { CARMetadata } from '@w3ui/uploader-core'
+import { Link, Version } from 'multiformats'
+
+import Uploader, { UploaderContext } from './Uploader';
+
+export const Uploading = ({ file, storedDAGShards }: { file?: File, storedDAGShards?: CARMetadata[] }) => (
+  <div className="uploading">
+    <h1 className="title">Uploading DAG for {file?.name}</h1>
+    {storedDAGShards?.map(({ cid, size }) => (
+      <p className="shard" key={cid.toString()}>
+        {cid.toString()} ({size} bytes)
+      </p>
+    ))}
+  </div>
+)
+
+export const Errored = ({ error }: { error: any }) => (
+  <div className="error">
+    <h1 className="message">⚠️ Error: failed to upload file: {error.message}</h1>
+    <p className="details">Check the browser console for details.</p>
+  </div>
+)
+
+export const Done = ({ file, dataCid, storedDAGShards }: {file?: File, dataCid?: Link<unknown, number, number, Version>, storedDAGShards?: CARMetadata[]}) => (
+  <div className="done">
+    <h1 className="title">Done!</h1>
+    <p className="cid">{dataCid?.toString()}</p>
+    <p className="view"><a href={`https://w3s.link/ipfs/${dataCid}`}>View {file?.name} on IPFS Gateway.</a></p>
+    <h5 className="chunks">Shards ({storedDAGShards?.length}):</h5>
+    {storedDAGShards?.map(({ cid, size }) => (
+      <p className="shard" key={cid.toString()}>
+        {cid.toString()} ({size} bytes)
+      </p>
+    ))}
+  </div>
+)
+
+
+const SimpleUploader = () => {
+  const { status, file, error, dataCid, storedDAGShards } = useContext(UploaderContext)
+  return (
+    <Uploader>
+      {(status === 'uploading') ? (
+        <Uploading file={file} storedDAGShards={storedDAGShards} />
+      ) : (
+        (status === 'done') ? (
+          error ? <Errored error={error} /> : <Done file={file} dataCid={dataCid} storedDAGShards={storedDAGShards} />
+        ) : (
+          <Uploader.Form className="">
+            <div className="field">
+              <label htmlFor='w3ui-uploader-file'>File:</label>
+              <Uploader.Input id="w3ui-uploader-file" />
+            </div>
+            <button type='submit'>Upload</button>
+          </Uploader.Form>
+        )
+      )}
+    </Uploader>
+  )
+}
+
+export default SimpleUploader

packages/react-ui/src/Uploader.tsx

@@ -0,0 +1,71 @@
+import React, { useContext, createContext, useState } from 'react'
+import { useUploader, CARMetadata } from '@w3ui/react-uploader'
+import { Link, Version } from 'multiformats'
+
+export type UploaderContextValue = {
+  storedDAGShards?: CARMetadata[],
+  file?: File,
+  setFile: React.Dispatch<React.SetStateAction<File | undefined>>,
+  dataCid?: Link<unknown, number, number, Version>,
+  status?: string,
+  error?: any,
+  handleUploadSubmit?: (e: Event) => void
+
+}
+
+export const UploaderContext = createContext<UploaderContextValue>({
+  setFile: () => {}
+})
+
+export type UploaderProps = {
+  children: React.ReactNode,
+}
+
+export const Uploader = ({
+  children,
+}: UploaderProps) => {
+  const [{ storedDAGShards }, uploader] = useUploader()
+  const [file, setFile] = useState<File>()
+  const [dataCid, setDataCid] = useState<Link<unknown, number, number, Version>>()
+  const [status, setStatus] = useState('')
+  const [error, setError] = useState()
+
+  const handleUploadSubmit = async (e: Event) => {
+    e.preventDefault()
+    if (file) {
+      try {
+        setStatus('uploading')
+        const cid = await uploader.uploadFile(file)
+        setDataCid(cid)
+      } catch (err: any) {
+        console.error(err)
+        setError(err)
+      } finally {
+        setStatus('done')
+      }
+    }
+  }
+  return (
+    <UploaderContext.Provider value={{ storedDAGShards, file, setFile, dataCid, status, error, handleUploadSubmit }}>
+      {children}
+    </UploaderContext.Provider>
+  )
+}
+
+Uploader.Input = (props: any) => {
+  const { setFile } = useContext(UploaderContext)
+  return (
+    <input type='file' onChange={e => setFile(e?.target?.files?.[0])} {...props} />
+  )
+}
+
+Uploader.Form = ({ children, ...props }: {children: React.ReactNode} & any) => {
+  const { handleUploadSubmit } = useContext(UploaderContext)
+  return (
+    <form onSubmit={handleUploadSubmit} {...props}>
+      {children}
+    </form>
+  )
+}
+
+export default Uploader

packages/react-ui/src/index.ts

@@ -0,0 +1,2 @@
+export * from './Uploader'
+export * from './SimpleUploader'

rollup.config.ts

@@ -91,6 +91,16 @@ export default function rollup (options: RollupOptions): RollupOptions[] {
         '@w3ui/react-keyring': 'ReactKeyring'
       }
     }),
+    ...buildConfigs({
+      name: 'react-ui',
+      packageDir: 'packages/react-ui',
+      jsName: 'ReactUI',
+      outputFile: 'react-ui',
+      entryFile: 'src/index.ts',
+      globals: {
+        react: 'React',
+      }
+    }),
     ...buildConfigs({
       name: 'solid-keyring',
       packageDir: 'packages/solid-keyring',

tsconfig.base.json

@@ -23,6 +23,7 @@
       "@w3ui/react-keyring": ["packages/react-keyring/src"],
       "@w3ui/react-uploader": ["packages/react-uploader/src"],
       "@w3ui/react-uploads-list": ["packages/react-uploads-list/src"],
+      "@w3ui/react-ui": ["packages/react-ui/src"],
 
       "@w3ui/solid-keyring": ["packages/solid-keyring/src"],
       "@w3ui/solid-uploader": ["packages/solid-uploader/src"],