@innovaccer/design-system 2.5.0 → 2.7.0-0

package/core/components/molecules/fileList/FileListItem.tsx

@@ -3,8 +3,7 @@ import classNames from 'classnames';
 import { Text, Caption } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import FileIcon from './FileIcon';
-
-export type FileStatus = 'uploading' | 'completed' | 'error';
+import { FileStatus } from '@/common.type';
 
 export interface FileObject extends BaseProps, Record<string, any> {
   /**
@@ -80,6 +79,8 @@ export const FileListItem = (props: FileListItemProps) => {
   };
 
   return (
+    // TODO(a11y)
+    //  eslint-disable-next-line
     <div {...baseProps} className={FileItemClass} onClick={onClickHandler} data-test="DesignSystem-FileListItem">
       <div className="FileItem-file">
         <div className="FileItem-fileContent">

package/core/components/molecules/fileUploader/FileUploaderItem.tsx

@@ -3,8 +3,7 @@ import classNames from 'classnames';
 import { Text, Caption, Button } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import FileUploaderStatus from './FileUploaderStatus';
-
-export type FileStatus = 'uploading' | 'completed' | 'error';
+import { FileStatus } from '@/common.type';
 
 export interface FileItem {
   /**
@@ -54,6 +53,8 @@ export const FileUploaderItem = (props: FileUploaderItemProps) => {
   );
 
   return (
+    // TODO(a11y)
+    //  eslint-disable-next-line
     <div
       {...baseProps}
       data-test="DesignSystem-FileUploader--Item"

package/core/components/molecules/fileUploader/FileUploaderStatus.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ProgressRing, Button } from '@/index';
-import { FileStatus } from './FileUploaderItem';
+import { FileStatus } from '@/common.type';
 
 export interface FileUploaderStatusProps {
   file: File;

package/core/components/molecules/fileUploader/__stories__/_common_/types.tsx

@@ -1,4 +1,7 @@
 import { FileUploaderProps, FileUploaderListProps } from '@/index.type';
 
+// TODO(eslint): Fix this
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const FileUploaderComponent = (_props: FileUploaderProps) => {};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const FileUploaderListComponent = (_props: FileUploaderListProps) => {};

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

@@ -1,233 +1,14 @@
 import * as React from 'react';
-import { text, boolean } from '@storybook/addon-knobs';
-import { FileUploader, FileUploaderList, Link } from '@/index';
-import { FileUploaderComponent, FileUploaderListComponent } from './_common_/types';
-import { FileItem } from '../FileUploaderItem';
 
-export const all = () => {
-  const [fileNames, setFileNames] = React.useState<FileItem[]>([]);
-  const [errorOccured, setErrorOccured] = React.useState(false);
-
-  const title = text('title', 'Upload files');
-  const formatLabel = text('formatLabel', 'Accepted formats: pdf, jpg, jpeg, png');
-  const sizeLabel = text('sizeLabel', 'Maximum size: 25 MB');
-  const multiple = boolean('multiple', true);
-
-  const randomBetween = (value: number) => Math.round(Math.random() * value);
-
-  const imitateUploading = (fileItem: FileItem) => {
-    const randomProgressChunks = [5, 8, 13];
-    const randomChunkIndex = randomBetween(randomProgressChunks.length - 1);
-    const progressChunk = randomProgressChunks[randomChunkIndex];
-    let baseProgress = fileItem.progress || 0;
-
-    const increment = () => {
-      baseProgress += progressChunk;
-      setProgressFileName(fileItem, baseProgress);
-
-      if (baseProgress < 100) {
-        setTimeout(() => increment(), 100);
-      }
-    };
-
-    increment();
-  };
-
-  const setProgressFileName = (fileName: FileItem, progress = 0) => {
-    setFileNames((previousFileNames) => {
-      const fileNameIndex = previousFileNames.findIndex((fn) => fn.file === fileName.file);
-
-      if (fileNameIndex === -1) {
-        return [...previousFileNames, fileName];
-      }
-
-      return previousFileNames.map((previousFileName, index) => {
-        if (fileNameIndex !== index) return previousFileName;
-
-        return {
-          ...previousFileName,
-          progress,
-          status: progress >= 100 ? 'completed' : 'uploading',
-        };
-      });
-    });
-  };
-
-  const uploadFiles = (fileList: File[]) => {
-    if (!errorOccured && (fileList.length > 1 || fileNames.length > 0)) {
-      const randomErrorIndex = randomBetween(fileList.length - 1);
-      setFileNames((previousFileNames) => [
-        ...previousFileNames,
-        { file: fileList[randomErrorIndex], status: 'error' },
-      ]);
-      setErrorOccured(true);
-
-      if (fileList.length <= 1) {
-        return;
-      }
-
-      fileList.splice(randomErrorIndex, 1);
-    }
-
-    fileList.forEach((file) => {
-      const fileItem: FileItem = {
-        file,
-        status: 'uploading',
-        progress: 0,
-      };
-
-      imitateUploading(fileItem);
-    });
-  };
-
-  const retryUploadFile = (file: File) => {
-    uploadFiles([file]);
-  };
-
-  const deleteUploadedFile = (file: File) => {
-    setFileNames((previousFileNames) => previousFileNames.filter((fileName) => fileName.file !== file));
-  };
-
-  return (
-    <div>
-      <FileUploader
-        onChange={uploadFiles}
-        multiple={multiple}
-        title={title}
-        formatLabel={formatLabel}
-        sizeLabel={sizeLabel}
-        accept={['image/png', 'application/pdf', 'image/jpeg']}
-        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>
-        }
-      />
-      <FileUploaderList onDelete={deleteUploadedFile} onRetry={retryUploadFile} fileList={fileNames} className="mt-4" />
-    </div>
-  );
-};
-
-const customCode = `() => {
-  const [fileNames, setFileNames] = React.useState([]);
-  const [errorOccured, setErrorOccured] = React.useState(false);
-
-  const randomBetween = (value) => Math.round(Math.random() * value);
-
-  const imitateUploading = (fileItem) => {
-    const randomProgressChunks = [5, 8, 13];
-    const randomChunkIndex = randomBetween(randomProgressChunks.length - 1);
-    const progressChunk = randomProgressChunks[randomChunkIndex];
-    let baseProgress = fileItem.progress || 0;
-
-    const increment = () => {
-      baseProgress += progressChunk;
-      setProgressFileName(fileItem, baseProgress);
-
-      if (baseProgress < 100) {
-        setTimeout(() => increment(), 100);
-      }
-    };
-
-    increment();
-  };
-
-  const setProgressFileName = (fileName, progress = 0) => {
-    setFileNames((previousFileNames) => {
-      const fileNameIndex = previousFileNames.findIndex((fn) => fn.file === fileName.file);
-
-      if (fileNameIndex === -1) {
-        return [...previousFileNames, fileName];
-      }
-
-      return previousFileNames.map((previousFileName, index) => {
-        if (fileNameIndex !== index) return previousFileName;
-
-        return {
-          ...previousFileName,
-          status: progress >= 100 ? 'completed' : 'uploading',
-          progress,
-        };
-      });
-    });
-  };
-
-  const uploadFiles = (fileList) => {
-    if ((!errorOccured && (fileList.length > 1 || fileNames.length > 0))) {
-      const randomErrorIndex = randomBetween(fileList.length - 1);
-      setFileNames((previousFileNames) => [
-        ...previousFileNames,
-        { file: fileList[randomErrorIndex], status: 'error' },
-      ]);
-      setErrorOccured(true);
-
-      if (fileList.length <= 1) {
-        return;
-      }
-
-      fileList.splice(randomErrorIndex, 1);
-    }
-
-    fileList.forEach((file) => {
-      const fileItem = {
-        file,
-        status: 'uploading',
-        progress: 0,
-      };
-
-      imitateUploading(fileItem);
-    });
-  };
-
-  const retryUploadFile = (file) => {
-    uploadFiles([file]);
-  };
-
-  const deleteUploadedFile = (file) => {
-    setFileNames((previousFileNames) => previousFileNames.filter(fileName => fileName.file !== file));
-  };
-
-  return (
-    <div>
-      <FileUploader
-        onChange={uploadFiles}
-        multiple
-        title="Upload files"
-        accept={['image/png', 'application/pdf', 'image/jpeg']}
-        formatLabel="Accepted formats: pdf, jpg, jpeg, png"
-        sizeLabel="Maximum size: 25 MB"
-        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>
-        }
-      />
-      <FileUploaderList onDelete={deleteUploadedFile} onRetry={retryUploadFile} fileList={fileNames} className="mt-4" />
-    </div>
-  );
-}`;
+export const all = () => <></>;
 
 export default {
   title: 'Components/FileUploader/All',
-  component: FileUploader,
   parameters: {
     docs: {
       docPage: {
-        customCode,
-        props: {
-          components: {
-            FileUploader: FileUploaderComponent,
-            FileUploaderList: FileUploaderListComponent,
-          },
-        },
+        title: 'FileUploader',
+        description: 'FileUploader Component has been Deprecated, please use Dropzone Component instead.',
       },
     },
   },

package/core/components/molecules/fullscreenModal/FullscreenModal.tsx

@@ -2,24 +2,22 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import { OverlayFooter, OverlayFooterProps } from '@/components/molecules/overlayFooter';
+import { OverlayFooter } from '@/components/molecules/overlayFooter';
 import { OverlayHeader, OverlayHeaderProps } from '@/components/molecules/overlayHeader';
 import { OverlayBody } from '@/components/molecules/overlayBody';
 import { Row, Column, Button } from '@/index';
 import { ColumnProps } from '@/index.type';
 import { getWrapperElement, getUpdatedZIndex, closeOnEscapeKeypress } from '@/utils/overlayHelper';
 import OverlayManager from '@/utils/OverlayManager';
+import { FooterOptions } from '@/common.type';
 
-export type Dimension = 'medium' | 'large';
-type FooterOptions = {
-  actions: OverlayFooterProps['actions'];
-};
+export type FullScreenDimension = 'medium' | 'large';
 
 export interface FullscreenModalProps extends BaseProps {
   /**
    * Dimension of `Fullscreen Modal`
    */
-  dimension: Dimension;
+  dimension: FullScreenDimension;
 
   /**
    * Handles open/close state
@@ -121,7 +119,7 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
     };
   }
 
-  onOutsideClickHandler = (event: KeyboardEvent) => {
+  onOutsideClickHandler = (event: Event) => {
     OverlayManager.remove(this.modalRef.current);
 
     if (this.props.onClose) {