@cccsaurora/howler-ui 2.12.0-dev.168

package/components/elements/display/ItemManager.js

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,133 @@
+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

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

package/components/elements/display/Modal.js

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,6 @@
+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

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

package/components/elements/display/QueryResultText.js

@@ -0,0 +1,15 @@
+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

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

package/components/elements/display/TextDivider.js

@@ -0,0 +1,40 @@
+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

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

package/components/elements/display/TypingIndicator.js

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+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

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

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

@@ -0,0 +1,14 @@
+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

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

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

@@ -0,0 +1,15 @@
+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

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

package/components/elements/display/handlebars/helpers.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import { Paper, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
+import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import { flatten } from 'flat';
+import Handlebars from 'handlebars';
+import { capitalize, get, groupBy, isObject } from 'lodash-es';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useMemo } from 'react';
+import { usePluginStore } from 'react-pluggable';
+import JSONViewer from '../json/JSONViewer';
+export const useHelpers = () => {
+    const pluginStore = usePluginStore();
+    const allHelpers = useMemo(() => [
+        {
+            keyword: 'equals',
+            documentation: 'Checks the equality of the string representation of the two arguments.',
+            callback: (arg1, arg2) => arg1?.toString() === arg2.toString()
+        },
+        {
+            keyword: 'and',
+            documentation: 'Runs the comparison `arg1 && arg2`, and returns the result.',
+            callback: (arg1, arg2) => arg1 && arg2
+        },
+        {
+            keyword: 'or',
+            documentation: 'Runs the comparison `arg1 || arg2`, and returns the result.',
+            callback: (arg1, arg2) => arg1 || arg2
+        },
+        { keyword: 'not', documentation: 'Runs the comparison `!arg`, and returns the result.', callback: arg => !arg },
+        {
+            keyword: 'curly',
+            documentation: 'Wraps the given argument in curly braces.',
+            callback: arg1 => new Handlebars.SafeString(`{{${arg1}}}`)
+        },
+        {
+            keyword: 'join',
+            documentation: 'Joins two string arguments with a given string `sep`, or the empty string as a default.',
+            callback: (arg1, arg2, context) => [arg1?.toString() ?? '', arg2?.toString() ?? ''].join(context.hash?.sep ?? '')
+        },
+        {
+            keyword: 'upper',
+            documentation: 'Returns the uppercase representation of a string argment.',
+            callback: (val) => val.toLocaleUpperCase()
+        },
+        {
+            keyword: 'lower',
+            documentation: 'Returns the lowercase representation of a string argment.',
+            callback: (val) => val.toLocaleLowerCase()
+        },
+        {
+            keyword: 'fetch',
+            documentation: 'Fetches the url provided and returns the given (flattened) key from the returned JSON object. Note that the result must be JSON!',
+            callback: async (url, key) => {
+                try {
+                    const response = await fetch(url);
+                    const json = await response.json();
+                    return flatten(json)[key];
+                }
+                catch (e) {
+                    return '';
+                }
+            }
+        },
+        {
+            keyword: 'howler',
+            documentation: 'Given a howler hit ID, this helper renders a hit card for that ID.',
+            componentCallback: id => {
+                if (!id) {
+                    return _jsx(AppListEmpty, {});
+                }
+                return _jsx(HitCard, { id: id, layout: HitLayout.NORMAL });
+            }
+        },
+        {
+            keyword: 'entries',
+            documentation: 'Given a dict, return an array of {key, value} objects.',
+            callback: obj => {
+                if (!isObject(obj)) {
+                    return new Handlebars.SafeString('Invalid Object.');
+                }
+                return Object.entries(obj).map(([key, value]) => ({ key, value }));
+            }
+        },
+        {
+            keyword: 'render_json',
+            documentation: 'Given a howler hit ID, this helper renders a hit card for that ID.',
+            componentCallback: data => {
+                if (!data) {
+                    return _jsx(AppListEmpty, {});
+                }
+                return _jsx(JSONViewer, { data: data });
+            }
+        },
+        {
+            keyword: 'to_json',
+            documentation: 'Convert any object into a JSON string.',
+            callback: obj => {
+                return new Handlebars.SafeString(JSON.stringify(obj));
+            }
+        },
+        {
+            keyword: 'parse_json',
+            documentation: 'Convert JSON string into and object.',
+            callback: str => {
+                return JSON.parse(str);
+            }
+        },
+        {
+            keyword: 'get',
+            documentation: 'Returns the given (flattened) key from the provided object.',
+            callback: async (data, key) => {
+                try {
+                    return get(data, key);
+                }
+                catch (e) {
+                    return '';
+                }
+            }
+        },
+        {
+            keyword: 'includes',
+            documentation: 'Checks if field is in string',
+            callback: (arg1, arg2) => {
+                return !!arg2 && !!arg1?.includes(arg2);
+            }
+        },
+        {
+            keyword: 'table',
+            documentation: 'Render a table in markdown given an array of cells',
+            componentCallback: (cells) => {
+                const columns = Object.keys(groupBy(cells, 'column'));
+                const rows = groupBy(cells, 'row');
+                return (_jsx(Paper, { sx: { width: '95%', overflowX: 'auto', m: 1 }, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns.map(col => (_jsx(TableCell, { sx: { maxWidth: '150px' }, children: col
+                                            .split(/[_-]/)
+                                            .map(word => capitalize(word))
+                                            .join(' ') }, col))) }) }), _jsx(TableBody, { sx: { '& td': { wordBreak: 'break-word' } }, children: Object.entries(rows).map(([rowId, _cells]) => {
+                                    return (_jsx(TableRow, { children: columns.map(col => {
+                                            const cell = _cells.find(row => row.column === col);
+                                            return _jsx(TableCell, { children: cell?.value ?? 'N/A' }, col + cell?.value);
+                                        }) }, rowId));
+                                }) })] }) }));
+            }
+        },
+        ...howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.helpers`))
+    ], [pluginStore]);
+    return allHelpers;
+};

package/components/elements/display/icons/BundleButton.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+declare const BundleButton: FC<{
+    ids: string[];
+    disabled?: boolean;
+}>;
+export default BundleButton;

package/components/elements/display/icons/BundleButton.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AccountTree } from '@mui/icons-material';
+import { ListItemText, Menu, MenuItem, Typography } from '@mui/material';
+import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+const BundleButton = ({ ids, disabled = false }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const onClick = useCallback((event) => {
+        if (ids.length === 1) {
+            navigate(`/bundles/${ids[0]}`);
+        }
+        else {
+            setAnchorEl(event.currentTarget);
+        }
+    }, [ids, navigate]);
+    const handleClose = useCallback(() => setAnchorEl(null), []);
+    return (_jsxs(_Fragment, { children: [_jsx(TuiIconButton, { size: "small", tooltip: t(`hit.panel.bundles.open${ids.length > 1 ? '' : '.prompt'}`), onClick: onClick, disabled: disabled, "aria-disabled": disabled, "aria-haspopup": "true", "aria-controls": anchorEl ? 'bundle-action-menu' : undefined, "aria-expanded": anchorEl ? 'true' : undefined, children: _jsx(AccountTree, {}) }), _jsx(Menu, { id: "bundle-action-menu", anchorEl: anchorEl, open: !!anchorEl, onClose: handleClose, MenuListProps: {
+                    dense: true,
+                    'aria-labelledby': `bundle-button`
+                }, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                }, children: ids.map(id => (_jsx(MenuItem, { onClick: () => navigate(`/bundles/${id}`), children: _jsx(ListItemText, { primary: t('hit.panel.bundles.open.prompt'), secondary: _jsx(Typography, { variant: "caption", color: "text.secondary", children: id }) }) }, id))) })] }));
+};
+export default BundleButton;

package/components/elements/display/icons/Iconified.d.ts

@@ -0,0 +1,9 @@
+declare const ICONS: {
+    hit: string;
+    take: string;
+};
+type IconsType = keyof typeof ICONS;
+declare const _default: import("react").NamedExoticComponent<{
+    type: IconsType;
+}>;
+export default _default;

package/components/elements/display/icons/Iconified.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { memo } from 'react';
+const ICONS = {
+    hit: 'bx:target-lock',
+    take: 'clarity:cursor-hand-grab-line'
+};
+const Iconified = ({ type }) => {
+    return _jsx(Icon, { icon: ICONS[type], fontSize: 24 });
+};
+export default memo(Iconified);

package/components/elements/display/icons/SocketBadge.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const SocketBadge: FC<{
+    size?: 'small' | 'inherit' | 'medium' | 'large';
+}>;
+export default SocketBadge;