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: eec53fe

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...

castastrophe · 2025-04-01T15:07:47Z

package.json

+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",


Question - do we need the react dependency for anything other than Storybook? If not, I can remove it from here because Storybook no longer requires React as a peer dep

Let me confirm but i believe its used for the react wrappers but ill follow up

so looks like react and react-dom are used by another storybook that exists in projects/custom-css-vars-viewer. I don't know if that's even used anymore or if we can remove that project too? Otherwise it appears safe to remove

Also I think we can remove next as a package too.

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.

castastrophe · 2025-04-01T15:10:20Z

storybook/preview.js

-const cem = await import('./custom-elements.json', {
-    assert: { type: 'json' },
-});
+// const cem = await import('./custom-elements.json', {


I left this commented out so that we can bring it back in the future. It doesn't take away anything from our developer experience right now to remove it but it was a higher level of effort to load it compatibly with this version.

This actually helps build our args tables dynamically from the source. By removing this all args tables will default to only the few args defined in an args file. not all components use this pattern though. is there a way we can do a follow up ticket to ensure our args tables are accurate with the available API?

That was what it was supposed to do but none of the args tables were being set by this. When I removed it, it caused no changes to the interface so I suspect it wasn't working the way it was supposed to in the first place.

This is also a WIP branch - not ready for review yet.

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

storybook/preview.js

@@ -148,4 +165,72 @@ export const parameters = {
    },
 };

-export const decorators = [swcThemeDecorator];
+export const decorators = [


how is this different from the projects/story-decorator? can we have one or the other or do we need both?

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?

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

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

caseyisonit reviewed Apr 1, 2025

View reviewed changes

storybook/preview.js

},

];

export const tags = ['autodocs'];

Copy link

Contributor

caseyisonit Apr 1, 2025 •

edited

Loading

Choose a reason for hiding this comment

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

can NOT wait for this to go live <3

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 added 2 commits April 10, 2025 11:43

chore: initial minimal upgrade step

6249e84

chore: resolve rendering warnings

eec53fe

castastrophe force-pushed the castastrophe/chore-storybook-migration branch from b4fd473 to eec53fe Compare April 10, 2025 15:43

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

caseyisonit Apr 1, 2025

castastrophe Apr 1, 2025

castastrophe Apr 1, 2025

caseyisonit Apr 1, 2025

castastrophe Apr 2, 2025

caseyisonit Apr 1, 2025

caseyisonit Apr 1, 2025 •

edited

Loading

caseyisonit Apr 1, 2025

caseyisonit Apr 1, 2025

caseyisonit Apr 1, 2025

chore(storybook): minimal upgrade migration #5309

Are you sure you want to change the base?

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

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

caseyisonit Apr 1, 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

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