From 25836b3695c5984a9414f36c94bb52cceb91b7b1 Mon Sep 17 00:00:00 2001
From: vapersmile <valentin.perello@smile.fr>
Date: Tue, 10 Oct 2023 18:06:46 +0200
Subject: [PATCH] feat (redmine 1246935): add files cards and fix errors

---
 .../Components/Dropzone/Dropzone.stories.tsx  | 43 +++++++++++++------
 .../src/Components/Dropzone/Dropzone.tsx      | 19 ++++----
 2 files changed, 40 insertions(+), 22 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
index 3b630505..6154d0e2 100644
--- a/packages/react-front-kit/src/Components/Dropzone/Dropzone.stories.tsx
+++ b/packages/react-front-kit/src/Components/Dropzone/Dropzone.stories.tsx
@@ -1,20 +1,10 @@
 import type { FileWithPath } from '@mantine/dropzone';
 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 = {
   component: Cmp,
-  decorators: [
-    function Component(Story, ctx) {
-      const args = useStorybookArgsConnect(ctx.args, {
-        onDrop: 'files',
-      });
-      return <Story args={{ ...args }} />;
-    },
-  ],
   tags: ['autodocs'],
   title: '3-custom/Components/Dropzone',
 } satisfies Meta<typeof Cmp>;
@@ -26,12 +16,37 @@ export const Dropzone: IStory = {
   args: {
     children: undefined,
     files: [
-      { name: 'Test 1 demi', size: 2400000 },
-      { name: 'Test 1 demi', size: 2400000 },
-      { name: 'Test 1 demi', size: 2400000 },
-      { name: 'Test 1 demi', size: 2400000 },
+      {
+        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',
+      },
     ],
     onDrop: (files: FileWithPath[]): void => {
+      // eslint-disable-next-line no-console
       console.log(files);
     },
   },
diff --git a/packages/react-front-kit/src/Components/Dropzone/Dropzone.tsx b/packages/react-front-kit/src/Components/Dropzone/Dropzone.tsx
index 7977222c..0ee8f47d 100644
--- a/packages/react-front-kit/src/Components/Dropzone/Dropzone.tsx
+++ b/packages/react-front-kit/src/Components/Dropzone/Dropzone.tsx
@@ -1,9 +1,6 @@
 'use client';
 
-import type {
-  FileWithPath,
-  DropzoneProps as IMantineDropzoneProps,
-} from '@mantine/dropzone';
+import type { DropzoneProps as IMantineDropzoneProps } from '@mantine/dropzone';
 import type { ReactElement } from 'react';
 
 import { ActionIcon, Tooltip } from '@mantine/core';
@@ -14,7 +11,13 @@ import { Eye, Plus } from '@phosphor-icons/react';
 export interface IDropzoneProps
   extends Omit<IMantineDropzoneProps, 'children'> {
   children?: ReactElement;
-  files?: FileWithPath[];
+  files?: {
+    lastModified: number;
+    name: string;
+    path: string;
+    size: number;
+    type: string;
+  }[];
 }
 
 const useStyles = createStyles((theme) => ({
@@ -35,7 +38,7 @@ const useStyles = createStyles((theme) => ({
     height: '70px',
     margin: '10px',
     padding: '10px',
-    width: '75px',
+    width: '170px',
   },
   cardFileText: {
     '&:first-of-type': {
@@ -111,8 +114,8 @@ export function Dropzone(props: IDropzoneProps): ReactElement {
           >
             <div className={classes.cardFile}>
               <span className={classes.cardFileText}>
-                {file.name.length > 7
-                  ? `${file.name.slice(0, 7)}...`
+                {file.name.length > 15
+                  ? `${file.name.slice(0, 15)}...`
                   : file.name}
               </span>
               <span className={classes.cardFileText}>