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

package/src/components/ResetPasswordForm.tsx

@@ -1,164 +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 { Constants, SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
-import { useI18n } from '../contexts';
-
-export interface ResetPasswordFormValues {
-  password: string;
-  confirmPassword: string;
-}
-
-export interface ResetPasswordFormProps {
-  token: string | null;
-  onSubmit: (token: string, password: string) => Promise<void>;
-  passwordValidation?: Yup.StringSchema;
-  confirmPasswordValidation?: Yup.StringSchema;
-  labels?: {
-    title?: string;
-    password?: string;
-    confirmPassword?: string;
-    resetButton?: string;
-    successMessage?: string;
-    invalidToken?: string;
-  };
-}
-
-export const ResetPasswordForm: FC<ResetPasswordFormProps> = ({
-  token,
-  onSubmit,
-  passwordValidation,
-  confirmPasswordValidation,
-  labels = {},
-}) => {
-  const { t, tComponent } = useI18n();
-  const [success, setSuccess] = useState(false);
-  const [apiError, setApiError] = useState<string>('');
-
-  const validation = {
-    password: passwordValidation || Yup.string()
-      .min(Constants.PasswordMinLength, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordMinLengthTemplate))
-      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
-    confirmPassword: confirmPasswordValidation || Yup.string()
-      .oneOf([Yup.ref('password')], tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordMatch))
-      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
-  };
-
-  const translatedLabels = {
-    title: labels.title || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.PasswordReset_Title),
-    password: labels.password || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_NewPassword),
-    confirmPassword: labels.confirmPassword || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ConfirmNewPassword),
-    resetButton: labels.resetButton || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.PasswordReset_Button),
-    successMessage: labels.successMessage || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.PasswordReset_Success),
-    invalidToken: labels.invalidToken || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ForgotPassword_InvalidToken),
-  };
-
-  const formik = useFormik<ResetPasswordFormValues>({
-    initialValues: {
-      password: '',
-      confirmPassword: '',
-    },
-    validationSchema: Yup.object({
-      password: validation.password,
-      confirmPassword: validation.confirmPassword,
-    }),
-    onSubmit: async (values) => {
-      if (!token) {
-        setApiError(translatedLabels.invalidToken);
-        return;
-      }
-
-      try {
-        await onSubmit(token, values.password);
-        setSuccess(true);
-        setApiError('');
-      } catch (error: any) {
-        setApiError(error.response?.data?.message || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Error_PasswordChange));
-        setSuccess(false);
-      }
-    },
-  });
-
-  if (!token) {
-    return (
-      <Container maxWidth="sm">
-        <Alert severity="error" sx={{ mt: 4 }}>
-          {translatedLabels.invalidToken}
-        </Alert>
-      </Container>
-    );
-  }
-
-  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="password"
-            name="password"
-            label={translatedLabels.password}
-            type="password"
-            value={formik.values.password}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={Boolean(formik.touched.password && formik.errors.password)}
-            helperText={formik.touched.password && formik.errors.password}
-            margin="normal"
-          />
-
-          <TextField
-            fullWidth
-            id="confirmPassword"
-            name="confirmPassword"
-            label={translatedLabels.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 }}>
-              {translatedLabels.successMessage}
-            </Alert>
-          )}
-
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            sx={{ mt: 3, mb: 2 }}
-            disabled={formik.isSubmitting}
-          >
-            {translatedLabels.resetButton}
-          </Button>
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-
-export default ResetPasswordForm;

package/src/components/SideMenu.tsx

@@ -1,46 +0,0 @@
-import { Drawer, List } from '@mui/material';
-import { FC } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useMenu } from '../contexts/MenuContext';
-import { IMenuOption } from '../interfaces/IMenuOption';
-import { MenuTypes } from '../types/MenuType';
-import { SideMenuListItem } from './SideMenuListItem';
-
-interface SideMenuProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export const SideMenu: FC<SideMenuProps> = ({ isOpen, onClose }) => {
-  const { getMenuOptions } = useMenu();
-  const navigate = useNavigate();
-
-  const menuOptions = getMenuOptions(MenuTypes.SideMenu, true);
-
-  const handleNavigate = (
-    link: string | Partial<{ pathname: string; state?: unknown }>
-  ) => {
-    if (typeof link === 'string') {
-      navigate(link);
-    } else if (link.pathname) {
-      navigate(link.pathname, { state: link.state });
-    }
-  };
-
-  return (
-    <Drawer anchor="left" open={isOpen} onClose={onClose}>
-      <List>
-        {menuOptions.map((item: IMenuOption) => (
-          <SideMenuListItem
-            key={item.id}
-            menuItem={item}
-            onClose={onClose}
-            onNavigate={handleNavigate}
-          />
-        ))}
-      </List>
-    </Drawer>
-  );
-};
-
-export default SideMenu;

package/src/components/SideMenuListItem.tsx

@@ -1,74 +0,0 @@
-import {
-  Divider,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-} from '@mui/material';
-import { FC, useCallback } from 'react';
-import { IMenuOption } from '../interfaces';
-
-export interface SideMenuListItemProps {
-  menuItem: IMenuOption;
-  onClose: () => void;
-  onNavigate?: (
-    link: string | Partial<{ pathname: string; state?: unknown }>
-  ) => void;
-}
-
-export const SideMenuListItem: FC<SideMenuListItemProps> = ({
-  menuItem,
-  onClose,
-  onNavigate,
-}) => {
-  const handleMenuItemClick = useCallback(
-    (option: IMenuOption) => (event: React.MouseEvent<HTMLElement>) => {
-      event.stopPropagation();
-      if (option.action) {
-        option.action();
-      } else if (option.link !== undefined && onNavigate) {
-        if (typeof option.link === 'string') {
-          onNavigate(option.link);
-        } else if (
-          typeof option.link === 'object' &&
-          'pathname' in option.link &&
-          option.link.pathname
-        ) {
-          onNavigate({
-            pathname: option.link.pathname,
-            state: 'state' in option.link ? option.link.state : undefined,
-          });
-        }
-      }
-      onClose();
-    },
-    [onNavigate, onClose]
-  );
-
-  if (menuItem.divider) {
-    return <Divider key={menuItem.label} />;
-  } else if (menuItem.link) {
-    return (
-      <ListItemButton key={menuItem.id} onClick={handleMenuItemClick(menuItem)}>
-        {menuItem.icon && <ListItemIcon>{menuItem.icon}</ListItemIcon>}
-        <ListItemText primary={menuItem.label} />
-      </ListItemButton>
-    );
-  } else if (menuItem.action) {
-    const action = menuItem.action;
-    return (
-      <ListItemButton
-        key={menuItem.id}
-        onClick={async () => {
-          await action();
-          onClose();
-        }}
-      >
-        {menuItem.icon && <ListItemIcon>{menuItem.icon}</ListItemIcon>}
-        <ListItemText primary={menuItem.label} />
-      </ListItemButton>
-    );
-  }
-  return null;
-};
-
-export default SideMenuListItem;

package/src/components/TopMenu.tsx

@@ -1,149 +0,0 @@
-import {
-  SuiteCoreComponentId,
-  SuiteCoreStringKey,
-} from '@digitaldefiance/suite-core-lib';
-import MenuIcon from '@mui/icons-material/Menu';
-import {
-  AppBar,
-  Box,
-  Button,
-  IconButton,
-  Toolbar,
-  Typography,
-} from '@mui/material';
-import React, { FC, ReactElement, useContext, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { AuthContext } from '../contexts/AuthProvider';
-import { useI18n } from '../contexts/I18nProvider';
-import { useMenu } from '../contexts/MenuContext';
-import { MenuType } from '../types/MenuType';
-import { DropdownMenu } from './DropdownMenu';
-import { SideMenu } from './SideMenu';
-import { UserLanguageSelector } from './UserLanguageSelector';
-import { UserMenu } from './UserMenu';
-
-// Extend Window interface for APP_CONFIG
-declare global {
-  interface Window {
-    APP_CONFIG?: {
-      hostname: string;
-      siteTitle: string;
-      server: string;
-      [key: string]: unknown;
-    };
-  }
-}
-
-export interface AdditionalDropdownMenu {
-  menuType: MenuType;
-  menuIcon: ReactElement;
-  priority?: number;
-}
-
-export interface TopMenuProps {
-  Logo: React.ReactNode;
-  additionalMenus?: Array<AdditionalDropdownMenu>;
-}
-
-export const TopMenu: FC<TopMenuProps> = ({ Logo, additionalMenus }) => {
-  const { isAuthenticated } = useContext(AuthContext);
-  const { getTopMenus } = useMenu();
-  const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
-
-  const handleOpenSideMenu = () => setIsSideMenuOpen(true);
-  const handleCloseSideMenu = () => setIsSideMenuOpen(false);
-  const { t, tComponent } = useI18n();
-  const appConfig = window.APP_CONFIG;
-  const siteTitle = tComponent<SuiteCoreStringKey>(
-    SuiteCoreComponentId,
-    SuiteCoreStringKey.Common_SiteTemplate
-  );
-
-  return (
-    <AppBar position="fixed" sx={{ top: 10 }}>
-      <Toolbar>
-        <IconButton
-          size="large"
-          edge="start"
-          color="inherit"
-          aria-label="menu"
-          sx={{ mr: 2 }}
-          onClick={handleOpenSideMenu}
-        >
-          <MenuIcon />
-        </IconButton>
-        <Box
-          sx={{
-            height: 40,
-            width: 40,
-            marginRight: 2,
-            display: 'flex',
-            alignItems: 'center',
-          }}
-        >
-          {Logo}
-        </Box>
-        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-          {siteTitle}
-        </Typography>
-        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          {isAuthenticated ? (
-            <>
-              <Button
-                color="inherit"
-                // @ts-expect-error - MUI Button with react-router Link has type incompatibility
-                component={Link}
-                to="/dashboard"
-              >
-                {tComponent<SuiteCoreStringKey>(
-                  SuiteCoreComponentId,
-                  SuiteCoreStringKey.Common_Dashboard
-                )}
-              </Button>
-              {getTopMenus().map((menu, index) =>
-                menu.isUserMenu ? (
-                  <UserMenu key={`user-menu`} />
-                ) : (
-                  <DropdownMenu
-                    key={`menu-${index}`}
-                    menuType={menu.menuType}
-                    menuIcon={menu.menuIcon as ReactElement}
-                  />
-                )
-              )}
-            </>
-          ) : (
-            <>
-              <Button
-                color="inherit"
-                // @ts-expect-error - MUI Button with react-router Link has type incompatibility
-                component={Link}
-                to="/login"
-              >
-                {tComponent<SuiteCoreStringKey>(
-                  SuiteCoreComponentId,
-                  SuiteCoreStringKey.Login_LoginButton
-                )}
-              </Button>
-              <Button
-                color="inherit"
-                // @ts-expect-error - MUI Button with react-router Link has type incompatibility
-                component={Link}
-                to="/register"
-              >
-                {tComponent<SuiteCoreStringKey>(
-                  SuiteCoreComponentId,
-                  SuiteCoreStringKey.RegisterButton
-                )}
-              </Button>
-            </>
-          )}
-          <UserLanguageSelector />
-        </Box>
-      </Toolbar>
-      <SideMenu isOpen={isSideMenuOpen} onClose={handleCloseSideMenu} />
-    </AppBar>
-  );
-};
-
-export default TopMenu;

package/src/components/TranslatedTitle.tsx

@@ -1,22 +0,0 @@
-// src/app/components/TranslatedTitle.tsx
-
-import { useEffect } from 'react';
-import { useI18n } from '../contexts';
-import { SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
-
-interface FCParams<TEnum extends string> {
-  componentId: string;
-  stringKey: TEnum;
-} 
-
-export const TranslatedTitle = <TEnum extends string>({ componentId, stringKey }: FCParams<TEnum>): null => {
-  const { tComponent, currentLanguage } = useI18n();
-
-  useEffect(() => {
-      document.title = tComponent<TEnum>(componentId, stringKey, undefined, currentLanguage);
-  }, [tComponent, componentId, stringKey, currentLanguage]);
-
-  return null;
-};
-
-export default TranslatedTitle;

package/src/components/UserLanguageSelector.tsx

@@ -1,45 +0,0 @@
-import { LanguageRegistry, LanguageDefinition } from '@digitaldefiance/i18n-lib';
-import { Button, Menu, MenuItem } from '@mui/material';
-import { FC, MouseEvent, useState, useMemo } from 'react';
-import { Flag } from './Flag';
-import { useUserSettings } from '../hooks';
-import { createAuthenticatedApiClient } from '../services';
-import { useAuth, useSuiteConfig } from '../contexts';
-
-export const UserLanguageSelector: FC = () => {
-  const { baseUrl } = useSuiteConfig();
-  const authenticatedApi = useMemo(() => createAuthenticatedApiClient(baseUrl), [baseUrl]);
-  const { isAuthenticated } = useAuth();
-  const { currentLanguage, changeLanguage } = useUserSettings({ authenticatedApi, isAuthenticated });
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleLanguageChange = (newLanguage: string) => {
-    changeLanguage(newLanguage);
-    handleClose();
-  };
-
-  return (
-    <>
-      <Button onClick={handleClick}>
-        <Flag language={currentLanguage} />
-      </Button>
-      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
-        {Object.values(LanguageRegistry.getAllLanguages()).map((lang: LanguageDefinition) => (
-          <MenuItem key={lang.code} onClick={() => handleLanguageChange(lang.code)}>
-            <Flag language={lang.code} sx={{ mr: 1 }} /> {lang.name}
-          </MenuItem>
-        ))}
-      </Menu>
-    </>
-  );
-};
-
-export default UserLanguageSelector;

package/src/components/UserMenu.tsx

@@ -1,15 +0,0 @@
-import { FC } from 'react';
-import { AccountCircle } from '@mui/icons-material';
-import { MenuTypes } from '../types/MenuType';
-import { DropdownMenu } from './DropdownMenu';
-
-export const UserMenu: FC = () => {
-  return (
-    <DropdownMenu
-      menuType={MenuTypes.UserMenu}
-      menuIcon={<AccountCircle />}
-    />
-  );
-};
-
-export default UserMenu;