Skip to content

Update storybook to v10: Misc updates #74491

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 5 commits into from
Jan 9, 2026
Merged

Update storybook to v10: Misc updates #74491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ad6a57b
Use preset for addon
manzoorwanijk Jan 9, 2026
d6ef762
Convert main.mjs to main.ts
manzoorwanijk Jan 9, 2026
420d60a
Disable default links for v10
manzoorwanijk Jan 9, 2026
5c98882
Update Storybook test-runner to v0.24.2
manzoorwanijk Jan 9, 2026
43a9a91
Remove webpack from ignored licenses list
manzoorwanijk Jan 9, 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
2 changes: 1 addition & 1 deletion bin/check-licenses.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import spawn from 'cross-spawn';
*/
import { checkDeps, getLicenses } from '../packages/scripts/utils/license.js';

const ignored = [ '@ampproject/remapping', 'webpack' ];
const ignored = [ '@ampproject/remapping' ];

/*
* `wp-scripts check-licenses` uses prod and dev dependencies of the package to scan for dependencies. With npm workspaces, workspace packages (the @wordpress/* packages) are not listed in the main package json and this approach does not work.
Expand Down
5 changes: 5 additions & 0 deletions storybook/addons/design-system-theme/preset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { fileURLToPath } from 'node:url';

export const managerEntries = [
fileURLToPath( import.meta.resolve( './manager.ts' ) ),
];
23 changes: 10 additions & 13 deletions storybook/main.mjs → storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import path from 'node:path';
import { mergeConfig, transformWithEsbuild } from 'vite';
import react from '@vitejs/plugin-react';
import type { StorybookConfig } from '@storybook/react-vite';

const stories = [
process.env.NODE_ENV !== 'test' && './stories/**/*.story.@(jsx|tsx)',
process.env.NODE_ENV !== 'test' && './stories/**/*.mdx',
process.env.NODE_ENV !== 'test' ? './stories/**/*.story.@(jsx|tsx)' : '',
process.env.NODE_ENV !== 'test' ? './stories/**/*.mdx' : '',
'../packages/block-editor/src/**/stories/*.story.@(js|jsx|tsx|mdx)',
'../packages/components/src/**/stories/*.story.@(jsx|tsx)',
'../packages/components/src/**/stories/*.mdx',
Expand All @@ -18,7 +18,7 @@ const stories = [
'../packages/ui/src/**/stories/*.mdx',
].filter( Boolean );

export default {
const config: StorybookConfig = {
core: {
disableTelemetry: true,
},
Expand All @@ -32,12 +32,7 @@ export default {
'@storybook/addon-a11y',
'storybook-addon-source-link',
'storybook-addon-tag-badges',
],
managerEntries: [
path.join(
import.meta.dirname,
'./addons/design-system-theme/manager.ts'
),
import.meta.resolve( './addons/design-system-theme/preset.ts' ),
],
framework: '@storybook/react-vite',
docs: {},
Expand All @@ -62,8 +57,8 @@ export default {
savePropValueAsString: true,
},
},
viteFinal: async ( config ) => {
return mergeConfig( config, {
viteFinal: async ( _config ) => {
return mergeConfig( _config, {
Comment on lines +60 to +61

@aduth aduth Jan 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could name this with a qualifier that describes what it is as distinct from the variable it's shadowing, like viteConfig. Underscores have some significant meaning as well, like TypeScript allowing unused variables if they start with an underscore.

Although what I might suggest instead is not assigning config and we could do something like...

export default {
  // ...
} satisfies StorybookConfig;

We'd still get autocompletion and type safety (with satisfies still being strict about type conformance more than as would be).

(I'll make these changes on the base branch after merging and we can continue the discussion there if you have further thoughts)

plugins: [
react( {
jsxImportSource: '@emotion/react',
Expand All @@ -73,7 +68,7 @@ export default {
} ),
{
name: 'load-js-files-as-jsx',
async transform( code, id ) {
async transform( code: string, id: string ) {
if ( ! id.match( /.*\.js$/ ) ) {
return null;
}
Expand Down Expand Up @@ -101,3 +96,5 @@ export default {
} );
},
};

export default config;
4 changes: 2 additions & 2 deletions storybook/preview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,8 +165,8 @@ export const parameters = {
sourceLink: {
links: {
// Disable default links
'component-vscode': () => undefined,
'story-vscode': () => undefined,
'component-editor': () => undefined,
'story-editor': () => undefined,
'addon-powered-by': () => undefined,
// Custom GitHub link
'story-github': ( { importPath } ) => {
Expand Down
Loading