@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1602

package/components/hooks/useMyChart.d.ts

@@ -2,6 +2,23 @@ import 'chartjs-adapter-dayjs-4';
 declare const useMyChart: () => {
     line: (titleKey: string, subtitleKey?: string) => {
         responsive: boolean;
+        scales: {
+            x: {
+                type: 'time';
+                time: {
+                    unit: 'day';
+                };
+                ticks: {
+                    color: string;
+                };
+            };
+            y: {
+                beginAtZero: boolean;
+                ticks: {
+                    color: string;
+                };
+            };
+        };
         plugins: {
             legend: {
                 display: boolean;
@@ -21,17 +38,6 @@ declare const useMyChart: () => {
                     bottom: number;
                 };
             };
-            subtitle: {
-                display: boolean;
-                text: string;
-                color: string;
-                font: {
-                    size: number;
-                };
-                padding: {
-                    bottom: number;
-                };
-            };
             zoom: {
                 zoom: {
                     wheel: {
@@ -43,36 +49,19 @@ declare const useMyChart: () => {
                     };
                     mode: 'y';
                 };
-                pan: {
-                    enabled: boolean;
-                    mode: 'x' | 'y' | 'xy';
-                };
                 limits: {
                     y: {
                         min: number;
                     };
                 };
-            };
-        };
-        scales: {
-            x: {
-                type: 'time';
-                time: {
-                    unit: 'day';
-                };
-                ticks: {
-                    color: string;
-                };
-            };
-            y: {
-                beginAtZero: boolean;
-                ticks: {
-                    color: string;
+                pan: {
+                    enabled: boolean;
+                    mode: 'x';
                 };
             };
         };
     };
-    doughnut: (titleKey: string, subtitleKey?: string) => {
+    doughnut: (titleKey: string, subtitleKey?: string) => Omit<{
         responsive: boolean;
         plugins: {
             legend: {
@@ -126,18 +115,27 @@ declare const useMyChart: () => {
                 };
             };
         };
-        scales: any;
-    };
-    bar: (titleKey: string, subtitleKey?: string) => {
-        responsive: boolean;
-        plugins: {
-            legend: {
-                display: boolean;
-                position: 'top';
-                labels: {
+        scales: {
+            x: {
+                type: 'time';
+                time: {
+                    unit: 'day';
+                };
+                ticks: {
+                    color: string;
+                };
+            };
+            y: {
+                beginAtZero: boolean;
+                ticks: {
                     color: string;
                 };
             };
+        };
+    }, "scales">;
+    bar: (titleKey: string, subtitleKey?: string) => {
+        responsive: boolean;
+        plugins: {
             title: {
                 display: boolean;
                 text: string;
@@ -181,19 +179,19 @@ declare const useMyChart: () => {
                     };
                 };
             };
+            legend: {
+                display: boolean;
+            };
         };
         scales: {
-            x: {
-                type: 'time';
-                time: {
-                    unit: 'day';
-                };
+            y: {
+                beginAtZero: boolean;
                 ticks: {
+                    precision: number;
                     color: string;
                 };
             };
-            y: {
-                beginAtZero: boolean;
+            x: {
                 ticks: {
                     color: string;
                 };

package/components/hooks/useMyChart.js

@@ -7,6 +7,11 @@ import { useTranslation } from 'react-i18next';
 ChartJS.defaults.font.family = `'Roboto', 'Helvetica', 'Arial', sans-serif`;
 ChartJS.register(ArcElement, CategoryScale, LinearScale, TimeScale, PointElement, LineElement, Title, SubTitle, Tooltip, Legend, CategoryScale, BarElement, Filler);
 ChartJS.register(zoomPlugin);
+const withoutOption = (options, option) => {
+    const result = { ...options };
+    Reflect.deleteProperty(result, option);
+    return result;
+};
 const useMyChart = () => {
     const { t } = useTranslation();
     const theme = useTheme();
@@ -87,24 +92,40 @@ const useMyChart = () => {
         // https://www.chartjs.org/docs/latest/charts/line.html
         line: (titleKey, subtitleKey) => {
             const options = generateOptions(titleKey, subtitleKey);
-            options.plugins.subtitle = null;
-            options.plugins.zoom.pan.mode = 'x';
-            return options;
+            const plugins = withoutOption(options.plugins, 'subtitle');
+            return {
+                ...options,
+                plugins: {
+                    ...plugins,
+                    zoom: {
+                        ...plugins.zoom,
+                        pan: {
+                            ...plugins.zoom.pan,
+                            mode: 'x'
+                        }
+                    }
+                }
+            };
         },
         // https://www.chartjs.org/docs/latest/charts/doughnut.html
         doughnut: (titleKey, subtitleKey) => {
-            const options = { ...generateOptions(titleKey, subtitleKey), scales: null };
+            const options = withoutOption(generateOptions(titleKey, subtitleKey), 'scales');
             return options;
         },
         // https://www.chartjs.org/docs/latest/charts/bar.html
         bar: (titleKey, subtitleKey) => {
             const options = generateOptions(titleKey, subtitleKey);
-            options.plugins.legend = { display: false };
-            options.scales = {
-                y: { beginAtZero: true, ticks: { precision: 0, color: theme.palette.text.primary } },
-                x: { ticks: { color: theme.palette.text.primary } }
+            return {
+                ...options,
+                plugins: {
+                    ...options.plugins,
+                    legend: { display: false }
+                },
+                scales: {
+                    y: { beginAtZero: true, ticks: { precision: 0, color: theme.palette.text.primary } },
+                    x: { ticks: { color: theme.palette.text.primary } }
+                }
             };
-            return options;
         },
         scatter: (titleKey, subtitleKey) => {
             const options = generateOptions(titleKey, subtitleKey);

package/components/hooks/useMyCookies.d.ts

@@ -0,0 +1,3 @@
+import type { TuiCookies } from '@tui/core';
+export declare const APP_COOKIES_DEFAULTS: Partial<TuiCookies>;
+export declare const useMyCookies: () => Partial<TuiCookies>;

package/components/hooks/useMyCookies.js

@@ -0,0 +1,8 @@
+export const APP_COOKIES_DEFAULTS = {
+    showBreadcrumbs: false,
+    showQuickSearch: false,
+    drawerOpen: true
+};
+export const useMyCookies = () => {
+    return APP_COOKIES_DEFAULTS;
+};

package/components/hooks/useMyLocalStorage.d.ts

@@ -1,7 +1,8 @@
 import { type LocalStorageContextType } from '@cccsaurora/howler-ui/components/app/providers/LocalStorageProvider';
 import type { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { type LocalStorageItemResult, type NonNullish, type WidenLiteral } from './useLocalStorageItem';
 declare const useMyLocalStorage: () => {
-    get: <T>(key: string) => T;
+    get: <T>(key: string) => T | null;
     set: (key: string, value: any) => void;
     remove: (key: string, withPrefix?: boolean) => void;
     has: (key: string) => boolean;
@@ -12,6 +13,11 @@ declare const useMyLocalStorage: () => {
     }[];
     clear: () => void;
 };
-export declare const useMyLocalStorageItem: <T>(key: StorageKey, initialValue?: T) => [T, (value: T) => void, () => void];
+type UseMyLocalStorageItem = {
+    <T extends string | number | boolean | bigint>(key: StorageKey, initialValue: T): LocalStorageItemResult<WidenLiteral<T>>;
+    <T extends NonNullish>(key: StorageKey, initialValue: T): LocalStorageItemResult<T>;
+    <T>(key: StorageKey, initialValue?: T): LocalStorageItemResult<T | undefined>;
+};
+export declare const useMyLocalStorageItem: UseMyLocalStorageItem;
 export declare const useMyLocalStorageProvider: () => LocalStorageContextType;
 export default useMyLocalStorage;

package/components/hooks/useMyLocalStorage.js

@@ -2,7 +2,7 @@ import { LocalStorageContext } from '@cccsaurora/howler-ui/components/app/provid
 import { useContext } from 'react';
 import { MY_LOCAL_STORAGE_PREFIX } from '@cccsaurora/howler-ui/utils/constants';
 import useLocalStorage from './useLocalStorage';
-import useLocalStorageItem from './useLocalStorageItem';
+import useLocalStorageItem, {} from './useLocalStorageItem';
 const useMyLocalStorage = () => {
     return useLocalStorage(MY_LOCAL_STORAGE_PREFIX);
 };

package/components/hooks/useMyPreferences.d.ts

@@ -1,3 +1,3 @@
-import type { AppPreferenceConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+import type { AppPreferenceConfigs } from '@tui/core';
 declare const useMyPreferences: () => AppPreferenceConfigs;
 export default useMyPreferences;

package/components/hooks/useMyPreferences.js

@@ -1,236 +1,185 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Api, Article, Book, BookRounded, Code, Dashboard, Description, ExitToApp, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
-import { Stack } from '@mui/material';
-import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
+import { Divider, Stack } from '@mui/material';
 import { AppBarContext } from '@cccsaurora/howler-ui/components/app/providers/AppBarProvider';
 import Classification from '@cccsaurora/howler-ui/components/elements/display/Classification';
 import DocumentationButton from '@cccsaurora/howler-ui/components/elements/display/DocumentationButton';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { Fragment, useContext, useMemo } from 'react';
-import AppMenuBuilder from '@cccsaurora/howler-ui/utils/menuUtils';
+import { applyMainMenuOperations } from '@cccsaurora/howler-ui/utils/menuUtils';
 // This is your App Name that will be displayed in the left drawer and the top navbar
 const APP_NAME = 'howler';
 const useMyPreferences = () => {
     const { leftItems, rightItems } = useContext(AppBarContext);
     // The following menu items will show up in the Left Navigation Drawer
     const MENU_ITEMS = useMemo(() => {
-        let defaultMenu = [
-            {
-                type: 'item',
-                element: {
+        const defaultMenu = {
+            id: 'root',
+            type: 'menu',
+            items: [
+                {
                     id: 'dashboard',
+                    type: 'route',
                     i18nKey: 'route.home',
                     route: '/',
                     icon: _jsx(Dashboard, {})
-                }
-            },
-            {
-                type: 'item',
-                element: {
+                },
+                {
                     id: 'cases',
+                    type: 'route',
                     i18nKey: 'route.cases',
                     route: '/cases',
                     icon: _jsx(BookRounded, {})
-                }
-            },
-            {
-                type: 'group',
-                element: {
-                    id: 'views',
-                    i18nKey: 'route.views.saved',
-                    icon: _jsx(SavedSearch, {}),
-                    items: []
-                }
-            },
-            {
-                type: 'group',
-                element: {
-                    id: 'analytics',
-                    i18nKey: 'route.analytics.pinned',
-                    icon: _jsx(QueryStats, {}),
-                    items: []
-                }
-            },
-            {
-                type: 'divider',
-                element: null
-            },
-            {
-                type: 'item',
-                element: {
+                },
+                { id: 'divider.1', type: 'slot', component: Divider },
+                {
                     id: 'search.hit',
+                    type: 'route',
                     i18nKey: 'route.search',
                     route: '/search',
                     icon: _jsx(Search, {})
-                }
-            },
-            {
-                type: 'item',
-                element: {
+                },
+                {
                     id: 'advanced',
+                    type: 'route',
                     i18nKey: 'route.advanced',
                     route: '/advanced',
                     icon: _jsx(Code, {})
-                }
-            },
-            {
-                type: 'divider',
-                element: null
-            },
-            {
-                type: 'item',
-                element: {
+                },
+                { id: 'divider.2', type: 'slot', component: Divider },
+                {
                     id: 'manage.views',
+                    type: 'route',
                     i18nKey: 'route.views',
                     icon: _jsx(ManageSearch, {}),
                     route: '/views'
-                }
-            },
-            {
-                type: 'item',
-                element: {
+                },
+                {
                     id: 'manage.analytics',
+                    type: 'route',
                     i18nKey: 'route.analytics',
                     icon: _jsx(QueryStats, {}),
                     route: '/analytics'
-                }
-            },
-            {
-                type: 'item',
-                element: {
+                },
+                {
                     id: 'manage.templates',
+                    type: 'route',
                     i18nKey: 'route.templates',
                     icon: _jsx(FormatListBulleted, {}),
                     route: '/templates'
-                }
-            },
-            {
-                type: 'item',
-                element: {
+                },
+                {
                     id: 'manage.overviews',
+                    type: 'route',
                     i18nKey: 'route.overviews',
                     icon: _jsx(Article, {}),
                     route: '/overviews'
-                }
-            },
-            {
-                type: 'item',
-                element: {
+                },
+                {
                     id: 'manage.dossiers',
+                    type: 'route',
                     i18nKey: 'route.dossiers',
                     icon: _jsx(Topic, {}),
                     route: '/dossiers'
-                }
-            },
-            {
-                type: 'item',
-                element: {
+                },
+                {
                     id: 'manage.actions',
+                    type: 'route',
                     i18nKey: 'route.actions',
                     icon: _jsx(Terminal, {}),
                     route: '/action',
-                    userPropValidators: [
+                    validators: [
                         { prop: 'roles', value: 'automation_basic' },
                         { prop: 'roles', value: 'automation_advanced' },
                         { prop: 'roles', value: 'actionrunner_basic' },
                         { prop: 'roles', value: 'actionrunner_advanced' }
                     ]
-                }
-            },
-            {
-                type: 'item',
-                element: {
+                },
+                {
                     id: 'action.integrations',
+                    type: 'route',
                     i18nKey: 'route.integrations',
                     icon: _jsx(Api, {}),
                     route: '/action/integrations',
-                    userPropValidators: [{ prop: 'roles', value: 'automation_basic' }]
-                }
-            },
-            {
-                type: 'divider',
-                element: null
-            },
-            {
-                type: 'group',
-                element: {
+                    validators: [{ prop: 'roles', value: 'automation_basic' }]
+                },
+                {
                     id: 'help',
+                    type: 'menu',
                     i18nKey: 'page.help',
                     icon: _jsx(Help, {}),
                     items: [
                         {
                             id: 'help.main',
+                            type: 'route',
                             i18nKey: 'route.help.main',
                             route: '/help',
-                            nested: true,
                             icon: _jsx(HelpCenter, {})
                         },
                         {
                             id: 'help.client',
+                            type: 'route',
                             i18nKey: 'route.help.client',
                             route: '/help/client',
-                            nested: true,
                             icon: _jsx(Terminal, {})
                         },
-                        { id: 'help.hit', i18nKey: 'route.help.hit', route: '/help/hit', nested: true, icon: _jsx(Shield, {}) },
+                        { id: 'help.hit', type: 'route', i18nKey: 'route.help.hit', route: '/help/hit', icon: _jsx(Shield, {}) },
                         {
                             id: 'help.search',
+                            type: 'route',
                             i18nKey: 'route.help.search',
                             route: '/help/search',
-                            nested: true,
                             icon: _jsx(Search, {})
                         },
                         {
                             id: 'help.views',
+                            type: 'route',
                             i18nKey: 'route.help.views',
                             route: '/help/views',
-                            nested: true,
                             icon: _jsx(SavedSearch, {})
                         },
                         {
                             id: 'help.templates',
+                            type: 'route',
                             i18nKey: 'route.help.templates',
                             route: '/help/templates',
-                            nested: true,
                             icon: _jsx(FormatListBulleted, {})
                         },
                         {
                             id: 'help.overview',
+                            type: 'route',
                             i18nKey: 'route.help.overviews',
                             route: '/help/overviews',
-                            nested: true,
                             icon: _jsx(Article, {})
                         },
-                        { id: 'help.auth', i18nKey: 'route.help.auth', route: '/help/auth', nested: true, icon: _jsx(Key, {}) },
+                        { id: 'help.auth', type: 'route', i18nKey: 'route.help.auth', route: '/help/auth', icon: _jsx(Key, {}) },
                         {
                             id: 'help.actions',
+                            type: 'route',
                             i18nKey: 'route.help.actions',
                             route: '/help/actions',
-                            nested: true,
                             icon: _jsx(SettingsSuggest, {})
                         },
                         {
                             id: 'help.notebook',
+                            type: 'route',
                             i18nKey: 'route.help.notebook',
                             route: '/help/notebook',
-                            nested: true,
                             icon: _jsx(Description, {})
                         },
-                        { id: 'help.api', i18nKey: 'route.help.api', route: '/help/api', nested: true, icon: _jsx(Storage, {}) },
+                        { id: 'help.api', type: 'route', i18nKey: 'route.help.api', route: '/help/api', icon: _jsx(Storage, {}) },
                         {
                             id: 'help.retention',
+                            type: 'route',
                             i18nKey: 'route.help.retention',
                             route: '/help/retention',
-                            nested: true,
                             icon: _jsx(Book, {})
                         }
                     ]
                 }
-            }
-        ];
-        const appMenuBuilder = new AppMenuBuilder(defaultMenu);
-        appMenuBuilder.applyOperations(howlerPluginStore.mainMenuOperations);
-        return appMenuBuilder.menu;
+            ]
+        };
+        return [applyMainMenuOperations(defaultMenu, howlerPluginStore.mainMenuOperations)];
     }, 
     // prettier-ignore
     []);
@@ -265,27 +214,44 @@ const useMyPreferences = () => {
     }, []);
     // Return memoized config to prevent unnecessary re-renders.
     return useMemo(() => ({
-        appName: '',
-        allowGravatar: false,
-        appIconDark: _jsx(AppBrand, { application: APP_NAME, variant: "app" }),
-        appIconLight: _jsx(AppBrand, { application: APP_NAME, variant: "app" }),
-        bannerLight: _jsx(AppBrand, { application: APP_NAME, variant: "banner-vertical", size: "large" }),
-        bannerDark: _jsx(AppBrand, { application: APP_NAME, variant: "banner-vertical", size: "large" }),
-        defaultShowQuickSearch: true,
-        avatarD: 'retro',
+        brand: {
+            application: APP_NAME,
+            appName: 'Howler',
+            logo: {
+                dark: '/branding/howler/noswoosh-dark.svg',
+                light: '/branding/howler/noswoosh-light.svg'
+            },
+            name: {
+                dark: '/branding/howler/name-dark.svg',
+                light: '/branding/howler/name-light.svg'
+            }
+        },
+        appLink: '/',
+        allowThemeSelection: true,
         topnav: {
-            apps: [],
-            userMenu: USER_MENU_ITEMS,
-            userMenuI18nKey: 'usermenu',
-            adminMenu: ADMIN_MENU_ITEMS,
-            adminMenuI18nKey: 'adminmenu',
             quickSearchParam: 'query',
             quickSearchURI: '/hits',
-            leftAfterBreadcrumbs: (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(DocumentationButton, {}), leftItems.map(item => (_jsx(Fragment, { children: item.component }, item.id)))] })),
-            rightBeforeSearch: (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", pr: 1, children: [rightItems.map(item => (_jsx(Fragment, { children: item.component }, item.id))), _jsx(Classification, {})] }))
+            profile: {
+                menus: {
+                    user: { i18nKey: 'usermenu', slot: USER_MENU_ITEMS },
+                    admin: { i18nKey: 'adminmenu', slot: ADMIN_MENU_ITEMS }
+                }
+            },
+            slots: {
+                breadcrumbs: {
+                    right: [
+                        _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(DocumentationButton, {}), leftItems.map(item => (_jsx(Fragment, { children: item.component }, item.id)))] }, "breadcrumbs-right")
+                    ]
+                },
+                search: {
+                    left: [
+                        _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", pr: 1, children: [rightItems.map(item => (_jsx(Fragment, { children: item.component }, item.id))), _jsx(Classification, {})] }, "search-left")
+                    ]
+                }
+            }
         },
         leftnav: {
-            elements: MENU_ITEMS,
+            menus: MENU_ITEMS,
             width: 280
         }
     }), [USER_MENU_ITEMS, ADMIN_MENU_ITEMS, MENU_ITEMS, leftItems, rightItems]);

package/components/hooks/useMyRouter.d.ts

@@ -0,0 +1,2 @@
+import type { AppRouterAdapter } from '@tui/core';
+export declare const useMyRouter: () => AppRouterAdapter;

package/components/hooks/useMyRouter.js

@@ -0,0 +1,24 @@
+import { useCallback, useMemo } from 'react';
+import { Link, matchPath, useLocation, useMatches, useNavigate } from 'react-router';
+export const useMyRouter = () => {
+    const navigate = useNavigate();
+    const matches = useMatches();
+    const location = useLocation();
+    const processBreadcrumb = useCallback((match) => {
+        const item = match.handle?.breadcrumb ? match.handle.breadcrumb(match) : [];
+        return Array.isArray(item) ? item : [item];
+    }, []);
+    const _matchPath = useCallback((pattern, pathname) => {
+        return Boolean(matchPath(pattern, pathname));
+    }, []);
+    const _breadcrumbs = useCallback(() => {
+        return matches.filter(m => !!m.handle?.breadcrumb).flatMap(m => processBreadcrumb(m));
+    }, [matches, processBreadcrumb]);
+    return useMemo(() => ({
+        Link,
+        location,
+        navigate,
+        matchPath: _matchPath,
+        breadcrumbs: _breadcrumbs
+    }), [location, navigate, _breadcrumbs, _matchPath]);
+};

package/components/hooks/useMySearch.d.ts

@@ -1,4 +1,4 @@
-import type { AppSearchService } from '@cccsaurora/howler-ui/commons/components/app/AppSearchService';
+import type { AppSearchService } from '@tui/core';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 declare const useMySearch: () => AppSearchService<Hit>;
 export default useMySearch;