Update internal storybook deps (#3712)

Author: chaance

apps/storybook/.storybook/main.ts

@@ -6,13 +6,7 @@ const config: StorybookConfig = {
     '../stories/**/*.mdx',
     '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
-  addons: [
-    //
-    '@storybook/addon-essentials',
-    '@storybook/addon-storysource',
-    '@storybook/addon-webpack5-compiler-swc',
-    // '@chromatic-com/storybook',
-  ],
+  addons: ['@storybook/addon-webpack5-compiler-swc', '@storybook/addon-docs'],
   framework: {
     name: '@storybook/react-webpack5',
     options: {

apps/storybook/.storybook/manager.ts

@@ -1,5 +1,5 @@
-import { addons } from '@storybook/manager-api';
-import { themes } from '@storybook/theming';
+import { addons } from 'storybook/manager-api';
+import { themes } from 'storybook/theming';
 
 addons.setConfig({
   enableShortcuts: false,

apps/storybook/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-webpack5';
 import './preview.css';
 
 const preview: Preview = {
@@ -11,6 +11,9 @@ const preview: Preview = {
     },
     // disables Chromatic on a global level
     chromatic: { disable: true },
+    docs: {
+      codePanel: true,
+    },
   },
 };
 

apps/storybook/eslint.config.js

@@ -1,4 +1,6 @@
 // @ts-check
+import storybook from 'eslint-plugin-storybook';
 import { configs } from '@repo/eslint-config/vite';
 
-export default configs;
+/** @type {import("eslint").Linter.Config[]} */
+export default [...configs, ...storybook.configs['flat/recommended']];

apps/storybook/package.json

@@ -19,26 +19,20 @@
     "react-remove-scroll": "^2.6.3"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
+    "@chromatic-com/storybook": "^4.1.1",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-storysource": "^8.6.12",
-    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/experimental-addon-test": "^8.6.12",
-    "@storybook/preview-api": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-webpack5": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
+    "@storybook/react-webpack5": "^9.1.15",
     "@types/form-serialize": "^0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "eslint": "^9.18.0",
-    "storybook": "^8.6.12",
-    "typescript": "^5.9.3"
+    "storybook": "^9.1.15",
+    "typescript": "^5.9.3",
+    "eslint-plugin-storybook": "^9.1.15",
+    "@storybook/addon-docs": "^9.1.15",
+    "@storybook/addon-vitest": "^9.1.15"
   },
   "eslintConfig": {
     "extends": [

apps/storybook/stories/one-time-password-field.stories.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { unstable_OneTimePasswordField as OneTimePasswordField, Separator } from 'radix-ui';
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import dialogStyles from './dialog.stories.module.css';
-import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, expect } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, expect } from 'storybook/test';
 import styles from './one-time-password-field.stories.module.css';
 
 export default {

apps/storybook/stories/password-toggle-field.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/react-webpack5';
+import { useArgs } from 'storybook/preview-api';
 import { unstable_PasswordToggleField as PasswordToggleField } from 'radix-ui';
 import styles from './password-toggle-field.stories.module.css';