Update to .storybook

frontend/.storybook/I18nStoryWrapper.tsx

@@ -0,0 +1,30 @@
+/**
+ * @file Storybook decorator, enabling internationalization for each story.
+ * @see https://storybook.js.org/docs/writing-stories/decorators
+ */
+import { StoryContext } from "@storybook/react";
+
+import { NextIntlClientProvider } from "next-intl";
+import React from "react";
+
+import { defaultLocale, formats, timeZone } from "../src/i18n/config";
+
+const I18nStoryWrapper = (
+  Story: React.ComponentType,
+  context: StoryContext
+) => {
+  const locale = context.globals.locale ?? defaultLocale;
+
+  return (
+    <NextIntlClientProvider
+      formats={formats}
+      timeZone={timeZone}
+      locale={locale}
+      messages={context.loaded.messages}
+    >
+      <Story />
+    </NextIntlClientProvider>
+  );
+};
+
+export default I18nStoryWrapper;

frontend/.storybook/main.js

@@ -27,7 +27,6 @@ const config = {
   stories: ["../stories/**/*.stories.@(mdx|js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-essentials",
-    "storybook-react-i18next",
     "@storybook/addon-designs",
   ],
   framework: {

frontend/.storybook/preview.tsx

@@ -0,0 +1,62 @@
+/**
+ * @file Setup the toolbar, styling, and global context for each Storybook story.
+ * @see https://storybook.js.org/docs/configure#configure-story-rendering
+ */
+import { Loader, Preview } from "@storybook/react";
+
+import "../src/styles/styles.scss";
+
+import { defaultLocale, locales } from "../src/i18n/config";
+import { getMessagesWithFallbacks } from "../src/i18n/getMessagesWithFallbacks";
+import I18nStoryWrapper from "./I18nStoryWrapper";
+
+const parameters = {
+  nextjs: {
+    appDirectory: true,
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  options: {
+    storySort: {
+      method: "alphabetical",
+      order: [
+        "Welcome",
+        "Core",
+        // Storybook infers the title when not explicitly set, but is case-sensitive
+        // so we need to explicitly set both casings here for this to properly sort.
+        "Components",
+        "components",
+        "Templates",
+        "Pages",
+        "pages",
+      ],
+    },
+  },
+};
+
+const i18nMessagesLoader: Loader = async (context) => {
+  const messages = await getMessagesWithFallbacks(context.globals.locale);
+  return { messages };
+};
+
+const preview: Preview = {
+  loaders: [i18nMessagesLoader],
+  decorators: [I18nStoryWrapper],
+  parameters,
+  globalTypes: {
+    locale: {
+      description: "Active language",
+      defaultValue: defaultLocale,
+      toolbar: {
+        icon: "globe",
+        items: locales,
+      },
+    },
+  },
+};
+
+export default preview;