@digitaldefiance/express-suite-react-components 2.9.7 → 2.9.9

package/src/components/ConfirmationDialog.tsx

@@ -1,48 +0,0 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from '@mui/material';
-import React from 'react';
-
-export interface ConfirmationDialogProps {
-  open: boolean;
-  title: string;
-  message: string;
-  confirmText?: string;
-  cancelText?: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-}
-
-export const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
-  open,
-  title,
-  message,
-  confirmText = 'Confirm',
-  cancelText = 'Cancel',
-  onConfirm,
-  onCancel,
-}) => {
-  return (
-    <Dialog open={open} onClose={onCancel}>
-      <DialogTitle>{title}</DialogTitle>
-      <DialogContent>
-        <DialogContentText>{message}</DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onCancel} color="primary">
-          {cancelText}
-        </Button>
-        <Button onClick={onConfirm} color="primary">
-          {confirmText}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default ConfirmationDialog;

package/src/components/CurrencyCodeSelector.tsx

@@ -1,60 +0,0 @@
-import { CurrencyCode } from '@digitaldefiance/i18n-lib';
-import { MenuItem, TextField } from '@mui/material';
-import { Field, FieldProps } from 'formik';
-import { ChangeEvent, FC } from 'react';
-
-export interface CurrencyCodeSelectorProps {
-  name: string;
-  label: string;
-  onCurrencyChange?: (code: string) => void;
-}
-
-export const CurrencyCodeSelector: FC<CurrencyCodeSelectorProps> = ({
-  name,
-  label,
-  onCurrencyChange,
-}) => {
-  return (
-    <Field name={name}>
-      {({ field, form }: FieldProps) => (
-        <TextField
-          select
-          fullWidth
-          label={label}
-          {...field}
-          onChange={(event: ChangeEvent<HTMLInputElement>) => {
-            const selectedCode = event.target.value;
-            form.setFieldValue(name, selectedCode);
-            onCurrencyChange?.(selectedCode);
-          }}
-          error={form.touched[name] && Boolean(form.errors[name])}
-          helperText={form.touched[name] && (form.errors[name] as string)}
-          sx={{
-            '& .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',
-              },
-            },
-          }}
-        >
-          {CurrencyCode.getAll().map((code: string) => (
-            <MenuItem key={code} value={code}>
-              {code}
-            </MenuItem>
-          ))}
-        </TextField>
-      )}
-    </Field>
-  );
-};
-
-export default CurrencyCodeSelector;

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,65 +0,0 @@
-import { MenuItem, TextField } from '@mui/material';
-import { FormikProps } from 'formik';
-import { ChangeEvent, FC } from 'react';
-
-export interface ExpirationSecondsSelectorProps {
-  name: string;
-  label: string;
-  formik: FormikProps<any>;
-  optionValues: number[];
-  optionNames: string[];
-  onChange?: (value: number) => void;
-}
-
-export const ExpirationSecondsSelector: FC<ExpirationSecondsSelectorProps> = ({
-  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,53 +0,0 @@
-import { CoreLanguageCode } from '@digitaldefiance/i18n-lib';
-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,120 +0,0 @@
-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 { SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
-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: any) {
-        setApiError(error.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;