@groupeactual/ui-kit 1.6.7-beta.0 → 1.7.0-beta.3

package/src/components/Navigation/Stepper/Step.tsx

@@ -4,8 +4,9 @@ import { faCheck } from '@fortawesome/pro-regular-svg-icons';
 import { faCheckCircle, faDotCircle } from '@fortawesome/pro-solid-svg-icons';
 import { Box, Stack, useTheme } from '@mui/material';
 
-import IconProvider from '../../IconProvider';
-import Text from '../../Text';
+import IconProvider from '@/components/IconProvider';
+import Text from '@/components/Text';
+
 import { stepperItemsToPercent } from './stepper.helper';
 import { Step } from './stepper.interface';
 
@@ -16,7 +17,7 @@ export const StepComponent = ({
 }: {
   step: Step;
   canNavigate: boolean;
-  onNavigate: (link: string) => void;
+  onNavigate: (_link: string) => void;
 }) => {
   const percent = stepperItemsToPercent(items);
   const isFullyValidated = percent === 100;

package/src/components/Navigation/Stepper/Stepper.tsx

@@ -9,7 +9,7 @@ import { Step } from './stepper.interface';
 interface Props {
   steps: Step[];
   canNavigate: boolean;
-  onNavigate?: (url: string) => void;
+  onNavigate?: (_url: string) => void;
   sx?: SxProps<Theme>;
 }
 const Stepper = ({

package/src/components/NotistackAdapter/NotistackAdapter.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { CustomContentProps, SnackbarContent } from 'notistack';
 
-import Snackbar from '../Snackbar/Snackbar';
+import Snackbar from '@/components/Snackbar';
 
 const NotistackAdapter = forwardRef<HTMLDivElement, CustomContentProps>(
   ({ message, variant }, ref) => {

package/src/components/Pagination/Pagination.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, useEffect, useMemo, useState } from 'react';
 
+import { faCaretDown } from '@fortawesome/pro-solid-svg-icons';
 import { PaginationStyle } from '@groupeactual/design-tokens';
 import {
   Box,
@@ -9,8 +10,9 @@ import {
   useTheme,
 } from '@mui/material';
 
-import Select from '../Form/Select';
-import Text from '../Text';
+import Select from '@/components/Form/Select';
+import Text from '@/components/Text';
+
 import { getTotalPages } from './pagination.helper';
 
 interface Props {
@@ -20,8 +22,8 @@ interface Props {
   limitsPerPage?: number[];
   page?: number;
   limit?: number;
-  setPage?: (page: number) => void;
-  setLimit?: (limit: number) => void;
+  setPage?: (_page: number) => void;
+  setLimit?: (_limit: number) => void;
 }
 
 const Pagination = ({
@@ -99,20 +101,15 @@ const Pagination = ({
           }}
         />
         <Select
-          label=""
           className="dac-select-label"
           labelId="select-label"
           value={internalLimit}
+          inputProps={{ MenuProps: { disableScrollLock: true } }}
           onChange={handleChangeLimit}
           options={limitsPerPage}
           getRenderValue={(value) => value.toString()}
-          width={75}
-          sx={{
-            backgroundColor: 'white',
-            '&.MuiInputBase-root': {
-              height: '32px !important',
-            },
-          }}
+          popupIcon={faCaretDown}
+          width={60}
         />
         <Text variant="body1" pl="8px">
           {totalPerPageString}
@@ -142,6 +139,4 @@ const Pagination = ({
   );
 };
 
-Pagination.displayName = 'Pagination';
-
 export default Pagination;

package/src/components/Snackbar/Snackbar.tsx

@@ -9,7 +9,7 @@ import {
 import { SnackbarStyle } from '@groupeactual/design-tokens';
 import { Alert, AlertProps, styled, useTheme } from '@mui/material';
 
-import IconProvider from '../IconProvider/IconProvider';
+import IconProvider from '@/components/IconProvider';
 
 interface Props extends Omit<AlertProps, 'severity' | 'text'> {
   text: string | React.ReactNode;
@@ -45,6 +45,4 @@ const Snackbar = ({ text, severity }: Props) => {
   );
 };
 
-Snackbar.displayName = 'Snackbar';
-
 export default Snackbar;

package/src/components/Text/Text.tsx

@@ -33,6 +33,4 @@ const Text = (props: Props) => (
   <Typography color="greyXDark" {...(props as TypographyProps)} />
 );
 
-Text.displayName = 'Text';
-
 export default Text;

package/src/components/Tooltip/Tooltip.tsx

@@ -1,65 +1,74 @@
-import React, { ReactElement } from 'react';
+import React, { ReactNode } from 'react';
 
 import {
   Box,
   Tooltip as TooltipMui,
   TooltipProps,
-  styled,
   tooltipClasses,
 } from '@mui/material';
 
 import { Placement } from './tooltip.interface';
 
 interface Props extends Omit<TooltipProps, 'icon' | 'children' | 'placement'> {
-  title: string;
-  children: ReactElement;
+  title: ReactNode;
+  children: ReactNode;
   placement?: Placement;
+  placementMargin?: number;
 }
 
 const Tooltip = ({
   title,
   placement = 'right',
   children,
+  placementMargin = 4,
   ...tooltipProps
 }: Props) => {
   if (!title) {
     return <>{children}</>;
   }
-  const StyledTooltip = styled(({ classes, ...tooltipProps }: TooltipProps) => (
-    <TooltipMui {...tooltipProps} classes={classes} />
-  ))(() => ({
-    [`& .${tooltipClasses.tooltip}`]: {
-      backgroundColor: '#272727',
-      padding: '4px !important',
-      fontFamily: 'Roboto, sans-serif',
-      fontSize: '13px',
-      color: 'white',
-      fontWeight: 400,
-    },
-    [`& .${tooltipClasses.tooltipPlacementTop}`]: {
-      marginBottom: '4px !important',
-    },
-    [`& .${tooltipClasses.tooltipPlacementRight}`]: {
-      marginLeft: '4px !important',
-    },
-    [`& .${tooltipClasses.tooltipPlacementBottom}`]: {
-      marginTop: '4px !important',
-    },
-    [`& .${tooltipClasses.tooltipPlacementLeft}`]: {
-      marginRight: '4px !important',
-    },
-  }));
 
   return (
-    <StyledTooltip
-      placement={placement || undefined}
+    <TooltipMui
       title={<>{title}</>}
       {...tooltipProps}
+      sx={{
+        ...tooltipProps.sx,
+        display: 'inline-flex',
+      }}
+      placement={placement || undefined}
+      slotProps={{
+        popper: {
+          sx: {
+            [`&.${tooltipClasses.popper} .MuiTooltip-tooltip`]: {
+              backgroundColor: 'greyXDark',
+              padding: '4px !important',
+              fontSize: '12px !important',
+              color: 'white',
+              fontWeight: 400,
+            },
+            [`&.${tooltipClasses.popper}[data-popper-placement*="bottom"] .${tooltipClasses.tooltip}`]:
+              {
+                marginTop: placementMargin + 'px',
+              },
+            [`&.${tooltipClasses.popper}[data-popper-placement*="top"] .${tooltipClasses.tooltip}`]:
+              {
+                marginBottom: placementMargin + 'px',
+              },
+            [`&.${tooltipClasses.popper}[data-popper-placement*="right"] .${tooltipClasses.tooltip}`]:
+              {
+                marginLeft: placementMargin + 'px',
+              },
+            [`&.${tooltipClasses.popper}[data-popper-placement*="left"] .${tooltipClasses.tooltip}`]:
+              {
+                marginRight: placementMargin + 'px',
+              },
+          },
+        },
+      }}
     >
       <Box component="span">{children}</Box>
-    </StyledTooltip>
+    </TooltipMui>
   );
 };
-Tooltip.displayName = 'Tooltip';
 
 export default Tooltip;

package/src/components/UploadDocument/FileUploaderSingle.tsx

@@ -1,4 +1,5 @@
 import React, {
+  ChangeEvent,
   useCallback,
   useEffect,
   useMemo,
@@ -14,24 +15,27 @@ 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';
 
-import GooglePickerWrapper from '../../helpers/GooglePickerWrapper';
-import { dataGetValue } from '../../helpers/dataGetValue';
-import Button from '../Button/Button';
-import IconProvider from '../IconProvider/IconProvider';
-import MenuItem from '../MenuItem/MenuItem';
-import Text from '../Text/Text';
-import Tooltip from '../Tooltip';
+import Button from '@/components/Button';
+import IconProvider from '@/components/IconProvider';
+import MenuItem from '@/components/MenuItem';
+import Text from '@/components/Text';
+import Tooltip from '@/components/Tooltip';
+import GooglePickerWrapper from '@/helpers/GooglePickerWrapper';
+
+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,16 +43,16 @@ export interface Props {
   fileUrl?: string | null;
   fileName?: string | null;
   accept?: string[];
-  acceptText?: { fileFormat?: string; maxSize?: string; subText?: string };
+  acceptText?: acceptText;
   disabledInput?: boolean;
-  title?: string;
   children?: JSX.Element | null;
   titleAddButton?: string;
-  validateFile?: (size: number, type: string) => boolean;
+  _isDroppingFile?: boolean; // * Only used for storybook
+  validateFile?: (_size: number, _type: string) => boolean;
   removeExistingFile?: () => void;
   onTouched?: () => void;
   onFileDataChange?: (
-    fileData: {
+    _fileData: {
       name: string;
       size: number;
       type?: string;
@@ -113,17 +117,23 @@ const FileUploaderSingle = ({
   accept = [],
   acceptText = { fileFormat: '', maxSize: '', subText: '' },
   title = '',
+  titleTooltip,
   disabledInput = false,
   children = null,
   fileUrl = null,
   fileName = null,
   titleAddButton,
+  _isDroppingFile = false,
   validateFile,
   setFile,
   removeExistingFile,
   onTouched,
   onFileDataChange,
 }: Props) => {
+  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;
@@ -133,7 +143,8 @@ 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 [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -145,19 +156,31 @@ const FileUploaderSingle = ({
   };
 
   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,
+      fakeClick?: boolean,
+    ) => {
       if (fakeClick) {
         fileInputRef?.current?.click();
       }
       handleClose();
       onTouched?.();
+
       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]);
+        setCurrentFile(file);
         if (validateFile && validateFile(file.size, file.type)) {
           setIsDroppingFile(false);
           return;
@@ -175,17 +198,19 @@ const FileUploaderSingle = ({
         setFile(file);
         setIsDroppingFile(false);
       }
-      if (token && dataGetValue(data, 'docs.0')) {
+
+      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 &&
-          validateFile(data.docs[0].sizeBytes, data.docs[0].mimeType)
+          validateFile(googleFile.sizeBytes, googleFile.mimeType)
         ) {
           return;
         }
@@ -225,14 +250,14 @@ const FileUploaderSingle = ({
   }, [removeExistingFile, setFile, onFileDataChange, currentFile]);
 
   const dashedColor = useMemo(() => {
-    if (isDroppingFile) return '%23004F88';
-    if (error) return '%23b80025';
-    return '%23CBCBCB';
+    if (isDroppingFile) return DROPPING_COLOR;
+    if (error) return ERROR_COLOR;
+    return DEFAULT_COLOR;
   }, [isDroppingFile, error]);
 
   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]);
 
@@ -247,8 +272,10 @@ const FileUploaderSingle = ({
       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,
@@ -282,17 +309,27 @@ 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}>
+              <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"
@@ -409,12 +446,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)
+                    }
                     multiselect={true}
                     navHidden={false}
                     googleAuthClientId={googleAuthClientId ?? ''}
@@ -422,12 +464,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>
               </>
@@ -440,7 +482,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} />
@@ -467,8 +509,9 @@ const FileUploaderSingle = ({
           sx={{
             display: 'flex',
             alignItems: 'center',
-            border: `1px solid ${(error && '#b80025') || '#CBCBCB'}`,
-            borderRadius: '4px',
+            border: '0.5px solid',
+            borderColor: error ? 'redError' : 'greyLightDefaultBorder',
+            borderRadius: '0',
             justifyContent: 'space-between',
             maxHeight: '50px',
           }}
@@ -500,19 +543,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,
-} from '../hooks/useGooleDrivePicker';
+  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

@@ -4,10 +4,10 @@ import {
   GoogleDrivePickerData,
   GoogleDrivePickerOptions,
   TokenResponse,
-} from '../types/googleDrive';
+} 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)
@@ -103,6 +105,6 @@ const useGoogleDrivePicker = (
   return [openPicker, token] as const;
 };
 
-export * from '../types/googleDrive';
+export * from '@/types/googleDrive';
 
 export default useGoogleDrivePicker;

package/src/index.ts

@@ -1,6 +1,4 @@
 export * from './components';
-export {
-  default as DesignSystemProvider,
-  DesignSystemContext,
-  type DesignSystemContextValues
-} from './DesignSystemProvider';
+export { default as DesignSystemProvider } from './DesignSystemProvider';
+export { DesignSystemContext } from './DesignSystemProvider';
+export { type DesignSystemContextValues } from './DesignSystemProvider';

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>;