@douglasneuroinformatics/libui 2.10.0 → 3.0.0

package/dist/hooks.d.ts

@@ -1,12 +1,129 @@
-export * from './hooks/useDownload.js';
-export * from './hooks/useEventCallback.js';
-export * from './hooks/useEventListener.js';
-export * from './hooks/useInterval.js';
-export * from './hooks/useIsomorphicLayoutEffect.js';
-export * from './hooks/useMediaQuery.js';
-export * from './hooks/useNotificationsStore.js';
-export * from './hooks/useOnClickOutside.js';
-export * from './hooks/useSessionStorage.js';
-export * from './hooks/useTheme.js';
-export * from './hooks/useWindowSize.js';
-//# sourceMappingURL=hooks.d.ts.map
+import { Promisable } from 'type-fest';
+import { RefObject, useEffect, Dispatch, SetStateAction } from 'react';
+import * as zustand from 'zustand';
+import { T as TranslationNamespace, L as Language, a as TranslateFunction } from './types-CjAJvRys.js';
+
+type DownloadTextOptions = {
+    blobType: 'text/csv' | 'text/plain';
+};
+type DownloadBlobOptions = {
+    blobType: 'application/zip' | 'image/jpeg' | 'image/png' | 'image/webp';
+};
+interface DownloadFunction {
+    (filename: string, data: Blob, options: DownloadBlobOptions): Promise<void>;
+    (filename: string, data: () => Promisable<Blob>, options: DownloadBlobOptions): Promise<void>;
+    (filename: string, data: string, options?: DownloadTextOptions): Promise<void>;
+    (filename: string, data: () => Promisable<string>, options?: DownloadTextOptions): Promise<void>;
+}
+/**
+ * Used to trigger downloads of arbitrary data to the client
+ * @returns A function to invoke the download
+ */
+declare function useDownload(): DownloadFunction;
+
+declare function useEventCallback<Args extends unknown[], R>(fn: (...args: Args) => R): (...args: Args) => R;
+
+declare function useEventListener<K extends keyof MediaQueryListEventMap>(eventName: K, handler: (event: MediaQueryListEventMap[K]) => void, element: RefObject<MediaQueryList>, options?: AddEventListenerOptions | boolean): void;
+declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: undefined, options?: AddEventListenerOptions | boolean): void;
+declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: RefObject<T>, options?: AddEventListenerOptions | boolean): void;
+declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: RefObject<Document>, options?: AddEventListenerOptions | boolean): void;
+
+declare function useInterval(callback: () => void, delay: null | number): void;
+
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+
+/**
+ * Get the result of an arbitrary CSS media query
+ *
+ * @param query - the CSS media query
+ * @returns a boolean indicating the result of the query
+ * @example
+ * // true if the viewport is at least 768px wide
+ * const matches = useMediaQuery('(min-width: 768px)')
+ */
+declare function useMediaQuery(query: string): boolean;
+
+type NotificationInterface = {
+    id: number;
+    message?: string;
+    title?: string;
+    type: 'error' | 'info' | 'success' | 'warning';
+    variant?: 'critical' | 'standard';
+};
+type NotificationsStore = {
+    addNotification: (notification: Omit<NotificationInterface, 'id'>) => void;
+    dismissNotification: (id: number) => void;
+    notifications: NotificationInterface[];
+};
+declare const useNotificationsStore: zustand.UseBoundStore<zustand.StoreApi<NotificationsStore>>;
+
+type Handler = (event: MouseEvent) => void;
+declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler, mouseEvent?: 'mousedown' | 'mouseup'): void;
+
+declare global {
+    interface WindowEventMap {
+        'session-storage': CustomEvent;
+    }
+}
+/**
+ * Represents the options for customizing the behavior of serialization and deserialization.
+ * @template T - The type of the state to be stored in session storage.
+ */
+type UseSessionStorageOptions<T> = {
+    /** A function to deserialize the stored value. */
+    deserializer?: (value: string) => T;
+    /**
+     * If `true` (default), the hook will initialize reading the session storage. In SSR, you should set it to `false`, returning the initial value initially.
+     * @default true
+     */
+    initializeWithValue?: boolean;
+    /** A function to serialize the value before storing it. */
+    serializer?: (value: T) => string;
+};
+/**
+ * Custom hook that uses session storage to persist state across page reloads.
+ * @template T - The type of the state to be stored in session storage.
+ * @param {string} key - The key under which the value will be stored in session storage.
+ * @param {T | (() => T)} initialValue - The initial value of the state or a function that returns the initial value.
+ * @param {?UseSessionStorageOptions<T>} [options] - Options for customizing the behavior of serialization and deserialization (optional).
+ * @returns {[T, Dispatch<SetStateAction<T>>]} A tuple containing the stored value and a function to set the value.
+ * @public
+ * @example
+ * ```tsx
+ * const [count, setCount] = useSessionStorage('count', 0);
+ * // Access the `count` value and the `setCount` function to update it.
+ * ```
+ */
+declare function useSessionStorage<T>(key: string, initialValue: (() => T) | T, options?: UseSessionStorageOptions<T>): [T, Dispatch<SetStateAction<T>>];
+
+type Theme = 'dark' | 'light';
+type UpdateTheme = (theme: Theme) => void;
+/** @private */
+declare const DEFAULT_THEME: Theme;
+/** @private */
+declare const THEME_ATTRIBUTE = "data-mode";
+/** @private */
+declare const THEME_KEY = "theme";
+/** @private */
+declare const SYS_DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+/**
+ * Returns the current theme and a function to update the current theme
+ *
+ * The reason the implementation of this hook is rather convoluted is for
+ * cases where the theme is updated outside this hook
+ */
+declare function useTheme(): readonly [Theme, UpdateTheme];
+
+declare function useTranslation<TNamespace extends TranslationNamespace | undefined = undefined>(namespace?: TNamespace): {
+    changeLanguage: (language: Language) => void;
+    resolvedLanguage: "fr" | "en";
+    t: TranslateFunction<TNamespace>;
+};
+
+type WindowSize = {
+    height: number;
+    width: number;
+};
+declare function useWindowSize(): WindowSize;
+
+export { DEFAULT_THEME, type NotificationInterface, type NotificationsStore, SYS_DARK_MEDIA_QUERY, THEME_ATTRIBUTE, THEME_KEY, type Theme, type WindowSize, useDownload, useEventCallback, useEventListener, useInterval, useIsomorphicLayoutEffect, useMediaQuery, useNotificationsStore, useOnClickOutside, useSessionStorage, useTheme, useTranslation, useWindowSize };

package/dist/hooks.js

@@ -1,11 +1,39 @@
-export * from './hooks/useDownload.js';
-export * from './hooks/useEventCallback.js';
-export * from './hooks/useEventListener.js';
-export * from './hooks/useInterval.js';
-export * from './hooks/useIsomorphicLayoutEffect.js';
-export * from './hooks/useMediaQuery.js';
-export * from './hooks/useNotificationsStore.js';
-export * from './hooks/useOnClickOutside.js';
-export * from './hooks/useSessionStorage.js';
-export * from './hooks/useTheme.js';
-export * from './hooks/useWindowSize.js';
+import {
+  DEFAULT_THEME,
+  SYS_DARK_MEDIA_QUERY,
+  THEME_ATTRIBUTE,
+  THEME_KEY,
+  useDownload,
+  useEventCallback,
+  useEventListener,
+  useInterval,
+  useIsomorphicLayoutEffect,
+  useMediaQuery,
+  useNotificationsStore,
+  useOnClickOutside,
+  useSessionStorage,
+  useTheme,
+  useTranslation,
+  useWindowSize
+} from "./chunk-6MDNYDO3.js";
+import "./chunk-A6FWMB7V.js";
+import "./chunk-IX6RFIQL.js";
+export {
+  DEFAULT_THEME,
+  SYS_DARK_MEDIA_QUERY,
+  THEME_ATTRIBUTE,
+  THEME_KEY,
+  useDownload,
+  useEventCallback,
+  useEventListener,
+  useInterval,
+  useIsomorphicLayoutEffect,
+  useMediaQuery,
+  useNotificationsStore,
+  useOnClickOutside,
+  useSessionStorage,
+  useTheme,
+  useTranslation,
+  useWindowSize
+};
+//# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/i18n.d.ts

@@ -1,347 +1,21 @@
-import { type i18n as I18n } from 'i18next';
-import type { EmptyObject, ValueOf } from 'type-fest';
-export declare const supportedLngs: readonly ["en", "fr"];
-export type Language = (typeof supportedLngs)[number];
-export type TranslationsDef = {
-    [key: string]: {
-        [key: string]: unknown;
-    };
+import * as zustand from 'zustand';
+import { SetOptional } from 'type-fest';
+import { L as Language, b as Translations } from './types-CjAJvRys.js';
+export { E as ExtractTranslationKey, c as LanguageOptions, a as TranslateFunction, d as TranslationKey, T as TranslationNamespace, U as UserConfig } from './types-CjAJvRys.js';
+
+type InitOptions = {
+    defaultLanguage?: Language;
+    fallbackLanguage?: Language;
+    translations?: SetOptional<Translations, 'libui'>;
 };
-export type TranslatedResource<T = EmptyObject> = {
-    [K in keyof T]: T[K] extends {
-        [key: string]: unknown;
-    } ? T[K] extends {
-        [K in Language]: unknown;
-    } ? ValueOf<T[K]> : TranslatedResource<T[K]> : T[K];
+type TranslationStore = {
+    changeLanguage: (language: Language) => void;
+    fallbackLanguage: Language;
+    isInitialized: boolean;
+    resolvedLanguage: Language;
+    translations: Translations;
 };
-export declare function transformTranslations<T extends {
-    [key: string]: any;
-}>(translations: T, locale: string): {
-    [key: string]: unknown;
-};
-export declare function createResourcesForLanguage<T extends TranslationsDef>(translations: T, locale: Language): { [P in keyof T]: {
-    [key: string]: unknown;
-}; };
-export declare function createResources<T extends TranslationsDef>(translations: T): {
-    en: TranslatedResource<T>;
-    fr: TranslatedResource<T>;
-};
-export declare const resources: {
-    en: TranslatedResource<{
-        libui: {
-            days: {
-                friday: {
-                    en: string;
-                    fr: string;
-                };
-                monday: {
-                    en: string;
-                    fr: string;
-                };
-                saturday: {
-                    en: string;
-                    fr: string;
-                };
-                sunday: {
-                    en: string;
-                    fr: string;
-                };
-                thursday: {
-                    en: string;
-                    fr: string;
-                };
-                tuesday: {
-                    en: string;
-                    fr: string;
-                };
-                wednesday: {
-                    en: string;
-                    fr: string;
-                };
-            };
-            form: {
-                append: {
-                    en: string;
-                    fr: string;
-                };
-                radioLabels: {
-                    false: {
-                        en: string;
-                        fr: string;
-                    };
-                    true: {
-                        en: string;
-                        fr: string;
-                    };
-                };
-                remove: {
-                    en: string;
-                    fr: string;
-                };
-                required: {
-                    en: string;
-                    fr: string;
-                };
-                reset: {
-                    en: string;
-                    fr: string;
-                };
-                submit: {
-                    en: string;
-                    fr: string;
-                };
-            };
-            months: {
-                april: {
-                    en: string;
-                    fr: string;
-                };
-                august: {
-                    en: string;
-                    fr: string;
-                };
-                december: {
-                    en: string;
-                    fr: string;
-                };
-                february: {
-                    en: string;
-                    fr: string;
-                };
-                january: {
-                    en: string;
-                    fr: string;
-                };
-                july: {
-                    en: string;
-                    fr: string;
-                };
-                june: {
-                    en: string;
-                    fr: string;
-                };
-                march: {
-                    en: string;
-                    fr: string;
-                };
-                may: {
-                    en: string;
-                    fr: string;
-                };
-                november: {
-                    en: string;
-                    fr: string;
-                };
-                october: {
-                    en: string;
-                    fr: string;
-                };
-                september: {
-                    en: string;
-                    fr: string;
-                };
-            };
-            notifications: {
-                types: {
-                    error: {
-                        en: string;
-                        fr: string;
-                    };
-                    info: {
-                        en: string;
-                        fr: string;
-                    };
-                    success: {
-                        en: string;
-                        fr: string;
-                    };
-                    warning: {
-                        en: string;
-                        fr: string;
-                    };
-                };
-            };
-            pagination: {
-                info: {
-                    en: string;
-                    fr: string;
-                };
-                next: {
-                    en: string;
-                    fr: string;
-                };
-                previous: {
-                    en: string;
-                    fr: string;
-                };
-            };
-            searchBar: {
-                placeholder: {
-                    en: string;
-                    fr: string;
-                };
-            };
-        };
-    }>;
-    fr: TranslatedResource<{
-        libui: {
-            days: {
-                friday: {
-                    en: string;
-                    fr: string;
-                };
-                monday: {
-                    en: string;
-                    fr: string;
-                };
-                saturday: {
-                    en: string;
-                    fr: string;
-                };
-                sunday: {
-                    en: string;
-                    fr: string;
-                };
-                thursday: {
-                    en: string;
-                    fr: string;
-                };
-                tuesday: {
-                    en: string;
-                    fr: string;
-                };
-                wednesday: {
-                    en: string;
-                    fr: string;
-                };
-            };
-            form: {
-                append: {
-                    en: string;
-                    fr: string;
-                };
-                radioLabels: {
-                    false: {
-                        en: string;
-                        fr: string;
-                    };
-                    true: {
-                        en: string;
-                        fr: string;
-                    };
-                };
-                remove: {
-                    en: string;
-                    fr: string;
-                };
-                required: {
-                    en: string;
-                    fr: string;
-                };
-                reset: {
-                    en: string;
-                    fr: string;
-                };
-                submit: {
-                    en: string;
-                    fr: string;
-                };
-            };
-            months: {
-                april: {
-                    en: string;
-                    fr: string;
-                };
-                august: {
-                    en: string;
-                    fr: string;
-                };
-                december: {
-                    en: string;
-                    fr: string;
-                };
-                february: {
-                    en: string;
-                    fr: string;
-                };
-                january: {
-                    en: string;
-                    fr: string;
-                };
-                july: {
-                    en: string;
-                    fr: string;
-                };
-                june: {
-                    en: string;
-                    fr: string;
-                };
-                march: {
-                    en: string;
-                    fr: string;
-                };
-                may: {
-                    en: string;
-                    fr: string;
-                };
-                november: {
-                    en: string;
-                    fr: string;
-                };
-                october: {
-                    en: string;
-                    fr: string;
-                };
-                september: {
-                    en: string;
-                    fr: string;
-                };
-            };
-            notifications: {
-                types: {
-                    error: {
-                        en: string;
-                        fr: string;
-                    };
-                    info: {
-                        en: string;
-                        fr: string;
-                    };
-                    success: {
-                        en: string;
-                        fr: string;
-                    };
-                    warning: {
-                        en: string;
-                        fr: string;
-                    };
-                };
-            };
-            pagination: {
-                info: {
-                    en: string;
-                    fr: string;
-                };
-                next: {
-                    en: string;
-                    fr: string;
-                };
-                previous: {
-                    en: string;
-                    fr: string;
-                };
-            };
-            searchBar: {
-                placeholder: {
-                    en: string;
-                    fr: string;
-                };
-            };
-        };
-    }>;
-};
-declare const i18n: {
-    addPreInitTranslations<T extends TranslationsDef>(translations: T): void;
-} & I18n;
-export { i18n };
-//# sourceMappingURL=i18n.d.ts.map
+declare const translationStore: zustand.StoreApi<TranslationStore>;
+declare const init: ({ defaultLanguage, fallbackLanguage, translations }?: InitOptions) => void;
+
+export { Language, type TranslationStore, Translations, init, translationStore };

package/dist/i18n.js

@@ -1,54 +1,9 @@
-import { isPlainObject } from '@douglasneuroinformatics/libjs';
-import { createInstance } from 'i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import { mapValues } from 'lodash-es';
-import { initReactI18next } from 'react-i18next';
-import libui from './translations/libui.json';
-export const supportedLngs = ['en', 'fr'];
-export function transformTranslations(translations, locale) {
-    if (!isPlainObject(translations)) {
-        throw new Error('Invalid format of translations: must be plain object');
-    }
-    const result = {};
-    for (const key in translations) {
-        const value = translations[key];
-        if (Object.hasOwn(value, locale)) {
-            result[key] = value[locale];
-        }
-        else {
-            result[key] = transformTranslations(value, locale);
-        }
-    }
-    return result;
-}
-export function createResourcesForLanguage(translations, locale) {
-    return mapValues(translations, (value) => transformTranslations(value, locale));
-}
-export function createResources(translations) {
-    return {
-        en: createResourcesForLanguage(translations, 'en'),
-        fr: createResourcesForLanguage(translations, 'fr')
-    };
-}
-export const resources = createResources({ libui });
-const i18n = createInstance({
-    fallbackLng: 'en',
-    interpolation: {
-        escapeValue: false
-    },
-    lng: 'en',
-    resources,
-    returnObjects: true,
-    supportedLngs
-});
-i18n.addPreInitTranslations = function (translations) {
-    if (!this.options.resources) {
-        console.error("Cannot add additional translations to i18next instance: 'this.options.resources' is undefined");
-        return;
-    }
-    const resources = createResources(translations);
-    Object.assign(this.options.resources.en, resources.en);
-    Object.assign(this.options.resources.fr, resources.fr);
+import {
+  init,
+  translationStore
+} from "./chunk-A6FWMB7V.js";
+export {
+  init,
+  translationStore
 };
-i18n.use(initReactI18next).use(LanguageDetector);
-export { i18n };
+//# sourceMappingURL=i18n.js.map

package/dist/i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}