@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/ui/Confirmation/ConfirmationRender.tsx

@@ -0,0 +1,81 @@
+import type { ReactElement } from 'react';
+import {
+  useCallback,
+  useEffect,
+} from 'react';
+import { DialogContentText } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import type { DialogAction } from '../Dialog/Dialog';
+import type {
+  WithDialogRenderProps,
+  WithDialogRefMethods,
+} from '../../../hoc/withDialog';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+
+export interface ConfirmationProps<TOpenProps = never> extends WithDialogRenderProps<TOpenProps> {
+  readonly confirmLabel: string;
+  readonly cancelLabel?: string;
+  readonly body?: string;
+  readonly onConfirm: (openProps: TOpenProps) => void;
+  readonly onCancel?: (openProps: TOpenProps) => void;
+}
+
+export type ConfirmationRefMethods<TOpenProps = never> = WithDialogRefMethods<ConfirmationProps, TOpenProps>;
+
+export const ConfirmationRender = <TOpenProps,>(
+  {
+    confirmLabel,
+    cancelLabel,
+    body,
+    onConfirm,
+    onCancel,
+    onClose,
+    onActionsChange,
+    openProps,
+  }: ConfirmationProps<TOpenProps>,
+): ReactElement => {
+  const { t } = useTranslation();
+  const onCancelButtonClick = useCallback((): void => {
+    if (onCancel) {
+      onCancel(openProps);
+    }
+    onClose();
+  }, [onCancel, onClose, openProps]);
+
+  const onConfirmButtonClick = useCallback((): void => {
+    onConfirm(openProps);
+    onClose();
+  }, [onConfirm, openProps, onClose]);
+
+  useEffect(() => {
+    const actions: DialogAction[] = [];
+    if (cancelLabel) {
+      actions.push({
+        ...TestIdUtil.createAttributes('Confirmation-cancelButton'),
+        color: 'primary',
+        variant: 'outlined',
+        onClick: onCancelButtonClick,
+        label: cancelLabel ?? t`Cancel`,
+      });
+    }
+    actions.push({
+      ...TestIdUtil.createAttributes('Confirmation-confirmButton'),
+      color: 'secondary',
+      autoFocus: true,
+      onClick: onConfirmButtonClick,
+      variant: 'contained',
+      label: confirmLabel ?? t`OK`,
+    });
+    onActionsChange(actions);
+  }, [cancelLabel, onCancelButtonClick, confirmLabel, onConfirmButtonClick, onActionsChange, onCancel, t]);
+
+  if (!body) {
+    return null;
+  }
+  return (
+    <DialogContentText {...TestIdUtil.createAttributes('Confirmation-textContent')}>
+      {body}
+    </DialogContentText>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './ConfirmationRender';
+export * from './Confirmation';

package/src/components/ui/ConsentDialog/ConsentDialog.tsx

@@ -0,0 +1,57 @@
+import { useTranslation } from 'react-i18next';
+import type { ReactElement } from 'react';
+import { useEffect } from 'react';
+
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+import type {
+  WithDialogRenderProps,
+  WithDialogRefMethods,
+} from '../../../hoc/withDialog';
+import { withDialog } from '../../../hoc/withDialog';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+
+export interface ConsentDialogOpenProps {
+  //
+}
+
+export interface ConsentDialogProps extends WithDialogRenderProps<ConsentDialogOpenProps> {
+  readonly onConsent: () => void;
+}
+
+export type ConsentDialogRefMethods = WithDialogRefMethods<ConsentDialogProps, ConsentDialogOpenProps>;
+
+export const ConsentDialog = withDialog<ConsentDialogProps, ConsentDialogOpenProps>((
+  {
+    onTitleChange,
+    onActionsChange,
+    onConsent,
+  }: ConsentDialogProps,
+): ReactElement => {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    onTitleChange(ConfigManager.instance.config.consentDialog.getTitle(t));
+  }, [onTitleChange, t]);
+
+  useEffect(() => {
+    onActionsChange([
+      {
+        ...TestIdUtil.createAttributes('ConsentDialog-agree'),
+        color: 'secondary',
+        autoFocus: true,
+        onClick: onConsent,
+        variant: 'contained',
+        label: ConfigManager.instance.config.consentDialog.getButtonLabel(t),
+      },
+    ]);
+  }, [onActionsChange, onConsent, t]);
+
+  return ConfigManager.instance.config.consentDialog.Content();
+}, {
+  testId: 'ConsentDialog',
+  maxWidth: 'md',
+  fullWidth: true,
+  defaultTitle: '',
+  noCloseButton: true,
+  disableBackdropClick: true,
+});

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

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

package/src/components/ui/CopyToClipboardButton/CopyToClipboardButton.tsx

@@ -0,0 +1,94 @@
+import type { ButtonOwnProps } from '@mui/material';
+import {
+  Button,
+  IconButton,
+  Tooltip,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import useCleanupCallback from 'use-cleanup-callback';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorIcon from '@mui/icons-material/Error';
+import type { ReactElement } from 'react';
+import { useState } from 'react';
+
+export type CopyToClipboardButtonProps = {
+  readonly clipboardValue?: string;
+  readonly onGetClipboardValue?: () => string;
+  readonly buttonText?: string;
+  readonly buttonVariant?: ButtonOwnProps['variant'];
+  readonly iconOnly?: boolean;
+  readonly buttonProps?: ButtonOwnProps;
+  readonly tooltipSuccessText?: string;
+  readonly baseIcon?: ReactElement;
+};
+
+export const CopyToClipboardButton = ({ clipboardValue, onGetClipboardValue, buttonText, buttonVariant, iconOnly, buttonProps, tooltipSuccessText, baseIcon }: CopyToClipboardButtonProps) => {
+  const { t } = useTranslation();
+  const [copyToClipBoardButtonColor, setCopyToClipBoardButtonColor] = useState<ButtonOwnProps['color']>('primary');
+  const [copyToClipBoardIcon, setCopyToClipBoardIcon] = useState<ReactElement>(baseIcon ?? <ContentCopyIcon />);
+  const [tooltipText, setTooltipText] = useState<string>(buttonText ?? t`Copy to clipboard`);
+
+
+  const onCopyToClipboardButtonClick = useCleanupCallback(() => {
+    let timeoutId: number;
+    const perform = async () => {
+      try {
+        await navigator.clipboard.writeText(clipboardValue ?? onGetClipboardValue());
+        setCopyToClipBoardButtonColor('success');
+        setCopyToClipBoardIcon(
+          <DoneIcon />,
+        );
+        setTooltipText(tooltipSuccessText ?? t`Copied to clipboard`);
+      } catch (_error: unknown) {
+        setCopyToClipBoardButtonColor('error');
+        setCopyToClipBoardIcon(
+          <ErrorIcon />,
+        );
+        setTooltipText(t`Error`);
+      } finally {
+        timeoutId = window.setTimeout(() => {
+          setCopyToClipBoardButtonColor('primary');
+          setCopyToClipBoardIcon(baseIcon ?? <ContentCopyIcon />);
+          setTooltipText(buttonText ?? t`Copy to clipboard`);
+        }, 2000);
+      }
+    };
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    perform();
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [baseIcon, buttonText, clipboardValue, onGetClipboardValue, t, tooltipSuccessText]);
+
+  if (iconOnly) {
+    return (
+      <Tooltip
+        arrow
+        placement={'top'}
+        title={tooltipText}
+      >
+        <IconButton
+          {...buttonProps}
+          color={copyToClipBoardButtonColor}
+          size={'small'}
+          onClick={onCopyToClipboardButtonClick}
+        >
+          {copyToClipBoardIcon}
+        </IconButton>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Button
+      {...buttonProps}
+      color={copyToClipBoardButtonColor}
+      startIcon={copyToClipBoardIcon}
+      variant={buttonVariant ?? 'contained'}
+      onClick={onCopyToClipboardButtonClick}
+    >
+      {buttonText ?? t`Copy to clipboard`}
+    </Button>
+  );
+};

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

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

package/src/components/ui/Dialog/Dialog.tsx

@@ -0,0 +1,196 @@
+import type {
+  DialogProps as MuiDialogProps,
+  TypographyVariant,
+} from '@mui/material';
+import {
+  Box,
+  Dialog as MuiDialog,
+  DialogActions as MuiDialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Button,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import LinkIcon from '@mui/icons-material/Link';
+import isObject from 'lodash/isObject';
+import type {
+  ReactElement,
+  RefObject,
+  PropsWithChildren,
+} from 'react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { CopyToClipboardButton } from '../CopyToClipboardButton';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+
+export type DialogActionButton = Omit<Parameters<typeof Button>[0], 'children'> & {
+  label: string;
+};
+
+export type DialogAction = DialogActionButton | ReactElement;
+
+export type DialogProps = {
+  readonly onClose?: () => void;
+  readonly component?: (props: { onDialogTitleChange?: (title: string) => void }) => ReactElement;
+  readonly title?: string;
+  readonly titleVariant?: TypographyVariant;
+  readonly permalink?: string;
+  readonly actionButtons?: () => ReactElement;
+  readonly actions?: DialogAction[];
+  readonly testId: string;
+  readonly maxWidth?: MuiDialogProps['maxWidth'];
+  readonly fullWidth?: boolean;
+  readonly fullScreen?: boolean;
+  readonly noCloseButton?: boolean;
+  readonly disableBackdropClick?: boolean;
+  readonly noTitle?: boolean;
+  readonly noPadding?: boolean;
+  readonly dialogContentRef?: RefObject<HTMLDivElement>;
+};
+
+const isDialogActionButton = (action: DialogAction): action is DialogActionButton => {
+  return isObject(action) && 'label' in action;
+};
+
+export const Dialog = ({
+  onClose,
+  title,
+  children,
+  actionButtons: ActionButtons,
+  actions,
+  testId,
+  titleVariant = 'h5',
+  permalink,
+  maxWidth = false,
+  fullWidth = false,
+  noCloseButton = false,
+  disableBackdropClick = false,
+  fullScreen = false,
+  noTitle = false,
+  noPadding = false,
+  dialogContentRef,
+}: PropsWithChildren<DialogProps>): ReactElement => {
+  const { t } = useTranslation();
+  const onMuiDialogClose = useCallback((_event: unknown, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (reason === 'backdropClick' && disableBackdropClick) {
+      return;
+    }
+    onClose();
+  }, [disableBackdropClick, onClose]);
+
+  const onGetClipboardValue = useCallback(() => {
+    return permalink;
+  }, [permalink]);
+
+  return (
+    <MuiDialog
+      {...TestIdUtil.createAttributes(testId, { title })}
+      open
+      disableEscapeKeyDown={disableBackdropClick}
+      fullScreen={fullScreen}
+      fullWidth={fullWidth}
+      maxWidth={maxWidth}
+      sx={{
+        '& .MuiDialogContent-root, & .MuiCardContent-root:last-child': {
+          padding: noPadding ? '0' : undefined,
+        },
+      }}
+      onClose={onMuiDialogClose}
+    >
+      {!noTitle && (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+          }}
+        >
+          <DialogTitle
+            {...TestIdUtil.createAttributes(`${testId}-title`)}
+            sx={{
+              pr: 3,
+            }}
+            variant={titleVariant}
+          >
+            {title}
+            {permalink && (
+              <Box
+                className={'genepix-permalink'}
+                sx={{
+                  display: 'inline-block',
+                  marginLeft: 1,
+                }}
+              >
+                <CopyToClipboardButton
+                  iconOnly
+                  baseIcon={<LinkIcon />}
+                  buttonProps={{
+                    sx: {
+                      width: 20,
+                      height: 20,
+                      '& svg': {
+                        fontSize: 20,
+                      },
+                    },
+                  }}
+                  onGetClipboardValue={onGetClipboardValue}
+                />
+              </Box>
+            )}
+          </DialogTitle>
+          {!noCloseButton && (
+            <IconButton
+              {...TestIdUtil.createAttributes(`${testId}-closeButton`)}
+              title={t`Close`}
+              aria-label={t('Close dialog with title {{title}}', { title })}
+              sx={{
+                color: 'grey.500',
+              }}
+              onClick={onClose}
+            >
+              <CloseIcon />
+            </IconButton>
+          )}
+        </Box>
+      )}
+      {!!children && (
+        <DialogContent
+          {...TestIdUtil.createAttributes(`${testId}-content`)}
+          ref={dialogContentRef}
+          dividers={!!ActionButtons}
+          sx={{
+            paddingTop: fullScreen ? 0 : undefined,
+          }}
+        >
+          {children}
+        </DialogContent>
+      )}
+      {actions?.length > 0 && (
+        <MuiDialogActions {...TestIdUtil.createAttributes(`${testId}-actions`)}>
+          <Box
+            sx={{
+              '& > button': {
+                margin: 1,
+              },
+            }}
+          >
+            {actions.map((action) => {
+              if (isDialogActionButton(action)) {
+                return (
+                  <Button
+                    key={action.label}
+                    {...action}
+                  >
+                    {action.label}
+                  </Button>
+                );
+              }
+              return action;
+            })}
+          </Box>
+        </MuiDialogActions>
+      )}
+    </MuiDialog>
+  );
+};

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

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