@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/commons/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,40 +0,0 @@
-import { useMediaQuery, useTheme } from '@mui/material';
-import { useAppBreadcrumbs, useAppConfigs, useAppSitemap, type BreadcrumbItem } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import BreadcrumbList from '@cccsaurora/howler-ui/commons/components/breadcrumbs/BreadcrumbList';
-import { memo, useMemo } from 'react';
-
-const Breadcrumbs = ({ disableStyle = false }) => {
-  const theme = useTheme();
-  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
-  const configs = useAppConfigs();
-  const breadcrumbs = useAppBreadcrumbs();
-  const sitemap = useAppSitemap();
-  const current = breadcrumbs.last();
-  const isStatic = !!current.route.breadcrumbs;
-  const isExpanded = isMedium;
-
-  const items = useMemo(() => {
-    let _items: BreadcrumbItem[] = null;
-    if (sitemap.is404(current)) {
-      _items = [current];
-    } else if (isStatic) {
-      const staticBreadcrumbs = current.route.breadcrumbs.map(path => sitemap.getRoute(path));
-      _items = [...staticBreadcrumbs, current];
-    } else {
-      _items = breadcrumbs.items;
-    }
-    return _items;
-  }, [current, isStatic, breadcrumbs, sitemap]);
-
-  return (
-    <BreadcrumbList
-      items={items}
-      disableStyle={disableStyle}
-      isStatic={isStatic}
-      itemsBefore={isExpanded ? configs.sitemap.itemsBefore : 0}
-      itemsAfter={isExpanded ? configs.sitemap.itemsAfter : 1}
-    />
-  );
-};
-
-export default memo(Breadcrumbs);

package/commons/components/display/AppAvatar.tsx

@@ -1,34 +0,0 @@
-import { Avatar, type AvatarProps } from '@mui/material';
-import { useAppConfigs } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppConfigs';
-import md5 from 'md5';
-import { useMemo } from 'react';
-
-export type GravatarD = '404' | 'mp' | 'identicon' | 'monsterid' | 'wavatar' | 'retro' | 'robohash' | 'blank';
-
-export type AppAvatarProps = { d?: GravatarD; url?: string; email?: string } & Omit<AvatarProps, 'src'>;
-
-export default function AppAvatar({ d, url, email, ...props }: AppAvatarProps) {
-  const configs = useAppConfigs();
-
-  const avatarUrl = useMemo(
-    () =>
-      url ||
-      (configs.preferences.allowGravatar
-        ? `https://s.gravatar.com/avatar/${email ? md5(email as string) : ''}?d=${d || configs.preferences.avatarD}`
-        : null),
-    [configs, url, email, d]
-  );
-
-  return (
-    <Avatar
-      {...props}
-      sx={{
-        ...(props.sx || {}),
-        '&:hover': {
-          cursor: 'pointer'
-        }
-      }}
-      src={avatarUrl}
-    />
-  );
-}

package/commons/components/display/AppInfoPanel.tsx

@@ -1,30 +0,0 @@
-import { Info } from '@mui/icons-material';
-import { Box, Stack, Typography, emphasize, useTheme, type StackProps } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-export type AppInfoPanelProps = { i18nKey: string } & StackProps;
-
-export default function AppInfoPanel({ i18nKey, ...props }: AppInfoPanelProps) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const bgColor = emphasize(theme.palette.background.default, 0.1);
-  const color = emphasize(bgColor, 0.4);
-  return (
-    <Stack
-      {...props}
-      direction="row"
-      p={2}
-      sx={{
-        ...props.sx,
-        alignItems: 'center',
-        borderRadius: 2,
-        backgroundColor: bgColor,
-        color: color
-      }}
-    >
-      <Info fontSize="large" />
-      <Box m={1} />
-      <Typography variant="h5">{t(i18nKey)}</Typography>
-    </Stack>
-  );
-}

package/commons/components/display/AppListEmpty.tsx

@@ -1,5 +0,0 @@
-import AppInfoPanel, { type AppInfoPanelProps } from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
-
-export default function AppListEmpty(props: Omit<AppInfoPanelProps, 'i18nKey'>) {
-  return <AppInfoPanel {...props} i18nKey="app.list.empty" />;
-}

package/commons/components/display/AppToc.tsx

@@ -1,160 +0,0 @@
-import { styled, useTheme } from '@mui/material';
-import { useAppBar } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppBar';
-import { useAppLayout } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppLayout';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppUser';
-import React, { memo, useEffect, type ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link, useLocation } from 'react-router-dom';
-
-const TocRoot = styled('div')(({ theme }) => ({
-  display: 'flex',
-  '.tocBar': {
-    display: 'none',
-    paddingLeft: '16px',
-    [theme.breakpoints.up('md')]: {
-      display: 'block'
-    }
-  },
-  '.toc': {
-    fontSize: '0.875rem',
-    listStyle: 'none',
-    paddingInlineStart: 0,
-    [theme.breakpoints.only('md')]: {
-      width: '124px'
-    },
-    [theme.breakpoints.up('lg')]: {
-      width: '164px'
-    },
-    '& li': {
-      color: theme.palette.text.primary,
-      marginLeft: theme.spacing(1),
-      marginBottom: theme.spacing(0.5),
-      paddingLeft: theme.spacing(1.25),
-      paddingRight: theme.spacing(1)
-    },
-    '& .active': {
-      borderLeft: `solid ${theme.palette.primary.main} 2px`,
-      paddingLeft: theme.spacing(1),
-      color: theme.palette.primary.main
-    },
-    '& li:hover': {
-      borderLeft: `solid ${theme.palette.text.disabled} 1px`,
-      paddingLeft: '9px',
-      color: theme.palette.text.disabled
-    },
-    '& li > a': {
-      color: 'inherit',
-      display: 'block',
-      textDecoration: 'none',
-      width: '100%'
-    }
-  },
-  '.ttop': {
-    paddingTop: theme.spacing(2.5),
-    marginLeft: theme.spacing(2.25),
-    color: theme.palette.text.primary,
-    '& a': {
-      color: 'inherit',
-      display: 'block',
-      textDecoration: 'none'
-    },
-    '& :hover': {
-      color: theme.palette.text.disabled
-    }
-  }
-}));
-
-export type AppTocItem = {
-  id: string;
-  subItems?: AppTocItem[];
-  is_admin?: boolean;
-};
-
-export type AppTocElementProps = {
-  translation: string;
-  item: AppTocItem;
-};
-
-const AppTocElement: React.FC<AppTocElementProps> = ({ translation, item }) => {
-  const location = useLocation();
-  const { t } = useTranslation([translation]);
-  const currentHash = location.hash && location.hash !== '' ? location.hash.substring(1) : null;
-  const active = currentHash && currentHash.startsWith(item.id) ? 'active' : null;
-  const { user: currentUser } = useAppUser();
-
-  return (
-    (!item.is_admin || (currentUser.is_admin && item.is_admin)) && (
-      <>
-        <li className={active}>
-          <Link to={`#${item.id}`} target="_self">
-            {t(item.id)}
-          </Link>
-        </li>
-        {active && item.subItems && (
-          <ul className="toc" style={{ fontSize: 'smaller', paddingInlineStart: '8px' }}>
-            {item.subItems.map(itm => (
-              <AppTocElement key={itm.id} item={itm} translation={translation} />
-            ))}
-          </ul>
-        )}
-      </>
-    )
-  );
-};
-
-type AppTocProps = {
-  children: ReactNode;
-  translation: string;
-  items: AppTocItem[];
-  titleI18nKey?: string;
-  topI18nKey?: string;
-};
-
-const AppToc = ({ children, translation, items, titleI18nKey = 'toc', topI18nKey = 'top' }: AppTocProps) => {
-  const { autoHide: autoHideAppbar } = useAppBar();
-  const { current: currentLayout } = useAppLayout();
-  const theme = useTheme();
-  const location = useLocation();
-  const { t } = useTranslation([translation]);
-
-  useEffect(() => {
-    if (location.hash && location.hash !== '') {
-      const scrollElement = document.getElementById(location.hash.substring(1));
-      if (scrollElement) {
-        // If element exists already, use native scrollIntoView.
-        scrollElement.scrollIntoView(true);
-      } else {
-        // eslint-disable-next-line no-console
-        console.log('[WARN] Trying to scroll to unknown ID:', location.hash);
-      }
-    }
-  }, [location.hash]);
-
-  return (
-    <TocRoot id="top">
-      <div id="content">{children}</div>
-      <div id="toc" className="tocBar">
-        <div
-          style={{
-            position: 'sticky',
-            top: theme.spacing(autoHideAppbar && currentLayout !== 'top' ? 5 : 13)
-          }}
-        >
-          {titleI18nKey && <div style={{ fontSize: '1.25rem', marginLeft: '18px' }}>{t(titleI18nKey)}</div>}
-          <ul className="toc">
-            {items && items.map(item => <AppTocElement key={item.id} item={item} translation={translation} />)}
-            {topI18nKey && (
-              <div className="ttop">
-                <Link to="#top" target="_self">
-                  {t(topI18nKey)}
-                </Link>
-              </div>
-            )}
-          </ul>
-        </div>
-      </div>
-    </TocRoot>
-  );
-};
-
-export default memo(AppToc);

package/commons/components/display/hooks/useAppColor.tsx

@@ -1,21 +0,0 @@
-import { colors } from '@mui/material';
-import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { useMemo } from 'react';
-
-type MuiColorType = keyof typeof colors;
-
-type MuiColor = typeof colors.blue;
-
-type MuiColorVariant = keyof typeof colors.blue;
-
-export default function useAppColor(
-  color: MuiColorType = 'grey',
-  lightVariant: MuiColorVariant = 100,
-  darkVariant: MuiColorVariant = 900
-) {
-  const { isDark } = useAppTheme();
-  return useMemo(() => {
-    // eslint-disable-next-line import/namespace
-    return (colors[color] as MuiColor)[isDark ? darkVariant : lightVariant];
-  }, [isDark, color, lightVariant, darkVariant]);
-}

package/commons/components/leftnav/LeftNavDrawer.tsx

@@ -1,172 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-import { ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon } from '@mui/icons-material';
-import {
-  Box,
-  ClickAwayListener,
-  Divider,
-  Drawer,
-  List,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Toolbar,
-  Tooltip,
-  styled,
-  useMediaQuery,
-  useTheme
-} from '@mui/material';
-import type { AppLeftNavGroup, AppLeftNavItem } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
-import { useAppConfigs, useAppLayout, useAppLeftNav } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import LeftNavGroup from '@cccsaurora/howler-ui/commons/components/leftnav/LeftNavGroup';
-import LeftNavItem from '@cccsaurora/howler-ui/commons/components/leftnav/LeftNavItem';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import AppName from '../topnav/AppName';
-
-const StyledDrawer = styled(Drawer, { shouldForwardProp: prop => prop !== 'open' && prop !== 'width' })<{
-  open: boolean;
-  width: number;
-}>(({ theme, open, width }) => ({
-  width,
-  flexShrink: 0,
-  heigth: '100%',
-  whiteSpace: 'nowrap',
-  '@media print': {
-    display: 'none !important'
-  },
-  transition: theme.transitions.create('width', {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.enteringScreen
-  }),
-  ...(!open && {
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen
-    }),
-    overflowX: 'hidden',
-    width: 0,
-    [theme.breakpoints.up('sm')]: {
-      width: theme.spacing(7)
-    },
-    [theme.breakpoints.only('xs')]: {
-      border: 'none'
-    }
-  }),
-  '& .MuiDrawer-paper': {
-    width,
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen
-    }),
-    ...(!open && {
-      transition: theme.transitions.create('width', {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen
-      }),
-      overflowX: 'hidden',
-      width: 0,
-      [theme.breakpoints.up('sm')]: {
-        width: theme.spacing(7)
-      },
-      [theme.breakpoints.only('xs')]: {
-        border: 'none'
-      }
-    })
-  }
-}));
-
-const LeftNavDrawer = () => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const { preferences } = useAppConfigs();
-  const layout = useAppLayout();
-  const leftnav = useAppLeftNav();
-  const isSmDown = useMediaQuery(theme.breakpoints.down('sm'));
-  const isTopLayout = layout.current === 'top';
-
-  const onCloseDrawerIfOpen = useCallback(() => {
-    if (isSmDown && leftnav.open) {
-      leftnav.setOpen(false);
-    }
-  }, [isSmDown, leftnav]);
-
-  const header = (
-    <div>
-      <Toolbar
-        sx={{
-          [theme.breakpoints.up('xs')]: {
-            padding: 0
-          }
-        }}
-      >
-        <AppName />
-      </Toolbar>
-      {!isTopLayout && <Divider />}
-    </div>
-  );
-
-  const hide = (
-    <List disablePadding>
-      <ListItemButton key="chevron" onClick={leftnav.toggle}>
-        <ListItemIcon>{leftnav.open ? <ChevronLeftIcon /> : <ChevronRightIcon />}</ListItemIcon>
-        <ListItemText primary={t('drawer.collapse')} />
-      </ListItemButton>
-    </List>
-  );
-
-  return (
-    <ClickAwayListener mouseEvent="onMouseDown" touchEvent="onTouchStart" onClickAway={onCloseDrawerIfOpen}>
-      <StyledDrawer
-        PaperProps={{ elevation: 1 }}
-        variant="permanent"
-        style={{ height: '100%' }}
-        width={preferences.leftnav.width}
-        open={leftnav.open}
-      >
-        {leftnav.open ? (
-          header
-        ) : (
-          <Tooltip title={preferences.appName} aria-label={preferences.appName} placement="right">
-            {header}
-          </Tooltip>
-        )}
-        <List disablePadding>
-          {leftnav.elements.map((e, i) => {
-            if (e.type === 'item') {
-              const item = e.element as AppLeftNavItem;
-              return <LeftNavItem key={item.id} item={item} onClick={isSmDown && onCloseDrawerIfOpen} />;
-            }
-            if (e.type === 'group') {
-              const item = e.element as AppLeftNavGroup;
-              return <LeftNavGroup key={item.id} group={item} onItemClick={isSmDown && onCloseDrawerIfOpen} />;
-            }
-            if (e.type === 'divider') {
-              return <Divider key={`divider-${i}`} />;
-            }
-            return null;
-          })}
-        </List>
-        {leftnav.elements?.length > 0 && <Divider />}
-        {leftnav.open ? (
-          hide
-        ) : (
-          <Tooltip title={t('drawer.expand')} aria-label={t('drawer.expand')} placement="right">
-            {hide}
-          </Tooltip>
-        )}
-        <Box
-          sx={{
-            height: '100%',
-            width: '100%',
-            '&:hover': {
-              cursor: 'pointer'
-            }
-          }}
-          onClick={leftnav.toggle}
-        />
-      </StyledDrawer>
-    </ClickAwayListener>
-  );
-};
-
-export default memo(LeftNavDrawer);

package/commons/components/leftnav/LeftNavGroup.tsx

@@ -1,144 +0,0 @@
-import { ChevronRight, ExpandLess, ExpandMore } from '@mui/icons-material';
-import { Collapse, List, ListItemButton, ListItemIcon, ListItemText, Popover, Tooltip, useTheme } from '@mui/material';
-import type { AppLeftNavGroup } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
-import { useAppConfigs, useAppLeftNav, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import LeftNavItem from '@cccsaurora/howler-ui/commons/components/leftnav/LeftNavItem';
-import { memo, useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-interface LeftNavGroupProps {
-  group: AppLeftNavGroup;
-  onItemClick: () => void;
-}
-
-const GroupListItem = memo(
-  ({
-    group,
-    leftNavOpen,
-    collapseOpen,
-    popoverOpen,
-    onClick
-  }: {
-    group: AppLeftNavGroup;
-    leftNavOpen: boolean;
-    collapseOpen: boolean;
-    popoverOpen;
-    onClick: (event: React.MouseEvent) => void;
-  }) => {
-    const { t } = useTranslation();
-    const title = group.i18nKey ? t(group.i18nKey) : group.title;
-    const theme = useTheme();
-
-    return (
-      <Tooltip title={!leftNavOpen ? title : ''} aria-label={title} placement="right">
-        <ListItemButton key={group.id} onClick={onClick} selected={popoverOpen}>
-          {!leftNavOpen && (
-            <ChevronRight
-              sx={{
-                position: 'absolute',
-                right: 0,
-                width: 16,
-                height: 16,
-                transform: popoverOpen && 'rotate(180deg)',
-                transition: theme.transitions.create('transform', {
-                  easing: theme.transitions.easing.sharp,
-                  duration: popoverOpen
-                    ? theme.transitions.duration.leavingScreen
-                    : theme.transitions.duration.enteringScreen
-                })
-              }}
-              fontSize="inherit"
-            />
-          )}
-
-          <ListItemIcon>{group.icon}</ListItemIcon>
-          <ListItemText primary={title} />
-          {collapseOpen ? <ExpandLess color="action" /> : <ExpandMore color="action" />}
-        </ListItemButton>
-      </Tooltip>
-    );
-  }
-);
-
-const LeftNavGroup = ({ group, onItemClick }: LeftNavGroupProps) => {
-  const user = useAppUser();
-  const leftnav = useAppLeftNav();
-  const { preferences } = useAppConfigs();
-  const [popoverTarget, setPopoverTarget] = useState<(EventTarget & Element) | undefined>();
-  const [collapseOpen, setCollapseOpen] = useState(false);
-
-  const groupHasIcons = group.items.some(i => !!i.icon);
-
-  const handleClick = useCallback(
-    (event: React.MouseEvent) => {
-      if (leftnav.open) {
-        setCollapseOpen(!collapseOpen);
-      } else {
-        setPopoverTarget(event ? event.currentTarget : undefined);
-      }
-    },
-    [leftnav.open, collapseOpen]
-  );
-
-  const onClosePopover = useCallback(() => setPopoverTarget(undefined), []);
-
-  useEffect(() => {
-    if (!leftnav.open && collapseOpen) {
-      setCollapseOpen(false);
-    }
-  }, [leftnav.open, collapseOpen]);
-
-  return user.validateProps(group.userPropValidators) ? (
-    <div>
-      <GroupListItem
-        group={group}
-        leftNavOpen={leftnav.open}
-        collapseOpen={collapseOpen}
-        onClick={handleClick}
-        popoverOpen={!!popoverTarget}
-      />
-      <Collapse in={collapseOpen} timeout="auto" unmountOnExit>
-        <List component="div" disablePadding>
-          {group.items.map(i => (
-            <LeftNavItem
-              key={i.id}
-              context="group"
-              item={i}
-              hideIcon={preferences.leftnav.hideNestedIcons}
-              onClick={onItemClick}
-            />
-          ))}
-        </List>
-      </Collapse>
-      <Popover
-        open={!!popoverTarget}
-        onClose={onClosePopover}
-        onClick={onClosePopover}
-        anchorEl={popoverTarget}
-        anchorOrigin={{
-          vertical: 'top',
-          horizontal: 'right'
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left'
-        }}
-      >
-        <List disablePadding>
-          {group.items.map(i => (
-            <LeftNavItem
-              popover
-              context="group"
-              key={i.id}
-              item={i}
-              hideIcon={preferences.leftnav.hideNestedIcons || !groupHasIcons}
-              onClick={onItemClick}
-            />
-          ))}
-        </List>
-      </Popover>
-    </div>
-  ) : null;
-};
-
-export default memo(LeftNavGroup);

package/commons/components/leftnav/LeftNavItem.tsx

@@ -1,73 +0,0 @@
-import { Box, ListItem, ListItemButton, ListItemIcon, ListItemText, Tooltip, useTheme } from '@mui/material';
-import type { AppLeftNavItem } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
-import { useAppLeftNav, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-
-type LeftNavItemProps = {
-  item: AppLeftNavItem;
-  popover?: boolean;
-  context?: 'item' | 'group';
-  hideIcon?: boolean;
-  onClick: () => void;
-};
-
-const LeftNavItemInner = ({ item, context, popover, hideIcon, label, leftnavOpen }) => {
-  const theme = useTheme();
-  const nested = item.nested !== undefined ? item.nested : context === 'group';
-  const showIcon = useMemo(() => item.icon && !hideIcon, [item, hideIcon]);
-
-  const spacer = useMemo(() => {
-    const showSpacer = !popover && leftnavOpen && nested;
-    return showSpacer && <Box id="spacer" sx={{ marginLeft: theme.spacing(showIcon ? 2 : 7) }} />;
-  }, [nested, showIcon, theme, leftnavOpen, popover]);
-
-  const itemIcon = useMemo(() => {
-    const showNested = !popover && context === 'group' && nested;
-    return (
-      showIcon && (
-        <ListItemIcon id="icon" sx={{ minWidth: showNested || popover ? 40 : undefined }}>
-          {item.icon}
-        </ListItemIcon>
-      )
-    );
-  }, [nested, showIcon, item.icon, context, popover]);
-
-  return (
-    <>
-      {spacer}
-      {itemIcon}
-      <ListItemText primary={label} />
-    </>
-  );
-};
-
-const LeftNavItem = ({ item, context = 'item', popover = false, hideIcon = false, onClick }: LeftNavItemProps) => {
-  const { t } = useTranslation();
-  const user = useAppUser();
-  const leftnav = useAppLeftNav();
-  const { text, i18nKey, nested, route, render, userPropValidators } = item;
-  const label = i18nKey ? t(i18nKey) : text;
-
-  return user.validateProps(userPropValidators) ? (
-    render ? (
-      <ListItem disablePadding>{render(leftnav.open)}</ListItem>
-    ) : (
-      <Tooltip title={!leftnav.open && !nested ? label : ''} aria-label={label} placement="right">
-        <ListItemButton component={route ? Link : null} to={route} key={text} onClick={onClick ? onClick : null}>
-          <LeftNavItemInner
-            hideIcon={hideIcon}
-            context={context}
-            popover={popover}
-            item={item}
-            label={label}
-            leftnavOpen={leftnav.open}
-          />
-        </ListItemButton>
-      </Tooltip>
-    )
-  ) : null;
-};
-
-export default memo(LeftNavItem);