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

package/src/components/ConfirmationDialog.tsx

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,105 @@
+import { Box, Fade, IconButton, Menu, MenuItem } from '@mui/material';
+import { FC, MouseEvent, ReactElement, useCallback, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { MenuType } from '../types/MenuType';
+import { IMenuOption } from '../interfaces/IMenuOption';
+import { useMenu } from '../contexts/MenuContext';
+
+interface DropdownMenuProps {
+  menuType: MenuType;
+  menuIcon: ReactElement;
+  /** When true, the entire icon button is hidden if there are no menu options. Defaults to false. */
+  hideWhenEmpty?: boolean;
+  /** Optional callback invoked when the icon button is clicked. When provided alongside menu options, the action fires first and the dropdown still opens. When there are no menu options, only the action fires. */
+  action?: () => void;
+}
+
+export const DropdownMenu: FC<DropdownMenuProps> = ({ menuType, menuIcon, hideWhenEmpty = false, action }) => {
+  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 menuItems = getMenuOptions(menuType, false);
+  const hasItems = menuItems.length > 0;
+
+  const handleClick = useCallback((event: MouseEvent<HTMLElement>) => {
+    if (action) {
+      action();
+    }
+    if (hasItems) {
+      setAnchorEl(event.currentTarget);
+    }
+  }, [action, hasItems]);
+
+  if (!hasItems && hideWhenEmpty) {
+    return null;
+  }
+
+  return (
+    <Box>
+      <IconButton color="inherit" onClick={(hasItems || action) ? handleClick : undefined}>
+        {menuIcon}
+      </IconButton>
+      {hasItems && (
+        <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.additionalSx
+              }}
+            >
+              {option.icon}
+              {option.label}
+            </MenuItem>
+          ))}
+        </Menu>
+      )}
+    </Box>
+  );
+};
+
+export default DropdownMenu;

package/src/components/ExpirationSecondsSelector.tsx

@@ -0,0 +1,60 @@
+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;