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

package/src/components/UploadDocument/FileUploaderSingle.tsx

@@ -1,634 +0,0 @@
-import React, {
-  ChangeEvent,
-  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 { acceptText } from './fileuploadersingle.interface';
-
-export interface Props {
-  setFile: (_file: File | null) => void;
-  title?: string;
-  titleTooltip?: string;
-  enableGoogleDrive?: boolean;
-  googleAuthClientId?: string;
-  googleApiKey?: string;
-  error?: boolean;
-  helperText?: string;
-  fileUrl?: string | null;
-  fileName?: string | null;
-  accept?: string[];
-  acceptText?: acceptText;
-  disabledInput?: boolean;
-  children?: JSX.Element | null;
-  titleAddButton?: string;
-  _isDroppingFile?: boolean; // * Only used for storybook
-  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.
- */
-
-const FileUploaderSingle = ({
-  enableGoogleDrive = false,
-  googleAuthClientId,
-  googleApiKey,
-  error = false,
-  helperText = '',
-  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;
-    size: number;
-    type?: string;
-    driveFileId?: string;
-    driveAccessToken?: string;
-  } | null>(fileName ? { name: fileName, size: 0 } : null);
-
-  const [isDroppingFile, setIsDroppingFile] =
-    useState<boolean>(_isDroppingFile);
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleFileChange = useCallback(
-    (
-      _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
-      ) {
-        const file = fileInputRef.current.files[0];
-        setCurrentFile(file);
-        if (validateFile && validateFile(file.size, file.type)) {
-          setIsDroppingFile(false);
-          return;
-        }
-        onFileDataChange?.({
-          name: file.name,
-          size: Math.round(file.size / 1024),
-          type: file.type,
-        });
-        setFileData({
-          name: file.name,
-          size: Math.round(file.size / 1024),
-          type: file.type,
-        });
-        setFile(file);
-        setIsDroppingFile(false);
-      }
-
-      if (token && data && data.docs && data.docs.length > 0) {
-        const googleFile = data.docs[0];
-        const fileData = {
-          name: googleFile.name,
-          size: Math.round(googleFile.sizeBytes / 1024),
-          type: googleFile.mimeType,
-          driveFileId: googleFile.id,
-          driveAccessToken: token,
-        };
-        if (
-          validateFile &&
-          validateFile(googleFile.sizeBytes, googleFile.mimeType)
-        ) {
-          return;
-        }
-        onFileDataChange?.(fileData);
-        setIsDroppingFile(false);
-        setFileData(fileData);
-      }
-    },
-    [
-      setIsDroppingFile,
-      setCurrentFile,
-      setFileData,
-      setFile,
-      accept,
-      onTouched,
-    ],
-  );
-  /**
-   * Resets all states.
-   * Also calls the `removeExistingFile` prop if provided do to some logics if needed.
-   */
-  const handleDelete = useCallback(() => {
-    if (fileName) {
-      removeExistingFile?.();
-    }
-    if (currentFile) {
-      URL.revokeObjectURL(URL.createObjectURL(currentFile));
-      setCurrentFile(null);
-    }
-    setFileData(null);
-    setIsDroppingFile(false);
-    setFile(null);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-    onFileDataChange?.(null);
-  }, [removeExistingFile, setFile, onFileDataChange, currentFile]);
-
-  const dashedColor = useMemo(() => {
-    if (isDroppingFile) return DROPPING_COLOR;
-    if (error) return ERROR_COLOR;
-    return DEFAULT_COLOR;
-  }, [isDroppingFile, error]);
-
-  const bgColor = useMemo(() => {
-    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) return 'redError';
-    return 'greyXDark';
-  }, [fileData?.name, error]);
-
-  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',
-      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;
-    }
-    setFileData({ name: fileName, size: 0 });
-  }, [fileName]);
-
-  useEffect(() => {
-    return () => {
-      if (currentFile) {
-        const fileURL = URL.createObjectURL(currentFile);
-        URL.revokeObjectURL(fileURL);
-      }
-    };
-  }, [currentFile]);
-
-  return (
-    <Box
-      data-testid="Uploader-document"
-      sx={{
-        pb: 3,
-      }}
-      onDragLeave={() => setIsDroppingFile(false)}
-    >
-      <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={{
-          display: (fileData?.name && '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={!!fileData?.name || disabledInput}
-              type="file"
-              ref={fileInputRef}
-              onChange={handleFileChange}
-              onBlur={onTouched}
-              accept={accept.join(', ')}
-            />
-          </Box>
-          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Text
-              variant="body2Medium"
-              color={(fileData?.name && 'greyDark') || 'greyXDark'}
-            >
-              Déposer un fichier ici
-            </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={(fileData?.name && 'greyDark') || 'greyXDark'}
-            >
-              ou
-            </Text>
-          </Box>
-          <Box>
-            {(enableGoogleDrive && (
-              <>
-                <Button
-                  variant="secondary"
-                  sx={{
-                    display: 'flex',
-                    '&.MuiButton-secondaryPrimary.Mui-disabled': {
-                      backgroundColor: '#FFFFFF !important',
-                    },
-                  }}
-                  onClick={handleClick}
-                  disabled={!!fileData?.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)
-                    }
-                    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={!!fileData?.name}
-              >
-                <IconProvider icon={faUpload} size="md" mr={1} />
-                {titleAddButton}
-              </Button>
-            )}
-          </Box>
-        </Box>
-      </Tooltip>
-      {(error || helperText) && (
-        <Box pl={1} pt={1}>
-          <Text
-            variant="caption"
-            color={(error && 'redError') || 'greyDark'}
-            data-testid="helperText"
-          >
-            {helperText}
-          </Text>
-        </Box>
-      )}
-
-      {fileData?.name && (
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            border: '0.5px solid',
-            borderColor: error ? 'redError' : 'greyLightDefaultBorder',
-            borderRadius: '0',
-            justifyContent: 'space-between',
-            maxHeight: '50px',
-          }}
-          mt={2}
-          p={2}
-        >
-          <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="show_btn"
-              onClick={() => {
-                if (fileData?.driveFileId) {
-                  window.open(
-                    `https://drive.google.com/file/d/${fileData.driveFileId}/view?usp=drive_we`,
-                    '_blank',
-                  );
-                } else if (currentFile) {
-                  const currentFileURL = URL.createObjectURL(currentFile);
-                  window.open(currentFileURL);
-                } 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 FileUploaderSingle;

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

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