@groupeactual/ui-kit 1.7.1 → 1.7.2

package/dist/es/src/components/UploadDocument/FileUploader.d.ts

@@ -11,6 +11,8 @@ interface Props {
     accept?: string[];
     acceptText?: AcceptTextType;
     orText?: string;
+    fromLocalText?: string;
+    fromGoogleDriveText?: string;
     disabled?: boolean;
     error?: string;
     enableGoogleDrive?: boolean;
@@ -19,7 +21,7 @@ interface Props {
     _isDroppingFile?: boolean;
     validateFile?: (_size: number, _type: string, _accept: string[], _setUploadFileError: React.Dispatch<React.SetStateAction<boolean | string>>) => boolean;
     onTouched?: () => void;
-    onFilesDataChange?: (_fileData: FileDataType[] | undefined, _filesInput?: File[]) => void;
+    onFilesDataChange?: (_fileData: FileDataType[] | undefined) => void;
 }
-declare const FileUploader: ({ title, subTitle, titleAddButton, helperText, titleTooltip, files, isMulti, accept, acceptText, orText, disabled, error, enableGoogleDrive, googleAuthClientId, googleApiKey, _isDroppingFile, validateFile, onTouched, onFilesDataChange, }: Props) => React.JSX.Element;
+declare const FileUploader: ({ title, subTitle, titleAddButton, helperText, titleTooltip, files, isMulti, accept, acceptText, orText, fromLocalText, fromGoogleDriveText, disabled, error, enableGoogleDrive, googleAuthClientId, googleApiKey, _isDroppingFile, validateFile, onTouched, onFilesDataChange, }: Props) => React.JSX.Element;
 export default FileUploader;

package/dist/es/src/components/UploadDocument/fileuploader.interface.d.ts

@@ -8,6 +8,7 @@ export interface FileDataType {
     size: number;
     type: string;
     url: string;
+    file?: File;
     driveFileId?: string;
     driveAccessToken?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,7 @@
     "@types/google.picker": "^0.0.46",
     "@types/styled-components": "^5.1.34",
     "framer-motion": "^11.12.0",
-    "eslint": "^9.15.0",
+    "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.9.0",
@@ -33,13 +33,13 @@
     "@mui/x-date-pickers": "7.15.0",
     "@mui/x-date-pickers-pro": "7.15.0",
     "styled-components": "^6.1.13",
-    "@groupeactual/design-tokens": "1.7.1"
+    "@groupeactual/design-tokens": "1.7.2"
   },
   "scripts": {
     "build": "rollup -c",
     "build:watch": "rollup --bundleConfigAsCjs -c -w",
     "dev": "npm run build:watch",
-    "eslint": "eslint --config \"eslint.config.js\" --color \".\"",
+    "eslint": "eslint --config \"eslint.config.js\" --color \".\" --max-warnings=0",
     "lint": "npm run eslint"
   }
 }

package/src/components/Datatable/use-pagination-props.hook.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
 import { PaginationProps, PaginationTrans, Props } from './datatable.interface';
 
 const usePaginationProps = <T extends object>(

package/src/components/UploadDocument/FileUploader.tsx

@@ -22,7 +22,6 @@ import {
 } from '@fortawesome/pro-solid-svg-icons';
 import { Box, IconButton } from '@mui/material';
 import Menu from '@mui/material/Menu';
-import { set } from 'lodash';
 
 import Button from '@/components/Button';
 import IconProvider from '@/components/IconProvider';
@@ -48,6 +47,8 @@ interface Props {
   accept?: string[];
   acceptText?: AcceptTextType;
   orText?: string;
+  fromLocalText?: string;
+  fromGoogleDriveText?: string;
   disabled?: boolean;
   error?: string;
   enableGoogleDrive?: boolean;
@@ -61,10 +62,7 @@ interface Props {
     _setUploadFileError: React.Dispatch<React.SetStateAction<boolean | string>>,
   ) => boolean;
   onTouched?: () => void;
-  onFilesDataChange?: (
-    _fileData: FileDataType[] | undefined,
-    _filesInput?: File[],
-  ) => void;
+  onFilesDataChange?: (_fileData: FileDataType[] | undefined) => void;
 }
 
 const FileUploader = ({
@@ -78,6 +76,8 @@ const FileUploader = ({
   accept = [],
   acceptText = { fileFormat: '', maxSize: '', subText: '' },
   orText = 'ou',
+  fromLocalText = 'Depuis votre PC',
+  fromGoogleDriveText = 'Depuis Google Drive',
   disabled = false,
   error,
   enableGoogleDrive = false,
@@ -94,8 +94,6 @@ const FileUploader = ({
 
   // * States
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  // * currentFiles is used only to revoke the object URL when the component is unmounted for performance reasons
-  const [currentFiles, setCurrentFiles] = useState<File[]>([]);
   // * filesData is used to display the files in the component
   const [filesData, setFilesData] = useState<FileDataType[] | undefined>([]);
   const [isDroppingFile, setIsDroppingFile] =
@@ -192,12 +190,34 @@ const FileUploader = ({
       handleClose();
       onTouched?.();
 
-      // * Local Files
-      if (
+      if (token && data && data.docs && data.docs.length > 0) {
+        // * Google Drive
+        const validDocs = data.docs.filter((doc) =>
+          validateFile
+            ? validateFile(
+                doc.sizeBytes,
+                doc.mimeType,
+                accept,
+                setUploadFileError,
+              )
+            : true,
+        );
+
+        const googleFileData = validDocs.map((doc) => ({
+          name: doc.name,
+          size: Math.round(doc.sizeBytes / 1024), // * Convert size to KB
+          type: doc.mimeType,
+          url: `https://drive.google.com/file/d/${doc.id}/view?usp=drive_we`,
+          driveFileId: doc.id,
+          driveAccessToken: token,
+        }));
+
+        setFilesData([...(filesData || []), ...googleFileData]);
+      } else if (
         fileInputRef.current?.files &&
         fileInputRef.current?.files?.length > 0
       ) {
-        const validInputFiles: File[] = [];
+        // * Local Files
         const fileList = Array.from(fileInputRef.current?.files);
 
         const newFileData: FileDataType[] = fileList
@@ -210,54 +230,27 @@ const FileUploader = ({
               return null;
             }
 
-            validInputFiles.push(file);
-
             return {
               name: file?.name ?? '',
               size: Math.round(file.size / 1024),
               type: file.type,
               url: URL.createObjectURL(file),
+              file: file,
             };
           })
-          .filter((file): file is FileDataType => file !== null);
+          .filter((file) => file !== null);
 
         if (newFileData && newFileData?.length > 0) {
-          setCurrentFiles([...(currentFiles || []), ...validInputFiles]);
           setFilesData([...(filesData || []), ...newFileData]);
         }
-      } else if (token && data && data.docs && data.docs.length > 0) {
-        // * Google Drive
-        const validDocs = data.docs.filter((doc) =>
-          validateFile
-            ? validateFile(
-                doc.sizeBytes,
-                doc.mimeType,
-                accept,
-                setUploadFileError,
-              )
-            : true,
-        );
-
-        const googleFileData = validDocs.map((doc) => ({
-          name: doc.name,
-          size: Math.round(doc.sizeBytes / 1024), // * Convert size to KB
-          type: doc.mimeType,
-          url: `https://drive.google.com/file/d/${doc.id}/view?usp=drive_we`,
-          driveFileId: doc.id,
-          driveAccessToken: token,
-        }));
-
-        setFilesData([...(filesData || []), ...googleFileData]);
       }
 
       setIsDroppingFile(false);
     },
     [
       fileInputRef,
-      currentFiles,
       filesData,
       setIsDroppingFile,
-      setCurrentFiles,
       setFilesData,
       validateFile,
       onTouched,
@@ -268,8 +261,8 @@ const FileUploader = ({
   const handleDelete = useCallback(
     (fileIndex: number) => {
       //* Remove the file from the currentFiles array
-      if (currentFiles && currentFiles.length > 0) {
-        const fileToDelete = currentFiles[fileIndex];
+      if (filesData && filesData.length > 0) {
+        const fileToDelete = filesData[fileIndex]?.file;
         if (fileToDelete) {
           // * Revoke the object URL to free up memory, use try and catch to avoid errors on the other files not imported with the file input
           try {
@@ -279,14 +272,6 @@ const FileUploader = ({
             // * Do nothing
           }
         }
-
-        if (currentFiles.length === 1) {
-          setCurrentFiles([]);
-        } else {
-          setCurrentFiles(
-            currentFiles.filter((_, index) => index !== fileIndex),
-          );
-        }
       }
 
       //* Remove the file from the filesData array
@@ -302,7 +287,7 @@ const FileUploader = ({
 
       setIsDroppingFile(false);
     },
-    [currentFiles, filesData, setIsDroppingFile, setCurrentFiles, setFilesData],
+    [filesData, setIsDroppingFile, setFilesData],
   );
 
   // * Utils
@@ -318,54 +303,54 @@ const FileUploader = ({
   // * Initialize the component with the files passed as props
   useEffect(() => {
     if (!isInitialized && files.length > 0) {
-      const FilesDataDto: FileDataType[] = files.map((file) => ({
-        name: file.name,
-        size: Math.round(file.size / 1024), // Convert size to KB
-        type: file.type,
-        url: file.url,
-      }));
-
       const initializeFiles = async () => {
         const initialFiles = await Promise.all(
-          FilesDataDto.map(async (fileData) => {
-            const response = await fetch(fileData.url);
+          files.map(async (file) => {
+            const response = await fetch(file.url);
             const blob = await response.blob();
 
-            return new File([blob], fileData.name, {
-              type: fileData.type,
-            });
+            return {
+              name: file.name,
+              size: Math.round(file.size / 1024), // Convert size to KB
+              type: file.type,
+              url: file.url,
+              file: new File([blob], file.name, {
+                type: file.type,
+              }),
+            };
           }),
         );
 
-        setCurrentFiles(initialFiles); // Now files is a File[] array
+        setFilesData(initialFiles);
       };
 
       initializeFiles();
-      setFilesData(FilesDataDto);
       setIsInitialized(true);
     }
   }, [files]);
 
   useEffect(() => {
     // * Notify parent component
-    onFilesDataChange?.(filesData, currentFiles);
-  }, [filesData, currentFiles]);
+    onFilesDataChange?.(filesData);
+  }, [filesData]);
 
   useEffect(() => {
     return () => {
-      if (!currentFiles?.length) return;
+      if (!filesData?.length) return;
 
       try {
         // * Only for file imported with the file input, use try and catch to avoid errors on the other files
-        currentFiles.forEach((file) => {
-          const fileURL = URL.createObjectURL(file);
-          URL.revokeObjectURL(fileURL);
+        filesData.forEach((_fileData) => {
+          if (_fileData?.file) {
+            const fileURL = URL.createObjectURL(_fileData?.file);
+            URL.revokeObjectURL(fileURL);
+          }
         });
       } catch {
         // * Do nothing
       }
     };
-  }, [currentFiles]);
+  }, [filesData]);
 
   return (
     <Box
@@ -517,9 +502,9 @@ const FileUploader = ({
                   testId="pc-add"
                   onClick={() => handleFileChange(null, null, null, [], true)}
                 >
-                  <Box gap={1} display="flex">
+                  <Box gap={1} display="inline-flex" alignItems="center">
                     <IconProvider size="sm" icon={faFolderOpen} />
-                    <Text variant="body2">Depuis votre PC</Text>
+                    <Text variant="body2">{fromLocalText}</Text>
                   </Box>
                 </MenuItem>
                 <GooglePickerWrapper
@@ -534,9 +519,9 @@ const FileUploader = ({
                   viewId="FOLDERS"
                 >
                   <MenuItem testId="drive-add" onClick={handleClose}>
-                    <Box gap={1} display="flex">
+                    <Box gap={1} display="inline-flex" alignItems="center">
                       <IconProvider size="sm" icon={faGoogleDrive} />
-                      <Text variant="body2">Depuis Google Drive</Text>
+                      <Text variant="body2">{fromGoogleDriveText}</Text>
                     </Box>
                   </MenuItem>
                 </GooglePickerWrapper>

package/src/components/UploadDocument/fileuploader.interface.ts

@@ -9,6 +9,7 @@ export interface FileDataType {
   size: number;
   type: string;
   url: string;
+  file?: File;
   driveFileId?: string;
   driveAccessToken?: string;
 }