integrate next-intl with storybook

Author: pettinarip

.storybook/main.ts

@@ -29,9 +29,9 @@ const config: StorybookConfig = {
       },
     },
     "@storybook/addon-interactions",
-    "storybook-react-i18next",
     "@storybook/addon-themes",
     "@chromatic-com/storybook",
+    "storybook-next-intl",
   ],
   staticDirs: ["../public"],
   framework: {

.storybook/next-intl.ts

@@ -0,0 +1,66 @@
+export const baseLocales = {
+  en: { title: "English", left: "En" },
+  zh: { title: "中国人", left: "Zh" },
+  ru: { title: "Русский", left: "Ru" },
+  uk: { title: "українська", left: "Uk" },
+  fa: { title: "فارسی", left: "Fa" },
+}
+
+// Only i18n files named in this array are being exposed to Storybook. Add filenames as necessary.
+export const ns = [
+  "common",
+  "glossary",
+  "glossary-tooltip",
+  "learn-quizzes",
+  "page-about",
+  "page-index",
+  "page-learn",
+  "page-upgrades",
+  "page-developers-index",
+  "page-what-is-ethereum",
+  "page-upgrades-index",
+  "page-wallets-find-wallet",
+  "page-developers-docs",
+  "table",
+] as const
+const supportedLngs = Object.keys(baseLocales)
+
+/**
+ * Taking the ns array and generating those files for each language available.
+ */
+const messagesByLocale = ns.reduce((acc, n) => {
+  supportedLngs.forEach((lng) => {
+    if (!acc[lng]) acc[lng] = {}
+
+    try {
+      acc[lng] = {
+        ...acc[lng],
+        [n]: {
+          ...acc[lng][n],
+          ...require(`../src/intl/${lng}/${n}.json`),
+        },
+      }
+    } catch {
+      acc[lng] = {
+        ...acc[lng],
+        [n]: {
+          ...acc[lng][n],
+          ...require(`../src/intl/en/${n}.json`),
+        },
+      }
+    }
+  })
+
+  return acc
+}, {})
+console.log(
+  "🚀 ~ constresources:Resource=ns.reduce ~ resources:",
+  messagesByLocale
+)
+
+const nextIntl = {
+  defaultLocale: "en",
+  messagesByLocale,
+}
+
+export default nextIntl

.storybook/preview.tsx

@@ -5,7 +5,7 @@ import type { Preview } from "@storybook/react"
 import ThemeProvider from "@/components/ThemeProvider"
 import { TooltipProvider } from "@/components/ui/tooltip"
 
-import i18n, { baseLocales } from "./i18next"
+import nextIntl, { baseLocales } from "./next-intl"
 import { withNextThemes } from "./withNextThemes"
 
 import "../src/styles/global.css"
@@ -47,7 +47,7 @@ const preview: Preview = {
     ),
   ],
   parameters: {
-    i18n,
+    nextIntl,
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/utils.ts

@@ -138,7 +138,7 @@
     "prettier-plugin-tailwindcss": "^0.6.5",
     "raw-loader": "^4.0.2",
     "storybook": "8.1.10",
-    "storybook-react-i18next": "3.1.1",
+    "storybook-next-intl": "^1.2.5",
     "tailwindcss": "^3.4.4",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "4.1.0",

package.json

@@ -1,8 +1,7 @@
+import { useTranslations } from "next-intl"
 import { Box } from "@chakra-ui/react"
 import { Meta, type StoryObj } from "@storybook/react"
 
-import { getTranslation } from "@/storybook-utils"
-
 import { Button } from "../ui/buttons/Button"
 
 import CardComponent, { CardProps } from "."
@@ -24,20 +23,17 @@ const DEVELOPS_INDEX_NS = "page-developers-index"
 
 export const Card: StoryObj<typeof meta> = {
   render: (args) => {
+    const t = useTranslations(DEVELOPS_INDEX_NS)
+
     const defaultProps: CardProps = {
       emoji: ":woman_student:",
-      title: getTranslation("page-developers-learn", DEVELOPS_INDEX_NS),
-      description: getTranslation(
-        "page-developers-learn-desc",
-        DEVELOPS_INDEX_NS
-      ),
+      title: t("page-developers-learn"),
+      description: t("page-developers-learn-desc"),
     }
 
     return (
       <CardComponent {...defaultProps} {...args}>
-        <Button>
-          {getTranslation("page-developers-read-docs", DEVELOPS_INDEX_NS)}
-        </Button>
+        <Button>{t("page-developers-read-docs")}</Button>
       </CardComponent>
     )
   },

src/components/Card/Card.stories.tsx

@@ -1,7 +1,6 @@
+import { useTranslations } from "next-intl"
 import { Meta, StoryObj } from "@storybook/react"
 
-import { getTranslation } from "@/storybook-utils"
-
 import { langViewportModes } from "../../../../.storybook/modes"
 
 import ContentHeroComponent, { ContentHeroProps } from "."
@@ -32,10 +31,11 @@ export const ContentHero: StoryObj = {
     },
   },
   render: () => {
-    const PAGE_LEARN_NS = "page-learn"
+    const t = useTranslations("page-learn")
+
     const buttons: ContentHeroProps["buttons"] = [
       {
-        content: getTranslation("hero-button-lets-get-started", PAGE_LEARN_NS),
+        content: t("hero-button-lets-get-started"),
         toId: "what-is-crypto-ethereum",
         matomo: {
           eventCategory: "learn hub hero buttons",
@@ -58,8 +58,8 @@ export const ContentHero: StoryObj = {
         heroImg="/images/upgrades/merge.png"
         // Can not properly hardcode this URL. So it's left blank
         blurDataURL=""
-        title={getTranslation("hero-header", PAGE_LEARN_NS)}
-        description={getTranslation("hero-subtitle", PAGE_LEARN_NS)}
+        title={t("hero-header")}
+        description={t("hero-subtitle")}
         buttons={buttons}
       />
     )

src/components/Hero/ContentHero/ContentHero.stories.tsx

@@ -1,9 +1,8 @@
 import * as React from "react"
+import { useTranslations } from "next-intl"
 import { Box } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import { getTranslation } from "@/storybook-utils"
-
 import { langViewportModes } from "../../../../.storybook/modes"
 
 import HubHeroComponent, { type HubHeroProps } from "./"
@@ -34,9 +33,11 @@ export default meta
 
 export const HubHero: StoryObj = {
   render: () => {
+    const t = useTranslations()
+
     const buttons: HubHeroProps["buttons"] = [
       {
-        content: getTranslation("hero-button-lets-get-started", "page-learn"),
+        content: t("page-learn.hero-button-lets-get-started"),
         toId: "what-is-crypto-ethereum",
         matomo: {
           eventCategory: "learn hub hero buttons",
@@ -56,9 +57,9 @@ export const HubHero: StoryObj = {
 
     return (
       <HubHeroComponent
-        title={getTranslation("learn-hub", "common")}
-        header={getTranslation("hero-header", "page-learn")}
-        description={getTranslation("hero-subtitle", "page-learn")}
+        title={t("common.learn-hub")}
+        header={t("page-learn.hero-header")}
+        description={t("page-learn.hero-subtitle")}
         heroImg={learnHubHeroImg}
         buttons={buttons}
       />

src/components/Hero/HubHero/HubHero.stories.tsx

@@ -1,10 +1,11 @@
+import { useTranslations } from "next-intl"
 import type { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 
 import { QuizButtonGroup } from "../QuizWidget/QuizButtonGroup"
 import { QuizContent } from "../QuizWidget/QuizContent"
 
-import { LAYER_2_QUIZ_TITLE, layer2Questions } from "./utils"
+import { LAYER_2_QUIZ_TITLE_KEY, layer2Questions } from "./utils"
 
 const meta = {
   title: "Molecules / Display Content / Quiz / QuizWidget / ButtonGroup",
@@ -18,19 +19,25 @@ const meta = {
     quizPageProps: false,
     quizScore: 0,
     showResults: false,
-    title: LAYER_2_QUIZ_TITLE,
+    title: LAYER_2_QUIZ_TITLE_KEY,
     userQuizProgress: [],
     handleReset: fn(),
     setCurrentQuestionAnswerChoice: fn(),
     setShowAnswer: fn(),
     setUserQuizProgress: fn(),
   },
   decorators: [
-    (Story, { args }) => (
-      <QuizContent title={LAYER_2_QUIZ_TITLE} answerStatus={args.answerStatus}>
-        <Story />
-      </QuizContent>
-    ),
+    (Story, { args }) => {
+      const t = useTranslations()
+      return (
+        <QuizContent
+          title={t(LAYER_2_QUIZ_TITLE_KEY)}
+          answerStatus={args.answerStatus}
+        >
+          <Story />
+        </QuizContent>
+      )
+    },
   ],
 } satisfies Meta<typeof QuizButtonGroup>
 

src/components/Quiz/stories/QuizButtonGroup.stories.tsx

@@ -1,9 +1,8 @@
+import { useTranslations } from "next-intl"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import allQuizzesData from "@/data/quizzes"
 
-import { getTranslation } from "@/storybook-utils"
-
 import { QuizContent } from "../QuizWidget/QuizContent"
 import { QuizProgressBar } from "../QuizWidget/QuizProgressBar"
 
@@ -16,14 +15,18 @@ const meta = {
     questions: layer2Questions,
   },
   decorators: [
-    (Story, { args }) => (
-      <QuizContent
-        title={getTranslation(allQuizzesData[LAYER_2_QUIZ_KEY].title)}
-        answerStatus={args.answerStatus}
-      >
-        <Story />
-      </QuizContent>
-    ),
+    (Story, { args }) => {
+      const t = useTranslations()
+
+      return (
+        <QuizContent
+          title={t(allQuizzesData[LAYER_2_QUIZ_KEY].title)}
+          answerStatus={args.answerStatus}
+        >
+          <Story />
+        </QuizContent>
+      )
+    },
   ],
 } satisfies Meta<typeof QuizProgressBar>