refactor: upgrade Storybook 8.6 to 10.3 with webpack

.storybook/main.ts

@@ -14,27 +14,22 @@ const config: StorybookConfig = {
     "../src/layouts/stories/*.stories.tsx",
     "../src/styles/*.stories.tsx",
   ],
+
   addons: [
     "@storybook/addon-links",
-    {
-      name: "@storybook/addon-essentials",
-      options: {
-        backgrounds: false,
-      },
-    },
-    "@storybook/addon-interactions",
     "@storybook/addon-themes",
     "@chromatic-com/storybook",
     "storybook-next-intl",
+    "@storybook/addon-docs",
   ],
+
   staticDirs: ["../public"],
+
   framework: {
     name: "@storybook/nextjs",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+
   webpackFinal: async (config) => {
     config.module = config.module || {}
     config.module.rules = config.module.rules || []
@@ -75,15 +70,18 @@ const config: StorybookConfig = {
 
     return config
   },
+
   typescript: {
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
     },
 
     reactDocgen: "react-docgen-typescript",
   },
+
   features: {
     experimentalRSC: true,
+    backgrounds: false,
   },
 }
 export default config

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from "@storybook/manager-api"
+import { addons } from "storybook/manager-api"
 
 import favicon from "../public/images/eth-home-icon.png"
 

.storybook/next-intl.ts

@@ -29,35 +29,37 @@ const supportedLngs = Object.keys(baseLocales)
 
 /**
  * Taking the ns array and generating those files for each language available.
+ * Uses require() because this file is bundled by webpack for the browser —
+ * webpack resolves require() at build time. Node-only APIs like fs or
+ * import.meta.dirname do not work here.
  */
-const messagesByLocale = ns.reduce((acc, n) => {
-  supportedLngs.forEach((lng) => {
-    if (!acc[lng]) acc[lng] = {}
+const messagesByLocale = 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`),
-        },
+      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`),
+          },
+        }
       }
-    } catch {
-      acc[lng] = {
-        ...acc[lng],
-        [n]: {
-          ...acc[lng][n],
-          ...require(`../src/intl/en/${n}.json`),
-        },
-      }
-    }
-  })
+    })
 
-  return acc
-}, {})
-console.log(
-  "🚀 ~ constresources:Resource=ns.reduce ~ resources:",
-  messagesByLocale
+    return acc
+  },
+  {} as Record<string, Record<string, Record<string, string>>>
 )
 
 const nextIntl = {

.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import isChromatic from "chromatic/isChromatic"
 import { MotionGlobalConfig } from "motion/react"
 import { IBM_Plex_Mono, Inter } from "next/font/google"
-import type { Preview } from "@storybook/react"
+import type { Preview } from "@storybook/nextjs"
 
 import ThemeProvider from "@/components/ThemeProvider"
 import { TooltipProvider } from "@/components/ui/tooltip"
@@ -40,10 +40,6 @@ export const breakpointSet: [token: string, value: string][] = [
 ]
 
 const preview: Preview = {
-  globals: {
-    locale: "en",
-    locales: baseLocales,
-  },
   decorators: [
     withNextThemes({
       themes: {
@@ -81,7 +77,7 @@ const preview: Preview = {
     layout: "centered",
     // Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
     viewport: {
-      viewports: breakpointSet.reduce<{
+      options: breakpointSet.reduce<{
         [token: string]: {
           name: string
           styles: Record<"width" | "height", string>
@@ -100,6 +96,10 @@ const preview: Preview = {
       }, {}),
     },
   },
+  initialGlobals: {
+    locale: "en",
+    locales: baseLocales,
+  },
 }
 
 export default preview

.storybook/theme.ts

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming"
+import { create } from "storybook/theming"
 
 export default create({
   base: "dark",

.storybook/withNextThemes.ts

@@ -4,7 +4,7 @@ import {
   type DataAttributeStrategyConfiguration,
   DecoratorHelpers,
 } from "@storybook/addon-themes"
-import type { Decorator } from "@storybook/react/*"
+import type { Decorator } from "@storybook/nextjs"
 
 const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers
 

docs/applying-storybook.md

@@ -18,7 +18,7 @@ It's as easy as running `pnpm storybook` to boot up a dedicated localhost to see
 
 ## Setting up a component's stories
 
-> 🚨 NOTE: This project uses Storybook v8.6+, using the Component Story Format v3 and the `satisfies` keyword to define the type of the meta object. The following documentation outlines preferences in setup as it relates to this version. You can refer to the [main docs](https://storybook.js.org/docs/get-started) if you need any additional details
+> 🚨 NOTE: This project uses Storybook v10.3+, using the Component Story Format v3 and the `satisfies` keyword to define the type of the meta object. The following documentation outlines preferences in setup as it relates to this version. You can refer to the [main docs](https://storybook.js.org/docs/get-started) if you need any additional details
 
 A Storybook "story" is an instance of a component in a certain state or with certain parameters applied to show an alternative version of the component.
 
@@ -176,7 +176,7 @@ You will currently find the setup of these modes in [the `./storybook/modes.ts`
 When using a mode at either the component level (all stories in a given file) or at the story level, they are supplied under the `chromatic` parameter.
 
 ```tsx
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/nextjs"
 
 import { langViewportModes } from "../../../../.storybook/modes"
 

package.json

@@ -106,20 +106,16 @@
   },
   "devDependencies": {
     "@chromatic-com/playwright": "^0.12.4",
-    "@chromatic-com/storybook": "1.5.0",
+    "@chromatic-com/storybook": "5.1.1",
     "@google/genai": "^1.46.0",
     "@netlify/plugin-nextjs": "^5.15.9",
     "@next/bundle-analyzer": "^16.2.1",
     "@playwright/test": "^1.52.0",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/addon-interactions": "8.6.14",
-    "@storybook/addon-links": "8.6.14",
-    "@storybook/addon-themes": "8.6.14",
-    "@storybook/manager-api": "8.6.14",
-    "@storybook/nextjs": "^8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/test": "8.6.14",
-    "@storybook/theming": "^8.6.14",
+    "@sentry/nextjs": "^10.46.0",
+    "@storybook/addon-docs": "10.3.3",
+    "@storybook/addon-links": "10.3.3",
+    "@storybook/addon-themes": "10.3.3",
+    "@storybook/nextjs": "10.3.3",
     "@svgr/webpack": "^8.1.0",
     "@types/decompress": "^4.2.7",
     "@types/hast": "^3.0.0",
@@ -132,14 +128,14 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "autoprefixer": "^10.4.19",
-    "chromatic": "12.0.0",
+    "chromatic": "16.0.0",
     "decompress": "^4.2.1",
     "dotenv": "^16.5.0",
     "eslint": "^8.57.1",
     "eslint-config-next": "^15.5.12",
     "eslint-config-prettier": "^9",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-storybook": "10.3.3",
     "eslint-plugin-unused-imports": "^3.2.0",
     "franc-min": "^6.2.0",
     "husky": "^9.0.11",
@@ -155,8 +151,8 @@
     "raw-loader": "^4.0.2",
     "rehype-slug": "^6.0.0",
     "remark-heading-id": "^1.0.1",
-    "storybook": "8.6.17",
-    "storybook-next-intl": "^1.2.5",
+    "storybook": "10.3.3",
+    "storybook-next-intl": "10.1.1",
     "tailwindcss": "^3.4.4",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "4.1.0",