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

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

@@ -0,0 +1,276 @@
+/* eslint-disable no-console */
+import { Paper, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import AppListEmpty from 'commons/components/display/AppListEmpty';
+import HitCard from 'components/elements/hit/HitCard';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import { flatten } from 'flat';
+import Handlebars from 'handlebars';
+import { capitalize, get, groupBy, isObject } from 'lodash-es';
+import howlerPluginStore from 'plugins/store';
+import { useMemo, type ReactElement } from 'react';
+import { usePluginStore } from 'react-pluggable';
+import ActionButton from '../ActionButton';
+import JSONViewer from '../json/JSONViewer';
+
+export interface HowlerHelper {
+  keyword: string;
+  documentation?: {
+    en: string;
+    fr: string;
+  };
+  callback?: Handlebars.HelperDelegate;
+  componentCallback?: (...args: any[]) => ReactElement | Promise<ReactElement>;
+}
+
+interface Cell {
+  column: string;
+  row: string;
+  value: string;
+}
+
+const FETCH_RESULTS: { [url: string]: Promise<any> } = {};
+
+export const useHelpers = (): HowlerHelper[] => {
+  const pluginStore = usePluginStore();
+
+  const allHelpers = useMemo(
+    (): HowlerHelper[] => [
+      {
+        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: string, arg2: string, 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: string) => 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: string) => 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 <AppListEmpty />;
+          }
+
+          return <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 <AppListEmpty />;
+          }
+
+          return <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: Cell[]) => {
+          const columns = Object.keys(groupBy(cells, 'column'));
+          const rows = groupBy(cells, 'row');
+
+          return (
+            <Paper sx={{ width: '95%', overflowX: 'auto', m: 1 }}>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    {columns.map(col => (
+                      <TableCell key={col} sx={{ maxWidth: '150px' }}>
+                        {col
+                          .split(/[_-]/)
+                          .map(word => capitalize(word))
+                          .join(' ')}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody sx={{ '& td': { wordBreak: 'break-word' } }}>
+                  {Object.entries(rows).map(([rowId, _cells]) => {
+                    return (
+                      <TableRow key={rowId}>
+                        {columns.map(col => {
+                          const cell = _cells.find(row => row.column === col);
+
+                          return <TableCell key={col + cell?.value}>{cell?.value ?? 'N/A'}</TableCell>;
+                        })}
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </Paper>
+          );
+        }
+      },
+
+      {
+        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: string, hitId: string, context) => {
+          if (!actionId || !hitId) {
+            console.warn('Missing parameters for the action button.');
+            return null;
+          }
+
+          return <ActionButton actionId={actionId} hitId={hitId} {...(context.hash ?? {})} />;
+        }
+      },
+
+      ...howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.helpers`) as HowlerHelper)
+    ],
+    [pluginStore]
+  );
+
+  return allHelpers;
+};

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

@@ -0,0 +1,77 @@
+import { AccountTree } from '@mui/icons-material';
+import { ListItemText, Menu, MenuItem, Typography } from '@mui/material';
+import TuiIconButton from 'components/elements/addons/buttons/CustomIconButton';
+import type { FC } from 'react';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+const BundleButton: FC<{ ids: string[]; disabled?: boolean }> = ({ ids, disabled = false }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const onClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (ids.length === 1) {
+        navigate(`/bundles/${ids[0]}`);
+      } else {
+        setAnchorEl(event.currentTarget);
+      }
+    },
+    [ids, navigate]
+  );
+
+  const handleClose = useCallback(() => setAnchorEl(null), []);
+
+  return (
+    <>
+      <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}
+      >
+        <AccountTree />
+      </TuiIconButton>
+      <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'
+        }}
+      >
+        {ids.map(id => (
+          <MenuItem key={id} onClick={() => navigate(`/bundles/${id}`)}>
+            <ListItemText
+              primary={t('hit.panel.bundles.open.prompt')}
+              secondary={
+                <Typography variant="caption" color="text.secondary">
+                  {id}
+                </Typography>
+              }
+            />
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+};
+
+export default BundleButton;

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

@@ -0,0 +1,16 @@
+import { Icon } from '@iconify/react';
+import type { FC } from 'react';
+import { memo } from 'react';
+
+const ICONS = {
+  hit: 'bx:target-lock',
+  take: 'clarity:cursor-hand-grab-line'
+};
+
+type IconsType = keyof typeof ICONS;
+
+const Iconified: FC<{ type: IconsType }> = ({ type }) => {
+  return <Icon icon={ICONS[type]} fontSize={24} />;
+};
+
+export default memo(Iconified);

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

@@ -0,0 +1,82 @@
+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 'components/app/providers/SocketProvider';
+import i18n from 'i18n';
+import type { FC } from 'react';
+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: FC<{ size?: 'small' | 'inherit' | 'medium' | 'large' }> = ({ size = 'inherit' }) => {
+  const { status, reconnect } = useContext(SocketContext);
+
+  return (
+    <Tooltip title={TITLES[status]}>
+      <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'
+              }
+            }
+          }
+        ]}
+      >
+        <IconButton
+          size="small"
+          onClick={reconnect}
+          sx={[status !== Status.CLOSED && { pointerEvents: 'none' }, { pr: 1 }]}
+        >
+          <CloudSync fontSize={size} />
+        </IconButton>
+      </StyledBadge>
+    </Tooltip>
+  );
+};
+
+export default SocketBadge;

package/components/elements/display/icons/svg/howler-icon-darkmode.svg

@@ -0,0 +1 @@
+<svg id="artwork" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.08 64.08"><defs><style>.cls-1{fill:#2196f3;}.cls-2{fill:#0e4377;}</style></defs><path class="cls-1" d="M39.7,57.07h0c-4.28-16.65,7.85-26.92,9.88-29.25a13.85,13.85,0,0,0,3-6.95h0v-.05c.36-2.27-2.17-6.93-2.17-6.93,1.42-2.39-.59-5.22-2.68-5.11a2.73,2.73,0,0,0-2.57,1.82,43.59,43.59,0,0,0-6.82,4,10.33,10.33,0,0,1-10.42,1.46c-3.46-1.28-7.52,2.57-7.52,2.57L15,24.35a3.35,3.35,0,0,0-1.92-.49c-3,.21-5.2,5-4.81,10.69A16.16,16.16,0,0,0,9,38.36s-.06-.1-.08-.15C10,42,12.33,42.65,14.68,42.49c3-.21,4.87-2.92,4.48-8.62,0-.54.07-1.14,0-1.66h0v0a23.48,23.48,0,0,1,2.22,5.92c1.2,4.86-1.6,11.5-5.25,15.74a32,32,0,0,0,23.42,3.35l.16-.12Z"/><path class="cls-1" d="M39.7,57.07h0l-.16.12Z"/><path class="cls-2" d="M17.5,27.09a13.87,13.87,0,0,1,.68,1.45A6.66,6.66,0,0,1,17.5,27.09Zm1.83,6.71c0-.54-.1-1.07-.17-1.59-.14,5.08-3.05,9-5.86,9.23-1.65.12-3.23-1.15-4.38-3.23,1.05,3.82,3.25,6.44,5.6,6.28C17.56,44.28,19.72,39.49,19.33,33.8ZM29,22.44l2-1.89s.54-.44.21-.83a3.07,3.07,0,0,0-2.78-1.31C27.88,19.61,29,22.44,29,22.44Zm3.61,13,4.85.27A36.35,36.35,0,0,0,33.59,44l3.25-.71c-.68,6.56,2.86,13.76,2.86,13.76-3.19-15.43,9.17-26.58,11.2-28.91,2.38-2.73,1.64-7.34,1.64-7.34S48.81,29.29,32.59,35.41Z"/></svg>

package/components/elements/display/icons/svg/howler-icon-lightmode.svg

@@ -0,0 +1 @@
+<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64.08 64.08"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#fff;}.cls-3{fill:#0e4377;}</style><linearGradient id="linear-gradient" x1="25.21" y1="57.37" x2="34.21" y2="6.34" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#13599e"/><stop offset="0.08" stop-color="#1561ad"/><stop offset="0.22" stop-color="#176dc1"/><stop offset="0.36" stop-color="#1974ce"/><stop offset="0.5" stop-color="#1976d2"/><stop offset="0.64" stop-color="#1974ce"/><stop offset="0.78" stop-color="#176dc1"/><stop offset="0.92" stop-color="#1561ad"/><stop offset="1" stop-color="#13599e"/></linearGradient></defs><path class="cls-1" d="M39.7,57.07h0c-3.19-15.43,9.17-26.58,11.2-28.91,2.25-2.58,1.71-6.83,1.65-7.29h0v-.05c.36-2.27-2.17-6.93-2.17-6.93,1.42-2.39-.59-5.22-2.68-5.11a2.73,2.73,0,0,0-2.57,1.82,43.59,43.59,0,0,0-6.82,4,10.33,10.33,0,0,1-10.42,1.46c-3.46-1.28-7.52,2.57-7.52,2.57L15,24.35a3.35,3.35,0,0,0-1.92-.49c-3,.21-5.2,5-4.81,10.69A16.16,16.16,0,0,0,9,38.36s-.06-.1-.08-.15c1.05,3.82,3.25,6.44,5.6,6.28,3-.21,5.2-5,4.81-10.69,0-.54-.1-1.07-.17-1.59h0v0a23.48,23.48,0,0,1,2.22,5.92c1.2,4.86-1.6,11.5-5.25,15.74a32,32,0,0,0,23.42,3.35l.16-.12Z"/><path class="cls-2" d="M39.7,57.07h0l-.16.12Z"/><path class="cls-3" d="M17.5,27.09a13.87,13.87,0,0,1,.68,1.45A6.66,6.66,0,0,1,17.5,27.09Zm1.83,6.71c0-.54-.1-1.07-.17-1.59-.14,5.08-3.05,9-5.86,9.23-1.65.12-3.23-1.15-4.38-3.23,1.05,3.82,3.25,6.44,5.6,6.28C17.56,44.28,19.72,39.49,19.33,33.8ZM29,22.44l2-1.89s.54-.44.21-.83a3.07,3.07,0,0,0-2.78-1.31C27.88,19.61,29,22.44,29,22.44Zm3.61,13,4.85.27A36.35,36.35,0,0,0,33.59,44l3.25-.71c-.68,6.56,2.86,13.76,2.86,13.76-3.19-15.43,9.17-26.58,11.2-28.91,2.38-2.73,1.64-7.34,1.64-7.34S48.81,29.29,32.59,35.41Z"/></svg>

package/components/elements/display/icons/svg/howler-logo-full.svg

@@ -0,0 +1 @@
+<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70.92 72.11"><defs><style>.cls-1{fill:url(#radial-gradient);}.cls-2{fill:#1976d2;}.cls-3{fill:#0e4377;}</style><radialGradient id="radial-gradient" cx="38.88" cy="31.59" r="31.82" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1976d2"/><stop offset="0.51" stop-color="#1975d0"/><stop offset="0.7" stop-color="#1871c9"/><stop offset="0.83" stop-color="#176bbe"/><stop offset="0.93" stop-color="#1561ad"/><stop offset="1" stop-color="#13599e"/></radialGradient></defs><path class="cls-1" d="M38.88,0A32,32,0,0,0,23,59.84C26.6,55.6,29.4,49,28.2,44.1A23.1,23.1,0,0,0,26,38.18v0h0q.12.78.18,1.59c.38,5.69-1.77,10.48-4.82,10.69-2.35.16-4.54-2.46-5.6-6.28l.09.15a15.67,15.67,0,0,1-.7-3.81c-.39-5.7,1.76-10.48,4.81-10.69a3.37,3.37,0,0,1,1.92.49l5.32-5.69s4.06-3.85,7.53-2.57a10.33,10.33,0,0,0,10.42-1.46,43.27,43.27,0,0,1,6.81-4,2.73,2.73,0,0,1,2.58-1.82c2.08-.11,4.1,2.72,2.67,5.11,0,0,2.54,4.66,2.18,6.93v.05h0c.07.46.61,4.71-1.64,7.29-2,2.33-14.4,13.48-11.2,28.91h0l-.16.12a32.66,32.66,0,0,0,4.4-1.4,10.42,10.42,0,0,1,10.27-8.62h0a11.52,11.52,0,0,1,1.76.16A32,32,0,0,0,38.88,0Z"/><path class="cls-2" d="M67.39,58a8.48,8.48,0,0,0-14.3,8.57A37.1,37.1,0,0,1,3.48,22.61a1.12,1.12,0,0,0-.8-1.37A1.13,1.13,0,0,0,1.3,22,39.35,39.35,0,0,0,32,70.74a40.17,40.17,0,0,0,7.46.71,38.79,38.79,0,0,0,14.7-2.9c.18.24.36.48.56.71a8.49,8.49,0,0,0,12,.7,8.49,8.49,0,0,0,.7-12ZM66.1,67.39a5.92,5.92,0,0,1-.87.94,6.21,6.21,0,0,1-.89.66l-.09.05a6,6,0,0,1-.92.45l-.14.05a6.24,6.24,0,0,1-.94.26l-.16,0a6.35,6.35,0,0,1-1,.08h-.24l-.35,0-.28,0-.34,0-.28-.06a2.14,2.14,0,0,1-.34-.09L59,69.58l-.33-.13-.26-.1-.33-.17-.24-.13-.33-.21-.21-.14L57,68.42l-.17-.14c-.16-.15-.32-.31-.47-.48a6.31,6.31,0,0,1-1.52-5.15c0-.2.08-.4.13-.6a6.27,6.27,0,0,1,1.92-3.14h0a6.21,6.21,0,0,1,.89-.66l.08,0a6.63,6.63,0,0,1,.93-.45l.13,0a6.71,6.71,0,0,1,1-.26l.16,0a6.35,6.35,0,0,1,1-.08h.24l.35,0,.28,0,.34,0,.28.06a2.14,2.14,0,0,1,.34.09l.27.08.33.12.26.11.33.17.24.13a3.53,3.53,0,0,1,.32.21l.22.14.34.28.17.14c.16.15.32.31.47.48a6.28,6.28,0,0,1,.34,8Z"/><path class="cls-2" d="M58.76,64.46a3.24,3.24,0,0,1,2.29-5.52,3.23,3.23,0,0,1,2.28,5.52l-1.06,1.07h-.34v-4a.64.64,0,0,1-.19-.13h0a.68.68,0,0,1-.2-.49.64.64,0,0,1,.2-.48h0a.64.64,0,0,1,.48-.2.68.68,0,0,1,.49.2h0a.68.68,0,0,1,.2.48.72.72,0,0,1-.2.49.69.69,0,0,1-.2.13v2.87l.41-.41a2.65,2.65,0,1,0-3.74,0l.4.41v-.58a.8.8,0,0,1-.19-.13h0a.72.72,0,0,1-.2-.49.68.68,0,0,1,.2-.48h0a.68.68,0,0,1,.49-.2.64.64,0,0,1,.48.2h0a.64.64,0,0,1,.2.48.68.68,0,0,1-.2.49.64.64,0,0,1-.19.13v1.66h-.34l-1.07-1.07Zm3.61-3.65h0a.19.19,0,0,0-.15-.06.2.2,0,0,0-.15.06A.21.21,0,0,0,62,61a.24.24,0,0,0,.07.16h0a.22.22,0,0,0,.3,0,.24.24,0,0,0,.07-.16.21.21,0,0,0-.07-.15ZM60,63.1h0a.2.2,0,0,0-.15-.06.23.23,0,0,0-.16.06.25.25,0,0,0-.06.15.28.28,0,0,0,.06.16h0a.28.28,0,0,0,.16.06.25.25,0,0,0,.15-.06.23.23,0,0,0,.06-.16A.2.2,0,0,0,60,63.1Zm1-1.68a.68.68,0,0,1,.48.2h0a.69.69,0,0,1,.21.49.65.65,0,0,1-.21.48.67.67,0,0,1-.19.14v2.8h-.58v-2.8a.67.67,0,0,1-.19-.14h0a.65.65,0,0,1-.21-.48.69.69,0,0,1,.21-.49h0A.68.68,0,0,1,61.05,61.42Zm.15.53h0a.25.25,0,0,0-.15-.06.23.23,0,0,0-.15.06.24.24,0,0,0-.07.16.21.21,0,0,0,.07.15h0a.2.2,0,0,0,.15.07.24.24,0,0,0,.22-.22A.2.2,0,0,0,61.2,62Z"/><path class="cls-2" d="M59.79,65.91h2.52a.3.3,0,0,1,.3.3h0a.3.3,0,0,1-.3.3H59.79a.3.3,0,0,1-.3-.3h0A.3.3,0,0,1,59.79,65.91Z"/><path class="cls-2" d="M60,66.8h2.17a.29.29,0,0,1,.27.3h0a.29.29,0,0,1-.27.3H60a.29.29,0,0,1-.26-.3h0A.29.29,0,0,1,60,66.8Z"/><path class="cls-2" d="M60.35,67.71h1.4a.71.71,0,0,1-1.4,0Z"/><path class="cls-3" d="M24.33,33.09A13.89,13.89,0,0,1,25,34.54,7.24,7.24,0,0,1,24.33,33.09Zm1.84,6.71Q26.11,39,26,38.21c-.14,5.08-3,9-5.85,9.23-1.66.12-3.23-1.15-4.39-3.23,1.06,3.82,3.25,6.44,5.6,6.28C24.4,50.28,26.55,45.49,26.17,39.8Zm9.65-11.36,2-1.89s.54-.44.21-.83a3.05,3.05,0,0,0-2.77-1.31C34.72,25.61,35.82,28.44,35.82,28.44Zm3.6,13,4.86.27A35.82,35.82,0,0,0,40.43,50l3.25-.71c-.68,6.56,2.86,13.76,2.86,13.76-3.2-15.43,9.17-26.58,11.2-28.91,2.38-2.73,1.64-7.34,1.64-7.34S55.64,35.29,39.42,41.41Z"/></svg>

package/components/elements/display/icons/svg/howler-logo.svg

@@ -0,0 +1 @@
+<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64.08 64.08"><defs><style>.cls-1{fill:url(#radial-gradient);}.cls-2{fill:#0e4377;}</style><radialGradient id="radial-gradient" cx="32.04" cy="32.04" r="32.04" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1976d2"/><stop offset="0.51" stop-color="#1975d0"/><stop offset="0.7" stop-color="#1871c9"/><stop offset="0.83" stop-color="#176bbe"/><stop offset="0.93" stop-color="#1561ad"/><stop offset="1" stop-color="#13599e"/></radialGradient></defs><path class="cls-1" d="M64.08,32a32,32,0,1,0-48,27.8C19.77,55.6,22.57,49,21.37,44.1a23.48,23.48,0,0,0-2.22-5.92v0h0c.07.52.13,1,.17,1.59.39,5.69-1.77,10.48-4.81,10.69-2.35.16-4.55-2.46-5.6-6.28,0,0,.06.1.08.15a16.16,16.16,0,0,1-.7-3.81c-.39-5.7,1.77-10.48,4.81-10.69a3.35,3.35,0,0,1,1.92.49l5.33-5.69s4.06-3.85,7.52-2.57A10.33,10.33,0,0,0,38.3,20.63a43.59,43.59,0,0,1,6.82-4,2.73,2.73,0,0,1,2.57-1.82c2.09-.11,4.1,2.72,2.68,5.11,0,0,2.53,4.66,2.17,6.93v.05h0c.06.46.6,4.71-1.65,7.29-2,2.33-14.39,13.48-11.2,28.91h0l-.16.12h0A32,32,0,0,0,64.08,32Z"/><path class="cls-2" d="M17.5,33.09a13.87,13.87,0,0,1,.68,1.45A6.66,6.66,0,0,1,17.5,33.09Zm1.83,6.71c0-.54-.1-1.07-.17-1.59-.14,5.08-3.05,9-5.86,9.23-1.65.12-3.23-1.15-4.38-3.23,1.05,3.82,3.25,6.44,5.6,6.28C17.56,50.28,19.72,45.49,19.33,39.8ZM29,28.44l2-1.89s.54-.44.21-.83a3.07,3.07,0,0,0-2.78-1.31C27.88,25.61,29,28.44,29,28.44Zm3.61,13,4.85.27A36.35,36.35,0,0,0,33.59,50l3.25-.71c-.68,6.56,2.86,13.76,2.86,13.76-3.19-15.43,9.17-26.58,11.2-28.91,2.38-2.73,1.64-7.34,1.64-7.34S48.81,35.29,32.59,41.41Z"/></svg>

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

@@ -0,0 +1,98 @@
+import ReactJson, { type CollapsedFieldProps } from '@microlink/react-json-view';
+import { Clear } from '@mui/icons-material';
+import { IconButton, Skeleton, Stack } from '@mui/material';
+import { useAppTheme } from 'commons/components/app/hooks';
+import Phrase from 'components/elements/addons/search/phrase/Phrase';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import { useCallback, useEffect, useMemo, useState, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StorageKey } from 'utils/constants';
+import { validateRegex } from 'utils/stringUtils';
+import Throttler from 'utils/Throttler';
+import { removeEmpty, searchObject } from 'utils/utils';
+
+const THROTTLER = new Throttler(150);
+
+const JSONViewer: FC<{ data: object; collapse?: boolean; hideSearch?: boolean; filter?: string }> = ({
+  data,
+  collapse = true,
+  hideSearch = false,
+  filter
+}) => {
+  const { t } = useTranslation();
+  const { isDark } = useAppTheme();
+  const [compact] = useMyLocalStorageItem<boolean>(StorageKey.COMPACT_JSON, true);
+  const [flat] = useMyLocalStorageItem<boolean>(StorageKey.FLATTEN_JSON);
+
+  const [query, setQuery] = useState('');
+  const [result, setResult] = useState<any>(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: CollapsedFieldProps) => {
+    return (field.name !== 'root' && field.type !== 'object') || field.namespace.length > 3;
+  }, []);
+
+  const renderer = useMemo(
+    () =>
+      result && (
+        <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
+          } as any)}
+        />
+      ),
+    [collapse, compact, isDark, result, shouldCollapse]
+  );
+
+  return data ? (
+    <Stack direction="column" spacing={1} sx={{ '& > div:first-of-type': { mt: 1, mr: 0.5 } }}>
+      {!hideSearch && (
+        <Phrase
+          value={query}
+          onChange={setQuery}
+          error={hasError}
+          label={t('json.viewer.search.label')}
+          placeholder={t('json.viewer.search.prompt')}
+          disabled={!result}
+          endAdornment={
+            <IconButton onClick={() => setQuery('')}>
+              <Clear />
+            </IconButton>
+          }
+        />
+      )}
+      {renderer}
+    </Stack>
+  ) : (
+    <Skeleton width="100%" height="95%" variant="rounded" />
+  );
+};
+
+export default JSONViewer;

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

@@ -0,0 +1,81 @@
+import type * as mdast from 'mdast';
+import type { Plugin } from 'unified';
+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: Plugin<[], mdast.Root> = () => {
+  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: mdast.Code = {
+          type: 'code',
+          lang: 'tabs',
+          value: JSON.stringify(tabs)
+        };
+
+        parent.children.splice(index, tabs.length, tabsNode);
+
+        return index + tabs.length - 1;
+      } else {
+        const titleNode: mdast.Paragraph = {
+          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;
+      }
+    });
+  };
+};