chore(deps): update storybook monorepo to v9 (major)

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
     "plugin:import/typescript",
     "plugin:mdx/recommended",
     "prettier",
+    "plugin:storybook/recommended",
   ],
   plugins: ["testing-library", "import", "styled-components-a11y"],
   ignorePatterns: ["**/build/**"],

.storybook/main.ts

@@ -18,9 +18,8 @@ const config: StorybookConfig = {
 
   addons: [
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
     "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-docs",
   ],
 
   webpackFinal: async (config) => {

.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Preview } from "@storybook/react"
+import { Preview } from "@storybook/nextjs"
 import { ThemeProvider } from "../src/components/ThemeProvider/ThemeProvider"
 import { initialize, mswLoader } from "msw-storybook-addon"
 

package.json

@@ -78,29 +78,23 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.0",
+    "@chromatic-com/storybook": "^4.0.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@faker-js/faker": "^9.0.0",
+    "@faker-js/faker": "^9.0.13",
     "@jest/environment": "^30.0.0",
     "@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
     "@mui/material": "^6.1.6",
     "@mui/system": "^6.1.6",
     "@remixicon/react": "^4.2.0",
-    "@storybook/addon-actions": "^8.6.7",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-interactions": "^8.6.7",
-    "@storybook/addon-links": "^8.6.7",
-    "@storybook/addon-onboarding": "^8.6.7",
+    "@storybook/addon-docs": "^9.0.13",
+    "@storybook/addon-links": "^9.0.13",
+    "@storybook/addon-onboarding": "^9.0.13",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/blocks": "^8.6.7",
-    "@storybook/nextjs": "^8.6.7",
-    "@storybook/preview-api": "^8.6.7",
-    "@storybook/react": "^8.6.7",
-    "@storybook/react-webpack5": "^8.6.7",
-    "@storybook/test": "^8.6.7",
-    "@storybook/types": "^8.6.7",
+    "@storybook/nextjs": "^9.0.13",
+    "@storybook/react-webpack5": "^9.0.13",
     "@swc/jest": "^0.2.37",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "14.6.1",
@@ -119,6 +113,7 @@
     "eslint-plugin-mdx": "^3.0.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-storybook": "9.0.13",
     "eslint-plugin-styled-components-a11y": "^2.1.35",
     "eslint-plugin-testing-library": "^7.0.0",
     "jest": "^30.0.0",
@@ -128,13 +123,13 @@
     "jest-fixed-jsdom": "^0.0.9",
     "jest-watch-typeahead": "^3.0.0",
     "msw": "^2.7.0",
-    "msw-storybook-addon": "^2.0.4",
+    "msw-storybook-addon": "^2.0.5",
     "next": "^15.0.2",
     "prettier": "^3.3.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "semantic-release": "^24.2.0",
-    "storybook": "^8.6.7",
+    "storybook": "^9.0.13",
     "ts-node": "^10.9.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "type-fest": "^4.26.1",

src/Installation.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks"
+import { Meta } from "@storybook/addon-docs/blocks"
 
 <Meta title="Smoot-Design/Installation/Installation" />
 

src/bundles/AiDrawer/AiDrawer.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Controls, Stories } from "@storybook/blocks"
+import { Meta, Title, Controls, Stories } from "@storybook/addon-docs/blocks"
 import * as AiDrawer from "./AiDrawer.stories"
 
 <Meta of={AiDrawer} />

src/bundles/AiDrawer/AiDrawer.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { http, HttpResponse } from "msw"
 import { handlers } from "../../components/AiChat/test-utils/api"
 import { AiDrawer, AiDrawerSettings } from "./AiDrawer"

src/bundles/AiDrawer/AiDrawerManager.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Controls, Stories } from "@storybook/blocks"
+import { Meta, Title, Controls, Stories } from "@storybook/addon-docs/blocks"
 
 import * as AiDrawerManager from "./AiDrawerManager.stories"
 import { gitLink } from "../../story-utils"

src/bundles/AiDrawer/AiDrawerManager.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import invariant from "tiny-invariant"
 import { http, HttpResponse } from "msw"
 import { handlers } from "../../components/AiChat/test-utils/api"

src/components/AiChat/AiChat.mdx

@@ -1,4 +1,10 @@
-import { Meta, Title, Primary, Controls, Stories } from "@storybook/blocks"
+import {
+  Meta,
+  Title,
+  Primary,
+  Controls,
+  Stories,
+} from "@storybook/addon-docs/blocks"
 
 import * as AiChat from "./AiChat.stories"
 import { gitLink } from "../../story-utils"

src/components/AiChat/AiChat.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { AiChat } from "./AiChat"
 import type { AiChatProps } from "./types"
 import styled from "@emotion/styled"

src/components/AiChat/AiChatContext.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { AiChatDisplay } from "./AiChat"
 import { AiChatProvider, useAiChat } from "./AiChatContext"
 import type { AiChatProps } from "./types"

src/components/AiChat/AiChatMarkdown.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { AiChat } from "./AiChat"
 import styled from "@emotion/styled"
 import { handlers } from "./test-utils/api"

src/components/Alert/Alert.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { Alert } from "./Alert"
 import Stack from "@mui/material/Stack"
 

src/components/Button/ActionButton.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { ActionButton, ActionButtonLink, DEFAULT_PROPS } from "./ActionButton"
 import type { ActionButtonProps } from "./ActionButton"
 import Grid from "@mui/material/Grid2"
@@ -10,7 +10,7 @@ import {
   RiTestTubeLine,
 } from "@remixicon/react"
 
-import { fn } from "@storybook/test"
+import { fn } from "storybook/test"
 import { enumValues } from "../../story-utils"
 
 const ICONS = {

src/components/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { Button, ButtonLink, ButtonLoadingIcon } from "./Button"
 import type { ButtonProps } from "./Button"
 import Grid from "@mui/material/Grid2"
@@ -11,7 +11,7 @@ import {
   RiMailLine,
 } from "@remixicon/react"
 
-import { fn } from "@storybook/test"
+import { fn } from "storybook/test"
 import { enumValues } from "../../story-utils"
 
 const ICONS = {

src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { useState, ChangeEvent } from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { Checkbox } from "./Checkbox"
 import type { CheckboxProps } from "./Checkbox"
 

src/components/CheckboxChoiceField/CheckboxChoiceField.stories.tsx

@@ -1,11 +1,11 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import {
   CheckboxChoiceField,
   CheckboxChoiceFieldProps,
 } from "./CheckboxChoiceField"
 import Typography from "@mui/material/Typography"
-import { fn } from "@storybook/test"
+import { fn } from "storybook/test"
 
 const CHOICES: CheckboxChoiceFieldProps["choices"] = [
   { label: "Choice 1", value: "1" },

src/components/Input/Input.stories.tsx

@@ -1,11 +1,11 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { Input, AdornmentButton } from "./Input"
 import type { InputProps } from "./Input"
 import Stack from "@mui/material/Stack"
 import Grid from "@mui/material/Grid2"
 import { RiCalendarLine, RiCloseLine, RiSearchLine } from "@remixicon/react"
-import { fn } from "@storybook/test"
+import { fn } from "storybook/test"
 import { enumValues } from "../../story-utils"
 import Typography from "@mui/material/Typography"
 

src/components/RadioChoiceField/BooleanRadioChoiceField.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import {
   BooleanRadioChoiceField,
   BooleanRadioChoiceFieldProps,

src/components/RadioChoiceField/RadioChoiceField.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
-import { useArgs } from "@storybook/preview-api"
+import type { Meta, StoryObj } from "@storybook/nextjs"
+import { useArgs } from "storybook/preview-api"
 import { RadioChoiceField } from "./RadioChoiceField"
 
 const meta: Meta<typeof RadioChoiceField> = {

src/components/ScrollSnap/ScrollSnap.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { ScrollSnap } from "./ScrollSnap"
 import styled from "@emotion/styled"
 import { faker } from "@faker-js/faker/locale/en"

src/components/SrAnnouncer/SrAnnouncer.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { SrAnnouncer } from "./SrAnnouncer"
 import styled from "@emotion/styled"
 

src/components/TabButtons/TabButtonList.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import * as React from "react"
 import { useState } from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { TabButtonList, TabButton, TabButtonLink } from "./TabButtonList"
 import type { TabButtonListProps } from "./TabButtonList"
 import TabContext from "@mui/lab/TabContext"

src/components/TextField/TextField.stories.tsx

@@ -1,12 +1,12 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { TextField } from "./TextField"
 import type { TextFieldProps } from "./TextField"
 import { AdornmentButton } from "../Input/Input"
 import Stack from "@mui/material/Stack"
 import Grid from "@mui/material/Grid"
 import { RiSearchLine, RiCalendarLine, RiCloseLine } from "@remixicon/react"
-import { fn } from "@storybook/test"
+import { fn } from "storybook/test"
 import { enumValues } from "../../story-utils"
 
 const SIZES = enumValues<NonNullable<TextFieldProps["size"]>>({

src/components/ThemeProvider/ThemeProvider.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { ThemeProvider, createTheme } from "./ThemeProvider"
 import { ButtonLink } from "../Button/Button"
 

src/components/ThemeProvider/Typography.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import Stack from "@mui/material/Stack"
 import Typography from "@mui/material/Typography"
 import type { TypographyProps } from "@mui/material/Typography"

src/components/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 import { VisuallyHidden } from "./VisuallyHidden"
 
 const meta: Meta<typeof VisuallyHidden> = {

src/type-augmentation/TypescriptDocs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks"
+import { Meta } from "@storybook/addon-docs/blocks"
 
 <Meta title="Smoot-Design/Installation/Typescript" />