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

package/src/components/IconButton/IconButton.tsx

@@ -11,9 +11,9 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../IconProvider';
-import Tooltip from '../Tooltip';
-import { Placement } from '../Tooltip/tooltip.interface';
+import IconProvider from '@/components/IconProvider';
+import Tooltip from '@/components/Tooltip';
+import { Placement } from '@/components/Tooltip/tooltip.interface';
 
 interface Props extends IconButtonProps {
   icon: IconDefinition;

package/src/components/MenuItem/MenuItem.tsx

@@ -10,8 +10,8 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../IconProvider';
-import Text from '../Text';
+import IconProvider from '@/components/IconProvider';
+import Text from '@/components/Text';
 
 interface Props extends MenuItemProps {
   testId: string;

package/src/components/Modal/Dialog/Dialog.tsx

@@ -10,10 +10,13 @@ import {
 } from '@mui/material';
 import { OverridableTypeMap } from '@mui/material/OverridableComponent';
 
-import IconButton from '../../IconButton';
-import IconProvider from '../../IconProvider';
-import Text from '../../Text';
-import { DialogTitleProps, ModalProps } from '../modal.interface';
+import IconButton from '@/components/IconButton';
+import IconProvider from '@/components/IconProvider';
+import {
+  DialogTitleProps,
+  ModalProps,
+} from '@/components/Modal/modal.interface';
+import Text from '@/components/Text';
 
 const BootstrapDialog = styled(DialogMUI)(() => ({
   '& .MuiDialogContent-root': {

package/src/components/Modal/Drawer/Drawer.tsx

@@ -9,8 +9,8 @@ import {
   Drawer as DrawerMUI,
 } from '@mui/material';
 
-import IconButton from '../../IconButton';
-import { ModalProps } from '../modal.interface';
+import IconButton from '@/components/IconButton';
+import { ModalProps } from '@/components/Modal/modal.interface';
 
 const Drawer = ({
   title,

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

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 {
@@ -86,7 +88,7 @@ const Pagination = ({
       }}
     >
       <Box display="flex" alignItems="center">
-        <Text variant="body1Medium">
+        <Text variant="body1Bold">
           {totalRows} {totalString}
         </Text>
         <Divider
@@ -99,20 +101,14 @@ const Pagination = ({
           }}
         />
         <Select
-          label=""
           className="dac-select-label"
           labelId="select-label"
           value={internalLimit}
           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}

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;

package/src/components/UploadDocument/FileUploaderSingle.tsx

@@ -21,13 +21,13 @@ import {
 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 { dataGetValue } from '@/helpers/dataGetValue';
 
 export interface Props {
   setFile: (file: File | null) => void;
@@ -39,12 +39,13 @@ export interface Props {
   fileUrl?: string | null;
   fileName?: string | null;
   accept?: string[];
-  acceptText?: { fileFormat?: string; maxSize?: string; subText?: string };
+  acceptText?: string;
   disabledInput?: boolean;
   title?: string;
   children?: JSX.Element | null;
   titleAddButton?: string;
-  validateFile?: (size: number, type: string) => boolean;
+  subText?: string;
+  maxSize?: string;
   removeExistingFile?: () => void;
   onTouched?: () => void;
   onFileDataChange?: (
@@ -58,52 +59,6 @@ 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) => {
- *   if (size > 10 * 1024 * 1024) {
- *     setCustomFileError('Le fichier doit être inférieur à 10 Mo');
- *     return true;
- *   }
- *   if (!['application/pdf', 'image/png', 'image/jpeg', 'image/jpg'].includes(type)) {
- *     setCustomFileError('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,
@@ -111,19 +66,21 @@ const FileUploaderSingle = ({
   error = false,
   helperText = '',
   accept = [],
-  acceptText = { fileFormat: '', maxSize: '', subText: '' },
+  acceptText = '',
   title = '',
+  subText = '',
+  maxSize = 'Max. 10mo',
   disabledInput = false,
   children = null,
   fileUrl = null,
   fileName = null,
   titleAddButton,
-  validateFile,
   setFile,
   removeExistingFile,
   onTouched,
   onFileDataChange,
 }: Props) => {
+  const [customFileError, setCustomFileError] = useState<string | null>();
   const [currentFile, setCurrentFile] = useState<File | null>(null);
   const [fileData, setFileData] = useState<{
     name: string;
@@ -144,6 +101,23 @@ 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) => {
@@ -158,8 +132,7 @@ const FileUploaderSingle = ({
       ) {
         const file = fileInputRef.current.files[0];
         setCurrentFile(fileInputRef.current.files[0]);
-        if (validateFile && validateFile(file.size, file.type)) {
-          setIsDroppingFile(false);
+        if (validateFile(file.size, file.type)) {
           return;
         }
         onFileDataChange?.({
@@ -167,6 +140,7 @@ const FileUploaderSingle = ({
           size: Math.round(file.size / 1024),
           type: file.type,
         });
+        setCustomFileError(null);
         setFileData({
           name: file.name,
           size: Math.round(file.size / 1024),
@@ -183,18 +157,17 @@ const FileUploaderSingle = ({
           driveFileId: data.docs[0].id,
           driveAccessToken: token,
         };
-        if (
-          validateFile &&
-          validateFile(data.docs[0].sizeBytes, data.docs[0].mimeType)
-        ) {
+        if (validateFile(data.docs[0].sizeBytes, data.docs[0].mimeType)) {
           return;
         }
         onFileDataChange?.(fileData);
         setIsDroppingFile(false);
+        setCustomFileError(null);
         setFileData(fileData);
       }
     },
     [
+      setCustomFileError,
       setIsDroppingFile,
       setCurrentFile,
       setFileData,
@@ -215,6 +188,7 @@ const FileUploaderSingle = ({
       URL.revokeObjectURL(URL.createObjectURL(currentFile));
       setCurrentFile(null);
     }
+    setCustomFileError(null);
     setFileData(null);
     setIsDroppingFile(false);
     setFile(null);
@@ -226,7 +200,7 @@ const FileUploaderSingle = ({
 
   const dashedColor = useMemo(() => {
     if (isDroppingFile) return '%23004F88';
-    if (error) return '%23b80025';
+    if (error || customFileError) return '%23b80025';
     return '%23CBCBCB';
   }, [isDroppingFile, error]);
 
@@ -238,9 +212,9 @@ const FileUploaderSingle = ({
 
   const titleColor = useMemo(() => {
     if (fileData?.name) return 'greyDark';
-    if (error) return 'redError';
+    if (error || customFileError) return 'redError';
     return 'greyXDark';
-  }, [fileData?.name, error]);
+  }, [fileData?.name, error, customFileError]);
 
   const inputCss = useMemo(
     () => ({
@@ -345,15 +319,12 @@ const FileUploaderSingle = ({
                 }}
               >
                 Format{' '}
-                {(acceptText?.fileFormat &&
-                acceptText?.fileFormat?.trim() !== ''
-                  ? acceptText.fileFormat
-                  : extractExtensions(accept).join(', ')) + ' - '}
-                {(acceptText.maxSize && acceptText.maxSize) || 'Max 10 Mo'}
-                {acceptText.subText && (
+                {acceptText || extractExtensions(accept).join(', ') + ' - '}
+                {maxSize}
+                {subText && (
                   <>
                     <br />
-                    {acceptText.subText}
+                    {subText}
                   </>
                 )}
               </Text>
@@ -450,14 +421,15 @@ const FileUploaderSingle = ({
           </Box>
         </Box>
       </Tooltip>
-      {(error || helperText) && (
+
+      {(error || customFileError || helperText) && (
         <Box pl={1} pt={1}>
           <Text
             variant="caption"
-            color={(error && 'redError') || 'greyDark'}
+            color={((error || customFileError) && 'redError') || 'greyDark'}
             data-testid="helperText"
           >
-            {helperText}
+            {customFileError ? customFileError : helperText}
           </Text>
         </Box>
       )}
@@ -467,7 +439,7 @@ const FileUploaderSingle = ({
           sx={{
             display: 'flex',
             alignItems: 'center',
-            border: `1px solid ${(error && '#b80025') || '#CBCBCB'}`,
+            border: `1px solid ${((error || customFileError) && 'redError') || '#CBCBCB'}`,
             borderRadius: '4px',
             justifyContent: 'space-between',
             maxHeight: '50px',

package/src/helpers/GooglePickerWrapper.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import useGoogleDrivePicker, {
   GOOGLE_ACTION,
-} from '../hooks/useGooleDrivePicker';
+} from '@/hooks/useGooleDrivePicker';
 
 interface GooglePickerWrapperProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/helpers/dataGetValue.ts

@@ -1,4 +1,4 @@
-import { Haystack } from '../types/googleDrive';
+import { Haystack } from '@/types/googleDrive';
 
 export function dataGetValue(
   object: Haystack,

package/src/hooks/useGooleDrivePicker.ts

@@ -4,7 +4,7 @@ import {
   GoogleDrivePickerData,
   GoogleDrivePickerOptions,
   TokenResponse,
-} from '../types/googleDrive';
+} from '@/types/googleDrive';
 
 const useGoogleDrivePicker = (
   callbackFunction: (result: GoogleDrivePickerData, token: string) => void,
@@ -103,6 +103,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/dist/cjs/types/components/Form/AutoCompleteMulti/AutoCompleteMulti.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { type AutocompleteProps } from '@mui/material';
-interface AutocompleteMultipleSelectProps<T> extends Omit<AutocompleteProps<T, true, true, false>, 'onChange' | 'value' | 'options' | 'renderInput' | 'error'> {
-    value: T[] | undefined;
-    label?: string;
-    helperText?: string;
-    placeholder?: string;
-    options: T[];
-    getOptionLabel: (option: T) => string;
-    getKeyValue: (option: T) => string;
-    onChange: (value: T[]) => void;
-    getOptionDisabled?: (option: T) => boolean;
-    color?: 'success';
-    width?: number | string;
-    error?: string;
-}
-declare const AutocompleteMultipleSelect: <T>({ value, label, placeholder, options, disabled, getOptionLabel, getKeyValue, onChange, getOptionDisabled, width, color, helperText, error, ...props }: AutocompleteMultipleSelectProps<T>) => React.JSX.Element;
-export default AutocompleteMultipleSelect;

package/dist/cjs/types/components/Modal/Dialog/Dialog.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ModalProps } from '../modal.interface';
-declare const Dialog: ({ title, open, onClose, component, icon, ...props }: Omit<ModalProps, "footer" | "cardProps" | "size">) => React.JSX.Element;
-export default Dialog;

package/dist/cjs/types/components/Modal/Drawer/Drawer.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ModalProps } from '../modal.interface';
-declare const Drawer: ({ title, open, onClose, component, footer, cardProps, size, ...props }: Omit<ModalProps, "withHeaderDivider" | "icon">) => React.JSX.Element;
-export default Drawer;

package/dist/cjs/types/components/UploadDocument/FileUploaderSingle.d.ts

@@ -1,78 +0,0 @@
-import React from 'react';
-export interface Props {
-    setFile: (file: File | null) => void;
-    enableGoogleDrive: boolean;
-    googleAuthClientId?: string;
-    googleApiKey?: string;
-    error?: boolean;
-    helperText?: string;
-    fileUrl?: string | null;
-    fileName?: string | null;
-    accept?: string[];
-    acceptText?: {
-        fileFormat?: string;
-        maxSize?: string;
-        subText?: string;
-    };
-    disabledInput?: boolean;
-    title?: string;
-    children?: JSX.Element | null;
-    titleAddButton?: string;
-    validateFile?: (size: number, type: string) => boolean;
-    removeExistingFile?: () => void;
-    onTouched?: () => void;
-    onFileDataChange?: (fileData: {
-        name: string;
-        size: number;
-        type?: string;
-        driveFileId?: string;
-        driveAccessToken?: string;
-    } | null) => 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) => {
- *   if (size > 10 * 1024 * 1024) {
- *     setCustomFileError('Le fichier doit être inférieur à 10 Mo');
- *     return true;
- *   }
- *   if (!['application/pdf', 'image/png', 'image/jpeg', 'image/jpg'].includes(type)) {
- *     setCustomFileError('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.
- */
-declare const FileUploaderSingle: ({ enableGoogleDrive, googleAuthClientId, googleApiKey, error, helperText, accept, acceptText, title, disabledInput, children, fileUrl, fileName, titleAddButton, validateFile, setFile, removeExistingFile, onTouched, onFileDataChange, }: Props) => React.JSX.Element;
-export default FileUploaderSingle;

package/dist/cjs/types/index.d.ts

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