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

package/commons/components/app/hooks/useApp.tsx

@@ -0,0 +1,6 @@
+import { AppContext } from 'commons/components/app/AppContexts';
+import { useContext } from 'react';
+
+export function useApp() {
+  return useContext(AppContext);
+}

package/commons/components/app/hooks/useAppBanner.tsx

@@ -0,0 +1,7 @@
+import { useApp, useAppConfigs } from 'commons/components/app/hooks';
+
+export function useAppBanner() {
+  const { theme } = useApp();
+  const { preferences } = useAppConfigs();
+  return theme === 'dark' ? preferences.bannerDark : preferences.bannerLight;
+}

package/commons/components/app/hooks/useAppBar.tsx

@@ -0,0 +1,6 @@
+import { AppBarContext } from 'commons/components/app/AppContexts';
+import { useContext } from 'react';
+
+export function useAppBar() {
+  return useContext(AppBarContext);
+}

package/commons/components/app/hooks/useAppBarHeight.tsx

@@ -0,0 +1,27 @@
+import { useLayoutEffect, useState } from 'react';
+
+export const APPBAR_READY_EVENT = 'tui.event.appbar.ready';
+
+export function useAppBarHeight(): number {
+  const [height, setHeight] = useState<number>(-1);
+
+  const updateHeight = () => {
+    const appbar = document.getElementById('appbar');
+    if (appbar) {
+      const rect = appbar.getBoundingClientRect();
+      setHeight(rect.height);
+    }
+  };
+
+  useLayoutEffect(() => {
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    window.addEventListener(APPBAR_READY_EVENT, updateHeight);
+    return () => {
+      window.removeEventListener('resize', updateHeight);
+      window.removeEventListener(APPBAR_READY_EVENT, updateHeight);
+    };
+  }, []);
+
+  return height;
+}

package/commons/components/app/hooks/useAppBarScrollTrigger.tsx

@@ -0,0 +1,8 @@
+import { useScrollTrigger } from '@mui/material';
+
+export function useAppBarScrollTrigger() {
+  return useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 0
+  });
+}

package/commons/components/app/hooks/useAppBreadcrumbs.tsx

@@ -0,0 +1,6 @@
+import { AppBreadcrumbsContext } from 'commons/components/app/AppContexts';
+import { useContext } from 'react';
+
+export function useAppBreadcrumbs() {
+  return useContext(AppBreadcrumbsContext);
+}

package/commons/components/app/hooks/useAppConfigs.tsx

@@ -0,0 +1,54 @@
+import { AppContext } from 'commons/components/app/AppContexts';
+import {
+  AppDefaultsLeftNavConfigs,
+  AppDefaultsPreferencesConfigs,
+  AppDefaultsSitemapConfigs,
+  AppDefaultsThemeConfigs,
+  AppDefaultsTopNavConfigs
+} from 'commons/components/app/AppDefaults';
+import { useContext, useMemo } from 'react';
+
+export function useAppConfigs() {
+  const { configs } = useContext(AppContext);
+  return useMemo(() => {
+    // Merge user provided configs with defaults.
+    const { preferences, sitemap, theme } = configs;
+    const _configs = {
+      preferences: {
+        ...AppDefaultsPreferencesConfigs,
+        ...(preferences || {}),
+        topnav: {
+          ...AppDefaultsTopNavConfigs,
+          ...(preferences?.topnav || {})
+        },
+        leftnav: {
+          ...AppDefaultsLeftNavConfigs,
+          ...(preferences?.leftnav || {})
+        }
+      },
+      sitemap: {
+        ...AppDefaultsSitemapConfigs,
+        ...(sitemap || {})
+      },
+      theme: {
+        ...AppDefaultsThemeConfigs,
+        ...(theme || {})
+      }
+    };
+
+    // Indicates whether we should render the personalization section of the UserProfile.
+    const allowPersonalization =
+      _configs.preferences.allowAutoHideTopbar ||
+      _configs.preferences.allowBreadcrumbs ||
+      _configs.preferences.allowQuickSearch ||
+      _configs.preferences.allowReset ||
+      _configs.preferences.allowThemeSelection ||
+      _configs.preferences.allowLayoutSelection;
+
+    // Rebuild new context.
+    return {
+      ..._configs,
+      allowPersonalization
+    };
+  }, [configs]);
+}

package/commons/components/app/hooks/useAppLanguage.tsx

@@ -0,0 +1,29 @@
+import { AppContext } from 'commons/components/app/AppContexts';
+import i18n from 'i18n';
+import { useContext, useEffect, useMemo } from 'react';
+
+export type AppLanguageType = {
+  isFR: () => boolean;
+  isEN: () => boolean;
+  toggle: () => void;
+};
+
+export function useAppLanguage(onChange?: (language: 'en' | 'fr') => void): AppLanguageType {
+  const { toggleLanguage } = useContext(AppContext);
+
+  useEffect(() => {
+    if (onChange) {
+      i18n.on('languageChanged', onChange);
+    }
+    return () => {
+      if (onChange) {
+        i18n.off('languageChanged', onChange);
+      }
+    };
+  }, [onChange]);
+
+  return useMemo(
+    () => ({ isFR: () => i18n.language === 'fr', isEN: () => i18n.language === 'en', toggle: toggleLanguage }),
+    [toggleLanguage]
+  );
+}

package/commons/components/app/hooks/useAppLayout.tsx

@@ -0,0 +1,6 @@
+import { AppLayoutContext } from 'commons/components/app/AppContexts';
+import { useContext } from 'react';
+
+export function useAppLayout() {
+  return useContext(AppLayoutContext);
+}

package/commons/components/app/hooks/useAppLeftNav.tsx

@@ -0,0 +1,6 @@
+import { AppLeftNavContext } from 'commons/components/app/AppContexts';
+import { useContext } from 'react';
+
+export function useAppLeftNav() {
+  return useContext(AppLeftNavContext);
+}

package/commons/components/app/hooks/useAppLogo.tsx

@@ -0,0 +1,9 @@
+import { useApp } from 'commons/components/app/hooks/useApp';
+import { useAppConfigs } from 'commons/components/app/hooks/useAppConfigs';
+import { useMemo } from 'react';
+
+export function useAppLogo() {
+  const { theme } = useApp();
+  const { preferences } = useAppConfigs();
+  return useMemo(() => (theme === 'dark' ? preferences.appIconDark : preferences.appIconLight), [theme, preferences]);
+}

package/commons/components/app/hooks/useAppNotification.tsx

@@ -0,0 +1,6 @@
+import { AppNotificationServiceContext } from 'commons/components/app/AppContexts';
+import { useContext } from 'react';
+
+export function useAppNotification() {
+  return useContext(AppNotificationServiceContext);
+}

package/commons/components/app/hooks/useAppQuickSearch.tsx

@@ -0,0 +1,6 @@
+import { AppQuickSearchContext } from 'commons/components/app/AppContexts';
+import { useContext } from 'react';
+
+export function useAppQuickSearch() {
+  return useContext(AppQuickSearchContext);
+}

package/commons/components/app/hooks/useAppSearchService.tsx

@@ -0,0 +1,7 @@
+import type { AppSearchServiceContextType } from 'commons/components/app/AppContexts';
+import { AppSearchServiceContext } from 'commons/components/app/AppContexts';
+import { useContext } from 'react';
+
+export function useAppSearchService<T = any>(): AppSearchServiceContextType<T> {
+  return useContext(AppSearchServiceContext);
+}

package/commons/components/app/hooks/useAppSitemap.tsx

@@ -0,0 +1,84 @@
+import type { AppSiteMapRoute } from 'commons/components/app/AppConfigs';
+import { useAppConfigs } from 'commons/components/app/hooks';
+import i18n from 'i18n';
+import { useMemo } from 'react';
+import { matchPath, type PathMatch } from 'react-router-dom';
+
+const TITLE_404 = i18n.t('breadcrumb.404');
+
+export type BreadcrumbItem = { route: AppSiteMapRoute; matcher: PathMatch<string> };
+
+export const getRoute = (route: string, siteMap: AppSiteMapRoute[]): BreadcrumbItem => {
+  // match all the route provide in sitemap with current route.
+  const matchers = siteMap.map(_route => {
+    const matcher = matchPath(_route.path, route.replace(/\?.+/, ''));
+    return { route: _route, matcher };
+  });
+
+  // only keep the exact matched routes.
+  const matched = matchers.filter(m => m.matcher);
+
+  // hopefully, we only have a single match.
+  if (matched && matched.length > 1) {
+    // eslint-disable-next-line no-console
+    console.warn(`Found more than one sitemap route match for: ${route}`);
+  }
+  return matched && matched[0] ? matched[0] : { route: { path: route, title: TITLE_404 }, matcher: null };
+};
+
+const appendRoute = (breadcrumbs: BreadcrumbItem[], breadcrumb: BreadcrumbItem): BreadcrumbItem[] => {
+  // If the 'siteRoute' is null/undefined, we ignore it.
+  if (breadcrumb) {
+    // Is it same as last? - then leave it as is.
+    if (breadcrumb.route.path === breadcrumbs[breadcrumbs.length - 1].route.path) {
+      return breadcrumbs;
+    }
+    // If a root route, then we reset the breadcrumbs.
+    if (breadcrumb.route.isRoot) {
+      return [breadcrumb];
+    }
+    // If the last element of bread is a leaf, then we remove it.
+    if (breadcrumbs[breadcrumbs.length - 1].route.isLeaf) {
+      // eslint-disable-next-line no-param-reassign
+      breadcrumbs = breadcrumbs.slice(0, breadcrumbs.length - 1);
+    }
+    // See if the route is already in the breadcrumbs.
+    const index = breadcrumbs.findIndex(_breadcrumb => _breadcrumb.route.path === breadcrumb.route.path);
+    // If the route is already in breacrumbs, then we slice off what comes after,
+    //  if not then we append it to the end.
+    return index > -1 ? [...breadcrumbs.slice(0, index), breadcrumb] : [...breadcrumbs, breadcrumb];
+  }
+  return breadcrumbs;
+};
+
+// We need to dynamically build the title since it will be language/locale specific and therefore we cannot
+//  rely on the cached version since language might have changed since then.
+const resolveTitle = (breadcrumb: BreadcrumbItem, siteMap: AppSiteMapRoute[]) => {
+  // we need to refetch the route in order to ensure we have the correct language.
+  let title = breadcrumb.route.path ? getRoute(breadcrumb.route.path, siteMap).route.title : breadcrumb.route.title;
+  // if there are any parameters in match, replace them in title.
+  if (breadcrumb.matcher && breadcrumb.matcher.params) {
+    const { params } = breadcrumb.matcher;
+    Object.keys(params).forEach(k => {
+      title = title.replace(`{:${k}}`, params[k]);
+    });
+  }
+  return title;
+};
+
+// Indicates whether the specified item is the 404 route.
+const is404 = (breadcrumb: BreadcrumbItem) => breadcrumb.route.title === TITLE_404;
+
+//
+export function useAppSitemap() {
+  const { sitemap } = useAppConfigs();
+  return useMemo(
+    () => ({
+      appendRoute,
+      getTitle: (breadcrumb: BreadcrumbItem) => resolveTitle(breadcrumb, sitemap.routes),
+      getRoute: (path: string) => getRoute(path, sitemap.routes),
+      is404
+    }),
+    [sitemap.routes]
+  );
+}

package/commons/components/app/hooks/useAppSwitcher.tsx

@@ -0,0 +1,6 @@
+import { AppSwitcherContext } from 'commons/components/app/AppContexts';
+import { useContext } from 'react';
+
+export function useAppSwitcher() {
+  return useContext(AppSwitcherContext);
+}

package/commons/components/app/hooks/useAppTheme.tsx

@@ -0,0 +1,23 @@
+import { type PaletteMode } from '@mui/material';
+import { useApp } from 'commons/components/app/hooks';
+import { useMemo } from 'react';
+
+export type AppThemeType = {
+  theme: PaletteMode;
+  isDark: boolean;
+  isLight: boolean;
+  toggle: () => void;
+};
+
+export function useAppTheme(): AppThemeType {
+  const { theme, toggleTheme } = useApp();
+  return useMemo(
+    () => ({
+      theme,
+      isDark: theme === 'dark',
+      isLight: theme === 'light',
+      toggle: toggleTheme
+    }),
+    [theme, toggleTheme]
+  );
+}

package/commons/components/app/hooks/useAppUser.tsx

@@ -0,0 +1,7 @@
+import { AppUserContext } from 'commons/components/app/AppContexts';
+import type { AppUser, AppUserService } from 'commons/components/app/AppUserService';
+import { useContext } from 'react';
+
+export function useAppUser<U extends AppUser>(): AppUserService<U> {
+  return useContext(AppUserContext) as AppUserService<U>;
+}

package/commons/components/app/providers/AppBarProvider.tsx

@@ -0,0 +1,48 @@
+import { AppStorageKeys } from 'commons/components/app/AppConstants';
+import { AppBarContext, type AppNotificationService } from 'commons/components/app/AppContexts';
+import type { AppSearchService } from 'commons/components/app/AppSearchService';
+import { useAppConfigs } from 'commons/components/app/hooks';
+import AppBreadcrumbsProvider from 'commons/components/app/providers/AppBreadcrumbsProvider';
+import AppNotificationServiceProvider from 'commons/components/app/providers/AppNotificationProvider';
+import AppQuickSearchProvider from 'commons/components/app/providers/AppQuickSearchProvider';
+import AppSwitcherProvider from 'commons/components/app/providers/AppSwitcherProvider';
+import useLocalStorageItem from 'commons/components/utils/hooks/useLocalStorageItem';
+import { useMemo, useState, type ReactElement } from 'react';
+
+const { LS_KEY_AUTOHIDE_APPBAR } = AppStorageKeys;
+
+type AppTopNavProviderProps = {
+  search?: AppSearchService;
+  notification?: AppNotificationService;
+  children: ReactElement | ReactElement[];
+};
+
+export default function AppBarProvider({ search, notification, children }: AppTopNavProviderProps) {
+  const configs = useAppConfigs();
+  const [show, setShow] = useState<boolean>(true);
+  const [autoHide, setAutoHide] = useLocalStorageItem<boolean>(
+    LS_KEY_AUTOHIDE_APPBAR,
+    configs.preferences.defaultAutoHideAppbar
+  );
+  const context = useMemo(
+    () => ({
+      show,
+      autoHide: configs.preferences.allowAutoHideTopbar && autoHide,
+      setShow,
+      setAutoHide,
+      toggleAutoHide: () => setAutoHide(!autoHide)
+    }),
+    [configs.preferences.allowAutoHideTopbar, show, autoHide, setAutoHide]
+  );
+  return (
+    <AppBarContext.Provider value={context}>
+      <AppBreadcrumbsProvider>
+        <AppSwitcherProvider>
+          <AppNotificationServiceProvider service={notification}>
+            <AppQuickSearchProvider search={search}>{children}</AppQuickSearchProvider>
+          </AppNotificationServiceProvider>
+        </AppSwitcherProvider>
+      </AppBreadcrumbsProvider>
+    </AppBarContext.Provider>
+  );
+}

package/commons/components/app/providers/AppBreadcrumbsProvider.tsx

@@ -0,0 +1,53 @@
+import { AppStorageKeys } from 'commons/components/app/AppConstants';
+import { getRoute, useAppSitemap, type BreadcrumbItem } from 'commons/components/app/hooks/useAppSitemap';
+import useLocalStorageItem from 'commons/components/utils/hooks/useLocalStorageItem';
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { AppBreadcrumbsContext } from 'commons/components/app/AppContexts';
+import { useAppConfigs, useAppUser } from 'commons/components/app/hooks';
+
+const { LS_KEY_BREADCRUMBS_ENABLED } = AppStorageKeys;
+
+type AppBreadcrumbsProviderProps = {
+  children: ReactNode;
+};
+
+export default function AppBreadcrumbsProvider({ children }: AppBreadcrumbsProviderProps) {
+  const { pathname } = useLocation();
+  const { sitemap, preferences } = useAppConfigs();
+  const user = useAppUser();
+  const { appendRoute } = useAppSitemap();
+  const isUserReady = user.isReady();
+
+  // States.
+  const [items, setItems] = useState<BreadcrumbItem[]>([]);
+  const [show, setShow] = useLocalStorageItem<boolean>(LS_KEY_BREADCRUMBS_ENABLED, preferences.defaultShowBreadcrumbs);
+
+  // Reset the breadcrumbs if the user ready state changes.
+  useEffect(() => {
+    setItems(appendRoute([getRoute('/', sitemap.routes)], getRoute(pathname, sitemap.routes)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isUserReady]);
+
+  // The return callback will ensure the event handler deregisters when component
+  //  is unmounted.  Failure to do this will result in an event handler
+  //  being registered each time this component renders.
+  useEffect(() => {
+    const _matchedRoute = getRoute(pathname, sitemap.routes);
+    setItems(_items => appendRoute(_items, _matchedRoute));
+  }, [pathname, appendRoute, sitemap.routes]);
+
+  // Memoized context value.
+  const context = useMemo(() => {
+    return {
+      show: preferences.allowBreadcrumbs && show,
+      items,
+      setItems,
+      toggle: () => setShow(!show),
+      last: () => (items.length > 0 ? items[items.length - 1] : items[0]),
+      first: () => items[0]
+    };
+  }, [preferences.allowBreadcrumbs, show, items, setShow]);
+  return <AppBreadcrumbsContext.Provider value={context}>{children}</AppBreadcrumbsContext.Provider>;
+}

package/commons/components/app/providers/AppLayoutProvider.tsx

@@ -0,0 +1,114 @@
+import { CssBaseline, styled, useMediaQuery, useTheme } from '@mui/material';
+import { type AppLayoutMode } from 'commons/components/app/AppConfigs';
+import { AppStorageKeys } from 'commons/components/app/AppConstants';
+import { AppLayoutContext } from 'commons/components/app/AppContexts';
+import { useAppConfigs, useAppUser } from 'commons/components/app/hooks';
+import LeftNavDrawer from 'commons/components/leftnav/LeftNavDrawer';
+import AppBar from 'commons/components/topnav/AppBar';
+import useLocalStorageItem from 'commons/components/utils/hooks/useLocalStorageItem';
+import { useCallback, useMemo, useState, type ReactNode } from 'react';
+
+const { LS_KEY_LAYOUT_MODE } = AppStorageKeys;
+
+const AppHorizontal = styled('div')({
+  '@media print': {
+    overflow: 'unset !important'
+  },
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column'
+});
+
+const AppVertical = styled('div')({
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'row',
+  position: 'relative'
+});
+
+const AppVerticalLeft = styled('div')(({ theme }) => ({
+  height: '100%',
+  [theme.breakpoints.down('md')]: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0
+  }
+}));
+
+const AppVerticalRight = styled('div')({
+  '@media print': {
+    overflow: 'unset !important'
+  },
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+  flex: 1,
+  height: '100%',
+  minWidth: 0
+});
+
+type AppLayoutProps = {
+  children: ReactNode;
+};
+
+export default function AppLayoutProvider({ children }: AppLayoutProps) {
+  const muiTheme = useTheme();
+  const { preferences } = useAppConfigs();
+  const user = useAppUser();
+  const isSM = useMediaQuery(muiTheme.breakpoints.only('sm'));
+  const isPrinting = useMediaQuery('print');
+
+  // Layout related states.
+  const [current, setCurrent] = useLocalStorageItem<AppLayoutMode>(LS_KEY_LAYOUT_MODE, preferences.defaultLayout);
+  const [layoutReady, setLayoutReady] = useState<boolean>(false);
+  const [showMenus, setShowMenus] = useState<boolean>(true);
+
+  // Callback to toggle between 'side' and 'top' layouts.
+  const toggle = useCallback(() => setCurrent(current === 'top' ? 'side' : 'top'), [current, setCurrent]);
+
+  // Callback to hide topnav and leftnav.
+  const hideMenus = useCallback(() => setShowMenus(false), []);
+
+  // Callback to indicate whether the app layout is ready to be fully rendered.
+  const setReady = useCallback(isReady => setLayoutReady(isReady), []);
+
+  // Memoize the value of the context provider.
+  const context = useMemo(() => {
+    return {
+      ready: layoutReady,
+      current: preferences.allowLayoutSelection ? current : preferences.defaultLayout,
+      hideMenus,
+      setReady,
+      toggle
+    };
+  }, [current, preferences.allowLayoutSelection, preferences.defaultLayout, hideMenus, layoutReady, setReady, toggle]);
+
+  return (
+    <AppLayoutContext.Provider value={context}>
+      <CssBaseline enableColorScheme />
+      {context.current === 'side' ? (
+        <AppVertical>
+          <AppVerticalLeft>{user.isReady() && layoutReady && showMenus && <LeftNavDrawer />}</AppVerticalLeft>
+          <AppVerticalRight
+            id="app-scrollct"
+            style={{ overflow: 'auto', paddingLeft: showMenus && isSM && !isPrinting ? muiTheme.spacing(7) : 0 }}
+          >
+            {user.isReady() && layoutReady && showMenus && <AppBar />}
+            {children}
+          </AppVerticalRight>
+        </AppVertical>
+      ) : (
+        <AppHorizontal id="app-scrollct" style={{ overflow: 'auto' }}>
+          {user.isReady() && layoutReady && showMenus && <AppBar />}
+          <AppVertical>
+            <AppVerticalLeft>{user.isReady() && layoutReady && showMenus && <LeftNavDrawer />}</AppVerticalLeft>
+            <AppVerticalRight style={{ paddingLeft: showMenus && isSM && !isPrinting ? muiTheme.spacing(7) : 0 }}>
+              {children}
+            </AppVerticalRight>
+          </AppVertical>
+        </AppHorizontal>
+      )}
+    </AppLayoutContext.Provider>
+  );
+}

package/commons/components/app/providers/AppLeftNavProvider.tsx

@@ -0,0 +1,30 @@
+import { type AppLeftNavElement } from 'commons/components/app/AppConfigs';
+import { AppStorageKeys } from 'commons/components/app/AppConstants';
+import { AppLeftNavContext } from 'commons/components/app/AppContexts';
+import { useAppConfigs } from 'commons/components/app/hooks';
+import useLocalStorageItem from 'commons/components/utils/hooks/useLocalStorageItem';
+import { useCallback, useMemo, useState, type ReactNode } from 'react';
+
+const { LS_KEY_LEFTNAV_OPEN } = AppStorageKeys;
+
+type LeftNavProviderProps = {
+  children: ReactNode;
+};
+
+export default function AppLeftNavProvider({ children }: LeftNavProviderProps) {
+  const { preferences } = useAppConfigs();
+  const [open, setOpen] = useLocalStorageItem(LS_KEY_LEFTNAV_OPEN, preferences.defaultDrawerOpen);
+  const [elements, setElements] = useState<AppLeftNavElement[]>();
+  const toggle = useCallback(() => setOpen(!open), [open, setOpen]);
+  const context = useMemo(
+    () => ({
+      open,
+      elements: elements || preferences.leftnav.elements,
+      setOpen,
+      setElements,
+      toggle
+    }),
+    [open, elements, preferences.leftnav.elements, setOpen, toggle]
+  );
+  return <AppLeftNavContext.Provider value={context}>{children}</AppLeftNavContext.Provider>;
+}

package/commons/components/app/providers/AppNotificationProvider.tsx

@@ -0,0 +1,49 @@
+import {
+  AppNotificationServiceContext,
+  type AppNotificationService,
+  type AppNotificationServiceContextType,
+  type AppNotificationServiceState
+} from 'commons/components/app/AppContexts';
+import { useMemo, useState, type ReactElement } from 'react';
+
+const DEFAULT_CONTEXT: AppNotificationServiceContextType = {
+  provided: false,
+  service: {
+    feedUrls: [],
+    notificationRenderer: null
+  },
+  state: { urls: [], set: () => null }
+};
+
+export default function AppNotificationServiceProvider({
+  service,
+  children
+}: {
+  service?: AppNotificationService;
+  children: ReactElement | ReactElement[];
+}) {
+  // Default implementation of the AppNotificationService using configuration preferences.
+  const defaultService: AppNotificationService = useMemo(() => {
+    return {
+      feedUrls: null,
+      notificationRenderer: null
+    };
+  }, []);
+
+  const [state, setState] = useState<AppNotificationServiceState>(DEFAULT_CONTEXT.state);
+
+  // Memoize context value to prevent unnecessary renders.0
+  const context = useMemo(
+    () => ({
+      provided: !!service,
+      service: service || defaultService,
+      state: {
+        ...state,
+        set: setState
+      }
+    }),
+    [service, defaultService, state]
+  );
+
+  return <AppNotificationServiceContext.Provider value={context}>{children}</AppNotificationServiceContext.Provider>;
+}

package/commons/components/app/providers/AppQuickSearchProvider.tsx

@@ -0,0 +1,32 @@
+import { AppStorageKeys } from 'commons/components/app/AppConstants';
+import { AppQuickSearchContext } from 'commons/components/app/AppContexts';
+import { type AppSearchService } from 'commons/components/app/AppSearchService';
+import { useAppConfigs } from 'commons/components/app/hooks';
+import AppSearchServiceProvider from 'commons/components/app/providers/AppSearchServiceProvider';
+import useLocalStorageItem from 'commons/components/utils/hooks/useLocalStorageItem';
+import { useMemo, type ReactElement } from 'react';
+
+const { LS_KEY_SHOW_QUICK_SEARCH } = AppStorageKeys;
+
+type AppQuickSearchProviderProps = {
+  search?: AppSearchService;
+  children: ReactElement | ReactElement[];
+};
+
+export default function AppQuickSearchProvider({ search, children }: AppQuickSearchProviderProps) {
+  const { preferences } = useAppConfigs();
+  const [show, setShow] = useLocalStorageItem(LS_KEY_SHOW_QUICK_SEARCH, preferences.defaultShowQuickSearch);
+  const context = useMemo(
+    () => ({
+      show: preferences.allowQuickSearch && show,
+      setShow,
+      toggle: () => setShow(!show)
+    }),
+    [preferences.allowQuickSearch, show, setShow]
+  );
+  return (
+    <AppQuickSearchContext.Provider value={context}>
+      <AppSearchServiceProvider service={search}>{children}</AppSearchServiceProvider>
+    </AppQuickSearchContext.Provider>
+  );
+}