DRAFT: Update Storybook

[graynorton]

Note: work has been handed off to @castastrophe; see updates below:

Work in progress summary

Goal: a minimal migration to latest Storybook leveraging Vite.

Completed

• Migrated over assets and styles from Spectrum CSS which leverages the same Vite tooling
• Updated dependencies in package.json
• Added vite-plugin-cem which generates the custom element manifest on the fly
• Temporarily removed unused add-ons (badges)
• Set up the vite config to mimic the original tooling as much as possible (rollup is used in Vite so those ported nicely)
• Initial ESBuild set-up in Storybook, updated core build scripts to be extensible for this purpose

Todo

• Local path alias'ing
• Migrating the webpack configurations as necessary (Vite leverages rollup and not webpack)
• Configuring the esbuild to process the assets for Storybook correctly

Notes to self

• The '@rollup/plugin-json plugin should no longer be needed (JSON support built into Vite)
• Need to remove workspace dependencies in the Spectrum CSS preview package so we can just add that as a dependency and use those doc blocks directly

Description

Update Storybook to latest, use @storybook/web-components-vite

Related issue(s)

Motivation and context

Having issues firing Chromatic on the outdated version of Storybook; attempting this upgrade in order allow Chromatic VRT runs for SWC.

How has this been tested?

• Test case 1

  1. Go here
  2. Do this

• Test case 2

  1. Go here
  2. Do this

• Did it pass in Desktop?

• Did it pass in Mobile?

• Did it pass in iPad?

Screenshots (if appropriate)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• 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.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• 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]

⚠️ No Changeset found

Latest commit: a8f443d

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.

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]

Branch preview

• Documentation Site
• Storybook

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:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

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]

Tachometer results

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

[coveralls]

Pull Request Test Coverage Report for Build 13660440277

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 97.966%

---

Totals
Change from base Build 13660087416:	0.0%
Covered Lines:	33662
Relevant Lines:	34164

---

💛 - Coveralls

[castastrophe]

Ran through the code updates and this is looking great so far. I'll pull it down next and see if there are any rendering issues.

[pfulton]

@castastrophe @graynorton just dropping in on this PR to ask (or strongly suggest!) that, for now, we not run the Chromatic GH Action unless the run_vrt label is added. Meaning, that in a GitHub PR context, it would not run by default, and you would need to explicitly add the label to invoke it. We'll want to think about running it by default at some future time, but we should err on the side of on-demand running right now until we get a handle on how many snapshots it'll be taking (there are a lot of stories in this Storybook, and 1 story === (at least) 1 snapshot.

Always happy to discuss further in Slack or on a call :-)

[caseyisonit]

updated the circleci config to resolve preview PRs

[github-actions]

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.99	0.99	0.98
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	248.449 kB	234.812 kB	234.527 kB 🏆
Scripts	60.641 kB	54.43 kB	54.258 kB 🏆
Stylesheet	51.446 kB	45.926 kB	45.683 kB 🏆
Document	6.219 kB	5.502 kB 🏆	5.517 kB
Font	127.164 kB	126.605 kB	126.597 kB 🏆

Request Count

Category	Latest	Main	Branch
Total	52	52	52
Scripts	41	41	41
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

[castastrophe]

@castastrophe @graynorton just dropping in on this PR to ask (or strongly suggest!) that, for now, we not run the Chromatic GH Action unless the run_vrt label is added. Meaning, that in a GitHub PR context, it would not run by default, and you would need to explicitly add the label to invoke it. We'll want to think about running it by default at some future time, but we should err on the side of on-demand running right now until we get a handle on how many snapshots it'll be taking (there are a lot of stories in this Storybook, and 1 story === (at least) 1 snapshot.

Yes to all! This is set up as a workflow_dispatch so it will only run if you explicitly run it from GitHub Actions and it doesn't even run on a label or tag.