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

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

@@ -0,0 +1,223 @@
+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 ActionButton from '../ActionButton';
+import JSONViewer from '../json/JSONViewer';
+const FETCH_RESULTS = {};
+export const useHelpers = () => {
+    const pluginStore = usePluginStore();
+    const allHelpers = useMemo(() => [
+        {
+            keyword: 'equals',
+            documentation: {
+                en: 'Checks the equality of the string representation of the two arguments.',
+                fr: "Vérifie l'égalité de la représentation en chaîne de caractères des deux arguments."
+            },
+            callback: (arg1, arg2) => arg1?.toString() === arg2.toString()
+        },
+        {
+            keyword: 'and',
+            documentation: {
+                en: 'Runs the comparison `arg1 && arg2`, and returns the result.',
+                fr: 'Exécute la comparaison `arg1 && arg2`, et retourne le résultat.'
+            },
+            callback: (arg1, arg2) => arg1 && arg2
+        },
+        {
+            keyword: 'or',
+            documentation: {
+                en: 'Runs the comparison `arg1 || arg2`, and returns the result.',
+                fr: 'Exécute la comparaison `arg1 || arg2`, et retourne le résultat.'
+            },
+            callback: (arg1, arg2) => arg1 || arg2
+        },
+        {
+            keyword: 'not',
+            documentation: {
+                en: 'Runs the comparison `!arg`, and returns the result.',
+                fr: 'Exécute la comparaison `!arg`, et retourne le résultat.'
+            },
+            callback: arg => !arg
+        },
+        {
+            keyword: 'curly',
+            documentation: {
+                en: 'Wraps the given argument in curly braces.',
+                fr: "Entoure l'argument donné d'accolades."
+            },
+            callback: arg1 => new Handlebars.SafeString(`{{${arg1}}}`)
+        },
+        {
+            keyword: 'join',
+            documentation: {
+                en: 'Joins two string arguments with a given string `sep`, or the empty string as a default.',
+                fr: 'Joint deux arguments de chaîne avec une chaîne donnée `sep`, ou la chaîne vide par défaut.'
+            },
+            callback: (arg1, arg2, context) => [arg1?.toString() ?? '', arg2?.toString() ?? ''].join(context.hash?.sep ?? '')
+        },
+        {
+            keyword: 'upper',
+            documentation: {
+                en: 'Returns the uppercase representation of a string argument.',
+                fr: "Retourne la représentation en majuscules d'un argument de chaîne."
+            },
+            callback: (val) => val.toLocaleUpperCase()
+        },
+        {
+            keyword: 'lower',
+            documentation: {
+                en: 'Returns the lowercase representation of a string argument.',
+                fr: "Retourne la représentation en minuscules d'un argument de chaîne."
+            },
+            callback: (val) => val.toLocaleLowerCase()
+        },
+        {
+            keyword: 'fetch',
+            documentation: {
+                en: 'Fetches the url provided and returns the given (flattened) key from the returned JSON object. Note that the result must be JSON!',
+                fr: "Récupère l'URL fournie et retourne la clé donnée (aplatie) de l'objet JSON retourné. Notez que le résultat doit être du JSON !"
+            },
+            callback: async (url, key) => {
+                try {
+                    if (!FETCH_RESULTS[url]) {
+                        FETCH_RESULTS[url] = fetch(url).then(res => res.json());
+                    }
+                    const json = await FETCH_RESULTS[url];
+                    return flatten(json)[key];
+                }
+                catch (e) {
+                    return '';
+                }
+            }
+        },
+        {
+            keyword: 'howler',
+            documentation: {
+                en: 'Given a howler hit ID, this helper renders a hit card for that ID.',
+                fr: 'Étant donné un ID de résultat howler, cet assistant affiche une carte de résultat pour cet ID.'
+            },
+            componentCallback: id => {
+                if (!id) {
+                    return _jsx(AppListEmpty, {});
+                }
+                return _jsx(HitCard, { id: id, layout: HitLayout.NORMAL });
+            }
+        },
+        {
+            keyword: 'entries',
+            documentation: {
+                en: 'Given a dict, return an array of {key, value} objects.',
+                fr: "Étant donné un dictionnaire, retourne un tableau d'objets {key, value}."
+            },
+            callback: obj => {
+                if (!isObject(obj)) {
+                    return new Handlebars.SafeString('Invalid Object.');
+                }
+                return Object.entries(obj).map(([key, value]) => ({ key, value }));
+            }
+        },
+        {
+            keyword: 'render_json',
+            documentation: {
+                en: 'Given JSON data, this helper renders a JSON viewer component.',
+                fr: 'Étant donné des données JSON, cet assistant affiche un composant de visualisation JSON.'
+            },
+            componentCallback: data => {
+                if (!data) {
+                    return _jsx(AppListEmpty, {});
+                }
+                return _jsx(JSONViewer, { data: data });
+            }
+        },
+        {
+            keyword: 'to_json',
+            documentation: {
+                en: 'Convert any object into a JSON string.',
+                fr: "Convertit n'importe quel objet en chaîne JSON."
+            },
+            callback: obj => {
+                return new Handlebars.SafeString(JSON.stringify(obj));
+            }
+        },
+        {
+            keyword: 'parse_json',
+            documentation: {
+                en: 'Convert a JSON string into an object.',
+                fr: 'Convertit une chaîne JSON en objet.'
+            },
+            callback: str => {
+                return JSON.parse(str);
+            }
+        },
+        {
+            keyword: 'get',
+            documentation: {
+                en: 'Returns the given (flattened) key from the provided object.',
+                fr: "Retourne la clé donnée (aplatie) de l'objet fourni."
+            },
+            callback: async (data, key) => {
+                try {
+                    return get(data, key);
+                }
+                catch (e) {
+                    return '';
+                }
+            }
+        },
+        {
+            keyword: 'includes',
+            documentation: {
+                en: 'Checks if field is in string',
+                fr: 'Vérifie si le champ est dans la chaîne'
+            },
+            callback: (arg1, arg2) => {
+                return !!arg2 && !!arg1?.includes(arg2);
+            }
+        },
+        {
+            keyword: 'table',
+            documentation: {
+                en: 'Render a table in markdown given an array of cells',
+                fr: "Affiche un tableau en markdown à partir d'un tableau de cellules"
+            },
+            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));
+                                }) })] }) }));
+            }
+        },
+        {
+            keyword: 'action',
+            documentation: {
+                en: 'Execute a howler action given a specific action ID (from the URL when viewing the action, i.e. yaIKVqiKhWpyCsWdqsE4D)',
+                fr: "Exécute une action howler à partir d'un ID d'action spécifique (de l'URL lors de la visualisation de l'action, par ex. yaIKVqiKhWpyCsWdqsE4D)"
+            },
+            componentCallback: (actionId, hitId, context) => {
+                if (!actionId || !hitId) {
+                    console.warn('Missing parameters for the action button.');
+                    return null;
+                }
+                return _jsx(ActionButton, { actionId: actionId, hitId: hitId, ...(context.hash ?? {}) });
+            }
+        },
+        ...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;

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloudSync } from '@mui/icons-material';
+import { Badge, IconButton, styled, Tooltip } from '@mui/material';
+import { green, red, yellow } from '@mui/material/colors';
+import { SocketContext, Status } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { useContext } from 'react';
+const StyledBadge = styled(Badge)(({ theme }) => ({
+    '& .MuiBadge-badge': {
+        backgroundColor: green[700],
+        color: green[700],
+        boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+        '&::after': {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            borderRadius: '50%',
+            animation: 'ripple 1.2s infinite ease-in-out',
+            border: '1px solid currentColor',
+            content: '""',
+            zIndex: 1000
+        }
+    },
+    '@keyframes ripple': {
+        '0%': {
+            transform: 'scale(.8)',
+            opacity: 1
+        },
+        '100%': {
+            transform: 'scale(2.4)',
+            opacity: 0
+        }
+    }
+}));
+const TITLES = {
+    [Status.CONNECTING]: i18n.t('live.connecting'),
+    [Status.OPEN]: i18n.t('live.open'),
+    [Status.CLOSING]: i18n.t('live.closing'),
+    [Status.CLOSED]: i18n.t('live.closed')
+};
+const SocketBadge = ({ size = 'inherit' }) => {
+    const { status, reconnect } = useContext(SocketContext);
+    return (_jsx(Tooltip, { title: TITLES[status], children: _jsx(StyledBadge, { overlap: "circular", variant: "dot", anchorOrigin: { horizontal: 'left', vertical: 'top' }, sx: [
+                (status === Status.CONNECTING || status === Status.CLOSING) && {
+                    '& .MuiBadge-badge': { backgroundColor: yellow[600], color: yellow[600] }
+                },
+                status === Status.CLOSED && {
+                    '& .MuiBadge-badge': {
+                        backgroundColor: red[800],
+                        color: red[800],
+                        '&::after': {
+                            animation: 'none'
+                        }
+                    }
+                }
+            ], children: _jsx(IconButton, { size: "small", onClick: reconnect, sx: [status !== Status.CLOSED && { pointerEvents: 'none' }, { pr: 1 }], children: _jsx(CloudSync, { fontSize: size }) }) }) }));
+};
+export default SocketBadge;

package/components/elements/display/json/JSONViewer.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+declare const JSONViewer: FC<{
+    data: object;
+    collapse?: boolean;
+    hideSearch?: boolean;
+    filter?: string;
+}>;
+export default JSONViewer;

package/components/elements/display/json/JSONViewer.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactJson, {} from '@microlink/react-json-view';
+import { Clear } from '@mui/icons-material';
+import { IconButton, Skeleton, Stack } from '@mui/material';
+import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { validateRegex } from '@cccsaurora/howler-ui/utils/stringUtils';
+import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
+import { removeEmpty, searchObject } from '@cccsaurora/howler-ui/utils/utils';
+const THROTTLER = new Throttler(150);
+const JSONViewer = ({ data, collapse = true, hideSearch = false, filter }) => {
+    const { t } = useTranslation();
+    const { isDark } = useAppTheme();
+    const [compact] = useMyLocalStorageItem(StorageKey.COMPACT_JSON, true);
+    const [flat] = useMyLocalStorageItem(StorageKey.FLATTEN_JSON);
+    const [query, setQuery] = useState('');
+    const [result, setResult] = useState(null);
+    useEffect(() => {
+        THROTTLER.debounce(() => {
+            const filteredData = removeEmpty(data, compact);
+            const searchedData = searchObject(filteredData, filter ?? query, flat);
+            setResult(searchedData);
+        });
+    }, [compact, data, filter, flat, query]);
+    const hasError = useMemo(() => !validateRegex(filter ?? query), [query, filter]);
+    const shouldCollapse = useCallback((field) => {
+        return (field.name !== 'root' && field.type !== 'object') || field.namespace.length > 3;
+    }, []);
+    const renderer = useMemo(() => result && (_jsx(ReactJson, { src: result, theme: isDark ? 'summerfruit' : 'summerfruit:inverted', indentWidth: 2, displayDataTypes: !compact, displayObjectSize: !compact, shouldCollapse: collapse ? shouldCollapse : false, quotesOnKeys: false, style: { flex: 1, overflow: 'auto', height: '100%', fontSize: compact ? 'small' : 'smaller' }, enableClipboard: _data => {
+            if (typeof _data.src === 'string') {
+                navigator.clipboard.writeText(_data.src);
+            }
+            else {
+                navigator.clipboard.writeText(JSON.stringify(_data.src));
+            }
+        }, ...{
+            // Type declaration is wrong - this is a valid prop
+            displayArrayKey: !compact
+        } })), [collapse, compact, isDark, result, shouldCollapse]);
+    return data ? (_jsxs(Stack, { direction: "column", spacing: 1, sx: { '& > div:first-of-type': { mt: 1, mr: 0.5 } }, children: [!hideSearch && (_jsx(Phrase, { value: query, onChange: setQuery, error: hasError, label: t('json.viewer.search.label'), placeholder: t('json.viewer.search.prompt'), disabled: !result, endAdornment: _jsx(IconButton, { onClick: () => setQuery(''), children: _jsx(Clear, {}) }) })), renderer] })) : (_jsx(Skeleton, { width: "100%", height: "95%", variant: "rounded" }));
+};
+export default JSONViewer;

package/components/elements/display/markdownPlugins/tabs.d.ts

@@ -0,0 +1,3 @@
+import type * as mdast from 'mdast';
+import type { Plugin } from 'unified';
+export declare const codeTabs: Plugin<[], mdast.Root>;

package/components/elements/display/markdownPlugins/tabs.js

@@ -0,0 +1,70 @@
+import { visit } from 'unist-util-visit';
+//this plugins aims to bring docusaurus tabs functionality to base react-markdown.
+//will expose a code tabs elements which can be later rendered with a custom component
+const findTabs = (index, parent) => {
+    const { children } = parent;
+    const tabs = [];
+    while (index++ < children.length) {
+        const child = children[index];
+        if (child && child.type === 'code') {
+            const metaString = `${child.lang ?? ''} ${child.meta ?? ''}`.trim();
+            if (!metaString)
+                break;
+            const [tabtitle] = metaString.match(/(?<=tab=("|'))(.*?)(?=("|'))/) ?? [''];
+            if (!tabtitle) {
+                // eslint-disable-next-line no-console
+                console.warn('Failed to parse tab title.');
+                break;
+            }
+            tabs.push({ title: tabtitle, lang: child.lang, value: child.value });
+        }
+        else {
+            break;
+        }
+    }
+    return tabs;
+};
+export const codeTabs = () => {
+    return (tree, file) => {
+        visit(tree, 'code', (node, index, parent) => {
+            const metaString = `${node.lang ?? ''} ${node.meta ?? ''}`.trim();
+            if (!metaString) {
+                return;
+            }
+            const [tab] = metaString.match(/(?<=tab=("|'))(.*?)(?=("|'))/) ?? [''];
+            if (!tab && metaString.includes('tab=')) {
+                file.message('Invalid tab title', node, 'remark-code-title');
+                return;
+            }
+            if (!tab) {
+                return;
+            }
+            const tabs = [{ title: tab, lang: node.lang, value: node.value }, ...findTabs(index, parent)];
+            if (tabs.length > 1) {
+                const tabsNode = {
+                    type: 'code',
+                    lang: 'tabs',
+                    value: JSON.stringify(tabs)
+                };
+                parent.children.splice(index, tabs.length, tabsNode);
+                return index + tabs.length - 1;
+            }
+            else {
+                const titleNode = {
+                    type: 'paragraph',
+                    data: {
+                        hName: 'div',
+                        hProperties: {
+                            'data-remark-code-title': true,
+                            'data-language': node.lang
+                        }
+                    },
+                    children: [{ type: 'text', value: tab }]
+                };
+                parent.children.splice(index, 0, titleNode);
+                /* Skips this node (title) and the next node (code) */
+                return index + 2;
+            }
+        });
+    };
+};

package/components/elements/display/modals/ConfirmDeleteModal.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const ConfirmDeleteModal: FC<{
+    onConfirm: () => void;
+}>;
+export default ConfirmDeleteModal;

package/components/elements/display/modals/ConfirmDeleteModal.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, Typography } from '@mui/material';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+const ConfirmDeleteModal = ({ onConfirm }) => {
+    const { t } = useTranslation();
+    const { close } = useContext(ModalContext);
+    const handleConfirm = useCallback(() => {
+        onConfirm();
+        close();
+    }, [close, onConfirm]);
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.confirm.delete.title') }), _jsx(Typography, { children: t('modal.confirm.delete.description') }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleConfirm, children: t('confirm') })] })] }));
+};
+export default ConfirmDeleteModal;

package/components/elements/display/modals/ConfirmNotebookModal.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const ConfirmNotebookModal: FC<{
+    onConfirm: () => void;
+}>;
+export default ConfirmNotebookModal;

package/components/elements/display/modals/ConfirmNotebookModal.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, Typography } from '@mui/material';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+const ConfirmNotebookModal = ({ onConfirm }) => {
+    const { t } = useTranslation();
+    const { close } = useContext(ModalContext);
+    const handleConfirm = useCallback(() => {
+        onConfirm();
+        close();
+    }, [close, onConfirm]);
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: 'Overwrite existing notebook?' }), _jsx(Typography, { children: t('hit.notebook.confirm.dialog') }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleConfirm, children: t('confirm') })] })] }));
+};
+export default ConfirmNotebookModal;

package/components/elements/display/modals/CreateActionModal.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const CreateActionModal: FC<{
+    onSubmit: (rationale: string) => void;
+}>;
+export default CreateActionModal;

package/components/elements/display/modals/CreateActionModal.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, TextField, Typography } from '@mui/material';
+import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { useCallback, useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const CreateActionModal = ({ onSubmit }) => {
+    const { t } = useTranslation();
+    const { close } = useContext(ModalContext);
+    const { showInfoMessage } = useMySnackbar();
+    const [actionName, setActionName] = useState('');
+    const handleSubmit = useCallback(() => {
+        if (actionName) {
+            onSubmit(actionName);
+            close();
+        }
+        else {
+            showInfoMessage(t('modal.action.empty'));
+        }
+    }, [actionName, onSubmit, close, showInfoMessage, t]);
+    const handleKeydown = useCallback((e) => {
+        const parsedEvent = parseEvent(e);
+        if (parsedEvent.isCtrl && parsedEvent.isEnter) {
+            handleSubmit();
+        }
+        else if (parsedEvent.isEscape) {
+            close();
+        }
+    }, [close, handleSubmit]);
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.action.title') }), _jsx(Typography, { children: t('modal.action.description') }), _jsx(TextField, { label: t('modal.action.label'), value: actionName, 
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus: true, fullWidth: true, onChange: e => setActionName(e.target.value), onKeyDown: handleKeydown }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { disabled: !actionName, variant: "outlined", onClick: handleSubmit, children: t('submit') })] })] }));
+};
+export default CreateActionModal;

package/components/elements/display/modals/LoginErrorModal.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const LoginErrorModal: FC<{
+    error: Error;
+}>;
+export default LoginErrorModal;

package/components/elements/display/modals/LoginErrorModal.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Error } from '@mui/icons-material';
+import { Button, Divider, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const LoginErrorModal = ({ error }) => {
+    const { t } = useTranslation();
+    return (_jsxs(Stack, { direction: "row", spacing: 3, alignItems: "center", children: [_jsx("img", { src: "/images/doggie.png", alt: "" }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Error, { color: "error" }), _jsx(Typography, { variant: "h5", children: t('user.error.modal.header') })] }), _jsx(Divider, { orientation: "horizontal", sx: { mt: 1, mb: 1 } }), _jsx(Typography, { variant: "body1", children: t('user.error.modal.body') }), _jsx(Typography, { variant: "body1", sx: { mt: 1 }, children: t('user.error.modal.details') }), _jsx("code", { style: { fontSize: '0.8rem' }, children: error.toString() }), _jsx(Stack, { direction: "row", justifyContent: "end", sx: { pt: 1 }, children: _jsx(Button, { onClick: () => window.location.reload(), children: t('user.error.modal.reload') }) })] })] }));
+};
+export default LoginErrorModal;

package/components/elements/display/modals/RationaleModal.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const RationaleModal: FC<{
+    onSubmit: (rationale: string) => void;
+}>;
+export default RationaleModal;

package/components/elements/display/modals/RationaleModal.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, TextField, Typography } from '@mui/material';
+import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { useCallback, useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const RationaleModal = ({ onSubmit }) => {
+    const { t } = useTranslation();
+    const { close } = useContext(ModalContext);
+    const [rationale, setRationale] = useState('');
+    const handleSubmit = useCallback(() => {
+        onSubmit(rationale);
+        close();
+    }, [onSubmit, rationale, close]);
+    const handleKeydown = useCallback(e => {
+        const parsedEvent = parseEvent(e);
+        if (parsedEvent.isCtrl && parsedEvent.isEnter) {
+            handleSubmit();
+        }
+        else if (parsedEvent.isEscape) {
+            close();
+        }
+    }, [close, handleSubmit]);
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.rationale.title') }), _jsx(Typography, { children: t('modal.rationale.description') }), _jsx(TextField, { label: t('modal.rationale.label'), value: rationale, 
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus: true, fullWidth: true, multiline: true, maxRows: 6, onChange: e => setRationale(e.target.value), onKeyDown: handleKeydown }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleSubmit, children: t('submit') })] })] }));
+};
+export default RationaleModal;

package/components/elements/hit/HitActions.d.ts

@@ -0,0 +1,6 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import("react").NamedExoticComponent<{
+    hit: Hit;
+    orientation?: "horizontal" | "vertical";
+}>;
+export default _default;