@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/commons/components/app/AppConfigs.d.ts

@@ -0,0 +1,131 @@
+import type { Components, PaletteMode, PaletteOptions, Theme } from '@mui/material';
+import type { AppUserValidatedProp } from 'commons/components/app/AppUserService';
+import type { GravatarD } from 'commons/components/display/AppAvatar';
+import type { ReactElement, ReactNode } from 'react';
+import type { To } from 'react-router-dom';
+export type AppConfigs = {
+    preferences?: AppPreferenceConfigs;
+    theme?: AppThemeConfigs;
+    sitemap?: AppSiteMapConfigs;
+};
+export type AppPreferenceConfigs = {
+    appName: string;
+    appLink?: To;
+    appIconDark: ReactElement<any>;
+    appIconLight: ReactElement<any>;
+    bannerDark?: ReactElement<any>;
+    bannerLight?: ReactElement<any>;
+    allowAutoHideTopbar?: boolean;
+    allowBreadcrumbs?: boolean;
+    allowGravatar?: boolean;
+    allowQuickSearch?: boolean;
+    allowReset?: boolean;
+    allowLayoutSelection?: boolean;
+    allowThemeSelection?: boolean;
+    allowTranslate?: boolean;
+    defaultLayout?: AppLayoutMode;
+    defaultTheme?: PaletteMode;
+    defaultDrawerOpen?: boolean;
+    defaultShowQuickSearch?: boolean;
+    defaultAutoHideAppbar?: boolean;
+    defaultShowBreadcrumbs?: boolean;
+    topnav?: AppTopNavConfigs;
+    leftnav?: AppLeftNavConfigs;
+    avatarD?: GravatarD;
+    notificationURLs?: string[];
+};
+export type AppThemeConfigs = {
+    components?: Components<Omit<Theme, 'components'>>;
+    palette?: AppPaletteConfigs;
+    appbar?: AppBarThemeConfigs;
+};
+export type AppSiteMapConfigs = {
+    routes: AppSiteMapRoute[];
+    itemsBefore?: number;
+    itemsAfter?: number;
+};
+export type AppTopNavConfigs = {
+    themeSelectionMode?: AppThemeSelectionMode;
+    apps?: AppSwitcherItem[];
+    userMenu?: AppBarUserMenuElement[];
+    userMenuI18nKey?: string;
+    userMenuTitle?: string;
+    adminMenu?: AppBarUserMenuElement[];
+    adminMenuI18nKey?: string;
+    adminMenuTitle?: string;
+    quickSearchURI?: string;
+    quickSearchParam?: string;
+    left?: ReactNode;
+    leftAfterBreadcrumbs?: ReactNode;
+    rightBeforeSearch?: ReactNode;
+    right?: ReactNode;
+    hideUserAvatar?: boolean;
+};
+export type AppLeftNavConfigs = {
+    elements: AppLeftNavElement[];
+    width?: number;
+    hideNestedIcons?: boolean;
+};
+export type AppPaletteConfigs = {
+    light?: PaletteOptions;
+    dark?: PaletteOptions;
+};
+export type AppBarThemeConfigs = {
+    elevation?: number;
+    light?: AppBarStyles;
+    dark?: AppBarStyles;
+};
+export type AppBarStyles = {
+    color?: any;
+    backgroundColor?: any;
+};
+export type AppSiteMapRoute = {
+    path: string;
+    title: string;
+    textWidth?: number;
+    icon?: ReactNode;
+    isRoot?: boolean;
+    isLeaf?: boolean;
+    exclude?: boolean;
+    breadcrumbs?: string[];
+};
+export type AppBarUserMenuElement = {
+    i18nKey?: string;
+    title?: string;
+    route?: string;
+    icon?: ReactElement<any>;
+    element?: ReactElement<any>;
+};
+export type AppLeftNavElement = {
+    type: 'item' | 'group' | 'divider';
+    element: AppLeftNavItem | AppLeftNavGroup | null;
+};
+export type AppLeftNavItem = {
+    id: number | string;
+    i18nKey?: string;
+    text?: string;
+    userPropValidators?: AppUserValidatedProp[];
+    icon?: ReactElement<any>;
+    route?: string;
+    nested?: boolean;
+    render?: (open: boolean) => ReactElement;
+};
+export type AppLeftNavGroup = {
+    id: number | string;
+    open?: boolean;
+    i18nKey?: string;
+    title?: string;
+    userPropValidators?: AppUserValidatedProp[];
+    icon: React.ReactElement<any>;
+    items: AppLeftNavItem[];
+};
+export type AppSwitcherItem = {
+    alt: string;
+    name: string;
+    img_d: React.ReactElement<any> | string;
+    img_l: React.ReactElement<any> | string;
+    route: string;
+    newWindow?: boolean;
+};
+export type AppLayoutMode = 'side' | 'top';
+export type AppThemeSelectionMode = 'profile' | 'icon';

package/dist/commons/components/app/AppConfigs.js

@@ -0,0 +1 @@
+export {};

package/dist/commons/components/app/AppConstants.d.ts

@@ -0,0 +1,10 @@
+export declare const APP_STORAGE_PREFIX = "templateui.core";
+export declare const AppStorageKeys: {
+    LS_KEY_DARK_MODE: string;
+    LS_KEY_LAYOUT_MODE: string;
+    LS_KEY_LEFTNAV_OPEN: string;
+    LS_KEY_SHOW_QUICK_SEARCH: string;
+    LS_KEY_AUTOHIDE_APPBAR: string;
+    LS_KEY_BREADCRUMBS_ENABLED: string;
+    LS_KEY_BREADCRUMBS_OPEN: string;
+};

package/dist/commons/components/app/AppConstants.js

@@ -0,0 +1,10 @@
+export const APP_STORAGE_PREFIX = 'templateui.core';
+export const AppStorageKeys = {
+    LS_KEY_DARK_MODE: `${APP_STORAGE_PREFIX}.darkMode`,
+    LS_KEY_LAYOUT_MODE: `${APP_STORAGE_PREFIX}.navLayout`,
+    LS_KEY_LEFTNAV_OPEN: `${APP_STORAGE_PREFIX}.drawerOpen`,
+    LS_KEY_SHOW_QUICK_SEARCH: `${APP_STORAGE_PREFIX}.showQuickSearch`,
+    LS_KEY_AUTOHIDE_APPBAR: `${APP_STORAGE_PREFIX}.autoHideAppbar`,
+    LS_KEY_BREADCRUMBS_ENABLED: `${APP_STORAGE_PREFIX}.breadcrumbsEnabled`,
+    LS_KEY_BREADCRUMBS_OPEN: `${APP_STORAGE_PREFIX}.breadcrumbsState`
+};

package/dist/commons/components/app/AppContexts.d.ts

@@ -0,0 +1,105 @@
+import type { PaletteMode } from '@mui/material';
+import type { AppConfigs, AppLayoutMode, AppLeftNavElement, AppSwitcherItem } from 'commons/components/app/AppConfigs';
+import type { ItemComponentProps } from 'commons/components/app/AppNotificationService';
+import type { AppSearchItem, AppSearchMode, AppSearchService } from 'commons/components/app/AppSearchService';
+import type { AppUser, AppUserService } from 'commons/components/app/AppUserService';
+import type { BreadcrumbItem } from 'commons/components/app/hooks/useAppSitemap';
+import { type ReactElement } from 'react';
+export type AppContextType = {
+    configs: AppConfigs;
+    theme: PaletteMode;
+    toggleTheme: () => void;
+    toggleLanguage: () => void;
+};
+export type AppSwitcherContextType = {
+    empty: boolean;
+    items: AppSwitcherItem[];
+    setItems: (items: AppSwitcherItem[]) => void;
+};
+export type AppQuickSearchContextType = {
+    show: boolean;
+    setShow: (show: boolean) => void;
+    toggle: () => void;
+};
+export type AppSearchServiceContextType<T = any> = {
+    provided: boolean;
+    service: AppSearchService<T>;
+    state: AppSearchServiceState<T>;
+};
+export type AppNotificationServiceContextType = {
+    provided: boolean;
+    service: AppNotificationService;
+    state: AppNotificationServiceState;
+};
+export type AppLeftNavContextType = {
+    open: boolean;
+    elements: AppLeftNavElement[];
+    toggle: () => void;
+    setOpen: (show: boolean) => void;
+    setElements: (elements: AppLeftNavElement[]) => void;
+};
+export type AppLayoutContextType = {
+    ready: boolean;
+    current: AppLayoutMode;
+    hideMenus: () => void;
+    setReady: (ready: boolean) => void;
+    toggle: () => void;
+};
+export type AppBarContextType = {
+    show: boolean;
+    autoHide: boolean;
+    setShow: (show: boolean) => void;
+    setAutoHide: (autoHide: boolean) => void;
+    toggleAutoHide: () => void;
+};
+export type AppBreadcrumbsContextType = {
+    show: boolean;
+    items: BreadcrumbItem[];
+    setItems: (newItems: BreadcrumbItem[]) => void;
+    toggle: () => void;
+    last: () => BreadcrumbItem;
+    first: () => BreadcrumbItem;
+};
+export type AppDrawerContextType = {
+    isOpen: boolean;
+    isFloatThreshold: boolean;
+    width: number | string;
+    maximized: boolean;
+    element: ReactElement;
+    open: (props: AppDrawerOpenProps) => void;
+    close: () => void;
+    setWidth: (width: number | string) => void;
+    setMaximized: (maximized: boolean) => void;
+};
+export type AppSearchServiceState<T = any, R = any> = {
+    searching: boolean;
+    menu: boolean;
+    mode: AppSearchMode;
+    items: AppSearchItem<T>[];
+    result?: R;
+    set: (state: AppSearchServiceState<T>) => void;
+};
+export type AppNotificationServiceState = {
+    urls: string[];
+    set: (state: AppNotificationServiceState) => void;
+};
+export type AppNotificationService = {
+    feedUrls?: string[];
+    notificationRenderer?: (item: ItemComponentProps) => ReactElement;
+};
+export type AppDrawerOpenProps = {
+    element: ReactElement;
+    width?: number | string;
+    floatThreshold?: number;
+    onClose?: (action: 'close' | 'hide') => void;
+};
+export declare const AppContext: import("react").Context<AppContextType>;
+export declare const AppLayoutContext: import("react").Context<AppLayoutContextType>;
+export declare const AppBarContext: import("react").Context<AppBarContextType>;
+export declare const AppBreadcrumbsContext: import("react").Context<AppBreadcrumbsContextType>;
+export declare const AppLeftNavContext: import("react").Context<AppLeftNavContextType>;
+export declare const AppQuickSearchContext: import("react").Context<AppQuickSearchContextType>;
+export declare const AppSearchServiceContext: import("react").Context<AppSearchServiceContextType<any>>;
+export declare const AppSwitcherContext: import("react").Context<AppSwitcherContextType>;
+export declare const AppUserContext: import("react").Context<AppUserService<AppUser>>;
+export declare const AppNotificationServiceContext: import("react").Context<AppNotificationServiceContextType>;

package/dist/commons/components/app/AppContexts.js

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+// React Context for the AppProvider (Root Context).
+export const AppContext = createContext(null);
+// React Context for the AppLayoutProvider.
+export const AppLayoutContext = createContext(null);
+// React Context for the AppBarProvider.
+export const AppBarContext = createContext(null);
+// React Context for the AppBreadcrumbsProvider.
+export const AppBreadcrumbsContext = createContext(null);
+// React Context for the AppLeftNavProvider.
+export const AppLeftNavContext = createContext(null);
+// React Context for the AppQuickSearchProvider.
+export const AppQuickSearchContext = createContext(null);
+// React Context for the AppSearchServiceProvider.
+export const AppSearchServiceContext = createContext(null);
+// React Context for the AppSwitcherProvider.
+export const AppSwitcherContext = createContext(null);
+// React Context for the AppUserProvider.
+export const AppUserContext = createContext(null);
+// React Context for the AppNotificationServiceProvider.
+export const AppNotificationServiceContext = createContext(null);

package/dist/commons/components/app/AppDefaults.d.ts

@@ -0,0 +1,6 @@
+import type { AppLeftNavConfigs, AppPreferenceConfigs, AppSiteMapConfigs, AppThemeConfigs, AppTopNavConfigs } from 'commons/components/app/AppConfigs';
+export declare const AppDefaultsPreferencesConfigs: AppPreferenceConfigs;
+export declare const AppDefaultsLeftNavConfigs: AppLeftNavConfigs;
+export declare const AppDefaultsTopNavConfigs: AppTopNavConfigs;
+export declare const AppDefaultsSitemapConfigs: AppSiteMapConfigs;
+export declare const AppDefaultsThemeConfigs: AppThemeConfigs;

package/dist/commons/components/app/AppDefaults.js

@@ -0,0 +1,40 @@
+// AppPreferenceConfigs defaults.
+export const AppDefaultsPreferencesConfigs = {
+    appName: null,
+    appLink: '/',
+    appIconDark: null,
+    appIconLight: null,
+    bannerDark: null,
+    bannerLight: null,
+    defaultLayout: 'side',
+    defaultTheme: 'dark',
+    defaultShowBreadcrumbs: true,
+    allowAutoHideTopbar: true,
+    allowBreadcrumbs: true,
+    allowQuickSearch: true,
+    allowReset: true,
+    allowLayoutSelection: true,
+    allowThemeSelection: true,
+    allowTranslate: true,
+    avatarD: 'mp'
+};
+// AppLeftNavConfigs defaults.
+export const AppDefaultsLeftNavConfigs = {
+    elements: [],
+    width: 240,
+    hideNestedIcons: false
+};
+// AppTopNavConfigs defaults.
+export const AppDefaultsTopNavConfigs = {
+    themeSelectionMode: 'profile',
+    quickSearchURI: '/search/',
+    quickSearchParam: 'q'
+};
+// AppSiteMapConfigs defaults.
+export const AppDefaultsSitemapConfigs = {
+    routes: [],
+    itemsBefore: 1,
+    itemsAfter: 2
+};
+// AppThemeConfigs defaults.
+export const AppDefaultsThemeConfigs = {};

package/dist/commons/components/app/AppNotificationService.d.ts

@@ -0,0 +1,6 @@
+import type { FeedItem } from 'commons/components/notification';
+export type ItemComponentProps = {
+    item: FeedItem;
+    app?: unknown;
+    eed?: unknown;
+};

package/dist/commons/components/app/AppNotificationService.js

@@ -0,0 +1 @@
+export {};

package/dist/commons/components/app/AppProvider.d.ts

@@ -0,0 +1,15 @@
+import type { AppPreferenceConfigs, AppSiteMapConfigs, AppThemeConfigs } from 'commons/components/app/AppConfigs';
+import { type AppNotificationService } from 'commons/components/app/AppContexts';
+import type { AppSearchService } from 'commons/components/app/AppSearchService';
+import type { AppUser, AppUserService } from 'commons/components/app/AppUserService';
+import { type ReactNode } from 'react';
+export type AppProviderProps<U extends AppUser> = {
+    preferences?: AppPreferenceConfigs;
+    theme?: AppThemeConfigs;
+    sitemap?: AppSiteMapConfigs;
+    user?: AppUserService<U>;
+    search?: AppSearchService;
+    notification?: AppNotificationService;
+    children: ReactNode;
+};
+export default function AppProvider<U extends AppUser>({ theme, user, search, sitemap, notification, preferences, children }: AppProviderProps<U>): import("react/jsx-runtime").JSX.Element;

package/dist/commons/components/app/AppProvider.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledEngineProvider, ThemeProvider, useMediaQuery } from '@mui/material';
+import { AppStorageKeys } from 'commons/components/app/AppConstants';
+import { AppContext } from 'commons/components/app/AppContexts';
+import { AppDefaultsPreferencesConfigs } from 'commons/components/app/AppDefaults';
+import AppBarProvider from 'commons/components/app/providers/AppBarProvider';
+import AppLayoutProvider from 'commons/components/app/providers/AppLayoutProvider';
+import AppLeftNavProvider from 'commons/components/app/providers/AppLeftNavProvider';
+import AppSnackbarProvider from 'commons/components/app/providers/AppSnackbarProvider';
+import AppUserProvider from 'commons/components/app/providers/AppUserProvider';
+import useLocalStorageItem from 'commons/components/utils/hooks/useLocalStorageItem';
+import useThemeBuilder from 'commons/components/utils/hooks/useThemeBuilder';
+import i18n from 'i18n';
+import { useCallback, useMemo } from 'react';
+const { LS_KEY_DARK_MODE } = AppStorageKeys;
+export default function AppProvider({ theme, user, search, sitemap, notification, preferences, children }) {
+    // Since we can't useAppConfig yet, we explicitly merge default and preferences config
+    //  to help figure the default theme mode.
+    const { allowThemeSelection, defaultTheme } = { ...AppDefaultsPreferencesConfigs, ...(preferences || {}) };
+    // Store theme state in local storage.
+    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+    const [darkMode, setDarkMode] = useLocalStorageItem(LS_KEY_DARK_MODE, defaultTheme === 'dark' || prefersDarkMode);
+    // Enforce default theme if selection isn't alloweed.
+    const _darkMode = allowThemeSelection ? darkMode : defaultTheme === 'dark';
+    // Create MUI Themes.
+    const { lightTheme, darkTheme } = useThemeBuilder(theme);
+    // Callback to toggle theme.
+    const toggleTheme = useCallback(() => setDarkMode(!darkMode), [darkMode, setDarkMode]);
+    // Callback to toggle language.
+    const toggleLanguage = useCallback(() => i18n.changeLanguage(i18n.language === 'en' ? 'fr' : 'en'), []);
+    // Memoize context value to prevent extraneous renders on components that use it.
+    const contextValue = useMemo(() => {
+        return {
+            theme: (darkMode ? 'dark' : 'light'),
+            configs: { preferences, theme, sitemap },
+            toggleTheme,
+            toggleLanguage
+        };
+    }, [darkMode, preferences, theme, sitemap, toggleTheme, toggleLanguage]);
+    return (_jsx(AppContext.Provider, { value: contextValue, children: _jsx(StyledEngineProvider, { injectFirst: true, children: _jsx(ThemeProvider, { theme: _darkMode ? darkTheme : lightTheme, children: _jsx(AppUserProvider, { service: user, children: _jsx(AppBarProvider, { search: search, notification: notification, children: _jsx(AppLeftNavProvider, { children: _jsx(AppLayoutProvider, { children: _jsx(AppSnackbarProvider, { children: children }) }) }) }) }) }) }) }));
+}

package/dist/commons/components/app/AppSearchService.d.ts

@@ -0,0 +1,21 @@
+import type { AppSearchServiceState } from 'commons/components/app/AppContexts';
+import type { ReactElement } from 'react';
+export type AppSearchMode = 'inline' | 'fullscreen';
+export type AppSearchItem<T = any> = {
+    id: string | number;
+    item: T;
+};
+export type AppSearchItemRendererOption<T = any> = {
+    state: AppSearchServiceState<T>;
+    index: number;
+    last: boolean;
+};
+export type AppSearchService<T = any> = {
+    onMounted?: (setValue?: (value: string) => void, state?: AppSearchServiceState<T>) => void;
+    onEnter?: (value: string, state?: AppSearchServiceState<T>, setValue?: (value: string) => void) => void;
+    onChange?: (value: string, state: AppSearchServiceState<T>, setValue?: (value: string) => void) => void;
+    onItemSelect?: (item: AppSearchItem<T>, state?: AppSearchServiceState<T>) => void;
+    itemRenderer: (item: AppSearchItem<T>, options?: AppSearchItemRendererOption<T>) => ReactElement;
+    headerRenderer?: (state: AppSearchServiceState<T>) => ReactElement;
+    footerRenderer?: (state: AppSearchServiceState<T>) => ReactElement;
+};

package/dist/commons/components/app/AppSearchService.js

@@ -0,0 +1 @@
+export {};

package/dist/commons/components/app/AppSkeleton.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Default Skeleton component that will render either [TopLayoutSkeleton] or [SideLayoutSkeleton] based on [useAppLayout::currentLayout].
+ */
+declare const LayoutSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export default LayoutSkeleton;

package/dist/commons/components/app/AppSkeleton.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Apps } from '@mui/icons-material';
+import { Divider, List, Skeleton, Toolbar, styled, useMediaQuery, useTheme } from '@mui/material';
+import { AppUserAvatar } from 'commons/components//topnav/UserProfile';
+import { useAppBreadcrumbs, useAppConfigs, useAppLayout, useAppLeftNav, useAppQuickSearch } from 'commons/components/app/hooks';
+import { AppBarBase } from 'commons/components/topnav/AppBar';
+const StyledContainer = styled('div')(({ theme }) => ({
+    position: 'fixed',
+    zIndex: theme.zIndex.appBar + 1000,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+}));
+const StyledTopLayout = styled('div')({
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column'
+});
+const StyledLeftLayout = styled('div')({
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'row'
+});
+const StyledContent = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    flex: 1,
+    backgroundColor: theme.palette.background.default
+}));
+const StyledContentLeft = styled('div')(({ theme }) => ({
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    borderTopColor: 'transparent',
+    backgroundColor: theme.palette.background.paper,
+    marginRight: 5,
+    flex: '0 0 auto',
+    [theme.breakpoints.down('sm')]: {
+        display: 'none'
+    }
+}));
+const StyledContentRight = styled('div')({
+    flex: '1 1 auto'
+});
+const StyledQuickSearchSkeleton = styled(Skeleton)(({ theme }) => ({
+    padding: theme.spacing(2),
+    [theme.breakpoints.down('sm')]: {
+        display: 'none'
+    }
+}));
+const StyledBreadcrumbsSkeleton = styled(Skeleton)(({ theme }) => ({
+    height: theme.spacing(4),
+    [theme.breakpoints.down('sm')]: {
+        display: 'none'
+    }
+}));
+const ButtonSkeleton = ({ style, withText, ...boxProps }) => {
+    const theme = useTheme();
+    const isXs = useMediaQuery(theme.breakpoints.only('xs'));
+    return (_jsxs("div", { style: { ...style, height: 48, display: 'flex', flexDirection: 'row' }, ...boxProps, children: [_jsx(Skeleton, { variant: "text", animation: "wave", children: _jsx(Apps, {}) }), withText && (_jsx(Skeleton, { variant: "text", animation: "wave", style: { flexGrow: 1, marginLeft: isXs ? theme.spacing(2) : theme.spacing(4) } }))] }));
+};
+const LeftNavElementsSkeleton = ({ elements, withText }) => {
+    const theme = useTheme();
+    return (_jsx(_Fragment, { children: elements.map((element, i) => {
+            if (element.type === 'divider') {
+                return _jsx(Divider, {}, `leftnav-sklt-divider-${i}`);
+            }
+            return (_jsx(ButtonSkeleton, { withText: withText, style: {
+                    paddingTop: theme.spacing(1),
+                    paddingBottom: theme.spacing(1),
+                    paddingLeft: theme.spacing(2),
+                    paddingRight: theme.spacing(2)
+                } }, `leftnav-sklt-${element.element.id}`));
+        }) }));
+};
+/**
+ * A Skeleton for the side layout...
+ */
+const SideLayoutSkeleton = () => {
+    // TUI hooks
+    const configs = useAppConfigs();
+    const leftnav = useAppLeftNav();
+    const breadcrumbs = useAppBreadcrumbs();
+    const quicksearch = useAppQuickSearch();
+    const { left, leftAfterBreadcrumbs } = configs.preferences.topnav;
+    // React hooks.
+    const muiTheme = useTheme();
+    const isXs = useMediaQuery(muiTheme.breakpoints.only('xs'));
+    const isSm = useMediaQuery(muiTheme.breakpoints.only('sm'));
+    const isMdUp = useMediaQuery(muiTheme.breakpoints.up('md'));
+    // basic styling.
+    const sp1 = muiTheme.spacing(1);
+    const sp2 = muiTheme.spacing(2);
+    const sp7 = muiTheme.spacing(7);
+    const showTopBarBreadcrumbs = breadcrumbs.show && !isSm;
+    const showSpacer = isXs || !quicksearch.show || (isMdUp && (breadcrumbs.show || left || leftAfterBreadcrumbs));
+    return (_jsx(StyledContainer, { children: _jsx(StyledLeftLayout, { children: _jsxs(StyledContent, { children: [_jsxs(StyledContentLeft, { style: { width: leftnav.open ? configs.preferences.leftnav.width : sp7 }, children: [_jsx(Toolbar, { disableGutters: true, children: _jsx(ButtonSkeleton, { withText: leftnav.open, style: { paddingTop: sp1, paddingBottom: sp1, paddingLeft: sp2, paddingRight: sp2, flexGrow: 1 } }) }), _jsx(Divider, {}), _jsxs(List, { disablePadding: true, children: [_jsx(LeftNavElementsSkeleton, { elements: leftnav.elements, withText: leftnav.open }), leftnav.elements?.length > 0 && _jsx(Divider, {}), _jsx(ButtonSkeleton, { withText: leftnav.open, style: { paddingTop: sp1, paddingBottom: sp1, paddingLeft: sp2, paddingRight: sp2 } })] })] }), _jsx(StyledContentRight, { children: _jsx(AppBarBase, { children: _jsxs(Toolbar, { disableGutters: true, style: { paddingRight: sp2, paddingLeft: !isXs ? sp2 : null }, children: [isXs && (_jsx(ButtonSkeleton, { withText: leftnav.open, style: {
+                                            paddingTop: sp1,
+                                            paddingBottom: sp1,
+                                            paddingLeft: sp2,
+                                            paddingRight: sp2,
+                                            flexGrow: 1
+                                        } })), showTopBarBreadcrumbs && _jsx(StyledBreadcrumbsSkeleton, { variant: "text", animation: "wave", width: 100 }), showSpacer && _jsx("div", { style: { flexGrow: 1 } }), quicksearch.show && (_jsx(StyledQuickSearchSkeleton, { variant: "text", animation: "wave", width: showTopBarBreadcrumbs ? 358 : 'auto', style: { flexGrow: !showTopBarBreadcrumbs ? 1 : 0 } })), _jsx(ButtonSkeleton, { withText: false, style: {
+                                            paddingTop: sp1,
+                                            paddingBottom: sp1,
+                                            paddingLeft: sp2,
+                                            paddingRight: sp2,
+                                            marginLeft: sp1,
+                                            marginRight: sp1
+                                        } }), _jsx(Skeleton, { animation: "wave", variant: "circular", children: _jsx(AppUserAvatar, {}) })] }) }) })] }) }) }));
+};
+/**
+ * A Skeleton for the top layout.
+ */
+const TopLayoutSkeleton = () => {
+    // TUI hooks
+    const configs = useAppConfigs();
+    const leftnav = useAppLeftNav();
+    const breadcrumbs = useAppBreadcrumbs();
+    const quicksearch = useAppQuickSearch();
+    const { left, leftAfterBreadcrumbs } = configs.preferences.topnav;
+    // React hooks
+    const muiTheme = useTheme();
+    const isXs = useMediaQuery(muiTheme.breakpoints.only('xs'));
+    const isSm = useMediaQuery(muiTheme.breakpoints.only('sm'));
+    const isMdUp = useMediaQuery(muiTheme.breakpoints.up('md'));
+    //
+    const showSpacer = isXs || !quicksearch.show || (isMdUp && (breadcrumbs.show || left || leftAfterBreadcrumbs));
+    const showTopBarBreadcrumbs = breadcrumbs.show && !isSm;
+    const sp1 = muiTheme.spacing(1);
+    const sp2 = muiTheme.spacing(2);
+    const sp3 = muiTheme.spacing(3);
+    const sp4 = muiTheme.spacing(4);
+    const sp7 = muiTheme.spacing(7);
+    return (_jsx(StyledContainer, { children: _jsxs(StyledTopLayout, { children: [_jsx(AppBarBase, { children: _jsxs(Toolbar, { style: { paddingRight: sp2 }, disableGutters: true, children: [_jsx(ButtonSkeleton, { withText: false, style: { paddingTop: sp1, paddingBottom: sp1, paddingLeft: sp2, paddingRight: sp4 } }), _jsx(Skeleton, { variant: "text", animation: "wave", style: { marginRight: sp3 }, children: _jsx("div", { style: { fontSize: '1.5rem', letterSpacing: '-1px' }, children: configs.preferences.appName }) }), showTopBarBreadcrumbs && _jsx(StyledBreadcrumbsSkeleton, { variant: "text", animation: "wave", width: 100 }), showSpacer && _jsx("div", { style: { flexGrow: 1 } }), quicksearch.show && (_jsx(StyledQuickSearchSkeleton, { variant: "text", animation: "wave", width: showTopBarBreadcrumbs ? 300 : 'auto', style: { flexGrow: !showTopBarBreadcrumbs ? 1 : 0 } })), _jsx(ButtonSkeleton, { withText: false, style: {
+                                    paddingTop: sp1,
+                                    paddingBottom: sp1,
+                                    paddingLeft: sp2,
+                                    paddingRight: sp2,
+                                    marginLeft: sp1,
+                                    marginRight: sp1
+                                } }), _jsx(Skeleton, { animation: "wave", variant: "circular", children: _jsx(AppUserAvatar, {}) })] }) }), _jsxs(StyledContent, { children: [_jsx(StyledContentLeft, { style: { width: leftnav.open ? configs.preferences.leftnav.width : sp7 }, children: _jsxs(List, { disablePadding: true, children: [_jsx(LeftNavElementsSkeleton, { elements: leftnav.elements, withText: leftnav.open }), leftnav.elements?.length > 0 && _jsx(Divider, {}), _jsx(ButtonSkeleton, { withText: leftnav.open, style: { paddingTop: sp1, paddingBottom: sp1, paddingLeft: sp2, paddingRight: sp2 } })] }) }), _jsx(StyledContentRight, {})] })] }) }));
+};
+/**
+ * Default Skeleton component that will render either [TopLayoutSkeleton] or [SideLayoutSkeleton] based on [useAppLayout::currentLayout].
+ */
+const LayoutSkeleton = () => {
+    const layout = useAppLayout();
+    return layout.current === 'top' ? _jsx(TopLayoutSkeleton, {}) : _jsx(SideLayoutSkeleton, {});
+};
+// Default exported component
+export default LayoutSkeleton;

package/dist/commons/components/app/AppUserService.d.ts

@@ -0,0 +1,17 @@
+export type AppUserValidatedProp = {
+    prop: string;
+    value: any;
+};
+export type AppUser = {
+    username?: string;
+    email?: string;
+    name?: string;
+    avatar?: string;
+    is_admin?: boolean;
+};
+export type AppUserService<T extends AppUser> = {
+    user: T;
+    setUser: (user: T) => void;
+    isReady: () => boolean;
+    validateProps?: (props: AppUserValidatedProp[]) => boolean;
+};

package/dist/commons/components/app/AppUserService.js

@@ -0,0 +1 @@
+export {};

package/dist/commons/components/app/hooks/index.d.ts

@@ -0,0 +1,18 @@
+export * from 'commons/components/app/hooks/useApp';
+export * from 'commons/components/app/hooks/useAppBanner';
+export * from 'commons/components/app/hooks/useAppBar';
+export * from 'commons/components/app/hooks/useAppBarHeight';
+export * from 'commons/components/app/hooks/useAppBarScrollTrigger';
+export * from 'commons/components/app/hooks/useAppBreadcrumbs';
+export * from 'commons/components/app/hooks/useAppConfigs';
+export * from 'commons/components/app/hooks/useAppLanguage';
+export * from 'commons/components/app/hooks/useAppLayout';
+export * from 'commons/components/app/hooks/useAppLeftNav';
+export * from 'commons/components/app/hooks/useAppLogo';
+export * from 'commons/components/app/hooks/useAppNotification';
+export * from 'commons/components/app/hooks/useAppQuickSearch';
+export * from 'commons/components/app/hooks/useAppSearchService';
+export * from 'commons/components/app/hooks/useAppSitemap';
+export * from 'commons/components/app/hooks/useAppSwitcher';
+export * from 'commons/components/app/hooks/useAppTheme';
+export * from 'commons/components/app/hooks/useAppUser';

package/dist/commons/components/app/hooks/index.js

@@ -0,0 +1,18 @@
+export * from 'commons/components/app/hooks/useApp';
+export * from 'commons/components/app/hooks/useAppBanner';
+export * from 'commons/components/app/hooks/useAppBar';
+export * from 'commons/components/app/hooks/useAppBarHeight';
+export * from 'commons/components/app/hooks/useAppBarScrollTrigger';
+export * from 'commons/components/app/hooks/useAppBreadcrumbs';
+export * from 'commons/components/app/hooks/useAppConfigs';
+export * from 'commons/components/app/hooks/useAppLanguage';
+export * from 'commons/components/app/hooks/useAppLayout';
+export * from 'commons/components/app/hooks/useAppLeftNav';
+export * from 'commons/components/app/hooks/useAppLogo';
+export * from 'commons/components/app/hooks/useAppNotification';
+export * from 'commons/components/app/hooks/useAppQuickSearch';
+export * from 'commons/components/app/hooks/useAppSearchService';
+export * from 'commons/components/app/hooks/useAppSitemap';
+export * from 'commons/components/app/hooks/useAppSwitcher';
+export * from 'commons/components/app/hooks/useAppTheme';
+export * from 'commons/components/app/hooks/useAppUser';

package/dist/commons/components/app/hooks/useApp.d.ts

@@ -0,0 +1 @@
+export declare function useApp(): import("commons/components/app/AppContexts").AppContextType;