@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.264

package/commons/components/pages/PageCenter.tsx

@@ -0,0 +1,46 @@
+import { Box } from '@mui/material';
+import PageContent from 'commons/components/pages//PageContent';
+import { type PageProps } from 'commons/components/pages//hooks/usePageProps';
+import { memo } from 'react';
+
+type PageCenterProps = PageProps & {
+  children: React.ReactNode;
+  maxWidth?: string;
+  textAlign?: string;
+};
+
+const PageCenter = ({
+  children,
+  height,
+  width = '95%',
+  maxWidth = '1200px',
+  textAlign = 'center',
+  ...props
+}: PageCenterProps) => {
+  return (
+    <Box
+      component="div"
+      height={height}
+      width={width}
+      maxWidth={maxWidth}
+      sx={theme => ({
+        height,
+        width,
+        textAlign,
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '0 auto 0 auto',
+        maxWidth,
+        [theme.breakpoints.down('sm')]: {
+          maxWidth: '100%'
+        }
+      })}
+    >
+      <PageContent {...props} height="100%">
+        {children}
+      </PageContent>
+    </Box>
+  );
+};
+
+export default memo(PageCenter);

package/commons/components/pages/PageContent.tsx

@@ -0,0 +1,13 @@
+import usePageProps, { type PageProps } from 'commons/components/pages/hooks/usePageProps';
+import { memo, type ReactNode } from 'react';
+
+type PageContentProps = PageProps & {
+  children?: ReactNode;
+};
+
+const PageContent = ({ children, ...props }: PageContentProps) => {
+  const pageProps = usePageProps({ props });
+  return <div {...pageProps}>{children}</div>;
+};
+
+export default memo(PageContent);

package/commons/components/pages/PageFullScreen.tsx

@@ -0,0 +1,74 @@
+import { Fullscreen, FullscreenExit } from '@mui/icons-material';
+import { Box, IconButton } from '@mui/material';
+import { useAppBar, useAppBarHeight, useAppLayout } from 'commons/components/app/hooks';
+import PageContent from 'commons/components/pages/PageContent';
+import useFullscreenStatus from 'commons/components/utils/hooks/useFullscreenStatus';
+import { memo, useCallback, useRef } from 'react';
+
+type PageFullscreenProps = {
+  children: React.ReactNode;
+  margin?: number;
+  mb?: number;
+  ml?: number;
+  mr?: number;
+  mt?: number;
+};
+
+const PageFullscreen = ({ children, margin = null, mb = 2, ml = 2, mr = 2, mt = 2 }: PageFullscreenProps) => {
+  const maximizableElement = useRef(null);
+  const appBarHeight = useAppBarHeight();
+  const layout = useAppLayout();
+  const appbar = useAppBar();
+  let isFullscreen: boolean;
+  let setIsFullscreen: () => void;
+  let fullscreenSupported: boolean;
+
+  const barWillHide = layout.current !== 'top' && appbar.autoHide;
+
+  try {
+    [isFullscreen, setIsFullscreen] = useFullscreenStatus(maximizableElement);
+  } catch (e) {
+    fullscreenSupported = false;
+    isFullscreen = false;
+    setIsFullscreen = undefined;
+  }
+
+  const handleEnterFullscreen = useCallback(() => {
+    setIsFullscreen();
+  }, [setIsFullscreen]);
+
+  const handleExitFullscreen = () => {
+    document.exitFullscreen();
+  };
+
+  return (
+    <Box ref={maximizableElement} component="div" sx={theme => ({ backgroundColor: theme.palette.background.default })}>
+      <Box
+        component="div"
+        sx={theme => ({
+          top: barWillHide || isFullscreen ? 0 : appBarHeight,
+          float: 'right',
+          paddingTop: theme.spacing(2),
+          position: 'sticky',
+          right: theme.spacing(2),
+          zIndex: theme.zIndex.appBar + 1
+        })}
+      >
+        {fullscreenSupported ? null : isFullscreen ? (
+          <IconButton onClick={handleExitFullscreen} size="large">
+            <FullscreenExit />
+          </IconButton>
+        ) : (
+          <IconButton onClick={handleEnterFullscreen} size="large">
+            <Fullscreen />
+          </IconButton>
+        )}
+      </Box>
+      <PageContent margin={margin} mb={mb} ml={ml} mr={mr} mt={mt}>
+        {children}
+      </PageContent>
+    </Box>
+  );
+};
+
+export default memo(PageFullscreen);

package/commons/components/pages/PageFullWidth.tsx

@@ -0,0 +1,30 @@
+import PageContent from 'commons/components/pages//PageContent';
+import { memo } from 'react';
+
+type PageFullWidthProps = {
+  children: React.ReactNode;
+  height?: number | string;
+  margin?: number;
+  mb?: number;
+  ml?: number;
+  mr?: number;
+  mt?: number;
+};
+
+const PageFullWidth: React.FC<PageFullWidthProps> = ({
+  children,
+  height,
+  margin = null,
+  mb = 2,
+  ml = 2,
+  mr = 2,
+  mt = 2
+}) => {
+  return (
+    <PageContent width="100%" height={height} margin={margin} mb={mb} ml={ml} mr={mr} mt={mt}>
+      {children}
+    </PageContent>
+  );
+};
+
+export default memo(PageFullWidth);

package/commons/components/pages/PageHeader.tsx

@@ -0,0 +1,117 @@
+import {
+  AppBar,
+  Button,
+  IconButton,
+  Toolbar,
+  Tooltip,
+  useTheme,
+  type ButtonProps,
+  type IconButtonProps
+} from '@mui/material';
+import { useAppBar, useAppBarHeight, useAppLayout } from 'commons/components/app/hooks';
+import { memo } from 'react';
+
+export type PageHeaderAction = {
+  key?: string;
+  title?: string;
+  tooltip?: string;
+  icon?: React.ReactNode;
+  color?: 'primary' | 'secondary';
+  action?: () => void;
+  btnProp?: ButtonProps | IconButtonProps;
+};
+
+type PageHeaderProps = {
+  children?: React.ReactNode;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  actions?: PageHeaderAction[];
+  isSticky?: boolean;
+  top?: number;
+  elevation?: number;
+  backgroundColor?: string;
+  className?: string;
+};
+
+const PageHeader: React.FC<PageHeaderProps> = ({
+  children,
+  left,
+  right,
+  actions,
+  backgroundColor,
+  className,
+  isSticky = false,
+  top = null,
+  elevation = 0
+}) => {
+  const theme = useTheme();
+  const layout = useAppLayout();
+  const appbar = useAppBar();
+  const appBarHeight = useAppBarHeight();
+  const barWillHide = layout.current !== 'top' && appbar.autoHide;
+
+  return (
+    <AppBar
+      id="header1"
+      position={isSticky ? 'sticky' : 'relative'}
+      style={{
+        top: top !== null ? top : isSticky ? (barWillHide ? 0 : appBarHeight) : null,
+        backgroundColor: backgroundColor || theme.palette.background.default,
+        zIndex: !isSticky ? theme.zIndex.appBar - 100 : null
+      }}
+      className={className}
+      elevation={elevation}
+      color="inherit"
+    >
+      {children}
+      {(left || right || actions) && (
+        <Toolbar style={{ minHeight: 0 }} disableGutters>
+          <div style={{ flexGrow: 1 }}>{left}</div>
+          <div>
+            {actions &&
+              actions.map((a, i) => {
+                let act = null;
+                if (a.title) {
+                  act = (
+                    <Button
+                      key={a.tooltip ? null : a.key ? a.key : `ph-action-${i}`}
+                      startIcon={a.icon}
+                      color={a.color}
+                      onClick={a.action}
+                      {...(a.btnProp as ButtonProps)}
+                      style={{ marginRight: theme.spacing(1) }}
+                    >
+                      {a.title}
+                    </Button>
+                  );
+                } else {
+                  act = (
+                    <IconButton
+                      key={a.tooltip ? null : a.key ? a.key : `ph-action-${i}`}
+                      color={a.color}
+                      onClick={a.action}
+                      {...(a.btnProp as IconButtonProps)}
+                      style={{ marginRight: theme.spacing(1) }}
+                      size="large"
+                    >
+                      {a.icon}
+                    </IconButton>
+                  );
+                }
+                return a.tooltip ? (
+                  <Tooltip key={a.key ? a.key : `ph-action-${i}`} title={a.tooltip}>
+                    {act}
+                  </Tooltip>
+                ) : (
+                  act
+                );
+              })}
+          </div>
+          <div>{right}</div>
+        </Toolbar>
+      )}
+    </AppBar>
+  );
+};
+
+export default memo(PageHeader);

package/commons/components/pages/hooks/usePageProps.tsx

@@ -0,0 +1,41 @@
+import { useMediaQuery, useTheme } from '@mui/material';
+import { useMemo } from 'react';
+
+export type PageProps = {
+  className?: string;
+  width?: string | number;
+  height?: string | number;
+  margin?: number;
+  mb?: number;
+  ml?: number;
+  mr?: number;
+  mt?: number;
+};
+
+const PagePropsDefaults = { margin: null, mt: 2, mr: 2, mb: 2, ml: 2 };
+
+export default function usePageProps({
+  props,
+  defaultOverrides = PagePropsDefaults
+}: {
+  props: PageProps;
+  defaultOverrides?: PageProps;
+}) {
+  const { className, width, height, margin, mt, mr, mb, ml } = { ...PagePropsDefaults, ...defaultOverrides, ...props };
+  const theme = useTheme();
+  const divider = useMediaQuery(theme.breakpoints.up('md')) ? 1 : 2;
+  return useMemo(
+    () => ({
+      className,
+      style: {
+        width,
+        height,
+        marginBottom: theme.spacing(margin !== null ? margin / divider : mb / divider),
+        marginLeft: theme.spacing(margin !== null ? margin / divider : ml / divider),
+        marginRight: theme.spacing(margin !== null ? margin / divider : mr / divider),
+        marginTop: theme.spacing(margin !== null ? margin / divider : mt / divider)
+      }
+    }),
+    [className, width, height, margin, mt, mr, mb, ml, divider, theme]
+  );
+}

package/commons/components/search/AppSearch.tsx

@@ -0,0 +1,256 @@
+import { Search } from '@mui/icons-material';
+import {
+  Box,
+  ClickAwayListener,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  emphasize,
+  IconButton,
+  Popper,
+  Slide,
+  Stack,
+  styled,
+  Tooltip,
+  useMediaQuery,
+  useTheme
+} from '@mui/material';
+
+import { useAppSearchService } from 'commons/components/app/hooks/useAppSearchService';
+import AppSearchInput from 'commons/components/search/AppSearchInput';
+import AppSearchResult from 'commons/components/search/AppSearchResult';
+import { parseEvent } from 'commons/components/utils/keyboard';
+import { forwardRef, useCallback, useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const MENU_LIST_SX = { maxHeight: 500, overflow: 'auto' };
+
+const AppSearchRoot = styled(Box, { shouldForwardProp: prop => prop !== 'menuOpen' })<{ menuOpen: boolean }>(({
+  theme,
+  menuOpen
+}) => {
+  const backgroundColor = emphasize(theme.palette.background.default, 0.1);
+  return {
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    borderBottomLeftRadius: menuOpen && 0,
+    borderBottomRightRadius: menuOpen && 0,
+
+    '.app-search-input': {
+      backgroundColor:
+        theme.palette.mode === 'dark' ? backgroundColor : menuOpen ? theme.palette.background.default : backgroundColor,
+      boxShadow: menuOpen && theme.shadows[4]
+    },
+    '.app-search-result': {
+      backgroundColor: theme.palette.mode === 'dark' ? backgroundColor : theme.palette.background.default,
+      borderBottomLeftRadius: theme.shape.borderRadius,
+      borderBottomRightRadius: theme.shape.borderRadius,
+      boxShadow: menuOpen && theme.shadows[4],
+      color: theme.palette.text.primary
+    }
+  };
+});
+
+const ModalTransition = forwardRef(function Transition(props: any, ref: any) {
+  const { children, ..._props } = props;
+  return (
+    <Slide direction="down" ref={ref} {..._props}>
+      {children}
+    </Slide>
+  );
+});
+
+export default function AppSearch() {
+  const theme = useTheme();
+  const menuRef = useRef<HTMLDivElement>(null);
+  const showSearchIcon = useMediaQuery(theme.breakpoints.down('lg'));
+  const { t } = useTranslation();
+  const { provided, state, service } = useAppSearchService();
+  const [value, setValue] = useState<string>('');
+  // const [fullscreen, setFullscreen] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (service.onMounted) {
+      service.onMounted(setValue, state);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // keyboard[window] handler.
+  // this is to trigger the CTLR+K shortcut to appsearch.
+  useEffect(() => {
+    const keyHandler = event => {
+      const { key, isCtrl } = parseEvent(event);
+      if (isCtrl && key === 'k') {
+        event.preventDefault();
+        const inputRef = menuRef.current.querySelector('input');
+        if (provided && !inputRef) {
+          state.set({ ...state, menu: !state.menu, mode: 'fullscreen' });
+        } else if (provided && state.menu) {
+          state.set({ ...state, mode: 'fullscreen' });
+        } else {
+          inputRef.focus();
+        }
+      }
+    };
+    window.addEventListener('keydown', keyHandler);
+    return () => {
+      window.removeEventListener('keydown', keyHandler);
+    };
+  }, [provided, state]);
+
+  // Search input focus handler.
+  const onFocus = useCallback(() => {
+    //state.setMenu(!!state?.items && state.items.length > 0);
+    state.set({ ...state, menu: true });
+  }, [state]);
+
+  // Search input change handler.
+  const onChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setValue(event.currentTarget.value);
+      if (service.onChange) {
+        service.onChange(event.currentTarget.value, state, setValue);
+      }
+    },
+    [service, state]
+  );
+
+  // keyboard[ENTER] handler.
+  const onEnter = useCallback(() => {
+    if (service.onEnter) {
+      state.set({ ...state, menu: true });
+      service.onEnter(value, state);
+    }
+  }, [value, state, service]);
+
+  // Keyboard handler.
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      const { isEnter, isEscape, isArrowDown } = parseEvent(event);
+      if (isEnter) {
+        onEnter();
+      } else if (isEscape) {
+        state.set({ ...state, menu: !state.menu });
+      } else if (isArrowDown) {
+        const result = document.querySelector('[data-tui-id="tui-app-search-result"]') as HTMLElement;
+        if (result) {
+          // Prevent scolling before menu list gets focus.
+          // Doing this prevents the menu list from scrolling down
+          //  and then back up on second arrow down.
+          event.preventDefault(); // prevent native scroll.
+          result.focus();
+        }
+      }
+    },
+    [state, onEnter]
+  );
+
+  // Clear search input handler.
+  const onClear = useCallback(() => {
+    setValue('');
+    state.set({ ...state, items: null });
+  }, [state]);
+
+  // Fullscreen modal toggle handler.
+  const onToggleFullscreen = useCallback(() => {
+    state.set({ ...state, mode: state.mode === 'inline' ? 'fullscreen' : 'inline' });
+  }, [state]);
+
+  return (
+    <ClickAwayListener onClickAway={() => state.set({ ...state, menu: false })}>
+      <AppSearchRoot ref={menuRef} sx={{ mr: !showSearchIcon && 1 }} menuOpen={state.menu}>
+        {showSearchIcon ? (
+          <IconButton
+            color="inherit"
+            size="large"
+            onClick={() => state.set({ ...state, menu: !state.menu, mode: 'fullscreen' })}
+          >
+            <Tooltip
+              title={
+                <Stack direction="column" textAlign="center">
+                  <span>{t('app.search.fullscreen')}</span> <span>CTLR+K</span>
+                </Stack>
+              }
+            >
+              <Search />
+            </Tooltip>
+          </IconButton>
+        ) : (
+          <>
+            <AppSearchInput
+              showToggle
+              provided={provided}
+              className="app-search-input"
+              value={value}
+              searching={state.searching}
+              open={state.menu}
+              onFocus={onFocus}
+              onChange={onChange}
+              onKeyDown={onKeyDown}
+              onClear={onClear}
+              onToggleFullscreen={onToggleFullscreen}
+            />
+            {provided && (
+              <Popper
+                open={state.menu && state.mode === 'inline'}
+                anchorEl={menuRef.current}
+                placement="bottom-end"
+                sx={_theme => ({ width: '100%', zIndex: _theme.zIndex.appBar + 1 })}
+                disablePortal
+              >
+                <AppSearchResult className="app-search-result" sx={MENU_LIST_SX} />
+              </Popper>
+            )}
+          </>
+        )}
+        <Dialog
+          disableRestoreFocus
+          fullWidth
+          maxWidth="md"
+          TransitionComponent={ModalTransition}
+          open={state.menu && state.mode === 'fullscreen'}
+          onClose={() => state.set({ ...state, mode: 'inline', menu: false })}
+          sx={{
+            maxHeight: '75%',
+            margin: 0,
+            '.MuiDialog-container': {
+              alignItems: 'start'
+            }
+          }}
+          PaperProps={{
+            sx: {
+              borderTopLeftRadius: 0,
+              borderTopRightRadius: 0,
+              margin: 0,
+              width: '100%'
+            }
+          }}
+        >
+          <DialogTitle>
+            <AppSearchInput
+              autoFocus
+              className="app-search-input"
+              style={{ backgroundColor: emphasize(theme.palette.background.default, 0.1) }}
+              showToggle={false}
+              value={value}
+              searching={state.searching}
+              open={false}
+              onFocus={onFocus}
+              onChange={onChange}
+              onKeyDown={onKeyDown}
+              onClear={onClear}
+              onToggleFullscreen={onToggleFullscreen}
+            />
+          </DialogTitle>
+          {provided && state.items && (
+            <DialogContent>
+              <AppSearchResult />
+            </DialogContent>
+          )}
+          {provided && service.footerRenderer && service.footerRenderer(state)}
+        </Dialog>
+      </AppSearchRoot>
+    </ClickAwayListener>
+  );
+}

package/commons/components/search/AppSearchInput.tsx

@@ -0,0 +1,104 @@
+import { Clear, Search } from '@mui/icons-material';
+import {
+  Button,
+  CircularProgress,
+  IconButton,
+  InputAdornment,
+  InputBase,
+  Stack,
+  Tooltip,
+  type InputBaseProps
+} from '@mui/material';
+
+import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type AppSearchInputProps = {
+  searching?: boolean;
+  provided?: boolean;
+  showToggle?: boolean;
+  open?: boolean;
+  onClear: () => void;
+  onToggleFullscreen: () => void;
+} & InputBaseProps;
+
+const AppSearchInput = ({
+  searching,
+  provided,
+  autoFocus,
+  showToggle,
+  value,
+  open,
+  onClear,
+  onToggleFullscreen,
+  onFocus,
+  onChange,
+  onKeyDown,
+  ...inputProps
+}: AppSearchInputProps) => {
+  const { t } = useTranslation();
+  const rootRef = useRef<HTMLDivElement>();
+
+  // CTRL+K button click handler.
+  // Decicde whether to open search in normal or fullscreen/modal mode.
+  const onToggleClick = useCallback(() => {
+    if (open && provided) {
+      onToggleFullscreen();
+    } else {
+      rootRef.current.querySelector('input').focus();
+    }
+  }, [open, provided, onToggleFullscreen]);
+
+  return (
+    <Stack direction="row" ref={rootRef}>
+      <InputBase
+        {...inputProps}
+        fullWidth
+        autoComplete="off"
+        autoFocus={autoFocus}
+        value={value}
+        onFocus={onFocus}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        placeholder={t('quicksearch.placeholder')}
+        inputProps={{ 'aria-label': t('quicksearch.aria') }}
+        startAdornment={
+          <InputAdornment position="start" sx={theme => ({ color: theme.palette.text.disabled })}>
+            {searching ? <CircularProgress size={24} color="inherit" /> : <Search color="inherit" />}
+          </InputAdornment>
+        }
+        endAdornment={
+          <InputAdornment position="end" sx={theme => ({ color: theme.palette.text.disabled })}>
+            {showToggle && (
+              <Tooltip title={t(open && provided ? 'app.search.fullscreen' : 'app.search.shortcut')}>
+                <Button size="small" color="inherit" onClick={onToggleClick}>
+                  CTRL+K
+                </Button>
+              </Tooltip>
+            )}
+            <IconButton color="inherit" onClick={onClear}>
+              <Clear />
+            </IconButton>
+          </InputAdornment>
+        }
+        sx={theme => ({
+          color: theme.palette.text.secondary,
+          width: '100%',
+          paddingTop: 0.5,
+          paddingBottom: 0.5,
+          paddingLeft: 1.5,
+          paddingRight: 1,
+          // backgroundColor: emphasize(theme.palette.background.default, 0.1),
+          // backgroundColor: theme.palette.background,
+          borderTopLeftRadius: theme.spacing(0.5),
+          borderTopRightRadius: theme.spacing(0.5),
+          borderBottomLeftRadius: open ? 0 : theme.spacing(0.5),
+          borderBottomRightRadius: open ? 0 : theme.spacing(0.5)
+          // boxShadow: theme.palette.mode === 'light' && theme.shadows[2]
+        })}
+      />
+    </Stack>
+  );
+};
+
+export default memo(AppSearchInput);