docs: add file upload live previews

omnifed · Sep 11, 2024 · b017b4d · b017b4d
1 parent 8577cea
commit b017b4d
Show file tree

Hide file tree

Showing 6 changed files with 203 additions and 21 deletions.
diff --git a/docs/app/react/file-uploader/components/live-preview.tsx b/docs/app/react/file-uploader/components/live-preview.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import CodeBuilder from '@/app/components/code-builder/code-builder'
+import { builder } from '@/app/components/code-builder/helpers'
+import { useCodeBuilder } from '@/app/context/code-builder'
+import { FileUploader } from '@cerberus-design/react'
+
+const api = {
+  heading: builder.Text('heading', 'Upload your files'),
+  name: builder.Text('name', 'add_uuid'),
+  accept: builder.Text('accept', '.txt'),
+}
+
+export function LivePlayground() {
+  return (
+    <CodeBuilder api={api}>
+      <FileUploadPreview />
+    </CodeBuilder>
+  )
+}
+
+export function LivePlaygroundWithCode() {
+  return (
+    <CodeBuilder
+      api={api}
+      code={`import { FileUploader, type FileUploaderProps } from '@cerberus-design/react'
+import { useCallback, type MouseEvent } from 'react'
+
+export function MyFileUploader(props: FileUploaderProps) {
+  return (
+    <FileUploader
+      accept={{accept}}
+      heading={{heading}}
+      name={{name}}
+    />
+  )
+}`}
+    >
+      <FileUploadPreview />
+    </CodeBuilder>
+  )
+}
+
+export function FileUploadPreview() {
+  const { selectedProps } = useCodeBuilder()
+  return (
+    <FileUploader
+      accept={selectedProps.accept as string}
+      heading={selectedProps.heading as string}
+      name={selectedProps.file as string}
+    />
+  )
+}
diff --git a/docs/app/react/file-uploader/components/status-live-preview.tsx b/docs/app/react/file-uploader/components/status-live-preview.tsx
@@ -0,0 +1,127 @@
+'use client'
+
+import CodeBuilder from '@/app/components/code-builder/code-builder'
+import { builder } from '@/app/components/code-builder/helpers'
+import { useCodeBuilder } from '@/app/context/code-builder'
+import { FileStatus, processStatus } from '@cerberus-design/react'
+
+const file = 'file.txt'
+
+const api = {
+  status: builder.Enum('status', [
+    processStatus.TODO,
+    processStatus.PROCESSING,
+    processStatus.DONE,
+    processStatus.ERROR,
+  ]),
+}
+
+export function FileStatusLivePlayground() {
+  return (
+    <CodeBuilder api={api}>
+      <FileStatusPreview />
+    </CodeBuilder>
+  )
+}
+
+export function FileStatusLivePlaygroundWithCode() {
+  return (
+    <CodeBuilder
+      api={api}
+      code={`'use client'
+
+import {
+  FileStatus,
+  processStatus,
+  type FileStatusProps,
+} from '@cerberus-design/react'
+import { useCallback, type MouseEvent } from 'react'
+
+export function MyFileStatus(props: FileStatusProps) {
+  const handleClick = useCallback((
+    status: FileStatusActions,
+    e: MouseEvent<HTMLButtonElement>
+  ) => {
+    switch (status) {
+      case processStatus.TODO:
+        console.log('TODO', e, 'call props.onClick')
+        break
+      case processStatus.PROCESSING:
+        console.log('PROCESSING', e, 'call props.onClick')
+        break
+      case processStatus.DONE:
+        console.log('DONE', e, 'call props.onClick')
+        break
+      case processStatus.ERROR:
+        console.log('ERROR', e, 'call props.onClick')
+        break
+      default:
+        throw new Error('Unknown status passed into handleClick')
+    }
+  }, [])
+
+  return (
+    <FileStatus
+      file={props.file}
+      now={props.now}
+      onClick={handleClick}
+      status={{status}}
+    />
+  )
+}`}
+    >
+      <FileStatusPreview />
+    </CodeBuilder>
+  )
+}
+
+export function FileStatusPreview() {
+  const { selectedProps } = useCodeBuilder()
+  switch (selectedProps.status) {
+    case processStatus.TODO:
+      return (
+        <FileStatus
+          file={file}
+          now={0}
+          onClick={() => {}}
+          status={processStatus.TODO}
+        />
+      )
+    case processStatus.PROCESSING:
+      return (
+        <FileStatus
+          file={file}
+          now={50}
+          onClick={() => {}}
+          status={processStatus.PROCESSING}
+        />
+      )
+    case processStatus.DONE:
+      return (
+        <FileStatus
+          file={file}
+          now={100}
+          onClick={() => {}}
+          status={processStatus.DONE}
+        />
+      )
+    case processStatus.ERROR:
+      return (
+        <FileStatus
+          file={file}
+          now={0}
+          onClick={() => {}}
+          status={processStatus.ERROR}
+        />
+      )
+    default:
+      return (
+        <FileStatus
+          file={file}
+          now={100}
+          onClick={() => {}}
+          status={processStatus.TODO}
+        />
+      )
+  }
+}
diff --git a/docs/app/react/file-uploader/dev.mdx b/docs/app/react/file-uploader/dev.mdx
@@ -6,30 +6,27 @@ recipe: 'label.ts'
 
 import CodePreview from '@/app/components/CodePreview'
 import {
-  BasicFileUploader
-} from '@/app/react/file-uploader/components/file-uploader-preview'
+  LivePlaygroundWithCode
+} from '@/app/react/file-uploader/components/live-preview'
+import {
+  FileStatusLivePlaygroundWithCode
+} from '@/app/react/file-uploader/components/status-live-preview'
 
 ```ts
-import { FileUploader } from '@cerberus-design/react'
+import { FileUploader, FileStatus, processStatus } from '@cerberus-design/react'
 ```
 
-## Usage
+## Uploading Files
 
-<CodePreview preview={<BasicFileUploader />}>
-```tsx title="file-uploader.tsx" {5,6}
-import { FileUploader } from '@cerberus-design/react'
+To allow users to upload files, use the `FileUploader` component.
 
-function BasicFileUploader() {
-  return (
-    <FileUploader
-      accept=".csv,.docx"
-      heading="Upload Files"
-      name="basic-example"
-    />
-  )
-}
-```
-</CodePreview>
+<LivePlaygroundWithCode />
+
+## File Status
+
+If you choose to process the file, you can use the `FileStatus` component to display the status of the job.
+
+<FileStatusLivePlaygroundWithCode />
 
 ## Customizing
 

diff --git a/docs/app/react/file-uploader/overview.mdx b/docs/app/react/file-uploader/overview.mdx
@@ -7,8 +7,8 @@ a11y: 'forms'
 import CodePreview from '@/app/components/CodePreview'
 import OverviewList from '@/app/components/OverviewList'
 import {
-  BasicFileUploader
-} from '@/app/react/file-uploader/components/file-uploader-preview'
+  LivePlayground
+} from '@/app/react/file-uploader/components/live-preview'
 import {
   UploadingCardsPreview
 } from '@/app/react/file-uploader/components/file-status-preview'
@@ -21,10 +21,12 @@ import {
 
 ## Example
 
-<CodePreview preview={<BasicFileUploader />} />
+<LivePlayground />
 
 ## Processing Uploads
 
+Cerberus provides some visual feedback when you would like to show the status of a file upload.
+
 <CodePreview preview={<UploadingCardsPreview />} />
 
 

diff --git a/packages/panda-preset/src/recipes/slots/fileUploader.ts b/packages/panda-preset/src/recipes/slots/fileUploader.ts
@@ -50,6 +50,7 @@ export const fileUploader: Partial<SlotRecipeConfig> = defineSlotRecipe({
     },
     label: {
       // combine with vstack
+      color: 'page.text.200',
       gap: '1',
       justify: 'center',
       position: 'relative',
@@ -59,6 +60,7 @@ export const fileUploader: Partial<SlotRecipeConfig> = defineSlotRecipe({
     },
     icon: modalIconBase,
     heading: {
+      color: 'page.text.initial',
       pt: '2',
       textStyle: 'h6',
     },

diff --git a/packages/react/src/components/FileStatus.tsx b/packages/react/src/components/FileStatus.tsx
@@ -117,6 +117,7 @@ export function FileStatus(props: FileStatusProps) {
       >
         <small
           className={css({
+            color: 'page.text.initial',
             textStyle: 'label-sm',
           })}
         >