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

package/components/elements/display/ItemManager.tsx

@@ -0,0 +1,146 @@
+import { Box, Fab, IconButton, LinearProgress, Stack, Tooltip, Typography, useMediaQuery } from '@mui/material';
+import PageCenter from 'commons/components/pages/PageCenter';
+import { useTranslation } from 'react-i18next';
+
+import { Add, Search } from '@mui/icons-material';
+import type { HowlerSearchResponse } from 'api/search';
+import type { TuiListItemOnSelect, TuiListItemRenderer } from 'components/elements/addons/lists';
+import { TuiList } from 'components/elements/addons/lists';
+import SearchPagination from 'components/elements/addons/search/SearchPagination';
+import SearchTotal from 'components/elements/addons/search/SearchTotal';
+import ErrorBoundary from 'components/routes/ErrorBoundary';
+import type { FC, ReactNode } from 'react';
+import Phrase from '../addons/search/phrase/Phrase';
+
+interface ItemManagerProps {
+  aboveSearch?: ReactNode;
+  afterSearch?: ReactNode;
+  belowSearch?: ReactNode;
+  searchFilters?: ReactNode;
+  hasError: boolean;
+  onPageChange: (nextOffset: number) => void;
+  onSearch: () => void;
+  onCreate?: () => void;
+  onSelect?: TuiListItemOnSelect<unknown>;
+  phrase: string;
+  renderer: TuiListItemRenderer<unknown>;
+  response: HowlerSearchResponse<unknown>;
+  searchAdornment?: ReactNode;
+  searching: boolean;
+  createPrompt?: string;
+  searchPrompt: string;
+  setPhrase: (value: string) => void;
+  createIcon?: ReactNode;
+}
+
+// eslint-disable-next-line comma-spacing
+const ItemManager: FC<ItemManagerProps> = ({
+  aboveSearch,
+  afterSearch,
+  belowSearch,
+  searchFilters,
+  hasError,
+  onPageChange,
+  onSearch,
+  onSelect,
+  onCreate,
+  phrase,
+  renderer,
+  response,
+  searchAdornment,
+  searching,
+  createPrompt,
+  searchPrompt,
+  setPhrase,
+  createIcon
+}) => {
+  const { t } = useTranslation();
+  const isNarrow = useMediaQuery('(max-width: 1800px)');
+
+  return (
+    <PageCenter maxWidth="1200px" textAlign="left" height="100%">
+      <ErrorBoundary>
+        <Stack spacing={1} sx={{ position: 'relative' }}>
+          {aboveSearch}
+          <Stack direction="row" spacing={1}>
+            <Stack sx={{ flex: 1 }}>
+              <Phrase
+                value={phrase}
+                onChange={setPhrase}
+                onKeyDown={({ isEnter }) => {
+                  if (isEnter) {
+                    onSearch();
+                  }
+                }}
+                error={hasError}
+                InputProps={{
+                  sx: {
+                    pr: 1
+                  }
+                }}
+                startAdornment={
+                  <Tooltip title={t(searchPrompt)}>
+                    <IconButton onClick={() => onSearch()}>
+                      <Search />
+                    </IconButton>
+                  </Tooltip>
+                }
+                endAdornment={<>{searchAdornment}</>}
+              />
+              {searching && (
+                <LinearProgress
+                  sx={theme => ({
+                    mt: -0.5,
+                    borderBottomLeftRadius: theme.shape.borderRadius,
+                    borderBottomRightRadius: theme.shape.borderRadius
+                  })}
+                />
+              )}
+            </Stack>
+            {afterSearch}
+          </Stack>
+          {searchFilters}
+          {response && (
+            <Stack direction="row" alignItems="center" mt={0.5}>
+              <SearchTotal
+                total={response.total}
+                pageLength={response.items.length}
+                offset={response.offset}
+                sx={theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' })}
+              />
+              <Box flex={1} />
+              <SearchPagination
+                total={response.total}
+                limit={response.rows}
+                offset={response.offset}
+                onChange={onPageChange}
+              />
+            </Stack>
+          )}
+          {belowSearch}
+          <TuiList onSelection={onSelect}>{renderer}</TuiList>
+          {onCreate && (
+            <Fab
+              variant="extended"
+              size="large"
+              color="primary"
+              sx={theme => ({
+                textTransform: 'none',
+                position: isNarrow ? 'fixed' : 'absolute',
+                right: isNarrow ? theme.spacing(2) : `calc(100% + ${theme.spacing(5)})`,
+                whiteSpace: 'nowrap',
+                ...(isNarrow ? { bottom: theme.spacing(1) } : { top: 0 })
+              })}
+              onClick={onCreate}
+            >
+              {createIcon ?? <Add sx={{ mr: 1 }} />}
+              <Typography>{t(createPrompt ?? 'create')}</Typography>
+            </Fab>
+          )}
+        </Stack>
+      </ErrorBoundary>
+    </PageCenter>
+  );
+};
+
+export default ItemManager;

package/components/elements/display/Markdown.tsx

@@ -0,0 +1,200 @@
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+import {
+  Alert,
+  Box,
+  darken,
+  lighten,
+  Paper,
+  Table,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  useTheme
+} from '@mui/material';
+import { useAppTheme } from 'commons/components/app/hooks';
+import mermaid from 'mermaid';
+import { memo, useEffect, type FC, type ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import { Link } from 'react-router-dom';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import DynamicTabs from './DynamicTabs';
+import Image from './Image';
+import { Notebook } from './Notebook';
+import JSONViewer from './json/JSONViewer';
+import { codeTabs } from './markdownPlugins/tabs';
+
+export interface MarkdownProps {
+  md: string;
+  components?: { [index: string]: ReactElement };
+  disableLinks?: boolean;
+}
+
+const customComponents = (type: string, children: any) => {
+  const child = children instanceof Array ? children[0] : children;
+  if (type === 'alert') {
+    return (
+      <Alert severity="info" variant="outlined" sx={{ '.MuiAlert-message': { whiteSpace: 'normal' } }}>
+        {child}
+      </Alert>
+    );
+  } else if (type === 'notebook') {
+    return <Notebook ipynb={child} />;
+  } else if (type === 'tabs') {
+    return (
+      <DynamicTabs
+        tabs={JSON.parse(child).map(t => ({ title: t.title, children: customComponents(t.lang, t.value) }))}
+      />
+    );
+  } else {
+    return <code>{child}</code>;
+  }
+};
+
+const Markdown: FC<MarkdownProps> = ({ md, components = {}, disableLinks = false }) => {
+  const theme = useTheme();
+  const { isDark } = useAppTheme();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: isDark ? 'dark' : 'base',
+      securityLevel: 'loose',
+      themeCSS: `
+      .relation {
+        stroke: ${theme.palette.divider};
+        stroke-width: 1;
+      }
+
+      .nodes rect {
+        fill: ${(isDark ? lighten : darken)(theme.palette.background.paper, 0.05)}
+      }
+      `
+    });
+  }, [isDark, theme]);
+
+  useEffect(() => {
+    mermaid.run();
+  });
+
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm, codeTabs]}
+      rehypePlugins={[rehypeRaw]}
+      urlTransform={(value: string) => value}
+      components={{
+        code({ node, className, children, ...props }) {
+          if (node.children?.length === 1 && node.children[0].type === 'text') {
+            if (node.children[0].value.startsWith('t(')) {
+              return <span>{t(node.children[0].value.replace(/t\((.+)\)/, '$1'))}</span>;
+            } else if (components[node.children[0].value]) {
+              return components[node.children[0].value];
+            }
+          }
+
+          const match = /language-(\w+)/.exec(className || '');
+
+          if (match && ['alert', 'notebook', 'tabs'].includes(match[1])) {
+            return customComponents(match[1], children);
+          }
+
+          if (match?.[1] === 'mermaid') {
+            return <pre className="mermaid">{(node.children[0] as any).value}</pre>;
+          }
+
+          if (match?.[1] === 'json') {
+            try {
+              return <JSONViewer data={JSON.parse((node.children[0] as any).value)} />;
+            } catch (e) {
+              return <code style={{ color: 'red' }}>{t('markdown.json.invalid')}</code>;
+            }
+          }
+
+          return match ? (
+            <SyntaxHighlighter
+              // eslint-disable-next-line react/no-children-prop
+              children={String(children).replace(/\n$/, '')}
+              style={isDark ? oneDark : oneLight}
+              language={match[1]}
+              PreTag="div"
+              {...props}
+            />
+          ) : (
+            <code className={className} {...props}>
+              {children}
+            </code>
+          );
+        },
+        blockquote({ children }) {
+          return <Box sx={{ pl: 1, borderLeft: `2px solid ${theme.palette.divider}` }}>{children}</Box>;
+        },
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        img({ node, ...props }) {
+          // eslint-disable-next-line jsx-a11y/alt-text
+          return <Image {...props} style={{ ...props.style, maxWidth: '75%' }} />;
+        },
+        table({ children }) {
+          return (
+            <TableContainer component={Paper}>
+              <Table>{children}</Table>
+            </TableContainer>
+          );
+        },
+        thead({ children }) {
+          return <TableHead>{children}</TableHead>;
+        },
+        tr({ children }) {
+          return <TableRow>{children}</TableRow>;
+        },
+        th({ children, ...props }) {
+          return <TableCell style={props.style}>{children}</TableCell>;
+        },
+        td({ children, ...props }) {
+          return <TableCell style={props.style}>{children}</TableCell>;
+        },
+        a({ children, ...props }) {
+          if (!props.href) {
+            return <a {...props}>{children}</a>;
+          }
+
+          if (props.href?.startsWith('/')) {
+            return (
+              <Link to={props.href} {...props}>
+                {children}
+              </Link>
+            );
+          }
+
+          if (!disableLinks) {
+            return <a {...props}>{children}</a>;
+          }
+
+          if (props.href.startsWith('#')) {
+            return <a {...props}>{children}</a>;
+          }
+
+          const parsed = new URL(props.href);
+          if (parsed.hostname.endsWith('gc.ca')) {
+            return <a {...props}>{children}</a>;
+          }
+
+          return (
+            <span>
+              {children}
+              {props.href !== children && ` (${props.href})`}
+            </span>
+          );
+        }
+      }}
+    >
+      {md?.replace(/<!--.+?-->/g, '')}
+    </ReactMarkdown>
+  );
+};
+
+export default memo(Markdown);

package/components/elements/display/Modal.tsx

@@ -0,0 +1,44 @@
+import { Box, Modal as MuiModal } from '@mui/material';
+import { ModalContext } from 'components/app/providers/ModalProvider';
+import type { FC } from 'react';
+import { useCallback, useContext } from 'react';
+
+const Modal: FC = () => {
+  const { content, setContent, options } = useContext(ModalContext);
+
+  const onClose = useCallback(() => {
+    if (options && !options.disableClose) {
+      setContent(null);
+    }
+  }, [options, setContent]);
+
+  return (
+    <MuiModal open={!!content} onClose={onClose} sx={{ zIndex: '1500' }}>
+      <Box
+        sx={theme => ({
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          maxWidth: options.maxWidth || '1200px',
+          maxHeight: options.maxHeight || '400px',
+          transform: 'translate(-50%, -50%)',
+          backgroundColor: 'background.paper',
+          borderRadius: theme.shape.borderRadius,
+          p: 2,
+          outline: 0
+        })}
+        onKeyDown={e => {
+          e.stopPropagation();
+
+          if (e.key.toLowerCase() === 'escape') {
+            onClose();
+          }
+        }}
+      >
+        {content}
+      </Box>
+    </MuiModal>
+  );
+};
+
+export default Modal;

package/components/elements/display/Notebook.tsx

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+import { IpynbRenderer } from 'react-ipynb-renderer';
+import 'react-ipynb-renderer/dist/styles/monokai.css';
+
+export const Notebook: FC<{ ipynb: string }> = ({ ipynb }) => {
+  return <IpynbRenderer ipynb={JSON.parse(ipynb)} />;
+};

package/components/elements/display/QueryResultText.tsx

@@ -0,0 +1,25 @@
+import { Typography } from '@mui/material';
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+const QueryResultText: FC<{ count: number; query: string }> = ({ count, query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Typography
+      sx={theme => ({
+        color: theme.palette.text.secondary,
+        fontSize: '0.9em',
+        fontStyle: 'italic',
+        mb: 0.5,
+        '& a': { color: theme.palette.text.secondary }
+      })}
+      variant="body2"
+    >
+      {t('search.total', { count })} <Link to={`/hits?query=${encodeURIComponent(query)}`}>{t('search.open')}</Link>
+    </Typography>
+  );
+};
+
+export default QueryResultText;

package/components/elements/display/TextDivider.tsx

@@ -0,0 +1,48 @@
+import { styled } from '@mui/material';
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const OuterDiv = styled('div')(({ theme }) => ({
+  display: 'inline-block',
+  textAlign: 'center',
+  width: '100%',
+  margin: '30px 0',
+  position: 'relative',
+  '&:before': {
+    content: '""',
+    border: 'thin solid',
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    right: 'calc(50% + 30px)',
+    borderColor: theme.palette.divider
+  },
+  '&:after': {
+    content: '""',
+    border: 'thin solid',
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    left: 'calc(50% + 30px)',
+    borderColor: theme.palette.divider
+  }
+}));
+
+const InnerDiv = styled('div')(() => ({
+  left: '50%',
+  marginLeft: '-30px',
+  position: 'absolute',
+  top: '-10px',
+  width: '60px'
+}));
+
+const TextDivider: FC = () => {
+  const { t } = useTranslation();
+  return (
+    <OuterDiv>
+      <InnerDiv>{t('divider')}</InnerDiv>
+    </OuterDiv>
+  );
+};
+
+export default TextDivider;

package/components/elements/display/TypingIndicator.tsx

@@ -0,0 +1,41 @@
+import { Circle } from '@mui/icons-material';
+import { alpha, Stack } from '@mui/material';
+
+const TypingIndicator = () => {
+  return (
+    <Stack
+      direction="row"
+      sx={theme => ({
+        ml: 1,
+        p: 1,
+        height: '20px',
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: alpha('rgb(128, 128, 128)', 0.25),
+        '@keyframes bounce': {
+          '0%, 60%, 100%': { transform: 'translateY(0)' },
+          '30%': { transform: 'translateY(-6px)' }
+        },
+        '& > svg': {
+          fontSize: '6px',
+          animation: 'bounce 750ms infinite ease-in-out',
+          marginBottom: '-4px',
+          opacity: 0.75,
+          '&:nth-of-type(2)': {
+            animationDelay: '100ms'
+          },
+          '&:nth-of-type(3)': {
+            animationDelay: '200ms'
+          }
+        }
+      })}
+      display="flex"
+      alignItems="center"
+    >
+      <Circle />
+      <Circle />
+      <Circle />
+    </Stack>
+  );
+};
+
+export default TypingIndicator;

package/components/elements/display/UserPageWrapper.tsx

@@ -0,0 +1,20 @@
+import { Grid, Stack } from '@mui/material';
+import PageCenter from 'commons/components/pages/PageCenter';
+import type { HowlerUser } from 'models/entities/HowlerUser';
+import type { FC, PropsWithChildren } from 'react';
+import HowlerAvatarHeader from './HowlerAvatarHeader';
+
+const UserPageWrapper: FC<PropsWithChildren<{ user: HowlerUser }>> = ({ user, children }) => (
+  <PageCenter textAlign="left" mt={6}>
+    <Grid container spacing={2} justifyContent="center">
+      <HowlerAvatarHeader user={user} />
+      <Grid item sm={12} md={9}>
+        <Stack direction="column" spacing={2}>
+          {children}
+        </Stack>
+      </Grid>
+    </Grid>
+  </PageCenter>
+);
+
+export default UserPageWrapper;

package/components/elements/display/features/DevelopmentBanner.tsx

@@ -0,0 +1,24 @@
+import { Alert, AlertTitle } from '@mui/material';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StorageKey } from 'utils/constants';
+
+const DevelopmentBanner: FC = () => {
+  const { t } = useTranslation();
+
+  const [disableWarning, setDisableWarning] = useMyLocalStorageItem(StorageKey.DISABLE_FEATURE_WARNING, false);
+
+  if (disableWarning) {
+    return null;
+  }
+
+  return (
+    <Alert severity="warning" variant="outlined" onClose={() => setDisableWarning(true)}>
+      <AlertTitle>{t('features.warning.title')}</AlertTitle>
+      {t('features.warning.description')}
+    </Alert>
+  );
+};
+
+export default DevelopmentBanner;

package/components/elements/display/features/DevelopmentIcon.tsx

@@ -0,0 +1,24 @@
+import { WarningAmberOutlined } from '@mui/icons-material';
+import { Tooltip } from '@mui/material';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StorageKey } from 'utils/constants';
+
+const DevelopmentIcon: FC = () => {
+  const { t } = useTranslation();
+
+  const [disableWarning] = useMyLocalStorageItem(StorageKey.DISABLE_FEATURE_WARNING, false);
+
+  if (!disableWarning) {
+    return null;
+  }
+
+  return (
+    <Tooltip title={t('features.warning.description')}>
+      <WarningAmberOutlined color="warning" fontSize="small" />
+    </Tooltip>
+  );
+};
+
+export default DevelopmentIcon;