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

package/commons/components/topnav/AppSwitcher.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Apps } from '@mui/icons-material';
-import { Avatar, Button, ClickAwayListener, Fade, IconButton, Link, Paper, Popper, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { useAppSwitcher } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppSwitcher';
-import { memo, useCallback, useRef, useState } from 'react';
-const AppSwitcher = () => {
-    const theme = useTheme();
-    const anchorRef = useRef();
-    const appSwitcher = useAppSwitcher();
-    const [open, setOpen] = useState(false);
-    const isDarkTheme = theme.palette.mode === 'dark';
-    const sp1 = theme.spacing(1);
-    const isSm = useMediaQuery(theme.breakpoints.down('sm'));
-    const onTogglePopper = useCallback(() => setOpen(_open => !_open), []);
-    const onClickAway = useCallback(() => setOpen(false), []);
-    if (appSwitcher.empty) {
-        return null;
-    }
-    return (_jsx(ClickAwayListener, { onClickAway: onClickAway, children: _jsxs(IconButton, { ref: anchorRef, color: "inherit", onClick: onTogglePopper, size: "large", children: [_jsx(Apps, {}), _jsx(Popper, { sx: { zIndex: theme.zIndex.drawer + 2 }, open: open, anchorEl: anchorRef.current, placement: "bottom-end", transition: true, children: ({ TransitionProps }) => (_jsx(Fade, { ...TransitionProps, timeout: 250, children: _jsx(Paper, { style: { textAlign: 'center', padding: theme.spacing(1) }, elevation: 4, children: _jsx("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    flexWrap: 'wrap',
-                                    maxWidth: appSwitcher.items.length <= 4 || isSm ? '240px' : '360px'
-                                }, children: appSwitcher.items.map((a, i) => (_jsx("div", { style: { width: '120px', padding: sp1, overflow: 'hidden' }, children: _jsxs(Button, { component: Link, target: a.newWindow ? '_blank' : null, href: a.route, style: { display: 'inherit', textDecoration: 'none', fontWeight: 400, color: 'inherit' }, children: [_jsx("div", { style: { display: 'inline-flex' }, children: _jsx(Avatar, { variant: "rounded", alt: a.name, src: isDarkTheme
-                                                        ? typeof a.img_d === 'string'
-                                                            ? a.img_d
-                                                            : null
-                                                        : typeof a.img_l === 'string'
-                                                            ? a.img_l
-                                                            : null, style: a.img_d === null || typeof a.img_d === 'string'
-                                                        ? { width: theme.spacing(8), height: theme.spacing(8) }
-                                                        : { backgroundColor: 'transparent', width: theme.spacing(8), height: theme.spacing(8) }, sx: {
-                                                        '& img': {
-                                                            objectFit: 'contain'
-                                                        }
-                                                    }, children: isDarkTheme
-                                                        ? a.img_d !== null && typeof a.img_d !== 'string'
-                                                            ? a.img_d
-                                                            : a.alt
-                                                        : a.img_l !== null && typeof a.img_l !== 'string'
-                                                            ? a.img_l
-                                                            : a.alt }, `avatar-${i}`) }), _jsx(Typography, { variant: "caption", children: a.name }, `text-${i}`)] }, `button-${i}`) }, `box-${i}`))) }) }) })) })] }) }));
-};
-export default memo(AppSwitcher);

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

@@ -1,2 +0,0 @@
-import { type FC } from 'react';
-export declare const Notifications: FC;

package/commons/components/topnav/Notifications.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useAppNotification } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppNotification';
-import { Notification } from '@cccsaurora/howler-ui/commons/components/notification';
-import {} from 'react';
-export const Notifications = () => {
-    const { service, state } = useAppNotification();
-    return (_jsx(Notification, { urls: service.feedUrls || state.urls, notificationItem: service.notificationRenderer, maxDrawerWidth: "800px", openIfNew: true }));
-};

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

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

package/commons/components/topnav/ThemeSelection.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Divider, List, ListItemButton, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, useMediaQuery, useTheme } from '@mui/material';
-import useLocalStorage from '@cccsaurora/howler-ui/commons/components//utils/hooks/useLocalStorage';
-import { APP_STORAGE_PREFIX } from '@cccsaurora/howler-ui/commons/components/app/AppConstants';
-import { useAppBar, useAppBreadcrumbs, useAppConfigs, useAppLanguage, useAppLayout, useAppQuickSearch, useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-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 (_jsxs("div", { children: [configs.preferences.allowTranslate && (_jsx(List, { dense: true, subheader: _jsx(ListSubheader, { disableSticky: true, children: t('app.language') }), children: _jsx(ListItemButton, { dense: true, onClick: language.toggle, children: _jsx(ListItemText, { style: { margin: 0 }, children: _jsxs("div", { style: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                flexDirection: 'row',
-                                width: '100%',
-                                textAlign: 'center',
-                                cursor: 'pointer'
-                            }, children: [_jsx(Typography, { component: "div", variant: "body2", children: "English" }), _jsx("div", { style: { flexGrow: 1 }, children: _jsx(Switch, { checked: language.isFR(), name: "langSwitch" }) }), _jsx(Typography, { component: "div", variant: "body2", children: "Fran\u00E7ais" })] }) }) }) })), configs.preferences.allowTranslate && configs.allowPersonalization && _jsx(Divider, {}), configs.allowPersonalization && (_jsxs(List, { dense: true, subheader: _jsx(ListSubheader, { disableSticky: true, children: t('personalization') }), children: [configs.preferences.allowThemeSelection && (_jsxs(ListItemButton, { onClick: appTheme.toggle, children: [_jsx(ListItemText, { children: t('personalization.dark') }), _jsx(ListItemSecondaryAction, { children: _jsx(Switch, { edge: "end", onChange: appTheme.toggle, checked: theme.palette.mode === 'dark' }) })] })), configs.preferences.allowLayoutSelection && (_jsxs(ListItemButton, { onClick: layout.toggle, children: [_jsx(ListItemText, { children: t('personalization.sticky') }), _jsx(ListItemSecondaryAction, { onClick: layout.toggle, children: _jsx(Switch, { edge: "end", checked: layout.current === 'top' }) })] })), configs.preferences.allowQuickSearch && !isSmDown && (_jsxs(ListItemButton, { onClick: quicksearch.toggle, children: [_jsx(ListItemText, { children: t('personalization.quicksearch') }), _jsx(ListItemSecondaryAction, { children: _jsx(Switch, { edge: "end", checked: quicksearch.show, onClick: quicksearch.toggle }) })] })), configs.preferences.allowAutoHideTopbar && (_jsxs(ListItemButton, { disabled: layout.current === 'top', onClick: appbar.toggleAutoHide, children: [_jsx(ListItemText, { children: t('personalization.autohideappbar') }), _jsx(ListItemSecondaryAction, { children: _jsx(Switch, { edge: "end", disabled: layout.current === 'top', checked: appbar.autoHide && layout.current !== 'top', onClick: appbar.toggleAutoHide }) })] })), configs.preferences.allowBreadcrumbs && !isSmDown && (_jsx(_Fragment, { children: _jsxs(ListItemButton, { onClick: breadcrumbs.toggle, children: [_jsx(ListItemText, { children: t('personalization.showbreadcrumbs') }), _jsx(ListItemSecondaryAction, { children: _jsx(Switch, { edge: "end", checked: breadcrumbs.show, onClick: breadcrumbs.toggle }) })] }) }))] })), (configs.preferences.allowTranslate || configs.allowPersonalization) && configs.preferences.allowReset && (_jsx(Divider, {})), configs.preferences.allowReset && (_jsx(List, { dense: true, children: _jsx(ListItemButton, { dense: true, onClick: clearStorage, children: _jsx(ListItemText, { children: t('personalization.reset_text') }) }) }))] }));
-};
-export default memo(ThemeSelection);

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

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

package/commons/components/topnav/ThemeSelectionIcon.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tune } from '@mui/icons-material';
-import { ClickAwayListener, Fade, IconButton, Paper, Popper, useTheme } from '@mui/material';
-import { useAppConfigs } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppConfigs';
-import ThemeSelection from '@cccsaurora/howler-ui/commons/components/topnav/ThemeSelection';
-import { useRef, useState } from 'react';
-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 ? (_jsx(ClickAwayListener, { onClickAway: onClickAway, children: _jsxs(IconButton, { ref: anchorEl, color: "inherit", "aria-label": "open drawer", onClick: onThemeSelectionClick, size: "large", children: [_jsx(Tune, {}), _jsx(Popper, { sx: { zIndex: theme.zIndex.drawer + 2, minWidth: '280px' }, open: open, anchorEl: anchorEl.current, placement: "bottom-end", transition: true, children: ({ TransitionProps }) => (_jsx(Fade, { ...TransitionProps, timeout: 250, children: _jsx(Paper, { style: { padding: theme.spacing(1) }, elevation: 4, children: _jsx(ThemeSelection, {}) }) })) })] }) })) : null;
-};
-export default ThemeSelectionIcon;

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

@@ -1,5 +0,0 @@
-import type { StyledComponent } from '@emotion/styled';
-import { type 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

@@ -1,71 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, ClickAwayListener, Divider, Fade, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Paper, Popper, styled, Typography, useTheme } from '@mui/material';
-import { useAppConfigs, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import AppAvatar, {} from '@cccsaurora/howler-ui/commons/components/display/AppAvatar';
-import ThemeSelection from '@cccsaurora/howler-ui/commons/components/topnav/ThemeSelection';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link, useLocation } from 'react-router-dom';
-export 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 (_jsxs("div", { children: [_jsx(Divider, {}), _jsx(ThemeSelection, {})] }));
-        }
-        return null;
-    }, [configs.allowPersonalization, configs.preferences.allowTranslate, configs.preferences.allowReset]);
-    const renderMenu = useCallback((type, menuItems, title, i18nKey) => {
-        if (menuItems !== undefined && menuItems !== null && menuItems.length !== 0) {
-            return (_jsxs("div", { children: [_jsx(Divider, {}), _jsx(List, { dense: true, subheader: _jsx(ListSubheader, { disableSticky: true, children: i18nKey ? t(i18nKey) : title }), children: menuItems.map((a, i) => a.element ? (_jsx(ListItem, { children: a.element }, `${type}-${i}`)) : (_jsxs(ListItemButton, { component: Link, to: a.route, children: [a.icon && _jsx(ListItemIcon, { children: a.icon }), _jsx(ListItemText, { children: a.i18nKey ? t(a.i18nKey) : a.title })] }, `${type}-${i}`))) })] }));
-        }
-        return null;
-    }, [t]);
-    useEffect(() => {
-        // This effect checks to see if the result of pressing a button was a navigation
-        // if so, close the settings bar.
-        if (open) {
-            setOpen(false);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location.pathname]);
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { ref: anchorRef, edge: "end", sx: {
-                    padding: 0,
-                    marginLeft: theme.spacing(1),
-                    marginRight: theme.spacing(1)
-                }, onClick: onProfileClick, size: "large", children: _jsx(AppUserAvatar, { alt: user.name, url: user.avatar, email: user.email, children: user.name
-                        .split(' ', 2)
-                        .map(n => n[0].toUpperCase())
-                        .join('') }) }), _jsx(ClickAwayListener, { onClickAway: onClickAway, children: _jsx(Popper, { sx: { zIndex: theme.zIndex.appBar + 200, minWidth: '280px' }, open: open, anchorEl: anchorRef.current, placement: "bottom-end", transition: true, children: ({ TransitionProps }) => (_jsx(Fade, { ...TransitionProps, timeout: 250, children: _jsxs(Paper, { style: { padding: theme.spacing(1) }, elevation: 4, children: [_jsx(List, { disablePadding: true, children: _jsx(ListItem, { disableGutters: true, dense: true, children: _jsxs(Box, { sx: {
-                                                display: 'flex',
-                                                paddingTop: 2,
-                                                paddingBottom: 2,
-                                                paddingLeft: 3,
-                                                paddingRight: 3,
-                                                alignItems: 'center'
-                                            }, children: [_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('') }), _jsxs(Box, { sx: { paddingLeft: 2 }, children: [_jsx(Typography, { variant: "body1", noWrap: true, children: _jsx("b", { children: user.name }) }), _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')] }) })) }) })] }));
-};
-export default memo(UserProfile);

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

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

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

@@ -1,29 +0,0 @@
-import { useSnackbar } from 'notistack';
-import { useTranslation } from 'react-i18next';
-export default function useClipboard() {
-    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
-    const { t } = useTranslation();
-    const snackBarOptions = {
-        preventDuplicate: true,
-        autoHideDuration: 3000,
-        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 };
-}

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

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

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

@@ -1,11 +0,0 @@
-import { useMemo } from 'react';
-// @ts-ignore
-const APP_ENV = process.env;
-export default function useAppEnv(key) {
-    return useMemo(() => {
-        if (key) {
-            return APP_ENV[key];
-        }
-        return APP_ENV;
-    }, [key]);
-}

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

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

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

@@ -1,41 +0,0 @@
-import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
-const getBrowserFullscreenElementProp = () => {
-    if (typeof document.fullscreenElement !== 'undefined') {
-        return 'fullscreenElement';
-    }
-    // eslint-disable-next-line @typescript-eslint/dot-notation
-    if (typeof document['mozFullScreenElement'] !== 'undefined') {
-        return 'mozFullScreenElement';
-    }
-    // eslint-disable-next-line @typescript-eslint/dot-notation
-    if (typeof document['msFullscreenElement'] !== 'undefined') {
-        return 'msFullscreenElement';
-    }
-    // eslint-disable-next-line @typescript-eslint/dot-notation
-    if (typeof document['webkitFullscreenElement'] !== 'undefined') {
-        return 'webkitFullscreenElement';
-    }
-    throw new Error('fullscreenElement is not supported by this browser');
-};
-export default 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 = undefined;
-        };
-    });
-    return useMemo(() => [isFullscreen, setFullscreen], [isFullscreen, setFullscreen]);
-}

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

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

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

@@ -1,9 +0,0 @@
-import { useMemo } from 'react';
-import md5 from 'md5';
-const useGravatar = (email) => useMemo(() => {
-    if (email !== null) {
-        return `https://s.gravatar.com/avatar/${md5(email)}?d=404`;
-    }
-    return null;
-}, [email]);
-export default useGravatar;

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

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

@@ -1,52 +0,0 @@
-import { useCallback, useMemo } from 'react';
-export default function useLocalStorage(prefix) {
-    // Build the name of the key.
-    // If a 'prefix' was specified, the 'key' will be appended to the 'prefix' automatically.
-    const _buildKey = useCallback((name) => (prefix ? `${prefix}.${name}` : name), [prefix]);
-    // Get an item from local storage.
-    // If a 'prefix' was specified, the 'key' will be appended to the 'prefix' automatically.
-    const get = useCallback((key) => {
-        try {
-            return JSON.parse(localStorage.getItem(_buildKey(key)));
-        }
-        catch (e) {
-            return null;
-        }
-    }, [_buildKey]);
-    // Set an item to local storage.
-    // If a 'prefix' was specified, the 'key' will be appended to the 'prefix' automatically.
-    const set = useCallback((key, value) => localStorage.setItem(_buildKey(key), JSON.stringify(value)), [_buildKey]);
-    // Remove an item from local storage.
-    // If a 'prefix' was specified, the 'key' will be appended to the 'prefix' automatically.
-    const remove = useCallback((key, withPrefix = false) => localStorage.removeItem(withPrefix ? key : _buildKey(key)), [_buildKey]);
-    // Indicates if the local storage has an item with the specified key.
-    // If a 'prefix' was specified, the 'key' will be appended to the 'prefix' automatically.
-    const has = useCallback((key) => get(key) !== null, [get]);
-    // Get all the keys in the local storage.
-    const keys = useCallback(() => Object.keys(localStorage), []);
-    // Get the local storage items {key: string, value: any}.
-    // If a 'prefix' key was specified, it will return the items that have a key starting with the prefix.
-    // If no 'prefix' was specified, it will return all items.
-    const items = useCallback(() => keys().map(k => ({ key: k, value: get(k) })), [get, keys]);
-    // Clear all local storage.
-    // If a 'prefix' key was specified, it will only clear/remove the items that start with that key.
-    // If no 'prefix' key was specified, it will clear/remove all of them.
-    const clear = useCallback(() => keys().forEach(key => {
-        if (prefix && key.startsWith(prefix)) {
-            remove(key, true);
-        }
-        else if (!prefix) {
-            remove(key);
-        }
-    }), [prefix, remove, keys]);
-    // Return memoized object to prevent unecessary renders.
-    return useMemo(() => ({
-        get,
-        set,
-        remove,
-        has,
-        keys,
-        items,
-        clear
-    }), [get, set, remove, has, keys, items, clear]);
-}

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

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

@@ -1,39 +0,0 @@
-import useLocalStorage from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorage';
-import { useEffect, useMemo, useState } from 'react';
-/**
- * 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(key, initialValue) {
-    const { get, set, has, remove } = useLocalStorage();
-    const [value, setValue] = useState(get(key) ?? initialValue);
-    useEffect(() => {
-        if (initialValue !== null && initialValue !== undefined && !has(key)) {
-            set(key, initialValue);
-        }
-    }, [key, initialValue, has, set]);
-    return useMemo(() => [
-        value,
-        (newValue, save = true) => {
-            if (save) {
-                if (newValue !== undefined) {
-                    set(key, newValue);
-                }
-                else {
-                    remove(key);
-                }
-            }
-            setValue(newValue);
-        },
-        () => remove(key)
-    ], [key, value, set, remove]);
-}

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

@@ -1,7 +0,0 @@
-import { type Components, type PaletteOptions, type Theme } from '@mui/material';
-import type { 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

@@ -1,48 +0,0 @@
-import { createTheme } from '@mui/material';
-import { AppDefaultsThemeConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppDefaults';
-import { useMemo } from 'react';
-export const createTuiTheme = (components, palette) => createTheme({
-    components: {
-        ...components,
-        MuiCssBaseline: {
-            ...(components?.MuiCssBaseline || {}),
-            styleOverrides: {
-                ...(components.MuiCssBaseline?.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
-});
-export default function useThemeBuilder(theme = AppDefaultsThemeConfigs) {
-    return useMemo(() => ({
-        darkTheme: createTuiTheme(theme.components || {}, {
-            mode: 'dark',
-            ...(theme?.palette?.dark || {})
-        }),
-        lightTheme: createTuiTheme(theme.components || {}, {
-            mode: 'light',
-            ...(theme?.palette?.light || {})
-        })
-    }), [theme]);
-}

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

@@ -1,30 +0,0 @@
-import { type 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;
-};

package/commons/components/utils/keyboard.js

@@ -1,50 +0,0 @@
-import {} from 'react';
-export const ENTER = 'Enter';
-export const ESCAPE = 'Escape';
-export const ARROW_LEFT = 'ArrowLeft';
-export const ARROW_UP = 'ArrowUp';
-export const ARROW_RIGHT = 'ArrowRight';
-export const ARROW_DOWN = 'ArrowDown';
-export const BACKSPACE = 'Backspace';
-export const SPACE = ' ';
-export function is(key, check) {
-    return key === check;
-}
-export function isArrowUp(key) {
-    return is(key, ARROW_UP);
-}
-export function isArrowDown(key) {
-    return is(key, ARROW_DOWN);
-}
-export function isArrowLeft(key) {
-    return is(key, ARROW_LEFT);
-}
-export function isArrowRight(key) {
-    return is(key, ARROW_RIGHT);
-}
-export function isEscape(key) {
-    return is(key, ESCAPE);
-}
-export function isEnter(key) {
-    return is(key, ENTER);
-}
-export function isBackspace(key) {
-    return is(key, BACKSPACE);
-}
-export function isSpace(key) {
-    return is(key, SPACE);
-}
-export function parseEvent(event) {
-    return {
-        key: event.key,
-        isCtrl: event.ctrlKey,
-        isEnter: isEnter(event.key),
-        isSpace: isSpace(event.key),
-        isBackspace: isBackspace(event.key),
-        isEscape: isEscape(event.key),
-        isArrowLeft: isArrowLeft(event.key),
-        isArrowRight: isArrowRight(event.key),
-        isArrowUp: isArrowUp(event.key),
-        isArrowDown: isArrowDown(event.key)
-    };
-}

package/components/app/App.d.ts

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