@gen-epix/ui 1.15.0 → 1.15.2

package/src/components/ui/FileSelector/FileSelector.tsx

@@ -1,358 +0,0 @@
-import {
-  Typography,
-  Box,
-  Chip,
-  Stack,
-  IconButton,
-} from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
-import type {
-  ChangeEvent,
-  DragEvent,
-  KeyboardEvent as ReactKeyboardEvent,
-} from 'react';
-import {
-  useCallback,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
-import { useTranslation } from 'react-i18next';
-import { format } from 'date-fns';
-
-import { FileUtil } from '../../../utils/FileUtil';
-import { DATE_FORMAT } from '../../../data/date';
-
-
-export type FileSelectorProps = {
-  readonly accept: string;
-  readonly onDataTransferChange: (dataTransfer: DataTransfer) => void;
-  readonly numFilesAllowed?: number;
-  readonly initialDataTransfer?: DataTransfer;
-};
-
-export const FileSelector = ({
-  accept,
-  onDataTransferChange,
-  numFilesAllowed = 1,
-  initialDataTransfer: initialDataTransferProp,
-}: FileSelectorProps) => {
-  const { t } = useTranslation();
-  const hoverLabel = numFilesAllowed === 1
-    ? t('Click or drag to upload file ({{accept}})', { accept: accept.split(',').join(', ') })
-    : t('Click or drag to upload files  ({{accept}})', { accept: accept.split(',').join(', ') });
-  const dropLabel = numFilesAllowed === 1
-    ? t`Drop file here`
-    : t`Drop files here`;
-
-  const inputId = useId();
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const initialDataTransfer = useMemo(() => {
-    return initialDataTransferProp ?? new DataTransfer();
-  }, [initialDataTransferProp]);
-
-  const [dataTransfer, setDataTransfer] = useState<DataTransfer>(initialDataTransfer);
-  const [labelText, setLabelText] = useState<string>(hoverLabel);
-  const [errorText, setErrorText] = useState<string>(null);
-  const [isDragOver, setIsDragOver] = useState<boolean>(false);
-
-  const stopDefaults = useCallback((e: DragEvent) => {
-    e.stopPropagation();
-    e.preventDefault();
-  }, []);
-
-  const onLabelDragEnter = useCallback((event: DragEvent) => {
-    setErrorText(null);
-    stopDefaults(event);
-    setIsDragOver(true);
-    setLabelText(dropLabel);
-  }, [stopDefaults, dropLabel]);
-
-  const onLabelDragLeave = useCallback((event: DragEvent) => {
-    stopDefaults(event);
-    setIsDragOver(false);
-    setLabelText(hoverLabel);
-  }, [stopDefaults, hoverLabel]);
-
-  const onLabelDragOver = useCallback((event: DragEvent) => {
-    stopDefaults(event);
-  }, [stopDefaults]);
-
-  const areFileTypesValid = useCallback((fileList: FileList) => {
-    for (const file of fileList) {
-      const isValid = accept.split(',').some(type => {
-        const trimmedType = type.trim();
-        return (
-          trimmedType === file.type ||
-          (trimmedType.startsWith('.') && file.name.endsWith(trimmedType))
-        );
-      });
-      if (!isValid) {
-        return false;
-      }
-    }
-    return true;
-  }, [accept]);
-
-  const removeFile = useCallback((fileName: string) => {
-    setErrorText(null);
-    setDataTransfer((oldDataTransfer) => {
-      const newDataTransfer = new DataTransfer();
-      Array.from(oldDataTransfer.files)
-        .filter(f => f.name !== fileName)
-        .forEach(f => newDataTransfer.items.add(f));
-      onDataTransferChange(newDataTransfer);
-      return newDataTransfer;
-    });
-  }, [onDataTransferChange]);
-
-  const addFileList = useCallback((fileList: FileList) => {
-    setErrorText(null);
-    setDataTransfer((oldDataTransfer) => {
-      if (!fileList || fileList.length === 0) {
-        return oldDataTransfer;
-      }
-      if (!areFileTypesValid(fileList)) {
-        setErrorText(t('Invalid file type. Accepted types: {{accept}}', { accept }));
-        return oldDataTransfer;
-      }
-
-      const fileNamesToAppend = Array.from(fileList).map(f => f.name);
-      const uniqueOldFileNames = new Set(Array.from(oldDataTransfer.files).map(f => f.name));
-      const numDuplicates = fileNamesToAppend.filter(name => uniqueOldFileNames.has(name)).length;
-      const numNewFileNames = uniqueOldFileNames.size + (fileNamesToAppend.length - numDuplicates);
-
-      if (numNewFileNames > numFilesAllowed) {
-        setErrorText(t('Too many files selected. Maximum allowed: {{numFilesAllowed}}', { numFilesAllowed }));
-        return oldDataTransfer;
-      }
-
-      const newDataTransfer = new DataTransfer();
-      Array.from(oldDataTransfer.files).forEach(file => {
-        if (!fileNamesToAppend.includes(file.name)) {
-          newDataTransfer.items.add(file);
-        }
-      });
-      Array.from(fileList).forEach(file => {
-        newDataTransfer.items.add(file);
-      });
-
-      onDataTransferChange(newDataTransfer);
-      return newDataTransfer;
-
-    });
-  }, [accept, areFileTypesValid, numFilesAllowed, onDataTransferChange, t]);
-
-  const onDrop = useCallback((event: DragEvent<HTMLElement>) => {
-    stopDefaults(event);
-    setLabelText(hoverLabel);
-    setIsDragOver(false);
-
-    const fileList = event.dataTransfer.files;
-    addFileList(fileList);
-
-  }, [stopDefaults, hoverLabel, addFileList]);
-
-  const onLabelKeyDown = useCallback((event: ReactKeyboardEvent<HTMLElement>) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      inputRef.current?.click();
-    }
-  }, []);
-
-  const onFileInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    addFileList(event.target.files);
-  }, [addFileList]);
-
-  const onClearAllButtonClick = useCallback(() => {
-    setErrorText(null);
-    setDataTransfer(new DataTransfer());
-    onDataTransferChange(new DataTransfer());
-  }, [onDataTransferChange]);
-
-  return (
-    <>
-      <Box
-        ref={inputRef}
-        accept={accept}
-        component={'input'}
-        id={inputId}
-        multiple={numFilesAllowed > 1}
-        sx={{
-          display: 'none',
-        }}
-        type={'file'}
-        onChange={onFileInputChange}
-      />
-      <Box
-        sx={{
-          height: '100%',
-          display: 'grid',
-          gridTemplateRows: 'auto fit-content(50%)',
-        }}
-      >
-        <Box
-          component={'label'}
-          htmlFor={inputId}
-          sx={{
-            width: '100%',
-            height: '100%',
-            position: 'relative',
-            cursor: 'pointer',
-            textAlign: 'center',
-            display: 'flex',
-            '& p, & svg': {
-              opacity: isDragOver ? 1 : 0.4,
-            },
-            '&:hover *': {
-              opacity: 1,
-            },
-          }}
-          tabIndex={0}
-          onKeyDown={onLabelKeyDown}
-          onDragEnter={onLabelDragEnter}
-          onDragLeave={onLabelDragLeave}
-          onDragOver={onLabelDragOver}
-          onDrop={onDrop}
-        >
-          <Box
-            sx={{
-              width: '100%',
-              height: '100%',
-              position: 'relative',
-              pointerEvents: 'none',
-            }}
-          >
-            <Box
-              sx={{
-                width: '100%',
-                height: '100%',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                alignItems: 'center',
-                position: 'absolute',
-              }}
-            >
-              <CloudUploadIcon
-                color={'primary'}
-                fontSize={'large'}
-              />
-              {errorText && (
-                <Typography
-                  sx={{
-                    color: 'error.main',
-                    fontWeight: 'bold',
-                  }}
-                >
-                  {errorText}
-                </Typography>
-              )}
-              <Typography>
-                {labelText}
-              </Typography>
-
-            </Box>
-          </Box>
-        </Box>
-        <Box
-          sx={{
-            overflow: 'auto',
-            position: 'relative',
-          }}
-        >
-          <Box>
-            {dataTransfer.files.length > 0 && (
-              <>
-                <Box
-                  sx={{
-                    position: 'sticky',
-                    top: 0,
-                    paddingY: 1,
-                    backgroundColor: (theme) => theme.palette.background.paper,
-                    zIndex: (theme) => theme.zIndex.tooltip - 1,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                  }}
-                >
-                  <Typography
-                    variant={'h5'}
-                  >
-                    {t('Selected files: {{numFiles}}', { numFiles: dataTransfer.files.length })}
-                  </Typography>
-                  <IconButton
-                    aria-label={t('Clear all selected files')}
-                    size={'small'}
-                    onClick={onClearAllButtonClick}
-                  >
-                    <DeleteIcon fontSize={'small'} />
-                  </IconButton>
-                </Box>
-                <Stack
-                  direction={'row'}
-                  sx={{
-                    flexWrap: 'wrap',
-                  }}
-                >
-                  {Array.from(dataTransfer.files).map(file => (
-                    <Chip
-                      key={`${file.name}-${file.size}-${file.lastModified}`}
-                      icon={<InsertDriveFileIcon />}
-                      sx={{
-                        margin: 0.25,
-                      }}
-                      tabIndex={-1}
-                      variant={'outlined'}
-                      label={
-                        (
-                          <>
-                            <Box
-                              component={'span'}
-                              sx={{ fontWeight: 'bold' }}
-                            >
-                              {file.name}
-                            </Box>
-                            <Box component={'span'}>
-                              {' '}
-                              {t('(size: {{size}})', { size: FileUtil.getReadableFileSize(file.size) })}
-                              {' '}
-                              {t('(last modified: {{lastModified}})', { lastModified: format(new Date(file.lastModified), DATE_FORMAT.DATE_TIME) })}
-                            </Box>
-                          </>
-                        )
-                      }
-                      deleteIcon={(
-                        <DeleteIcon
-                          focusable
-                          aria-hidden={false}
-                          aria-label={t('Clear {{fileName}}', { fileName: file.name })}
-                          tabIndex={0}
-                          // eslint-disable-next-line react/jsx-no-bind
-                          onKeyDown={(event) => {
-                            if (event.key === 'Enter' || event.key === ' ') {
-                              event.preventDefault();
-                              removeFile(file.name);
-                            }
-                          }}
-                        />
-                      )}
-                      // eslint-disable-next-line react/jsx-no-bind
-                      onDelete={() => {
-                        removeFile(file.name);
-                      }}
-                    />
-                  ))}
-                </Stack>
-              </>
-            )}
-          </Box>
-        </Box>
-      </Box>
-    </>
-  );
-};

package/src/components/ui/FileSelector/index.ts

@@ -1 +0,0 @@
-export * from './FileSelector';

package/src/components/ui/GenericErrorMessage/GenericErrorMessage.tsx

@@ -1,168 +0,0 @@
-import {
-  Box,
-  Button,
-  Typography,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-} from 'react';
-import { isRouteErrorResponse } from 'react-router-dom';
-import { isAxiosError } from 'axios';
-
-import { LogLevel } from '../../../api';
-import { AxiosUtil } from '../../../utils/AxiosUtil';
-import { AuthenticationManager } from '../../../classes/managers/AuthenticationManager';
-import { ConfigManager } from '../../../classes/managers/ConfigManager';
-import { LogManager } from '../../../classes/managers/LogManager';
-import { PageEventBusManager } from '../../../classes/managers/PageEventBusManager';
-import { RouterManager } from '../../../classes/managers/RouterManager';
-
-export type GenericErrorMessageProps = {
-  readonly error?: unknown;
-  readonly shouldHideActionButtons?: boolean;
-};
-
-export const GenericErrorMessage = ({ error, shouldHideActionButtons }: GenericErrorMessageProps) => {
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    if (!error || isAxiosError(error)) {
-      // Axios errors are logged in LogManager already
-      return;
-    }
-    LogManager.instance.log([{
-      detail: {
-        error,
-        stack: (error as Error)?.stack,
-      },
-      level: isAxiosError(error) ? LogLevel.DEBUG : LogLevel.ERROR,
-      topic: (error as Error)?.message ? `Error: ${(error as Error)?.message}` : 'Error',
-    }]);
-    LogManager.instance.flushLog();
-    if (error instanceof Error && ConfigManager.instance.config.enablePageEvents) {
-      PageEventBusManager.instance.emit('error', error);
-    }
-  }, [error]);
-
-  const onBackToHomePageButtonClick = useCallback(async () => {
-    await RouterManager.instance.router.navigate({
-      pathname: '/',
-    });
-  }, []);
-
-  const onBackButtonClick = useCallback(async () => {
-    await RouterManager.instance.router.navigate(-1);
-  }, []);
-
-  const onLogoutButtonClick = useCallback(async () => {
-    AuthenticationManager.clearStaleState();
-    if (AuthenticationManager.instance.authContextProps) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      AuthenticationManager.instance.authContextProps.signoutRedirect();
-    } else {
-      await RouterManager.instance.router.navigate({
-        pathname: '/',
-      });
-    }
-  }, []);
-
-  const title = useMemo(() => {
-    if (isRouteErrorResponse(error) || AxiosUtil.isAxiosNotFoundError(error)) {
-      return t`Not found.`;
-    }
-    if (AxiosUtil.isAxiosForbiddenError(error)) {
-      return t`Access denied.`;
-    }
-    if (AxiosUtil.isAxiosUnprocessableEntityError(error)) {
-      return t`Unprocessable Entity.`;
-    }
-    return t`Sorry, an unexpected error has occurred.`;
-  }, [error, t]);
-
-  const message = useMemo(() => {
-    if (isRouteErrorResponse(error) || AxiosUtil.isAxiosNotFoundError(error)) {
-      return t`The item you requested can not be found. It may have been moved or deleted.`;
-    }
-    if (AxiosUtil.isAxiosForbiddenError(error)) {
-      return t`You are not authorized to access this page or item.`;
-    }
-    if (AxiosUtil.isAxiosUnauthorizedError(error)) {
-      return t`You are not authorized to access this page or item. Please logout and login again.`;
-    }
-    if (AxiosUtil.isAxiosUnprocessableEntityError(error)) {
-      return t`We were unable to process this page or item.`;
-    }
-    return t('We have encountered a problem. The error has been automatically logged. One of our staff will look into it shortly. Error message: {{message}}', { message: (error as Error)?.message ?? t`Unknown` });
-  }, [error, t]);
-
-  const shouldShowStackTrace = useMemo(() => {
-    return !isAxiosError(error) && (error as Error)?.stack;
-  }, [error]);
-
-  return (
-    <Box>
-      <Box paddingY={1}>
-        <Typography
-          variant={'h1'}
-        >
-          {title}
-        </Typography>
-      </Box>
-      <Box paddingY={1}>
-        <Typography
-          variant={'body2'}
-        >
-          {message}
-        </Typography>
-      </Box>
-      {shouldShowStackTrace && (
-        <Box paddingY={1}>
-          <Typography variant={'h6'}>
-            {t`Details for our technicians`}
-          </Typography>
-          <Box
-            component={'pre'}
-            sx={{
-              fontSize: '0.8rem',
-            }}
-          >
-            {(error as Error)?.stack}
-          </Box>
-        </Box>
-      )}
-      {!shouldHideActionButtons && (
-        <Box
-          paddingY={1}
-          sx={{
-            display: 'flex',
-            gap: 1,
-          }}
-        >
-          <Button
-            color={'primary'}
-            variant={'outlined'}
-            onClick={onLogoutButtonClick}
-          >
-            {t`Logout`}
-          </Button>
-          <Button
-            color={'primary'}
-            variant={'outlined'}
-            onClick={onBackToHomePageButtonClick}
-          >
-            {t`Go back to homepage`}
-          </Button>
-          <Button
-            color={'secondary'}
-            onClick={onBackButtonClick}
-          >
-            {t`Go back`}
-          </Button>
-        </Box>
-      )}
-    </Box>
-  );
-};

package/src/components/ui/GenericErrorMessage/index.ts

@@ -1 +0,0 @@
-export * from './GenericErrorMessage';

package/src/components/ui/HomePageTrends/HomePageTrendCard.tsx

@@ -1,132 +0,0 @@
-import {
-  Card,
-  CardContent,
-  Typography,
-  Box,
-  darken,
-  useTheme,
-  Button,
-  CardActions,
-} from '@mui/material';
-import { t } from 'i18next';
-import { useCallback } from 'react';
-
-import { TestIdUtil } from '../../../utils/TestIdUtil';
-
-export type HomagePageTrendCardProps = {
-  readonly header: string;
-  readonly value: number;
-  readonly diffPercentage: number;
-  readonly sinceLabel: string;
-  readonly callback?: () => void;
-  readonly callbackLabel?: string;
-};
-
-export const HomePageTrendCard = ({ header, value, diffPercentage, sinceLabel, callback, callbackLabel }: HomagePageTrendCardProps) => {
-  const theme = useTheme();
-
-  const onCallbackButtonClick = useCallback(() => {
-    callback();
-  }, [callback]);
-
-  return (
-    <Card
-      {...TestIdUtil.createAttributes('HomePageTrendCard', { header })}
-      elevation={1}
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-      }}
-    >
-      <CardContent
-        sx={{
-          paddingBottom: 0,
-        }}
-      >
-        <Typography
-          component={'h3'}
-          sx={{
-            fontSize: '1rem',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            display: 'block',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {header}
-        </Typography>
-        <Typography
-          {...TestIdUtil.createAttributes('HomePageTrendCard-value')}
-          sx={{ fontSize: '1.8rem' }}
-        >
-          {value.toLocaleString()}
-        </Typography>
-      </CardContent>
-      {callback && callbackLabel && (
-        <CardActions
-          sx={{
-            justifyContent: 'flex-end',
-          }}
-        >
-          <Button
-            {...TestIdUtil.createAttributes('HomePageTrendCard-button')}
-            size={'small'}
-            variant={'outlined'}
-            onClick={onCallbackButtonClick}
-          >
-            {callbackLabel}
-          </Button>
-        </CardActions>
-      )}
-      <Box
-        padding={1}
-        sx={{
-          background: theme.palette.grey['100'],
-          justifyContent: 'flex-end',
-        }}
-      >
-        <Box marginX={1}>
-          {diffPercentage === 0 && (
-            <Typography>
-              <Box
-                {...TestIdUtil.createAttributes('HomePageTrendCard-diffPercentage-label')}
-                component={'span'}
-                sx={{
-                  color: theme.palette.text.secondary,
-                  fontWeight: 'bold',
-                }}
-              >
-                {t('No change')}
-              </Box>
-            </Typography>
-          )}
-          {diffPercentage !== 0 && (
-            <Typography>
-              <Box
-                {...TestIdUtil.createAttributes('HomePageTrendCard-diffPercentage')}
-                component={'span'}
-                sx={{
-                  color: diffPercentage > 0 ? darken(theme.palette.success.main, 0.4) : theme.palette.error.main,
-                  fontWeight: 'bold',
-                }}
-              >
-                {diffPercentage > 0 ? '+' : ''}
-                {diffPercentage.toLocaleString()}
-                {'%'}
-
-              </Box>
-              <Box
-                {...TestIdUtil.createAttributes('HomePageTrendCard-diffPercentage-label')}
-                component={'span'}
-              >
-                {' '}
-                {sinceLabel}
-              </Box>
-            </Typography>
-          )}
-        </Box>
-      </Box>
-    </Card>
-  );
-};