chore: migrate react examples to vite (storacha#209)

following the example of storacha/w3ui#203, move the rest of the react examples to vite
storacha · Jan 5, 2023 · 96d6c9b · 96d6c9b
1 parent 7de6d77
commit 96d6c9b
Show file tree

Hide file tree

Showing 42 changed files with 1,068 additions and 5,966 deletions.
diff --git a/examples/react/file-upload/.gitignore b/examples/react/file-upload/.gitignore
@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+build
 dist
 dist-ssr
 *.local

diff --git a/examples/react/file-upload/README.md b/examples/react/file-upload/README.md
@@ -9,16 +9,15 @@ To run this example:
   cd w3ui
   ```
 
-- Install dependencies and build:
+- Install dependencies:
 
   ```sh
-  npm install
-  npm run build
+  pnpm install
   ```
 
 - Change to this example directory and run the example:
 
   ```sh
   cd examples/react/file-upload
-  npm start
+  pnpm run dev
   ```
diff --git a/examples/react/file-upload/package.json b/examples/react/file-upload/package.json
@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "start": "vite",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"

diff --git a/examples/react/multi-file-upload/.gitignore b/examples/react/multi-file-upload/.gitignore
@@ -1,2 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
 build
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/react/multi-file-upload/README.md b/examples/react/multi-file-upload/README.md
@@ -9,16 +9,15 @@ To run this example:
   cd w3ui
   ```
 
-- Install dependencies and build:
+- Install dependencies:
 
   ```sh
-  npm install
-  npm run build
+  pnpm install
   ```
 
 - Change to this example directory and run the example:
 
   ```sh
   cd examples/react/multi-file-upload
-  npm start
+  pnpm run dev
   ```
diff --git a/examples/react/multi-file-upload/index.html b/examples/react/multi-file-upload/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>W3UI Multi File Upload Example App</title>
+    </head>
+  <body style="background-color:#1d2027;">
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/examples/react/multi-file-upload/package.json b/examples/react/multi-file-upload/package.json
@@ -1,36 +1,24 @@
 {
   "name": "@w3ui/example-react-multi-file-upload",
-  "version": "0.0.0",
   "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
   "dependencies": {
     "@w3ui/react-keyring": "workspace:^",
     "@w3ui/react-uploader": "workspace:^",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "react-dom": "^18.2.0"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^3.0.0",
+    "vite": "^4.0.0"
   }
 }
diff --git a/examples/react/multi-file-upload/public/index.html b/examples/react/multi-file-upload/public/index.html
diff --git a/examples/react/multi-file-upload/public/robots.txt b/examples/react/multi-file-upload/public/robots.txt
diff --git a/examples/react/multi-file-upload/src/App.js → examples/react/multi-file-upload/src/App.jsx b/examples/react/multi-file-upload/src/App.js → examples/react/multi-file-upload/src/App.jsx
@@ -1,14 +1,14 @@
 import React, { useEffect } from 'react'
-import { AuthProvider, useAuth } from '@w3ui/react-keyring'
+import { KeyringProvider, useKeyring } from '@w3ui/react-keyring'
 import { UploaderProvider } from '@w3ui/react-uploader'
 import ContentPage from './ContentPage'
 import logo from './logo.png'
 
 function App () {
   return (
-    <AuthProvider>
+    <KeyringProvider>
       <UploaderProvider>
-        <IdentityLoader>
+        <AgentLoader>
           <div className='vh-100 flex flex-column justify-center items-center sans-serif light-silver'>
             <header>
               <img src={logo} width='250' alt='logo' />
@@ -17,16 +17,16 @@ function App () {
               <ContentPage />
             </div>
           </div>
-        </IdentityLoader>
+        </AgentLoader>
       </UploaderProvider>
-    </AuthProvider>
+    </KeyringProvider>
   )
 }
 
-function IdentityLoader ({ children }) {
-  const { loadDefaultIdentity } = useAuth()
+function AgentLoader ({ children }) {
+  const [, { loadAgent }] = useKeyring()
   // eslint-disable-next-line
-  useEffect(() => { loadDefaultIdentity() }, []) // try load default identity - once.
+  useEffect(() => { loadAgent() }, []) // load agent - once.
   return children
 }
 

diff --git a/...eact/multi-file-upload/src/ContentPage.js → ...act/multi-file-upload/src/ContentPage.jsx b/...eact/multi-file-upload/src/ContentPage.js → ...act/multi-file-upload/src/ContentPage.jsx
@@ -4,7 +4,7 @@ import { withIdentity } from './components/Authenticator'
 import './spinner.css'
 
 export function ContentPage () {
-  const [{ uploadedCarChunks }, uploader] = useUploader()
+  const [{ storedDAGShards }, uploader] = useUploader()
   const [files, setFiles] = useState([])
   const [allowDirectory, setAllowDirectory] = useState(false)
   const [wrapInDirectory, setWrapInDirectory] = useState(false)
@@ -33,11 +33,11 @@ export function ContentPage () {
   }
 
   if (status === 'uploading') {
-    return <Uploading files={files} uploadedCarChunks={uploadedCarChunks} />
+    return <Uploading files={files} storedDAGShards={storedDAGShards} />
   }
 
   if (status === 'done') {
-    return error ? <Errored error={error} /> : <Done files={files} dataCid={dataCid} uploadedCarChunks={uploadedCarChunks} />
+    return error ? <Errored error={error} /> : <Done files={files} dataCid={dataCid} storedDAGShards={storedDAGShards} />
   }
 
   return (
@@ -67,12 +67,12 @@ export function ContentPage () {
   )
 }
 
-const Uploading = ({ files, dataCid, uploadedCarChunks }) => (
+const Uploading = ({ files, storedDAGShards }) => (
   <div className='flex items-center'>
     <div className='spinner mr3 flex-none' />
     <div className='flex-auto'>
       <p className='truncate'>Uploading DAG for {files.length > 1 ? `${files.length} files` : files[0].name}</p>
-      {uploadedCarChunks.map(({ cid, size }) => (
+      {storedDAGShards.map(({ cid, size }) => (
         <p key={cid.toString()} className='f7 truncate'>
           {cid.toString()} ({size} bytes)
         </p>
@@ -88,13 +88,13 @@ const Errored = ({ error }) => (
   </div>
 )
 
-const Done = ({ files, dataCid, uploadedCarChunks }) => (
+const Done = ({ files, dataCid, storedDAGShards }) => (
   <div>
     <h1 className='near-white'>Done!</h1>
     <p className='f6 code truncate'>{dataCid.toString()}</p>
     <p><a href={`https://w3s.link/ipfs/${dataCid}`} className='blue'>View {files.length > 1 ? 'files' : files[0].name} on IPFS Gateway.</a></p>
-    <p className='near-white'>Chunks ({uploadedCarChunks.length}):</p>
-    {uploadedCarChunks.map(({ cid, size }) => (
+    <p className='near-white'>Chunks ({storedDAGShards.length}):</p>
+    {storedDAGShards.map(({ cid, size }) => (
       <p key={cid.toString()} className='f7 truncate'>
         {cid.toString()} ({size} bytes)
       </p>

diff --git a/...oads-list/src/components/Authenticator.js → ...e-upload/src/components/Authenticator.jsx b/...oads-list/src/components/Authenticator.js → ...e-upload/src/components/Authenticator.jsx
@@ -12,8 +12,8 @@ export default function Authenticator ({ children }) {
 
   if (submitted) {
     return (
-      <div className='w-90 w-50-ns mw6'>
-        <h1>Verify your email address!</h1>
+      <div>
+        <h1 className='near-white'>Verify your email address!</h1>
         <p>Click the link in the email we sent to {email} to sign in.</p>
         <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
           <button type='submit' className='ph3 pv2'>Cancel</button>

diff --git a/...ples/react/multi-file-upload/src/index.js → ...les/react/multi-file-upload/src/index.jsx b/...ples/react/multi-file-upload/src/index.js → ...les/react/multi-file-upload/src/index.jsx
diff --git a/examples/react/multi-file-upload/vite.config.js b/examples/react/multi-file-upload/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000
+  }
+})
diff --git a/examples/react/sign-up-in/.gitignore b/examples/react/sign-up-in/.gitignore
@@ -1,2 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
 build
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/react/sign-up-in/README.md b/examples/react/sign-up-in/README.md
@@ -9,16 +9,15 @@ To run this example:
   cd w3ui
   ```
 
-- Install dependencies and build:
+- Install dependencies:
 
   ```sh
-  npm install
-  npm run build
+  pnpm install
   ```
 
 - Change to this example directory and run the example:
 
   ```sh
   cd examples/react/sign-up-in
-  npm start
+  pnpm run dev
   ```
diff --git a/examples/react/sign-up-in/index.html b/examples/react/sign-up-in/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>W3UI Signup/Login Example App</title>
+    </head>
+  <body style="background-color:#1d2027;">
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/examples/react/sign-up-in/package.json b/examples/react/sign-up-in/package.json
@@ -1,35 +1,23 @@
 {
   "name": "@w3ui/example-react-sign-up-in",
-  "version": "0.0.0",
   "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
   "dependencies": {
     "@w3ui/react-keyring": "workspace:^",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "react-dom": "^18.2.0"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^3.0.0",
+    "vite": "^4.0.0"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,7 @@ pnpm-debug.log* @@
     lerna-debug.log*
     node_modules
+    build
     dist
     dist-ssr
     *.local
@@ Expand Down @@