storacha · travis · Jan 18, 2023 · Dec 2, 2022 · Dec 2, 2022 · Dec 2, 2022
diff --git a/examples/react/w3console/.gitignore b/examples/react/w3console/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+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/w3console/index.html b/examples/react/w3console/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full bg-gray-dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>w3console</title>
+  </head>
+  <body class="h-full">
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/w3console/package.json b/examples/react/w3console/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "w3console",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@w3ui/react": "workspace:^",
+    "@w3ui/react-keyring": "workspace:^",
+    "@w3ui/react-uploads-list": "workspace:^2.0.1",
+    "blueimp-md5": "^2.19.0",
+    "preact": "^10.11.3"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.4.0",
+    "@types/blueimp-md5": "^2.18.0",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0"
+  }
+}
diff --git a/examples/react/w3console/postcss.config.cjs b/examples/react/w3console/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}
diff --git a/examples/react/w3console/public/favicon.ico b/examples/react/w3console/public/favicon.ico
diff --git a/examples/react/w3console/src/app.tsx b/examples/react/w3console/src/app.tsx
@@ -0,0 +1,54 @@
+import { Authenticator, Uploader, UploadsList, W3APIProvider } from '@w3ui/react'
+import { useKeyring } from '@w3ui/react-keyring'
+import { useUploadsList } from '@w3ui/react-uploads-list'
+import md5 from 'blueimp-md5'
+import '@w3ui/react/src/styles/uploader.css'
+
+function Space (): JSX.Element {
+  const [{ space }] = useKeyring()
+  const [, { reload }] = useUploadsList()
+  return (
+    <div className='container mx-auto'>
+      <div className='flex flex-row space-x-4 mb-4 justify-between'>
+        <div className='shrink-0'>
+          {(space !== undefined) && (
+            <img src={`https://www.gravatar.com/avatar/${md5(space.did())}?d=identicon`} className='w-20' />
+          )}
+        </div>
+        <Uploader onUploadComplete={() => { void reload() }} />
+      </div>
+      <UploadsList />
+    </div>
+  )
+}
+
+export function App (): JSX.Element {
+  return (
+    <W3APIProvider>
+      <Authenticator>
+        <div className='flex min-h-full w-full'>
+          <nav className='flex-none w-72 bg-white p-4 border-r border-gray-200'>
+            <div className='flex flex-col justify-between min-h-full'>
+              <div className='grow'>
+                <h1 className='font-bold pb-4 flex flex-row justify-start items-center gap-2'>
+                  <svg className='site-logo-image text-black' width='30' viewBox='0 0 27.2 27.18' xmlns='http://www.w3.org/2000/svg'><path d='M13.6 27.18A13.59 13.59 0 1127.2 13.6a13.61 13.61 0 01-13.6 13.58zM13.6 2a11.59 11.59 0 1011.6 11.6A11.62 11.62 0 0013.6 2z' fill='currentColor' /><path d='M12.82 9.9v2.53h1.6V9.9l2.09 1.21.77-1.21-2.16-1.32 2.16-1.32-.77-1.21-2.09 1.21V4.73h-1.6v2.53l-2-1.21L10 7.26l2.2 1.32L10 9.9l.78 1.21zM18 17.79v2.52h1.56v-2.52L21.63 19l.78-1.2-2.16-1.33 2.16-1.28-.78-1.19-2.08 1.2v-2.58H18v2.56L15.9 14l-.77 1.2 2.16 1.32-2.16 1.33.77 1.15zM8.13 17.79v2.52h1.56v-2.52L11.82 19l.77-1.2-2.16-1.33 2.12-1.28-.73-1.24-2.13 1.23v-2.56H8.13v2.56L6.05 14l-.78 1.2 2.16 1.3-2.16 1.33.78 1.17z' fill='currentColor' /></svg>
+                  console
+                </h1>
+              </div>
+              <div className='flex-none'>
+                Space selector
+                <ul>
+                  <li>space 1</li>
+                  <li className='font-bold'>space 2</li>
+                </ul>
+              </div>
+            </div>
+          </nav>
+          <main className='grow bg-gray-100 dark:bg-dark-gray p-4'>
+            <Space />
+          </main>
+        </div>
+      </Authenticator>
+    </W3APIProvider>
+  )
+}
diff --git a/examples/react/w3console/src/assets/preact.svg b/examples/react/w3console/src/assets/preact.svg
diff --git a/examples/react/w3console/src/index.css b/examples/react/w3console/src/index.css
@@ -0,0 +1,90 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --w3ui-uploader-height: theme(spacing.36);
+  --w3ui-uploader-primary: theme(colors.orange.400);
+  --w3ui-uploader-primary-hover: theme(colors.orange.500);
+}
+
+.w3-uploads-list {
+  @apply mb-5;
+}
+
+.w3-uploads-list-data {
+  @apply overflow-auto rounded-md border border-gray-300 dark:border-gray-700;
+}
+
+.w3-uploads-list table {
+  @apply w-full border-collapse divide-y dark:divide-gray-700;
+}
+
+.w3-uploads-list thead {
+  @apply text-left bg-gray-400 dark:bg-gray-900 bg-opacity-50 text-sm;
+}
+
+.w3-uploads-list th {
+  @apply p-3;
+}
+
+.w3-uploads-list td {
+  @apply block w-64 p-3;
+}
+
+.w3-uploads-list nav {
+  @apply flex flex-row space-x-4 my-4;
+}
+
+.w3ui-uploader-wrapper {
+  @apply grow;
+}
+
+.w3ui-uploader__file {
+  @apply rounded-md w-full grid grid-cols-2 p-4 bg-gray-200 dark:bg-gray-900;
+}
+
+.w3ui-uploader__file .name {
+  @apply col-span-2 truncate;
+}
+
+.w3ui-uploader__file .type,
+.size {
+  @apply text-sm;
+}
+
+.w3ui-uploader-console {
+  @apply rounded-md w-full bg-gray-200 dark:bg-gray-900 p-4 truncate;
+}
+
+.w3ui-simple-authenticator-verify-email {
+  @apply bg-gray-400 dark:bg-gray-800 px-24 py-16 rounded-md;
+}
+
+.w3ui-simple-authenticator-verify-email .message {
+  @apply text-xl;
+}
+
+.w3ui-simple-authenticator-verify-email .detail {
+  @apply pt-2 pb-4;
+}
+
+.w3ui-simple-authenticator {
+  @apply w-full h-screen flex flex-col justify-center items-center;
+}
+
+.w3ui-simple-authenticator-form {
+  @apply bg-gray-400 dark:bg-gray-800 px-24 py-16 rounded-md;
+}
+
+.w3ui-simple-authenticator-form .email-field label {
+  @apply block mb-2;
+}
+
+.w3ui-simple-authenticator-form .email-field input {
+  @apply rounded block p-2 w-72 bg-gray-300 dark:bg-gray-900;
+}
+
+.w3ui-simple-authenticator-form .register {
+  @apply mt-2;
+}
diff --git a/examples/react/w3console/src/main.tsx b/examples/react/w3console/src/main.tsx
@@ -0,0 +1,5 @@
+import { render } from 'preact'
+import { App } from './app'
+import './index.css'
+
+render(<App />, document.getElementById('app') as HTMLElement)
diff --git a/examples/react/w3console/src/vite-env.d.ts b/examples/react/w3console/src/vite-env.d.ts
@@ -0,0 +1 @@
+import 'vite/client'
diff --git a/examples/react/w3console/tailwind.config.cjs b/examples/react/w3console/tailwind.config.cjs
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}'
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'gray-dark': '#1d2027'
+      }
+    }
+  },
+  plugins: []
+}
diff --git a/examples/react/w3console/tsconfig.json b/examples/react/w3console/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/react/w3console/tsconfig.node.json b/examples/react/w3console/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/react/w3console/vite.config.ts b/examples/react/w3console/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [preact()],
+  server: {
+    port: 3000
+  }
+})