@groupeactual/ui-kit 1.7.1 → 1.7.3

package/dist/es/src/components/Datatable/datatable.interface.d.ts

@@ -32,6 +32,7 @@ type WithoutPaginationProps = {
 };
 export type PaginationProps = {
     withPagination: true;
+    hideTotal: false;
     setPage: (_page: number) => void;
     setLimit: (_limit: number) => void;
     trans: PaginationTrans;

package/dist/es/src/components/Pagination/Pagination.d.ts

@@ -3,11 +3,12 @@ interface Props {
     totalString: string;
     totalPerPageString: string;
     totalRows: number;
+    hideTotal?: boolean;
     limitsPerPage?: number[];
     page?: number;
     limit?: number;
     setPage?: (_page: number) => void;
     setLimit?: (_limit: number) => void;
 }
-declare const Pagination: ({ totalString, totalPerPageString, limitsPerPage, setLimit, setPage, page, totalRows, limit, }: Props) => React.JSX.Element;
+declare const Pagination: ({ totalString, totalPerPageString, hideTotal, limitsPerPage, page, totalRows, limit, setLimit, setPage, }: Props) => React.JSX.Element;
 export default Pagination;

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.3",
   "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.3"
   },
   "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/Datatable.tsx

@@ -35,7 +35,7 @@ const Datatable = <T extends object>({
   isTableLayoutFixed = false,
   ...props
 }: Props<T>) => {
-  const { trans, limits, withTopPagination, setPage, setLimit } =
+  const { trans, limits, withTopPagination, hideTotal, setPage, setLimit } =
     usePaginationProps<T>(props);
   const theme = useTheme();
 
@@ -75,6 +75,7 @@ const Datatable = <T extends object>({
       page={currentPage}
       limit={itemsPerPage}
       setPage={setPage}
+      hideTotal={hideTotal}
       setLimit={setLimit}
       limitsPerPage={limits}
       totalPerPageString={trans.totalPerPage}

package/src/components/Datatable/datatable.interface.ts

@@ -40,6 +40,7 @@ type WithoutPaginationProps = {
 
 export type PaginationProps = {
   withPagination: true;
+  hideTotal: false;
   setPage: (_page: number) => void;
   setLimit: (_limit: number) => void;
   trans: PaginationTrans;

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>(
@@ -9,6 +8,7 @@ const usePaginationProps = <T extends object>(
   let withTopPagination = false;
   let setPage: (_page: number) => void = () => {};
   let setLimit: (_limit: number) => void = () => {};
+  let hideTotal = false;
 
   if ('trans' in props && props.trans) {
     trans = props.trans;
@@ -30,10 +30,15 @@ const usePaginationProps = <T extends object>(
     setLimit = props.setLimit;
   }
 
+  if ('hideTotal' in props) {
+    hideTotal = props.hideTotal;
+  }
+
   return {
     trans,
     limits,
     withTopPagination,
+    hideTotal,
     setPage,
     setLimit,
   };

package/src/components/Pagination/Pagination.tsx

@@ -19,6 +19,7 @@ interface Props {
   totalString: string;
   totalPerPageString: string;
   totalRows: number;
+  hideTotal?: boolean;
   limitsPerPage?: number[];
   page?: number;
   limit?: number;
@@ -29,12 +30,13 @@ interface Props {
 const Pagination = ({
   totalString,
   totalPerPageString,
+  hideTotal = false,
   limitsPerPage = [5, 10, 20],
-  setLimit,
-  setPage,
   page = 1,
   totalRows,
   limit,
+  setLimit,
+  setPage,
 }: Props) => {
   const theme = useTheme();
   const StyledPagination = useMemo(
@@ -88,18 +90,22 @@ const Pagination = ({
       }}
     >
       <Box display="flex" alignItems="center">
-        <Text variant="body1Medium">
-          {totalRows} {totalString}
-        </Text>
-        <Divider
-          orientation="vertical"
-          sx={{
-            color: 'greyXLight',
-            width: '1px',
-            height: '33px',
-            marginX: '16px',
-          }}
-        />
+        {!hideTotal && (
+          <>
+            <Text variant="body1Medium">
+              {totalRows} {totalString}
+            </Text>
+            <Divider
+              orientation="vertical"
+              sx={{
+                color: 'greyXLight',
+                width: '1px',
+                height: '33px',
+                marginX: '16px',
+              }}
+            />
+          </>
+        )}
         <Select
           className="dac-select-label"
           labelId="select-label"

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] =
@@ -175,7 +173,7 @@ const FileUploader = ({
 
   // * Handle file change and file deletion
   const handleFileChange = useCallback(
-    (
+    async (
       _event: ChangeEvent<HTMLInputElement> | null,
       data?: {
         docs: GoogleDriveFile[];
@@ -192,12 +190,64 @@ 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 = await Promise.all(
+          validDocs.map(async (doc) => {
+            const baseUrl = `https://www.googleapis.com/drive/v3/files/${doc.id}`;
+            const params = new URLSearchParams({
+              alt: 'media',
+              supportsAllDrives: 'true',
+            });
+
+            const url = `${baseUrl}?${params}`;
+
+            const response = await fetch(url, {
+              method: 'GET',
+              headers: {
+                Authorization: `Bearer ${token}`,
+              },
+            });
+
+            const blob = await response.blob();
+
+            let file: File | undefined = undefined;
+
+            if (response.status === 200) {
+              file = new File([blob], doc.name, {
+                type: doc.mimeType,
+              });
+            }
+
+            return {
+              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`,
+              file: file,
+              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 +260,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 +291,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 +302,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 +317,7 @@ const FileUploader = ({
 
       setIsDroppingFile(false);
     },
-    [currentFiles, filesData, setIsDroppingFile, setCurrentFiles, setFilesData],
+    [filesData, setIsDroppingFile, setFilesData],
   );
 
   // * Utils
@@ -318,54 +333,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 +532,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 +549,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;
 }