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

package/components/hooks/useHitSelection.js

@@ -0,0 +1,86 @@
+import "../../commons/components/app/AppContexts.js";
+import { useState, useCallback } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useAppBreadcrumbs } from "../../commons/components/app/hooks/useAppBreadcrumbs.js";
+import "../../i18n.js";
+import "../../commons/components/app/hooks/useAppSitemap.js";
+import { HitContext } from "../app/providers/HitProvider.js";
+import { HitSearchContext } from "../app/providers/HitSearchProvider.js";
+import { ParameterContext } from "../app/providers/ParameterProvider.js";
+import useMySitemap from "./useMySitemap.js";
+import { useNavigate } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-router-dom@6.30.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router-dom/dist/index.js";
+import { useContextSelector } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/use-context-selector@2.0.0_react@18.3.1_scheduler@0.23.2/node_modules/use-context-selector/dist/index.js";
+const useHitSelection = () => {
+  const navigate = useNavigate();
+  const { setItems } = useAppBreadcrumbs();
+  const { routes } = useMySitemap();
+  const response = useContextSelector(HitSearchContext, (ctx) => ctx.response);
+  const selectedHits = useContextSelector(HitContext, (ctx) => ctx.selectedHits);
+  const addHitToSelection = useContextSelector(HitContext, (ctx) => ctx.addHitToSelection);
+  const removeHitFromSelection = useContextSelector(HitContext, (ctx) => ctx.removeHitFromSelection);
+  const clearSelectedHits = useContextSelector(HitContext, (ctx) => ctx.clearSelectedHits);
+  const setSelected = useContextSelector(ParameterContext, (ctx) => ctx.setSelected);
+  const [lastSelected, setLastSelected] = useState(null);
+  const onClick = useCallback(
+    (e, hit) => {
+      var _a;
+      setLastSelected(hit.howler.id);
+      if (e.ctrlKey) {
+        document.getSelection().removeAllRanges();
+        if (selectedHits.some((_hit) => _hit.howler.id === hit.howler.id)) {
+          removeHitFromSelection(hit.howler.id);
+        } else {
+          addHitToSelection(hit.howler.id);
+        }
+        e.stopPropagation();
+        return;
+      }
+      if (e.shiftKey) {
+        document.getSelection().removeAllRanges();
+        if (selectedHits.length < 1) {
+          addHitToSelection(hit.howler.id);
+        } else if (lastSelected) {
+          const lastSelectedIndex = response == null ? void 0 : response.items.findIndex((_hit) => _hit.howler.id === lastSelected);
+          const currentIndex = response == null ? void 0 : response.items.findIndex((_hit) => _hit.howler.id === hit.howler.id);
+          const lowerBound = lastSelectedIndex < currentIndex ? lastSelectedIndex : currentIndex;
+          const upperBound = lastSelectedIndex > currentIndex ? lastSelectedIndex : currentIndex;
+          for (let i = lowerBound; i <= upperBound; i++) {
+            addHitToSelection((_a = response.items[i]) == null ? void 0 : _a.howler.id);
+          }
+        }
+        e.stopPropagation();
+        return;
+      }
+      if (hit.howler.is_bundle) {
+        const searchRoute = routes.find(
+          (_route) => _route.path.startsWith(location.pathname.replace(/^(\/.*)\/.+/, "$1"))
+        );
+        const newBreadcrumb = {
+          ...searchRoute,
+          path: location.pathname + location.search
+        };
+        setItems([{ route: newBreadcrumb, matcher: null }]);
+        navigate(`/bundles/${hit.howler.id}?span=date.range.all&query=howler.id%3A*&offset=0`);
+        clearSelectedHits(hit.howler.id);
+      } else {
+        clearSelectedHits(hit.howler.id);
+        setSelected(hit.howler.id);
+      }
+    },
+    [
+      addHitToSelection,
+      clearSelectedHits,
+      lastSelected,
+      navigate,
+      removeHitFromSelection,
+      response,
+      routes,
+      selectedHits,
+      setItems,
+      setSelected
+    ]
+  );
+  return { lastSelected, setLastSelected, onClick };
+};
+export {
+  useHitSelection as default
+};

package/components/hooks/useMyApi.d.ts

@@ -0,0 +1,10 @@
+type DispatchApiConfig = {
+    throwError?: boolean;
+    logError?: boolean;
+    showError?: boolean;
+    onConflict?: () => Promise<void>;
+};
+declare const useMyApi: () => {
+    dispatchApi: <R>(apiCall: Promise<R>, config?: DispatchApiConfig) => Promise<R>;
+};
+export default useMyApi;

package/components/hooks/useMyApi.js

@@ -0,0 +1,49 @@
+import useMySnackbar from "./useMySnackbar.js";
+import { useCallback, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const DEFAULT_CONFIG = {
+  throwError: true,
+  logError: false,
+  showError: true,
+  onConflict: null
+};
+const useMyApi = () => {
+  const { showErrorMessage } = useMySnackbar();
+  const dispatchApi = useCallback(
+    // eslint-disable-next-line comma-spacing
+    async (apiCall, config = DEFAULT_CONFIG) => {
+      var _a;
+      const { throwError, logError, showError, onConflict } = { ...DEFAULT_CONFIG, ...config };
+      try {
+        const response = await apiCall;
+        return response;
+      } catch (error) {
+        if (error instanceof Error) {
+          if (onConflict && [409, 412].includes((_a = error.cause) == null ? void 0 : _a.api_status_code)) {
+            onConflict();
+            return null;
+          }
+          if (showError) {
+            showErrorMessage(error.message);
+          }
+          if (logError) {
+            console.error(error);
+          }
+          if (throwError) {
+            throw error;
+          }
+        }
+        return null;
+      }
+    },
+    [showErrorMessage]
+  );
+  return useMemo(
+    () => ({
+      dispatchApi
+    }),
+    [dispatchApi]
+  );
+};
+export {
+  useMyApi as default
+};

package/components/hooks/useMyChart.d.ts

@@ -0,0 +1,275 @@
+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/components/hooks/useMyChart.js

@@ -0,0 +1,131 @@
+import { useTheme } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { Chart, ArcElement, CategoryScale, LinearScale, TimeScale, PointElement, LineElement, Title, SubTitle, Tooltip, Legend, BarElement, Filler } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/chart.js@4.5.0/node_modules/chart.js/dist/chart.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/chartjs-adapter-dayjs-4@1.0.4_chart.js@4.5.0_dayjs@1.11.13/node_modules/chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm.js";
+import zoomPlugin from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/chartjs-plugin-zoom@2.2.0_chart.js@4.5.0/node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js";
+import { useCallback } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+Chart.defaults.font.family = `'Roboto', 'Helvetica', 'Arial', sans-serif`;
+Chart.register(
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+  TimeScale,
+  PointElement,
+  LineElement,
+  Title,
+  SubTitle,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  BarElement,
+  Filler
+);
+Chart.register(zoomPlugin);
+const useMyChart = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  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 {
+  useMyChart as default
+};

package/components/hooks/useMyLocalStorage.d.ts

@@ -0,0 +1,17 @@
+import { LocalStorageContextType } from '@cccsaurora/howler-ui/components/app/providers/LocalStorageProvider';
+import { StorageKey } from '@cccsaurora/howler-ui/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/components/hooks/useMyLocalStorage.js

@@ -0,0 +1,19 @@
+import useLocalStorage from "../../commons/components/utils/hooks/useLocalStorage.js";
+import useLocalStorageItem from "../../commons/components/utils/hooks/useLocalStorageItem.js";
+import { LocalStorageContext } from "../app/providers/LocalStorageProvider.js";
+import { useContext } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { MY_LOCAL_STORAGE_PREFIX } from "../../utils/constants.js";
+const useMyLocalStorage = () => {
+  return useLocalStorage(MY_LOCAL_STORAGE_PREFIX);
+};
+const useMyLocalStorageItem = (key, initialValue) => {
+  return useLocalStorageItem(`${MY_LOCAL_STORAGE_PREFIX}.${key}`, initialValue);
+};
+const useMyLocalStorageProvider = () => {
+  return useContext(LocalStorageContext);
+};
+export {
+  useMyLocalStorage as default,
+  useMyLocalStorageItem,
+  useMyLocalStorageProvider
+};

package/components/hooks/useMyPreferences.d.ts

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