Replace storybook-react-i18next with our own globals

Author: sandhose

frontend/.storybook/main.ts

@@ -9,7 +9,7 @@ import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   stories: ["../{src,stories}/**/*.stories.@(js|jsx|ts|tsx)"],
 
-  addons: ["storybook-react-i18next", "@storybook/addon-docs"],
+  addons: ["@storybook/addon-docs"],
 
   framework: "@storybook/react-vite",
 

frontend/.storybook/preview.tsx

@@ -4,15 +4,11 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 // Please see LICENSE files in the repository root for full details.
 
-import type {
-  ArgTypes,
-  Decorator,
-  Parameters,
-  Preview,
-} from "@storybook/react-vite";
+import type { Decorator, Preview } from "@storybook/react-vite";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { initialize, mswLoader } from "msw-storybook-addon";
-import { useLayoutEffect } from "react";
+import { useEffect, useLayoutEffect } from "react";
+import { I18nextProvider } from "react-i18next";
 import "../src/shared.css";
 import i18n, { setupI18n } from "../src/i18n";
 import { DummyRouter } from "../src/test-utils/router";
@@ -31,37 +27,12 @@ initialize(
 
 setupI18n();
 
-export const parameters: Parameters = {
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
-
-export const globalTypes = {
-  theme: {
-    name: "Theme",
-    defaultValue: "system",
-    description: "Global theme for components",
-    toolbar: {
-      icon: "circlehollow",
-      title: "Theme",
-      items: [
-        { title: "System", value: "system", icon: "browser" },
-        { title: "Light", value: "light", icon: "sun" },
-        { title: "Light (high contrast)", value: "light-hc", icon: "sun" },
-        { title: "Dark", value: "dark", icon: "moon" },
-        { title: "Dark (high contrast)", value: "dark-hc", icon: "moon" },
-      ],
-    },
-  },
-} satisfies ArgTypes;
-
-const allThemesClasses = globalTypes.theme.toolbar.items.map(
-  ({ value }) => `cpd-theme-${value}`,
-);
+const allThemesClasses = [
+  "cpd-theme-light",
+  "cpd-theme-light-hc",
+  "cpd-theme-dark",
+  "cpd-theme-dark-hc",
+];
 
 const ThemeSwitcher: React.FC<{
   theme: string;
@@ -86,6 +57,27 @@ const withThemeProvider: Decorator = (Story, context) => {
   );
 };
 
+const LocaleSwitcher: React.FC<{
+  locale: string;
+}> = ({ locale }) => {
+  useEffect(() => {
+    i18n.changeLanguage(locale);
+  }, [locale]);
+
+  return null;
+};
+
+const withI18nProvider: Decorator = (Story, context) => {
+  return (
+    <>
+      <LocaleSwitcher locale={context.globals.locale} />
+      <I18nextProvider i18n={i18n}>
+        <Story />
+      </I18nextProvider>
+    </>
+  );
+};
+
 const withDummyRouter: Decorator = (Story, _context) => {
   return (
     <DummyRouter>
@@ -102,28 +94,58 @@ const withTooltipProvider: Decorator = (Story, _context) => {
   );
 };
 
-export const decorators: Decorator[] = [
-  withThemeProvider,
-  withDummyRouter,
-  withTooltipProvider,
-];
-
-const locales = Object.fromEntries(
-  localazyMetadata.languages.map(({ language, name, localizedName }) => [
-    language,
-    `${localizedName} (${name})`,
-  ]),
-);
-
 const preview: Preview = {
+  loaders: [mswLoader],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: [
+    withI18nProvider,
+    withThemeProvider,
+    withDummyRouter,
+    withTooltipProvider,
+  ],
+  globalTypes: {
+    theme: {
+      name: "Theme",
+      description: "Global theme for components",
+      toolbar: {
+        icon: "circlehollow",
+        title: "Theme",
+        items: [
+          { title: "System", value: "system", icon: "browser" },
+          { title: "Light", value: "light", icon: "sun" },
+          { title: "Light (high contrast)", value: "light-hc", icon: "sun" },
+          { title: "Dark", value: "dark", icon: "moon" },
+          { title: "Dark (high contrast)", value: "dark-hc", icon: "moon" },
+        ],
+      },
+    },
+
+    locale: {
+      name: "Locale",
+      description: "Locale for the app",
+      toolbar: {
+        title: "Language",
+        icon: "globe",
+        items: localazyMetadata.languages.map(
+          ({ language, localizedName, name }) => ({
+            title: `${localizedName} (${name})`,
+            value: language,
+          }),
+        ),
+      },
+    },
+  },
   initialGlobals: {
     locale: localazyMetadata.baseLocale,
-    locales,
-  },
-  parameters: {
-    i18n,
+    theme: "system",
   },
-  loaders: [mswLoader],
   tags: ["autodocs"],
 };
 

frontend/package-lock.json

@@ -73,7 +73,6 @@
     "postcss-nesting": "^13.0.2",
     "rimraf": "^6.0.1",
     "storybook": "^9.1.5",
-    "storybook-react-i18next": "4.0.11",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.9.2",
     "vite": "7.1.7",