Update Storybook to the latest version (#645)

kuizuo · web-flow · commit e40a11e8d0db · 2025-10-25T15:26:01.000-07:00
- Bump Storybook and related addons to version 9.1.10.
- Remove deprecated `@storybook/addon-actions` and update imports in story files to use the new action handling.
- Update `@chromatic-com/storybook` to version 4.1.1.
- Clean up Storybook configuration by removing unused addons.
diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts
@@ -17,10 +17,8 @@ const config: StorybookConfig = {
     "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
   addons: [
-    getAbsolutePath("@storybook/addon-onboarding"),
-    getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-themes"),
   ],
   framework: {
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -12,7 +12,6 @@
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@repo/design-system": "workspace:*",
-    "@storybook/addon-actions": "^8.6.14",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "input-otp": "^1.4.2",
@@ -26,22 +25,18 @@
     "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.7",
+    "@chromatic-com/storybook": "^4.1.1",
     "@repo/typescript-config": "workspace:*",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-onboarding": "^8.6.14",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/nextjs": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/test": "^8.6.14",
+    "@storybook/addon-onboarding": "^9.1.10",
+    "@storybook/addon-themes": "^9.1.10",
+    "@storybook/nextjs": "^9.1.10",
+    "@storybook/react": "^9.1.10",
     "@types/node": "^24",
     "@types/react": "19.2.1",
     "@types/react-dom": "19.2.0",
     "chromatic": "^13.3.0",
     "postcss": "^8",
-    "storybook": "^8.6.14",
+    "storybook": "^9.1.10",
     "tailwindcss": "^4.1.14",
     "typescript": "^5"
   }
diff --git a/apps/storybook/stories/calendar.stories.tsx b/apps/storybook/stories/calendar.stories.tsx
@@ -1,5 +1,5 @@
 import { Calendar } from "@repo/design-system/components/ui/calendar";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { addDays } from "date-fns";
 
diff --git a/apps/storybook/stories/form.stories.tsx b/apps/storybook/stories/form.stories.tsx
@@ -8,7 +8,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@repo/design-system/components/ui/form";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
diff --git a/apps/storybook/stories/sonner.stories.tsx b/apps/storybook/stories/sonner.stories.tsx
@@ -1,5 +1,5 @@
 import { Toaster } from "@repo/design-system/components/ui/sonner";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { toast } from "sonner";
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
