@digitaldefiance/express-suite-react-components 5.0.2 → 5.0.4

package/src/components/BackupCodesForm.tsx

@@ -1,287 +0,0 @@
-import {
-  Constants,
-  SuiteCoreComponentId,
-  SuiteCoreStringKey,
-  SuiteCoreStringKeyValue,
-} from '@digitaldefiance/suite-core-lib';
-import {
-  Alert,
-  Box,
-  Button,
-  Container,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { useFormik } from 'formik';
-import { FC, useState } from 'react';
-import * as Yup from 'yup';
-import { useI18n } from '../contexts';
-
-export interface BackupCodesFormValues {
-  password?: string;
-  mnemonic?: string;
-}
-
-export interface BackupCodesFormProps {
-  onSubmit: (values: BackupCodesFormValues) => Promise<{
-    message: string;
-    backupCodes: string[];
-  }>;
-  backupCodesRemaining?: number | null;
-  mnemonicValidation?: Yup.StringSchema;
-  passwordValidation?: Yup.StringSchema;
-  labels?: {
-    title?: string;
-    codesRemaining?: string;
-    mnemonic?: string;
-    password?: string;
-    generateButton?: string;
-    successTitle?: string;
-  };
-}
-
-export const BackupCodesForm: FC<BackupCodesFormProps> = ({
-  onSubmit,
-  backupCodesRemaining = null,
-  mnemonicValidation,
-  passwordValidation,
-  labels = {},
-}) => {
-  const { tComponent } = useI18n();
-  const [apiError, setApiError] = useState<string | null>(null);
-  const [apiSuccess, setApiSuccess] = useState<string | null>(null);
-  const [backupCodes, setBackupCodes] = useState<string[] | null>(null);
-
-  const validation = {
-    mnemonic:
-      mnemonicValidation ||
-      Yup.string()
-        .trim()
-        .matches(
-          Constants.MnemonicRegex,
-          tComponent<SuiteCoreStringKeyValue>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_MnemonicRegex
-          )
-        )
-        .optional(),
-    password:
-      passwordValidation ||
-      Yup.string()
-        .trim()
-        .matches(
-          Constants.PasswordRegex,
-          tComponent<SuiteCoreStringKeyValue>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate
-          )
-        )
-        .optional(),
-  };
-
-  const translatedLabels = {
-    codesRemaining:
-      labels.codesRemaining ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.BackupCodeRecovery_CodesRemainingTemplate
-      ),
-    mnemonic:
-      labels.mnemonic ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_Mnemonic
-      ),
-    password:
-      labels.password ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_Password
-      ),
-    generateButton:
-      labels.generateButton ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes
-      ),
-    successTitle:
-      labels.successTitle ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.BackupCodeRecovery_YourNewCodes
-      ),
-    xorError: tComponent<SuiteCoreStringKeyValue>(
-      SuiteCoreComponentId,
-      SuiteCoreStringKey.Validation_MnemonicOrPasswordRequired
-    ),
-    unexpectedError: tComponent<SuiteCoreStringKeyValue>(
-      SuiteCoreComponentId,
-      SuiteCoreStringKey.Common_UnexpectedError
-    ),
-  };
-
-  const validationSchema = Yup.object({
-    mnemonic: validation.mnemonic,
-    password: validation.password,
-  })
-    .test(
-      'xor-mnemonic-password-mnemonic',
-      translatedLabels.xorError,
-      function (value) {
-        const mnemonic = value?.mnemonic?.trim() ?? '';
-        const password = value?.password?.trim() ?? '';
-        const hasMnemonic = mnemonic.length > 0;
-        const hasPassword = password.length > 0;
-
-        if (!hasMnemonic && !hasPassword) {
-          return this.createError({
-            path: 'mnemonic',
-            message: translatedLabels.xorError,
-          });
-        }
-        if (hasMnemonic && hasPassword) {
-          return this.createError({
-            path: 'mnemonic',
-            message: translatedLabels.xorError,
-          });
-        }
-        return true;
-      }
-    )
-    .test(
-      'xor-mnemonic-password-password',
-      translatedLabels.xorError,
-      function (value) {
-        const mnemonic = value?.mnemonic?.trim() ?? '';
-        const password = value?.password?.trim() ?? '';
-        const hasMnemonic = mnemonic.length > 0;
-        const hasPassword = password.length > 0;
-
-        if (!hasMnemonic && !hasPassword) {
-          return this.createError({
-            path: 'password',
-            message: translatedLabels.xorError,
-          });
-        }
-        if (hasMnemonic && hasPassword) {
-          return this.createError({
-            path: 'password',
-            message: translatedLabels.xorError,
-          });
-        }
-        return true;
-      }
-    );
-
-  const formik = useFormik<BackupCodesFormValues>({
-    initialValues: {
-      password: '',
-      mnemonic: '',
-    },
-    validationSchema,
-    onSubmit: async (values, { setSubmitting }) => {
-      try {
-        const result = await onSubmit(values);
-        if (result && result.backupCodes) {
-          setApiSuccess(translatedLabels.successTitle);
-          setBackupCodes(result.backupCodes);
-        }
-        if (result && result.message) {
-          setApiSuccess(result.message);
-        }
-        setApiError(null);
-      } catch (e: unknown) {
-        setApiSuccess(null);
-        const error = e as { response?: { data?: { message?: string } } };
-        setApiError(
-          error.response?.data?.message ?? translatedLabels.unexpectedError
-        );
-      } finally {
-        setSubmitting(false);
-      }
-    },
-  });
-
-  return (
-    <Container component="main" maxWidth="xs">
-      <Box>
-        <Typography component="h1" variant="h5">
-          {translatedLabels.codesRemaining.replace(
-            '{count}',
-            String(backupCodesRemaining ?? 0)
-          )}
-        </Typography>
-      </Box>
-      <Box
-        component="form"
-        onSubmit={formik.handleSubmit}
-        sx={{ mt: 1, width: '100%' }}
-      >
-        <TextField
-          margin="normal"
-          fullWidth
-          id="mnemonic"
-          label={translatedLabels.mnemonic}
-          type="password"
-          name="mnemonic"
-          autoComplete="mnemonic"
-          autoFocus
-          value={formik.values.mnemonic}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          error={
-            (formik.touched.mnemonic || formik.submitCount > 0) &&
-            Boolean(formik.errors.mnemonic)
-          }
-          helperText={
-            (formik.touched.mnemonic || formik.submitCount > 0) &&
-            formik.errors.mnemonic
-          }
-        />
-        <TextField
-          margin="normal"
-          fullWidth
-          name="password"
-          label={translatedLabels.password}
-          type="password"
-          id="password"
-          value={formik.values.password}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          error={
-            (formik.touched.password || formik.submitCount > 0) &&
-            Boolean(formik.errors.password)
-          }
-          helperText={
-            (formik.touched.password || formik.submitCount > 0) &&
-            formik.errors.password
-          }
-        />
-        <Button type="submit" fullWidth variant="contained" sx={{ mt: 2 }}>
-          {translatedLabels.generateButton}
-        </Button>
-      </Box>
-      {apiError && (
-        <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
-          {apiError}
-        </Alert>
-      )}
-      {backupCodes && apiSuccess && (
-        <Box sx={{ mt: 2, mb: 2 }}>
-          <Typography component="h2" variant="h6">
-            {apiSuccess}
-          </Typography>
-          <ul>
-            {backupCodes.map((code, index) => (
-              <li key={index}>
-                <pre>{code}</pre>
-              </li>
-            ))}
-          </ul>
-        </Box>
-      )}
-    </Container>
-  );
-};
-
-export default BackupCodesForm;

package/src/components/CategoryMenu.tsx

@@ -1,155 +0,0 @@
-import {
-  Box,
-  Fade,
-  IconButton,
-  Popover,
-  Tooltip,
-  Typography,
-} from '@mui/material';
-import {
-  FC,
-  MouseEvent,
-  ReactElement,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
-import { ICategoryConfig } from '../interfaces/ICategoryConfig';
-import { IMenuConfig } from '../interfaces/IMenuConfig';
-import { DropdownMenu } from './DropdownMenu';
-
-export interface CategoryMenuProps {
-  category: ICategoryConfig;
-  menus: IMenuConfig[];
-}
-
-/**
- * Renders an AppBar icon button that opens a popover containing a grid of
- * icon tiles. Each tile is a {@link DropdownMenu} for one of the supplied
- * `menus`, preserving its existing sub-menu behaviour. Use this together with
- * `IMenuConfig.category` to collapse many top-bar icons into a small number
- * of category containers (a "mega-menu" pattern).
- */
-export const CategoryMenu: FC<CategoryMenuProps> = ({ category, menus }) => {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-
-  const handleOpen = useCallback((event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  }, []);
-
-  const handleClose = useCallback(() => {
-    setAnchorEl(null);
-  }, []);
-
-  const columns = category.columns ?? 3;
-  const showLabels = category.showLabels ?? true;
-  const showHeader = category.showHeader ?? false;
-  const hideWhenEmpty = category.hideWhenEmpty ?? true;
-
-  const visibleMenus = useMemo(
-    () => menus.filter((m) => !m.isUserMenu),
-    [menus]
-  );
-
-  if (visibleMenus.length === 0 && hideWhenEmpty) {
-    return null;
-  }
-
-  const trigger = (
-    <IconButton
-      color="inherit"
-      onClick={handleOpen}
-      aria-label={category.label ?? category.id}
-      aria-haspopup="true"
-      aria-expanded={Boolean(anchorEl) || undefined}
-    >
-      {category.icon}
-    </IconButton>
-  );
-
-  return (
-    <Box>
-      {category.label ? (
-        <Tooltip title={category.label}>{trigger}</Tooltip>
-      ) : (
-        trigger
-      )}
-      <Popover
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-        TransitionComponent={Fade}
-      >
-        <Box sx={{ p: 1.5, minWidth: 64 * columns + 24 }}>
-          {showHeader && (category.header || category.label) && (
-            <Typography
-              variant="overline"
-              sx={{
-                display: 'block',
-                px: 1,
-                pb: 1,
-                color: 'text.secondary',
-                lineHeight: 1.2,
-              }}
-            >
-              {category.header ?? category.label}
-            </Typography>
-          )}
-          <Box
-            sx={{
-              display: 'grid',
-              gridTemplateColumns: `repeat(${columns}, minmax(72px, 1fr))`,
-              gap: 1,
-            }}
-          >
-            {visibleMenus.map((menu, index) => {
-              const tileLabel = menu.label ?? String(menu.menuType);
-              return (
-                <Box
-                  key={`${category.id}-tile-${menu.menuType}-${index}`}
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'flex-start',
-                    px: 0.5,
-                    py: 0.5,
-                    borderRadius: 1,
-                    '&:hover': {
-                      backgroundColor: 'action.hover',
-                    },
-                  }}
-                >
-                  <DropdownMenu
-                    menuType={menu.menuType}
-                    menuIcon={menu.menuIcon as ReactElement}
-                    action={menu.action}
-                    hideWhenEmpty={menu.hideWhenEmpty}
-                  />
-                  {showLabels && (
-                    <Typography
-                      variant="caption"
-                      sx={{
-                        mt: -0.5,
-                        textAlign: 'center',
-                        lineHeight: 1.1,
-                        color: 'text.primary',
-                        userSelect: 'none',
-                      }}
-                    >
-                      {tileLabel}
-                    </Typography>
-                  )}
-                </Box>
-              );
-            })}
-          </Box>
-        </Box>
-      </Popover>
-    </Box>
-  );
-};
-
-export default CategoryMenu;

package/src/components/ChangePasswordForm.tsx

@@ -1,273 +0,0 @@
-import {
-  Constants,
-  SuiteCoreComponentId,
-  SuiteCoreStringKey,
-  SuiteCoreStringKeyValue,
-} from '@digitaldefiance/suite-core-lib';
-import {
-  Alert,
-  Box,
-  Button,
-  Container,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { useFormik } from 'formik';
-import { FC, useState } from 'react';
-import * as Yup from 'yup';
-import { useI18n } from '../contexts';
-
-export interface ChangePasswordFormValues {
-  currentPassword: string;
-  newPassword: string;
-  confirmPassword: string;
-}
-
-export interface ChangePasswordFormProps {
-  onSubmit: (
-    values: ChangePasswordFormValues
-  ) => Promise<{ success?: boolean; error?: string }>;
-  titleText?: string;
-  currentPasswordLabel?: string;
-  newPasswordLabel?: string;
-  confirmPasswordLabel?: string;
-  submitButtonText?: string;
-  submittingButtonText?: string;
-  successMessage?: string;
-  currentPasswordValidation?: Yup.StringSchema;
-  newPasswordValidation?: Yup.StringSchema;
-  confirmPasswordValidation?: Yup.StringSchema;
-}
-
-export const ChangePasswordForm: FC<ChangePasswordFormProps> = ({
-  onSubmit,
-  titleText,
-  currentPasswordLabel,
-  newPasswordLabel,
-  confirmPasswordLabel,
-  submitButtonText,
-  submittingButtonText,
-  successMessage,
-  currentPasswordValidation,
-  newPasswordValidation,
-  confirmPasswordValidation,
-}) => {
-  const { tComponent } = useI18n();
-  const [success, setSuccess] = useState(false);
-  const [apiError, setApiError] = useState<string>('');
-
-  const validation = {
-    currentPassword:
-      currentPasswordValidation ||
-      Yup.string().required(
-        tComponent<SuiteCoreStringKeyValue>(
-          SuiteCoreComponentId,
-          SuiteCoreStringKey.Validation_Required
-        )
-      ),
-    newPassword:
-      newPasswordValidation ||
-      Yup.string()
-        .min(
-          Constants.PasswordMinLength,
-          tComponent<SuiteCoreStringKeyValue>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_PasswordMinLengthTemplate
-          )
-        )
-        .required(
-          tComponent<SuiteCoreStringKeyValue>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_Required
-          )
-        ),
-    confirmPassword:
-      confirmPasswordValidation ||
-      Yup.string()
-        .oneOf(
-          [Yup.ref('newPassword')],
-          tComponent<SuiteCoreStringKeyValue>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_PasswordMatch
-          )
-        )
-        .required(
-          tComponent<SuiteCoreStringKeyValue>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_Required
-          )
-        ),
-  };
-
-  const labels = {
-    title:
-      titleText ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_ChangePassword
-      ),
-    currentPassword:
-      currentPasswordLabel ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_CurrentPassword
-      ),
-    newPassword:
-      newPasswordLabel ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_NewPassword
-      ),
-    confirmPassword:
-      confirmPasswordLabel ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_ConfirmNewPassword
-      ),
-    submitButton:
-      submitButtonText ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_ChangePassword
-      ),
-    submittingButton:
-      submittingButtonText ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_ChangingPassword
-      ),
-    success:
-      successMessage ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.PasswordChange_Success
-      ),
-  };
-
-  const formik = useFormik<ChangePasswordFormValues>({
-    initialValues: {
-      currentPassword: '',
-      newPassword: '',
-      confirmPassword: '',
-    },
-    validationSchema: Yup.object({
-      currentPassword: validation.currentPassword,
-      newPassword: validation.newPassword,
-      confirmPassword: validation.confirmPassword,
-    }),
-    onSubmit: async (values, { resetForm }) => {
-      const result = await onSubmit(values);
-
-      if ('success' in result) {
-        setSuccess(true);
-        setApiError('');
-        resetForm();
-      } else if ('error' in result && result.error) {
-        setApiError(result.error);
-        setSuccess(false);
-      }
-    },
-  });
-
-  return (
-    <Container maxWidth="sm">
-      <Box
-        sx={{
-          mt: 8,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
-      >
-        <Typography variant="h4" component="h1" gutterBottom>
-          {labels.title}
-        </Typography>
-
-        <Box
-          component="form"
-          onSubmit={formik.handleSubmit}
-          sx={{ mt: 1, width: '100%' }}
-        >
-          <TextField
-            fullWidth
-            id="currentPassword"
-            name="currentPassword"
-            label={labels.currentPassword}
-            type="password"
-            value={formik.values.currentPassword}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={Boolean(
-              formik.touched.currentPassword && formik.errors.currentPassword
-            )}
-            helperText={
-              formik.touched.currentPassword && formik.errors.currentPassword
-            }
-            margin="normal"
-          />
-
-          <TextField
-            fullWidth
-            id="newPassword"
-            name="newPassword"
-            label={labels.newPassword}
-            type="password"
-            value={formik.values.newPassword}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={Boolean(
-              formik.touched.newPassword && formik.errors.newPassword
-            )}
-            helperText={formik.touched.newPassword && formik.errors.newPassword}
-            margin="normal"
-          />
-
-          <TextField
-            fullWidth
-            id="confirmPassword"
-            name="confirmPassword"
-            label={labels.confirmPassword}
-            type="password"
-            value={formik.values.confirmPassword}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={Boolean(
-              formik.touched.confirmPassword && formik.errors.confirmPassword
-            )}
-            helperText={
-              formik.touched.confirmPassword && formik.errors.confirmPassword
-            }
-            margin="normal"
-          />
-
-          {apiError && (
-            <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
-              {apiError}
-            </Alert>
-          )}
-
-          {success && (
-            <Alert severity="success" sx={{ mt: 2, mb: 2 }}>
-              {labels.success}
-            </Alert>
-          )}
-
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            sx={{ mt: 3, mb: 2 }}
-            disabled={formik.isSubmitting}
-          >
-            {formik.isSubmitting
-              ? labels.submittingButton
-              : labels.submitButton}
-          </Button>
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-
-export default ChangePasswordForm;