Replace webpack with Vite for storybook (#3713)

Author: chaance

apps/storybook/.storybook/main.ts

@@ -1,33 +1,19 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: [
     //
     '../stories/**/*.mdx',
     '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
-  addons: ['@storybook/addon-webpack5-compiler-swc', '@storybook/addon-docs'],
+  addons: ['@storybook/addon-docs'],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: '@storybook/react-vite',
     options: {
       builder: {},
       // enable React strict mode
       strictMode: true,
     },
   },
-
-  swc: (config: any) => ({
-    ...config,
-    jsc: {
-      ...config?.jsc,
-      transform: {
-        ...config?.jsc?.transform,
-        react: {
-          // Do not require importing React into scope to use JSX
-          runtime: 'automatic',
-        },
-      },
-    },
-  }),
 };
 export default config;

apps/storybook/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react-webpack5';
+import type { Preview } from '@storybook/react-vite';
 import './preview.css';
 
 const preview: Preview = {

apps/storybook/package.json

@@ -7,6 +7,7 @@
     "lint": "eslint --max-warnings 0 .",
     "dev": "storybook dev -p 6006",
     "build": "storybook build",
+    "serve": "serve storybook-static -l 6006",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -22,16 +23,18 @@
     "@chromatic-com/storybook": "^4.1.1",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
-    "@storybook/react-webpack5": "^9.1.15",
+    "@storybook/addon-docs": "^9.1.15",
+    "@storybook/addon-vitest": "^9.1.15",
+    "@storybook/react-vite": "^9.1.15",
     "@types/form-serialize": "^0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "eslint": "^9.38.0",
+    "serve": "^14.2.5",
     "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"
+    "vite": "^6.2.0",
+    "vitest": "^3.1.1"
   }
 }

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

@@ -2,7 +2,7 @@ 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-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { userEvent, within, expect } from 'storybook/test';
 import styles from './one-time-password-field.stories.module.css';
 

apps/storybook/stories/password-toggle-field.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useArgs } from 'storybook/preview-api';
 import { unstable_PasswordToggleField as PasswordToggleField } from 'radix-ui';
 import styles from './password-toggle-field.stories.module.css';

cypress.config.ts

@@ -4,6 +4,7 @@ export default defineConfig({
   viewportWidth: 1024,
   viewportHeight: 768,
   fixturesFolder: false,
+  defaultCommandTimeout: 20_000,
   e2e: {
     // TODO There is a bug (I think) in Cypress that results in the page
     // navigating to `about:blank` after certain tests run. Unclear why at this

cypress/support/commands.js

@@ -1,3 +1,7 @@
+// @ts-check
+/// <reference types="cypress" />
+/// <reference types="./index.d.ts" />
+
 // ***********************************************
 // This example commands.js shows you how to
 // create various custom commands and overwrite
@@ -24,6 +28,10 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
+Cypress.Commands.add('visitStorybook', (options) => {
+  return cy.visit('iframe.html', options);
+});
+
 Cypress.Commands.add('visitStory', (storyName, options) => {
   return cy.visit(`iframe.html?id=components-${storyName}`, options);
 });

cypress/support/index.d.ts

@@ -1,6 +1,10 @@
 declare namespace Cypress {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Chainable<Subject> {
-    visitStory(storyName: string, options?: Partial<Cypress.VisitOptions>): Chainable<any>;
+    visitStorybook(options?: Partial<Cypress.VisitOptions>): Cypress.Chainable<Cypress.AUTWindow>;
+    visitStory(
+      storyName: string,
+      options?: Partial<Cypress.VisitOptions>
+    ): Cypress.Chainable<Cypress.AUTWindow>;
   }
 }

package.json

@@ -10,6 +10,8 @@
     "test": "vitest",
     "test:ci": "vitest run && pnpm cypress:ci",
     "storybook": "BROWSER=none pnpm --filter=@repo/storybook run dev -p 9009",
+    "storybook:build": "BROWSER=none pnpm --filter=@repo/storybook run build",
+    "storybook:serve": "pnpm --filter=@repo/storybook run serve",
     "cypress:ci": "start-server-and-test 'pnpm dev' http://localhost:9009 'pnpm cypress:install && pnpm cypress:run'",
     "cypress:install": "cypress install",
     "cypress:run": "cypress run",
@@ -61,7 +63,7 @@
     "react-dom": "^19.2.0",
     "react-test-renderer": "^19.0.0",
     "replace-in-files": "^3.0.0",
-    "start-server-and-test": "2.0.3",
+    "start-server-and-test": "^2.1.2",
     "tsup": "^8.3.6",
     "typescript": "^5.9.3",
     "vite": "^6.2.0",