diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index aace77bf40..e83526aa03 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,12 +1,11 @@ -import type { ArgTypes, Preview, Decorator } from "@storybook/react-vite"; -import { addons } from "storybook/preview-api"; +import type { ArgTypes, Preview, Decorator, ReactRenderer, StrictArgs } from "@storybook/react-vite"; import "../res/css/shared.pcss"; import "./preview.css"; import React, { useLayoutEffect } from "react"; -import { FORCE_RE_RENDER } from "storybook/internal/core-events"; import { setLanguage } from "../src/shared-components/utils/i18n"; import { TooltipProvider } from "@vector-im/compound-web"; +import { StoryContext } from "storybook/internal/csf"; export const globalTypes = { theme: { @@ -59,29 +58,9 @@ const withThemeProvider: Decorator = (Story, context) => { ); }; -const LanguageSwitcher: React.FC<{ - language: string; -}> = ({ language }) => { - useLayoutEffect(() => { - const changeLanguage = async (language: string) => { - await setLanguage(language); - // Force the component to re-render to apply the new language - addons.getChannel().emit(FORCE_RE_RENDER); - }; - changeLanguage(language); - }, [language]); - - return null; -}; - -export const withLanguageProvider: Decorator = (Story, context) => { - return ( - <> - - - - ); -}; +async function languageLoader(context: StoryContext): Promise { + await setLanguage(context.globals.language); +} const withTooltipProvider: Decorator = (Story) => { return ( @@ -93,7 +72,7 @@ const withTooltipProvider: Decorator = (Story) => { const preview: Preview = { tags: ["autodocs"], - decorators: [withThemeProvider, withLanguageProvider, withTooltipProvider], + decorators: [withThemeProvider, withTooltipProvider], parameters: { options: { storySort: { @@ -108,6 +87,7 @@ const preview: Preview = { test: "error", }, }, + loaders: [languageLoader], }; export default preview;