@cccsaurora/howler-ui 2.14.0-dev.250 → 2.14.0-dev.255

package/components/elements/display/Image.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Close } from '@mui/icons-material';
-import { Box, IconButton, lighten, Modal } from '@mui/material';
-import { useState } from 'react';
-const Image = props => {
-    const [showModal, setShowModal] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx("img", { ...props, style: { ...(props.style ?? {}), cursor: 'pointer' }, onClick: () => setShowModal(true) }), _jsx(Modal, { open: showModal, onClose: () => setShowModal(false), children: _jsxs(Box, { sx: {
-                        width: '100%',
-                        height: '100%',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center'
-                    }, onClick: () => setShowModal(false), children: [_jsx(IconButton, { onClick: () => setShowModal(false), sx: theme => ({
-                                position: 'fixed',
-                                top: '2rem',
-                                right: '2rem',
-                                backgroundColor: 'background.paper',
-                                '&:hover': {
-                                    backgroundColor: lighten(theme.palette.background.paper, 0.1)
-                                }
-                            }), children: _jsx(Close, {}) }), _jsx("img", { ...props, style: { ...(props.style ?? {}), maxWidth: '70vw', maxHeight: '70vh' } })] }) })] }));
-};
-export default Image;

package/components/elements/display/ItemManager.d.ts

@@ -1,25 +0,0 @@
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import type { TuiListItemOnSelect, TuiListItemRenderer } from '@cccsaurora/howler-ui/components/elements/addons/lists';
-import type { FC, ReactNode } from 'react';
-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;
-}
-declare const ItemManager: FC<ItemManagerProps>;
-export default ItemManager;

package/components/elements/display/ItemManager.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Fab, IconButton, LinearProgress, Stack, Tooltip, Typography, useMediaQuery } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import { useTranslation } from 'react-i18next';
-import { Add, Search } from '@mui/icons-material';
-import { TuiList } from '@cccsaurora/howler-ui/components/elements/addons/lists';
-import SearchPagination from '@cccsaurora/howler-ui/components/elements/addons/search/SearchPagination';
-import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
-import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
-import Phrase from '../addons/search/phrase/Phrase';
-// eslint-disable-next-line comma-spacing
-const ItemManager = ({ 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 (_jsx(PageCenter, { maxWidth: "1200px", textAlign: "left", height: "100%", children: _jsx(ErrorBoundary, { children: _jsxs(Stack, { spacing: 1, sx: { position: 'relative' }, children: [aboveSearch, _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { sx: { flex: 1 }, children: [_jsx(Phrase, { value: phrase, onChange: setPhrase, onKeyDown: ({ isEnter }) => {
-                                            if (isEnter) {
-                                                onSearch();
-                                            }
-                                        }, error: hasError, InputProps: {
-                                            sx: {
-                                                pr: 1
-                                            }
-                                        }, startAdornment: _jsx(Tooltip, { title: t(searchPrompt), children: _jsx(IconButton, { onClick: () => onSearch(), children: _jsx(Search, {}) }) }), endAdornment: _jsx(_Fragment, { children: searchAdornment }) }), searching && (_jsx(LinearProgress, { sx: theme => ({
-                                            mt: -0.5,
-                                            borderBottomLeftRadius: theme.shape.borderRadius,
-                                            borderBottomRightRadius: theme.shape.borderRadius
-                                        }) }))] }), afterSearch] }), searchFilters, response && (_jsxs(Stack, { direction: "row", alignItems: "center", mt: 0.5, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, onChange: onPageChange })] })), belowSearch, _jsx(TuiList, { onSelection: onSelect, children: renderer }), onCreate && (_jsxs(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, children: [createIcon ?? _jsx(Add, { sx: { mr: 1 } }), _jsx(Typography, { children: t(createPrompt ?? 'create') })] }))] }) }) }));
-};
-export default ItemManager;

package/components/elements/display/Markdown.d.ts

@@ -1,10 +0,0 @@
-import { type ReactElement } from 'react';
-export interface MarkdownProps {
-    md: string;
-    components?: {
-        [index: string]: ReactElement;
-    };
-    disableLinks?: boolean;
-}
-declare const _default: import("react").NamedExoticComponent<MarkdownProps>;
-export default _default;

package/components/elements/display/Markdown.js

@@ -1,133 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* 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 '@cccsaurora/howler-ui/commons/components/app/hooks';
-import mermaid from 'mermaid';
-import { memo, useEffect } 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';
-const customComponents = (type, children) => {
-    const child = children instanceof Array ? children[0] : children;
-    if (type === 'alert') {
-        return (_jsx(Alert, { severity: "info", variant: "outlined", sx: { '.MuiAlert-message': { whiteSpace: 'normal' } }, children: child }));
-    }
-    else if (type === 'notebook') {
-        return _jsx(Notebook, { ipynb: child });
-    }
-    else if (type === 'tabs') {
-        return (_jsx(DynamicTabs, { tabs: JSON.parse(child).map(t => ({ title: t.title, children: customComponents(t.lang, t.value) })) }));
-    }
-    else {
-        return _jsx("code", { children: child });
-    }
-};
-const Markdown = ({ 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 (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, codeTabs], rehypePlugins: [rehypeRaw], urlTransform: (value) => 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 _jsx("span", { children: t(node.children[0].value.replace(/t\((.+)\)/, '$1')) });
-                    }
-                    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 _jsx("pre", { className: "mermaid", children: node.children[0].value });
-                }
-                if (match?.[1] === 'json') {
-                    try {
-                        return _jsx(JSONViewer, { data: JSON.parse(node.children[0].value) });
-                    }
-                    catch (e) {
-                        return _jsx("code", { style: { color: 'red' }, children: t('markdown.json.invalid') });
-                    }
-                }
-                return match ? (_jsx(SyntaxHighlighter
-                // eslint-disable-next-line react/no-children-prop
-                , { 
-                    // eslint-disable-next-line react/no-children-prop
-                    children: String(children).replace(/\n$/, ''), style: isDark ? oneDark : oneLight, language: match[1], PreTag: "div", ...props })) : (_jsx("code", { className: className, ...props, children: children }));
-            },
-            blockquote({ children }) {
-                return _jsx(Box, { sx: { pl: 1, borderLeft: `2px solid ${theme.palette.divider}` }, children: children });
-            },
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            img({ node, ...props }) {
-                // eslint-disable-next-line jsx-a11y/alt-text
-                return _jsx(Image, { ...props, style: { ...props.style, maxWidth: '75%' } });
-            },
-            table({ children }) {
-                return (_jsx(TableContainer, { component: Paper, children: _jsx(Table, { children: children }) }));
-            },
-            thead({ children }) {
-                return _jsx(TableHead, { children: children });
-            },
-            tr({ children }) {
-                return _jsx(TableRow, { children: children });
-            },
-            th({ children, ...props }) {
-                return _jsx(TableCell, { style: props.style, children: children });
-            },
-            td({ children, ...props }) {
-                return _jsx(TableCell, { style: props.style, children: children });
-            },
-            a({ children, ...props }) {
-                if (!props.href) {
-                    return _jsx("a", { ...props, children: children });
-                }
-                if (props.href?.startsWith('/')) {
-                    return (_jsx(Link, { to: props.href, ...props, children: children }));
-                }
-                if (!disableLinks) {
-                    return _jsx("a", { ...props, children: children });
-                }
-                if (props.href.startsWith('#')) {
-                    return _jsx("a", { ...props, children: children });
-                }
-                const parsed = new URL(props.href);
-                if (parsed.hostname.endsWith('gc.ca')) {
-                    return _jsx("a", { ...props, children: children });
-                }
-                return (_jsxs("span", { children: [children, props.href !== children && ` (${props.href})`] }));
-            }
-        }, children: md?.replace(/<!--.+?-->/g, '') }));
-};
-export default memo(Markdown);

package/components/elements/display/Modal.d.ts

@@ -1,3 +0,0 @@
-import type { FC } from 'react';
-declare const Modal: FC;
-export default Modal;

package/components/elements/display/Modal.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Modal as MuiModal } from '@mui/material';
-import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
-import { useCallback, useContext } from 'react';
-const Modal = () => {
-    const { content, setContent, options } = useContext(ModalContext);
-    const onClose = useCallback(() => {
-        if (options && !options.disableClose) {
-            setContent(null);
-        }
-    }, [options, setContent]);
-    return (_jsx(MuiModal, { open: !!content, onClose: onClose, sx: { zIndex: '1500' }, children: _jsx(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();
-                }
-            }, children: content }) }));
-};
-export default Modal;

package/components/elements/display/Notebook.d.ts

@@ -1,5 +0,0 @@
-import type { FC } from 'react';
-import 'react-ipynb-renderer/dist/styles/monokai.css';
-export declare const Notebook: FC<{
-    ipynb: string;
-}>;

package/components/elements/display/Notebook.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { IpynbRenderer } from 'react-ipynb-renderer';
-import 'react-ipynb-renderer/dist/styles/monokai.css';
-export const Notebook = ({ ipynb }) => {
-    return _jsx(IpynbRenderer, { ipynb: JSON.parse(ipynb) });
-};

package/components/elements/display/QueryResultText.d.ts

@@ -1,6 +0,0 @@
-import type { FC } from 'react';
-declare const QueryResultText: FC<{
-    count: number;
-    query: string;
-}>;
-export default QueryResultText;

package/components/elements/display/QueryResultText.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-const QueryResultText = ({ count, query }) => {
-    const { t } = useTranslation();
-    return (_jsxs(Typography, { sx: theme => ({
-            color: theme.palette.text.secondary,
-            fontSize: '0.9em',
-            fontStyle: 'italic',
-            mb: 0.5,
-            '& a': { color: theme.palette.text.secondary }
-        }), variant: "body2", children: [t('search.total', { count }), " ", _jsx(Link, { to: `/hits?query=${encodeURIComponent(query)}`, children: t('search.open') })] }));
-};
-export default QueryResultText;

package/components/elements/display/TextDivider.d.ts

@@ -1,3 +0,0 @@
-import type { FC } from 'react';
-declare const TextDivider: FC;
-export default TextDivider;

package/components/elements/display/TextDivider.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material';
-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 = () => {
-    const { t } = useTranslation();
-    return (_jsx(OuterDiv, { children: _jsx(InnerDiv, { children: t('divider') }) }));
-};
-export default TextDivider;

package/components/elements/display/TypingIndicator.d.ts

@@ -1,2 +0,0 @@
-declare const TypingIndicator: () => import("react/jsx-runtime").JSX.Element;
-export default TypingIndicator;

package/components/elements/display/TypingIndicator.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Circle } from '@mui/icons-material';
-import { alpha, Stack } from '@mui/material';
-const TypingIndicator = () => {
-    return (_jsxs(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", children: [_jsx(Circle, {}), _jsx(Circle, {}), _jsx(Circle, {})] }));
-};
-export default TypingIndicator;

package/components/elements/display/UserPageWrapper.d.ts

@@ -1,6 +0,0 @@
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import type { FC, PropsWithChildren } from 'react';
-declare const UserPageWrapper: FC<PropsWithChildren<{
-    user: HowlerUser;
-}>>;
-export default UserPageWrapper;

package/components/elements/display/UserPageWrapper.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Grid, Stack } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import HowlerAvatarHeader from './HowlerAvatarHeader';
-const UserPageWrapper = ({ user, children }) => (_jsx(PageCenter, { textAlign: "left", mt: 6, children: _jsxs(Grid, { container: true, spacing: 2, justifyContent: "center", children: [_jsx(HowlerAvatarHeader, { user: user }), _jsx(Grid, { item: true, sm: 12, md: 9, children: _jsx(Stack, { direction: "column", spacing: 2, children: children }) })] }) }));
-export default UserPageWrapper;

package/components/elements/display/features/DevelopmentBanner.d.ts

@@ -1,3 +0,0 @@
-import type { FC } from 'react';
-declare const DevelopmentBanner: FC;
-export default DevelopmentBanner;

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

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, AlertTitle } from '@mui/material';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { useTranslation } from 'react-i18next';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-const DevelopmentBanner = () => {
-    const { t } = useTranslation();
-    const [disableWarning, setDisableWarning] = useMyLocalStorageItem(StorageKey.DISABLE_FEATURE_WARNING, false);
-    if (disableWarning) {
-        return null;
-    }
-    return (_jsxs(Alert, { severity: "warning", variant: "outlined", onClose: () => setDisableWarning(true), children: [_jsx(AlertTitle, { children: t('features.warning.title') }), t('features.warning.description')] }));
-};
-export default DevelopmentBanner;

package/components/elements/display/features/DevelopmentIcon.d.ts

@@ -1,3 +0,0 @@
-import type { FC } from 'react';
-declare const DevelopmentIcon: FC;
-export default DevelopmentIcon;

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

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

package/components/elements/display/handlebars/helpers.d.ts

@@ -1,12 +0,0 @@
-import Handlebars from 'handlebars';
-import { type ReactElement } from 'react';
-export interface HowlerHelper {
-    keyword: string;
-    documentation?: {
-        en: string;
-        fr: string;
-    };
-    callback?: Handlebars.HelperDelegate;
-    componentCallback?: (...args: any[]) => ReactElement | Promise<ReactElement>;
-}
-export declare const useHelpers: () => HowlerHelper[];