Docs(web-react, web-twig) Add FileUploader demo #DS-896

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) => (
   <section className="docs-Section">
-    <h2 className="docs-Heading">{title}</h2>
+    <h2 className="docs-Heading">
+      {title}
+      {tag && (
+        <Tag color="warning" isSubtle>
+          {tag}
+        </Tag>
+      )}
+    </h2>
     {children}
   </section>
 );
 
+DocsSection.defaultProps = {
+  tag: '',
+};
+
 export default DocsSection;

packages/web-react/src/components/FileUploader/FileUploaderInput.tsx

@@ -74,10 +74,10 @@ const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
     <div
       {...transferProps}
       {...styleProps}
-      onDragOver={isDragAndDropSupported ? onDragOver : undefined}
-      onDragEnter={isDragAndDropSupported ? onDragEnter : undefined}
-      onDragLeave={isDragAndDropSupported ? onDragLeave : undefined}
-      onDrop={isDragAndDropSupported ? onDrop : undefined}
+      onDragOver={!isDisabled && isDragAndDropSupported ? onDragOver : undefined}
+      onDragEnter={!isDisabled && isDragAndDropSupported ? onDragEnter : undefined}
+      onDragLeave={!isDisabled && isDragAndDropSupported ? onDragLeave : undefined}
+      onDrop={!isDisabled && isDragAndDropSupported ? onDrop : undefined}
       className={classNames(classProps.input.root, styleProps.className)}
     >
       <label htmlFor={id} className={classProps.input.label}>

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);
+  });
+});

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 (
+    <div className="FileUploader">
+      <div className="FileUploaderList">
+        <FileUploaderAttachmentComponent
+          name="test"
+          file={new File([''], 'Document.pdf', { type: 'image/png', lastModified: 123456789 })}
+          id="1"
+          label="Document.pdf"
+          onDismiss={onDismiss}
+        />
+        <FileUploaderAttachmentComponent
+          hasImagePreview
+          name="test"
+          file={new File([byteArray], 'test1.png', { type: 'image/png', lastModified: 123456789 })}
+          id="2"
+          label="Image with a long name.jpg"
+          onDismiss={onDismiss}
+          onEdit={() => {
+            alert('Edit');
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FileUploaderAttachment;

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) => (
+    <FileUploaderAttachment
+      key={id}
+      id={id}
+      onEdit={() => {
+        alert('Custom action clicked');
+      }}
+      {...props}
+    />
+  );
+
+  return (
+    <FileUploader
+      addToQueue={addToQueue}
+      clearQueue={clearQueue}
+      fileQueue={fileQueue}
+      findInQueue={findInQueue}
+      id="fileUploaderAttachmentWithCustomAction"
+      onDismiss={onDismiss}
+      updateQueue={updateQueue}
+    >
+      <FileUploaderInput
+        helperText="Max size of each file is 10 MB"
+        id="fileUploaderAttachmentWithCustomActionInput"
+        label="Label"
+        labelText="or drag and drop here"
+        linkText="Upload your file(s)"
+        name="attachments"
+        /* eslint-disable-next-line no-console */
+        onError={(error) => console.error('My error log', error)}
+      />
+      <FileUploaderList
+        attachmentComponent={attachmentComponent}
+        id="fileUploaderAttachmentWithCustomActionAttachment"
+        inputName="attachments"
+        label="Attachments"
+      />
+    </FileUploader>
+  );
+};
+
+export default FileUploaderAttachmentWithCustomAction;

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) => (
+    <FileUploaderAttachment
+      key={id}
+      id={id}
+      onEdit={() => {
+        alert('edit');
+      }}
+      {...props}
+    />
+  );
+
+  return (
+    <FileUploader
+      addToQueue={addToQueue}
+      clearQueue={clearQueue}
+      fileQueue={fileQueue}
+      findInQueue={findInQueue}
+      id="fileUploaderAttachmentWithImagePreview"
+      onDismiss={onDismiss}
+      updateQueue={updateQueue}
+    >
+      <FileUploaderInput
+        helperText="Max size of each file is 10 MB"
+        id="fileUploaderAttachmentWithImagePreviewInput"
+        label="Label"
+        labelText="or drag and drop here"
+        linkText="Upload your file(s)"
+        name="attachments"
+        /* eslint-disable-next-line no-console */
+        onError={(error) => console.error('My error log', error)}
+      />
+      <FileUploaderList
+        attachmentComponent={attachmentComponent}
+        id="fileUploaderAttachmentWithImagePreviewAttachment"
+        inputName="attachments"
+        label="Attachments"
+        hasImagePreview
+      />
+    </FileUploader>
+  );
+};
+
+export default FileUploaderAttachmentWithImagePreview;

packages/web-react/src/components/FileUploader/demo/FileUploaderFluid.tsx → 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 (
     <FileUploader
-      {...args}
-      id="fileUploaderExampleFluid"
-      onDismiss={onDismiss}
-      fileQueue={fileQueue}
       addToQueue={addToQueue}
       clearQueue={clearQueue}
+      fileQueue={fileQueue}
       findInQueue={findInQueue}
+      id="fileUploaderDefault"
+      onDismiss={onDismiss}
       updateQueue={updateQueue}
-      isFluid
     >
       <FileUploaderInput
-        id="fileUploaderExampleFluidInput"
-        name="attachments"
+        helperText="Max file size is 10 MB"
+        id="fileUploaderDefaultInput"
         label="Label"
-        linkText="Upload your file"
         labelText="or drag and drop here"
-        helperText="Max file size is 10 MB"
-        validationText="Validation message"
+        linkText="Upload your file"
+        name="attachments"
         /* eslint-disable-next-line no-console */
         onError={(error) => console.error('My error log', error)}
-        queueLimitBehavior="hide"
       />
       <FileUploaderList
-        id="fileUploaderExampleFluidList"
-        label="Attachments"
-        inputName="attachments"
         attachmentComponent={attachmentComponent}
+        id="fileUploaderDefaultAttachment"
+        inputName="attachments"
+        label="Attachments"
       />
     </FileUploader>
   );
 };
 
-export default Story;
+export default FileUploaderDefault;

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) => (
+    <FileUploaderAttachment key={id} id={id} {...props} />
+  );
+
+  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 (
+    <FileUploader
+      addToQueue={addToQueue}
+      clearQueue={clearQueue}
+      fileQueue={fileQueue}
+      findInQueue={findInQueue}
+      id="fileUploaderDraggingNotAvailable"
+      onDismiss={onDismiss}
+      updateQueue={updateQueue}
+    >
+      <FileUploaderInput
+        helperText="Max file size is 10 MB"
+        id="fileUploaderDraggingNotAvailableInput"
+        label="Label"
+        labelText="or drag and drop here"
+        linkText="Upload your file"
+        name="attachments"
+        /* eslint-disable-next-line no-console */
+        onError={(error) => console.error('My error log', error)}
+      />
+      <FileUploaderList
+        attachmentComponent={attachmentComponent}
+        id="fileUploaderDraggingNotAvailableAttachment"
+        inputName="attachments"
+        label="Attachments"
+      />
+    </FileUploader>
+  );
+};
+
+export default FileUploaderDraggingNotAvailable;