From 29fd57a90df1294d27997ee000f8d94c43b5da6e Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Tue, 5 Sep 2023 11:36:42 +0200 Subject: [PATCH] Docs(web-react): Add FileUploader demo #DS-896 FileUploader demo in web-react is now same as demo in web and web-twig --- packages/web-react/docs/DocsSections.tsx | 17 ++- .../FileUploader/__tests__/utils.test.ts | 25 ++++ .../FileUploader/demo/FileUploaderAccept.tsx | 55 -------- .../demo/FileUploaderAttachment.tsx | 38 +++++ ...FileUploaderAttachmentWithCustomAction.tsx | 49 +++++++ ...FileUploaderAttachmentWithImagePreview.tsx | 50 +++++++ ...oaderFluid.tsx => FileUploaderDefault.tsx} | 36 ++--- .../demo/FileUploaderDraggingNotAvailable.tsx | 48 +++++++ .../FileUploaderExampleOfJSControlledForm.tsx | 66 +++++++++ .../demo/FileUploaderFluidWidth.tsx | 42 ++++++ .../demo/FileUploaderInputDisabled.tsx | 44 ++++++ .../demo/FileUploaderInputMultiple.tsx | 43 ++++++ ...tMultipleWithFileQueueBehaviorControl.tsx} | 39 +++--- .../FileUploaderInputValidationStates.tsx | 132 ++++++++++++++++++ .../demo/FileUploaderInputWithAttachment.tsx | 83 +++++++++++ .../FileUploaderMultipleWithValidation.tsx | 44 ++++++ .../FileUploaderUncontrolledDismissible.tsx | 32 ----- .../demo/FileUploaderUncontrolledFluid.tsx | 31 ---- .../demo/FileUploaderValidationState.tsx | 86 ------------ .../demo/FileUploaderWithImagePreview.tsx | 63 --------- .../demo/FormWithFileUploader.tsx | 111 --------------- .../demo/FormWithUncontrolledFileUploader.tsx | 104 -------------- .../components/FileUploader/demo/constants.ts | 2 + .../components/FileUploader/demo/index.tsx | 77 ++++++---- .../src/components/FileUploader/utils.ts | 13 +- 25 files changed, 773 insertions(+), 557 deletions(-) create mode 100644 packages/web-react/src/components/FileUploader/__tests__/utils.test.ts delete mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderAccept.tsx create mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderAttachment.tsx create mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderAttachmentWithCustomAction.tsx create mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderAttachmentWithImagePreview.tsx rename packages/web-react/src/components/FileUploader/demo/{FileUploaderFluid.tsx => FileUploaderDefault.tsx} (60%) create mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderDraggingNotAvailable.tsx create mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderExampleOfJSControlledForm.tsx create mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderFluidWidth.tsx create mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderInputDisabled.tsx create mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderInputMultiple.tsx rename packages/web-react/src/components/FileUploader/demo/{FileUploaderDismissible.tsx => FileUploaderInputMultipleWithFileQueueBehaviorControl.tsx} (59%) create mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderInputValidationStates.tsx create mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderInputWithAttachment.tsx create mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderMultipleWithValidation.tsx delete mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderUncontrolledDismissible.tsx delete mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderUncontrolledFluid.tsx delete mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderValidationState.tsx delete mode 100644 packages/web-react/src/components/FileUploader/demo/FileUploaderWithImagePreview.tsx delete mode 100644 packages/web-react/src/components/FileUploader/demo/FormWithFileUploader.tsx delete mode 100644 packages/web-react/src/components/FileUploader/demo/FormWithUncontrolledFileUploader.tsx create mode 100644 packages/web-react/src/components/FileUploader/demo/constants.ts diff --git a/packages/web-react/docs/DocsSections.tsx b/packages/web-react/docs/DocsSections.tsx index c6d9be230d..18660fa83b 100644 --- a/packages/web-react/docs/DocsSections.tsx +++ b/packages/web-react/docs/DocsSections.tsx @@ -1,15 +1,28 @@ import React, { ReactNode } from 'react'; +import { Tag } from '../src/components'; interface DocsSectionProps { children: ReactNode; + tag?: string; title: string; } -const DocsSection = ({ children, title }: DocsSectionProps) => ( +const DocsSection = ({ children, title, tag }: DocsSectionProps) => (
-

{title}

+

+ {title} + {tag && ( + + {tag} + + )} +

{children}
); +DocsSection.defaultProps = { + tag: '', +}; + export default DocsSection; diff --git a/packages/web-react/src/components/FileUploader/__tests__/utils.test.ts b/packages/web-react/src/components/FileUploader/__tests__/utils.test.ts new file mode 100644 index 0000000000..54b38e6ec3 --- /dev/null +++ b/packages/web-react/src/components/FileUploader/__tests__/utils.test.ts @@ -0,0 +1,25 @@ +import { base64ToByteArray, image2Base64Preview } from '../utils'; + +const base64 = 'SGVsbG8gd29ybGQ='; +const blob = new Uint8Array([72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]); + +describe('image2Base64Preview', () => { + it('should convert image file to base64 string', () => { + const file = new File([blob], 'image.jpg', { + type: 'image/jpeg', + }); + + image2Base64Preview(file, 100, (base64Preview) => { + expect(base64Preview).toBeDefined(); + expect(base64Preview).toBe(base64); + }); + }); +}); + +describe('base64ToByteArray', () => { + it('should convert a base64 string to a byte array', () => { + const result = base64ToByteArray(base64); + + expect(result).toEqual(blob); + }); +}); diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderAccept.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderAccept.tsx deleted file mode 100644 index bccdc3872b..0000000000 --- a/packages/web-react/src/components/FileUploader/demo/FileUploaderAccept.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { SpiritFileUploaderAttachmentProps } from '../../../types'; -import FileUploader from '../FileUploader'; -import FileUploaderInput from '../FileUploaderInput'; -import FileUploaderList from '../FileUploaderList'; -import FileUploaderAttachment from '../FileUploaderAttachment'; -import { useFileQueue } from '../useFileQueue'; - -const Story = () => { - const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); - - const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( - - ); - - return ( - <> -

- Here is an example with `accept` attribute and only images are allowed -

- - console.error(error)} - isMultiple - /> - - - - ); -}; - -export default Story; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachment.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachment.tsx new file mode 100644 index 0000000000..b8482df1af --- /dev/null +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachment.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { DEMO_ATTACHMENT_BASE64_IMAGE } from './constants'; +import { base64ToByteArray } from '../utils'; +import { FileUploaderAttachment as FileUploaderAttachmentComponent, useFileQueue } from '..'; + +const FileUploaderAttachment = () => { + const { onDismiss } = useFileQueue(); + + const byteArray = base64ToByteArray(DEMO_ATTACHMENT_BASE64_IMAGE); + + // ⚠️ VISUAL EXAMPLE ONLY, DO NOT COPY-PASTE + return ( +
+
+ + { + alert('Edit'); + }} + /> +
+
+ ); +}; + +export default FileUploaderAttachment; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachmentWithCustomAction.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachmentWithCustomAction.tsx new file mode 100644 index 0000000000..486daef4a0 --- /dev/null +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachmentWithCustomAction.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { SpiritFileUploaderAttachmentProps } from '../../../types'; +import { FileUploader, FileUploaderAttachment, FileUploaderInput, FileUploaderList, useFileQueue } from '..'; + +const FileUploaderAttachmentWithCustomAction = () => { + const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); + + const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( + { + alert('Custom action clicked'); + }} + {...props} + /> + ); + + return ( + + console.error('My error log', error)} + /> + + + ); +}; + +export default FileUploaderAttachmentWithCustomAction; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachmentWithImagePreview.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachmentWithImagePreview.tsx new file mode 100644 index 0000000000..8a130971e4 --- /dev/null +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachmentWithImagePreview.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { SpiritFileUploaderAttachmentProps } from '../../../types'; +import { FileUploader, FileUploaderAttachment, FileUploaderInput, FileUploaderList, useFileQueue } from '..'; + +const FileUploaderAttachmentWithImagePreview = () => { + const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); + + const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( + { + alert('edit'); + }} + {...props} + /> + ); + + return ( + + console.error('My error log', error)} + /> + + + ); +}; + +export default FileUploaderAttachmentWithImagePreview; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderFluid.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderDefault.tsx similarity index 60% rename from packages/web-react/src/components/FileUploader/demo/FileUploaderFluid.tsx rename to packages/web-react/src/components/FileUploader/demo/FileUploaderDefault.tsx index 529b136c62..c714da2c02 100644 --- a/packages/web-react/src/components/FileUploader/demo/FileUploaderFluid.tsx +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderDefault.tsx @@ -1,12 +1,8 @@ import React from 'react'; -import { FileUploaderBaseProps, SpiritFileUploaderAttachmentProps } from '../../../types'; -import { useFileQueue } from '../useFileQueue'; -import FileUploader from '../FileUploader'; -import FileUploaderInput from '../FileUploaderInput'; -import FileUploaderList from '../FileUploaderList'; -import FileUploaderAttachment from '../FileUploaderAttachment'; +import { SpiritFileUploaderAttachmentProps } from '../../../types'; +import { FileUploader, FileUploaderAttachment, FileUploaderInput, FileUploaderList, useFileQueue } from '..'; -const Story = (args: FileUploaderBaseProps) => { +const FileUploaderDefault = () => { const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( @@ -15,36 +11,32 @@ const Story = (args: FileUploaderBaseProps) => { return ( console.error('My error log', error)} - queueLimitBehavior="hide" /> ); }; -export default Story; +export default FileUploaderDefault; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderDraggingNotAvailable.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderDraggingNotAvailable.tsx new file mode 100644 index 0000000000..e640846f30 --- /dev/null +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderDraggingNotAvailable.tsx @@ -0,0 +1,48 @@ +import React, { useEffect } from 'react'; +import { SpiritFileUploaderAttachmentProps } from '../../../types'; +import { FileUploader, FileUploaderAttachment, FileUploaderInput, FileUploaderList, useFileQueue } from '..'; + +const FileUploaderDraggingNotAvailable = () => { + const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); + + const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( + + ); + + useEffect(() => { + const element = document.getElementById('fileUploaderDraggingNotAvailable')?.querySelector('.has-drag-and-drop'); + element?.classList.remove('has-drag-and-drop'); + }, []); + + // ⚠️ VISUAL EXAMPLE ONLY, DO NOT COPY-PASTE + return ( + + console.error('My error log', error)} + /> + + + ); +}; + +export default FileUploaderDraggingNotAvailable; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderExampleOfJSControlledForm.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderExampleOfJSControlledForm.tsx new file mode 100644 index 0000000000..fdfc8c0ee1 --- /dev/null +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderExampleOfJSControlledForm.tsx @@ -0,0 +1,66 @@ +import React, { FormEvent, useState } from 'react'; +import { SpiritFileUploaderAttachmentProps } from '../../../types'; +import { Button } from '../../Button'; +import { FileUploader, FileUploaderAttachment, FileUploaderInput, FileUploaderList, useFileQueue } from '..'; + +const FileUploaderExampleOfJSControlledForm = () => { + const [submitting, setSubmitting] = useState(false); + const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); + + const submitHandler = (event: FormEvent) => { + event.preventDefault(); + /* eslint-disable-next-line no-console */ + console.info('file queue', fileQueue); + + setSubmitting(true); + + setTimeout(() => { + clearQueue(); + setSubmitting(false); + /* eslint-disable-next-line no-console */ + console.log('file queue after submit', fileQueue); + }, 250); + }; + + const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( + + ); + + return ( +
+ + console.error('My error log', error)} + /> + + +
+ +
+
+ ); +}; + +export default FileUploaderExampleOfJSControlledForm; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderFluidWidth.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderFluidWidth.tsx new file mode 100644 index 0000000000..809515a53d --- /dev/null +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderFluidWidth.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { FileUploader, FileUploaderAttachment, FileUploaderInput, useFileQueue } from '..'; + +const FileUploaderFluidWidth = () => { + const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); + + // ⚠️ VISUAL EXAMPLE ONLY, DO NOT COPY-PASTE + return ( + + console.error('My error log', error)} + /> +
+ +
+ + ); +}; + +export default FileUploaderFluidWidth; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderInputDisabled.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderInputDisabled.tsx new file mode 100644 index 0000000000..fed21cc607 --- /dev/null +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderInputDisabled.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { SpiritFileUploaderAttachmentProps } from '../../../types'; +import { FileUploader, FileUploaderAttachment, FileUploaderInput, FileUploaderList, useFileQueue } from '..'; + +const FileUploaderInputDisabled = () => { + const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); + + const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( + + ); + + return ( + + console.error('My error log', error)} + isDisabled + isRequired + /> + + + ); +}; + +export default FileUploaderInputDisabled; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderInputMultiple.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderInputMultiple.tsx new file mode 100644 index 0000000000..f418971ea3 --- /dev/null +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderInputMultiple.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { SpiritFileUploaderAttachmentProps } from '../../../types'; +import { FileUploader, FileUploaderAttachment, FileUploaderInput, FileUploaderList, useFileQueue } from '..'; + +const FileUploaderInputMultiple = () => { + const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); + + const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( + + ); + + return ( + + console.error('My error log', error)} + isMultiple + /> + + + ); +}; + +export default FileUploaderInputMultiple; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderDismissible.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderInputMultipleWithFileQueueBehaviorControl.tsx similarity index 59% rename from packages/web-react/src/components/FileUploader/demo/FileUploaderDismissible.tsx rename to packages/web-react/src/components/FileUploader/demo/FileUploaderInputMultipleWithFileQueueBehaviorControl.tsx index ca65b47361..624729bd05 100644 --- a/packages/web-react/src/components/FileUploader/demo/FileUploaderDismissible.tsx +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderInputMultipleWithFileQueueBehaviorControl.tsx @@ -1,12 +1,8 @@ import React from 'react'; -import { FileUploaderBaseProps, SpiritFileUploaderAttachmentProps } from '../../../types'; -import { useFileQueue } from '../useFileQueue'; -import FileUploader from '../FileUploader'; -import FileUploaderInput from '../FileUploaderInput'; -import FileUploaderList from '../FileUploaderList'; -import FileUploaderAttachment from '../FileUploaderAttachment'; +import { SpiritFileUploaderAttachmentProps } from '../../../types'; +import { FileUploader, FileUploaderAttachment, FileUploaderInput, FileUploaderList, useFileQueue } from '..'; -const Story = (args: FileUploaderBaseProps) => { +const FileUploaderInputMultipleWithFileQueueBehaviorControl = () => { const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( @@ -15,37 +11,36 @@ const Story = (args: FileUploaderBaseProps) => { return ( console.error('My error log', error)} queueLimitBehavior="hide" - isMultiple /> ); }; -export default Story; +export default FileUploaderInputMultipleWithFileQueueBehaviorControl; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderInputValidationStates.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderInputValidationStates.tsx new file mode 100644 index 0000000000..78e192ae8f --- /dev/null +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderInputValidationStates.tsx @@ -0,0 +1,132 @@ +import React from 'react'; +import { SpiritFileUploaderAttachmentProps } from '../../../types'; +import { FileUploader, FileUploaderAttachment, FileUploaderInput, FileUploaderList, useFileQueue } from '..'; + +const FileUploaderInputValidationStates = () => { + const { + fileQueue: fileQueueSuccess, + addToQueue: addToQueueSuccess, + clearQueue: clearQueueSuccess, + onDismiss: onDismissSuccess, + findInQueue: findInQueueSuccess, + updateQueue: updateQueueSuccess, + } = useFileQueue(); + + const { + fileQueue: fileQueueWarning, + addToQueue: addToQueueWarning, + clearQueue: clearQueueWarning, + onDismiss: onDismissWarning, + findInQueue: findInQueueWarning, + updateQueue: updateQueueWarning, + } = useFileQueue(); + + const { + fileQueue: fileQueueDanger, + addToQueue: addToQueueDanger, + clearQueue: clearQueueDanger, + onDismiss: onDismissDanger, + findInQueue: findInQueueDanger, + updateQueue: updateQueueDanger, + } = useFileQueue(); + + const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( + + ); + + return ( + <> + + console.error('My error log', error)} + validationText="Success validation text" + validationState="success" + isRequired + /> + + + + + console.error('My error log', error)} + validationText="Warning validation text" + validationState="warning" + isRequired + /> + + + + + console.error('My error log', error)} + validationText={['Danger validation text', 'Another danger validation text']} + validationState="danger" + isRequired + /> + + + + ); +}; + +export default FileUploaderInputValidationStates; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderInputWithAttachment.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderInputWithAttachment.tsx new file mode 100644 index 0000000000..66790c082b --- /dev/null +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderInputWithAttachment.tsx @@ -0,0 +1,83 @@ +import React from 'react'; +import { FileUploader, FileUploaderAttachment, FileUploaderInput, useFileQueue } from '..'; + +const FileUploaderInputWithAttachment = () => { + const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); + + return ( + <> + {/* ⚠️ VISUAL EXAMPLE ONLY, DO NOT COPY-PASTE */} + + console.error('My error log', error)} + /> +
+ +
+ + + {/* ⚠️ VISUAL EXAMPLE ONLY, DO NOT COPY-PASTE */} + + console.error('My error log', error)} + validationText="Danger validation text" + validationState="danger" + /> +
+ + +
+ + + ); +}; + +export default FileUploaderInputWithAttachment; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderMultipleWithValidation.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderMultipleWithValidation.tsx new file mode 100644 index 0000000000..2ce99c06af --- /dev/null +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderMultipleWithValidation.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { SpiritFileUploaderAttachmentProps } from '../../../types'; +import { FileUploader, FileUploaderAttachment, FileUploaderInput, FileUploaderList, useFileQueue } from '..'; + +const FileUploaderMultipleWithValidation = () => { + const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); + + const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( + + ); + + return ( + + console.error('My error log', error)} + /> + + + ); +}; + +export default FileUploaderMultipleWithValidation; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderUncontrolledDismissible.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderUncontrolledDismissible.tsx deleted file mode 100644 index afb98f5721..0000000000 --- a/packages/web-react/src/components/FileUploader/demo/FileUploaderUncontrolledDismissible.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { ComponentStory } from '@storybook/react'; -import { SpiritUncontrolledFileUploaderProps } from '../../../types'; -import UncontrolledFileUploader from '../UncontrolledFileUploader'; -import FileUploaderAttachment from '../FileUploaderAttachment'; - -const Story: ComponentStory = (args: SpiritUncontrolledFileUploaderProps) => ( - -); - -Story.args = { - attachmentComponent: (props) => , - id: 'fileUploaderUncontrolled', - inputId: 'fileUploaderUncontrolledInput', - inputName: 'attachments', - inputLabel: 'Input label', - inputProps: { - accept: '*', - }, - linkText: 'Upload your file(s)', - listId: 'fileUploaderUncontrolledList', - listProps: { - label: 'Attachments', - }, - queueLimitBehavior: 'hide', - isMultiple: true, - maxUploadedFiles: 3, - /* eslint-disable-next-line no-console */ - onInputError: (error) => console.error('My error log', error), -}; - -export default Story; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderUncontrolledFluid.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderUncontrolledFluid.tsx deleted file mode 100644 index 19056a44a5..0000000000 --- a/packages/web-react/src/components/FileUploader/demo/FileUploaderUncontrolledFluid.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { ComponentStory } from '@storybook/react'; -import { SpiritUncontrolledFileUploaderProps } from '../../../types'; -import UncontrolledFileUploader from '../UncontrolledFileUploader'; -import FileUploaderAttachment from '../FileUploaderAttachment'; - -const Story: ComponentStory = (args: SpiritUncontrolledFileUploaderProps) => ( - -); - -Story.args = { - attachmentComponent: (props) => , - id: 'fileUploaderUncontrolled', - inputId: 'fileUploaderUncontrolledInput', - inputName: 'attachments', - inputLabel: 'Input label', - inputProps: { - accept: '*', - }, - linkText: 'Upload your file', - listId: 'fileUploaderUncontrolledList', - listProps: { - label: 'Attachments', - }, - queueLimitBehavior: 'hide', - isFluid: true, - /* eslint-disable-next-line no-console */ - onInputError: (error) => console.error('My error log', error), -}; - -export default Story; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderValidationState.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderValidationState.tsx deleted file mode 100644 index 1a1481e211..0000000000 --- a/packages/web-react/src/components/FileUploader/demo/FileUploaderValidationState.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react'; -import FileUploader from '../FileUploader'; -import FileUploaderInput from '../FileUploaderInput'; -import { useFileQueue } from '../useFileQueue'; - -const Story = () => { - const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); - const args = { onDismiss, fileQueue, addToQueue, clearQueue, findInQueue, updateQueue }; - const id = 'fileUploaderValidationStateExample'; - - return ( - <> -

- These samples are static and only show validation states -

-
- - - {/* FileUploaderList */} - - - - - {/* FileUploaderList */} - - - - - {/* FileUploaderList */} - -
-
- - - {/* FileUploaderList */} - -
- - ); -}; - -Story.args = { - id: 'FileUploaderValidationStateExample', -}; - -export default Story; diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderWithImagePreview.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderWithImagePreview.tsx deleted file mode 100644 index a4c59c293b..0000000000 --- a/packages/web-react/src/components/FileUploader/demo/FileUploaderWithImagePreview.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import { SpiritFileUploaderAttachmentProps } from '../../../types'; -import FileUploader from '../FileUploader'; -import FileUploaderInput from '../FileUploaderInput'; -import FileUploaderList from '../FileUploaderList'; -import FileUploaderAttachment from '../FileUploaderAttachment'; -import { useFileQueue } from '../useFileQueue'; - -const Story = () => { - const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); - - const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( - { - alert('Edit action'); - }} - {...props} - /> - ); - - return ( - <> -

- Here is an example with `hasImagePreview` and `onEdit` attributes and only images are allowed -

- - console.error(error)} - isMultiple - /> - - - - ); -}; - -export default Story; diff --git a/packages/web-react/src/components/FileUploader/demo/FormWithFileUploader.tsx b/packages/web-react/src/components/FileUploader/demo/FormWithFileUploader.tsx deleted file mode 100644 index 4d174087d4..0000000000 --- a/packages/web-react/src/components/FileUploader/demo/FormWithFileUploader.tsx +++ /dev/null @@ -1,111 +0,0 @@ -/* eslint-disable no-console */ -import React, { createRef, useState, FormEvent, MutableRefObject } from 'react'; -import { SpiritFileUploaderAttachmentProps, ValidationState } from '../../../types'; -import { useFileQueue } from '../useFileQueue'; -import FileUploader from '../FileUploader'; -import FileUploaderInput from '../FileUploaderInput'; -import FileUploaderList from '../FileUploaderList'; -import FileUploaderAttachment from '../FileUploaderAttachment'; -import { Button } from '../../Button'; - -const Story = () => { - const [submitting, setSubmitting] = useState(false); - const [submitted, setSubmitted] = useState(false); - const [validationText, setValidationText] = useState(undefined); - const [validationState, setValidationState] = useState(undefined); - - const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); - - const inputReference = createRef() as MutableRefObject; - const dropZoneReference = createRef() as MutableRefObject; - - const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( - - ); - - const submitHandler = (event: FormEvent) => { - event.preventDefault(); - const master = new Map(fileQueue); - - setSubmitting(true); - console.log('inputReference', inputReference); - console.log('dropZoneReference', dropZoneReference); - - setTimeout(() => { - console.info('form data', master, event); - setSubmitting(false); - setSubmitted(true); - clearQueue(); - }, 2500); - }; - - const errorHandler = (error: string | Error) => { - console.error(error); - setValidationState('danger'); - setValidationText(String(error)); - - setTimeout(() => { - setValidationState(undefined); - setValidationText(undefined); - }, 5000); - }; - - const resetStateHandler = () => { - setValidationState(undefined); - setValidationText(undefined); - setSubmitted(false); - }; - - return ( -
-

- - When you open your console in a browser, you can see the changes as you send or add/remove items from the - queue. - -

- - - - -
- - {submitted && ( - - )} -
-
- ); -}; - -export default Story; diff --git a/packages/web-react/src/components/FileUploader/demo/FormWithUncontrolledFileUploader.tsx b/packages/web-react/src/components/FileUploader/demo/FormWithUncontrolledFileUploader.tsx deleted file mode 100644 index 569ecad2ca..0000000000 --- a/packages/web-react/src/components/FileUploader/demo/FormWithUncontrolledFileUploader.tsx +++ /dev/null @@ -1,104 +0,0 @@ -/* eslint-disable no-console */ -import React, { createRef, useState, FormEvent, MutableRefObject } from 'react'; -import { SpiritFileUploaderAttachmentProps, FileQueueMapType, ValidationState } from '../../../types'; -import UncontrolledFileUploader from '../UncontrolledFileUploader'; -import FileUploaderAttachment from '../FileUploaderAttachment'; -import { Button } from '../../Button'; - -const Story = () => { - const [submitting, setSubmitting] = useState(false); - const [submitted, setSubmitted] = useState(false); - const [validationText, setValidationText] = useState(undefined); - const [validationState, setValidationState] = useState(undefined); - const [queue, setQueue] = useState(new Map()); - - const inputReference = createRef() as MutableRefObject; - const dropZoneReference = createRef() as MutableRefObject; - - const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( - - ); - - const changeHandler = (fileQueue: FileQueueMapType) => { - setQueue(fileQueue); - console.log('change handler ...', fileQueue); - }; - - const submitHandler = (event: FormEvent) => { - event.preventDefault(); - const master = new Map(queue); - - setSubmitting(true); - console.log('inputReference', inputReference); - console.log('dropZoneReference', dropZoneReference); - - setTimeout(() => { - console.info('form data', master, event); - setSubmitting(false); - setSubmitted(true); - - queue.clear(); - setQueue(new Map(queue)); - }, 2500); - }; - - const errorHandler = (error: string | Error) => { - console.error(error); - setValidationState('danger'); - setValidationText(String(error)); - - setTimeout(() => { - setValidationState(undefined); - setValidationText(undefined); - }, 5000); - }; - - const resetStateHandler = () => { - setValidationState(undefined); - setValidationText(undefined); - setSubmitted(false); - }; - - return ( -
-

- - When you open your console in a browser, you can see the changes as you send or add/remove items from the - queue. - -

- -
- - {submitted && ( - - )} -
- - ); -}; - -export default Story; diff --git a/packages/web-react/src/components/FileUploader/demo/constants.ts b/packages/web-react/src/components/FileUploader/demo/constants.ts new file mode 100644 index 0000000000..e06e4eae6b --- /dev/null +++ b/packages/web-react/src/components/FileUploader/demo/constants.ts @@ -0,0 +1,2 @@ +export const DEMO_ATTACHMENT_BASE64_IMAGE = + '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'; diff --git a/packages/web-react/src/components/FileUploader/demo/index.tsx b/packages/web-react/src/components/FileUploader/demo/index.tsx index ce5ef89dab..29cbf5047c 100644 --- a/packages/web-react/src/components/FileUploader/demo/index.tsx +++ b/packages/web-react/src/components/FileUploader/demo/index.tsx @@ -5,47 +5,68 @@ import ReactDOM from 'react-dom/client'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved // @ts-ignore: No declaration file import icons from '@lmc-eu/spirit-icons/dist/icons'; -import { IconsProvider } from '../../../context'; import DocsSection from '../../../../docs/DocsSections'; -import FileUploader from './FileUploader'; -import FileUploaderAccept from './FileUploaderAccept'; -import FileUploaderWithImagePreview from './FileUploaderWithImagePreview'; -import FileUploaderDismissible from './FileUploaderDismissible'; -import FileUploaderFluid from './FileUploaderFluid'; -import FileUploaderValidationState from './FileUploaderValidationState'; -import FileUploaderUncontrolled from './FileUploaderUncontrolled'; -import FormWithFileUploader from './FormWithFileUploader'; -import FormWithUncontrolledFileUploader from './FormWithUncontrolledFileUploader'; +import DocsFormFieldGrid from '../../../../docs/DocsFormFieldGrid'; +import { IconsProvider } from '../../../context'; +import FileUploaderDefault from './FileUploaderDefault'; +import FileUploaderInputMultiple from './FileUploaderInputMultiple'; +import FileUploaderMultipleWithValidation from './FileUploaderMultipleWithValidation'; +import FileUploaderInputMultipleWithFileQueueBehaviorControl from './FileUploaderInputMultipleWithFileQueueBehaviorControl'; +import FileUploaderInputValidationStates from './FileUploaderInputValidationStates'; +import FileUploaderInputDisabled from './FileUploaderInputDisabled'; +import FileUploaderAttachment from './FileUploaderAttachment'; +import FileUploaderAttachmentWithImagePreview from './FileUploaderAttachmentWithImagePreview'; +import FileUploaderAttachmentWithCustomAction from './FileUploaderAttachmentWithCustomAction'; +import FileUploaderInputWithAttachment from './FileUploaderInputWithAttachment'; +import FileUploaderDraggingNotAvailable from './FileUploaderDraggingNotAvailable'; +import FileUploaderFluidWidth from './FileUploaderFluidWidth'; +import FileUploaderExampleOfJSControlledForm from './FileUploaderExampleOfJSControlledForm'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - - + + + + + + + + + + + + + + + + - - + + - - + + - - + + - - + + - - + + + + - - + + - - + + - - + + , diff --git a/packages/web-react/src/components/FileUploader/utils.ts b/packages/web-react/src/components/FileUploader/utils.ts index da4f214cf3..9670be48bc 100644 --- a/packages/web-react/src/components/FileUploader/utils.ts +++ b/packages/web-react/src/components/FileUploader/utils.ts @@ -48,4 +48,15 @@ const image2Base64Preview = (file: File, maxWidth: number, callback: (base64Prev reader.readAsDataURL(file); }; -export { getAttachmentInput, image2Base64Preview }; +const base64ToByteArray = (base64Image: string) => { + const byteCharacters = atob(base64Image); + const byteNumbers = new Array(byteCharacters.length); + for (let i = 0; i < byteCharacters.length; i++) { + byteNumbers[i] = byteCharacters.charCodeAt(i); + } + const byteArray = new Uint8Array(byteNumbers); + + return byteArray; +}; + +export { getAttachmentInput, image2Base64Preview, base64ToByteArray };