Upgrade Storybook to v9 #252

skitterm · 2025-05-06T00:13:27Z

Issue: #AP-6003

What Changed

Storybook (which is used internally by the e2e packages) upgraded from 8.6.0 to 9.0.0.

I ran the yarn dlx storybook@next upgrade command and accepted all the suggested migrations.

Main thing that changed (manually) was getting rid of @storybook/eslint-config-storybook and using the recommended eslint-plugin-storybook. This took some copy-pasta of configs from that removed package's eslintrc.js in order to get the same configuration that we had before.

Also changed Node.js version used in CI workflows -- Storybook 9 doesn't support Node 18, so it's upgraded to pull the latest (cached) LTS version of node so we don't have to keep updating the files every year or two.

How to test

Playwright

In an existing e2e project (that uses Chromatic), download the canary version of the @chromatic-com/playwright package
Commit the package.json/package lock change without adding any UI changes
Locally, run Playwright
Locally, run archive-storybook
Verify the Storybook loads up with the stories as expected
Run the Chromatic command
Verify that the Chromatic build completes with no visual changes

Cypress

Same steps as Playwright, but with @chromatic-com/cypress package

codecov · 2025-05-06T00:15:55Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.87%. Comparing base (539e48a) to head (1aaf069).
Report is 9 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #252      +/-   ##
==========================================
+ Coverage   95.64%   95.87%   +0.23%     
==========================================
  Files          14       14              
  Lines         390      388       -2     
  Branches       66       64       -2     
==========================================
- Hits          373      372       -1     
+ Misses         17       16       -1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

skitterm · 2025-05-06T00:16:15Z

.eslintrc.js

+  extends: ['plugin:@typescript-eslint/recommended', 'plugin:storybook/recommended'],
+  plugins: ['import'],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.ts', '.tsx', '.mjs', '.d.ts'],
+        paths: ['node_modules/', 'node_modules/@types/'],
+      },
+    },
+  },


All of this (minus the plugin:storybook/recommended which is the new storybook ESLint config) is to account for the fact that we're not using @storybook/eslint-config-storybook anymore.

Internally @storybook/eslint-config-storybook was doing all this and much more.

Same goes for the other 3 eslintrc files as well.

Not a huge deal but is there some way to share eslint configs?

Really good point. I think we should, since we had to update this in 4 places and the same applies whenever we upgrade to ESLint v9. I'll see if there's a simple way!

@tmeasday we can do this with a shared ESLint configuration, but adding that would bloat this PR (new workspace package for the shared config, publish it to NPM, etc). Are you OK if we wait to tackle the config-reuse for whenever we upgrade to ESLint v9 (which has a new config file format)?

package.json

packages/shared/src/archive-storybook/index.ts

skitterm · 2025-05-06T00:30:56Z

Hm, the locally-run (non-built) archived storybook (run by running yarn build && yarn test:playwright, then yarn archive-storybook:playwright) loads fine, but the version where we build the storybook (used by this CI check) is failing for some reason. I'll have to investigate this tomorrow.

tmeasday

You might want to include on the PR description that this also updates support in our archive-storybook package to also support 9+ (is that correct)?

LGTM, but we might want to test a canary against projects using both SB8 and 9 (and maybe <8.6 following this thread?)

tmeasday · 2025-05-06T00:55:59Z

.eslintrc.js

+  extends: ['plugin:@typescript-eslint/recommended', 'plugin:storybook/recommended'],
+  plugins: ['import'],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.ts', '.tsx', '.mjs', '.d.ts'],
+        paths: ['node_modules/', 'node_modules/@types/'],
+      },
+    },
+  },


Not a huge deal but is there some way to share eslint configs?

skitterm · 2025-05-06T23:59:11Z

Yippee, figured out the issue -- We were specifically targeting node 18 in our CI workflow, but Storybook 9 requires node 20 or above. Updating our CI scripts to reflect that.

skitterm · 2025-05-07T00:20:10Z

@tevanoff this is ready for your review! I'm assuming we don't need to bump the package versions since Storybook is an internal dependency, but happy to get your take on that.

skitterm · 2025-05-07T00:23:34Z

I'm assuming we don't need to bump the package versions since Storybook is an internal dependency, but happy to get your take on that.

I'm realizing that we'd at least want to bump the package some version -- even though this is an internal change, it is a change nonetheless. I'll bump the minor version.

.github/workflows/canary-release.yml

packages/cypress/package.json

skitterm · 2025-05-09T19:32:05Z

@tevanoff this is ready for your re-review -- I'm holding off on merging until I've tested more permutations of Storybook 8 and 9 together, but I've confirmed that a typical Cypress+Playwright codebase that upgrades to (indirectly) use Storybook 9 works fine with builds and storybooks.

packages/shared/src/archive-storybook/index.ts

yannbf · 2025-05-23T15:55:41Z

packages/shared/src/archive-storybook/index.ts

  // reference the entry file based on the package.json `bin` value, since it changed between SB 8.1 and 8.2
-  return resolve(dirname(require.resolve('storybook/package.json')), packageJson.bin.storybook);
+  return resolve(


You might want to try a similar approach to this:
https://github.com/storybookjs/test-runner/blob/next/src/test-storybook.ts#L128

So that the resolution will start from the node_modules of the e2e package instead. If a user had something like this:

/node_modules |_/storybook |_/chromatic-e2e |__/node_modules |___/storybook

it will prefer the one from chromatic-e2e

@skitterm @tevanoff have you considered my suggestion?

@yannbf we decided to forego putting e2e on Storybook 9 for the time being. I'll close this PR to reflect that.

…ook was doing for us

…monorepo

… was from Cypress

…e need it at runtime

…f addon-essentials which is now part of storybook, but we don't need the docs)

This also includes them as dev dependencies in the root project so that we can run our own E2E tests.

packages/playwright/README.md

skitterm

@tevanoff and @winkerVSbecks thanks for the progress!

@tevanoff my comments are "notes for us", let me know if you'd like me to resolve them or leave them to you.

.changeset/purple-boxes-wash.md

packages/cypress/README.md

packages/cypress/package.json

packages/shared/storybook-config/preview.ts

skitterm · 2025-06-12T21:59:14Z

Closing this as we decided, in the short term, to forego upgrading to Storybook 9 for the time being. We will revisit this when either a) we have a better handle on the level of effort to build our own custom Storybook framework, or b) Storybook 10 comes out.

skitterm changed the title ~~To sbv9~~ Upgrade Storybook to v9 May 6, 2025

skitterm commented May 6, 2025

View reviewed changes

package.json Outdated Show resolved Hide resolved

skitterm commented May 6, 2025

View reviewed changes

packages/shared/src/archive-storybook/index.ts Outdated Show resolved Hide resolved

skitterm requested review from yannbf, tmeasday and tevanoff May 6, 2025 00:24

skitterm marked this pull request as ready for review May 6, 2025 00:31

tmeasday approved these changes May 6, 2025

View reviewed changes

skitterm commented May 7, 2025

View reviewed changes

.github/workflows/canary-release.yml Show resolved Hide resolved

tevanoff reviewed May 7, 2025

View reviewed changes

packages/cypress/package.json Outdated Show resolved Hide resolved

skitterm force-pushed the to-sbv9 branch from fb43abe to dcec5fd Compare May 9, 2025 18:42

skitterm requested a review from tevanoff May 9, 2025 19:30

skitterm force-pushed the to-sbv9 branch 2 times, most recently from aec08dc to f39350a Compare May 12, 2025 23:55

tevanoff reviewed May 13, 2025

View reviewed changes

packages/shared/src/archive-storybook/index.ts Outdated Show resolved Hide resolved

yannbf reviewed May 23, 2025

View reviewed changes

skitterm added 7 commits May 27, 2025 13:13

Storybook upgraded to v9 beta

bb0e086

Depending on major storybook version, we get the bin value

77ba2cb

Now-unused eslint plugin removed

b103599

Fill in the missing lint configs that @storybook/eslint-config-storyb…

ce3463e

…ook was doing for us

Use node 20

7a48a66

Why not use current version so we don't keep having to update this

8e21a20

Latest Node.js LTS version used by all CI jobs

2cfcb99

skitterm added 8 commits May 27, 2025 13:15

Try the v4 of the action?

c276c1f

Minor version bump for all packages

acb803d

Add registry URL back

849623e

Deprecated @storybook/csf package removed as it's now part of the SB …

a163885

…monorepo

Remnant Addon-essentials package removed from PLaywright deps like it…

56c8ee2

… was from Cypress

After installing and running Playwright, we can build a storybook

72d2a00

Addon-docs installed as a dependency instead of devDependency since w…

13a4aee

…e need it at runtime

Storybook addon-docs removed as we don't use it (was initially part o…

d74659f

…f addon-essentials which is now part of storybook, but we don't need the docs)

tevanoff force-pushed the to-sbv9 branch from 3065297 to d74659f Compare May 27, 2025 20:22

tevanoff added 2 commits May 27, 2025 15:32

make storybook and server-webpack5 peer dependencies

41b41a3

This also includes them as dev dependencies in the root project so that we can run our own E2E tests.

new changeset

3bbbeed

tevanoff force-pushed the to-sbv9 branch from fdbcd23 to a7013d4 Compare May 28, 2025 16:15

upgrade sb to 9.0 release

9754aae

tevanoff force-pushed the to-sbv9 branch 2 times, most recently from c8b6eaf to 9754aae Compare May 28, 2025 19:32

tweak bin path logic to remove check on SB version

5b57266

winkerVSbecks reviewed May 29, 2025

View reviewed changes

packages/playwright/README.md Outdated Show resolved Hide resolved

winkerVSbecks reviewed May 29, 2025

View reviewed changes

packages/playwright/README.md Outdated Show resolved Hide resolved

tevanoff force-pushed the to-sbv9 branch from f4232fe to 75967ad Compare May 29, 2025 16:56

skitterm commented May 29, 2025

View reviewed changes

add compatibility instructions

d61a770

tevanoff force-pushed the to-sbv9 branch from 425d149 to d61a770 Compare May 29, 2025 22:12

fix typo

1aaf069

skitterm closed this Jun 12, 2025

Upgrade Storybook to v9 #252

Upgrade Storybook to v9 #252

Uh oh!

Conversation

skitterm commented May 6, 2025 • edited by tevanoff Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What Changed

How to test

Uh oh!

codecov bot commented May 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

skitterm May 6, 2025

Choose a reason for hiding this comment

Uh oh!

tmeasday May 6, 2025

Choose a reason for hiding this comment

Uh oh!

skitterm May 6, 2025

Choose a reason for hiding this comment

Uh oh!

skitterm May 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

skitterm commented May 6, 2025

Uh oh!

tmeasday left a comment

Choose a reason for hiding this comment

Uh oh!

tmeasday May 6, 2025

Choose a reason for hiding this comment

Uh oh!

skitterm commented May 6, 2025

Uh oh!

skitterm commented May 7, 2025

Uh oh!

skitterm commented May 7, 2025

Uh oh!

Uh oh!

Uh oh!

skitterm commented May 9, 2025

Uh oh!

Uh oh!

yannbf May 23, 2025

Choose a reason for hiding this comment

Uh oh!

yannbf Jun 12, 2025

Choose a reason for hiding this comment

Uh oh!

skitterm Jun 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

skitterm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

skitterm commented Jun 12, 2025

Uh oh!

Uh oh!

skitterm commented May 6, 2025 •

edited by tevanoff

Loading

codecov bot commented May 6, 2025 •

edited

Loading

skitterm May 8, 2025 •

edited

Loading