Merge pull request #13983 from ethereum/chromatic-setup

Chromatic reduce snapshot tests

Author: corwintines

.storybook/modes.ts

@@ -1,3 +1,5 @@
+import pickBy from "lodash/pickBy"
+
 import { baseLocales } from "./i18next"
 import { breakpointSet } from "./preview"
 
@@ -12,7 +14,9 @@ export const viewportModes = breakpointSet.reduce<{
   }
 }, {})
 
-export const langModes = Object.keys(baseLocales).reduce<{
+const localesToTest = ["en", "fa"]
+const locales = pickBy(baseLocales, (_, key) => localesToTest.includes(key))
+export const langModes = Object.keys(locales).reduce<{
   [locale: string]: { locale: string }
 }>((arr, curr) => {
   return {

src/components/CallToContribute/CallToContribute.stories.tsx

@@ -2,8 +2,6 @@ import { Meta, StoryObj } from "@storybook/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
-import { langViewportModes } from "../../../.storybook/modes"
-
 import CallToContributeComponent from "."
 
 const meta = {
@@ -15,11 +13,6 @@ const meta = {
   },
   parameters: {
     layout: "fullscreen",
-    chromatic: {
-      modes: {
-        ...langViewportModes,
-      },
-    },
   },
   decorators: [
     (Story) => (

src/components/Quiz/stories/QuizSummary.stories.tsx

@@ -1,7 +1,5 @@
-import pickBy from "lodash/pickBy"
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { langViewportModes } from "../../../../.storybook/modes"
 import { QuizContent } from "../QuizWidget/QuizContent"
 import { QuizSummary } from "../QuizWidget/QuizSummary"
 
@@ -10,13 +8,6 @@ import { LAYER_2_QUIZ_TITLE, layer2Questions } from "./utils"
 const meta = {
   title: "Molecules / Display Content / Quiz / QuizWidget / Summary",
   component: QuizSummary,
-  parameters: {
-    chromatic: {
-      modes: pickBy(langViewportModes, (args) =>
-        ["sm", "base"].includes(args.viewport)
-      ),
-    },
-  },
   args: {
     questionsLength: layer2Questions.length,
   },

src/components/Quiz/stories/QuizzesList.stories.tsx

@@ -7,7 +7,6 @@ import { ethereumBasicsQuizzes } from "@/data/quizzes"
 
 import { getTranslation } from "@/storybook-utils"
 
-import { langViewportModes } from "../../../../.storybook/modes"
 import QuizzesListComponent from "../QuizzesList"
 
 /**
@@ -19,13 +18,6 @@ import QuizzesListComponent from "../QuizzesList"
 const meta = {
   title: "Molecules / Display Content / Quiz / QuizzesList",
   component: QuizzesListComponent,
-  parameters: {
-    chromatic: {
-      modes: {
-        ...langViewportModes,
-      },
-    },
-  },
 } satisfies Meta<typeof QuizzesListComponent>
 
 export default meta