Merge pull request #64 from DouglasNeuroInformatics/i18n

refactor i18next implementation to align with odc runtime and allow registering events and non-react usage

Author: joshunrau

.storybook/index.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Welcome" />
 

.storybook/main.ts

@@ -1,18 +1,10 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  addons: [
-    '@storybook/addon-docs',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
-  ],
+  addons: ['@storybook/addon-docs', '@storybook/addon-links'],
   core: {
     disableTelemetry: true
   },
-  docs: {
-    autodocs: 'tag'
-  },
   framework: {
     name: '@storybook/react-vite',
     options: {

.storybook/manager.tsx

@@ -1,14 +1,14 @@
-import React, { useEffect } from 'react';
+import React, { Fragment, useEffect } from 'react';
 
-import { IconButton } from '@storybook/components';
-import { addons, types } from '@storybook/manager-api';
 import { MoonIcon, SunIcon } from 'lucide-react';
+import { IconButton } from 'storybook/internal/components';
+import { addons, types } from 'storybook/manager-api';
 import { match } from 'ts-pattern';
 
 import { useTheme } from '../src/hooks/useTheme';
 import theme from './theme';
 
-const ExampleToolbar = React.memo(function ExampleToolbar() {
+const Toolbar = React.memo(function Toolbar() {
   const [theme, setTheme] = useTheme();
 
   useEffect(() => {
@@ -17,17 +17,19 @@ const ExampleToolbar = React.memo(function ExampleToolbar() {
   }, [theme]);
 
   return (
-    <IconButton
-      title="TailwindCSS Theme"
-      onClick={() => {
-        setTheme(theme === 'light' ? 'dark' : 'light');
-      }}
-    >
-      {match(theme)
-        .with('dark', () => <SunIcon height={14} width={14} />)
-        .with('light', () => <MoonIcon height={14} width={14} />)
-        .exhaustive()}
-    </IconButton>
+    <Fragment>
+      <IconButton
+        title="TailwindCSS Theme"
+        onClick={() => {
+          setTheme(theme === 'light' ? 'dark' : 'light');
+        }}
+      >
+        {match(theme)
+          .with('dark', () => <SunIcon height={14} width={14} />)
+          .with('light', () => <MoonIcon height={14} width={14} />)
+          .exhaustive()}
+      </IconButton>
+    </Fragment>
   );
 });
 
@@ -36,8 +38,8 @@ addons.setConfig({ theme });
 addons.register('docs-theme', () => {
   addons.add('docs-theme-addon', {
     match: ({ viewMode }) => !!viewMode?.match(/^(story|docs)$/),
-    render: ExampleToolbar,
-    title: 'Addon to change docs story theme',
+    render: Toolbar,
+    title: 'Addon to change docs story theme and language',
     type: types.TOOL
   });
 });

.storybook/preview.ts

@@ -1,11 +1,13 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-vite';
 
 import { i18n } from '../src/i18n';
 import theme from './theme';
 
 import '../src/tailwind/globals.css';
 
-i18n.init();
+i18n.init({
+  translations: {}
+});
 
 const preview: Preview = {
   initialGlobals: {

.storybook/theme.ts

@@ -1,5 +1,5 @@
-import { create } from '@storybook/theming/create';
 import { formatRgb } from 'culori';
+import { create } from 'storybook/theming/create';
 import colors from 'tailwindcss/colors';
 import defaultTheme from 'tailwindcss/defaultTheme';
 

package.json

@@ -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"
     ]
   }