@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/hooks/useFileUpload/useFileUpload.stories.tsx

@@ -1,468 +0,0 @@
-import React from 'react';
-
-import {Button} from '../../components/Button';
-import {Card} from '../../components/Card';
-import {Dropdown} from '../../components/Dropdown';
-import {ClickableIcon, Icon} from '../../components/Icon';
-import {LinearLoader} from '../../components/LinearLoader';
-import {BodyLarge, BodySmall} from '../../components/Text';
-import {Truncate} from '../../components/Truncate';
-
-import {useFileUpload} from './useFileUpload';
-
-import css from './useFileUpload.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Hooks/useFileUpload',
-  component: useFileUpload,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { useFileUpload } from "@spaced-out/ui-design-system/lib/hooks/useFileUpload";
-\`\`\`
-The \`useFileUpload\` hook is a custom hook that provides functionality for handling file uploads.
-It allows you to manage the state of selected files, handle file validation and rejection,
-and perform various actions on the files.
-
-### Props Accepted
-- \`maxFiles\` (optional): The maximum number of files that can be selected. Defaults to 1.
-- \`maxSize\` (optional): The maximum size of the file that can be uploaded, in bytes.
-- \`accept\` (optional): An object specifying accepted file types. The keys are MIME types, and the values are arrays of file extensions.
-- \`disabled\` (optional): If set to \`true\`, the file upload functionality is disabled.
-- \`onValidFilesDrop\` (optional): A callback function called when valid files are selected or dropped. Receives an array of accepted files.
-- \`onRejectedFilesDrop\` (optional): A callback function called when files are rejected due to validation errors. Receives an array of rejected files.
-- \`onFileClear\` (optional): A callback function called when a file is cleared. Receives the ID of the cleared file.
-- \`onClear\` (optional): A callback function called when all files are cleared.
-
-### Props Returned
-- \`validFiles\`: An array of valid files that have been selected.
-- \`rejectedFiles\`: An array of rejected files with associated rejection reasons.
-- \`isDragActive\`: A boolean indicating whether a file is being dragged over the dropzone.
-- \`shouldAcceptFiles\`: A function that returns whether the dropzone should accept files based on the current state.
-- \`getRootProps\`: A function that returns props to be spread onto the dropzone container element.
-- \`getInputProps\`: A function that returns props to be spread onto the file input element.
-- \`handleFileClear\`: A function to clear a specific file from the selected files.
-- \`handleClear\`: A function to clear all selected files.
-- \`moveFileToProgress\`: A function to move a file to the progress state. Accepts the file ID and progress value.
-- \`moveFileToSuccess\`: A function to move a file to the success state. Accepts the file ID and optional success message.
-- \`moveFileToReject\`: A function to move a file to the reject state. Accepts the file ID and optional reject reason.
-- \`setShowReUpload\`: A function to set the \`showReUpload\` property of a file. Accepts the file ID and optional boolean value.
-
-### Usage
-\`\`\`jsx
-import { useFileUpload } from './useFileUpload';
-
-export const Example = (): React$Element<'div'> => {
-  const [selectedFile, setSelectedFile] = React.useState(null);
-  const { validFiles, rejectedFiles, isDragActive, shouldAcceptFiles, getRootProps, getInputProps, handleFileClear, handleClear, moveFileToProgress, moveFileToSuccess, moveFileToReject,  } = useFileUpload({
-    maxFiles: 5,
-    maxSize: 5242880, // 5MB
-    accept: {
-      'image/*': ['.jpg', '.jpeg', '.png'],
-      'audio/*': ['.mp3', '.wav'],
-    },
-    disabled: false,
-    onValidFilesDrop: (acceptedFiles) => {
-      console.error('Valid files selected:', acceptedFiles);
-    },
-    onRejectedFilesDrop: (fileRejections) => {
-      console.error('Rejected files:', fileRejections);
-    },
-    onFileClear: (id) => {
-      console.error('File cleared:', id);
-    },
-    onClear: () => {
-      console.error('All files cleared');
-    },
-  });
-
-  return (
-    <div className={css.container}>
-      {/* Render the dropzone area */}
-      <div className={css.content}>
-        <div className={css.heading} {...getRootProps()}>
-          <input {...getInputProps()} />
-          {isDragActive ? (
-            <BodyLarge color="information">Drop the files here...</BodyLarge>
-          ) : (
-            <BodyLarge color="information">
-              Drag and drop files here or click to select files
-            </BodyLarge>
-          )}
-        </div>
-
-        {/* Render the clear all files button */}
-        {[...validFiles, ...rejectedFiles].length > 0 && (
-          <div className={css.globalClose}>
-            <Button type="ghost" iconLeftName="trash-can" onClick={handleClear}>
-              Clear all Files
-            </Button>
-          </div>
-        )}
-
-        {/* Render the list of valid files */}
-        {validFiles.length > 0 && (
-          <>
-            <BodyLarge color="success">Valid Files:</BodyLarge>
-            <Card classNames={{wrapper: css.filesBlock}}>
-              <ul className={css.noPadding}>
-                {validFiles.map((file) => (
-                  <li key={file.id}>
-                    <div className={css.list}>
-                      <BodyLarge color="success">
-                        <Truncate>
-                          {file.file.name} - {file.file.size} bytes{' '}
-                        </Truncate>
-                      </BodyLarge>
-                      <ClickableIcon
-                        name="trash-can"
-                        color="success"
-                        onClick={() => handleFileClear(file.id)}
-                      ></ClickableIcon>
-                    </div>
-                    {file.success && (
-                      <div className={css.stateMsg}>
-                        <Icon name="circle-check" color="success" />
-                        <BodySmall color="success">
-                          {file.successMessage}
-                        </BodySmall>
-                      </div>
-                    )}
-                    {!!file.progress && (
-                      <div className={css.stateMsg}>
-                        <LinearLoader size="small" value={file.progress} />
-                      </div>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            </Card>
-          </>
-        )}
-
-        {/* Render the list of rejected files */}
-        {rejectedFiles.length > 0 && (
-          <>
-            <BodyLarge color="danger">Rejected Files:</BodyLarge>
-            <Card classNames={{wrapper: css.filesBlock}}>
-              <ul className={css.noPadding}>
-                {rejectedFiles.map((file) => (
-                  <li key={file.id}>
-                    <div className={css.list}>
-                      <BodyLarge color="danger">
-                        <Truncate>
-                          {file.file.name} - {file.file.size} bytes{' '}
-                        </Truncate>
-                      </BodyLarge>
-                      <ClickableIcon
-                        name="trash-can"
-                        color="danger"
-                        onClick={() => handleFileClear(file.id)}
-                      ></ClickableIcon>
-                    </div>
-                    {file.reject && (
-                      <div className={css.stateMsg}>
-                        <Icon name="bomb" color="danger" />
-                        <BodySmall color="danger">
-                          {file.rejectReason}
-                        </BodySmall>
-                      </div>
-                    )}
-                    {!!file.progress && (
-                      <div className={css.stateMsg}>
-                        <LinearLoader size="small" value={file.progress} />
-                      </div>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            </Card>
-          </>
-        )}
-
-        {[...validFiles, ...rejectedFiles].length > 0 && (
-          <div className={css.tooling}>
-            <Dropdown
-              classNames={{wrapper: css.ddWrapper}}
-              label="Move File"
-              dropdownInputText={selectedFile?.label}
-              placeholder="Select a file"
-              menu={{
-                options: [...validFiles, ...rejectedFiles].map((option) => ({
-                  key: option.id,
-                  label: option.file.name,
-                })),
-              }}
-              onChange={(option) => setSelectedFile(option)}
-            ></Dropdown>
-            {!!selectedFile?.key && (
-              <div className={css.buttons}>
-                <Button
-                  type="tertiary"
-                  onClick={() =>
-                    selectedFile.key &&
-                    moveFileToSuccess(
-                      selectedFile.key,
-                      'Your custom Success Message',
-                    )
-                  }
-                >
-                  Move to Success
-                </Button>
-                <Button
-                  type="tertiary"
-                  onClick={() =>
-                    selectedFile.key &&
-                    moveFileToReject(
-                      selectedFile.key,
-                      'Your custom reject reason',
-                    )
-                  }
-                >
-                  Move to Reject
-                </Button>
-                <Button
-                  type="tertiary"
-                  onClick={() =>
-                    selectedFile.key &&
-                    moveFileToProgress(
-                      selectedFile.key,
-                      ([...validFiles, ...rejectedFiles].find(
-                        (op) => op.id === selectedFile.key,
-                      )?.progress || 0) + 10,
-                    )
-                  }
-                >
-                  Set Progress + 10
-                </Button>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default MyComponent;
-\`\`\`
-          `,
-      },
-    },
-  },
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => {
-  const [selectedFile, setSelectedFile] = React.useState<any>(null);
-  const { validFiles, rejectedFiles, isDragActive, getRootProps, getInputProps, handleFileClear, handleClear, moveFileToProgress, moveFileToSuccess, moveFileToReject,  } = useFileUpload({
-    maxFiles: 5,
-    maxSize: 5242880, // 5MB
-    accept: {
-      'image/*': ['.jpg', '.jpeg', '.png'],
-      'audio/*': ['.mp3', '.wav'],
-    },
-    disabled: false,
-    onValidFilesDrop: (acceptedFiles) => {
-      console.error('Valid files selected:', acceptedFiles);
-    },
-    onRejectedFilesDrop: (fileRejections) => {
-      console.error('Rejected files:', fileRejections);
-    },
-    onFileClear: (id) => {
-      console.error('File cleared:', id);
-    },
-    onClear: () => {
-      console.error('All files cleared');
-    },
-  });
-
-  return (
-    <div className={css.container}>
-      {/* Render the dropzone area */}
-      <div className={css.content}>
-{ /* @ts-ignore - TS2554 - Expected 1 arguments, but got 0. */}
-        <div className={css.heading} {...getRootProps()}>
-{ /* @ts-ignore - TS2322 - Type 'unknown' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'. | TS2554 - Expected 1 arguments, but got 0. */}
-          <input {...getInputProps()} />
-          {isDragActive ? (
-            <BodyLarge color="information">Drop the files here...</BodyLarge>
-          ) : (
-            <BodyLarge color="information">
-              Drag and drop files here or click to select files
-            </BodyLarge>
-          )}
-        </div>
-
-        {/* Render the clear all files button */}
-        {[...validFiles, ...rejectedFiles].length > 0 && (
-          <div className={css.globalClose}>
-            <Button type="ghost" iconLeftName="trash-can" onClick={handleClear}>
-              Clear all Files
-            </Button>
-          </div>
-        )}
-
-        {/* Render the list of valid files */}
-        {validFiles.length > 0 && (
-          <>
-            <BodyLarge color="success">Valid Files:</BodyLarge>
-            <Card classNames={{wrapper: css.filesBlock}}>
-              <div className={css.noPadding}>
-                {validFiles.map((file) => (
-                  <div key={file.id} className={css.col}>
-                    <div className={css.list}>
-                      {file.success && (
-                        <Icon name="circle-check" color="success" />
-                      )}
-                      <BodyLarge color="success">
-                        <Truncate>
-                          {file.file.name} - {file.file.size} bytes{' '}
-                        </Truncate>
-                      </BodyLarge>
-                      <ClickableIcon
-                        name="trash-can"
-                        color="success"
-                        onClick={() => handleFileClear(file.id)}
-                      ></ClickableIcon>
-                    </div>
-
-                    {file.successMessage && (
-                      <div className={css.stateMsg}>
-                        <BodySmall color="success">
-                          {file.successMessage}
-                        </BodySmall>
-                      </div>
-                    )}
-
-                    {!!file.progress && (
-                      <div className={css.stateMsg}>
-                        <LinearLoader
-                          size="small"
-                          value={
-                            file.progress === 'indeterminate'
-                              ? 0
-                              : file.progress
-                          }
-                          indeterminate={file.progress === 'indeterminate'}
-                        />
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            </Card>
-          </>
-        )}
-
-        {/* Render the list of rejected files */}
-        {rejectedFiles.length > 0 && (
-          <>
-            <BodyLarge color="danger">Rejected Files:</BodyLarge>
-            <Card classNames={{wrapper: css.filesBlock}}>
-              <div className={css.noPadding}>
-                {rejectedFiles.map((file) => (
-                  <div key={file.id} className={css.col}>
-                    <div className={css.list}>
-                      {file.reject && <Icon name="bomb" color="danger" />}
-                      <BodyLarge color="danger">
-                        <Truncate>
-                          {file.file.name} - {file.file.size} bytes{' '}
-                        </Truncate>
-                      </BodyLarge>
-                      <ClickableIcon
-                        name="trash-can"
-                        color="danger"
-                        onClick={() => handleFileClear(file.id)}
-                      ></ClickableIcon>
-                    </div>
-
-                    {!!file.rejectReason && (
-                      <div className={css.stateMsg}>
-                        <BodySmall color="danger">
-                          {file.rejectReason}
-                        </BodySmall>
-                      </div>
-                    )}
-
-                    {!!file.progress && (
-                      <div className={css.stateMsg}>
-                        <LinearLoader
-                          size="small"
-                          value={
-                            file.progress === 'indeterminate'
-                              ? 0
-                              : file.progress
-                          }
-                          indeterminate={file.progress === 'indeterminate'}
-                        />
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            </Card>
-          </>
-        )}
-
-        {[...validFiles, ...rejectedFiles].length > 0 && (
-          <div className={css.tooling}>
-            <Dropdown
-              classNames={{wrapper: css.ddWrapper}}
-              label="Move File"
-              dropdownInputText={selectedFile?.label}
-              placeholder="Select a file"
-              menu={{
-                options: [...validFiles, ...rejectedFiles].map((option) => ({
-                  key: option.id,
-                  label: option.file.name,
-                })),
-              }}
-              onChange={(option) => setSelectedFile(option)}
-            ></Dropdown>
-            {!!selectedFile?.key && (
-              <div className={css.buttons}>
-                <Button
-                  type="tertiary"
-                  onClick={() =>
-                    selectedFile.key &&
-                    moveFileToSuccess(
-                      selectedFile.key,
-                      'Your custom Success Message',
-                    )
-                  }
-                >
-                  Move to Success
-                </Button>
-                <Button
-                  type="tertiary"
-                  onClick={() =>
-                    selectedFile.key &&
-                    moveFileToReject(
-                      selectedFile.key,
-                      'Your custom reject reason',
-                    )
-                  }
-                >
-                  Move to Reject
-                </Button>
-                <Button
-                  type="tertiary"
-                  onClick={() =>
-                    selectedFile.key &&
-                    moveFileToProgress(selectedFile.key, 'indeterminate')
-                  }
-                >
-                  Set Progress + 10
-                </Button>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};