@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/components/hooks/useMyChart.d.ts

@@ -0,0 +1,276 @@
+import 'chartjs-adapter-moment';
+declare const useMyChart: () => {
+    line: (titleKey: string, subtitleKey?: string) => {
+        responsive: boolean;
+        plugins: {
+            legend: {
+                display: boolean;
+                position: "top";
+                labels: {
+                    color: string;
+                };
+            };
+            title: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            subtitle: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            zoom: {
+                zoom: {
+                    wheel: {
+                        enabled: boolean;
+                        modifierKey: "ctrl";
+                    };
+                    pinch: {
+                        enabled: boolean;
+                    };
+                    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;
+                };
+            };
+        };
+    };
+    doughnut: (titleKey: string, subtitleKey?: string) => {
+        scales: any;
+        responsive: boolean;
+        plugins: {
+            legend: {
+                display: boolean;
+                position: "top";
+                labels: {
+                    color: string;
+                };
+            };
+            title: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            subtitle: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            zoom: {
+                zoom: {
+                    wheel: {
+                        enabled: boolean;
+                        modifierKey: "ctrl";
+                    };
+                    pinch: {
+                        enabled: boolean;
+                    };
+                    mode: "y";
+                };
+                pan: {
+                    enabled: boolean;
+                    mode: "x" | "y" | "xy";
+                };
+                limits: {
+                    y: {
+                        min: number;
+                    };
+                };
+            };
+        };
+    };
+    bar: (titleKey: string, subtitleKey?: string) => {
+        responsive: boolean;
+        plugins: {
+            legend: {
+                display: boolean;
+                position: "top";
+                labels: {
+                    color: string;
+                };
+            };
+            title: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            subtitle: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            zoom: {
+                zoom: {
+                    wheel: {
+                        enabled: boolean;
+                        modifierKey: "ctrl";
+                    };
+                    pinch: {
+                        enabled: boolean;
+                    };
+                    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;
+                };
+            };
+        };
+    };
+    scatter: (titleKey: string, subtitleKey?: string) => {
+        responsive: boolean;
+        plugins: {
+            legend: {
+                display: boolean;
+                position: "top";
+                labels: {
+                    color: string;
+                };
+            };
+            title: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            subtitle: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            zoom: {
+                zoom: {
+                    wheel: {
+                        enabled: boolean;
+                        modifierKey: "ctrl";
+                    };
+                    pinch: {
+                        enabled: boolean;
+                    };
+                    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;
+                };
+            };
+        };
+    };
+};
+export default useMyChart;

package/dist/components/hooks/useMyChart.js

@@ -0,0 +1,115 @@
+import { useTheme } from '@mui/material';
+import { ArcElement, BarElement, CategoryScale, Chart as ChartJS, Filler, Legend, LinearScale, LineElement, PointElement, SubTitle, TimeScale, Title, Tooltip } from 'chart.js';
+import 'chartjs-adapter-moment';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import { useCallback } from 'react';
+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 useMyChart = () => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    /**
+     * Generate a basic set of default options for our graphs
+     */
+    const generateOptions = useCallback((i18nKey, subtitleKey = 'route.analytics.overview.limit') => ({
+        responsive: true,
+        plugins: {
+            legend: {
+                display: true,
+                position: 'top',
+                labels: {
+                    color: theme.palette.text.primary
+                }
+            },
+            title: {
+                display: true,
+                text: t(i18nKey),
+                color: theme.palette.text.primary,
+                font: {
+                    size: 16
+                },
+                padding: {
+                    bottom: 0
+                }
+            },
+            subtitle: {
+                display: true,
+                text: t(subtitleKey),
+                color: theme.palette.text.secondary,
+                font: {
+                    size: 10
+                },
+                padding: {
+                    bottom: 10
+                }
+            },
+            zoom: {
+                zoom: {
+                    wheel: {
+                        enabled: true,
+                        modifierKey: 'ctrl'
+                    },
+                    pinch: {
+                        enabled: true
+                    },
+                    mode: 'y'
+                },
+                pan: {
+                    enabled: true,
+                    mode: 'xy'
+                },
+                limits: {
+                    y: { min: 0 }
+                }
+            }
+        },
+        scales: {
+            x: {
+                type: 'time',
+                time: {
+                    unit: 'day'
+                },
+                ticks: {
+                    color: theme.palette.text.primary
+                }
+            },
+            y: {
+                beginAtZero: true,
+                ticks: {
+                    color: theme.palette.text.primary
+                }
+            }
+        }
+    }), [t, theme.palette.text.primary, theme.palette.text.secondary]);
+    return {
+        // 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;
+        },
+        // https://www.chartjs.org/docs/latest/charts/doughnut.html
+        doughnut: (titleKey, subtitleKey) => {
+            const options = { ...generateOptions(titleKey, subtitleKey), scales: null };
+            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;
+        },
+        scatter: (titleKey, subtitleKey) => {
+            const options = generateOptions(titleKey, subtitleKey);
+            return options;
+        }
+    };
+};
+export default useMyChart;

package/dist/components/hooks/useMyLocalStorage.d.ts

@@ -0,0 +1,17 @@
+import { type LocalStorageContextType } from 'components/app/providers/LocalStorageProvider';
+import type { StorageKey } from 'utils/constants';
+declare const useMyLocalStorage: () => {
+    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;
+};
+export declare const useMyLocalStorageItem: <T>(key: StorageKey, initialValue?: T) => [T, (value: T) => void, () => void];
+export declare const useMyLocalStorageProvider: () => LocalStorageContextType;
+export default useMyLocalStorage;

package/dist/components/hooks/useMyLocalStorage.js

@@ -0,0 +1,15 @@
+import useLocalStorage from 'commons/components/utils/hooks/useLocalStorage';
+import useLocalStorageItem from 'commons/components/utils/hooks/useLocalStorageItem';
+import { LocalStorageContext } from 'components/app/providers/LocalStorageProvider';
+import { useContext } from 'react';
+import { MY_LOCAL_STORAGE_PREFIX } from 'utils/constants';
+const useMyLocalStorage = () => {
+    return useLocalStorage(MY_LOCAL_STORAGE_PREFIX);
+};
+export const useMyLocalStorageItem = (key, initialValue) => {
+    return useLocalStorageItem(`${MY_LOCAL_STORAGE_PREFIX}.${key}`, initialValue);
+};
+export const useMyLocalStorageProvider = () => {
+    return useContext(LocalStorageContext);
+};
+export default useMyLocalStorage;

package/dist/components/hooks/useMyPreferences.d.ts

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

package/dist/components/hooks/useMyPreferences.js

@@ -0,0 +1,248 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Api, Article, Book, Code, Dashboard, Description, Edit, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { AppBrand } from 'branding/AppBrand';
+import Classification from 'components/elements/display/Classification';
+import DocumentationButton from 'components/elements/display/DocumentationButton';
+import { useMemo } from 'react';
+// This is your App Name that will be displayed in the left drawer and the top navbar
+const APP_NAME = 'howler';
+const useMyPreferences = () => {
+    // The following menu items will show up in the Left Navigation Drawer
+    const MENU_ITEMS = useMemo(() => [
+        {
+            type: 'item',
+            element: {
+                id: 'dashboard',
+                i18nKey: 'route.home',
+                route: '/',
+                icon: _jsx(Dashboard, {})
+            }
+        },
+        {
+            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: 'item',
+            element: {
+                id: 'search.hit',
+                i18nKey: 'route.search',
+                route: '/search',
+                icon: _jsx(Search, {})
+            }
+        },
+        {
+            type: 'item',
+            element: {
+                id: 'advanced',
+                i18nKey: 'route.advanced',
+                route: '/advanced',
+                icon: _jsx(Code, {})
+            }
+        },
+        {
+            type: 'divider',
+            element: null
+        },
+        {
+            type: 'group',
+            element: {
+                id: 'manage',
+                i18nKey: 'manage',
+                icon: _jsx(Edit, {}),
+                items: [
+                    {
+                        id: 'manage.views',
+                        i18nKey: 'route.views',
+                        icon: _jsx(ManageSearch, {}),
+                        nested: true,
+                        route: '/views'
+                    },
+                    {
+                        id: 'manage.analytics',
+                        i18nKey: 'route.analytics',
+                        icon: _jsx(QueryStats, {}),
+                        nested: true,
+                        route: '/analytics'
+                    },
+                    {
+                        id: 'manage.templates',
+                        i18nKey: 'route.templates',
+                        icon: _jsx(FormatListBulleted, {}),
+                        nested: true,
+                        route: '/templates'
+                    },
+                    {
+                        id: 'manage.overviews',
+                        i18nKey: 'route.overviews',
+                        icon: _jsx(Article, {}),
+                        nested: true,
+                        route: '/overviews'
+                    },
+                    {
+                        id: 'manage.dossiers',
+                        i18nKey: 'route.dossiers',
+                        icon: _jsx(Topic, {}),
+                        nested: true,
+                        route: '/dossiers'
+                    },
+                    {
+                        id: 'manage.actions',
+                        i18nKey: 'route.actions',
+                        icon: _jsx(Terminal, {}),
+                        nested: true,
+                        route: '/action',
+                        userPropValidators: [{ prop: 'roles', value: 'automation_basic' }]
+                    },
+                    {
+                        id: 'action.integrations',
+                        i18nKey: 'route.integrations',
+                        icon: _jsx(Api, {}),
+                        nested: true,
+                        route: '/action/integrations',
+                        userPropValidators: [{ prop: 'roles', value: 'automation_basic' }]
+                    }
+                ]
+            }
+        },
+        {
+            type: 'divider',
+            element: null
+        },
+        {
+            type: 'group',
+            element: {
+                id: 'help',
+                i18nKey: 'page.help',
+                icon: _jsx(Help, {}),
+                items: [
+                    {
+                        id: 'help.main',
+                        i18nKey: 'route.help.main',
+                        route: '/help',
+                        nested: true,
+                        icon: _jsx(HelpCenter, {})
+                    },
+                    {
+                        id: 'help.client',
+                        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.search', i18nKey: 'route.help.search', route: '/help/search', nested: true, icon: _jsx(Search, {}) },
+                    {
+                        id: 'help.views',
+                        i18nKey: 'route.help.views',
+                        route: '/help/views',
+                        nested: true,
+                        icon: _jsx(SavedSearch, {})
+                    },
+                    {
+                        id: 'help.templates',
+                        i18nKey: 'route.help.templates',
+                        route: '/help/templates',
+                        nested: true,
+                        icon: _jsx(FormatListBulleted, {})
+                    },
+                    {
+                        id: 'help.overview',
+                        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.actions',
+                        i18nKey: 'route.help.actions',
+                        route: '/help/actions',
+                        nested: true,
+                        icon: _jsx(SettingsSuggest, {})
+                    },
+                    {
+                        id: 'help.notebook',
+                        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.retention',
+                        i18nKey: 'route.help.retention',
+                        route: '/help/retention',
+                        nested: true,
+                        icon: _jsx(Book, {})
+                    }
+                ]
+            }
+        }
+    ], 
+    // prettier-ignore
+    []);
+    // This is the basic user menu, it is a menu that shows up in account avatar popover.
+    const USER_MENU_ITEMS = useMemo(() => [
+        {
+            i18nKey: 'usermenu.settings',
+            route: '/settings',
+            icon: _jsx(SettingsIcon, {})
+        },
+        {
+            i18nKey: 'usermenu.logout',
+            route: '/logout',
+            icon: _jsx(ExitToAppIcon, {})
+        }
+    ], []);
+    // This is the basic administrator menu, it is a menu that shows up under the user menu in the account avatar popover.
+    const ADMIN_MENU_ITEMS = useMemo(() => [
+        {
+            i18nKey: 'adminmenu.users',
+            route: '/admin/users',
+            icon: _jsx(SupervisorAccount, {})
+        }
+    ], []);
+    // 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',
+        topnav: {
+            apps: [],
+            userMenu: USER_MENU_ITEMS,
+            userMenuI18nKey: 'usermenu',
+            adminMenu: ADMIN_MENU_ITEMS,
+            adminMenuI18nKey: 'adminmenu',
+            quickSearchParam: 'query',
+            quickSearchURI: '/hits',
+            leftAfterBreadcrumbs: _jsx(DocumentationButton, {}),
+            rightBeforeSearch: _jsx(Classification, {})
+        },
+        leftnav: {
+            elements: MENU_ITEMS
+        }
+    }), [USER_MENU_ITEMS, ADMIN_MENU_ITEMS, MENU_ITEMS]);
+};
+export default useMyPreferences;

package/dist/components/hooks/useMySearch.d.ts

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