feat(storybook): setup i18next

Author: TylerAPfledderer

.storybook/i18next.ts

@@ -0,0 +1,61 @@
+import i18n, { Resource } from "i18next"
+import { initReactI18next } from "react-i18next"
+
+export const baseLocales = {
+  en: { title: "English", left: "En" },
+  zh: { title: "中国人", left: "Zh" },
+  ru: { title: "Русский", left: "Ru" },
+  uk: { title: "українська", left: "Uk" },
+}
+
+// Only i18n files named in this array are being exposed to Storybook. Add filenames as necessary.
+const ns = [
+  "common",
+  "glossary",
+  "page-about",
+  "page-index",
+  "page-learn",
+  "page-upgrades",
+  "page-developers-index",
+]
+const supportedLngs = Object.keys(baseLocales)
+
+/**
+ * Taking the ns array and generating those files for each language available.
+ */
+const resources: Resource = 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
+}, {})
+
+i18n.use(initReactI18next).init({
+  debug: true,
+  fallbackLng: "en",
+  interpolation: { escapeValue: false },
+  react: { useSuspense: false },
+  supportedLngs,
+  resources,
+})
+
+export default i18n

.storybook/main.ts

@@ -28,6 +28,7 @@ const config: StorybookConfig = {
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
     "@chakra-ui/storybook-addon",
+    "storybook-react-i18next"
   ],
   staticDirs: ["../public"],
   framework: {

.storybook/preview.ts

@@ -1,14 +1,21 @@
+import { extendBaseTheme } from "@chakra-ui/react"
 import type { Preview } from "@storybook/react"
 
 import theme from "../src/@chakra-ui/theme"
-import { extendBaseTheme } from "@chakra-ui/react"
+
+import i18n, { baseLocales } from "./i18next"
 
 const extendedTheme = extendBaseTheme(theme)
 
 const chakraBreakpointArray = Object.entries(extendedTheme.breakpoints)
 
 const preview: Preview = {
+  globals: {
+    locale: 'en',
+    locales: baseLocales,
+  },
   parameters: {
+    i18n,
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {

package.json

@@ -61,13 +61,14 @@
     "eslint": "^8.45.0",
     "eslint-config-next": "^14.0.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "image-size": "^1.0.2",
     "mdast-util-toc": "^7.0.0",
     "minimist": "^1.2.8",
     "polished": "^4.2.2",
     "storybook": "7.5.3",
+    "storybook-react-i18next": "^2.0.9",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",
     "unified": "^10.0.0",

src/components/Buttons/Button.stories.tsx

@@ -129,7 +129,7 @@ export const OverrideStyles: Story = {
       </Text>
       <VStack>
         <IconButton aria-label="toggle" icon={<MdNightlight />} px="1.5" />
-        <ButtonLink to="#" borderRadius="full" px="0" py="0">
+        <ButtonLink href="#" borderRadius="full" px="0" py="0">
           <Translation id="get-involved" />
         </ButtonLink>
       </VStack>

yarn.lock

@@ -12150,6 +12150,18 @@ store2@^2.14.2:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068"
   integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==
 
+[email protected]:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/storybook-i18n/-/storybook-i18n-2.0.13.tgz#e2172c9db06bd58a02a561edc508b19a989790bd"
+  integrity sha512-p0VPL5QiHdeS3W9BvV7UnuTKw7Mj1HWLW67LK0EOoh5fpSQIchu7byfrUUe1RbCF1gT0gOOhdNuTSXMoVVoTDw==
+
+storybook-react-i18next@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/storybook-react-i18next/-/storybook-react-i18next-2.0.9.tgz#df4fc186d41c81d6b580203e82898f6493276db7"
+  integrity sha512-GFTOrYwOWShLqWNuTesPNhC79P3OHw1jkZ4gU3R50yTD2MUclF5DHLnuKeVfKZ323iV+I9fxLxuLIVHWVDJgXA==
+  dependencies:
+    storybook-i18n "2.0.13"
+
 [email protected]:
   version "7.5.3"
   resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.5.3.tgz#0003b072736b8b15c3b7205e9775d0c5ec898b4d"