@cccsaurora/howler-ui 2.14.0-dev.257 → 2.14.0-dev.263

package/commons/components/topnav/ThemeSelection.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx, Fragment } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useTheme, useMediaQuery, List, ListItemButton, ListItemText, Typography, Switch, ListSubheader, Divider, ListItemSecondaryAction } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import useLocalStorage from "../utils/hooks/useLocalStorage.js";
+import { APP_STORAGE_PREFIX } from "../app/AppConstants.js";
+import "../app/AppContexts.js";
+import { memo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useAppBar } from "../app/hooks/useAppBar.js";
+import { useAppBreadcrumbs } from "../app/hooks/useAppBreadcrumbs.js";
+import { useAppConfigs } from "../app/hooks/useAppConfigs.js";
+import { useAppLanguage } from "../app/hooks/useAppLanguage.js";
+import { useAppLayout } from "../app/hooks/useAppLayout.js";
+import { useAppQuickSearch } from "../app/hooks/useAppQuickSearch.js";
+import "../app/hooks/useAppSitemap.js";
+import { useAppTheme } from "../app/hooks/useAppTheme.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+const ThemeSelection = () => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const configs = useAppConfigs();
+  const layout = useAppLayout();
+  const breadcrumbs = useAppBreadcrumbs();
+  const language = useAppLanguage();
+  const appbar = useAppBar();
+  const appTheme = useAppTheme();
+  const quicksearch = useAppQuickSearch();
+  const localStorage = useLocalStorage(APP_STORAGE_PREFIX);
+  const isSmDown = useMediaQuery(theme.breakpoints.down("sm"));
+  const clearStorage = () => {
+    localStorage.clear();
+    window.location.reload();
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    configs.preferences.allowTranslate && /* @__PURE__ */ jsx(List, { dense: true, subheader: /* @__PURE__ */ jsx(ListSubheader, { disableSticky: true, children: t("app.language") }), children: /* @__PURE__ */ jsx(ListItemButton, { dense: true, onClick: language.toggle, children: /* @__PURE__ */ jsx(ListItemText, { style: { margin: 0 }, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          flexDirection: "row",
+          width: "100%",
+          textAlign: "center",
+          cursor: "pointer"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { component: "div", variant: "body2", children: "English" }),
+          /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ jsx(Switch, { checked: language.isFR(), name: "langSwitch" }) }),
+          /* @__PURE__ */ jsx(Typography, { component: "div", variant: "body2", children: "Français" })
+        ]
+      }
+    ) }) }) }),
+    configs.preferences.allowTranslate && configs.allowPersonalization && /* @__PURE__ */ jsx(Divider, {}),
+    configs.allowPersonalization && /* @__PURE__ */ jsxs(List, { dense: true, subheader: /* @__PURE__ */ jsx(ListSubheader, { disableSticky: true, children: t("personalization") }), children: [
+      configs.preferences.allowThemeSelection && /* @__PURE__ */ jsxs(ListItemButton, { onClick: appTheme.toggle, children: [
+        /* @__PURE__ */ jsx(ListItemText, { children: t("personalization.dark") }),
+        /* @__PURE__ */ jsx(ListItemSecondaryAction, { children: /* @__PURE__ */ jsx(Switch, { edge: "end", onChange: appTheme.toggle, checked: theme.palette.mode === "dark" }) })
+      ] }),
+      configs.preferences.allowLayoutSelection && /* @__PURE__ */ jsxs(ListItemButton, { onClick: layout.toggle, children: [
+        /* @__PURE__ */ jsx(ListItemText, { children: t("personalization.sticky") }),
+        /* @__PURE__ */ jsx(ListItemSecondaryAction, { onClick: layout.toggle, children: /* @__PURE__ */ jsx(Switch, { edge: "end", checked: layout.current === "top" }) })
+      ] }),
+      configs.preferences.allowQuickSearch && !isSmDown && /* @__PURE__ */ jsxs(ListItemButton, { onClick: quicksearch.toggle, children: [
+        /* @__PURE__ */ jsx(ListItemText, { children: t("personalization.quicksearch") }),
+        /* @__PURE__ */ jsx(ListItemSecondaryAction, { children: /* @__PURE__ */ jsx(Switch, { edge: "end", checked: quicksearch.show, onClick: quicksearch.toggle }) })
+      ] }),
+      configs.preferences.allowAutoHideTopbar && /* @__PURE__ */ jsxs(ListItemButton, { disabled: layout.current === "top", onClick: appbar.toggleAutoHide, children: [
+        /* @__PURE__ */ jsx(ListItemText, { children: t("personalization.autohideappbar") }),
+        /* @__PURE__ */ jsx(ListItemSecondaryAction, { children: /* @__PURE__ */ jsx(
+          Switch,
+          {
+            edge: "end",
+            disabled: layout.current === "top",
+            checked: appbar.autoHide && layout.current !== "top",
+            onClick: appbar.toggleAutoHide
+          }
+        ) })
+      ] }),
+      configs.preferences.allowBreadcrumbs && !isSmDown && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(ListItemButton, { onClick: breadcrumbs.toggle, children: [
+        /* @__PURE__ */ jsx(ListItemText, { children: t("personalization.showbreadcrumbs") }),
+        /* @__PURE__ */ jsx(ListItemSecondaryAction, { children: /* @__PURE__ */ jsx(Switch, { edge: "end", checked: breadcrumbs.show, onClick: breadcrumbs.toggle }) })
+      ] }) })
+    ] }),
+    (configs.preferences.allowTranslate || configs.allowPersonalization) && configs.preferences.allowReset && /* @__PURE__ */ jsx(Divider, {}),
+    configs.preferences.allowReset && /* @__PURE__ */ jsx(List, { dense: true, children: /* @__PURE__ */ jsx(ListItemButton, { dense: true, onClick: clearStorage, children: /* @__PURE__ */ jsx(ListItemText, { children: t("personalization.reset_text") }) }) })
+  ] });
+};
+const ThemeSelection$1 = memo(ThemeSelection);
+export {
+  ThemeSelection$1 as default
+};

package/commons/components/topnav/ThemeSelectionIcon.d.ts

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

package/commons/components/topnav/ThemeSelectionIcon.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Tune } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { useTheme, ClickAwayListener, IconButton, Popper, Fade, Paper } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { useAppConfigs } from "../app/hooks/useAppConfigs.js";
+import ThemeSelection from "./ThemeSelection.js";
+import { useRef, useState } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const ThemeSelectionIcon = () => {
+  const anchorEl = useRef();
+  const theme = useTheme();
+  const { allowPersonalization, preferences } = useAppConfigs();
+  const [open, setOpen] = useState(false);
+  const onThemeSelectionClick = () => setOpen(!open);
+  const onClickAway = () => setOpen(false);
+  return allowPersonalization || preferences.allowTranslate || preferences.allowReset ? /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsxs(IconButton, { ref: anchorEl, color: "inherit", "aria-label": "open drawer", onClick: onThemeSelectionClick, size: "large", children: [
+    /* @__PURE__ */ jsx(Tune, {}),
+    /* @__PURE__ */ jsx(
+      Popper,
+      {
+        sx: { zIndex: theme.zIndex.drawer + 2, minWidth: "280px" },
+        open,
+        anchorEl: anchorEl.current,
+        placement: "bottom-end",
+        transition: true,
+        children: ({ TransitionProps }) => /* @__PURE__ */ jsx(Fade, { ...TransitionProps, timeout: 250, children: /* @__PURE__ */ jsx(Paper, { style: { padding: theme.spacing(1) }, elevation: 4, children: /* @__PURE__ */ jsx(ThemeSelection, {}) }) })
+      }
+    )
+  ] }) }) : null;
+};
+export {
+  ThemeSelectionIcon as default
+};

package/commons/components/topnav/UserProfile.d.ts

@@ -0,0 +1,5 @@
+import { StyledComponent } from '@emotion/styled';
+import { AppAvatarProps } from '@cccsaurora/howler-ui/commons/components/display/AppAvatar';
+export declare const AppUserAvatar: StyledComponent<AppAvatarProps>;
+declare const _default: import('react').MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/commons/components/topnav/UserProfile.js

@@ -0,0 +1,144 @@
+import { jsxs, jsx, Fragment } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { styled, useTheme, Divider, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, IconButton, ClickAwayListener, Popper, Fade, Paper, Box, Typography } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import "../app/AppContexts.js";
+import { memo, useRef, useState, useCallback, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useAppConfigs } from "../app/hooks/useAppConfigs.js";
+import "../../../i18n.js";
+import "../app/hooks/useAppSitemap.js";
+import { useAppUser } from "../app/hooks/useAppUser.js";
+import AppAvatar from "../display/AppAvatar.js";
+import ThemeSelection from "./ThemeSelection.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { useLocation, Link } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-router-dom@6.30.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router-dom/dist/index.js";
+const AppUserAvatar = styled(AppAvatar)(({ theme }) => ({
+  width: theme.spacing(5),
+  height: theme.spacing(5),
+  [theme.breakpoints.down("sm")]: {
+    width: theme.spacing(4),
+    height: theme.spacing(4)
+  }
+}));
+const UserProfile = () => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const configs = useAppConfigs();
+  const { user } = useAppUser();
+  const anchorRef = useRef();
+  const location = useLocation();
+  const [open, setOpen] = useState(false);
+  const onProfileClick = useCallback((e) => {
+    e.stopPropagation();
+    setOpen((_open) => !_open);
+  }, []);
+  const onClickAway = useCallback(() => setOpen(false), []);
+  const renderThemeSelection = useCallback(
+    (enabled) => {
+      if (enabled && (configs.allowPersonalization || configs.preferences.allowTranslate || configs.preferences.allowReset)) {
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(ThemeSelection, {})
+        ] });
+      }
+      return null;
+    },
+    [configs.allowPersonalization, configs.preferences.allowTranslate, configs.preferences.allowReset]
+  );
+  const renderMenu = useCallback(
+    (type, menuItems, title, i18nKey) => {
+      if (menuItems !== void 0 && menuItems !== null && menuItems.length !== 0) {
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(List, { dense: true, subheader: /* @__PURE__ */ jsx(ListSubheader, { disableSticky: true, children: i18nKey ? t(i18nKey) : title }), children: menuItems.map(
+            (a, i) => a.element ? /* @__PURE__ */ jsx(ListItem, { children: a.element }, `${type}-${i}`) : /* @__PURE__ */ jsxs(ListItemButton, { component: Link, to: a.route, children: [
+              a.icon && /* @__PURE__ */ jsx(ListItemIcon, { children: a.icon }),
+              /* @__PURE__ */ jsx(ListItemText, { children: a.i18nKey ? t(a.i18nKey) : a.title })
+            ] }, `${type}-${i}`)
+          ) })
+        ] });
+      }
+      return null;
+    },
+    [t]
+  );
+  useEffect(() => {
+    if (open) {
+      setOpen(false);
+    }
+  }, [location.pathname]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ref: anchorRef,
+        edge: "end",
+        sx: {
+          padding: 0,
+          marginLeft: theme.spacing(1),
+          marginRight: theme.spacing(1)
+        },
+        onClick: onProfileClick,
+        size: "large",
+        children: /* @__PURE__ */ jsx(AppUserAvatar, { alt: user.name, url: user.avatar, email: user.email, children: user.name.split(" ", 2).map((n) => n[0].toUpperCase()).join("") })
+      }
+    ),
+    /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsx(
+      Popper,
+      {
+        sx: { zIndex: theme.zIndex.appBar + 200, minWidth: "280px" },
+        open,
+        anchorEl: anchorRef.current,
+        placement: "bottom-end",
+        transition: true,
+        children: ({ TransitionProps }) => /* @__PURE__ */ jsx(Fade, { ...TransitionProps, timeout: 250, children: /* @__PURE__ */ jsxs(Paper, { style: { padding: theme.spacing(1) }, elevation: 4, children: [
+          /* @__PURE__ */ jsx(List, { disablePadding: true, children: /* @__PURE__ */ jsx(ListItem, { disableGutters: true, dense: true, children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                paddingTop: 2,
+                paddingBottom: 2,
+                paddingLeft: 3,
+                paddingRight: 3,
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  AppAvatar,
+                  {
+                    sx: { width: theme.spacing(8), height: theme.spacing(8) },
+                    alt: user.name,
+                    url: user.avatar,
+                    email: user.email,
+                    children: user.name.split(" ", 2).map((n) => n[0].toUpperCase()).join("")
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Box, { sx: { paddingLeft: 2 }, children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "body1", noWrap: true, children: /* @__PURE__ */ jsx("b", { children: user.name }) }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", noWrap: true, children: user.email })
+                ] })
+              ]
+            }
+          ) }) }),
+          renderMenu(
+            "usermenu",
+            configs.preferences.topnav.userMenu,
+            configs.preferences.topnav.userMenuTitle,
+            configs.preferences.topnav.userMenuI18nKey
+          ),
+          user.is_admin && renderMenu(
+            "adminmenu",
+            configs.preferences.topnav.adminMenu,
+            configs.preferences.topnav.adminMenuTitle,
+            configs.preferences.topnav.adminMenuI18nKey
+          ),
+          renderThemeSelection(configs.preferences.topnav.themeSelectionMode === "profile")
+        ] }) })
+      }
+    ) })
+  ] });
+};
+const UserProfile$1 = memo(UserProfile);
+export {
+  AppUserAvatar,
+  UserProfile$1 as default
+};

package/commons/components/utils/hooks/useClipboard.d.ts

@@ -0,0 +1,3 @@
+export default function useClipboard(): {
+    copy: (text: string) => Promise<void>;
+};

package/commons/components/utils/hooks/useClipboard.js

@@ -0,0 +1,31 @@
+import { useSnackbar } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/notistack@3.0.2_csstype@3.1.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/notistack/notistack.esm.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+function useClipboard() {
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+  const { t } = useTranslation();
+  const snackBarOptions = {
+    preventDuplicate: true,
+    autoHideDuration: 3e3,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "center"
+    },
+    SnackbarProps: {
+      onClick: () => {
+        closeSnackbar();
+      }
+    }
+  };
+  const copy = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      enqueueSnackbar(`${text} ${t("clipboard.success")}`, { variant: "success", ...snackBarOptions });
+    } catch (error) {
+      enqueueSnackbar(`${text} ${t("clipboard.failure")}`, { variant: "error", ...snackBarOptions });
+    }
+  };
+  return { copy };
+}
+export {
+  useClipboard as default
+};

package/commons/components/utils/hooks/useEnv.d.ts

@@ -0,0 +1 @@
+export default function useAppEnv(key?: string): string | NodeJS.ProcessEnv;

package/commons/components/utils/hooks/useEnv.js

@@ -0,0 +1,14 @@
+import { useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+var define_process_env_default = {};
+const APP_ENV = define_process_env_default;
+function useAppEnv(key) {
+  return useMemo(() => {
+    if (key) {
+      return APP_ENV[key];
+    }
+    return APP_ENV;
+  }, [key]);
+}
+export {
+  useAppEnv as default
+};

package/commons/components/utils/hooks/useFullscreenStatus.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export default function useFullscreenStatus(elRef: MutableRefObject<any>): [boolean, () => void];

package/commons/components/utils/hooks/useFullscreenStatus.js

@@ -0,0 +1,37 @@
+import { useState, useCallback, useLayoutEffect, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const getBrowserFullscreenElementProp = () => {
+  if (typeof document.fullscreenElement !== "undefined") {
+    return "fullscreenElement";
+  }
+  if (typeof document["mozFullScreenElement"] !== "undefined") {
+    return "mozFullScreenElement";
+  }
+  if (typeof document["msFullscreenElement"] !== "undefined") {
+    return "msFullscreenElement";
+  }
+  if (typeof document["webkitFullscreenElement"] !== "undefined") {
+    return "webkitFullscreenElement";
+  }
+  throw new Error("fullscreenElement is not supported by this browser");
+};
+function useFullscreenStatus(elRef) {
+  const [isFullscreen, setIsFullscreen] = useState(document[getBrowserFullscreenElementProp()] != null);
+  const setFullscreen = useCallback(() => {
+    if (elRef.current == null) return;
+    elRef.current.requestFullscreen().then(() => {
+      setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);
+    }).catch(() => {
+      setIsFullscreen(false);
+    });
+  }, [elRef]);
+  useLayoutEffect(() => {
+    document.onfullscreenchange = () => setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);
+    return () => {
+      document.onfullscreenchange = void 0;
+    };
+  });
+  return useMemo(() => [isFullscreen, setFullscreen], [isFullscreen, setFullscreen]);
+}
+export {
+  useFullscreenStatus as default
+};

package/commons/components/utils/hooks/useGravatar.d.ts

@@ -0,0 +1,2 @@
+declare const useGravatar: (email: string) => string;
+export default useGravatar;

package/commons/components/utils/hooks/useGravatar.js

@@ -0,0 +1,11 @@
+import { useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import md5 from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/md5@2.3.0/node_modules/md5/md5.js";
+const useGravatar = (email) => useMemo(() => {
+  if (email !== null) {
+    return `https://s.gravatar.com/avatar/${md5(email)}?d=404`;
+  }
+  return null;
+}, [email]);
+export {
+  useGravatar as default
+};

package/commons/components/utils/hooks/useLocalStorage.d.ts

@@ -0,0 +1,12 @@
+export default function useLocalStorage(prefix?: string): {
+    get: <T>(key: string) => T;
+    set: (key: string, value: any) => void;
+    remove: (key: string, withPrefix?: boolean) => void;
+    has: (key: string) => boolean;
+    keys: () => string[];
+    items: () => {
+        key: string;
+        value: unknown;
+    }[];
+    clear: () => void;
+};

package/commons/components/utils/hooks/useLocalStorage.js

@@ -0,0 +1,50 @@
+import { useCallback, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+function useLocalStorage(prefix) {
+  const _buildKey = useCallback((name) => prefix ? `${prefix}.${name}` : name, [prefix]);
+  const get = useCallback(
+    (key) => {
+      try {
+        return JSON.parse(localStorage.getItem(_buildKey(key)));
+      } catch (e) {
+        return null;
+      }
+    },
+    [_buildKey]
+  );
+  const set = useCallback(
+    (key, value) => localStorage.setItem(_buildKey(key), JSON.stringify(value)),
+    [_buildKey]
+  );
+  const remove = useCallback(
+    (key, withPrefix = false) => localStorage.removeItem(withPrefix ? key : _buildKey(key)),
+    [_buildKey]
+  );
+  const has = useCallback((key) => get(key) !== null, [get]);
+  const keys = useCallback(() => Object.keys(localStorage), []);
+  const items = useCallback(() => keys().map((k) => ({ key: k, value: get(k) })), [get, keys]);
+  const clear = useCallback(
+    () => keys().forEach((key) => {
+      if (prefix && key.startsWith(prefix)) {
+        remove(key, true);
+      } else if (!prefix) {
+        remove(key);
+      }
+    }),
+    [prefix, remove, keys]
+  );
+  return useMemo(
+    () => ({
+      get,
+      set,
+      remove,
+      has,
+      keys,
+      items,
+      clear
+    }),
+    [get, set, remove, has, keys, items, clear]
+  );
+}
+export {
+  useLocalStorage as default
+};

package/commons/components/utils/hooks/useLocalStorageItem.d.ts

@@ -0,0 +1,14 @@
+/**
+ * This hooks backs the typical 'useState' hook with local storage.
+ *
+ * This means that it will initialize with the value stored in local storage.
+ *
+ * State changes are also persisted to local storage.
+ *
+ * All this ensures the state is preserved across inializations.
+ *
+ * @param key - local storage key under which to store the state.
+ * @param initialValue - local storage initialization value.
+ * @returns a stateful value, a function to update it, and a function to remove it.
+ */
+export default function useLocalStorageItem<T>(key: string, initialValue?: T): [T, (value: T) => void, () => void];

package/commons/components/utils/hooks/useLocalStorageItem.js

@@ -0,0 +1,31 @@
+import useLocalStorage from "./useLocalStorage.js";
+import { useState, useEffect, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+function useLocalStorageItem(key, initialValue) {
+  const { get, set, has, remove } = useLocalStorage();
+  const [value, setValue] = useState(get(key) ?? initialValue);
+  useEffect(() => {
+    if (initialValue !== null && initialValue !== void 0 && !has(key)) {
+      set(key, initialValue);
+    }
+  }, [key, initialValue, has, set]);
+  return useMemo(
+    () => [
+      value,
+      (newValue, save = true) => {
+        if (save) {
+          if (newValue !== void 0) {
+            set(key, newValue);
+          } else {
+            remove(key);
+          }
+        }
+        setValue(newValue);
+      },
+      () => remove(key)
+    ],
+    [key, value, set, remove]
+  );
+}
+export {
+  useLocalStorageItem as default
+};

package/commons/components/utils/hooks/useThemeBuilder.d.ts

@@ -0,0 +1,7 @@
+import { Components, PaletteOptions, Theme } from '@mui/material';
+import { AppThemeConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+export declare const createTuiTheme: (components: Components<Omit<Theme, "components">>, palette: PaletteOptions) => Theme;
+export default function useThemeBuilder(theme?: AppThemeConfigs): {
+    darkTheme: Theme;
+    lightTheme: Theme;
+};

package/commons/components/utils/hooks/useThemeBuilder.js

@@ -0,0 +1,61 @@
+import { createTheme } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { AppDefaultsThemeConfigs } from "../../app/AppDefaults.js";
+import { useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const createTuiTheme = (components, palette) => {
+  var _a;
+  return createTheme({
+    components: {
+      ...components,
+      MuiCssBaseline: {
+        ...(components == null ? void 0 : components.MuiCssBaseline) || {},
+        styleOverrides: {
+          ...((_a = components.MuiCssBaseline) == null ? void 0 : _a.styleOverrides) || {},
+          html: {
+            width: "100%",
+            height: "100%"
+          },
+          body: {
+            width: "100%",
+            height: "100%"
+          },
+          "#root": {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0
+          }
+        }
+      },
+      MuiUseMediaQuery: {
+        ...components.MuiUseMediaQuery || {},
+        defaultProps: {
+          noSsr: true
+        }
+      }
+    },
+    palette
+  });
+};
+function useThemeBuilder(theme = AppDefaultsThemeConfigs) {
+  return useMemo(
+    () => {
+      var _a, _b;
+      return {
+        darkTheme: createTuiTheme(theme.components || {}, {
+          mode: "dark",
+          ...((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.dark) || {}
+        }),
+        lightTheme: createTuiTheme(theme.components || {}, {
+          mode: "light",
+          ...((_b = theme == null ? void 0 : theme.palette) == null ? void 0 : _b.light) || {}
+        })
+      };
+    },
+    [theme]
+  );
+}
+export {
+  createTuiTheme,
+  useThemeBuilder as default
+};

package/commons/components/utils/keyboard.d.ts

@@ -0,0 +1,30 @@
+import { KeyboardEvent } from 'react';
+export declare const ENTER = "Enter";
+export declare const ESCAPE = "Escape";
+export declare const ARROW_LEFT = "ArrowLeft";
+export declare const ARROW_UP = "ArrowUp";
+export declare const ARROW_RIGHT = "ArrowRight";
+export declare const ARROW_DOWN = "ArrowDown";
+export declare const BACKSPACE = "Backspace";
+export declare const SPACE = " ";
+export declare function is(key: string, check: string): boolean;
+export declare function isArrowUp(key: string): boolean;
+export declare function isArrowDown(key: string): boolean;
+export declare function isArrowLeft(key: string): boolean;
+export declare function isArrowRight(key: string): boolean;
+export declare function isEscape(key: string): boolean;
+export declare function isEnter(key: string): boolean;
+export declare function isBackspace(key: string): boolean;
+export declare function isSpace(key: string): boolean;
+export declare function parseEvent(event: KeyboardEvent<HTMLElement>): {
+    key: string;
+    isCtrl: boolean;
+    isEnter: boolean;
+    isSpace: boolean;
+    isBackspace: boolean;
+    isEscape: boolean;
+    isArrowLeft: boolean;
+    isArrowRight: boolean;
+    isArrowUp: boolean;
+    isArrowDown: boolean;
+};