Merge pull request #12668 from TylerAPfledderer/feat/chromatic-story-modes

feat(storybook): build story modes

Author: pettinarip

.storybook/modes.ts

@@ -0,0 +1,48 @@
+import { baseLocales } from "./i18next"
+import { chakraBreakpointArray } from "./preview"
+
+export const viewportModes = chakraBreakpointArray.reduce<{
+  [mode: string]: { viewport: string }
+}>((arr, [token]) => {
+  return {
+    ...arr,
+    [token]: {
+      viewport: token,
+    },
+  }
+}, {})
+
+export const langModes = Object.keys(baseLocales).reduce<{
+  [locale: string]: { locale: string }
+}>((arr, curr) => {
+  return {
+    ...arr,
+    [curr]: {
+      locale: curr,
+    },
+  }
+}, {})
+
+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,
+  }
+}, {})

.storybook/preview.ts

@@ -11,7 +11,7 @@ import { MotionGlobalConfig } from "framer-motion"
 
 MotionGlobalConfig.skipAnimations = isChromatic()
 
-const chakraBreakpointArray = Object.entries(theme.breakpoints) as [
+export const chakraBreakpointArray = Object.entries(theme.breakpoints) as [
   string,
   string
 ][]

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

@@ -1,6 +1,8 @@
 import { useTranslation } from "next-i18next"
 import { Meta, StoryObj } from "@storybook/react"
 
+import { langViewportModes } from "../../../../.storybook/modes"
+
 import ContentHeroComponent, { ContentHeroProps } from "."
 
 type ContentHeroType = typeof ContentHeroComponent
@@ -10,6 +12,11 @@ const meta = {
   component: ContentHeroComponent,
   parameters: {
     layout: "none",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
   },
   argTypes: {
     heroImg: {

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

@@ -1,6 +1,8 @@
 import * as React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 
+import { langViewportModes } from "../../../../.storybook/modes"
+
 import HomeHeroComponent from "."
 
 type HomeHeroType = typeof HomeHeroComponent
@@ -10,6 +12,11 @@ const meta = {
   component: HomeHeroComponent,
   parameters: {
     layout: "none",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
   },
   argTypes: {
     heroImg: {

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

@@ -3,6 +3,8 @@ import { useTranslation } from "next-i18next"
 import { Box } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
+import { langViewportModes } from "../../../../.storybook/modes"
+
 import HubHeroComponent, { type HubHeroProps } from "./"
 
 import learnHubHeroImg from "@/public/heroes/learn-hub-hero.png"
@@ -14,6 +16,11 @@ const meta = {
   component: HubHeroComponent,
   parameters: {
     layout: "none",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
   },
   decorators: [
     (Story) => (

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

@@ -1,6 +1,8 @@
 import { HStack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
+import { langViewportModes } from "../../../../.storybook/modes"
+
 import MdxHeroComponent from "./"
 
 type MdxHeroType = typeof MdxHeroComponent
@@ -9,6 +11,11 @@ const meta = {
   title: "Organisms / Layouts / Hero",
   parameters: {
     layout: "none",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
   },
   decorators: [
     (Story) => (