refactor(.storybook/modes): add langs

Author: TylerAPfledderer

.storybook/modes.ts

@@ -19,6 +19,45 @@ export const viewportModes = {
   },
 }
 
+export const langModes = {
+  en: {
+    locale: "en",
+  },
+  zh: {
+    locale: "zh",
+  },
+  ru: {
+    locale: "ru",
+  },
+  uk: {
+    locale: "uk",
+  },
+}
+
+type LangViewModeObj = {
+  [key: string]: { viewport: string; locale: string }
+}
+
+export const langViewportModes = Object.entries(
+  viewportModes
+).reduce<LangViewModeObj>((arr, curr) => {
+  const [viewKey, viewVal] = curr
+
+  const currLangViewObj = {} as LangViewModeObj
+
+  Object.entries(langModes).forEach(([langKey, langVal]) => {
+    currLangViewObj[`${langKey}-${viewKey}`] = {
+      viewport: viewVal.viewport,
+      locale: langVal.locale,
+    }
+  })
+
+  return {
+    ...arr,
+    ...currLangViewObj,
+  }
+}, {})
+
 export const allModes = {
-  ...viewportModes,
+  ...langViewportModes,
 }

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

@@ -1,7 +1,7 @@
 import { useTranslation } from "next-i18next"
 import { Meta, StoryObj } from "@storybook/react"
 
-import { viewportModes } from "../../../../.storybook/modes"
+import { langViewportModes } from "../../../../.storybook/modes"
 import contentHeroImg from "../../../../public/mainnet.png"
 
 import ContentHeroComponent, { ContentHeroProps } from "."
@@ -15,7 +15,7 @@ const meta = {
     layout: "none",
     chromatic: {
       modes: {
-        ...viewportModes,
+        ...langViewportModes,
       },
     },
   },

src/components/Hero/HomeHero/HomeHero.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import { viewportModes } from "../../../../.storybook/modes"
+import { langViewportModes } from "../../../../.storybook/modes"
 import homeHeroImg from "../../../../public/home/hero.png"
 
 import HomeHeroComponent from "."
@@ -15,7 +15,7 @@ const meta = {
     layout: "none",
     chromatic: {
       modes: {
-        ...viewportModes,
+        ...langViewportModes,
       },
     },
   },

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

@@ -3,7 +3,7 @@ import { useTranslation } from "next-i18next"
 import { Box } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import { viewportModes } from "../../../../.storybook/modes"
+import { langViewportModes } from "../../../../.storybook/modes"
 
 import HubHeroComponent from "./"
 
@@ -16,7 +16,7 @@ const meta = {
     layout: "none",
     chromatic: {
       modes: {
-        ...viewportModes,
+        ...langViewportModes,
       },
     },
   },

src/components/Hero/MdxHero/MdxHero.stories.tsx

@@ -1,7 +1,7 @@
 import { HStack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import { viewportModes } from "../../../../.storybook/modes"
+import { langViewportModes } from "../../../../.storybook/modes"
 
 import MdxHeroComponent from "./"
 
@@ -13,7 +13,7 @@ const meta = {
     layout: "none",
     chromatic: {
       modes: {
-        ...viewportModes,
+        ...langViewportModes,
       },
     },
   },