feat(UploadFile): component bare structure WIP

packages/react-components/package.json

@@ -83,6 +83,7 @@
     "lodash.escape": "^4.0.1",
     "polished": "^4.1.3",
     "react-day-picker": "^7.4.10",
+    "react-dropzone": "^14.3.5",
     "react-transition-group": "^4.4.2",
     "react-virtuoso": "^4.7.11"
   }

packages/react-components/src/components/UploadFile/UploadFile.module.scss

@@ -0,0 +1,69 @@
+$base-class: 'upload-file';
+
+.#{$base-class} {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+
+  &__dropzone {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: border-color var(--transition-duration-moderate-1);
+    border: 2px dashed var(--border-basic-primary);
+    border-radius: var(--radius-3);
+    background-color: var(--surface-primary-default);
+    cursor: pointer;
+    padding: var(--spacing-5);
+    width: 100%;
+
+    &:hover {
+      border-color: var(--surface-accent-emphasis-high-positive);
+    }
+  }
+
+  &__previews {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-4);
+    align-items: center;
+    justify-content: center;
+    margin-top: var(--spacing-4);
+    width: 100%;
+
+    &__item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--border-basic-primary);
+      border-radius: var(--radius-3);
+      width: 100px;
+      height: 100px;
+      overflow: hidden;
+
+      &__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      &__icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        &__name {
+          margin-top: var(--spacing-2);
+          text-align: center;
+          word-break: break-all;
+        }
+      }
+    }
+  }
+
+  &__progress {
+    margin-top: var(--spacing-4);
+    width: 100%;
+  }
+}

packages/react-components/src/components/UploadFile/UploadFile.stories.tsx

@@ -0,0 +1,69 @@
+import { ReactElement } from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
+
+import { IUploadFileProps } from './types';
+import { UploadFile } from './UploadFile';
+
+export default {
+  title: 'Components/UploadFile',
+  component: UploadFile,
+  argTypes: {
+    onUpload: { action: 'Files Uploaded' },
+    maxFiles: {
+      control: {
+        type: 'number',
+      },
+    },
+    accept: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+} as Meta<typeof UploadFile>;
+
+const StoryTemplate: StoryFn<IUploadFileProps> = (
+  args: IUploadFileProps
+): ReactElement => <UploadFile {...args} />;
+
+export const Default = StoryTemplate.bind({});
+Default.args = {
+  maxFiles: 5,
+  accept: 'image/*,application/pdf,.doc,.docx',
+  onUpload: action('Files Uploaded'),
+};
+
+export const FileTypes = (): ReactElement => (
+  <>
+    <StoryDescriptor title="Images only">
+      <UploadFile
+        maxFiles={5}
+        accept="image/*"
+        onUpload={action('Images Uploaded')}
+      />
+    </StoryDescriptor>
+    <StoryDescriptor title="Documents only">
+      <UploadFile
+        maxFiles={5}
+        accept="application/pdf,.doc,.docx"
+        onUpload={action('Documents Uploaded')}
+      />
+    </StoryDescriptor>
+  </>
+);
+
+export const FileLimits = (): ReactElement => (
+  <>
+    <StoryDescriptor title="Limited files">
+      <UploadFile
+        maxFiles={2}
+        accept="image/*"
+        onUpload={action('Files Uploaded')}
+      />
+    </StoryDescriptor>
+  </>
+);

packages/react-components/src/components/UploadFile/UploadFile.tsx

@@ -0,0 +1,104 @@
+import { FC, useCallback, useState } from 'react';
+
+import { FiletypeOther } from '@livechat/design-system-icons';
+import cx from 'clsx';
+import { useDropzone } from 'react-dropzone';
+
+import { FileUploadProgress } from '../FileUploadProgress';
+import { Icon } from '../Icon';
+import { Text } from '../Typography';
+
+import { IUploadFileProps } from './types';
+
+import styles from './UploadFile.module.scss';
+
+interface PreviewFile {
+  file: File;
+  preview: string;
+}
+
+export const UploadFile: FC<IUploadFileProps> = ({
+  onUpload,
+  maxFiles = 5,
+  className,
+  multiple = true,
+}) => {
+  const [files, setFiles] = useState<PreviewFile[]>([]);
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      const mappedFiles = acceptedFiles.map((file) => ({
+        file,
+        preview: URL.createObjectURL(file),
+      }));
+
+      setFiles((current) => [...current, ...mappedFiles].slice(0, maxFiles));
+      onUpload(acceptedFiles);
+    },
+    [onUpload, maxFiles]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    multiple,
+    maxFiles,
+  });
+
+  const renderPreview = (file: PreviewFile, index: number) => {
+    const isImage = file.file.type.startsWith('image/');
+
+    return (
+      <div key={index} className={styles['upload-file__previews__item']}>
+        {isImage ? (
+          <img
+            src={file.preview}
+            alt={file.file.name}
+            className={styles['upload-file__previews__item__image']}
+          />
+        ) : (
+          <div className={styles['upload-file__previews__item__icon']}>
+            <Icon source={FiletypeOther} />
+            <Text
+              size="sm"
+              className={styles['upload-file__previews__item__icon__name']}
+            >
+              {file.file.name}
+            </Text>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className={cx(styles['upload-file'], className)}>
+      <div {...getRootProps()} className={styles['upload-file__dropzone']}>
+        <input {...getInputProps()} />
+        {isDragActive ? (
+          <Text size="md" as="div">
+            Drop the files here ...
+          </Text>
+        ) : (
+          <Text size="md" as="div">
+            Drag & drop some files here, or click to select files
+          </Text>
+        )}
+      </div>
+      <div className={styles['upload-file__previews']}>
+        {files.map((file, index) => renderPreview(file, index))}
+      </div>
+      {files.length > 0 && (
+        <div className={styles['upload-file__progress']}>
+          {files.map((file, index) => (
+            <FileUploadProgress
+              key={index}
+              title={file.file.name}
+              progressValue={100}
+              status="success"
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

packages/react-components/src/components/UploadFile/index.ts

@@ -0,0 +1,2 @@
+export { UploadFile } from './UploadFile';
+export type { IUploadFileProps } from './types';

packages/react-components/src/components/UploadFile/types.ts

@@ -0,0 +1,26 @@
+export interface IUploadFileProps {
+  /**
+   * Callback when files are uploaded
+   */
+  onUpload: (files: File[]) => void;
+
+  /**
+   * Maximum number of files that can be uploaded
+   */
+  maxFiles?: number;
+
+  /**
+   * Accepted file types
+   */
+  accept?: string;
+
+  /**
+   * Styles for the dropzone
+   */
+  className?: string;
+
+  /**
+   * Whether multiple files can be uploaded
+   */
+  multiple?: boolean;
+}

packages/react-components/src/index.ts

@@ -55,4 +55,5 @@ export * from './components/Textarea';
 export * from './components/UpdateBadge';
 export * from './components/FileUploadProgress';
 export * from './components/UploadBar';
+export * from './components/UploadFile';
 export * from './components/FloatingPortal';