chore(storybook): minimal upgrade migration #5309

castastrophe · 2025-03-31T19:29:20Z

Description

This update migrations the SWC Storybook instance off of the @web/storybook-builder and @web/storybook-framework-web-components and onto the latest breaking change (v8) release of @storybook/* and storybook packages.

This update does not:

migrate the build off webpack and onto Vite

Had to remove the maintained node versions entry to the browsers list config because it was causing the Storybook build to fail:

Error: For the selected environment is no default script chunk format available:
JSONP Array push can be chosen when 'document' or 'importScripts' is available.
CommonJs exports can be chosen when 'require' or node builtins are available.
Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default. Alternatively specify the 'output.chunkFormat' directly.

Related issue(s)

SWC-766

Motivation and context

Blog post

Built-in visual testing
2-4x faster test builds
Refreshed desktop UI
Rebuilt mobile UX
Removed React dependency for non-React projects (yay!)

How has this been tested?

Open the storybook (either locally or the one built to this PR)
1. Expect the landing page to now be a docs summary story for the Accordion.
2. Expect each component and component group to now contain a summary docs page with a view of the default story and a list of the available properties.
3. Expect no regressions in how theming works via the global knobs at the top
4. If a story does not contain any defined properties, expect the properties section of the docs page to be missing as in Action bar
Expect to see no regressions in visual regression tests
Expect to see no regressions in functional tests
yarn start: expect no regressions to local Storybook
- Update a CSS asset and validate the changes refresh live in Storybook
- Update a TS asset and validate the changes refresh live in Storybook

Screenshots

Types of changes

Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
[n/a] If my change required a change to the documentation, I have updated the documentation in this pull request.
I have read the CONTRIBUTING document.
[n/a] I have added tests to cover my changes.
All new and existing tests passed.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

changeset-bot · 2025-03-31T19:29:24Z

⚠️ No Changeset found

Latest commit: f51747d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2025-03-31T19:31:45Z

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

github-actions · 2025-03-31T19:35:17Z

Tachometer results

Currently, no packages are changed by this PR...

package.json

castastrophe · 2025-04-01T15:09:02Z

packages/action-button/stories/action-button.stories.ts

-    icon: html`
-        <sp-icon-edit hidden slot="icon"></sp-icon-edit>
-    `,
+    icon: `<sp-icon-edit hidden slot="icon"></sp-icon-edit>`,


This version is much stricter about safe template rendering. It's considered unsafe to call a template result via function inside another template result. This is the way to accomplish that same result.

storybook/preview.js

caseyisonit · 2025-04-01T18:57:39Z

storybook/preview.js

+    },
+];
+
+export const tags = ['autodocs'];


can NOT wait for this to go live <3

caseyisonit · 2025-04-01T18:59:06Z

web-test-runner.utils.js

@@ -277,32 +278,3 @@ export const configuredVisualRegressionPlugin = () =>
            );
        },
    });
-
-export function watchSWC() {


Do you know what this was doing or why its safe to remove this now?

Yes this was forcing rebuild of the assets when updates were made to the source files. Storybook handles this automatically and doesn't need us to manually kick this off any more. We can validate this by making changes to an existing asset and seeing it live refresh on the page. I'll add a test case for that when I start writing up validation steps.

worked for me!

caseyisonit · 2025-04-01T19:12:09Z

package.json

-        "@storybook/addon-designs": "^8.0.0",
-        "@storybook/addon-essentials": "^7.5.0",
-        "@storybook/addon-links": "^7.5.0",
-        "@storybook/web-components": "^7.5.0",


looks like this package was removed but this is how we set our custom manifest (the part you commented out in preview.js). Was this intentional or is it not supported in storybook 8?

Does look like it comes with v8 support: https://www.npmjs.com/package/@storybook/web-components

It may say that it's supported but there's some serious issues in that package. When I add the dependency, it adds this to our install logs (yes, it does the same if we bump all packages to 8.6.12 too):

When we add it in anyway despite the logged error, it blocks styles from loading. When I commented out the CEM loading, the arg types still loaded in the stories and the styles rendered. We can debug loading the CEM another way but I'm not sure this package is going to be it.

pfulton · 2025-04-21T21:02:45Z

storybook/main.js

+import { merge } from 'webpack-merge';
+
+/** @type { import('@storybook/web-components-webpack5').StorybookConfig } */
+export default {


A personal nit: how do you feel about including the disableWhatsNewNotifications: true setting in the core settings (like we do in Spectrum CSS)? Also: what if we set disableTelemetry: true?

I'm definitely in support of that - would it work if I added this as a "fast follow" once this merges?

Yeah, absolutely!

pfulton

I pulled down this branch and ran it successfully on my local environment. Everything looked good, functioned as expected, and was speedy!

I love that this enables the AutoDocs stuff!

I dropped one nit comment here that is just a personal preference, but let me know what you think.

Otherwise, I think this should be good to go.

caseyisonit

LGTM - would love a fast follow to investigate the custom element manifest or automating the args table over the current implementation which is completely manual.

nikkimk

As always, thanks for making our developer experience so much better!

nikkimk · 2025-04-24T20:22:08Z

web-test-runner.utils.js

@@ -277,32 +278,3 @@ export const configuredVisualRegressionPlugin = () =>
            );
        },
    });
-
-export function watchSWC() {


worked for me!

castastrophe force-pushed the castastrophe/chore-storybook-migration branch 3 times, most recently from b361a04 to 6004f3f Compare April 1, 2025 12:13

castastrophe self-assigned this Apr 1, 2025

castastrophe marked this pull request as ready for review April 1, 2025 14:38

castastrophe requested a review from a team as a code owner April 1, 2025 14:38

castastrophe added the Tooling label Apr 1, 2025

castastrophe commented Apr 1, 2025

View reviewed changes

package.json Outdated Show resolved Hide resolved

castastrophe commented Apr 1, 2025

View reviewed changes

storybook/preview.js Show resolved Hide resolved

caseyisonit reviewed Apr 1, 2025

View reviewed changes

storybook/preview.js Outdated Show resolved Hide resolved

caseyisonit reviewed Apr 1, 2025

View reviewed changes

caseyisonit mentioned this pull request Apr 1, 2025

chore: bump the storybook-ecosystem group with 6 updates #5311

Closed

castastrophe force-pushed the castastrophe/chore-storybook-migration branch 3 times, most recently from d596606 to b4fd473 Compare April 4, 2025 15:13

castastrophe force-pushed the castastrophe/chore-storybook-migration branch 7 times, most recently from d5bc7ea to 1b26c82 Compare April 17, 2025 14:08

castastrophe force-pushed the castastrophe/chore-storybook-migration branch from 1b26c82 to 0ae7e45 Compare April 18, 2025 13:36

castastrophe added the ready-for-review label Apr 18, 2025

castastrophe force-pushed the castastrophe/chore-storybook-migration branch from 0ae7e45 to 73d269b Compare April 18, 2025 16:47

pfulton reviewed Apr 21, 2025

View reviewed changes

pfulton approved these changes Apr 21, 2025

View reviewed changes

castastrophe force-pushed the castastrophe/chore-storybook-migration branch 3 times, most recently from 0788b9b to f10e882 Compare April 23, 2025 19:01

caseyisonit approved these changes Apr 24, 2025

View reviewed changes

castastrophe added 2 commits April 24, 2025 12:56

chore: initial minimal upgrade step

8227b64

chore: resolve rendering warnings

f51747d

castastrophe force-pushed the castastrophe/chore-storybook-migration branch from f10e882 to f51747d Compare April 24, 2025 16:56

nikkimk approved these changes Apr 24, 2025

View reviewed changes

castastrophe merged commit c067f66 into main Apr 24, 2025
24 checks passed

castastrophe deleted the castastrophe/chore-storybook-migration branch April 24, 2025 21:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(storybook): minimal upgrade migration #5309

chore(storybook): minimal upgrade migration #5309

castastrophe commented Mar 31, 2025 •

edited

Loading

changeset-bot bot commented Mar 31, 2025 •

edited

Loading

github-actions bot commented Mar 31, 2025 •

edited

Loading

github-actions bot commented Mar 31, 2025

castastrophe Apr 1, 2025

caseyisonit Apr 1, 2025 •

edited

Loading

caseyisonit Apr 1, 2025

castastrophe Apr 16, 2025 •

edited

Loading

nikkimk Apr 24, 2025

caseyisonit Apr 1, 2025

caseyisonit Apr 1, 2025

castastrophe Apr 14, 2025

pfulton Apr 21, 2025

castastrophe Apr 22, 2025

pfulton Apr 22, 2025

pfulton left a comment

caseyisonit left a comment

nikkimk left a comment

nikkimk Apr 24, 2025

chore(storybook): minimal upgrade migration #5309

chore(storybook): minimal upgrade migration #5309

Conversation

castastrophe commented Mar 31, 2025 • edited Loading

Description

Related issue(s)

Motivation and context

How has this been tested?

Screenshots

Types of changes

Checklist

Best practices

changeset-bot bot commented Mar 31, 2025 • edited Loading

⚠️ No Changeset found

github-actions bot commented Mar 31, 2025 • edited Loading

Branch preview

Review the following VRT differences

github-actions bot commented Mar 31, 2025

Tachometer results

Choose a reason for hiding this comment

caseyisonit Apr 1, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

castastrophe Apr 16, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pfulton left a comment

Choose a reason for hiding this comment

caseyisonit left a comment

Choose a reason for hiding this comment

nikkimk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

castastrophe commented Mar 31, 2025 •

edited

Loading

changeset-bot bot commented Mar 31, 2025 •

edited

Loading

github-actions bot commented Mar 31, 2025 •

edited

Loading

caseyisonit Apr 1, 2025 •

edited

Loading

castastrophe Apr 16, 2025 •

edited

Loading