@popsure/dirty-swan 0.28.0-beta.4 → 0.28.0

package/src/lib/components/multiDropzone/index.stories.mdx

@@ -34,6 +34,25 @@ MultiDropzone component allows upload of multiple documents / files.
         token: 'abc',
         previewUrl: 'http://getpopsure.com/test_file_name.pdf',
       },
+      {
+        id: '124',
+        type: 'pdf',
+        progress: '72',
+        name: 'test_file_name.pdf',
+        token: 'abc',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+        showLoadingSpinner: true,
+        showProgressBar: false,
+      },
+      {
+        id: '125',
+        type: 'pdf',
+        progress: '72',
+        name: 'test_file_name.pdf',
+        token: 'abc',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+        showLoadingSpinner: true,
+      },
       {
         id: '456',
         type: 'pdf',
@@ -110,3 +129,59 @@ MultiDropzone component allows upload of multiple documents / files.
     onRemoveFile={() => {}}
   />
 </Preview>
+
+### Accepting only images
+
+<Preview>
+  <MultiDropzone
+    accept="image"
+    isCondensed
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+  />
+</Preview>
+
+### Accepting only documents
+
+<Preview>
+  <MultiDropzone
+    accept="document"
+    isCondensed
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+  />
+</Preview>
+
+### Limiting file size to 2MB
+
+<Preview>
+  <MultiDropzone
+    isCondensed
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+    maxSize={2096000}
+  />
+</Preview>
+
+### i18n support
+
+<Preview>
+  <MultiDropzone
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+    textOverrides={{
+      instructionsText: 'Datei auswählen oder per Drag & Drop platzieren',
+      supportsTextShort: 'Unterstützt werden',
+      currentlyUploadingText:
+        'Bitte warten während die Datei hochgeladen wird...'
+    }}
+  />
+</Preview>

package/src/lib/components/multiDropzone/index.test.tsx

@@ -0,0 +1,230 @@
+import { act, fireEvent, render } from '../../util/testUtils';
+import '@testing-library/jest-dom';
+
+import MultiDropzone, { MultiDropzoneProps } from '.';
+
+const mockOnFileSelect = jest.fn();
+const mockOnRemoveFile = jest.fn();
+const file = new File(['DummyFile'], 'dummy.png', { type: 'image/png' });
+
+const inputTestId = "ds-drop-input";
+const spinnerTestId = "ds-filecell-spinner";
+const progressbarTestId = "ds-filecell-progressbar";
+const uploadedFilesMock = {
+   id: "123",
+   name: "File name",
+   progress: 100,
+   type: "jpg",
+};
+
+const setup = ({
+ uploadedFiles = [],
+ uploading = false,
+ ...rest
+}: Partial<MultiDropzoneProps>) => {
+  return render(
+    <MultiDropzone
+      {...rest}
+      uploadedFiles={uploadedFiles}
+      uploading={uploading}
+      onFileSelect={mockOnFileSelect}
+      onRemoveFile={mockOnRemoveFile}
+    />
+  );
+};
+
+describe('MultiDropzone component', () => {
+  it("should call onFileSelect on files change", async () => {
+    const { getByTestId, user } = setup({});
+    const files = [file, file];
+
+    await user.upload(getByTestId(inputTestId), files);
+
+    expect(mockOnFileSelect).toHaveBeenCalledWith(files);
+  });
+
+  describe('Error states', () => {
+    it("should show max files error message", () => {
+      const screen = setup({
+        maxFiles: 1,
+        uploadedFiles: [uploadedFilesMock, {
+          ...uploadedFilesMock,
+          id: "222"
+        }],
+      });
+  
+      expect(screen.getByText("Too many files.")).toBeVisible();
+    });
+
+    it("should show max file size error message", async () => {
+      const { getByTestId, getByText, user } = setup({ maxSize: 10 });
+      const bigFile = file;
+      Object.defineProperty(bigFile, 'size', { value: 1024 });
+
+      await user.upload(getByTestId(inputTestId), [bigFile]);
+
+      expect(
+        getByText("File is too large. It must be less than 10 Bytes.")
+      ).toBeInTheDocument();
+    });
+
+    it("should show wrong filetype error message", async () => {
+      const { getByTestId, getByText } = setup({ accept: "document" });
+      const input = getByTestId(inputTestId);
+
+      await act(async () => {
+        // Keeping fireevent to emulate file change like drop
+        // Using userevent.upload doesn't work since input has an accept/html validation
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+
+      expect(
+        getByText("File type must be one of DOC, DOCX, PDF")
+      ).toBeInTheDocument();
+    });
+
+    it("should remove wrong filetype error message", async () => {
+      const { getByAltText, getByTestId, queryByText, user } = setup({ accept: "document" });
+      const input = getByTestId(inputTestId);
+
+      await act(async () => {
+        // Keeping fireevent to emulate file change like drop
+        // Using userevent.upload doesn't work since input has an accept/html validation
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+
+      await user.click(getByAltText("remove"));
+
+      expect(queryByText("File type must be one of DOC, DOCX, PDF")).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Copy text', () => {
+    it("should show uploader text", () => {
+      const screen = setup({});
+
+      expect(screen.getByText("Choose file or drag & drop")).toBeInTheDocument();
+    });
+
+    it("should show uploader text translated", () => {
+      const instructionsText = "Drag drop file";
+      const screen = setup({
+        textOverrides: { instructionsText }
+      });
+
+      expect(screen.getByText(instructionsText)).toBeInTheDocument();
+    });
+
+    it("should show image accept file type label", () => {
+      const screen = setup({ accept: "image" });
+
+      expect(
+        screen.getByText("Supports HEIC, BMP, JPEG, JPG, PNG")
+      ).toBeInTheDocument();
+    });
+
+    it("should show document accept file type label", () => {
+      const screen = setup({ accept: "document" });
+
+      expect(
+        screen.getByText("Supports DOC, DOCX, PDF")
+      ).toBeInTheDocument();
+    });
+
+    it("should custom document accept file type label", () => {
+      const screen = setup({ accept: {
+        "application/pdf": [".pdf"],
+        "image/jpg": [".jpg"],
+      } });
+
+      expect(
+        screen.getByText("Supports PDF, JPG")
+      ).toBeInTheDocument();
+    });
+
+    it("should show disabled text if is uploading", () => {
+      const screen = setup({ uploading: true });
+
+      expect(
+        screen.getByText("Please wait while uploading file...")
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Uploaded files', () => {
+    it("should show uploaded files", () => {
+      const screen = setup({
+        uploadedFiles: [uploadedFilesMock],
+      });
+
+      expect(
+        screen.getByText(uploadedFilesMock.name)
+      ).toBeInTheDocument();
+    });
+
+    it("should call onRemoveFile with uploaded file id", () => {
+      const screen = setup({
+        uploadedFiles: [uploadedFilesMock],
+      });
+
+      screen.getByAltText("remove").click();
+
+      expect(mockOnRemoveFile).toBeCalledWith(uploadedFilesMock.id);
+    });
+
+    it("should show uploaded file with uploading label", () => {
+      const screen = setup({
+        uploadedFiles: [{ ...uploadedFilesMock, progress: 50 }],
+      });
+
+      expect(screen.getByText("Uploading...")).toBeInTheDocument();
+    });
+
+    it("should show uploaded file with progress bar", () => {
+      const screen = setup({
+        uploadedFiles: [{
+          ...uploadedFilesMock,
+          progress: 50,
+        }],
+      });
+
+      expect(screen.getByTestId(progressbarTestId)).toBeInTheDocument();
+    });
+
+    it("should show uploaded file with no progress bar", () => {
+      const screen = setup({
+        uploadedFiles: [{
+          ...uploadedFilesMock,
+          progress: 50,
+          showProgressBar: false
+        }],
+      });
+
+      expect(screen.queryByTestId(progressbarTestId)).not.toBeInTheDocument();
+    });
+
+    it("should show uploaded file with loading spinner", () => {
+      const screen = setup({
+        uploadedFiles: [{
+          ...uploadedFilesMock,
+          progress: 50,
+          showLoadingSpinner: true
+        }],
+      });
+
+      expect(screen.getByTestId(spinnerTestId)).toBeInTheDocument();
+    });
+
+    it("should show uploaded file with no loading spinner", () => {
+      const screen = setup({
+        uploadedFiles: [{
+          ...uploadedFilesMock,
+          progress: 50,
+          showLoadingSpinner: false
+        }],
+      });
+
+      expect(screen.queryByTestId(spinnerTestId)).not.toBeInTheDocument();
+    });
+  });
+});

package/src/lib/components/multiDropzone/index.tsx

@@ -1,78 +1,90 @@
 import { useCallback, useState } from 'react';
-import { useDropzone, FileRejection } from 'react-dropzone';
 import classnames from 'classnames';
+import { useDropzone, FileRejection } from 'react-dropzone';
 import AnimateHeight from 'react-animate-height';
+import { v4 as uuidv4 } from 'uuid';
 import styles from './style.module.scss';
 import icons from './icons/index'; // TODO: inline all of the svgs
 import UploadFileCell from './UploadFileCell';
+import { 
+  formatAcceptFileList, 
+  getErrorMessage, 
+  getFormattedAcceptObject, 
+  getUploadStatus 
+} from './utils';
 
-export type UploadStatus = 'UPLOADING' | 'COMPLETE' | 'ERROR';
-
-export type FileType =
-  | 'heic'
-  | 'bmp'
-  | 'jpeg'
-  | 'jpg'
-  | 'png'
-  | 'doc'
-  | 'docx'
-  | 'pdf';
-
-const getUploadStatus = (progress: number, error?: string): UploadStatus => {
-  if (error) {
-    return 'ERROR';
-  }
-
-  if (progress < 100) {
-    return 'UPLOADING';
-  }
-
-  return 'COMPLETE';
-};
-
-export interface UploadedFile {
-  id: string;
-  name: string;
-  type: FileType | string;
-  previewUrl?: string;
-  progress: number;
-  error?: string;
-}
+import { 
+  AcceptType, 
+  ErrorMessage, 
+  FileType, 
+  TextOverrides, 
+  UploadedFile, 
+  UploadStatus 
+} from './types';
+import { formatBytes } from '../../util/formatBytes';
 
-interface Props {
+interface MultiDropzoneProps {
+  accept?: AcceptType;
   onFileSelect: (files: File[]) => void;
   uploadedFiles: UploadedFile[];
   uploading: boolean;
   onRemoveFile: (id: string) => void;
   isCondensed?: boolean;
   maxFiles?: number;
+  maxSize?: number;
+  textOverrides?: TextOverrides;
 }
 
-export default ({
+const MultiDropZone = ({
+  accept,
   uploadedFiles,
   onFileSelect,
   uploading,
   onRemoveFile,
   isCondensed = false,
   maxFiles = 0,
-}: Props) => {
-  const [error, setError] = useState('');
+  maxSize,
+  textOverrides,
+}: MultiDropzoneProps) => {
+  const [errors, setErrors] = useState<ErrorMessage[]>([]);
+  const formattedAccept = getFormattedAcceptObject(accept);
+  const fileList = formatAcceptFileList(formattedAccept);
+  const maxSizePlaceholder = maxSize && maxSize > 0
+  ? `${textOverrides?.sizeUpToText || "up to"} ${formatBytes(maxSize)}`
+  : "";
+const placeholder = `${textOverrides?.supportsTextShort || "Supports"} ${fileList || "JPEG, PNG, PDF"} ${maxSizePlaceholder}`;
+  const isOverMaxFiles = maxFiles > 0 && uploadedFiles.length > maxFiles;
+
+  const removeError = (removeId: string) => (
+    setErrors(errors.filter(({ id }) => id !== removeId))
+  );
 
   const onDrop = useCallback(
     (acceptedFiles: File[], filesRejected: FileRejection[]) => {
-      setError('');
-
-      if (filesRejected.length > 0) {
-        setError(filesRejected[0].errors[0].message);
-        return;
-      }
-
       onFileSelect(acceptedFiles);
+
+      setErrors((previousErrors) => ([
+        ...previousErrors,
+        ...filesRejected.map(({ errors }) => ({
+          id: uuidv4(),
+          message: getErrorMessage(
+            errors[0],
+            { fileList, maxSize },
+            textOverrides
+          ),
+        }))
+      ]));
     },
-    [onFileSelect]
+    [fileList, maxSize, onFileSelect, textOverrides]
   );
 
-  const { getRootProps, getInputProps } = useDropzone({ onDrop, maxFiles });
+
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: formattedAccept,
+    disabled: uploading,
+    maxSize,
+    onDrop,
+  });
 
   return (
     <div className={styles.container}>
@@ -85,38 +97,64 @@ export default ({
         )}
         {...getRootProps()}
       >
-        <input {...getInputProps()} />
+        <input
+          data-testid="ds-drop-input"
+          {...getInputProps()}
+        />
         <img
           className={isCondensed ? styles.img : ''}
-          src={icons.uploadIcon}
+          src={isCondensed ? icons.uploadSmallIcon : icons.uploadIcon}
           alt="purple cloud with an arrow"
         />
         <div className={`p-h4 mt8 ${isCondensed ? styles.textInline : ''}`}>
           {uploading
-            ? 'Please wait while uploading file...'
-            : 'Choose file or drag & drop'}
+            ? textOverrides?.currentlyUploadingText ||
+              'Please wait while uploading file...'
+            : textOverrides?.instructionsText || 'Choose file or drag & drop'}
+        </div>
+        <div className="p-p--small tc-grey-500">
+          {textOverrides?.supportsText || placeholder}
         </div>
-        <div className="p-p--small tc-grey-500">Supports JPEG, PNG, PDF</div>
       </div>
-      <AnimateHeight duration={300} height={error ? 'auto' : 0}>
-        <p className="tc-red-500 p-p--small">{error}</p>
-      </AnimateHeight>
+
+      {errors.map(({ id, message }) => message && (
+        <UploadFileCell
+          uploadStatus="ERROR"
+          file={{
+            error: message,
+            id,
+            name: message,
+            progress: 0,
+            type: "",
+          }}
+          key={id}
+          onRemoveFile={() => removeError(id)}
+          uploading={false}
+        />
+      ))}
+
       {uploadedFiles.length > 0 && (
         <div className="w100 mt16">
-          {uploadedFiles.map((file) => {
-            const uploadStatus = getUploadStatus(file.progress, file.error);
-            return (
-              <UploadFileCell
-                uploadStatus={uploadStatus}
-                file={file}
-                key={file.id}
-                onRemoveFile={onRemoveFile}
-                uploading={uploading}
-              />
-            );
-          })}
+          {uploadedFiles.map((file) => (
+            <UploadFileCell
+              uploadStatus={getUploadStatus(file.progress, file.error)}
+              file={file}
+              key={file.id}
+              onRemoveFile={onRemoveFile}
+              uploading={uploading}
+            />
+          ))}
         </div>
       )}
+
+      <AnimateHeight duration={300} height={isOverMaxFiles ? 'auto' : 0}>
+        <p className="tc-red-500 p-p--small">
+          {textOverrides?.tooManyFilesError || "Too many files."}
+        </p>
+      </AnimateHeight>
     </div>
   );
 };
+
+export type { FileType, MultiDropzoneProps, UploadedFile, UploadStatus };
+export default MultiDropZone;

package/src/lib/components/multiDropzone/types.ts

@@ -0,0 +1,36 @@
+import { Accept } from "react-dropzone";
+
+export type UploadStatus = 'UPLOADING' | 'COMPLETE' | 'ERROR';
+
+export const DOCUMENT_FILES = ['doc', 'docx', 'pdf'];
+export const IMAGE_FILES = ['heic', 'bmp', 'jpeg', 'jpg', 'png'];
+
+export const FILE_TYPES = [...DOCUMENT_FILES, ...IMAGE_FILES];
+export type FileType = typeof FILE_TYPES[number];
+
+export interface UploadedFile {
+  id: string;
+  name: string;
+  type: FileType | string;
+  previewUrl?: string;
+  progress: number;
+  error?: string;
+  showProgressBar?: boolean;
+  showLoadingSpinner?: boolean;
+}
+
+export type AcceptType = "document" | "image" | Accept;
+export interface TextOverrides {
+  currentlyUploadingText?: string;
+  fileTypeError?: string;
+  fileTooLargeError?: string;
+  instructionsText?: string;
+  sizeUpToText?: string;
+  supportsText?: string;
+  supportsTextShort?: string;
+  tooManyFilesError?: string;
+}
+export interface ErrorMessage {
+  id: string;
+  message: string;
+}

package/src/lib/components/multiDropzone/utils/index.test.ts

@@ -0,0 +1,112 @@
+import { ErrorCode } from 'react-dropzone';
+import { 
+  formatAcceptFileList,
+  getErrorMessage,
+  getFormattedAcceptObject, 
+  getUploadStatus 
+} from '.';
+
+const documentsAccept = {
+  'application/doc': ['.doc'],
+  'application/docx': ['.docx'],
+  'application/pdf': ['.pdf']
+};
+
+const imagesAccept = {
+  'image/heic': [".heic"],
+  'image/bmp': [".bmp"],
+  'image/jpeg': [".jpeg"],
+  'image/jpg': [".jpg"],
+  'image/png': [".png"]
+};
+
+describe('getUploadStatus', () => {
+  it('Should return error status if error is passed', () => {
+    expect(getUploadStatus(0, "Error message")).toEqual("ERROR");
+  });
+
+  it("Should return uploading status if progress hasn't finished", () => {
+    expect(getUploadStatus(50)).toEqual("UPLOADING");
+  });
+
+  it("Should return complete status if progress has finished", () => {
+    expect(getUploadStatus(100)).toEqual("COMPLETE");
+  });
+});
+
+describe('getFormattedAcceptObject', () => {
+  it('Should return image accept object if is of type image', () => {
+    expect(getFormattedAcceptObject("image")).toEqual(imagesAccept);
+  });
+
+  it('Should return documents accept object if is of type document', () => {
+    expect(getFormattedAcceptObject("document")).toEqual(documentsAccept);
+  });
+
+  it('Should return accept object if it is manually defined', () => {
+    const accept = { "application/pdf": [".pdf"] };
+
+    expect(getFormattedAcceptObject(accept)).toEqual(accept);
+  });
+});
+
+describe('formatAcceptFileList', () => {
+  it('Should return empty object if accept is empty', () => {
+    expect(formatAcceptFileList({})).toEqual("");
+  });
+
+  it('Should return documents list if documents accept is passed', () => {
+    expect(formatAcceptFileList(documentsAccept)).toEqual("DOC, DOCX, PDF");
+  });
+
+  it('Should return images list if images accept is passed', () => {
+    expect(formatAcceptFileList(imagesAccept)).toEqual("HEIC, BMP, JPEG, JPG, PNG"); 
+  });
+
+  it('Should return extension based on accept passed', () => {
+    const accept = { 
+      "application/pdf": [".pdf"],
+      "image/jpg": [".jpg"]
+    };
+
+    expect(formatAcceptFileList(accept)).toEqual("PDF, JPG");
+  });
+});
+
+describe('getErrorMessage', () => {
+  it('Should return default error message', () => {
+    const defaultMessage = "Default Error Message.";
+
+    expect(
+      getErrorMessage({
+        code: "UNKNOWN",
+        message: defaultMessage
+      }, { 
+        fileList: "" 
+      })
+    ).toEqual(defaultMessage);
+  });
+
+  it('Should return default FileInvalidType default message', () => {
+    const fileList = "JPG, PDF";
+
+    expect(
+      getErrorMessage({
+        code: ErrorCode.FileInvalidType,
+        message: ""
+      }, { fileList })
+    ).toEqual(`File type must be one of ${fileList}`);
+  });
+
+  it('Should return FileInvalidType with textOverride message', () => {
+    const fileTypeError = "File Invalid Error";
+    const fileList = "JPG, PDF";
+    
+    expect(
+      getErrorMessage({
+        code: ErrorCode.FileInvalidType,
+        message: ""
+      }, { fileList }, { fileTypeError })
+    ).toEqual(`${fileTypeError} ${fileList}`);
+  });
+});