@groupeactual/ui-kit 1.3.2 → 1.4.0

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

@@ -9,7 +9,7 @@ interface Props {
     setLimit?: (limit: number) => void;
 }
 declare const Pagination: {
-    ({ totalString, totalPerPageString, limitsPerPage, setLimit, setPage, page, totalRows, limit }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ totalString, totalPerPageString, limitsPerPage, setLimit, setPage, page, totalRows, limit, }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Pagination;

package/dist/es/types/components/UploadDocument/UploaderDocument.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface Props {
+    setFile: (file: File | null) => void;
+    removeExistingFile: () => void;
+    onTouched?: () => void;
+    error: boolean;
+    helperText?: string;
+    fileUrl?: string | null;
+    fileName?: string | null;
+    accept: string[];
+    disabledInput?: boolean;
+    title?: string;
+    children?: JSX.Element | null;
+    titleAddButton: string;
+}
+declare const UploaderDocument: ({ setFile, error, helperText, removeExistingFile, onTouched, accept, title, disabledInput, children, fileUrl, fileName, titleAddButton, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default UploaderDocument;

package/dist/es/types/components/UploadDocument/index.d.ts

@@ -0,0 +1 @@
+export { default } from './UploaderDocument';

package/dist/es/types/components/index.d.ts

@@ -16,6 +16,7 @@ export { default as EmbeddedNotification } from './EmbbededNotification/Embedded
 export { default as Tooltip } from './Tooltip/Tooltip';
 export { default as AutoCompleteSingle } from './Form/AutoCompleteSingle';
 export { default as AutoCompleteMulti } from './Form/AutoCompleteMulti';
+export { default as UploaderDocument } from './UploadDocument/UploaderDocument';
 export { default as Snackbar } from './Snackbar/Snackbar';
 export { default as NotistackAdapter } from './NotistackAdapter/NotistackAdapter';
 export { default as BannerNotification } from './BannerNotification/BannerNotification';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
@@ -54,7 +54,7 @@
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@groupeactual/design-tokens": "1.3.2"
+    "@groupeactual/design-tokens": "1.4.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/components/Form/MultiSelect/MultiSelect.tsx

@@ -4,7 +4,7 @@ import {
   faCheck,
   faChevronDown,
   faCircleX,
-  faTimes
+  faTimes,
 } from '@fortawesome/pro-solid-svg-icons';
 import { SelectStyle } from '@groupeactual/design-tokens';
 import {
@@ -17,7 +17,7 @@ import {
   SelectChangeEvent,
   SelectProps,
   styled,
-  useTheme
+  useTheme,
 } from '@mui/material';
 
 import Chip from '../../Chip/Chip';
@@ -59,7 +59,7 @@ const MultiSelect = <T,>({
   const theme = useTheme();
   const StyledMultiSelectForm = useMemo(
     () => styled(FormControl)(SelectStyle(theme)),
-    [theme]
+    [theme],
   );
 
   const handleChange = (event: SelectChangeEvent<typeof options>) =>
@@ -78,7 +78,7 @@ const MultiSelect = <T,>({
     const classNames = [
       'DsMultiSelect',
       (!placeholder && 'Select-mui') || 'Select-ds',
-      value.length > 0 && 'Mui-filled'
+      value.length > 0 && 'Mui-filled',
     ];
 
     return classNames.filter(Boolean).join(' ');
@@ -93,8 +93,8 @@ const MultiSelect = <T,>({
         disabled={disabled}
         sx={{
           '.MuiOutlinedInput-input': {
-            marginTop: value?.length > 0 ? '0px' : '2px'
-          }
+            marginTop: value?.length > 0 ? '0px' : '2px',
+          },
         }}
       >
         <InputLabel disabled={disabled} error={!!error}>
@@ -107,9 +107,9 @@ const MultiSelect = <T,>({
               ? {
                   content: `"${placeholder}"`,
                   opacity:
-                    label === placeholder ? '0 !important' : '1 !important'
+                    label === placeholder ? '0 !important' : '1 !important',
                 }
-              : {}
+              : {},
           }}
           multiple
           label={label}
@@ -159,12 +159,12 @@ const MultiSelect = <T,>({
                   className.toString().includes('iconOpen') &&
                   color !== 'success'
                     ? 'rotate(180deg)'
-                    : 'none'
+                    : 'none',
               }}
             />
           )}
           MenuProps={{
-            disableAutoFocusItem: true
+            disableAutoFocusItem: true,
           }}
           {...props}
         >
@@ -178,8 +178,8 @@ const MultiSelect = <T,>({
                 backgroundColor:
                   value.indexOf(option) === -1 ? 'white' : 'greyXLight',
                 '&:hover': {
-                  backgroundColor: 'blueHoverEquivalence'
-                }
+                  backgroundColor: 'blueHoverEquivalence',
+                },
               }}
             >
               {getRenderValue(option)}

package/src/components/Pagination/Pagination.tsx

@@ -6,7 +6,7 @@ import {
   Divider,
   Pagination as MUIPagination,
   styled,
-  useTheme
+  useTheme,
 } from '@mui/material';
 
 import Select from '../Form/Select';
@@ -32,17 +32,17 @@ const Pagination = ({
   setPage,
   page = 1,
   totalRows,
-  limit
+  limit,
 }: Props) => {
   const theme = useTheme();
   const StyledPagination = useMemo(
     () => styled(MUIPagination)(PaginationStyle(theme)),
-    [theme]
+    [theme],
   );
 
   const [internalPage, setInternalPage] = useState<number>(page);
   const [internalLimit, setInternalLimit] = useState<number>(
-    limit ?? limitsPerPage[0]
+    limit ?? limitsPerPage[0],
   );
 
   const displayablePages = getTotalPages(totalRows, internalLimit);
@@ -82,7 +82,7 @@ const Pagination = ({
       alignItems="center"
       sx={{
         paddingTop: '16px',
-        paddingBottom: '24px'
+        paddingBottom: '24px',
       }}
     >
       <Box display="flex" alignItems="center">
@@ -95,7 +95,7 @@ const Pagination = ({
             color: 'greyXLight',
             width: '1px',
             height: '33px',
-            marginX: '16px'
+            marginX: '16px',
           }}
         />
         <Select
@@ -110,8 +110,8 @@ const Pagination = ({
           sx={{
             backgroundColor: 'white',
             '&.MuiInputBase-root': {
-              height: '32px !important'
-            }
+              height: '32px !important',
+            },
           }}
         />
         <Text variant="body1" pl="8px">
@@ -123,7 +123,7 @@ const Pagination = ({
             color: 'greyXLight',
             width: '1px',
             height: '33px',
-            marginX: '16px'
+            marginX: '16px',
           }}
         />
       </Box>

package/src/components/UploadDocument/UploaderDocument.tsx

@@ -0,0 +1,364 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { faEye, faTrash, faUpload } from '@fortawesome/pro-regular-svg-icons';
+import { faFileAlt } from '@fortawesome/pro-solid-svg-icons';
+import { IconButton } from '@mui/material';
+import Box from '@mui/material/Box';
+
+import Button from '../Button/Button';
+import IconProvider from '../IconProvider/IconProvider';
+import Text from '../Text/Text';
+import Tooltip from '../Tooltip';
+
+export interface Props {
+  setFile: (file: File | null) => void;
+  removeExistingFile: () => void;
+  onTouched?: () => void;
+  error: boolean;
+  helperText?: string;
+  fileUrl?: string | null;
+  fileName?: string | null;
+  accept: string[];
+  disabledInput?: boolean;
+  title?: string;
+  children?: JSX.Element | null;
+  titleAddButton: string;
+}
+
+const UploaderDocument = ({
+  setFile,
+  error = false,
+  helperText = '',
+  removeExistingFile,
+  onTouched,
+  accept = [],
+  title = '',
+  disabledInput = false,
+  children = null,
+  fileUrl = null,
+  fileName = null,
+  titleAddButton,
+}: Props) => {
+  const [customFileError, setCustomFileError] = useState<string | null>();
+  const [selectedFileSize, setSelectedFileSize] = useState<number | null>(null);
+  const [currentFile, setCurrentFile] = useState<File | null>(null);
+
+  const [isDroppingFile, setIsDroppingFile] = useState<boolean>(false);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [selectedFileName, setSelectedFileName] = useState<string | null>(
+    fileName ?? null,
+  );
+
+  const handleSelectFile = useCallback(() => {
+    onTouched?.();
+    fileInputRef.current?.click();
+  }, [onTouched]);
+
+  const handleFileChange = useCallback(() => {
+    onTouched?.();
+    if (fileInputRef.current?.files && fileInputRef.current?.files.length > 0) {
+      const file = fileInputRef.current.files[0];
+      setCurrentFile(fileInputRef.current.files[0]);
+      const fileSizeKB = Math.round(file.size / 1024);
+      if (file.size > 10 * 1024 * 1024) {
+        setCustomFileError('Le fichier doit être inférieur à 10 Mo');
+        setIsDroppingFile(false);
+        return;
+      }
+      if (!accept.includes(file.type)) {
+        setCustomFileError(
+          `Le fichier doit être au format ${extractExtensions(accept).join(', ')}`,
+        );
+        setIsDroppingFile(false);
+        return;
+      }
+      setCustomFileError(null);
+      setSelectedFileName(file.name);
+      setSelectedFileSize(fileSizeKB);
+      setFile(file);
+      setIsDroppingFile(false);
+    }
+  }, [
+    setCustomFileError,
+    setIsDroppingFile,
+    setCurrentFile,
+    setSelectedFileName,
+    setSelectedFileSize,
+    setFile,
+    accept,
+  ]);
+
+  const handleDelete = useCallback(() => {
+    if (fileName) {
+      removeExistingFile();
+    }
+    if (currentFile) {
+      URL.revokeObjectURL(URL.createObjectURL(currentFile));
+    }
+    setCustomFileError(null);
+    setSelectedFileName(null);
+    setSelectedFileSize(null);
+    setIsDroppingFile(false);
+    setFile(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, [removeExistingFile, setFile]);
+
+  const dashedColor = useMemo(() => {
+    if (isDroppingFile) return '%23004F88';
+    if (error || customFileError) return '%23b80025';
+    return '%23CBCBCB';
+  }, [isDroppingFile, error]);
+
+  const bgColor = useMemo(() => {
+    if (selectedFileName || disabledInput) return '#F0F0F0';
+    if (isDroppingFile) return '#E8F1F7';
+    return '';
+  }, [selectedFileName, disabledInput, isDroppingFile]);
+
+  const titleColor = useMemo(() => {
+    if (selectedFileName) return 'greyDark';
+    if (error || customFileError) return 'redError';
+    return 'greyXDark';
+  }, [selectedFileName, error, customFileError]);
+
+  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',
+      display: 'flex',
+      justifyContent: 'space-around',
+      position: 'relative',
+      alignItems: 'center',
+      backgroundColor: bgColor,
+    }),
+    [dashedColor, bgColor],
+  );
+
+  const extractExtensions = (types: string[]): string[] => {
+    return types.map((type) => {
+      const extension = type.split('/')[1].toUpperCase();
+      return extension;
+    });
+  };
+
+  useEffect(() => {
+    if (!fileName) {
+      return;
+    }
+    setSelectedFileName(fileName);
+  }, [fileName]);
+
+  useEffect(() => {
+    return () => {
+      if (currentFile) {
+        const fileURL = URL.createObjectURL(currentFile);
+        URL.revokeObjectURL(fileURL);
+      }
+    };
+  }, [currentFile]);
+
+  return (
+    <Box
+      data-testid="Uploader-document"
+      pb={3}
+      onDragLeave={() => setIsDroppingFile(false)}
+    >
+      <Text variant="body2Medium" color={titleColor} pl={1}>
+        {title}
+      </Text>
+      <Tooltip
+        data-testId="tooltip"
+        title={(selectedFileName && 'Un seul fichier autorisé') || ''}
+        sx={{
+          padding: '0 !important',
+          display: (selectedFileName && 'block') || 'none',
+        }}
+        placement="top"
+      >
+        <Box
+          mt={1}
+          p={2}
+          sx={inputCss}
+          onDragOver={(e) => {
+            e.preventDefault();
+            setIsDroppingFile(true);
+          }}
+        >
+          <Box
+            sx={{
+              opacity: 0,
+              position: 'absolute',
+              top: '0px',
+              width: '100%',
+              height: '100%',
+              '& input': {
+                width: '100%',
+                height: '100%',
+              },
+            }}
+          >
+            <input
+              data-testid="document-input"
+              disabled={!!selectedFileName || disabledInput}
+              type="file"
+              ref={fileInputRef}
+              onChange={handleFileChange}
+              onBlur={onTouched}
+              accept={accept.join(', ')}
+            />
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Text
+              variant="body2Medium"
+              color={(selectedFileName && 'greyDark') || 'greyXDark'}
+            >
+              Déposer un fichier ici
+            </Text>
+            <Box sx={{ maxWidth: '240px' }}>
+              <Text
+                variant="caption"
+                sx={{
+                  color: 'greyDark',
+                  marginTop: '2px',
+                }}
+              >
+                Format {extractExtensions(accept).join(', ')} - Max. 10mo
+              </Text>
+            </Box>
+          </Box>
+          <Box>
+            <Text
+              variant="body2Medium"
+              color={(selectedFileName && 'greyDark') || 'greyXDark'}
+            >
+              ou
+            </Text>
+          </Box>
+          <Box>
+            <Button
+              variant="secondary"
+              sx={{
+                display: 'flex',
+                '&.MuiButton-secondaryPrimary.Mui-disabled': {
+                  backgroundColor: '#FFFFFF !important',
+                },
+              }}
+              onClick={handleSelectFile}
+              disabled={!!selectedFileName}
+            >
+              <IconProvider icon={faUpload} size="md" mr={1} />
+              {titleAddButton}
+            </Button>
+          </Box>
+        </Box>
+      </Tooltip>
+
+      {(error || customFileError || helperText) && (
+        <Box pl={1} pt={1}>
+          <Text
+            variant="caption"
+            color={((error || customFileError) && 'redError') || 'greyDark'}
+            data-testid="helperText"
+          >
+            {customFileError ? customFileError : helperText}
+          </Text>
+        </Box>
+      )}
+
+      {selectedFileName && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            border: `1px solid ${((error || customFileError) && 'redError') || '#CBCBCB'}`,
+            borderRadius: '4px',
+            justifyContent: 'space-between',
+            maxHeight: '50px',
+          }}
+          mt={2}
+          p={2}
+        >
+          <Box>
+            <IconProvider
+              icon={faFileAlt}
+              color="greyMediumInactive"
+              size="sm"
+              mr={1}
+            />
+            <Text variant="body2Medium" color="greyXDark">
+              {selectedFileName}{' '}
+              {selectedFileSize && (
+                <Text component="span" variant="body2Regular" color="greyDark">
+                  ({selectedFileSize} ko)
+                </Text>
+              )}
+            </Text>
+          </Box>
+          <Box>
+            <IconButton
+              size="medium"
+              color="primary"
+              sx={{
+                height: '42px',
+                width: '42px',
+                mx: 1 / 2,
+                outline: 'none !important',
+                borderRadius: '4px',
+                '&:hover': {
+                  backgroundColor: 'blueHoverOpacity12',
+                },
+              }}
+              data-testid="show_btn"
+              onClick={() => {
+                if (currentFile) {
+                  const currentFileURL = URL.createObjectURL(currentFile);
+                  window.open(currentFileURL, '_blank');
+                } else if (fileUrl) {
+                  window.open(fileUrl);
+                }
+              }}
+            >
+              <IconProvider
+                icon={faEye}
+                color="grey"
+                size="md"
+                height="16px"
+                width="16px"
+              />
+            </IconButton>
+            <IconButton
+              size="medium"
+              color="primary"
+              sx={{
+                mx: 1 / 2,
+                height: '42px',
+                width: '42px',
+                outline: 'none !important',
+                borderRadius: '4px',
+                '&:hover': {
+                  backgroundColor: 'blueHoverOpacity12',
+                },
+              }}
+              data-testid="delete_btn"
+              onClick={handleDelete}
+            >
+              <IconProvider
+                icon={faTrash}
+                color="grey"
+                size="md"
+                height="16px"
+                width="16px"
+              />
+            </IconButton>
+          </Box>
+        </Box>
+      )}
+      {children}
+    </Box>
+  );
+};
+
+export default UploaderDocument;

package/src/components/UploadDocument/index.ts

@@ -0,0 +1 @@
+export { default } from './UploaderDocument';

package/src/components/index.ts

@@ -16,6 +16,7 @@ export { default as EmbeddedNotification } from './EmbbededNotification/Embedded
 export { default as Tooltip } from './Tooltip/Tooltip';
 export { default as AutoCompleteSingle } from './Form/AutoCompleteSingle';
 export { default as AutoCompleteMulti } from './Form/AutoCompleteMulti';
+export { default as UploaderDocument } from './UploadDocument/UploaderDocument';
 export { default as Snackbar } from './Snackbar/Snackbar';
 export { default as NotistackAdapter } from './NotistackAdapter/NotistackAdapter';
 export { default as BannerNotification } from './BannerNotification/BannerNotification';