examples: make React example up-to-date (#5205)

examples/react-example/App.jsx

@@ -1,114 +0,0 @@
-/* eslint-disable */
-import React from'react'
-import Uppy from'@uppy/core'
-import Tus from'@uppy/tus'
-import GoogleDrive from '@uppy/google-drive'
-import Webcam from '@uppy/webcam'
-import RemoteSources from '@uppy/remote-sources' 
-import { Dashboard, DashboardModal, DragDrop, ProgressBar, FileInput } from'@uppy/react'
-
-import '@uppy/core/dist/style.css'
-import '@uppy/dashboard/dist/style.css'
-import '@uppy/drag-drop/dist/style.css'
-import '@uppy/file-input/dist/style.css'
-import '@uppy/progress-bar/dist/style.css'
-
-export default class App extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      showInlineDashboard: false,
-      open: false
-    }
-
-    this.uppy = new Uppy({ id: 'uppy1', autoProceed: true, debug: true })
-      .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
-      .use(Webcam)
-      .use(RemoteSources, { companionUrl: 'https://companion.uppy.io', sources: ['GoogleDrive', 'Box', 'Dropbox', 'Facebook', 'Instagram', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
-      })
-
-    this.uppy2 = new Uppy({ id: 'uppy2', autoProceed: false, debug: true })
-      .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
-
-    this.handleModalClick = this.handleModalClick.bind(this)
-  }
-
-  componentWillUnmount () {
-    this.uppy.close({ reason: 'unmount' })
-    this.uppy2.close({ reason: 'unmount' })
-  }
-
-  handleModalClick () {
-    this.setState({
-      open: !this.state.open
-    })
-  }
-
-  render () {
-    const { showInlineDashboard } = this.state
-    return (
-      <div>
-        <h1>React Examples</h1>
-
-        <h2>Inline Dashboard</h2>
-        <label>
-          <input
-            type="checkbox"
-            checked={showInlineDashboard}
-            onChange={(event) => {
-              this.setState({
-                showInlineDashboard: event.target.checked
-              })
-            }}
-          />
-          Show Dashboard
-        </label>
-        {showInlineDashboard && (
-          <Dashboard
-            uppy={this.uppy}
-            plugins={['GoogleDrive']}
-            metaFields={[
-              { id: 'name', name: 'Name', placeholder: 'File name' }
-            ]}
-          />
-        )}
-
-        <h2>Modal Dashboard</h2>
-        <div>
-          <button onClick={this.handleModalClick}>
-            {this.state.open ? 'Close dashboard' : 'Open dashboard'}
-          </button>
-          <DashboardModal
-            uppy={this.uppy2}
-            open={this.state.open}
-            target={document.body}
-            onRequestClose={() => this.setState({ open: false })}
-          />
-        </div>
-
-        <h2>Drag Drop Area</h2>
-        <DragDrop
-          uppy={this.uppy}
-          locale={{
-            strings: {
-              chooseFile: 'Boop a file',
-              orDragDrop: 'or yoink it here'
-            }
-          }}
-        />
-
-        <h2>Progress Bar</h2>
-        <ProgressBar
-          uppy={this.uppy}
-          hideAfterFinish={false}
-        />
-
-        <h2>File Input</h2>
-        <FileInput
-          uppy={this.uppy}
-        />
-      </div>
-    )
-  }
-}

examples/react-example/App.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable */
+import React from 'react'
+import Uppy from '@uppy/core'
+import Tus from '@uppy/tus'
+import Webcam from '@uppy/webcam'
+import RemoteSources from '@uppy/remote-sources'
+import { Dashboard, useUppyState } from '@uppy/react'
+
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
+import '@uppy/drag-drop/dist/style.css'
+import '@uppy/file-input/dist/style.css'
+import '@uppy/progress-bar/dist/style.css'
+
+const metaFields = [
+  { id: 'license', name: 'License', placeholder: 'specify license' },
+]
+
+function createUppy() {
+  return new Uppy({ restrictions: { requiredMetaFields: ['license'] } })
+    .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
+    .use(Webcam)
+    .use(RemoteSources, {
+      companionUrl: 'https://companion.uppy.io',
+    })
+}
+
+export default function App() {
+  // IMPORTANT: passing an initaliser function to useState
+  // to prevent creating a new Uppy instance on every render.
+  // useMemo is a performance hint, not a guarantee.
+  const [uppy] = React.useState(createUppy)
+  // You can access state reactively with useUppyState
+  const fileCount = useUppyState(
+    uppy,
+    (state) => Object.keys(state.files).length,
+  )
+  const totalProgress = useUppyState(uppy, (state) => state.totalProgress)
+  // Also possible to get the state of all plugins.
+  const plugins = useUppyState(uppy, (state) => state.plugins)
+
+  return (
+    <>
+      <p>File count: {fileCount}</p>
+      <p>Total progress: {totalProgress}</p>
+      <Dashboard uppy={uppy} metaFields={metaFields} />
+    </>
+  )
+}

examples/react-example/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="./main.jsx" type="module"></script>
+    <script src="./main.tsx" type="module"></script>
   </body>
 </html>

examples/react-example/main.jsx

@@ -1,8 +0,0 @@
-/* eslint-disable */
-import React from 'react'
-import { createRoot } from 'react-dom/client';
-import App from './App.jsx'
-
-createRoot(document.querySelector('#app')).render(
-  <App />
-)

examples/react-example/main.tsx

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.querySelector('#app')).render(<App />)

examples/react-example/package.json

@@ -5,11 +5,8 @@
   "dependencies": {
     "@uppy/core": "workspace:*",
     "@uppy/dashboard": "workspace:*",
-    "@uppy/drag-drop": "workspace:*",
-    "@uppy/file-input": "workspace:*",
-    "@uppy/google-drive": "workspace:*",
-    "@uppy/progress-bar": "workspace:*",
     "@uppy/react": "workspace:*",
+    "@uppy/remote-sources": "workspace:*",
     "@uppy/tus": "workspace:*",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

examples/react-example/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsxImportSource": "react",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "module": "NodeNext",
+    "outDir": "dist",
+    "sourceMap": true,
+    "lib": ["es2022", "dom", "dom.iterable"],
+  },
+}

yarn.lock

@@ -8659,11 +8659,8 @@ __metadata:
   dependencies:
     "@uppy/core": "workspace:*"
     "@uppy/dashboard": "workspace:*"
-    "@uppy/drag-drop": "workspace:*"
-    "@uppy/file-input": "workspace:*"
-    "@uppy/google-drive": "workspace:*"
-    "@uppy/progress-bar": "workspace:*"
     "@uppy/react": "workspace:*"
+    "@uppy/remote-sources": "workspace:*"
     "@uppy/tus": "workspace:*"
     "@vitejs/plugin-react": "npm:^4.0.0"
     react: "npm:^18.0.0"
@@ -9040,7 +9037,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@uppy/file-input@workspace:*, @uppy/file-input@workspace:^, @uppy/file-input@workspace:packages/@uppy/file-input":
+"@uppy/file-input@workspace:^, @uppy/file-input@workspace:packages/@uppy/file-input":
   version: 0.0.0-use.local
   resolution: "@uppy/file-input@workspace:packages/@uppy/file-input"
   dependencies: