@innovaccer/design-system 2.6.0 → 2.7.0-0

package/core/components/molecules/dropzone/DropzoneBase.tsx

@@ -106,7 +106,7 @@ export interface DropzoneBaseProps extends BaseProps {
    * @param {FileRejection[]} fileRejections
    * @param {(DragEvent|Event)} event
    */
-  onDropRejected?: (event: DragEvent | Event, rejectedFiles: FileRejection[]) => any;
+  onDropRejected?: (event: DragEvent | Event, rejectedFiles: FileRejection[]) => void;
 
   /**
    * Custom validation function
@@ -149,8 +149,8 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
     validator,
   } = props;
 
-  const rootRef = useRef(null);
-  const inputRef = useRef(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const [state, dispatch] = useReducer(reducer, initialState);
   const { isFocused, isFileDialogActive, draggedFiles } = state;
@@ -158,9 +158,9 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
   const openFileDialog = useCallback(() => {
     if (inputRef.current) {
       dispatch({ type: 'openDialog' });
-      // @ts-ignore
-      inputRef.current.value = null;
-      // @ts-ignore
+
+      inputRef.current.value = '';
+
       inputRef.current.click();
     }
   }, [dispatch]);
@@ -169,10 +169,9 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
     if (isFileDialogActive) {
       setTimeout(() => {
         if (inputRef.current) {
-          // @ts-ignore
           const { files } = inputRef.current;
 
-          if (!files.length) {
+          if (!files || !files.length) {
             dispatch({ type: 'closeDialog' });
 
             if (typeof onFileDialogCancel === 'function') {
@@ -193,7 +192,6 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
   // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
   const onKeyDownCb = useCallback(
     (event) => {
-      // @ts-ignore
       if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
         return;
       }
@@ -215,11 +213,11 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
     dispatch({ type: 'blur' });
   }, []);
 
-  const dragTargetsRef = useRef([]);
+  const dragTargetsRef = useRef<HTMLElement[]>([]);
 
-  const onDocumentDrop = (event: any) => {
-    // @ts-ignore
-    if (rootRef.current && rootRef.current.contains(event.target)) {
+  const onDocumentDrop = (event: DragEvent) => {
+    // Not every event target type is element so we have to check if it is.
+    if (event.target instanceof HTMLDivElement && rootRef.current && rootRef.current.contains(event.target)) {
       return;
     }
     event.preventDefault();
@@ -245,7 +243,6 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
       event.preventDefault();
       event.persist();
 
-      // @ts-ignore
       dragTargetsRef.current = [...dragTargetsRef.current, event.target];
 
       if (isEvtWithFiles(event)) {
@@ -294,11 +291,7 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
       event.preventDefault();
       event.persist();
 
-      const targets = dragTargetsRef.current.filter(
-        // @ts-ignore
-        (target) => rootRef.current && rootRef.current.contains(target)
-      );
-      // @ts-ignore
+      const targets = dragTargetsRef.current.filter((target) => rootRef.current && rootRef.current.contains(target));
       const targetIdx = targets.indexOf(event.target);
       if (targetIdx !== -1) {
         targets.splice(targetIdx, 1);
@@ -336,7 +329,10 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
           }
 
           const acceptedFiles: File[] = [];
-          const fileRejections: any[] = [];
+          const fileRejections: {
+            file: File;
+            errors: FileError[];
+          }[] = [];
 
           files.forEach((file: File) => {
             const [accepted, acceptError] = fileAccepted(file, accept);
@@ -351,8 +347,8 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
               if (customErrors) {
                 errors = errors.concat(customErrors);
               }
-
-              fileRejections.push({ file, errors: errors.filter((e) => e) });
+              const filteredErrors = errors.filter((e) => e) as Array<FileError>;
+              fileRejections.push({ file, errors: filteredErrors });
             }
           });
 
@@ -380,18 +376,10 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
     [multiple, accept, minSize, maxSize, getFilesFromEvent, onDrop, onDropAccepted, onDropRejected]
   );
 
-  const composeHandler = (fn: any) => {
+  const composeDragHandler = (fn: (event: DragEvent) => void) => {
     return disabled ? null : fn;
   };
 
-  const composeKeyboardHandler = (_fn: any) => {
-    return null;
-  };
-
-  const composeDragHandler = (fn: any) => {
-    return composeHandler(fn);
-  };
-
   const getRootProps = useMemo(
     () =>
       ({
@@ -406,10 +394,6 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
         onDropCallback,
         ...rest
       }: any = {}) => ({
-        onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
-        onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
-        onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
-        // onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),
         onDragEnter: composeDragHandler(composeEventHandlers(onDragEnterCallback, onDragEnterCb)),
         onDragOver: composeDragHandler(composeEventHandlers(onDragOverCallback, onDragOverCb)),
         onDragLeave: composeDragHandler(composeEventHandlers(onDragLeaveCallback, onDragLeaveCb)),
@@ -432,8 +416,8 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
           multiple,
           type: 'file',
           style: { display: 'none' },
-          onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
-          onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),
+          onChange: composeDragHandler(composeEventHandlers(onChange, onDropCb)),
+          onClick: composeDragHandler(composeEventHandlers(onClick, onInputElementClick)),
           autoComplete: 'off',
           tabIndex: -1,
           [refKey]: inputRef,
@@ -463,7 +447,7 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
     draggedFiles,
     fileError,
     isFocused: isFocused && !disabled,
-    open: composeHandler(openFileDialog),
+    open: composeDragHandler(openFileDialog),
   };
 };
 

package/core/components/molecules/dropzone/__stories__/index.story.tsx

@@ -1,57 +1,167 @@
 import * as React from 'react';
-import { Dropzone, Link } from '@/index';
-import { select, boolean, text } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-import { DropzoneProps } from '@/index.type';
+import { Dropzone, Link, FileList, Button } from '@/index';
+import { DropzoneProps, FileListProps } from '@/index.type';
 
 export const all = () => {
-  const type = select('type', ['standard', 'compressed', 'tight'], 'standard');
+  const [files, setFiles] = React.useState<FileListProps['fileList']>([]);
+  const getSize = (size: number) => `${(size / (1024 * 1024)).toFixed(2)} MB`;
 
-  const formatLabel = text('formatLabel', 'Accepted formats: PDF, jpg');
-  const sizeLabel = text('sizeLabel', 'Maximum size: 25 MB');
-  const multiple = boolean('multiple', true);
+  const onDelete = (id: number) => {
+    const updatedFiles = files.filter((file) => file.id !== id);
+    setFiles(updatedFiles);
+  };
+
+  const onDropHandler: DropzoneProps['onDrop'] = (_event, acceptedFiles, rejectedFiles) => {
+    const acceptedFileDetailList: FileListProps['fileList'] = acceptedFiles.map((file, id) => ({
+      file,
+      id: files.length + id,
+      fileSize: getSize(file.size),
+      networkError: false,
+      status: 'completed',
+    }));
+
+    const rejectedFilesDetailList: FileListProps['fileList'] = rejectedFiles.map((rejectedFile, id) => {
+      const { file, errors } = rejectedFile;
+      const errorMessageArray = errors.map((error) => error.message);
+      return {
+        file,
+        id: files.length + id,
+        fileSize: getSize(file.size),
+        status: 'error',
+        errorMessage: errorMessageArray.join(' and '),
+        networkError: false,
+      };
+    });
+
+    const updatedFiles = [...files, ...acceptedFileDetailList, ...rejectedFilesDetailList];
+    setFiles(updatedFiles);
+  };
 
-  const onDrop: DropzoneProps['onDrop'] = (_event, acceptedFiles) => {
-    return action(`Accepted Files: ${acceptedFiles}`)();
+  const actionRenderer: FileListProps['actionRenderer'] = (fileItem) => {
+    return (
+      <React.Fragment>
+        {fileItem.networkError && (
+          <Button appearance="transparent" icon="refresh" size="regular" className={'cursor-pointer'} />
+        )}
+        <Button
+          appearance="transparent"
+          icon="close"
+          size="regular"
+          onClick={() => onDelete(fileItem.id)}
+          className={'cursor-pointer'}
+        />
+      </React.Fragment>
+    );
   };
 
   return (
-    <Dropzone
-      formatLabel={formatLabel}
-      sizeLabel={sizeLabel}
-      multiple={multiple}
-      type={type}
-      onDrop={onDrop}
-      sampleFileLink={
-        <Link
-          href="http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf"
-          download="Test.pdf"
-          target="_blank"
-        >
-          Download sample file
-        </Link>
-      }
-    />
+    <React.Fragment>
+      <Dropzone
+        accept="image/jpeg, image/png"
+        formatLabel="Accepted formats: PDF, jpg"
+        sizeLabel="Maximum size: 25 MB"
+        multiple={true}
+        onDrop={onDropHandler}
+        className="mb-5"
+        sampleFileLink={
+          <Link
+            href="http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf"
+            download="Test.pdf"
+            target="_blank"
+          >
+            Download sample file
+          </Link>
+        }
+      />
+      <FileList fileList={files.map(({ file, metadata }) => ({ file, ...metadata }))} actionRenderer={actionRenderer} />
+    </React.Fragment>
   );
 };
 
 const customCode = `() => {
+  const [files, setFiles] = React.useState([]);
+
+  const getSize = (size) => (
+    \`\${(size / (1024 * 1024)).toFixed(2)} MB\`
+  );
+
+  const onDelete = (fileItem) => {
+    const updatedFiles = files.filter((file) => file.id !== fileItem.id);
+    setFiles(updatedFiles);
+  };
+
+  const onDropHandler = (event, acceptedFiles, rejectedFiles) => {
+    const acceptedFileDetailList = acceptedFiles.map((file, id) => (
+      {
+        file,
+        id: files.length + id,
+        fileSize: getSize(file.size),
+        networkError: false,
+      }
+    ));
+
+    const rejectedFilesDetailList = rejectedFiles.map((rejectedFile, id) => {
+      const { file, errors } = rejectedFile;
+      const errorMessageArray = errors.map((error) => error.message);
+      return {
+        file,
+        id: files.length + id,
+        fileSize: getSize(file.size),
+        status: 'error',
+        errorMessage: errorMessageArray.join(' and '),
+        networkError: false,
+      };
+    });
+    const updatedFiles = [...files, ...acceptedFileDetailList, ...rejectedFilesDetailList];
+    setFiles(updatedFiles);
+  };
+
+  const actionRenderer = (fileItem) => {
+    return (
+      <React.Fragment>
+        {fileItem.networkError && (
+          <Button
+            appearance="transparent"
+            icon="refresh"
+            size="regular"
+            className={'cursor-pointer'}
+          />
+        )}
+        <Button
+          appearance="transparent"
+          icon="close"
+          size="regular"
+          onClick={() => onDelete(fileItem)}
+          className={'cursor-pointer'}
+        />
+      </React.Fragment>
+    );
+  }
+
   return (
-    <Dropzone
-      formatLabel='Accepted formats: PDF, jpg'
-      sizeLabel='Maximum size: 25 MB'
-      disabled={false}
-      onDrop={(event, acceptedFiles, rejectedFiles) => { console.log(acceptedFiles, rejectedFiles) }}
-      sampleFileLink={(
-        <Link
-          href="http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf"
-          download="Test.pdf"
-          target="_blank"
-        >
-          Download sample file
-        </Link>
-      )}
-    />
+    <React.Fragment>
+      <Dropzone
+        accept="image/jpeg, image/png"
+        formatLabel="Accepted formats: PDF, jpg"
+        sizeLabel="Maximum size: 25 MB"
+        multiple={true}
+        onDrop={onDropHandler}
+        className="mb-5"
+        sampleFileLink={(
+          <Link
+            href="http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf"
+            download="Test.pdf"
+            target="_blank"
+          >
+            Download sample file
+          </Link>
+        )}
+      />
+      <FileList
+        fileList={files}
+        actionRenderer={actionRenderer}
+      />
+    </React.Fragment>
   );
 }`;
 

package/core/components/molecules/dropzone/__tests__/Dropzone.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
-import Dropzone, { DropzoneProps as Props, Type } from '../Dropzone';
+import Dropzone, { DropzoneProps as Props, DropZoneType } from '../Dropzone';
 import Link from '@/components/atoms/link';
 import DropzoneError from '../DropzoneError';
 import { fromEvent } from '../FileSelectorUtils';
@@ -29,7 +29,7 @@ const multipleFileData = {
 
 const minSize = 50;
 const maxSize = 300;
-const types: Type[] = ['standard', 'compressed', 'tight'];
+const types: DropZoneType[] = ['standard', 'compressed', 'tight'];
 
 describe('Dropzone component snapshot', () => {
   const mapper: Record<string, any> = {

package/core/components/molecules/dropzone/utils.tsx

@@ -48,11 +48,11 @@ export const isEvtWithFiles = (event: any) => {
   );
 };
 
-export const isKindFile = (item: any) => {
+export const isKindFile = (item: null | Record<string, unknown>) => {
   return typeof item === 'object' && item !== null && item.kind === 'file';
 };
 
-export const onDocumentDragOver = (event: any) => {
+export const onDocumentDragOver = (event: DragEvent) => {
   event.preventDefault();
 };
 
@@ -60,8 +60,10 @@ export const isIeOrEdge = (userAgent = window.navigator.userAgent) => {
   return isIe(userAgent) || isEdge(userAgent);
 };
 
-export const composeEventHandlers = (...fns: any[]) => {
-  return (event: any, ...args: any[]) =>
+type functype = (event: Event, ...args: unknown[]) => void;
+
+export const composeEventHandlers = (...fns: functype[]) => {
+  return (event: Event, ...args: unknown[]) =>
     fns.some((fn) => {
       if (!isPropagationStopped(event) && fn) {
         fn(event, ...args);

package/core/components/molecules/editableChipInput/__tests__/__snapshots__/EditableChipInput.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`EditableChipInput component
               Chip1
             </span>
             <i
-              class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
+              class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
               data-test="DesignSystem-GenericChip--clearButton"
               role="button"
               style="font-size: 16px; width: 16px;"
@@ -50,7 +50,7 @@ exports[`EditableChipInput component
               Chip2
             </span>
             <i
-              class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
+              class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
               data-test="DesignSystem-GenericChip--clearButton"
               role="button"
               style="font-size: 16px; width: 16px;"
@@ -96,7 +96,7 @@ exports[`EditableChipInput component
               Chip1
             </span>
             <i
-              class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
+              class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
               data-test="DesignSystem-GenericChip--clearButton"
               role="button"
               style="font-size: 16px; width: 16px;"
@@ -116,7 +116,7 @@ exports[`EditableChipInput component
               Chip2
             </span>
             <i
-              class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
+              class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
               data-test="DesignSystem-GenericChip--clearButton"
               role="button"
               style="font-size: 16px; width: 16px;"

package/core/components/molecules/emptyState/EmptyState.tsx

@@ -4,7 +4,7 @@ import { HeadingProps, TextProps } from '@/index.type';
 import { Heading, Text } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
-type Size = 'large' | 'small';
+type EmptyStateSize = 'large' | 'small';
 
 export interface EmptyStateProps extends BaseProps {
   /**
@@ -24,7 +24,7 @@ export interface EmptyStateProps extends BaseProps {
    *
    * Size: 'large' | 'small'
    */
-  size: Size;
+  size: EmptyStateSize;
   /**
    * Button / ButtonGroups to be added inside `EmptyState`
    */
@@ -40,12 +40,12 @@ export const imageHeight = {
   small: '128px',
 };
 
-export const HeadingSize: Record<Size, HeadingProps['size']> = {
+export const HeadingSize: Record<EmptyStateSize, HeadingProps['size']> = {
   large: 'l',
   small: 'm',
 };
 
-export const textSize: Record<Size, TextProps['size']> = {
+export const textSize: Record<EmptyStateSize, TextProps['size']> = {
   large: 'large',
   small: 'regular',
 };