chore: connect dropzone with storybook

Smile-SA · Oct 13, 2023 · 9d226fd · 9d226fd
1 parent 430413f
commit 9d226fd
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 89 deletions.
diff --git a/packages/react-front-kit/src/Components/Dropzone/Dropzone.stories.tsx b/packages/react-front-kit/src/Components/Dropzone/Dropzone.stories.tsx
@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { useStorybookArgsConnect } from '@smile/react-front-kit-shared/src/storybook-utils';
+
 import { Dropzone as Cmp } from './Dropzone';
 
 const meta = {
@@ -12,6 +14,17 @@ const meta = {
     },
   },
   component: Cmp,
+  decorators: [
+    function Component(Story, ctx) {
+      const args = useStorybookArgsConnect(ctx.args, {
+        onDrop: 'files',
+        onRemoveFile: (file) => ({
+          files: ctx.args.files?.filter((f) => f !== file),
+        }),
+      });
+      return <Story args={{ ...args }} />;
+    },
+  ],
   tags: ['autodocs'],
   title: '3-custom/Components/Dropzone',
 } satisfies Meta<typeof Cmp>;
@@ -24,35 +37,6 @@ export const Dropzone: IStory = {
     browseLabel: undefined,
     children: undefined,
     dragLabel: undefined,
-    files: [
-      {
-        lastModified: 1682342930770,
-        name: 'CERFA.postman_collection.json',
-        path: 'CERFA.postman_collection.json',
-        size: 1579,
-        type: 'application/json',
-      },
-      {
-        lastModified: 1682342930770,
-        name: 'CERFA.postman_collection.json',
-        path: 'CERFA.postman_collection.json',
-        size: 1579,
-        type: 'application/json',
-      },
-      {
-        lastModified: 1682342930770,
-        name: 'CERFA.postman_collection.json',
-        path: 'CERFA.postman_collection.json',
-        size: 1579,
-        type: 'application/json',
-      },
-      {
-        lastModified: 1682342930770,
-        name: 'CERFA.postman_collection.json',
-        path: 'CERFA.postman_collection.json',
-        size: 1579,
-        type: 'application/json',
-      },
-    ],
+    files: [],
   },
 };
diff --git a/packages/react-front-kit/src/Components/Dropzone/Dropzone.test.tsx b/packages/react-front-kit/src/Components/Dropzone/Dropzone.test.tsx
@@ -8,32 +8,20 @@ describe('Dropzone', () => {
       <Dropzone
         files={[
           {
-            lastModified: 1682342930770,
             name: 'CERFA.postman_collection.json',
-            path: 'CERFA.postman_collection.json',
             size: 1579,
-            type: 'application/json',
           },
           {
-            lastModified: 1682342930770,
             name: 'CERFA.postman_collection.json',
-            path: 'CERFA.postman_collection.json',
             size: 1579,
-            type: 'application/json',
           },
           {
-            lastModified: 1682342930770,
             name: 'CERFA.postman_collection.json',
-            path: 'CERFA.postman_collection.json',
             size: 1579,
-            type: 'application/json',
           },
           {
-            lastModified: 1682342930770,
             name: 'CERFA.postman_collection.json',
-            path: 'CERFA.postman_collection.json',
             size: 1579,
-            type: 'application/json',
           },
         ]}
         // eslint-disable-next-line no-console

diff --git a/packages/react-front-kit/src/Components/Dropzone/Dropzone.tsx b/packages/react-front-kit/src/Components/Dropzone/Dropzone.tsx
@@ -1,7 +1,10 @@
 'use client';
 
-import type { DropzoneProps as IMantineDropzoneProps } from '@mantine/dropzone';
-import type { ReactElement } from 'react';
+import type {
+  FileWithPath,
+  DropzoneProps as IMantineDropzoneProps,
+} from '@mantine/dropzone';
+import type { MouseEvent, ReactElement } from 'react';
 
 import { ActionIcon, Tooltip } from '@mantine/core';
 import { Dropzone as MantineDropzone } from '@mantine/dropzone';
@@ -11,12 +14,8 @@ import { Eye, Plus, X } from '@phosphor-icons/react';
 import { BitConverter } from '../BitConverter/BitConverter';
 import { TruncateString } from '../TruncateString/TruncateString';
 
-export interface IFile {
-  lastModified: number;
+export interface IFile extends Partial<FileWithPath> {
   name: string;
-  path: string;
-  size: number;
-  type: string;
 }
 
 export interface IDropzoneProps
@@ -26,7 +25,7 @@ export interface IDropzoneProps
   children?: ReactElement;
   dragLabel?: string;
   files?: IFile[];
-  onRemoveFile?: (item: IFile) => void;
+  onRemoveFile?: (file: IFile) => void;
 }
 
 const useStyles = createStyles((theme) => ({
@@ -104,7 +103,7 @@ export function Dropzone(props: IDropzoneProps): ReactElement {
   } = props;
   const { classes } = useStyles();
 
-  function handleFileClick(e: React.MouseEvent<HTMLDivElement>): void {
+  function handleFileClick(e: MouseEvent<HTMLDivElement>): void {
     e.preventDefault();
     e.stopPropagation();
   }
@@ -132,41 +131,46 @@ export function Dropzone(props: IDropzoneProps): ReactElement {
         {browseLabel}
       </p>
       <div className={classes.cardsFile}>
-        {files.map((file, i) => (
-          <Tooltip
-            key={`${i + i}`}
-            label={file.name}
-            position="bottom"
-            radius={6}
-            withArrow
-          >
-            <div
-              aria-hidden="true"
-              className={classes.cardFile}
-              onClick={(e) => {
-                handleFileClick(e);
-              }}
+        {files.map((file, i) => {
+          const { name, size } = file;
+          return (
+            <Tooltip
+              key={`${i + i}`}
+              label={name}
+              position="bottom"
+              radius={6}
+              withArrow
             >
-              {Boolean(onRemoveFile) && (
-                <ActionIcon
-                  className={classes.cardFileButtonClose}
-                  onClick={() => onRemoveFile?.(file)}
-                  radius="xl"
-                  size="sm"
-                  variant="filled"
-                >
-                  <X size={8} weight="bold" />
-                </ActionIcon>
-              )}
-              <span className={classes.cardFileText}>
-                <TruncateString>{file.name}</TruncateString>
-              </span>
-              <span className={classes.cardFileText}>
-                <BitConverter options={{ locale: 'fr' }} value={file.size} />
-              </span>
-            </div>
-          </Tooltip>
-        ))}
+              <div
+                aria-hidden="true"
+                className={classes.cardFile}
+                onClick={(e) => {
+                  handleFileClick(e);
+                }}
+              >
+                {Boolean(onRemoveFile) && (
+                  <ActionIcon
+                    className={classes.cardFileButtonClose}
+                    onClick={() => onRemoveFile?.(file)}
+                    radius="xl"
+                    size="sm"
+                    variant="filled"
+                  >
+                    <X size={8} weight="bold" />
+                  </ActionIcon>
+                )}
+                <span className={classes.cardFileText}>
+                  <TruncateString>{name}</TruncateString>
+                </span>
+                {size !== undefined && (
+                  <span className={classes.cardFileText}>
+                    <BitConverter options={{ locale: 'fr' }} value={size} />
+                  </span>
+                )}
+              </div>
+            </Tooltip>
+          );
+        })}
       </div>
       {children}
     </MantineDropzone>

diff --git a/packages/react-front-kit/src/Components/DropzoneCard/DropzoneCard.stories.tsx b/packages/react-front-kit/src/Components/DropzoneCard/DropzoneCard.stories.tsx
@@ -18,8 +18,7 @@ type IStory = StoryObj<typeof meta>;
 
 export const DropzoneCard: IStory = {
   args: {
-    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, no-console
-    children: <Dropzone onDrop={(file) => console.log(`accept ${file}`)} />,
+    children: <Dropzone onDrop={action('onDrop')} />,
     content: (
       <p
         style={{

diff --git a/packages/react-front-kit/src/Components/TruncateString/TruncateString.tsx b/packages/react-front-kit/src/Components/TruncateString/TruncateString.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { createStyles } from '@mantine/core';
 
 export interface ITruncateStringProps {
-  children: string;
+  children: ReactNode;
 }
 
 const useStyles = createStyles(() => ({