@douglasneuroinformatics/libui 4.4.1 → 4.5.0

package/dist/hooks.d.ts

@@ -3,7 +3,7 @@ export { D as DEFAULT_THEME, a as SYS_DARK_MEDIA_QUERY, S as StorageName, b as T
 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-DDyMlEuL.js';
+import { T as TranslatorType, a as TranslationKey, b as TranslationNamespace, c as TranslationKeyForNamespace } from './types-CxoDu4Em.js';
 
 declare function useChart(): {
     config: ChartConfig;
@@ -72,11 +72,8 @@ declare function useLocalStorage<T>(key: string, initialValue: (() => T) | T, op
 /** Custom hook that uses session storage to persist state across page reloads */
 declare function useSessionStorage<T>(key: string, initialValue: (() => T) | T, options?: UseStorageOptions<T>): [T, Dispatch<SetStateAction<T>>];
 
-declare function useTranslation<TNamespace extends TranslationNamespace | undefined = undefined>(namespace?: TNamespace): {
-    changeLanguage: (language: Language) => void;
-    resolvedLanguage: "fr" | "en";
-    t: TranslateFunction<TNamespace>;
-};
+declare function useTranslation(): TranslatorType<TranslationKey>;
+declare function useTranslation<TNamespace extends TranslationNamespace>(namespace: TNamespace): TranslatorType<TranslationKeyForNamespace<TNamespace>>;
 
 type WindowSize = {
     height: number;

package/dist/hooks.js

@@ -19,9 +19,10 @@ import {
   useTheme,
   useTranslation,
   useWindowSize
-} from "./chunk-LSGD4EQY.js";
-import "./chunk-VFVO337W.js";
+} from "./chunk-SGSRBDMT.js";
+import "./chunk-GT5NL2RJ.js";
 import "./chunk-HCQE34RL.js";
+import "./chunk-5B62SIBQ.js";
 export {
   DEFAULT_THEME,
   SYS_DARK_MEDIA_QUERY,

package/dist/i18n.d.ts

@@ -1,33 +1,30 @@
-import * as zustand from 'zustand';
 import { SetOptional } from 'type-fest';
-import { L as Language, b as Translations, a as TranslateFunction } from './types-DDyMlEuL.js';
-export { E as ExtractTranslationKey, c as LanguageOptions, d as TranslationKey, T as TranslationNamespace, U as UserConfig } from './types-DDyMlEuL.js';
+import { T as TranslatorType, a as TranslationKey, L as Language, d as Translations, e as TranslateOptions } from './types-CxoDu4Em.js';
+export { E as ExtractTranslationKey, f as LanguageOptions, g as TranslateFormatArgs, h as TranslateFunction, c as TranslationKeyForNamespace, b as TranslationNamespace, U as UserConfig } from './types-CxoDu4Em.js';
 
-type InitOptions = {
-    defaultLanguage?: Language;
-    fallbackLanguage?: Language;
-    translations?: SetOptional<Translations, 'libui'>;
-};
-type I18N = {
-    init: (options?: InitOptions) => void;
-    t: TranslateFunction;
-};
-type TranslationStore = {
-    changeLanguage: (language: Language) => void;
-    fallbackLanguage: Language;
-    isInitialized: boolean;
-    resolvedLanguage: Language;
-    translations: Translations;
+type TranslatorEventMap = {
+    languageChange: (...args: [language: Language]) => void;
 };
-declare const translationStore: Omit<zustand.StoreApi<TranslationStore>, "subscribe"> & {
-    subscribe: {
-        (listener: (selectedState: TranslationStore, previousSelectedState: TranslationStore) => void): () => void;
-        <U>(selector: (state: TranslationStore) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
-            equalityFn?: ((a: U, b: U) => boolean) | undefined;
-            fireImmediately?: boolean;
-        } | undefined): () => void;
-    };
+type TranslatorConfig = {
+    defaultLanguage?: Language;
+    translations: SetOptional<Translations, 'libui'>;
 };
-declare const i18n: I18N;
+declare class Translator implements TranslatorType<TranslationKey> {
+    #private;
+    constructor();
+    get isInitialized(): boolean;
+    get resolvedLanguage(): "fr" | "en";
+    addEventListener<TKey extends keyof TranslatorEventMap>(key: TKey, handler: TranslatorEventMap[TKey]): void;
+    changeLanguage(language: Language): void;
+    init({ defaultLanguage, translations }: TranslatorConfig): void;
+    removeEventListener<TKey extends keyof TranslatorEventMap>(key: TKey, handler: TranslatorEventMap[TKey]): boolean;
+    t(target: TranslationKey | {
+        [L in Language]?: string;
+    }, { args }?: TranslateOptions): string;
+    private emitEvent;
+    private getFormatArgs;
+}
+
+declare const i18n: Translator;
 
-export { Language, TranslateFunction, type TranslationStore, Translations, i18n, translationStore };
+export { Language, TranslateOptions, TranslationKey, Translations, TranslatorType, i18n };

package/dist/i18n.js

@@ -1,10 +1,9 @@
 "use client"
 import {
-  i18n,
-  translationStore
-} from "./chunk-VFVO337W.js";
+  i18n
+} from "./chunk-GT5NL2RJ.js";
+import "./chunk-5B62SIBQ.js";
 export {
-  i18n,
-  translationStore
+  i18n
 };
 //# sourceMappingURL=i18n.js.map

package/dist/{types-DDyMlEuL.d.ts → types-CxoDu4Em.d.ts}

@@ -1,4 +1,4 @@
-import { Simplify, OmitIndexSignature, Primitive } from 'type-fest';
+import { Primitive, Simplify, OmitIndexSignature } from 'type-fest';
 
 var days = {
 	friday: {
@@ -222,12 +222,24 @@ type ExtractTranslationKey<T extends {
     [K in Language]?: string;
 } ? Key : `${Key}.${ExtractTranslationKey<T[Key]>}` : `${Key}` : never;
 type TranslationNamespace = Extract<keyof Translations, string>;
-type TranslationKey<TNamespace> = TNamespace extends TranslationNamespace ? ExtractTranslationKey<Translations[TNamespace]> : ExtractTranslationKey<Translations>;
-interface TranslateFunction<TNamespace = undefined> {
-    (key: TranslationKey<TNamespace>, ...args: Exclude<Primitive, symbol>[]): string;
+type TranslationKey = ExtractTranslationKey<Translations>;
+type TranslationKeyForNamespace<TNamespace extends TranslationNamespace> = TranslationKey extends `${TNamespace}.${infer TKey}` ? TKey : never;
+type TranslateFormatArgs = Exclude<Primitive, symbol>[] | {
+    [L in Language]?: Exclude<Primitive, symbol>[];
+};
+type TranslateOptions = {
+    args?: TranslateFormatArgs;
+};
+interface TranslateFunction<TKey extends string> {
+    (key: TKey, options?: TranslateOptions): string;
     (translations: {
         [L in Language]?: string;
-    }, ...args: Exclude<Primitive, symbol>[]): string;
+    }, options?: TranslateOptions): string;
 }
+type TranslatorType<TKey extends string> = {
+    changeLanguage: (language: Language) => void;
+    resolvedLanguage: Language;
+    t: TranslateFunction<TKey>;
+};
 
-export { type ExtractTranslationKey as E, type Language as L, type TranslationNamespace as T, UserConfig as U, type TranslateFunction as a, type Translations as b, type LanguageOptions as c, type TranslationKey as d };
+export { type ExtractTranslationKey as E, type Language as L, type TranslatorType as T, UserConfig as U, type TranslationKey as a, type TranslationNamespace as b, type TranslationKeyForNamespace as c, type Translations as d, type TranslateOptions as e, type LanguageOptions as f, type TranslateFormatArgs as g, type TranslateFunction as h };

package/dist/utils.js

@@ -3,6 +3,7 @@ import {
   cn,
   isBrowser
 } from "./chunk-HCQE34RL.js";
+import "./chunk-5B62SIBQ.js";
 export {
   cn,
   isBrowser

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "packageManager": "pnpm@10.7.1",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",
@@ -68,7 +68,7 @@
     "zod": "^3.25.x"
   },
   "dependencies": {
-    "@douglasneuroinformatics/libjs": "^3.0.1",
+    "@douglasneuroinformatics/libjs": "^3.0.2",
     "@douglasneuroinformatics/libui-form-types": "^0.11.0",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.6",
@@ -116,17 +116,10 @@
     "@douglasneuroinformatics/semantic-release": "^0.2.1",
     "@douglasneuroinformatics/tsconfig": "^1.0.3",
     "@faker-js/faker": "^9.6.0",
-    "@storybook/addon-docs": "^8.6.11",
-    "@storybook/addon-essentials": "^8.6.11",
-    "@storybook/addon-interactions": "^8.6.11",
-    "@storybook/addon-links": "^8.6.11",
-    "@storybook/blocks": "^8.6.11",
-    "@storybook/components": "^8.6.11",
+    "@storybook/addon-docs": "^9.0.6",
+    "@storybook/addon-links": "^9.0.6",
     "@storybook/icons": "^1.4.0",
-    "@storybook/manager-api": "^8.6.11",
-    "@storybook/react": "^8.6.11",
-    "@storybook/react-vite": "^8.6.11",
-    "@storybook/theming": "^8.6.11",
+    "@storybook/react-vite": "^9.0.6",
     "@tailwindcss/vite": "^4.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -137,7 +130,7 @@
     "@types/node": "22.x",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react-swc": "^3.8.1",
+    "@vitejs/plugin-react-swc": "^3.10.1",
     "@vitest/coverage-v8": "^3.1.1",
     "culori": "^4.0.1",
     "eslint": "^9.23.0",
@@ -147,10 +140,10 @@
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "sort-json": "^2.0.1",
-    "storybook": "^8.6.11",
+    "storybook": "^9.0.6",
     "tsup": "^8.4.0",
     "typescript": "5.6.x",
-    "vite": "6.2.4",
+    "vite": "^6.3.5",
     "vitest": "^3.1.1"
   },
   "commitlint": {
@@ -166,6 +159,7 @@
   "pnpm": {
     "onlyBuiltDependencies": [
       "@swc/core",
+      "@tailwindcss/oxide",
       "esbuild"
     ]
   }

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Accordion } from './Accordion';
 

package/src/components/ActionDropdown/ActionDropdown.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ActionDropdown } from './ActionDropdown';
 

package/src/components/AlertDialog/AlertDialog.stories.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '../Button';
 import { AlertDialog } from './AlertDialog';

package/src/components/ArrowToggle/ArrowToggle.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ArrowToggle } from './ArrowToggle';
 

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Avatar } from './Avatar';
 

package/src/components/Badge/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Badge } from './Badge';
 

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { DropdownMenu } from '../DropdownMenu';
 import { Breadcrumb } from './Breadcrumb';

package/src/components/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { DownloadIcon } from 'lucide-react';
 
 import { Button } from './Button';

package/src/components/Card/Card.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '../Button';
 import { Input } from '../Input';

package/src/components/Chart/Chart.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
 
 import { Chart } from './Chart';

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Checkbox } from './Checkbox';
 
@@ -20,7 +20,7 @@ export const Default: Story = {
             id="terms"
           />
           <label
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
             htmlFor="terms"
           >
             Accept terms and conditions

package/src/components/ClientTable/ClientTable.stories.tsx

@@ -1,5 +1,5 @@
 import { randomInt, range } from '@douglasneuroinformatics/libjs';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ClientTable } from './ClientTable';
 

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { ChevronsUpDownIcon } from 'lucide-react';
 
 import { Button } from '../Button';

package/src/components/Command/Command.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { CalculatorIcon, CalendarIcon, CreditCardIcon, SettingsIcon, SmileIcon, UserIcon } from 'lucide-react';
 
 import { Command } from './Command';

package/src/components/ContextMenu/ContextMenu.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ContextMenu } from './ContextMenu';
 

package/src/components/CopyButton/CopyButton.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { CopyButton } from './CopyButton';
 

package/src/components/DataTable/DataTable.stories.tsx

@@ -1,6 +1,6 @@
 import { range, toBasicISOString, unwrap } from '@douglasneuroinformatics/libjs';
 import { faker } from '@faker-js/faker';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { DataTable } from './DataTable';
 

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { DatePicker } from './DatePicker';
 

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '../Button';
 import { Input } from '../Input';

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '../Button';
 import { Drawer } from './Drawer';

package/src/components/DropdownButton/DropdownButton.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { DropdownButton } from './DropdownButton';
 

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '../Button';
 import { DropdownMenu } from './DropdownMenu';

package/src/components/ErrorFallback/ErrorFallback.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ErrorFallback } from './ErrorFallback';
 

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { FileDropzone } from './FileDropzone.js';
 

package/src/components/Form/BooleanField/BooleanField.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { BooleanField } from './BooleanField';
 

package/src/components/Form/DateField/DateField.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { DateField } from './DateField';
 

package/src/components/Form/Form.stories.tsx

@@ -6,7 +6,7 @@ import { sleep } from '@douglasneuroinformatics/libjs';
 import type { ZodTypeLike } from '@douglasneuroinformatics/libjs';
 import type { FormFields } from '@douglasneuroinformatics/libui-form-types';
 import type FormTypes from '@douglasneuroinformatics/libui-form-types';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { IntRange } from 'type-fest';
 import { z } from 'zod/v4';
 

package/src/components/Form/Form.tsx

@@ -24,6 +24,10 @@ import { getInitialValues } from './utils';
 
 import type { FormErrors } from './types';
 
+type FormSubmitResult = { errorMessage: string; success: false } | { success: true };
+
+type FormSubmitHandler<TData> = (data: NoInfer<TData>) => Promisable<FormSubmitResult | void>;
+
 type FormProps<TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['_output'] = TSchema['_output']> = {
   [key: `data-${string}`]: unknown;
   additionalButtons?: {
@@ -39,11 +43,9 @@ type FormProps<TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema[
   fieldsFooter?: React.ReactNode;
   id?: string;
   initialValues?: PartialNullableFormDataType<NoInfer<TData>>;
-  onBeforeSubmit?:
-    | ((data: NoInfer<TData>) => Promisable<{ errorMessage: string; success: false } | { success: true }>)
-    | null;
+  onBeforeSubmit?: FormSubmitHandler<NoInfer<TData>> | null;
   onError?: (error: ZodErrorLike) => void;
-  onSubmit: (data: NoInfer<TData>) => Promisable<void>;
+  onSubmit: FormSubmitHandler<NoInfer<TData>>;
   preventResetValuesOnReset?: boolean;
   readOnly?: boolean;
   resetBtn?: boolean;
@@ -121,7 +123,7 @@ const Form = <TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['
     }
     if (onBeforeSubmit) {
       const beforeSubmitResult = await onBeforeSubmit(result.data);
-      if (!beforeSubmitResult.success) {
+      if (beforeSubmitResult && !beforeSubmitResult.success) {
         setErrors({});
         setRootErrors([beforeSubmitResult.errorMessage]);
         return;
@@ -130,12 +132,17 @@ const Form = <TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['
 
     try {
       setIsSubmitting(true);
-      await Promise.all([
+      const [formSubmitResult] = await Promise.all([
         onSubmit(result.data),
         new Promise<void>((resolve) => {
           return suspendWhileSubmitting ? setTimeout(resolve, 500) : resolve();
         })
       ]);
+      if (formSubmitResult && !formSubmitResult.success) {
+        setErrors({});
+        setRootErrors([formSubmitResult.errorMessage]);
+        return;
+      }
       reset();
     } finally {
       setIsSubmitting(false);

package/src/components/Form/NumberField/NumberField.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { NumberField } from './NumberField';
 

package/src/components/Form/SetField/SetField.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { SetField } from './SetField';
 

package/src/components/Form/StringField/StringField.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { StringField } from './StringField';
 

package/src/components/Heading/Heading.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Heading } from './Heading';
 

package/src/components/HoverCard/HoverCard.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { CalendarDays } from 'lucide-react';
 
 import { Avatar } from '../Avatar';
@@ -27,7 +27,7 @@ export const Default: Story = {
               <p className="text-sm">The React Framework - created and maintained by @vercel.</p>
               <div className="flex items-center pt-2">
                 <CalendarDays className="mr-2 h-4 w-4 opacity-70" />
-                <span className="text-xs text-muted-foreground">Joined December 2021</span>
+                <span className="text-muted-foreground text-xs">Joined December 2021</span>
               </div>
             </div>
           </div>

package/src/components/Input/Input.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Input } from './Input';
 

package/src/components/Label/Label.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Label } from './Label';
 

package/src/components/LanguageToggle/LanguageToggle.stories.tsx

@@ -1,5 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { useTranslation } from '@/hooks';
+
+import { Separator } from '../Separator';
 import { LanguageToggle } from './LanguageToggle';
 
 type Story = StoryObj<typeof LanguageToggle>;
@@ -13,5 +16,22 @@ export const Default: Story = {
       en: 'English',
       fr: 'Français'
     }
-  }
+  },
+  decorators: [
+    (Story) => {
+      const i18n = useTranslation();
+      return (
+        <div className="flex items-center gap-6">
+          <Story />
+          <Separator className="h-6" orientation="vertical" />
+          <h3 className="font-medium">
+            {i18n.t({
+              en: 'Hello',
+              fr: 'Bonjour'
+            })}
+          </h3>
+        </div>
+      );
+    }
+  ]
 };

package/src/components/LineGraph/LineGraph.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { LineGraph } from './LineGraph';
 

package/src/components/ListboxDropdown/ListboxDropdown.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ListboxDropdown } from './ListboxDropdown';
 

package/src/components/MenuBar/MenuBar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { MenuBar } from './MenuBar';
 

package/src/components/NotificationHub/NotificationHub.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { useNotificationsStore } from '@/hooks/useNotificationsStore';