@douglasneuroinformatics/libui 4.5.1 → 4.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/{chunk-SGSRBDMT.js → chunk-L55W5USD.js} +43 -10
  2. package/dist/chunk-L55W5USD.js.map +1 -0
  3. package/dist/chunk-VH3IZISB.js +325 -0
  4. package/dist/chunk-VH3IZISB.js.map +1 -0
  5. package/dist/components.d.ts +7 -7
  6. package/dist/components.js +836 -1137
  7. package/dist/components.js.map +1 -1
  8. package/dist/hooks.d.ts +3 -1
  9. package/dist/hooks.js +3 -1
  10. package/dist/providers.d.ts +5 -0
  11. package/dist/providers.js +73 -0
  12. package/dist/providers.js.map +1 -0
  13. package/package.json +5 -1
  14. package/src/components/OneTimePasswordInput/OneTimePasswordInput.stories.tsx +4 -4
  15. package/src/components/index.ts +2 -1
  16. package/src/hooks/index.ts +1 -0
  17. package/src/hooks/useDestructiveAction/index.ts +1 -0
  18. package/src/hooks/useDestructiveAction/useDestructiveAction.ts +15 -0
  19. package/src/hooks/useDestructiveAction/useDestructiveActionStore.test.ts +79 -0
  20. package/src/hooks/useDestructiveAction/useDestructiveActionStore.ts +25 -0
  21. package/src/providers/CoreProvider/CoreProvider.stories.tsx +46 -0
  22. package/src/providers/CoreProvider/CoreProvider.tsx +12 -0
  23. package/src/providers/CoreProvider/DestructiveActionDialog.tsx +65 -0
  24. package/src/{components/NotificationHub → providers/CoreProvider}/NotificationHub.tsx +1 -1
  25. package/src/providers/CoreProvider/index.ts +1 -0
  26. package/src/providers/index.ts +1 -0
  27. package/dist/chunk-SGSRBDMT.js.map +0 -1
  28. package/src/components/NotificationHub/NotificationHub.stories.tsx +0 -40
  29. package/src/components/NotificationHub/index.ts +0 -1
  30. /package/src/{components/NotificationHub → providers/CoreProvider}/NotificationIcon.tsx +0 -0
package/dist/hooks.d.ts CHANGED
@@ -9,6 +9,8 @@ declare function useChart(): {
9
9
  config: ChartConfig;
10
10
  };
11
11
 
12
+ declare function useDestructiveAction<TArgs extends any[]>(destructiveAction: (...args: TArgs) => Promisable<void>): (...args: TArgs) => void;
13
+
12
14
  type DownloadTextOptions = {
13
15
  blobType: 'text/csv' | 'text/plain';
14
16
  };
@@ -81,4 +83,4 @@ type WindowSize = {
81
83
  };
82
84
  declare function useWindowSize(): WindowSize;
83
85
 
84
- export { type NotificationInterface, type NotificationsStore, UseStorageOptions, type WindowSize, useChart, useDownload, useEventCallback, useEventListener, useInterval, useIsomorphicLayoutEffect, useLocalStorage, useMediaQuery, useNotificationsStore, useOnClickOutside, useSessionStorage, useTranslation, useWindowSize };
86
+ export { type NotificationInterface, type NotificationsStore, UseStorageOptions, type WindowSize, useChart, useDestructiveAction, useDownload, useEventCallback, useEventListener, useInterval, useIsomorphicLayoutEffect, useLocalStorage, useMediaQuery, useNotificationsStore, useOnClickOutside, useSessionStorage, useTranslation, useWindowSize };
package/dist/hooks.js CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  THEME_ATTRIBUTE,
6
6
  THEME_KEY,
7
7
  useChart,
8
+ useDestructiveAction,
8
9
  useDownload,
9
10
  useEventCallback,
10
11
  useEventListener,
@@ -19,7 +20,7 @@ import {
19
20
  useTheme,
20
21
  useTranslation,
21
22
  useWindowSize
22
- } from "./chunk-SGSRBDMT.js";
23
+ } from "./chunk-L55W5USD.js";
23
24
  import "./chunk-GT5NL2RJ.js";
24
25
  import "./chunk-HCQE34RL.js";
25
26
  import "./chunk-5B62SIBQ.js";
@@ -29,6 +30,7 @@ export {
29
30
  THEME_ATTRIBUTE,
30
31
  THEME_KEY,
31
32
  useChart,
33
+ useDestructiveAction,
32
34
  useDownload,
33
35
  useEventCallback,
34
36
  useEventListener,
@@ -0,0 +1,5 @@
1
+ declare const CoreProvider: React.FC<{
2
+ children: React.ReactNode;
3
+ }>;
4
+
5
+ export { CoreProvider };
@@ -0,0 +1,73 @@
1
+ "use client"
2
+ import {
3
+ Button,
4
+ Dialog,
5
+ NotificationHub
6
+ } from "./chunk-VH3IZISB.js";
7
+ import {
8
+ useDestructiveActionStore,
9
+ useTranslation
10
+ } from "./chunk-L55W5USD.js";
11
+ import "./chunk-GT5NL2RJ.js";
12
+ import "./chunk-HCQE34RL.js";
13
+ import "./chunk-5B62SIBQ.js";
14
+
15
+ // src/providers/CoreProvider/DestructiveActionDialog.tsx
16
+ import { jsx, jsxs } from "react/jsx-runtime";
17
+ var DestructiveActionDialog = () => {
18
+ const deletePendingDestructiveAction = useDestructiveActionStore((store) => store.deletePendingDestructiveAction);
19
+ const pendingDestructiveActions = useDestructiveActionStore((store) => store.pendingDestructiveActions);
20
+ const { t } = useTranslation();
21
+ const currentAction = pendingDestructiveActions[0] ?? null;
22
+ const isOpen = currentAction !== null;
23
+ const handleConfirm = async () => {
24
+ if (!currentAction) {
25
+ return;
26
+ }
27
+ try {
28
+ await currentAction();
29
+ } finally {
30
+ deletePendingDestructiveAction(currentAction);
31
+ }
32
+ };
33
+ const handleCancel = () => {
34
+ if (currentAction) {
35
+ deletePendingDestructiveAction(currentAction);
36
+ }
37
+ };
38
+ const handleOpenChange = (isOpen2) => {
39
+ if (!isOpen2 && currentAction) {
40
+ deletePendingDestructiveAction(currentAction);
41
+ }
42
+ };
43
+ return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Content, { onOpenAutoFocus: (event) => event.preventDefault(), children: [
44
+ /* @__PURE__ */ jsxs(Dialog.Header, { children: [
45
+ /* @__PURE__ */ jsx(Dialog.Title, { children: t({
46
+ en: "Confirm Action",
47
+ fr: "Confirmer l'action"
48
+ }) }),
49
+ /* @__PURE__ */ jsx(Dialog.Description, { children: t({
50
+ en: "This action cannot be reversed. Please confirm that you would like to continue.",
51
+ fr: "Cette action ne peut \xEAtre invers\xE9e. Veuillez confirmer que vous souhaitez poursuivre."
52
+ }) })
53
+ ] }),
54
+ /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
55
+ /* @__PURE__ */ jsx(Button, { className: "min-w-16", type: "button", variant: "danger", onClick: () => void handleConfirm(), children: t("libui.yes") }),
56
+ /* @__PURE__ */ jsx(Button, { className: "min-w-16", type: "button", variant: "primary", onClick: handleCancel, children: t("libui.no") })
57
+ ] })
58
+ ] }) });
59
+ };
60
+
61
+ // src/providers/CoreProvider/CoreProvider.tsx
62
+ import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
63
+ var CoreProvider = ({ children }) => {
64
+ return /* @__PURE__ */ jsxs2(Fragment, { children: [
65
+ /* @__PURE__ */ jsx2(DestructiveActionDialog, {}),
66
+ /* @__PURE__ */ jsx2(NotificationHub, {}),
67
+ children
68
+ ] });
69
+ };
70
+ export {
71
+ CoreProvider
72
+ };
73
+ //# sourceMappingURL=providers.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/providers/CoreProvider/DestructiveActionDialog.tsx","../src/providers/CoreProvider/CoreProvider.tsx"],"sourcesContent":["import { Button } from '@/components/Button';\nimport { Dialog } from '@/components/Dialog';\nimport { useDestructiveActionStore } from '@/hooks/useDestructiveAction/useDestructiveActionStore';\nimport { useTranslation } from '@/hooks/useTranslation';\n\nexport const DestructiveActionDialog = () => {\n const deletePendingDestructiveAction = useDestructiveActionStore((store) => store.deletePendingDestructiveAction);\n const pendingDestructiveActions = useDestructiveActionStore((store) => store.pendingDestructiveActions);\n const { t } = useTranslation();\n\n const currentAction = pendingDestructiveActions[0] ?? null;\n const isOpen = currentAction !== null;\n\n const handleConfirm = async () => {\n if (!currentAction) {\n return;\n }\n try {\n await currentAction();\n } finally {\n deletePendingDestructiveAction(currentAction);\n }\n };\n\n const handleCancel = () => {\n if (currentAction) {\n deletePendingDestructiveAction(currentAction);\n }\n };\n\n const handleOpenChange = (isOpen: boolean) => {\n if (!isOpen && currentAction) {\n deletePendingDestructiveAction(currentAction);\n }\n };\n\n return (\n <Dialog open={isOpen} onOpenChange={handleOpenChange}>\n <Dialog.Content onOpenAutoFocus={(event) => event.preventDefault()}>\n <Dialog.Header>\n <Dialog.Title>\n {t({\n en: 'Confirm Action',\n fr: \"Confirmer l'action\"\n })}\n </Dialog.Title>\n <Dialog.Description>\n {t({\n en: 'This action cannot be reversed. Please confirm that you would like to continue.',\n fr: 'Cette action ne peut être inversée. Veuillez confirmer que vous souhaitez poursuivre.'\n })}\n </Dialog.Description>\n </Dialog.Header>\n <Dialog.Footer>\n <Button className=\"min-w-16\" type=\"button\" variant=\"danger\" onClick={() => void handleConfirm()}>\n {t('libui.yes')}\n </Button>\n <Button className=\"min-w-16\" type=\"button\" variant=\"primary\" onClick={handleCancel}>\n {t('libui.no')}\n </Button>\n </Dialog.Footer>\n </Dialog.Content>\n </Dialog>\n );\n};\n","import { DestructiveActionDialog } from './DestructiveActionDialog';\nimport { NotificationHub } from './NotificationHub';\n\nexport const CoreProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n return (\n <>\n <DestructiveActionDialog />\n <NotificationHub />\n {children}\n </>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAuCQ,SACE,KADF;AAlCD,IAAM,0BAA0B,MAAM;AAC3C,QAAM,iCAAiC,0BAA0B,CAAC,UAAU,MAAM,8BAA8B;AAChH,QAAM,4BAA4B,0BAA0B,CAAC,UAAU,MAAM,yBAAyB;AACtG,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,QAAM,gBAAgB,0BAA0B,CAAC,KAAK;AACtD,QAAM,SAAS,kBAAkB;AAEjC,QAAM,gBAAgB,YAAY;AAChC,QAAI,CAAC,eAAe;AAClB;AAAA,IACF;AACA,QAAI;AACF,YAAM,cAAc;AAAA,IACtB,UAAE;AACA,qCAA+B,aAAa;AAAA,IAC9C;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,eAAe;AACjB,qCAA+B,aAAa;AAAA,IAC9C;AAAA,EACF;AAEA,QAAM,mBAAmB,CAACA,YAAoB;AAC5C,QAAI,CAACA,WAAU,eAAe;AAC5B,qCAA+B,aAAa;AAAA,IAC9C;AAAA,EACF;AAEA,SACE,oBAAC,UAAO,MAAM,QAAQ,cAAc,kBAClC,+BAAC,OAAO,SAAP,EAAe,iBAAiB,CAAC,UAAU,MAAM,eAAe,GAC/D;AAAA,yBAAC,OAAO,QAAP,EACC;AAAA,0BAAC,OAAO,OAAP,EACE,YAAE;AAAA,QACD,IAAI;AAAA,QACJ,IAAI;AAAA,MACN,CAAC,GACH;AAAA,MACA,oBAAC,OAAO,aAAP,EACE,YAAE;AAAA,QACD,IAAI;AAAA,QACJ,IAAI;AAAA,MACN,CAAC,GACH;AAAA,OACF;AAAA,IACA,qBAAC,OAAO,QAAP,EACC;AAAA,0BAAC,UAAO,WAAU,YAAW,MAAK,UAAS,SAAQ,UAAS,SAAS,MAAM,KAAK,cAAc,GAC3F,YAAE,WAAW,GAChB;AAAA,MACA,oBAAC,UAAO,WAAU,YAAW,MAAK,UAAS,SAAQ,WAAU,SAAS,cACnE,YAAE,UAAU,GACf;AAAA,OACF;AAAA,KACF,GACF;AAEJ;;;AC3DI,mBACE,OAAAC,MADF,QAAAC,aAAA;AAFG,IAAM,eAAwD,CAAC,EAAE,SAAS,MAAM;AACrF,SACE,gBAAAA,MAAA,YACE;AAAA,oBAAAD,KAAC,2BAAwB;AAAA,IACzB,gBAAAA,KAAC,mBAAgB;AAAA,IAChB;AAAA,KACH;AAEJ;","names":["isOpen","jsx","jsxs"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@douglasneuroinformatics/libui",
3
3
  "type": "module",
4
- "version": "4.5.1",
4
+ "version": "4.6.1",
5
5
  "packageManager": "pnpm@10.7.1",
6
6
  "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
7
7
  "author": "Joshua Unrau",
@@ -31,6 +31,10 @@
31
31
  "types": "./dist/i18n.d.ts",
32
32
  "import": "./dist/i18n.js"
33
33
  },
34
+ "./providers": {
35
+ "types": "./dist/providers.d.ts",
36
+ "import": "./dist/providers.js"
37
+ },
34
38
  "./package.json": "./package.json",
35
39
  "./tailwind/globals.css": "./dist/tailwind/globals.css",
36
40
  "./utils": {
@@ -1,6 +1,7 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react-vite';
2
2
 
3
- import { NotificationHub } from '../NotificationHub';
3
+ import { CoreProvider } from '@/providers/CoreProvider';
4
+
4
5
  import { OneTimePasswordInput } from './OneTimePasswordInput';
5
6
 
6
7
  type Story = StoryObj<typeof OneTimePasswordInput>;
@@ -15,10 +16,9 @@ export default {
15
16
  decorators: [
16
17
  (Story) => {
17
18
  return (
18
- <>
19
- <NotificationHub />
19
+ <CoreProvider>
20
20
  <Story />
21
- </>
21
+ </CoreProvider>
22
22
  );
23
23
  }
24
24
  ]
@@ -32,7 +32,6 @@ export * from './LanguageToggle';
32
32
  export * from './LineGraph';
33
33
  export * from './ListboxDropdown';
34
34
  export * from './MenuBar';
35
- export * from './NotificationHub';
36
35
  export * from './OneTimePasswordInput';
37
36
  export * from './Popover';
38
37
  export * from './Progress';
@@ -53,3 +52,5 @@ export * from './Tabs';
53
52
  export * from './TextArea';
54
53
  export * from './ThemeToggle';
55
54
  export * from './Tooltip';
55
+
56
+ export { /** @deprecated */ NotificationHub } from '@/providers/CoreProvider/NotificationHub';
@@ -1,4 +1,5 @@
1
1
  export * from './useChart';
2
+ export * from './useDestructiveAction';
2
3
  export * from './useDownload';
3
4
  export * from './useEventCallback';
4
5
  export * from './useEventListener';
@@ -0,0 +1 @@
1
+ export * from './useDestructiveAction';
@@ -0,0 +1,15 @@
1
+ import { useCallback } from 'react';
2
+
3
+ import type { Promisable } from 'type-fest';
4
+
5
+ import { useDestructiveActionStore } from './useDestructiveActionStore';
6
+
7
+ export function useDestructiveAction<TArgs extends any[]>(destructiveAction: (...args: TArgs) => Promisable<void>) {
8
+ const addPendingDestructiveAction = useDestructiveActionStore((store) => store.addPendingDestructiveAction);
9
+ return useCallback(
10
+ (...args: TArgs) => {
11
+ addPendingDestructiveAction(() => destructiveAction(...args));
12
+ },
13
+ [destructiveAction, addPendingDestructiveAction]
14
+ );
15
+ }
@@ -0,0 +1,79 @@
1
+ import { act, renderHook } from '@testing-library/react';
2
+ import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
3
+ import * as zustand from 'zustand';
4
+
5
+ import { useDestructiveActionStore } from './useDestructiveActionStore';
6
+
7
+ import type { DestructiveAction } from './useDestructiveActionStore';
8
+
9
+ describe('useDestructiveActionStore', () => {
10
+ beforeAll(() => {
11
+ vi.spyOn(zustand, 'create');
12
+ });
13
+
14
+ afterEach(() => {
15
+ vi.clearAllMocks();
16
+ });
17
+
18
+ it('should render and return an object', () => {
19
+ const { result } = renderHook(() => useDestructiveActionStore());
20
+ expect(result.current).toBeTypeOf('object');
21
+ });
22
+
23
+ it('should have initial empty pendingDestructiveActions array', () => {
24
+ const { result } = renderHook(() => useDestructiveActionStore());
25
+ expect(result.current.pendingDestructiveActions).toEqual([]);
26
+ });
27
+
28
+ describe('addPendingDestructiveAction', () => {
29
+ it('should add a single action to the array', () => {
30
+ const { result } = renderHook(() => useDestructiveActionStore());
31
+ const testAction: DestructiveAction = vi.fn();
32
+ act(() => {
33
+ result.current.addPendingDestructiveAction(testAction);
34
+ });
35
+ expect(result.current.pendingDestructiveActions).toEqual([testAction]);
36
+ });
37
+
38
+ it('should add multiple actions to the array', () => {
39
+ const { result } = renderHook(() => useDestructiveActionStore());
40
+ const testAction1: DestructiveAction = vi.fn();
41
+ const testAction2: DestructiveAction = vi.fn();
42
+ act(() => {
43
+ result.current.addPendingDestructiveAction(testAction1);
44
+ result.current.addPendingDestructiveAction(testAction2);
45
+ });
46
+ expect(result.current.pendingDestructiveActions).toEqual([testAction1, testAction2]);
47
+ });
48
+ });
49
+
50
+ describe('deletePendingDestructiveAction', () => {
51
+ it('should remove a specific action from the array', () => {
52
+ const { result } = renderHook(() => useDestructiveActionStore());
53
+ const testAction1: DestructiveAction = vi.fn();
54
+ const testAction2: DestructiveAction = vi.fn();
55
+ const testAction3: DestructiveAction = vi.fn();
56
+
57
+ act(() => {
58
+ result.current.addPendingDestructiveAction(testAction1);
59
+ result.current.addPendingDestructiveAction(testAction2);
60
+ result.current.addPendingDestructiveAction(testAction3);
61
+ });
62
+
63
+ act(() => {
64
+ result.current.deletePendingDestructiveAction(testAction2);
65
+ });
66
+
67
+ expect(result.current.pendingDestructiveActions).toEqual([testAction1, testAction3]);
68
+ });
69
+
70
+ it('should handle removing from empty array', () => {
71
+ const { result } = renderHook(() => useDestructiveActionStore());
72
+ const testAction: DestructiveAction = vi.fn();
73
+ act(() => {
74
+ result.current.deletePendingDestructiveAction(testAction);
75
+ });
76
+ expect(result.current.pendingDestructiveActions).toEqual([]);
77
+ });
78
+ });
79
+ });
@@ -0,0 +1,25 @@
1
+ import type { Promisable } from 'type-fest';
2
+ import { create } from 'zustand';
3
+
4
+ export type DestructiveAction = () => Promisable<void>;
5
+
6
+ export type DestructiveActionStore = {
7
+ addPendingDestructiveAction: (action: DestructiveAction) => void;
8
+ deletePendingDestructiveAction: (action: DestructiveAction) => void;
9
+ pendingDestructiveActions: DestructiveAction[];
10
+ };
11
+
12
+ export const useDestructiveActionStore = create<DestructiveActionStore>((set) => ({
13
+ addPendingDestructiveAction: (action) => {
14
+ set((state) => ({
15
+ pendingDestructiveActions: [...state.pendingDestructiveActions, action]
16
+ }));
17
+ },
18
+ deletePendingDestructiveAction: (action) => {
19
+ set((state) => ({
20
+ ...state,
21
+ pendingDestructiveActions: state.pendingDestructiveActions.filter((_action) => _action !== action)
22
+ }));
23
+ },
24
+ pendingDestructiveActions: []
25
+ }));
@@ -0,0 +1,46 @@
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
+
3
+ import { Button } from '@/components/Button';
4
+ import { useDestructiveAction } from '@/hooks/useDestructiveAction';
5
+ import { useNotificationsStore } from '@/hooks/useNotificationsStore';
6
+
7
+ import { CoreProvider } from './CoreProvider';
8
+
9
+ type Story = StoryObj<typeof CoreProvider>;
10
+
11
+ const Children = () => {
12
+ const addNotification = useNotificationsStore((store) => store.addNotification);
13
+ const destructiveAction = useDestructiveAction((event: React.MouseEvent<HTMLButtonElement>) => {
14
+ alert(`Delete at Event Time: ${event.timeStamp}`);
15
+ });
16
+ return (
17
+ <div>
18
+ <Button
19
+ type="button"
20
+ onClick={() => {
21
+ addNotification({
22
+ message: 'Hello World',
23
+ type: 'info'
24
+ });
25
+ }}
26
+ >
27
+ Add Notification
28
+ </Button>
29
+
30
+ <Button type="button" variant="danger" onClick={destructiveAction}>
31
+ Add Action
32
+ </Button>
33
+ </div>
34
+ );
35
+ };
36
+
37
+ const meta: Meta<typeof CoreProvider> = {
38
+ args: {
39
+ children: <Children />
40
+ },
41
+ component: CoreProvider
42
+ };
43
+
44
+ export default meta;
45
+
46
+ export const Default: Story = {};
@@ -0,0 +1,12 @@
1
+ import { DestructiveActionDialog } from './DestructiveActionDialog';
2
+ import { NotificationHub } from './NotificationHub';
3
+
4
+ export const CoreProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
5
+ return (
6
+ <>
7
+ <DestructiveActionDialog />
8
+ <NotificationHub />
9
+ {children}
10
+ </>
11
+ );
12
+ };
@@ -0,0 +1,65 @@
1
+ import { Button } from '@/components/Button';
2
+ import { Dialog } from '@/components/Dialog';
3
+ import { useDestructiveActionStore } from '@/hooks/useDestructiveAction/useDestructiveActionStore';
4
+ import { useTranslation } from '@/hooks/useTranslation';
5
+
6
+ export const DestructiveActionDialog = () => {
7
+ const deletePendingDestructiveAction = useDestructiveActionStore((store) => store.deletePendingDestructiveAction);
8
+ const pendingDestructiveActions = useDestructiveActionStore((store) => store.pendingDestructiveActions);
9
+ const { t } = useTranslation();
10
+
11
+ const currentAction = pendingDestructiveActions[0] ?? null;
12
+ const isOpen = currentAction !== null;
13
+
14
+ const handleConfirm = async () => {
15
+ if (!currentAction) {
16
+ return;
17
+ }
18
+ try {
19
+ await currentAction();
20
+ } finally {
21
+ deletePendingDestructiveAction(currentAction);
22
+ }
23
+ };
24
+
25
+ const handleCancel = () => {
26
+ if (currentAction) {
27
+ deletePendingDestructiveAction(currentAction);
28
+ }
29
+ };
30
+
31
+ const handleOpenChange = (isOpen: boolean) => {
32
+ if (!isOpen && currentAction) {
33
+ deletePendingDestructiveAction(currentAction);
34
+ }
35
+ };
36
+
37
+ return (
38
+ <Dialog open={isOpen} onOpenChange={handleOpenChange}>
39
+ <Dialog.Content onOpenAutoFocus={(event) => event.preventDefault()}>
40
+ <Dialog.Header>
41
+ <Dialog.Title>
42
+ {t({
43
+ en: 'Confirm Action',
44
+ fr: "Confirmer l'action"
45
+ })}
46
+ </Dialog.Title>
47
+ <Dialog.Description>
48
+ {t({
49
+ en: 'This action cannot be reversed. Please confirm that you would like to continue.',
50
+ fr: 'Cette action ne peut être inversée. Veuillez confirmer que vous souhaitez poursuivre.'
51
+ })}
52
+ </Dialog.Description>
53
+ </Dialog.Header>
54
+ <Dialog.Footer>
55
+ <Button className="min-w-16" type="button" variant="danger" onClick={() => void handleConfirm()}>
56
+ {t('libui.yes')}
57
+ </Button>
58
+ <Button className="min-w-16" type="button" variant="primary" onClick={handleCancel}>
59
+ {t('libui.no')}
60
+ </Button>
61
+ </Dialog.Footer>
62
+ </Dialog.Content>
63
+ </Dialog>
64
+ );
65
+ };
@@ -1,10 +1,10 @@
1
1
  import { XIcon } from 'lucide-react';
2
2
  import { AnimatePresence, motion } from 'motion/react';
3
3
 
4
+ import { Card } from '@/components/Card';
4
5
  import { useTranslation } from '@/hooks';
5
6
  import { useNotificationsStore } from '@/hooks/useNotificationsStore';
6
7
 
7
- import { Card } from '../Card';
8
8
  import { NotificationIcon } from './NotificationIcon';
9
9
 
10
10
  type NotificationHubProps = {
@@ -0,0 +1 @@
1
+ export * from './CoreProvider';
@@ -0,0 +1 @@
1
+ export * from './CoreProvider';
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/hooks/useChart/useChart.ts","../src/context/ChartContext.tsx","../src/hooks/useDownload/useDownload.ts","../src/hooks/useNotificationsStore/useNotificationsStore.ts","../src/hooks/useEventCallback/useEventCallback.ts","../src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts","../src/hooks/useEventListener/useEventListener.ts","../src/hooks/useInterval/useInterval.ts","../src/hooks/useMediaQuery/useMediaQuery.ts","../src/hooks/useOnClickOutside/useOnClickOutside.ts","../src/hooks/useStorage/useStorage.ts","../src/hooks/useStorage/useLocalStorage.ts","../src/hooks/useStorage/useSessionStorage.ts","../src/hooks/useTheme/useTheme.ts","../src/hooks/useTranslation/useTranslation.ts","../src/hooks/useWindowSize/useWindowSize.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport { ChartContext } from '@/context/ChartContext';\n\nexport function useChart() {\n const context = useContext(ChartContext);\n if (!context) {\n throw new Error('useChart must be used within a <ChartContainer />');\n }\n return context;\n}\n","import { createContext } from 'react';\n\nimport type { ChartConfig } from '@/components';\n\ntype ChartContextProps = {\n config: ChartConfig;\n};\n\nexport const ChartContext = createContext<ChartContextProps | null>(null);\n","import { useEffect, useState } from 'react';\n\nimport type { Promisable } from 'type-fest';\n\nimport { useNotificationsStore } from '../useNotificationsStore';\n\ntype DownloadTextOptions = {\n blobType: 'text/csv' | 'text/plain';\n};\n\ntype DownloadBlobOptions = {\n blobType: 'application/zip' | 'image/jpeg' | 'image/png' | 'image/webp';\n};\n\n// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\ninterface DownloadFunction {\n (filename: string, data: Blob, options: DownloadBlobOptions): Promise<void>;\n (filename: string, data: () => Promisable<Blob>, options: DownloadBlobOptions): Promise<void>;\n (filename: string, data: string, options?: DownloadTextOptions): Promise<void>;\n (filename: string, data: () => Promisable<string>, options?: DownloadTextOptions): Promise<void>;\n}\n\ntype Downloadable = {\n blobType: string;\n data: Blob | string;\n filename: string;\n id: string;\n};\n\n/**\n * Used to trigger downloads of arbitrary data to the client\n * @returns A function to invoke the download\n */\nexport function useDownload(): DownloadFunction {\n const notifications = useNotificationsStore();\n const [downloads, setDownloads] = useState<Downloadable[]>([]);\n\n useEffect(() => {\n if (downloads.length) {\n const { blobType, data, filename, id } = downloads.at(-1)!;\n const anchor = document.createElement('a');\n document.body.appendChild(anchor);\n const blob = new Blob([data], { type: blobType });\n const url = URL.createObjectURL(blob);\n anchor.href = url;\n anchor.download = filename;\n anchor.click();\n URL.revokeObjectURL(url);\n anchor.remove();\n setDownloads((prevDownloads) => prevDownloads.filter((item) => item.id !== id));\n }\n }, [downloads]);\n\n return async (filename, _data, options) => {\n try {\n const data = typeof _data === 'function' ? await _data() : _data;\n if (typeof data !== 'string' && !options?.blobType) {\n throw new Error(\"argument 'blobType' must be defined when download is called with a Blob object\");\n }\n setDownloads((prevDownloads) => [\n ...prevDownloads,\n { blobType: options?.blobType ?? 'text/plain', data, filename, id: crypto.randomUUID() }\n ]);\n } catch (error) {\n const message = error instanceof Error ? error.message : 'An unknown error occurred';\n notifications.addNotification({\n message,\n title: 'Error',\n type: 'error'\n });\n }\n };\n}\n","import { create } from 'zustand';\n\nexport type NotificationInterface = {\n id: number;\n message?: string;\n title?: string;\n type: 'error' | 'info' | 'success' | 'warning';\n variant?: 'critical' | 'standard';\n};\n\nexport type NotificationsStore = {\n addNotification: (notification: Omit<NotificationInterface, 'id'>) => void;\n dismissNotification: (id: number) => void;\n notifications: NotificationInterface[];\n};\n\nexport const useNotificationsStore = create<NotificationsStore>((set) => ({\n addNotification: (notification) => {\n set((state) => ({\n notifications: [...state.notifications, { id: Date.now(), ...notification }]\n }));\n },\n dismissNotification: (id) => {\n set((state) => ({\n notifications: state.notifications.filter((notification) => notification.id !== id)\n }));\n },\n notifications: []\n}));\n","import { useCallback, useRef } from 'react';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';\n\nexport function useEventCallback<Args extends unknown[], R>(fn: (...args: Args) => R) {\n const ref = useRef<typeof fn>(() => {\n throw new Error('Cannot call an event handler while rendering.');\n });\n\n useIsomorphicLayoutEffect(() => {\n ref.current = fn;\n }, [fn]);\n\n return useCallback((...args: Args) => ref.current(...args), [ref]);\n}\n","import { useEffect, useLayoutEffect } from 'react';\n\nimport { isBrowser } from '@/utils';\n\nexport const useIsomorphicLayoutEffect = isBrowser() ? useLayoutEffect : useEffect;\n","import { useEffect, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';\n\n// MediaQueryList Event based useEventListener interface\nfunction useEventListener<K extends keyof MediaQueryListEventMap>(\n eventName: K,\n handler: (event: MediaQueryListEventMap[K]) => void,\n element: RefObject<MediaQueryList>,\n options?: AddEventListenerOptions | boolean\n): void;\n\n// Window Event based useEventListener interface\nfunction useEventListener<K extends keyof WindowEventMap>(\n eventName: K,\n handler: (event: WindowEventMap[K]) => void,\n element?: undefined,\n options?: AddEventListenerOptions | boolean\n): void;\n\n// Element Event based useEventListener interface\nfunction useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(\n eventName: K,\n handler: (event: HTMLElementEventMap[K]) => void,\n element: RefObject<T>,\n options?: AddEventListenerOptions | boolean\n): void;\n\n// Document Event based useEventListener interface\nfunction useEventListener<K extends keyof DocumentEventMap>(\n eventName: K,\n handler: (event: DocumentEventMap[K]) => void,\n element: RefObject<Document>,\n options?: AddEventListenerOptions | boolean\n): void;\n\nfunction useEventListener<\n KW extends keyof WindowEventMap,\n KH extends keyof HTMLElementEventMap,\n KM extends keyof MediaQueryListEventMap,\n T extends HTMLElement | MediaQueryList | void = void\n>(\n eventName: KH | KM | KW,\n handler: (event: Event | HTMLElementEventMap[KH] | MediaQueryListEventMap[KM] | WindowEventMap[KW]) => void,\n element?: RefObject<T>,\n options?: AddEventListenerOptions | boolean\n) {\n // Create a ref that stores handler\n const savedHandler = useRef(handler);\n\n useIsomorphicLayoutEffect(() => {\n savedHandler.current = handler;\n }, [handler]);\n\n useEffect(() => {\n // Define the listening target\n const targetElement: T | Window = element?.current ?? window;\n\n if (!(targetElement && targetElement.addEventListener)) return;\n\n // Create event listener that calls handler function stored in ref\n const listener: typeof handler = (event) => savedHandler.current(event);\n\n targetElement.addEventListener(eventName, listener, options);\n\n // Remove event listener on cleanup\n return () => {\n targetElement.removeEventListener(eventName, listener, options);\n };\n }, [eventName, element, options]);\n}\n\nexport { useEventListener };\n","import { useEffect, useRef } from 'react';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';\n\nexport function useInterval(callback: () => void, delay: null | number) {\n const savedCallback = useRef(callback);\n\n // Remember the latest callback if it changes.\n useIsomorphicLayoutEffect(() => {\n savedCallback.current = callback;\n }, [callback]);\n\n // Set up the interval.\n useEffect(() => {\n // Don't schedule if no delay is specified.\n // Note: 0 is a valid value for delay.\n if (!delay && delay !== 0) {\n return;\n }\n\n const id = setInterval(() => savedCallback.current(), delay);\n\n return () => clearInterval(id);\n }, [delay]);\n}\n","import { useEffect, useState } from 'react';\n\nimport { isBrowser } from '@/utils';\n\n/**\n * Get the result of an arbitrary CSS media query\n *\n * @param query - the CSS media query\n * @returns a boolean indicating the result of the query\n * @example\n * // true if the viewport is at least 768px wide\n * const matches = useMediaQuery('(min-width: 768px)')\n */\nexport function useMediaQuery(query: string): boolean {\n const getMatches = (query: string): boolean => {\n // Prevents SSR issues\n if (isBrowser()) {\n return window.matchMedia(query).matches;\n }\n return false;\n };\n\n const [matches, setMatches] = useState<boolean>(getMatches(query));\n\n function handleChange() {\n setMatches(getMatches(query));\n }\n\n useEffect(() => {\n const matchMedia = window.matchMedia(query);\n\n // Triggered at the first client-side load and if query changes\n handleChange();\n\n matchMedia.addEventListener('change', handleChange);\n\n return () => {\n matchMedia.removeEventListener('change', handleChange);\n };\n }, [query]);\n\n return matches;\n}\n","import type { RefObject } from 'react';\n\nimport { useEventListener } from '../useEventListener';\n\ntype Handler = (event: MouseEvent) => void;\n\nexport function useOnClickOutside<T extends HTMLElement | null = HTMLElement>(\n ref: RefObject<T>,\n handler: Handler,\n mouseEvent: 'mousedown' | 'mouseup' = 'mousedown'\n): void {\n useEventListener(mouseEvent, (event) => {\n const el = ref.current;\n\n // Do nothing if clicking ref's element or descendent elements\n if (!el || el.contains(event.target as Node)) {\n return;\n }\n\n handler(event);\n });\n}\n","import { useCallback, useEffect, useState } from 'react';\nimport type { Dispatch, SetStateAction } from 'react';\n\nimport { isBrowser } from '@/utils';\n\nimport { useEventCallback } from '../useEventCallback';\nimport { useEventListener } from '../useEventListener';\n\ntype StorageName = 'localStorage' | 'sessionStorage';\n\ntype StorageEventMap = {\n [K in StorageName]: CustomEvent;\n};\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-empty-object-type\n interface WindowEventMap extends StorageEventMap {}\n}\n\n/**\n * Represents the options for customizing the behavior of serialization and deserialization.\n * @template T - The type of the state to be stored in storage.\n */\ntype UseStorageOptions<T> = {\n /** A function to deserialize the stored value. */\n deserializer?: (value: string) => T;\n /**\n * If `true` (default), the hook will initialize reading the storage. In SSR, you should set it to `false`, returning the initial value initially.\n * @default true\n */\n initializeWithValue?: boolean;\n /** A function to serialize the value before storing it. */\n serializer?: (value: T) => string;\n};\n\n/**\n * Custom hook that uses local or session storage to persist state across page reloads.\n * @template T - The type of the state to be stored in storage.\n * @param key - The key under which the value will be stored in storage.\n * @param initialValue - The initial value of the state or a function that returns the initial value.\n * @param options - Options for customizing the behavior of serialization and deserialization (optional).\n * @returns A tuple containing the stored value and a function to set the value.\n * @public\n * @example\n * ```tsx\n * const [count, setCount] = useStorage('count', 0);\n * // Access the `count` value and the `setCount` function to update it.\n * ```\n */\nexport function useStorage<T>(\n key: string,\n initialValue: (() => T) | T,\n storageName: StorageName,\n options: UseStorageOptions<T> = {}\n): [T, Dispatch<SetStateAction<T>>] {\n const { initializeWithValue = true } = options;\n const storage = window[storageName];\n\n const serializer = useCallback<(value: T) => string>(\n (value) => {\n if (options.serializer) {\n return options.serializer(value);\n }\n return JSON.stringify(value);\n },\n [options]\n );\n\n const deserializer = useCallback<(value: string) => T>(\n (value) => {\n if (options.deserializer) {\n return options.deserializer(value);\n } else if (value === 'undefined') {\n return undefined as unknown as T;\n }\n const defaultValue = initialValue instanceof Function ? initialValue() : initialValue;\n let parsed: unknown;\n try {\n parsed = JSON.parse(value);\n } catch (err) {\n console.error(`Error parsing JSON: ${(err as Error).message}`);\n return defaultValue;\n }\n return parsed as T;\n },\n [options, initialValue]\n );\n\n const readValue = useCallback((): T => {\n const initialValueToUse = initialValue instanceof Function ? initialValue() : initialValue;\n if (!isBrowser()) {\n return initialValueToUse;\n }\n const raw = storage.getItem(key);\n return raw ? deserializer(raw) : initialValueToUse;\n }, [initialValue, key, deserializer]);\n\n const [storedValue, setStoredValue] = useState(() => {\n if (initializeWithValue) {\n return readValue();\n }\n return initialValue instanceof Function ? initialValue() : initialValue;\n });\n\n const setValue: Dispatch<SetStateAction<T>> = useEventCallback((value) => {\n if (!isBrowser()) {\n console.warn(`Tried setting storage key “${key}” even though environment is not a client`);\n }\n try {\n const newValue = value instanceof Function ? value(readValue()) : value;\n storage.setItem(key, serializer(newValue));\n setStoredValue(newValue);\n window.dispatchEvent(new StorageEvent(storageName, { key }));\n } catch (error) {\n console.warn(`Error setting storage key “${key}”:`, error);\n }\n });\n\n useEffect(() => {\n setStoredValue(readValue());\n }, [key]);\n\n const handleStorageChange = useCallback(\n (event: CustomEvent | StorageEvent) => {\n if ((event as StorageEvent).key && (event as StorageEvent).key !== key) {\n return;\n }\n setStoredValue(readValue());\n },\n [key, readValue]\n );\n\n // this only works for other documents, not the current one\n useEventListener('storage', handleStorageChange);\n\n useEventListener(storageName, handleStorageChange);\n\n return [storedValue, setValue];\n}\n\nexport type { StorageName, UseStorageOptions };\n","import type { Dispatch, SetStateAction } from 'react';\n\nimport { useStorage } from './useStorage';\n\nimport type { UseStorageOptions } from './useStorage';\n\n/** Custom hook that uses local storage to persist state across page reloads */\nexport function useLocalStorage<T>(\n key: string,\n initialValue: (() => T) | T,\n options: UseStorageOptions<T> = {}\n): [T, Dispatch<SetStateAction<T>>] {\n return useStorage(key, initialValue, 'localStorage', options);\n}\n","import type { Dispatch, SetStateAction } from 'react';\n\nimport { useStorage } from './useStorage';\n\nimport type { UseStorageOptions } from './useStorage';\n\n/** Custom hook that uses session storage to persist state across page reloads */\nexport function useSessionStorage<T>(\n key: string,\n initialValue: (() => T) | T,\n options: UseStorageOptions<T> = {}\n): [T, Dispatch<SetStateAction<T>>] {\n return useStorage(key, initialValue, 'sessionStorage', options);\n}\n","import { useEffect, useState } from 'react';\n\n// this is required since our storybook manager plugin cannot use vite aliases\nimport { isBrowser } from '../../utils';\n\ntype Theme = 'dark' | 'light';\n\ntype UpdateTheme = (theme: Theme) => void;\n\n/** @private */\nconst DEFAULT_THEME: Theme = 'light';\n\n/** @private */\nconst THEME_ATTRIBUTE = 'data-mode';\n\n/** @private */\nconst THEME_KEY = 'theme';\n\n/** @private */\nconst SYS_DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';\n\n/**\n * Returns the current theme and a function to update the current theme\n *\n * The reason the implementation of this hook is rather convoluted is for\n * cases where the theme is updated outside this hook\n */\nfunction useTheme(): readonly [Theme, UpdateTheme] {\n // Initial theme value is based on the value saved in local storage or the system theme\n const [theme, setTheme] = useState<Theme>(() => {\n if (!isBrowser()) {\n return DEFAULT_THEME;\n }\n const savedTheme = window.localStorage.getItem(THEME_KEY);\n let initialTheme: Theme;\n if (savedTheme === 'dark' || savedTheme === 'light') {\n initialTheme = savedTheme;\n } else {\n initialTheme = window.matchMedia(SYS_DARK_MEDIA_QUERY).matches ? 'dark' : 'light';\n }\n document.documentElement.setAttribute(THEME_ATTRIBUTE, initialTheme);\n return initialTheme;\n });\n\n useEffect(() => {\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.attributeName === THEME_ATTRIBUTE) {\n const updatedTheme = (mutation.target as HTMLHtmlElement).getAttribute(THEME_ATTRIBUTE);\n if (updatedTheme === 'light' || updatedTheme === 'dark') {\n window.localStorage.setItem(THEME_KEY, updatedTheme);\n setTheme(updatedTheme);\n } else {\n console.error(`Unexpected value for 'data-mode' attribute: ${updatedTheme}`);\n }\n }\n });\n });\n observer.observe(document.documentElement, {\n attributes: true\n });\n return () => observer.disconnect();\n }, []);\n\n // When the user wants to change the theme\n const updateTheme = (theme: Theme) => {\n document.documentElement.setAttribute(THEME_ATTRIBUTE, theme);\n };\n\n return [theme, updateTheme] as const;\n}\n\nexport { DEFAULT_THEME, SYS_DARK_MEDIA_QUERY, type Theme, THEME_ATTRIBUTE, THEME_KEY, useTheme };\n","import { useEffect, useMemo, useState } from 'react';\n\nimport type {\n TranslateFunction,\n TranslationKey,\n TranslationKeyForNamespace,\n TranslationNamespace,\n TranslatorType\n} from '@/i18n';\n\n// this is required since our storybook manager plugin cannot use vite aliases\nimport { i18n } from '../../i18n';\n\nexport function useTranslation(): TranslatorType<TranslationKey>;\nexport function useTranslation<TNamespace extends TranslationNamespace>(\n namespace: TNamespace\n): TranslatorType<TranslationKeyForNamespace<TNamespace>>;\nexport function useTranslation(namespace?: TranslationNamespace): TranslatorType<string> {\n const [resolvedLanguage, setResolvedLanguage] = useState(i18n.resolvedLanguage);\n const { changeLanguage, t } = useMemo(() => {\n const t: TranslateFunction<string> = (target, options) => {\n if (typeof target === 'object') {\n return i18n.t(target, options);\n }\n return i18n.t((namespace ? `${namespace}.${target}` : target) as TranslationKey, options);\n };\n return {\n changeLanguage: i18n.changeLanguage.bind(i18n),\n t\n };\n }, []);\n\n useEffect(() => {\n i18n.addEventListener('languageChange', setResolvedLanguage);\n return () => {\n i18n.removeEventListener('languageChange', setResolvedLanguage);\n };\n }, []);\n\n return {\n changeLanguage,\n resolvedLanguage,\n t\n };\n}\n","import { useState } from 'react';\n\nimport { useEventListener } from '../useEventListener';\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';\n\nexport type WindowSize = {\n height: number;\n width: number;\n};\n\nexport function useWindowSize(): WindowSize {\n const [windowSize, setWindowSize] = useState<WindowSize>({\n height: 0,\n width: 0\n });\n\n const handleSize = () => {\n setWindowSize({\n height: window.innerHeight,\n width: window.innerWidth\n });\n };\n\n useEventListener('resize', handleSize);\n\n // Set size at the first client-side load\n useIsomorphicLayoutEffect(() => {\n handleSize();\n }, []);\n\n return windowSize;\n}\n"],"mappings":"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","names":["useEffect","useEffect","useEffect","useRef","useRef","useEffect","useEffect","useRef","useRef","useEffect","useEffect","useState","query","useState","useEffect","useCallback","useEffect","useState","useCallback","useState","useEffect","useEffect","useState","useState","useEffect","theme","useEffect","useState","useState","t","useEffect","useState","useState"]}
@@ -1,40 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
2
-
3
- import { useNotificationsStore } from '@/hooks/useNotificationsStore';
4
-
5
- import { Button } from '../Button';
6
- import { NotificationHub } from './NotificationHub';
7
-
8
- type Story = StoryObj<typeof NotificationHub>;
9
-
10
- const meta: Meta<typeof NotificationHub> = {
11
- component: NotificationHub,
12
- decorators: [
13
- (Story) => {
14
- const notifications = useNotificationsStore();
15
- return (
16
- <div className="border">
17
- <Story />
18
- <Button
19
- label="Add Notification"
20
- type="button"
21
- onClick={() => {
22
- notifications.addNotification({
23
- message: `Notification ${notifications.notifications.length}`,
24
- type: 'info'
25
- });
26
- }}
27
- />
28
- </div>
29
- );
30
- }
31
- ]
32
- };
33
-
34
- export default meta;
35
-
36
- export const Default: Story = {
37
- args: {
38
- timeout: 100000
39
- }
40
- };
@@ -1 +0,0 @@
1
- export * from './NotificationHub';