@digitaldefiance/express-suite-react-components 2.9.38 → 2.9.39

package/src/components/CurrencyInput.tsx

@@ -1,80 +0,0 @@
-import { TextField } from '@mui/material';
-import { NumericFormat } from 'react-number-format';
-import { getCurrencyFormat } from '@digitaldefiance/i18n-lib';
-
-export interface CurrencyInputProps {
-  value: number;
-  onChange: (value: number) => void;
-  currencyCode?: string;
-  locale?: string;
-  label: string;
-  error?: boolean;
-  helperText?: string;
-  name: string;
-}
-
-export const CurrencyInput: React.FC<CurrencyInputProps> = ({
-  value,
-  onChange,
-  currencyCode = 'USD',
-  locale = 'en-US',
-  label,
-  error,
-  helperText,
-  name,
-}) => {
-  const format = getCurrencyFormat(locale, currencyCode);
-
-  if (format.position === 'infix') {
-    const [whole, decimal] = value.toString().split('.');
-    const displayValue = `${whole}${format.symbol}${format.decimalSeparator}${
-      decimal || '00'
-    }`;
-
-    return (
-      <NumericFormat
-        customInput={TextField}
-        fullWidth
-        margin="normal"
-        label={label}
-        value={displayValue}
-        thousandSeparator={format.groupSeparator}
-        decimalSeparator={format.decimalSeparator}
-        decimalScale={2}
-        fixedDecimalScale
-        valueIsNumericString
-        onValueChange={(values) => {
-          onChange(values.floatValue || 0);
-        }}
-        error={error}
-        helperText={helperText}
-        name={name}
-      />
-    );
-  }
-
-  return (
-    <NumericFormat
-      customInput={TextField}
-      fullWidth
-      margin="normal"
-      label={label}
-      value={value}
-      thousandSeparator={format.groupSeparator}
-      decimalSeparator={format.decimalSeparator}
-      decimalScale={2}
-      fixedDecimalScale
-      prefix={format.position === 'prefix' ? format.symbol + ' ' : undefined}
-      suffix={format.position === 'postfix' ? ' ' + format.symbol : undefined}
-      valueIsNumericString
-      onValueChange={(values) => {
-        onChange(values.floatValue || 0);
-      }}
-      error={error}
-      helperText={helperText}
-      name={name}
-    />
-  );
-};
-
-export default CurrencyInput;

package/src/components/DashboardPage.tsx

@@ -1,24 +0,0 @@
-import { Box, Container, Typography } from '@mui/material';
-import { FC, ReactNode } from 'react';
-
-export interface DashboardPageProps {
-  title?: string;
-  children?: ReactNode;
-}
-
-export const DashboardPage: FC<DashboardPageProps> = ({ title = 'Dashboard', children }) => {
-  return (
-    <Container maxWidth="md">
-      <Box my={4}>
-        <Typography variant="h4" component="h1" gutterBottom align="center">
-          {title}
-        </Typography>
-        <Box display="flex" justifyContent="center" mt={3}>
-          {children}
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-
-export default DashboardPage;

package/src/components/DropdownMenu.tsx

@@ -1,92 +0,0 @@
-import { Box, Fade, IconButton, Menu, MenuItem } from '@mui/material';
-import { FC, MouseEvent, ReactElement, useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { MenuType } from '../types/MenuType';
-import { IMenuOption } from '../interfaces/IMenuOption';
-import { useMenu } from '../contexts/MenuContext';
-
-interface DropdownMenuProps {
-  menuType: MenuType;
-  menuIcon: ReactElement;
-}
-
-export const DropdownMenu: FC<DropdownMenuProps> = ({ menuType, menuIcon }) => {
-  const { getMenuOptions } = useMenu();
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const navigate = useNavigate();
-  const handleClose = useCallback(() => {
-    setAnchorEl(null);
-  }, []);
-  const handleMenuItemClick = useCallback(
-    (option: IMenuOption) => (event: React.MouseEvent<HTMLElement>) => {
-      event.stopPropagation();
-      if (option.action) {
-        option.action();
-      } else if (option.link !== undefined) {
-        if (
-          typeof option.link === 'object' &&
-          'pathname' in option.link &&
-          'state' in option.link
-        ) {
-          navigate(option.link.pathname, { state: option.link.state });
-        } else {
-          navigate(option.link);
-        }
-      }
-      handleClose(); // Call handleClose after handling the click
-    },
-    [navigate, handleClose], // Add handleClose to the dependency array
-  );
-
-  const handleClick = useCallback((event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  }, []);
-
-  const menuItems = getMenuOptions(menuType, false);
-
-  if (menuItems.length === 0) {
-    return null;
-  }
-
-  return (
-    <Box>
-      <IconButton color="inherit" onClick={handleClick}>
-        {menuIcon}
-      </IconButton>
-      <Menu
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-        TransitionComponent={Fade}
-        sx={{
-          '& .MuiPopover-paper': {
-            opacity: 0.5,
-            overflow: 'visible',
-          },
-        }}
-      >
-        {menuItems.map((option) => (
-          <MenuItem
-            key={option.id}
-            component="li"
-            onClick={handleMenuItemClick(option)}
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              '& > svg': {
-                marginRight: 2,
-                width: 24,
-                height: 24,
-              },
-            }}
-          >
-            {option.icon}
-            {option.label}
-          </MenuItem>
-        ))}
-      </Menu>
-    </Box>
-  );
-};
-
-export default DropdownMenu;

package/src/components/ExpirationSecondsSelector.tsx

@@ -1,60 +0,0 @@
-import { MenuItem, TextField } from '@mui/material';
-import { FormikProps } from 'formik';
-import { ChangeEvent, FC } from 'react';
-
-export interface ExpirationSecondsSelectorProps<T = Record<string, unknown>> {
-  name: string;
-  label: string;
-  formik: FormikProps<T>;
-  optionValues: number[];
-  optionNames: string[];
-  onChange?: (value: number) => void;
-}
-
-export const ExpirationSecondsSelector: FC<
-  ExpirationSecondsSelectorProps<Record<string, unknown>>
-> = ({ name, label, formik, optionValues, optionNames, onChange }) => {
-  return (
-    <TextField
-      select
-      fullWidth
-      label={label}
-      name={name}
-      value={formik.values[name] ?? ''}
-      onChange={(event: ChangeEvent<HTMLInputElement>) => {
-        const selectedValue = event.target.value;
-        formik.setFieldValue(name, selectedValue);
-        if (onChange) {
-          onChange(parseInt(selectedValue));
-        }
-      }}
-      error={formik.touched[name] && Boolean(formik.errors[name])}
-      helperText={formik.touched[name] && (formik.errors[name] as string)}
-      sx={{
-        mt: 1,
-        '& .MuiSelect-select': {
-          paddingRight: '32px',
-        },
-        '& .MuiOutlinedInput-root': {
-          '& fieldset': {
-            borderColor: 'rgba(0, 0, 0, 0.23)',
-          },
-          '&:hover fieldset': {
-            borderColor: 'rgba(0, 0, 0, 0.87)',
-          },
-          '&.Mui-focused fieldset': {
-            borderColor: 'primary.main',
-          },
-        },
-      }}
-    >
-      {optionNames.map((name: string, index: number) => (
-        <MenuItem key={name} value={optionValues[index]}>
-          {name}
-        </MenuItem>
-      ))}
-    </TextField>
-  );
-};
-
-export default ExpirationSecondsSelector;

package/src/components/Flag.tsx

@@ -1,52 +0,0 @@
-import { getFlagCode } from '@digitaldefiance/suite-core-lib';
-import { Box, SxProps, Theme } from '@mui/material';
-import { FC } from 'react';
-
-export interface FlagProps {
-  language: string;
-  sx?: SxProps<Theme>;
-}
-
-/**
- * A simple component to display a flag icon for a given language.
- *
- * Props:
- *   language: The language to display a flag for, as a StringLanguages enum value.
- *   sx: Optional styles to apply to the component.
- *
- * Returns a Box component with an SVG flag icon from flagcdn.com as a ::before pseudo-element.
- * The flag is sized to 1.5rem by default, but can be overridden by passing a custom sx prop.
- * The component also includes an aria-label for accessibility, set to `Flag for <language>`.
- */
-export const Flag: FC<FlagProps> = ({ language, sx }) => {
-  const flagContent = getFlagCode(language);
-  if (!flagContent) {
-    return null;
-  }
-  return (
-    <Box
-      component="span"
-      aria-label={`Flag for ${language}`}
-      sx={{
-        fontSize: '1.5rem',
-        lineHeight: 1,
-        verticalAlign: 'middle',
-        '&::before': {
-          content: `" "`,
-          display: 'inline-block',
-          width: '1em',
-          height: '1em',
-          backgroundImage: `url(https://flagcdn.com/${flagContent.toLowerCase()}.svg)`,
-          backgroundSize: 'contain',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'center',
-          border: '1px solid rgba(0, 0, 0, 0.1)',
-          borderRadius: '2px',
-        },
-        ...sx,
-      }}
-    />
-  );
-};
-
-export default Flag;

package/src/components/ForgotPasswordForm.tsx

@@ -1,173 +0,0 @@
-import {
-  SuiteCoreComponentId,
-  SuiteCoreStringKey,
-} 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 ForgotPasswordFormValues {
-  email: string;
-}
-
-export interface ForgotPasswordFormProps {
-  onSubmit: (values: ForgotPasswordFormValues) => Promise<void>;
-  emailValidation?: Yup.StringSchema;
-  labels?: {
-    title?: string;
-    email?: string;
-    sendResetLink?: string;
-    successMessage?: string;
-  };
-}
-
-export const ForgotPasswordForm: FC<ForgotPasswordFormProps> = ({
-  onSubmit,
-  emailValidation,
-  labels = {},
-}) => {
-  const { tComponent } = useI18n();
-  const [success, setSuccess] = useState(false);
-  const [apiError, setApiError] = useState<string>('');
-
-  const validation = {
-    email:
-      emailValidation ||
-      Yup.string()
-        .email(
-          tComponent<SuiteCoreStringKey>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_InvalidEmail
-          )
-        )
-        .required(
-          tComponent<SuiteCoreStringKey>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_Required
-          )
-        ),
-  };
-
-  const translatedLabels = {
-    title:
-      labels.title ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.ForgotPassword_Title
-      ),
-    email:
-      labels.email ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_Email
-      ),
-    sendResetLink:
-      labels.sendResetLink ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.ForgotPassword_SendResetLink
-      ),
-    successMessage:
-      labels.successMessage ||
-      tComponent<SuiteCoreStringKey>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.PasswordReset_Success
-      ),
-  };
-
-  const formik = useFormik<ForgotPasswordFormValues>({
-    initialValues: {
-      email: '',
-    },
-    validationSchema: Yup.object({
-      email: validation.email,
-    }),
-    onSubmit: async (values) => {
-      try {
-        await onSubmit(values);
-        setSuccess(true);
-        setApiError('');
-      } catch (error: unknown) {
-        const err = error as { response?: { data?: { message?: string } } };
-        setApiError(
-          err.response?.data?.message ||
-            tComponent<SuiteCoreStringKey>(
-              SuiteCoreComponentId,
-              SuiteCoreStringKey.ForgotPassword_Error
-            )
-        );
-        setSuccess(false);
-      }
-    },
-  });
-
-  return (
-    <Container maxWidth="sm">
-      <Box
-        sx={{
-          mt: 8,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
-      >
-        <Typography variant="h4" component="h1" gutterBottom>
-          {translatedLabels.title}
-        </Typography>
-
-        <Box
-          component="form"
-          onSubmit={formik.handleSubmit}
-          sx={{ mt: 1, width: '100%' }}
-        >
-          <TextField
-            fullWidth
-            id="email"
-            name="email"
-            label={translatedLabels.email}
-            value={formik.values.email}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={Boolean(formik.touched.email && formik.errors.email)}
-            helperText={formik.touched.email && formik.errors.email}
-            margin="normal"
-          />
-
-          {apiError && (
-            <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
-              {apiError}
-            </Alert>
-          )}
-
-          {success && (
-            <Alert severity="success" sx={{ mt: 2, mb: 2 }}>
-              {translatedLabels.successMessage}
-            </Alert>
-          )}
-
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            sx={{ mt: 3, mb: 2 }}
-            disabled={formik.isSubmitting}
-          >
-            {translatedLabels.sendResetLink}
-          </Button>
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-
-export default ForgotPasswordForm;