@groupeactual/ui-kit 1.7.0-beta.3 → 1.7.0-beta.5

package/src/components/UploadDocument/FileUploader.tsx

@@ -0,0 +1,690 @@
+import React, {
+  ChangeEvent,
+  DragEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { faGoogleDrive } from '@fortawesome/free-brands-svg-icons';
+import {
+  faEye,
+  faFolderOpen,
+  faTrash,
+  faUpload,
+} from '@fortawesome/pro-regular-svg-icons';
+import {
+  faCaretDown,
+  faFileAlt,
+  faInfoCircle,
+} from '@fortawesome/pro-solid-svg-icons';
+import { Box, IconButton } from '@mui/material';
+import Menu from '@mui/material/Menu';
+
+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 {
+  AcceptTextType,
+  FileDataType,
+  GoogleDriveFile,
+} from './fileuploader.interface';
+
+interface Props {
+  title?: string;
+  subTitle?: string;
+  titleAddButton?: string;
+  helperText?: string;
+  titleTooltip?: string;
+  files?: FileDataType[];
+  isMulti?: boolean;
+  accept?: string[];
+  acceptText?: AcceptTextType;
+  orText?: string;
+  disabled?: boolean;
+  error?: string;
+  enableGoogleDrive?: boolean;
+  googleAuthClientId?: string;
+  googleApiKey?: string;
+  _isDroppingFile?: boolean; // * Only used for storybook
+  validateFile?: (
+    _size: number,
+    _type: string,
+    _accept: string[],
+    _setUploadFileError: React.Dispatch<React.SetStateAction<boolean | string>>,
+  ) => boolean;
+  onTouched?: () => void;
+  onFilesDataChange?: (_fileData: FileDataType[] | undefined) => void;
+}
+
+const FileUploader = ({
+  title = '',
+  subTitle = 'Déposer un fichier ici',
+  titleAddButton = 'Ajouter un fichier',
+  helperText = '',
+  titleTooltip,
+  files = [],
+  isMulti = false,
+  accept = [],
+  acceptText = { fileFormat: '', maxSize: '', subText: '' },
+  orText = 'ou',
+  disabled = false,
+  error,
+  enableGoogleDrive = false,
+  googleAuthClientId,
+  googleApiKey,
+  _isDroppingFile = false,
+  validateFile,
+  onTouched,
+  onFilesDataChange,
+}: Props) => {
+  const DEFAULT_COLOR = '%23CBCBCB';
+  const ERROR_COLOR = '%23b80025';
+  const DROPPING_COLOR = '%23004F88';
+
+  // * 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] =
+    useState<boolean>(_isDroppingFile);
+  // * uploadFileError is used to display the error message when the file is not valid from the validateFile function
+  const [uploadFileError, setUploadFileError] = useState<string | boolean>(
+    false,
+  );
+
+  // * Refs
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  // * Colors
+  const dashedColor = useMemo(() => {
+    if ((!isMulti && filesData?.[0]?.name) || disabled) return DEFAULT_COLOR;
+    if (isDroppingFile) return DROPPING_COLOR;
+    if (error || uploadFileError !== false) return ERROR_COLOR;
+    return DEFAULT_COLOR;
+  }, [isDroppingFile, error, uploadFileError]);
+
+  const bgColor = useMemo(() => {
+    if ((!isMulti && filesData?.[0]?.name) || disabled) return 'greyXLight';
+    if (isDroppingFile) return 'blueHoverEquivalence';
+    return 'white';
+  }, [filesData?.length, disabled, isDroppingFile]);
+
+  const titleColor = useMemo(() => {
+    if (!isMulti && filesData?.[0]?.name) return 'greyDark';
+    if (error || uploadFileError !== false) return 'redError';
+    return 'greyXDark';
+  }, [filesData?.length, error, uploadFileError]);
+
+  // * Styles
+  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-between',
+      position: 'relative',
+      alignItems: 'center',
+      overflow: 'hidden',
+      backgroundColor: bgColor,
+    }),
+    [dashedColor, bgColor],
+  );
+
+  // * Events handlers
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if ((!isMulti && filesData?.[0]?.name) || disabled) return;
+
+    setIsDroppingFile(true);
+  };
+
+  const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if ((!isMulti && filesData?.[0]?.name) || disabled) return;
+
+    setIsDroppingFile(false);
+  };
+
+  // * Handle file change and file deletion
+  const handleFileChange = useCallback(
+    (
+      _event: ChangeEvent<HTMLInputElement> | null,
+      data?: {
+        docs: GoogleDriveFile[];
+      } | null,
+      token: string | null = null,
+      accept: string[] = [],
+      fakeClick?: boolean,
+    ) => {
+      if (fakeClick) {
+        fileInputRef?.current?.click();
+        return;
+      }
+
+      handleClose();
+      onTouched?.();
+
+      // * Local Files
+      if (
+        fileInputRef.current?.files &&
+        fileInputRef.current?.files?.length > 0
+      ) {
+        const validInputFiles: File[] = [];
+        const fileList = Array.from(fileInputRef.current?.files);
+
+        const newFileData: FileDataType[] = fileList
+          .map((file) => {
+            if (
+              validateFile &&
+              !validateFile(file.size, file.type, accept, setUploadFileError)
+            ) {
+              setIsDroppingFile(false);
+              return null;
+            }
+
+            validInputFiles.push(file);
+
+            return {
+              name: file?.name ?? '',
+              size: Math.round(file.size / 1024),
+              type: file.type,
+              url: URL.createObjectURL(file),
+            };
+          })
+          .filter((file): file is FileDataType => 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,
+      handleClose,
+    ],
+  );
+
+  const handleDelete = useCallback(
+    (fileIndex: number) => {
+      //* Remove the file from the currentFiles array
+      if (currentFiles && currentFiles.length > 0) {
+        const fileToDelete = currentFiles[fileIndex];
+        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 {
+            const fileURL = URL.createObjectURL(fileToDelete);
+            URL.revokeObjectURL(fileURL);
+          } catch {
+            // * Do nothing
+          }
+        }
+
+        if (currentFiles.length === 1) {
+          setCurrentFiles([]);
+        } else {
+          setCurrentFiles(
+            currentFiles.filter((_, index) => index !== fileIndex),
+          );
+        }
+      }
+
+      //* Remove the file from the filesData array
+      if (filesData && filesData.length === 1) {
+        setFilesData([]);
+      } else {
+        setFilesData(
+          Object.values(filesData || []).filter(
+            (_, index) => index !== fileIndex,
+          ),
+        );
+      }
+
+      setIsDroppingFile(false);
+    },
+    [currentFiles, filesData, setIsDroppingFile, setCurrentFiles, setFilesData],
+  );
+
+  // * Utils
+  const extractExtensions = (types: string[]): string[] => {
+    return types.map((type) => {
+      const extension = type.split('/')[1].toUpperCase();
+      return extension;
+    });
+  };
+
+  // * UseEffects
+
+  // * Initialize the component with the files passed as props
+  useEffect(() => {
+    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 initialFiles = FilesDataDto.map(
+      (fileData) =>
+        new File(
+          [new Blob([`Dummy content for ${fileData.name}`])],
+          fileData.name,
+          {
+            type: fileData.type,
+          },
+        ),
+    );
+
+    setCurrentFiles(initialFiles);
+    setFilesData(FilesDataDto);
+  }, []);
+
+  useEffect(() => {
+    // * Notify parent component
+    onFilesDataChange?.(filesData);
+  }, [filesData]);
+
+  useEffect(() => {
+    return () => {
+      if (!currentFiles?.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);
+        });
+      } catch {
+        // * Do nothing
+      }
+    };
+  }, [currentFiles]);
+
+  return (
+    <Box
+      data-testid="Uploader-document"
+      sx={{
+        pb: 3,
+      }}
+    >
+      <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+        <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>
+
+      <Box
+        mt={1}
+        p={2}
+        sx={inputCss}
+        onDragOver={handleDragOver}
+        onDragEnter={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDragEnd={handleDragLeave}
+      >
+        <Box
+          sx={{
+            opacity: 0,
+            position: 'absolute',
+            top: '0px',
+            right: '0px',
+            width: '100%',
+            height: '100%',
+            'input[type="file"]': {
+              cursor:
+                disabled || (filesData?.[0]?.name && !isMulti)
+                  ? 'not-allowed'
+                  : 'pointer',
+              color: 'transparent',
+              width: '100%',
+              height: '100%',
+            },
+          }}
+        >
+          <input
+            title=""
+            data-testid="document-input"
+            disabled={!!(!isMulti && filesData?.[0]?.name) || disabled}
+            type="file"
+            ref={fileInputRef}
+            onChange={(event) => handleFileChange(event, null, null, accept)}
+            onBlur={onTouched}
+            multiple={isMulti}
+            accept={accept.join(',')}
+          />
+        </Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Text
+            variant="body2Medium"
+            color={
+              (!isMulti && filesData?.[0]?.name && 'greyDark') || 'greyXDark'
+            }
+          >
+            {subTitle}
+          </Text>
+          <Box sx={{ maxWidth: '240px' }}>
+            <Text
+              variant="caption"
+              sx={{
+                color: 'greyDark',
+                marginTop: '2px',
+              }}
+            >
+              Format{' '}
+              {(acceptText?.fileFormat && acceptText?.fileFormat?.trim() !== ''
+                ? acceptText.fileFormat
+                : extractExtensions(accept).join(', ')) + ' - '}
+              {(acceptText.maxSize && acceptText.maxSize) || 'Max. 10 Mo'}
+              {acceptText.subText && (
+                <>
+                  <br />
+                  {acceptText.subText}
+                </>
+              )}
+            </Text>
+          </Box>
+        </Box>
+        <Box>
+          <Text
+            variant="body2Medium"
+            color={
+              (!isMulti && filesData?.[0]?.name && 'greyDark') || 'greyXDark'
+            }
+          >
+            {orText}
+          </Text>
+        </Box>
+        <Box>
+          {(enableGoogleDrive && (
+            <>
+              <Button
+                variant="secondary"
+                sx={{
+                  display: 'flex',
+                  '&.MuiButton-secondaryPrimary.Mui-disabled': {
+                    backgroundColor: '#FFFFFF !important',
+                  },
+                }}
+                onClick={handleClick}
+                disabled={!!(!isMulti && filesData?.[0]?.name)}
+                endIcon={<IconProvider icon={faCaretDown} />}
+              >
+                <IconProvider icon={faUpload} size="md" mr={1} />
+                {titleAddButton}
+              </Button>
+              <Menu
+                data-testid="seizure-card-menu"
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'right',
+                }}
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right',
+                }}
+                slotProps={{
+                  paper: {
+                    style: {
+                      marginTop: '8px',
+                      marginLeft: '0',
+                    },
+                  },
+                }}
+              >
+                <MenuItem
+                  testId="pc-add"
+                  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(null, data, token, accept)
+                  }
+                  multiselect={true}
+                  navHidden={false}
+                  googleAuthClientId={googleAuthClientId ?? ''}
+                  googleApiKey={googleApiKey ?? ''}
+                  scopes="https://www.googleapis.com/auth/drive.file"
+                  viewId="FOLDERS"
+                >
+                  <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>
+            </>
+          )) || (
+            <Button
+              variant="secondary"
+              sx={{
+                display: 'flex',
+                '&.MuiButton-secondaryPrimary.Mui-disabled': {
+                  backgroundColor: '#FFFFFF !important',
+                },
+              }}
+              onClick={() => handleFileChange(null, null, null, [], true)}
+              disabled={!!(!isMulti && filesData?.[0]?.name)}
+            >
+              <IconProvider icon={faUpload} size="md" mr={1} />
+              {titleAddButton}
+            </Button>
+          )}
+        </Box>
+      </Box>
+      {(error || helperText || uploadFileError !== false) && (
+        <Box pl={1} pt={1}>
+          <Text
+            variant="caption"
+            color={
+              ((error || uploadFileError !== false) && 'redError') || 'greyDark'
+            }
+            data-testid="helperText"
+          >
+            {uploadFileError !== false
+              ? uploadFileError
+              : (error ?? helperText)}
+          </Text>
+        </Box>
+      )}
+      <Box sx={{ mt: '16px' }}>
+        {(isMulti
+          ? Object.values(filesData ?? [])
+          : Object.values(filesData ?? [])?.slice(0, 1)
+        )?.map((fileData, index) => (
+          <Box
+            key={index}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              border: '0.5px solid',
+              borderColor: error ? 'redError' : 'greyLightDefaultBorder',
+              borderRadius: '0',
+              justifyContent: 'space-between',
+              maxHeight: '50px',
+              p: '16px',
+              mb: '8px',
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                flexShrink: 1,
+                minWidth: 0,
+              }}
+            >
+              <IconProvider
+                icon={faFileAlt}
+                color="greyMediumInactive"
+                size="sm"
+                mr={1}
+              />
+              <Text
+                variant="body2Medium"
+                color="greyXDark"
+                sx={{
+                  overflow: 'hidden',
+                  whiteSpace: 'nowrap',
+                  textAlign: 'left',
+                  textOverflow: 'ellipsis',
+                  flexShrink: 1,
+                }}
+              >
+                {fileData?.name}
+              </Text>
+              {fileData?.size && fileData.size !== 0 ? (
+                <Text
+                  component="span"
+                  variant="body2Regular"
+                  color="greyDark"
+                  sx={{ minWidth: '41px', marginLeft: '8px' }}
+                >
+                  ({fileData?.size} ko)
+                </Text>
+              ) : null}
+            </Box>
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                flexShrink: 0,
+              }}
+            >
+              <IconButton
+                size="medium"
+                color="primary"
+                sx={{
+                  height: '42px',
+                  width: '42px',
+                  mx: 1 / 2,
+                  outline: 'none !important',
+                  borderRadius: '4px',
+                  '&:hover': {
+                    backgroundColor: 'blueHoverOpacity12',
+                  },
+                }}
+                data-testid={`view-btn-${index}`}
+                onClick={() => {
+                  if (fileData?.url) {
+                    window.open(fileData.url, '_blank');
+                  }
+                }}
+              >
+                <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-${index}`}
+                onClick={() => handleDelete(index)}
+              >
+                <IconProvider
+                  icon={faTrash}
+                  color="grey"
+                  size="md"
+                  height="16px"
+                  width="16px"
+                />
+              </IconButton>
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default FileUploader;

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

@@ -0,0 +1,21 @@
+export interface AcceptTextType {
+  fileFormat?: string;
+  maxSize?: string;
+  subText?: string;
+}
+
+export interface FileDataType {
+  name: string;
+  size: number;
+  type: string;
+  url: string;
+  driveFileId?: string;
+  driveAccessToken?: string;
+}
+
+export interface GoogleDriveFile {
+  name: string;
+  sizeBytes: number;
+  mimeType: string;
+  id: string;
+}

package/src/components/UploadDocument/index.ts

@@ -1 +1 @@
-export { default } from './FileUploaderSingle';
+export { default } from './FileUploader';