@douglasneuroinformatics/libui 4.4.1 → 4.5.0

package/src/components/OneTimePasswordInput/OneTimePasswordInput.stories.tsx

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

package/src/components/Pagination/Pagination.stories.tsx

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

package/src/components/Popover/Popover.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 { CircleHelpIcon } from 'lucide-react';
 
 import { Button } from '../Button';
@@ -28,8 +28,8 @@ export const Form: Story = {
         <Popover.Content className="w-80 p-4">
           <div className="grid gap-4">
             <div className="space-y-2">
-              <h4 className="font-medium leading-none">Dimensions</h4>
-              <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+              <h4 className="leading-none font-medium">Dimensions</h4>
+              <p className="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
             </div>
             <div className="grid gap-2">
               <div className="grid grid-cols-3 items-center gap-4">
@@ -65,7 +65,7 @@ export const Icon: Story = {
             <CircleHelpIcon />
           </Button>
         </Popover.Trigger>
-        <Popover.Content className="w-min whitespace-nowrap text-sm">Hello World</Popover.Content>
+        <Popover.Content className="w-min text-sm whitespace-nowrap">Hello World</Popover.Content>
       </Fragment>
     )
   }

package/src/components/Progress/Progress.stories.tsx

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

package/src/components/RadioGroup/RadioGroup.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';
 import { RadioGroup } from './RadioGroup';

package/src/components/Resizable/Resizable.stories.tsx

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

package/src/components/ScrollArea/ScrollArea.stories.tsx

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

package/src/components/SearchBar/SearchBar.stories.tsx

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

package/src/components/Select/Select.stories.tsx

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

package/src/components/Separator/Separator.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Separator } from './Separator';
 
@@ -11,8 +11,8 @@ export const Default: Story = {
     (Story) => (
       <div>
         <div className="space-y-1">
-          <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-          <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
+          <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
+          <p className="text-muted-foreground text-sm">An open-source UI component library.</p>
         </div>
         <Story args={{ className: 'my-4' }} />
         <div className="flex h-5 items-center space-x-4 text-sm">

package/src/components/Sheet/Sheet.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 { Input } from '../Input';

package/src/components/Slider/Slider.stories.tsx

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

package/src/components/Spinner/Spinner.stories.tsx

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

package/src/components/SpinnerIcon/SpinnerIcon.stories.tsx

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

package/src/components/StatisticCard/StatisticCard.stories.tsx

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

package/src/components/Switch/Switch.stories.tsx

@@ -1,5 +1,5 @@
 import { Label } from '@radix-ui/react-label';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Switch } from './Switch';
 

package/src/components/Table/Table.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 { Table } from './Table';
 

package/src/components/Tabs/Tabs.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 { Card } from '../Card';

package/src/components/TextArea/TextArea.stories.tsx

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

package/src/components/ThemeToggle/ThemeToggle.stories.tsx

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

package/src/components/Tooltip/Tooltip.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 { DownloadIcon } from 'lucide-react';
 
 import { Tooltip } from './Tooltip';

package/src/hooks/useTranslation/useTranslation.ts

@@ -1,30 +1,45 @@
-import { useCallback } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
-import { useStore } from 'zustand';
+import type {
+  TranslateFunction,
+  TranslationKey,
+  TranslationKeyForNamespace,
+  TranslationNamespace,
+  TranslatorType
+} from '@/i18n';
 
-import { translationStore } from '@/i18n';
-import type { TranslateFunction, TranslationNamespace } from '@/i18n';
-import { getTranslation } from '@/i18n/internal';
+// this is required since our storybook manager plugin cannot use vite aliases
+import { i18n } from '../../i18n';
 
-export function useTranslation<TNamespace extends TranslationNamespace | undefined = undefined>(
-  namespace?: TNamespace
-) {
-  const changeLanguage = useStore(translationStore, (store) => store.changeLanguage);
-  const fallbackLanguage = useStore(translationStore, (store) => store.fallbackLanguage);
-  const resolvedLanguage = useStore(translationStore, (store) => store.resolvedLanguage);
-  const translations = useStore(translationStore, (store) => {
-    if (namespace) {
-      return store.translations[namespace];
-    }
-    return store.translations;
-  });
+export function useTranslation(): TranslatorType<TranslationKey>;
+export function useTranslation<TNamespace extends TranslationNamespace>(
+  namespace: TNamespace
+): TranslatorType<TranslationKeyForNamespace<TNamespace>>;
+export function useTranslation(namespace?: TranslationNamespace): TranslatorType<string> {
+  const [resolvedLanguage, setResolvedLanguage] = useState(i18n.resolvedLanguage);
+  const { changeLanguage, t } = useMemo(() => {
+    const t: TranslateFunction<string> = (target, options) => {
+      if (typeof target === 'object') {
+        return i18n.t(target, options);
+      }
+      return i18n.t((namespace ? `${namespace}.${target}` : target) as TranslationKey, options);
+    };
+    return {
+      changeLanguage: i18n.changeLanguage.bind(i18n),
+      t
+    };
+  }, []);
 
-  const t: TranslateFunction<TNamespace> = useCallback(
-    (target, ...args) => {
-      return getTranslation(target, { fallbackLanguage, resolvedLanguage, translations }, ...args);
-    },
-    [fallbackLanguage, resolvedLanguage, translations]
-  );
+  useEffect(() => {
+    i18n.addEventListener('languageChange', setResolvedLanguage);
+    return () => {
+      i18n.removeEventListener('languageChange', setResolvedLanguage);
+    };
+  }, []);
 
-  return { changeLanguage, resolvedLanguage, t };
+  return {
+    changeLanguage,
+    resolvedLanguage,
+    t
+  };
 }

package/src/i18n/__tests__/translator.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { Translator } from '../translator';
+
+describe('Translator', () => {
+  const translator = new Translator();
+
+  it('should initially not be initialized', () => {
+    expect(translator.isInitialized).toBe(false);
+  });
+
+  it('should not allow accessing the changeLanguage method before initialization', () => {
+    expect(() => translator.changeLanguage('fr')).toThrow(
+      "Cannot access method 'changeLanguage' of Translator instance before initialization"
+    );
+  });
+
+  it('should not allow accessing the resolvedLanguage method before initialization', () => {
+    expect(() => translator.resolvedLanguage).toThrow(
+      "Cannot access getter 'resolvedLanguage' of Translator instance before initialization"
+    );
+  });
+
+  it('should allow initialization', () => {
+    translator.init({ defaultLanguage: 'en', translations: {} });
+    expect(translator.isInitialized).toBe(true);
+  });
+
+  it('should not allow reinitialization', () => {
+    expect(() => translator.init({ defaultLanguage: 'en', translations: {} })).toThrow(
+      'Cannot reinitialize Translator'
+    );
+  });
+
+  it('should have set the document language to en', () => {
+    expect(document.documentElement.getAttribute('lang')).toBe('en');
+  });
+
+  it('should allow accessing translations', () => {
+    expect(translator.t('libui.days.monday')).toBe('Monday');
+    expect(translator.t({ en: 'Yes', fr: 'Oui' })).toBe('Yes');
+  });
+
+  it('should allow changing the language', () => {
+    translator.changeLanguage('fr');
+    expect(translator.resolvedLanguage).toBe('fr');
+    expect(document.documentElement.getAttribute('lang')).toBe('fr');
+    expect(translator.t('libui.days.monday')).toBe('Lundi');
+    expect(translator.t({ en: 'Yes', fr: 'Oui' })).toBe('Oui');
+  });
+
+  it('should return the language from the defaultLanguage, if the resolvedLanguage is unavailable', () => {
+    expect(translator.resolvedLanguage).toBe('fr');
+    expect(translator.t({ en: 'Yes' })).toBe('Yes');
+  });
+
+  it('should return an empty string if no translation is available', () => {
+    vi.spyOn(console, 'error').mockImplementationOnce(() => undefined);
+    expect(translator.t({})).toBe('');
+    expect(console.error).toHaveBeenLastCalledWith("Failed to extract translation from object '{}'");
+    vi.restoreAllMocks();
+  });
+
+  it('should allow adding and removing event listeners', () => {
+    const handleLanguageChange1 = vi.fn();
+    const handleLanguageChange2 = vi.fn();
+    translator.addEventListener('languageChange', handleLanguageChange1);
+    translator.addEventListener('languageChange', handleLanguageChange2);
+    translator.changeLanguage('en');
+    expect(translator.removeEventListener('languageChange', handleLanguageChange1)).toBe(true);
+    translator.changeLanguage('fr');
+    expect(translator.removeEventListener('languageChange', handleLanguageChange2)).toBe(true);
+    expect(handleLanguageChange1).toHaveBeenCalledTimes(1);
+    expect(handleLanguageChange2).toHaveBeenCalledTimes(2);
+  });
+
+  it('should apply arguments', () => {
+    expect(translator.t({ en: 'Hello, {}' }, { args: ['World'] })).toBe('Hello, World');
+    expect(
+      translator.t(
+        { en: 'Hello, {}', fr: 'Bonjour, {}' },
+        {
+          args: {
+            en: ['World'],
+            fr: ['tout le monde']
+          }
+        }
+      )
+    ).toBe('Bonjour, tout le monde');
+  });
+});

package/src/i18n/index.ts

@@ -1,2 +1,5 @@
-export * from './store.ts';
+import { Translator } from './translator.ts';
+
+export const i18n = new Translator();
+
 export * from './types.ts';

package/src/i18n/translator.ts

@@ -0,0 +1,129 @@
+import { format } from '@douglasneuroinformatics/libjs';
+import { get } from 'lodash-es';
+import type { SetOptional } from 'type-fest';
+
+import libui from './translations/libui.json';
+
+import type {
+  Language,
+  TranslateFormatArgs,
+  TranslateOptions,
+  TranslationKey,
+  Translations,
+  TranslatorType
+} from './types';
+
+type TranslatorEventMap = {
+  languageChange: (...args: [language: Language]) => void;
+};
+
+type TranslatorConfig = {
+  defaultLanguage?: Language;
+  translations: SetOptional<Translations, 'libui'>;
+};
+
+function InitializedOnly<T extends Translator, TArgs extends any[], TReturn>(
+  target: (this: T, ...args: TArgs) => TReturn,
+  context: ClassGetterDecoratorContext<T> | ClassMethodDecoratorContext<T> | ClassSetterDecoratorContext<T>
+) {
+  const name = context.name.toString();
+  function replacementMethod(this: T, ...args: TArgs): TReturn {
+    if (!this.isInitialized) {
+      throw new Error(`Cannot access ${context.kind} '${name}' of Translator instance before initialization`);
+    }
+    return target.call(this, ...args);
+  }
+  return replacementMethod;
+}
+
+export class Translator implements TranslatorType<TranslationKey> {
+  #config: Required<TranslatorConfig>;
+  #eventHandlers: {
+    [K in keyof TranslatorEventMap]: Set<TranslatorEventMap[K]>;
+  };
+  #resolvedLanguage: Language;
+
+  constructor() {
+    // in the implementation, these should only be accessed in methods decorated with @InitializedOnly
+    this.#config = null!;
+    this.#eventHandlers = {
+      languageChange: new Set()
+    };
+    this.#resolvedLanguage = null!;
+  }
+
+  get isInitialized() {
+    return this.#config !== null;
+  }
+
+  @InitializedOnly
+  get resolvedLanguage() {
+    return this.#resolvedLanguage;
+  }
+
+  addEventListener<TKey extends keyof TranslatorEventMap>(key: TKey, handler: TranslatorEventMap[TKey]) {
+    this.#eventHandlers[key].add(handler);
+  }
+
+  @InitializedOnly
+  changeLanguage(language: Language) {
+    this.#resolvedLanguage = language;
+    document.documentElement.lang = language;
+    this.emitEvent('languageChange', [language]);
+  }
+
+  init({ defaultLanguage, translations }: TranslatorConfig) {
+    if (this.isInitialized) {
+      throw new Error('Cannot reinitialize Translator');
+    }
+    this.#config = {
+      defaultLanguage: defaultLanguage ?? 'en',
+      translations: {
+        libui,
+        ...translations
+      }
+    };
+    this.changeLanguage(this.#config.defaultLanguage);
+  }
+
+  removeEventListener<TKey extends keyof TranslatorEventMap>(key: TKey, handler: TranslatorEventMap[TKey]) {
+    return this.#eventHandlers[key].delete(handler);
+  }
+
+  @InitializedOnly
+  t(target: TranslationKey | { [L in Language]?: string }, { args }: TranslateOptions = {}): string {
+    let obj: { [key: string]: string };
+    if (typeof target === 'string') {
+      obj = (get(this.#config.translations, target) ?? {}) as { [key: string]: string };
+    } else {
+      obj = target;
+    }
+    const value = obj[this.#resolvedLanguage] ?? obj[this.#config.defaultLanguage];
+    if (!value) {
+      console.error(`Failed to extract translation from object '${JSON.stringify(obj)}'`);
+      return '';
+    }
+    if (!args) {
+      return value;
+    }
+    return format(value, ...this.getFormatArgs(args));
+  }
+
+  private emitEvent<TKey extends keyof TranslatorEventMap>(key: TKey, payload: Parameters<TranslatorEventMap[TKey]>) {
+    this.#eventHandlers[key].forEach((fn: (...args: any[]) => any) => {
+      fn(...payload);
+    });
+  }
+
+  private getFormatArgs(args: TranslateFormatArgs) {
+    if (Array.isArray(args)) {
+      return args;
+    }
+    const result = args[this.#resolvedLanguage] ?? args[this.#config.defaultLanguage];
+    if (!result) {
+      console.error(`Failed to extract args from object '${JSON.stringify(args)}'`);
+      return [];
+    }
+    return result;
+  }
+}

package/src/i18n/types.ts

@@ -41,11 +41,28 @@ export type ExtractTranslationKey<T extends { [key: string]: any }, Key = keyof
 
 export type TranslationNamespace = Extract<keyof Translations, string>;
 
-export type TranslationKey<TNamespace> = TNamespace extends TranslationNamespace
-  ? ExtractTranslationKey<Translations[TNamespace]>
-  : ExtractTranslationKey<Translations>;
+export type TranslationKey = ExtractTranslationKey<Translations>;
 
-export interface TranslateFunction<TNamespace = undefined> {
-  (key: TranslationKey<TNamespace>, ...args: Exclude<Primitive, symbol>[]): string;
-  (translations: { [L in Language]?: string }, ...args: Exclude<Primitive, symbol>[]): string;
+export type TranslationKeyForNamespace<TNamespace extends TranslationNamespace> =
+  TranslationKey extends `${TNamespace}.${infer TKey}` ? TKey : never;
+
+export type TranslateFormatArgs =
+  | Exclude<Primitive, symbol>[]
+  | {
+      [L in Language]?: Exclude<Primitive, symbol>[];
+    };
+
+export type TranslateOptions = {
+  args?: TranslateFormatArgs;
+};
+
+export interface TranslateFunction<TKey extends string> {
+  (key: TKey, options?: TranslateOptions): string;
+  (translations: { [L in Language]?: string }, options?: TranslateOptions): string;
 }
+
+export type TranslatorType<TKey extends string> = {
+  changeLanguage: (language: Language) => void;
+  resolvedLanguage: Language;
+  t: TranslateFunction<TKey>;
+};

package/src/testing/mocks.ts

@@ -1,4 +1,3 @@
-import { faker } from '@faker-js/faker';
 import { vi } from 'vitest';
 
 import type { StorageName } from '@/hooks';
@@ -51,11 +50,3 @@ export const mockStorage = (name: StorageName): void => {
     value: new StorageMock()
   });
 };
-
-export const mockTranslationStore = () => {
-  vi.mock('@/hooks/useTranslation', () => ({
-    useTranslation: () => ({
-      t: () => faker.word.sample()
-    })
-  }));
-};

package/src/testing/setup-tests.ts

@@ -1,12 +1,13 @@
 import { cleanup } from '@testing-library/react';
 import { afterEach, vi } from 'vitest';
 
-import { mockTranslationStore } from './mocks';
+import { i18n } from '@/i18n';
 
 import '@testing-library/jest-dom/vitest';
 
 vi.mock('zustand');
-mockTranslationStore();
+
+i18n.init({ translations: {} });
 
 // Since we're not using vitest globals, we need to explicitly call cleanup()
 // for testing-library. See: