-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #464 from omnifed/463-feat-make-filestatus-component
463 feat make filestatus component
- Loading branch information
Showing
29 changed files
with
1,032 additions
and
281 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
docs/app/react/file-uploader/components/file-status-preview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| 'use client' | ||
|
|
||
| import { | ||
| FileStatus, | ||
| type FileStatusActions, | ||
| processStatus, | ||
| } from '@cerberus-design/react' | ||
| import { vstack } from '@cerberus/styled-system/patterns' | ||
| import { useCallback, type MouseEvent } from 'react' | ||
|
|
||
| export function UploadingCardsPreview() { | ||
| const handleClick = useCallback( | ||
| (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => | ||
| console.log(status, e), | ||
| [], | ||
| ) | ||
|
|
||
| return ( | ||
| <div | ||
| className={vstack({ | ||
| maxW: '36rem', | ||
| w: '3/4', | ||
| })} | ||
| > | ||
| <FileStatus | ||
| file="file.txt" | ||
| now={0} | ||
| onClick={handleClick} | ||
| status={processStatus.TODO} | ||
| /> | ||
| <FileStatus | ||
| file="file.txt" | ||
| now={50} | ||
| onClick={handleClick} | ||
| status={processStatus.PROCESSING} | ||
| /> | ||
| <FileStatus | ||
| file="file.txt" | ||
| now={100} | ||
| onClick={handleClick} | ||
| status={processStatus.DONE} | ||
| /> | ||
| <FileStatus | ||
| file="file.txt" | ||
| now={0} | ||
| onClick={handleClick} | ||
| status={processStatus.ERROR} | ||
| /> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| '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' | ||
| 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} | ||
| /> | ||
| ) | ||
| } |
127 changes: 127 additions & 0 deletions
127
docs/app/react/file-uploader/components/status-live-preview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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} | ||
| /> | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.