Skip to content

Update Storybook to v10 with Vite builder #74396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aduth merged 17 commits into from
Jan 14, 2026
Merged

Update Storybook to v10 with Vite builder #74396

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
327907f
Update Storybook to v10 with Vite builder
aduth Jan 6, 2026
83e20e4
Update TypeScript base config to use bundler module resolution
aduth Jan 6, 2026
dfd3dda
Update storybook to v10: Misc updates (#74491)
manzoorwanijk Jan 9, 2026
5daea02
Avoid variable shadowing by type-checking as satisfies
aduth Jan 9, 2026
a5e11e7
Align types export on jest-console package
aduth Jan 12, 2026
1aadb05
Update E2E Storybook configuration for v10
aduth Jan 12, 2026
889923d
Fix file extension on README Storybook configuration file reference
aduth Jan 12, 2026
91af813
Use `?inline` instead of `?raw` for importing compiled Sass
aduth Jan 12, 2026
fceabed
Try renaming JavaScript Story to TypeScript
aduth Jan 12, 2026
493ed70
Pin user-event to 14.4.3
aduth Jan 13, 2026
37224b2
Sync Storybook dependencies at common version
aduth Jan 13, 2026
59ccc2f
Update reference to storybook/react-webpack5 dependency
aduth Jan 13, 2026
1c302f5
Merge branch 'trunk' into update/storybook-10
manzoorwanijk Jan 14, 2026
43ea7db
Fix Storybook build by updating README import in introduction files
manzoorwanijk Jan 14, 2026
045c21b
Remove moduleResolution from sync tsconfig
manzoorwanijk Jan 14, 2026
25b1afb
Add missing dependency array to useEffect
manzoorwanijk Jan 14, 2026
e29e64f
Remove unnecessary .lazy suffix from scss files
manzoorwanijk Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/storybook-check.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ jobs:

- name: Install test-runner and Playwright dependencies
run: |
npm install --no-save @storybook/test-runner@0.22.1
npm install --no-save @storybook/test-runner@0.24.2
npx playwright install --with-deps

- name: Serve Storybook and run tests
Expand Down
1 change: 0 additions & 1 deletion bin/check-licenses.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { checkDeps, getLicenses } from '../packages/scripts/utils/license.js';

const ignored = [
'@ampproject/remapping',
'webpack',
// Jest internals with Apache-2.0 license - only used for testing, not distributed.
'bser',
'fb-watchman',
Expand Down
3,411 changes: 1,430 additions & 1,981 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,10 @@
"@octokit/rest": "16.26.0",
"@playwright/test": "1.57.0",
"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
"@storybook/addon-a11y": "9.1.17",
"@storybook/addon-docs": "^9.1.17",
"@storybook/addon-webpack5-compiler-babel": "3.0.3",
"@storybook/icons": "1.4.0",
"@storybook/react-webpack5": "9.1.17",
"@storybook/addon-a11y": "10.1.11",
"@storybook/addon-docs": "10.1.11",
"@storybook/icons": "2.0.1",
"@storybook/react-vite": "10.1.11",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "14.3.0",
"@testing-library/user-event": "14.4.3",
Expand All @@ -61,6 +60,7 @@
"@types/semver": "7.3.8",
"@types/sprintf-js": "1.1.2",
"@types/uuid": "8.3.1",
"@vitejs/plugin-react": "5.1.2",
"@wordpress/build": "file:./packages/wp-build",
"ajv": "8.17.1",
"babel-jest": "29.7.0",
Expand Down Expand Up @@ -121,15 +121,15 @@
"simple-git": "3.24.0",
"snapshot-diff": "0.10.0",
"sprintf-js": "1.1.1",
"storybook": "^9.1.17",
"storybook-addon-source-link": "1.0.1",
"storybook-addon-tag-badges": "2.0.4",
"storybook": "^10.1.11",
"storybook-addon-source-link": "2.0.1",
"storybook-addon-tag-badges": "3.0.4",
"style-loader": "3.2.1",
"stylelint-plugin-logical-css": "^1.2.3",
"typescript": "5.9.3",
"uuid": "9.0.1",
"wait-on": "8.0.1",
"webpack": "5.97.0"
Comment thread
manzoorwanijk marked this conversation as resolved.
"vite": "7.3.0",
"wait-on": "8.0.1"
},
"overrides": {
"jsdom": "26.1.0"
Expand Down
0 ...ponents/block-icon/stories/index.story.js → ...ponents/block-icon/stories/index.story.ts
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-patterns-list/stories/index.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { fn } from 'storybook/test';
import BlockPatternsList from '../';
import { ExperimentalBlockEditorProvider } from '../../provider';
import patterns from './fixtures';
import blockLibraryStyles from '!!raw-loader!../../../../../block-library/build-style/style.css';
import blockLibraryStyles from '../../../../../block-library/build-style/style.css?raw';

const blockEditorSettings = {
styles: [ { css: blockLibraryStyles } ],
Expand Down
0 ...s/contrast-checker/stories/index.story.js → ...s/contrast-checker/stories/index.story.ts
View file
Open in desktop
File renamed without changes.
4 changes: 2 additions & 2 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,13 +101,13 @@
},
"devDependencies": {
"@ariakit/test": "^0.4.7",
"@storybook/addon-docs": "^9.1.17",
"@storybook/addon-docs": "^10.1.11",
"@testing-library/jest-dom": "^6.6.3",
"@types/jest": "^29.5.14",
"@wordpress/jest-console": "file:../jest-console",
"csstype": "^3.2.3",
"snapshot-diff": "^0.10.0",
"storybook": "^9.1.17",
"storybook": "^10.1.11",
"timezone-mock": "^1.3.6"
},
"peerDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/alignment-matrix-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
import { fn } from 'storybook/test';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/angle-picker-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
import { fn } from 'storybook/test';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/animate/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/badge/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import type { Meta, StoryObj } from '@storybook/react-vite';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/base-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/border-box-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
import type { ComponentProps } from 'react';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/border-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
import type { ComponentProps } from 'react';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/box-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
import { fn } from 'storybook/test';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/button-group/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import type { Meta, StoryObj } from '@storybook/react-vite';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/button/stories/e2e/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { StoryFn, Meta } from '@storybook/react-webpack5';
import type { StoryFn, Meta } from '@storybook/react-vite';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/button/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
import type { ReactNode } from 'react';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/calendar/stories/date-calendar.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
ar,
sv,
} from 'date-fns/locale';
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import type { Meta, StoryObj } from '@storybook/react-vite';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/calendar/stories/date-range-calendar.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
ar,
sv,
} from 'date-fns/locale';
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import type { Meta, StoryObj } from '@storybook/react-vite';
/**
* WordPress dependencies
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import type { Meta, StoryObj } from '@storybook/react-vite';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/checkbox-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/circular-option-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
/**
* WordPress dependencies
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/color-indicator/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/color-palette/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/color-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/combobox-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
import { fn } from 'storybook/test';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/composite/legacy/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/composite/legacy/stories/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { StoryContext } from '@storybook/react';
import type { StoryContext } from '@storybook/react-vite';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/composite/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import type { Meta, StoryObj } from '@storybook/react-vite';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/confirm-dialog/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
import { fn } from 'storybook/test';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/custom-gradient-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
import { fn } from 'storybook/test';
/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/custom-select-control-v2/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
import { fn } from 'storybook/test';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/custom-select-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
import { fn } from 'storybook/test';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/date-time/stories/date-time.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/date-time/stories/date.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/date-time/stories/time.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/disabled/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/divider/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/draggable/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';
import type { DragEvent } from 'react';
import { fn } from 'storybook/test';

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/drop-zone/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryFn } from '@storybook/react-webpack5';
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
* WordPress dependencies
Expand Down
Loading
Loading