Merge pull request #12957 from TylerAPfledderer/feat/bump-storybook-to-v8

feat(storybook): bump to v8

Author: pettinarip

.gitignore

@@ -56,3 +56,7 @@ robots.txt
 
 # Crowdin report output
 src/data/crowdin/bucketsAwaitingReviewReport.csv
+
+# Storybook
+build-storybook.log
+storybook-static

.storybook/main.ts

@@ -22,6 +22,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "storybook-react-i18next",
+    "@chromatic-com/storybook"
   ],
   staticDirs: ["../public"],
   framework: {
@@ -68,6 +69,8 @@ const config: StorybookConfig = {
         return !(isStyledSystemProp || isHTMLElementProp)
       },
     },
+
+    reactDocgen: "react-docgen-typescript"
   },
 }
 export default config

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "projectId": "Project:6629cd26b1440f2cc20b94c0",
+  "zip": true,
+  "buildScriptName": "build-storybook:chromatic"
+}

netlify.toml

@@ -7,7 +7,7 @@
   publish = ".next"
 
   # Default build command.
-  command = "yarn build"
+  command = "yarn add sharp --ignore-engines && yarn build"
 
 [build.environment]
   NEXT_FORCE_EDGE_IMAGES="true"

package.json

@@ -15,6 +15,7 @@
     "crowdin-contributors": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/crowdin/getCrowdinContributors.ts",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "build-storybook:chromatic": "storybook build --test",
     "chromatic": "chromatic --project-token fee8e66c9916",
     "crowdin-clean": "rm -rf .crowdin && mkdir .crowdin",
     "crowdin-import": "ts-node src/scripts/crowdin-import.ts",
@@ -61,34 +62,35 @@
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
+    "@chromatic-com/storybook": "1.5.0",
     "@netlify/plugin-nextjs": "^5.0.0",
-    "@storybook/addon-essentials": "7.6.6",
-    "@storybook/addon-interactions": "7.6.6",
-    "@storybook/addon-links": "7.6.6",
-    "@storybook/nextjs": "7.6.6",
-    "@storybook/react": "7.6.6",
-    "@storybook/test": "8.0.0",
+    "@storybook/addon-essentials": "8.1.10",
+    "@storybook/addon-interactions": "8.1.10",
+    "@storybook/addon-links": "8.1.10",
+    "@storybook/nextjs": "8.1.10",
+    "@storybook/react": "8.1.10",
+    "@storybook/test": "8.1.10",
     "@svgr/webpack": "^8.1.0",
     "@types/decompress": "^4.2.7",
     "@types/hast": "^3.0.0",
     "@types/node": "^20.4.2",
     "@types/react": "18.2.57",
     "@types/react-dom": "18.2.19",
-    "chromatic": "^10.5.0",
+    "chromatic": "10.9.6",
     "decompress": "^4.2.1",
     "eslint": "^8.45.0",
     "eslint-config-next": "^14.2.2",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "0.8.0",
     "image-size": "^1.0.2",
     "mdast-util-toc": "^7.0.0",
     "minimist": "^1.2.8",
     "plaiceholder": "^3.0.0",
     "polished": "^4.2.2",
     "raw-loader": "^4.0.2",
-    "storybook": "7.6.6",
-    "storybook-react-i18next": "^2.0.9",
+    "storybook": "8.1.10",
+    "storybook-react-i18next": "3.1.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "^5.4.2",

src/components/Alert/Alert.stories.tsx

@@ -60,7 +60,7 @@ export const StyleVariants: Story = {
   },
   argTypes: {
     status: {
-      options: STATUSES,
+      options: [...STATUSES],
       control: {
         type: "radio",
       },

src/components/Buttons/ButtonTwoLines/index.tsx

@@ -1,10 +1,8 @@
 import type { IconType } from "react-icons/lib"
 import { Icon, Stack, Text } from "@chakra-ui/react"
 
-import { Button, type ButtonProps } from "@/components/Buttons"
-import ButtonLink, {
-  type ButtonLinkProps,
-} from "@/components/Buttons/ButtonLink"
+import Button, { type ButtonProps } from "../Button"
+import ButtonLink, { type ButtonLinkProps } from "../ButtonLink"
 
 type CommonProps = {
   icon: IconType | typeof Icon

src/components/Modal/Modal.stories.tsx

@@ -5,29 +5,25 @@ import ModalComponent from "."
 const meta = {
   title: "Molecules/Overlay Content/Modal",
   component: ModalComponent,
-} satisfies Meta<typeof ModalComponent>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Modal: Story = {
   args: {
     isOpen: true,
     title: "Modal Title",
     children:
       "This is the base component to be used in the modal window. Please change the text to preview final content for ethereum.org",
     actionButtonLabel: "Save",
+    // Required prop, but not used in the current stories
+    onClose: () => {},
   },
-}
+} satisfies Meta<typeof ModalComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Modal: Story = {}
 
 export const Full: Story = {
   args: {
-    isOpen: true,
-    title: "Modal Title",
-    children:
-      "This is the base component to be used in the modal window. Please change the text to preview final content for ethereum.org",
-    actionButtonLabel: "Save",
     size: "full",
   },
 }