forked from tailwarden/komiser
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add reusable upload component to storybook (tailwarden#1095)
- Loading branch information
1 parent
ac03216
commit 2333c9d
Showing
3 changed files
with
466 additions
and
188 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
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,113 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| import { useEffect, useState } from 'react'; | ||
| import Upload, { UploadProps } from './Upload'; | ||
|
|
||
| function UploadWrapper({ | ||
| multiple, | ||
| fileOrFiles, | ||
| handleChange, | ||
| onClose, | ||
| ...otherProps | ||
| }: UploadProps) { | ||
| const [selectedFile, setSelectedFile] = useState<File | File[] | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| setSelectedFile(null); | ||
| }, [multiple]); | ||
|
|
||
| const uploadFile = (file: File | File[] | null): void => { | ||
| if (file instanceof FileList) { | ||
| const filesArray = Array.from(file); | ||
| setSelectedFile(filesArray); | ||
| } else if (file instanceof File) { | ||
| setSelectedFile(file); | ||
| } else { | ||
| setSelectedFile(null); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Upload | ||
| multiple={multiple} | ||
| fileOrFiles={selectedFile} | ||
| handleChange={uploadFile} | ||
| onClose={() => setSelectedFile(null)} | ||
| {...otherProps} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| const meta: Meta<typeof Upload> = { | ||
| title: 'Komiser/FileUpload', | ||
| component: UploadWrapper, | ||
| decorators: [ | ||
| Story => ( | ||
| <div className="h-full w-full rounded bg-white p-0.5">{Story()}</div> | ||
| ) | ||
| ], | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| name: { | ||
| control: 'text', | ||
| description: 'the name for your form (if exist)', | ||
| defaultValue: 'attachment' | ||
| }, | ||
| multiple: { | ||
| control: 'boolean', | ||
| description: | ||
| 'a boolean to determine whether the multiple files is enabled or not', | ||
| defaultValue: false | ||
| }, | ||
| disabled: { | ||
| control: 'boolean', | ||
| description: 'disables the input', | ||
| defaultValue: false | ||
| }, | ||
| required: { | ||
| control: 'boolean', | ||
| description: 'Conditionally set the input field as required', | ||
| defaultValue: false | ||
| }, | ||
| hoverTitle: { | ||
| control: 'text', | ||
| description: 'text appears(hover) when trying to drop a file', | ||
| defaultValue: 'drop here' | ||
| }, | ||
| maxSize: { | ||
| control: 'number', | ||
| description: 'the maximum size of the file (number in mb)', | ||
| defaultValue: 37 | ||
| }, | ||
| minSize: { | ||
| control: 'number', | ||
| description: 'the minimum size of the file (number in mb)', | ||
| defaultValue: 0 | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof Upload>; | ||
|
|
||
| export const SingleFile: Story = { | ||
| args: { | ||
| name: 'attachment', | ||
| disabled: false, | ||
| hoverTitle: 'drop here', | ||
| maxSize: 37, | ||
| minSize: 0 | ||
| } | ||
| }; | ||
|
|
||
| export const MultipleFiles: Story = { | ||
| args: { | ||
| name: 'attachment', | ||
| multiple: true, | ||
| disabled: false, | ||
| hoverTitle: 'drop here', | ||
| maxSize: 37, | ||
| minSize: 0 | ||
| } | ||
| }; |
Oops, something went wrong.