@popsure/dirty-swan 0.27.28 → 0.27.30

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

@@ -0,0 +1,235 @@
+import { fireEvent, render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+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 screen = setup({});
+    const input = screen.getByTestId(inputTestId);
+    const files = [file, file];
+
+    await act(async () => {
+      fireEvent.change(input, { target: { 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 screen = setup({maxSize: 10 });
+      const input = screen.getByTestId(inputTestId);
+      const bigFile = file;
+      Object.defineProperty(bigFile, 'size', { value: 1024 });
+
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [bigFile] } });
+      });
+
+      expect(
+        screen.getByText("File is too large. It must be less than 10 Bytes.")
+      ).toBeInTheDocument();
+    });
+
+    it("should show wrong filetype error message", async () => {
+      const screen = setup({ accept: "document" });
+      const input = screen.getByTestId(inputTestId);
+  
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+  
+      expect(
+        screen.getByText("File type must be one of DOC, DOCX, PDF")
+      ).toBeInTheDocument();
+    });
+
+    it("should remove wrong filetype error message", async () => {
+      const screen = setup({ accept: "document" });
+      const input = screen.getByTestId(inputTestId);
+  
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+      
+      screen.getByAltText("remove").click();
+
+      expect(
+        screen.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,84 +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;
-  textOverrides?: {
-    instructionsText?: string;
-    currentlyUploadingText?: string;
-    supportsText?: string;
-  };
+  maxSize?: number;
+  textOverrides?: TextOverrides;
 }
 
-export default ({
+const MultiDropZone = ({
+  accept,
   uploadedFiles,
   onFileSelect,
   uploading,
   onRemoveFile,
   isCondensed = false,
   maxFiles = 0,
+  maxSize,
   textOverrides,
-}: Props) => {
-  const [error, setError] = useState('');
+}: 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}>
@@ -91,10 +97,13 @@ 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 : ''}`}>
@@ -104,28 +113,48 @@ export default ({
             : textOverrides?.instructionsText || 'Choose file or drag & drop'}
         </div>
         <div className="p-p--small tc-grey-500">
-          {textOverrides?.supportsText || 'Supports JPEG, PNG, PDF'}
+          {textOverrides?.supportsText || placeholder}
         </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}`);
+  });
+});

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

@@ -0,0 +1,69 @@
+import { Accept, ErrorCode, FileError } from "react-dropzone";
+import { formatBytes } from "../../../util/formatBytes";
+import { 
+  AcceptType, 
+  DOCUMENT_FILES, 
+  FileType, 
+  IMAGE_FILES, 
+  TextOverrides,
+  UploadStatus } from "../types";
+
+export const getUploadStatus = (progress: number, error?: string): UploadStatus => {
+  if (error) {
+    return 'ERROR';
+  }
+
+  if (progress < 100) {
+    return 'UPLOADING';
+  }
+
+  return 'COMPLETE';
+};
+
+const formatMimeType = (type: string, values: FileType[]): Accept  => {
+  const formatedValues = {} as Accept;
+
+  values.forEach((value) => {
+    formatedValues[`${type}/${value}`] = [`.${value}`];
+  });
+
+  return formatedValues;
+};
+
+export const DOCUMENT_FILES_ACCEPT = formatMimeType("application", DOCUMENT_FILES);
+export const IMAGE_FILES_ACCEPT = formatMimeType("image", IMAGE_FILES);
+  
+export const getFormattedAcceptObject = (accept: AcceptType = {}): Accept => {
+  if (accept === "document") {
+    return DOCUMENT_FILES_ACCEPT;
+  };
+
+  if (accept === "image") {
+    return IMAGE_FILES_ACCEPT;
+  };
+
+  return accept;
+}
+  
+export const formatAcceptFileList = (accept: Accept): string => (
+  Object.values(accept)
+    .reduce((acc, value) => [...acc, ...value], [])
+    .join(", ")
+    .replace(/\./g, '')
+    .toUpperCase()
+);
+
+export const getErrorMessage = (
+  { code, message }: FileError,
+  { fileList = "", maxSize }: { fileList?: string, maxSize?: number },
+  textOverrides?: TextOverrides,
+): string => {
+  switch (code) {
+    case ErrorCode.FileInvalidType:
+      return `${textOverrides?.fileTypeError || "File type must be one of"} ${fileList}`;
+    case ErrorCode.FileTooLarge:
+      return `${textOverrides?.fileTooLargeError || "File is too large. It must be less than"} ${formatBytes(maxSize || 0)}.`;
+    default:
+      return message;
+  }
+}

package/src/lib/scss/utils/_index.scss

@@ -1,3 +1,15 @@
 @function url-encoded-color($color) {
   @return '%23' + str-slice('#{$color}', 2, -1);
 }
+
+.sr-only {
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}