Move i18n context wrapper to storybook template

packages/shared-components/.storybook/preview.tsx

@@ -6,6 +6,7 @@ import React, { useLayoutEffect } from "react";
 import { setLanguage } from "../src/utils/i18n";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { StoryContext } from "storybook/internal/csf";
+import { I18nApi, I18nContext } from "../src";
 
 export const globalTypes = {
     theme: {
@@ -64,9 +65,11 @@ async function languageLoader(context: StoryContext<ReactRenderer, StrictArgs>):
 
 const withTooltipProvider: Decorator = (Story) => {
     return (
-        <TooltipProvider>
-            <Story />
-        </TooltipProvider>
+        <I18nContext.Provider value={new I18nApi()}>
+            <TooltipProvider>
+                <Story />
+            </TooltipProvider>
+        </I18nContext.Provider>
     );
 };
 

packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.stories.tsx

@@ -11,8 +11,6 @@ import { fn } from "storybook/test";
 import type { Meta, StoryFn } from "@storybook/react-vite";
 import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
 import { useMockedViewModel } from "../../useMockedViewModel";
-import { I18nContext } from "../../utils/i18nContext";
-import { I18nApi } from "../../utils/I18nApi";
 
 type AudioPlayerProps = AudioPlayerViewSnapshot & AudioPlayerViewActions;
 const AudioPlayerViewWrapper = ({ togglePlay, onKeyDown, onSeekbarChange, ...rest }: AudioPlayerProps): JSX.Element => {
@@ -21,11 +19,7 @@ const AudioPlayerViewWrapper = ({ togglePlay, onKeyDown, onSeekbarChange, ...res
         onKeyDown,
         onSeekbarChange,
     });
-    return (
-        <I18nContext.Provider value={new I18nApi()}>
-            <AudioPlayerView vm={vm} />
-        </I18nContext.Provider>
-    );
+    return <AudioPlayerView vm={vm} />;
 };
 
 export default {

packages/shared-components/src/audio/Clock/Clock.stories.tsx

@@ -9,8 +9,6 @@ import React from "react";
 
 import type { Meta, StoryFn } from "@storybook/react-vite";
 import { Clock } from "./Clock";
-import { I18nContext } from "../../utils/i18nContext";
-import { I18nApi } from "../../utils/I18nApi";
 
 export default {
     title: "Audio/Clock",
@@ -21,13 +19,7 @@ export default {
     },
 } as Meta<typeof Clock>;
 
-const Template: StoryFn<typeof Clock> = (args) => {
-    return (
-        <I18nContext.Provider value={new I18nApi()}>
-            <Clock {...args} />
-        </I18nContext.Provider>
-    );
-};
+const Template: StoryFn<typeof Clock> = (args) => <Clock {...args} />;
 
 export const Default = Template.bind({});
 

packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.stories.tsx

@@ -5,13 +5,10 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React from "react";
 import { fn } from "storybook/test";
 
 import { PlayPauseButton } from "./PlayPauseButton";
-import type { Meta, StoryFn } from "@storybook/react-vite";
-import { I18nContext } from "../../utils/i18nContext";
-import { I18nApi } from "../..";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 const meta = {
     title: "Audio/PlayPauseButton",
@@ -23,17 +20,7 @@ const meta = {
 } satisfies Meta<typeof PlayPauseButton>;
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: StoryFn<typeof PlayPauseButton> = (args) => {
-    return (
-        <I18nContext.Provider value={new I18nApi()}>
-            <PlayPauseButton {...args} />
-        </I18nContext.Provider>
-    );
-};
-
-export const Default = Template.bind({});
-export const Playing = Template.bind({});
-Playing.args = {
-    playing: true,
-};
+export const Default: Story = {};
+export const Playing: Story = { args: { playing: true } };

packages/shared-components/src/audio/SeekBar/SeekBar.stories.tsx

@@ -10,7 +10,6 @@ import { useArgs } from "storybook/preview-api";
 
 import { SeekBar } from "./SeekBar";
 import type { Meta, StoryFn } from "@storybook/react-vite";
-import { I18nApi, I18nContext } from "../..";
 
 export default {
     title: "Audio/SeekBar",
@@ -28,11 +27,7 @@ export default {
 
 const Template: StoryFn<typeof SeekBar> = (args) => {
     const [, updateArgs] = useArgs();
-    return (
-        <I18nContext.Provider value={new I18nApi()}>
-            <SeekBar onChange={(evt) => updateArgs({ value: parseInt(evt.target.value, 10) })} {...args} />
-        </I18nContext.Provider>
-    );
+    return <SeekBar onChange={(evt) => updateArgs({ value: parseInt(evt.target.value, 10) })} {...args} />;
 };
 
 export const Default = Template.bind({});

packages/shared-components/src/pill-input/Pill/Pill.stories.tsx

@@ -8,9 +8,8 @@
 import React from "react";
 import { fn } from "storybook/test";
 
-import type { Meta, StoryFn } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Pill } from "./Pill";
-import { I18nApi, I18nContext } from "../..";
 
 const meta = {
     title: "PillInput/Pill",
@@ -24,17 +23,7 @@ const meta = {
 } satisfies Meta<typeof Pill>;
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: StoryFn<typeof Pill> = (args) => {
-    return (
-        <I18nContext.Provider value={new I18nApi()}>
-            <Pill {...args} />
-        </I18nContext.Provider>
-    );
-};
-
-export const Default = Template.bind({});
-export const WithoutCloseButton = Template.bind({});
-WithoutCloseButton.args = {
-    onClick: undefined,
-};
+export const Default: Story = {};
+export const WithoutCloseButton: Story = {};

packages/shared-components/src/rich-list/RichItem/RichItem.stories.tsx

@@ -37,11 +37,9 @@ export default {
 } as Meta<typeof RichItem>;
 
 const Template: StoryFn<typeof RichItem> = (args) => (
-    <I18nContext.Provider value={new I18nApi()}>
-        <ul role="listbox" style={{ all: "unset", listStyle: "none" }}>
-            <RichItem {...args} />
-        </ul>
-    </I18nContext.Provider>
+    <ul role="listbox" style={{ all: "unset", listStyle: "none" }}>
+        <RichItem {...args} />
+    </ul>
 );
 
 export const Default = Template.bind({});
@@ -60,11 +58,9 @@ export const Hover = Template.bind({});
 Hover.parameters = { pseudo: { hover: true } };
 
 const TemplateSeparator: StoryFn<typeof RichItem> = (args) => (
-    <I18nContext.Provider value={new I18nApi()}>
-        <ul role="listbox" style={{ all: "unset", listStyle: "none" }}>
-            <RichItem {...args} />
-            <RichItem {...args} />
-        </ul>
-    </I18nContext.Provider>
+    <ul role="listbox" style={{ all: "unset", listStyle: "none" }}>
+        <RichItem {...args} />
+        <RichItem {...args} />
+    </ul>
 );
 export const Separator = TemplateSeparator.bind({});

packages/shared-components/src/rich-list/RichList/RichList.stories.tsx

@@ -8,9 +8,8 @@
 import React from "react";
 
 import { RichList } from "./RichList";
-import type { Meta, StoryFn } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { RichItem } from "../RichItem";
-import { I18nApi, I18nContext } from "../..";
 
 const avatar = <div style={{ width: 32, height: 32, backgroundColor: "#ccc", borderRadius: "50%" }} />;
 
@@ -40,18 +39,12 @@ const meta = {
 } satisfies Meta<typeof RichList>;
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: StoryFn<typeof RichList> = (args) => {
-    return (
-        <I18nContext.Provider value={new I18nApi()}>
-            <RichList {...args} />
-        </I18nContext.Provider>
-    );
-};
-
-export const Default = Template.bind({});
-export const Empty = Template.bind({});
-Empty.args = {
-    isEmpty: true,
-    children: "No items available",
+export const Default: Story = {};
+export const Empty: Story = {
+    args: {
+        isEmpty: true,
+        children: "No items available",
+    },
 };