@groupeactual/ui-kit 1.7.0-beta.0 → 1.7.0-beta.4

package/src/components/UploadDocument/FileUploaderSingle.tsx

@@ -1,4 +1,5 @@
 import React, {
+  ChangeEvent,
   useCallback,
   useEffect,
   useMemo,
@@ -14,9 +15,9 @@ import {
   faUpload,
 } from '@fortawesome/pro-regular-svg-icons';
 import {
-  IconDefinition,
   faCaretDown,
   faFileAlt,
+  faInfoCircle,
 } from '@fortawesome/pro-solid-svg-icons';
 import { Box, IconButton } from '@mui/material';
 import Menu from '@mui/material/Menu';
@@ -27,11 +28,14 @@ import MenuItem from '@/components/MenuItem';
 import Text from '@/components/Text';
 import Tooltip from '@/components/Tooltip';
 import GooglePickerWrapper from '@/helpers/GooglePickerWrapper';
-import { dataGetValue } from '@/helpers/dataGetValue';
+
+import { acceptText } from './fileuploadersingle.interface';
 
 export interface Props {
-  setFile: (file: File | null) => void;
-  enableGoogleDrive: boolean;
+  setFile: (_file: File | null) => void;
+  title?: string;
+  titleTooltip?: string;
+  enableGoogleDrive?: boolean;
   googleAuthClientId?: string;
   googleApiKey?: string;
   error?: boolean;
@@ -39,17 +43,21 @@ export interface Props {
   fileUrl?: string | null;
   fileName?: string | null;
   accept?: string[];
-  acceptText?: string;
+  acceptText?: acceptText;
   disabledInput?: boolean;
-  title?: string;
   children?: JSX.Element | null;
   titleAddButton?: string;
-  subText?: string;
-  maxSize?: string;
+  _isDroppingFile?: boolean; // * Only used for storybook
+  validateFile?: (
+    _size: number,
+    _type: string,
+    _accept: string[],
+    _setUploadFileError: React.Dispatch<React.SetStateAction<boolean | string>>,
+  ) => boolean;
   removeExistingFile?: () => void;
   onTouched?: () => void;
   onFileDataChange?: (
-    fileData: {
+    _fileData: {
       name: string;
       size: number;
       type?: string;
@@ -59,6 +67,52 @@ export interface Props {
   ) => void;
 }
 
+/**
+ * A single file uploader component that supports file selection from local storage or Google Drive.
+ *
+ * @param {string[]} accept - Array of accepted file types, will display acceptText message
+ * but not verify size or type of your file.
+ *
+ * Example:
+ * ```js
+ *    accept={[
+      'application/pdf',
+      'image/png',
+      'image/jpeg',
+      'image/jpg',
+    ]}
+ * ```
+ * @param {Object} acceptText - Object containing text for accepted file format, max size, and additional subtext.
+ *
+ * Example:
+ * ```js
+ *    acceptText={{
+      maxSize: '10 Mo',
+      subText: 'Sélectionnez un fichier',
+    }}
+ * ```
+ *
+ * @param {Function} validateFile - Function to validate the file size and type.
+ *
+ * Example:
+ * ```js
+ * validateFile={(size, type, accept, setUploadFileError) => {
+ *   if (size > 10 * 1024 * 1024) {
+*      setUploadFileError('Le fichier doit être inférieur à 10 Mo');
+ *     return true;
+ *   }
+ *   if (!accept.includes(type)) {
+ *     setUploadFileError('Le fichier doit être au format PDF, PNG, JPEG ou JPG');
+ *     return true;
+ *   }
+ *   return false;
+ * }}
+ * ```
+ *
+ * @param {Function} onFileDataChange - Callback function to handle file data changes and give you all informations you need
+ * to handle google drive file.
+ */
+
 const FileUploaderSingle = ({
   enableGoogleDrive = false,
   googleAuthClientId,
@@ -66,21 +120,25 @@ const FileUploaderSingle = ({
   error = false,
   helperText = '',
   accept = [],
-  acceptText = '',
+  acceptText = { fileFormat: '', maxSize: '', subText: '' },
   title = '',
-  subText = '',
-  maxSize = 'Max. 10mo',
+  titleTooltip,
   disabledInput = false,
   children = null,
   fileUrl = null,
   fileName = null,
   titleAddButton,
+  _isDroppingFile = false,
+  validateFile,
   setFile,
   removeExistingFile,
   onTouched,
   onFileDataChange,
 }: Props) => {
-  const [customFileError, setCustomFileError] = useState<string | null>();
+  const DEFAULT_COLOR = '%23CBCBCB';
+  const ERROR_COLOR = '%23b80025';
+  const DROPPING_COLOR = '%23004F88';
+
   const [currentFile, setCurrentFile] = useState<File | null>(null);
   const [fileData, setFileData] = useState<{
     name: string;
@@ -90,9 +148,14 @@ const FileUploaderSingle = ({
     driveAccessToken?: string;
   } | null>(fileName ? { name: fileName, size: 0 } : null);
 
-  const [isDroppingFile, setIsDroppingFile] = useState<boolean>(false);
+  const [isDroppingFile, setIsDroppingFile] =
+    useState<boolean>(_isDroppingFile);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
+  const [fileUploadError, setUploadFileError] = useState<string | boolean>(
+    false,
+  );
+
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -101,38 +164,39 @@ const FileUploaderSingle = ({
     setAnchorEl(null);
   };
 
-  const validateFile = (size, type) => {
-    // if (size > 10 * 1024 * 1024) {
-    //   setCustomFileError('Le fichier doit être inférieur à 10 Mo');
-    //   setIsDroppingFile(false);
-    //   return true;
-    // }
-    if (!accept.includes(type)) {
-      setCustomFileError(
-        `Le fichier doit être au format ${acceptText || extractExtensions(accept).join(', ')}`,
-      );
-      setIsDroppingFile(false);
-      return true;
-    }
-
-    return false;
-  };
-
   const handleFileChange = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (data?: any, token: string | null = null, fakeClick?: boolean) => {
+    (
+      _event: ChangeEvent<HTMLInputElement> | null,
+      data?: {
+        docs: {
+          name: string;
+          sizeBytes: number;
+          mimeType: string;
+          id: string;
+        }[];
+      } | null,
+      token: string | null = null,
+      accept: string[] = [],
+      fakeClick?: boolean,
+    ) => {
       if (fakeClick) {
         fileInputRef?.current?.click();
       }
       handleClose();
       onTouched?.();
+
+      // * Local File
       if (
         fileInputRef.current?.files &&
-        fileInputRef.current?.files.length > 0
+        fileInputRef.current.files.length > 0
       ) {
         const file = fileInputRef.current.files[0];
-        setCurrentFile(fileInputRef.current.files[0]);
-        if (validateFile(file.size, file.type)) {
+        setCurrentFile(file);
+        if (
+          validateFile &&
+          validateFile(file.size, file.type, accept, setUploadFileError)
+        ) {
+          setIsDroppingFile(false);
           return;
         }
         onFileDataChange?.({
@@ -140,7 +204,6 @@ const FileUploaderSingle = ({
           size: Math.round(file.size / 1024),
           type: file.type,
         });
-        setCustomFileError(null);
         setFileData({
           name: file.name,
           size: Math.round(file.size / 1024),
@@ -149,25 +212,34 @@ const FileUploaderSingle = ({
         setFile(file);
         setIsDroppingFile(false);
       }
-      if (token && dataGetValue(data, 'docs.0')) {
+
+      // * Google Drive
+      if (token && data && data.docs && data.docs.length > 0) {
+        const googleFile = data.docs[0];
         const fileData = {
-          name: data.docs[0].name,
-          size: Math.round(data.docs[0].sizeBytes / 1024),
-          type: data.docs[0].mimeType,
-          driveFileId: data.docs[0].id,
+          name: googleFile.name,
+          size: Math.round(googleFile.sizeBytes / 1024),
+          type: googleFile.mimeType,
+          driveFileId: googleFile.id,
           driveAccessToken: token,
         };
-        if (validateFile(data.docs[0].sizeBytes, data.docs[0].mimeType)) {
+        if (
+          validateFile &&
+          validateFile(
+            googleFile.sizeBytes,
+            googleFile.mimeType,
+            accept,
+            setUploadFileError,
+          )
+        ) {
           return;
         }
         onFileDataChange?.(fileData);
         setIsDroppingFile(false);
-        setCustomFileError(null);
         setFileData(fileData);
       }
     },
     [
-      setCustomFileError,
       setIsDroppingFile,
       setCurrentFile,
       setFileData,
@@ -188,7 +260,6 @@ const FileUploaderSingle = ({
       URL.revokeObjectURL(URL.createObjectURL(currentFile));
       setCurrentFile(null);
     }
-    setCustomFileError(null);
     setFileData(null);
     setIsDroppingFile(false);
     setFile(null);
@@ -199,30 +270,32 @@ const FileUploaderSingle = ({
   }, [removeExistingFile, setFile, onFileDataChange, currentFile]);
 
   const dashedColor = useMemo(() => {
-    if (isDroppingFile) return '%23004F88';
-    if (error || customFileError) return '%23b80025';
-    return '%23CBCBCB';
-  }, [isDroppingFile, error]);
+    if (isDroppingFile) return DROPPING_COLOR;
+    if (error || fileUploadError !== false) return ERROR_COLOR;
+    return DEFAULT_COLOR;
+  }, [isDroppingFile, error, fileUploadError]);
 
   const bgColor = useMemo(() => {
-    if (fileData?.name || disabledInput) return '#F0F0F0';
-    if (isDroppingFile) return '#E8F1F7';
+    if (fileData?.name || disabledInput) return 'greyXLight';
+    if (isDroppingFile) return 'blueHoverEquivalence';
     return 'white';
   }, [fileData?.name, disabledInput, isDroppingFile]);
 
   const titleColor = useMemo(() => {
     if (fileData?.name) return 'greyDark';
-    if (error || customFileError) return 'redError';
+    if (error || fileUploadError !== false) return 'redError';
     return 'greyXDark';
-  }, [fileData?.name, error, customFileError]);
+  }, [fileData?.name, error, fileUploadError]);
 
   const inputCss = useMemo(
     () => ({
       height: '87px',
       backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='${dashedColor}' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e")`,
       borderRadius: '4px',
+      py: '24px',
+      px: '22px',
       display: 'flex',
-      justifyContent: 'space-around',
+      justifyContent: 'space-between',
       position: 'relative',
       alignItems: 'center',
       backgroundColor: bgColor,
@@ -256,17 +329,32 @@ const FileUploaderSingle = ({
   return (
     <Box
       data-testid="Uploader-document"
-      pb={3}
+      sx={{
+        pb: 3,
+      }}
       onDragLeave={() => setIsDroppingFile(false)}
     >
-      <Text variant="body2Medium" color={titleColor} pl={1}>
-        {title}
-      </Text>
+      <Box sx={{ display: 'flex' }}>
+        <Text variant="body2Medium" color={titleColor} pl={1}>
+          {title}
+        </Text>
+        {titleTooltip && (
+          <Box sx={{ marginLeft: '4px' }}>
+            <Tooltip
+              title={titleTooltip}
+              sx={{
+                display: 'flex',
+              }}
+            >
+              <IconProvider icon={faInfoCircle} size="sm" color="blueInfo" />
+            </Tooltip>
+          </Box>
+        )}
+      </Box>
       <Tooltip
         data-testid="tooltip"
         title={(fileData?.name && 'Un seul fichier autorisé') || ''}
         sx={{
-          padding: '0 !important',
           display: (fileData?.name && 'block') || 'none',
         }}
         placement="top"
@@ -298,7 +386,7 @@ const FileUploaderSingle = ({
               disabled={!!fileData?.name || disabledInput}
               type="file"
               ref={fileInputRef}
-              onChange={handleFileChange}
+              onChange={(event) => handleFileChange(event, null, null, accept)}
               onBlur={onTouched}
               accept={accept.join(', ')}
             />
@@ -319,12 +407,15 @@ const FileUploaderSingle = ({
                 }}
               >
                 Format{' '}
-                {acceptText || extractExtensions(accept).join(', ') + ' - '}
-                {maxSize}
-                {subText && (
+                {(acceptText?.fileFormat &&
+                acceptText?.fileFormat?.trim() !== ''
+                  ? acceptText.fileFormat
+                  : extractExtensions(accept).join(', ')) + ' - '}
+                {(acceptText.maxSize && acceptText.maxSize) || 'Max 10 Mo'}
+                {acceptText.subText && (
                   <>
                     <br />
-                    {subText}
+                    {acceptText.subText}
                   </>
                 )}
               </Text>
@@ -380,12 +471,17 @@ const FileUploaderSingle = ({
                 >
                   <MenuItem
                     testId="pc-add"
-                    onAction={() => handleFileChange(null, null, true)}
-                    text="Depuis votre PC"
-                    icon={faFolderOpen}
-                  />
+                    onClick={() => handleFileChange(null, null, null, [], true)}
+                  >
+                    <Box gap={1} display="flex">
+                      <IconProvider size="sm" icon={faFolderOpen} />
+                      <Text variant="body2">Depuis votre PC</Text>
+                    </Box>
+                  </MenuItem>
                   <GooglePickerWrapper
-                    callback={(data, token) => handleFileChange(data, token)}
+                    callback={(data, token) =>
+                      handleFileChange(null, data, token, accept)
+                    }
                     multiselect={true}
                     navHidden={false}
                     googleAuthClientId={googleAuthClientId ?? ''}
@@ -393,12 +489,12 @@ const FileUploaderSingle = ({
                     scopes="https://www.googleapis.com/auth/drive.file"
                     viewId="FOLDERS"
                   >
-                    <MenuItem
-                      testId="drive-add"
-                      onAction={handleClose}
-                      text="Depuis Google Drive"
-                      icon={faGoogleDrive as IconDefinition}
-                    />
+                    <MenuItem testId="drive-add" onClick={handleClose}>
+                      <Box gap={1} display="flex">
+                        <IconProvider size="sm" icon={faGoogleDrive} />
+                        <Text variant="body2">Depuis Google Drive</Text>
+                      </Box>
+                    </MenuItem>
                   </GooglePickerWrapper>
                 </Menu>
               </>
@@ -411,7 +507,7 @@ const FileUploaderSingle = ({
                     backgroundColor: '#FFFFFF !important',
                   },
                 }}
-                onClick={() => handleFileChange(null, null, true)}
+                onClick={() => handleFileChange(null, null, null, [], true)}
                 disabled={!!fileData?.name}
               >
                 <IconProvider icon={faUpload} size="md" mr={1} />
@@ -421,15 +517,16 @@ const FileUploaderSingle = ({
           </Box>
         </Box>
       </Tooltip>
-
-      {(error || customFileError || helperText) && (
+      {(error || helperText || fileUploadError !== false) && (
         <Box pl={1} pt={1}>
           <Text
             variant="caption"
-            color={((error || customFileError) && 'redError') || 'greyDark'}
+            color={
+              ((error || fileUploadError !== false) && 'redError') || 'greyDark'
+            }
             data-testid="helperText"
           >
-            {customFileError ? customFileError : helperText}
+            {fileUploadError !== false ? fileUploadError : helperText}
           </Text>
         </Box>
       )}
@@ -439,8 +536,9 @@ const FileUploaderSingle = ({
           sx={{
             display: 'flex',
             alignItems: 'center',
-            border: `1px solid ${((error || customFileError) && 'redError') || '#CBCBCB'}`,
-            borderRadius: '4px',
+            border: '0.5px solid',
+            borderColor: error ? 'redError' : 'greyLightDefaultBorder',
+            borderRadius: '0',
             justifyContent: 'space-between',
             maxHeight: '50px',
           }}
@@ -472,19 +570,18 @@ const FileUploaderSingle = ({
                 flexShrink: 1,
               }}
             >
-              {fileData?.name}{' '}
+              {fileData?.name}
             </Text>
-            {fileData?.size && (
+            {fileData?.size && fileData.size !== 0 ? (
               <Text
                 component="span"
                 variant="body2Regular"
                 color="greyDark"
-                sx={{ minWidth: '41px' }}
+                sx={{ minWidth: '41px', marginLeft: '8px' }}
               >
-                {' '}
                 ({fileData?.size} ko)
               </Text>
-            )}
+            ) : null}
           </Box>
           <Box
             sx={{

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

@@ -0,0 +1,5 @@
+export interface acceptText {
+  fileFormat?: string;
+  maxSize?: string;
+  subText?: string;
+}

package/src/components/index.ts

@@ -6,6 +6,7 @@ export { default as Select } from './Form/Select';
 export { default as MultiSelect } from './Form/MultiSelect';
 export { default as Checkbox } from './Form/Checkbox';
 export { default as CheckboxGroup } from './Form/CheckboxGroup';
+export type { CheckboxItemType } from './Form/CheckboxGroup/checkboxgroup.interface';
 export { default as RadioGroup } from './Form/RadioGroup';
 export { default as Accordion } from './Accordion';
 export { default as Breadcrumbs } from './Breadcrumbs';
@@ -26,6 +27,7 @@ export { default as Drawer } from './Modal/Drawer/Drawer';
 export { default as Dialog } from './Modal/Dialog/Dialog';
 export { default as Switch } from './Form/Switch/Switch';
 export { default as DatePicker } from './Form/DatePicker';
+export { default as TimePicker } from './Form/TimePicker';
 export { default as Datatable } from './Datatable/Datatable';
 export { default as DatatableCellRender } from './Datatable/DatatableCellRender';
 export { default as IconButton } from './IconButton/IconButton';

package/src/helpers/GooglePickerWrapper.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 
 import useGoogleDrivePicker, {
   GOOGLE_ACTION,
+  GoogleDrivePickerData,
 } from '@/hooks/useGooleDrivePicker';
 
 interface GooglePickerWrapperProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  callback: (data: any, token: string) => void;
+  callback: (_data: GoogleDrivePickerData, _token: string) => void;
   multiselect?: boolean;
   navHidden?: boolean;
   googleAuthClientId: string;

package/src/hooks/useGooleDrivePicker.ts

@@ -7,7 +7,7 @@ import {
 } from '@/types/googleDrive';
 
 const useGoogleDrivePicker = (
-  callbackFunction: (result: GoogleDrivePickerData, token: string) => void,
+  callbackFunction: (_result: GoogleDrivePickerData, _token: string) => void,
   options: GoogleDrivePickerOptions,
 ) => {
   const {
@@ -30,11 +30,13 @@ const useGoogleDrivePicker = (
       return;
     }
 
-    const view = new google.picker.DocsView(google.picker.ViewId[viewId ?? ''])
-      .setParent('root')
-      .setIncludeFolders(true)
-      .setSelectFolderEnabled(false)
-      .setMimeTypes(mimeType?.join(',') ?? ''); // ça marche pas
+    const view = new google.picker.DocsView(google.picker.ViewId[viewId ?? '']);
+
+    view.setParent('root');
+    view.setIncludeFolders(true);
+    view.setSelectFolderEnabled(false);
+    view.setMimeTypes(mimeType?.join(',') ?? '');
+
     const picker = new google.picker.PickerBuilder()
       .setOAuthToken(innerToken)
       .setDeveloperKey(googleApiKey)

package/src/types/global.d.ts

@@ -5,15 +5,17 @@ declare global {
     google: {
       accounts: {
         oauth2: {
-          initTokenClient: (params: TokenClientConfig) => any;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          initTokenClient: (_params: TokenClientConfig) => any;
         };
       };
     };
     gapi: {
       load: (
-        module: string,
-        params: {
-          callback: (param: any) => void;
+        _module: string,
+        _params: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          callback: (_param: any) => void;
         },
       ) => void;
     };

package/src/types/googleDrive.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-unused-vars */
 
 export type Haystack = any[] | Record<string, any>;
 

package/dist/es/src/helpers/dataGetValue.d.ts

@@ -1,2 +0,0 @@
-import { Haystack } from '@/types/googleDrive';
-export declare function dataGetValue(object: Haystack, key: string | number, defaultValue?: any): object | number | string | null;

package/src/helpers/dataGetValue.ts

@@ -1,22 +0,0 @@
-import { Haystack } from '@/types/googleDrive';
-
-export function dataGetValue(
-  object: Haystack,
-  key: string | number,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  defaultValue: any = null,
-): object | number | string | null {
-  try {
-    const resolved = key
-      .toString()
-      .split('.')
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .reduce(function (prev: { [x: string]: any }, curr: string | number) {
-        return prev ? prev[curr] : defaultValue;
-      }, object);
-
-    return typeof resolved !== 'undefined' ? resolved : defaultValue;
-  } catch {
-    return defaultValue;
-  }
-}