test: add storybook vrt setup for styled-react

[joshblack]

Closes https://github.com/github/primer/issues/6074

Changelog

New

• Add storybook support to styled-react
• Add initial button stories for VRT in styled-react
• Add new utility, getStories, to our e2e test-helpers to help with more easily getting stories from a storybook source file

Changed

• Update our VRT setup to use two storybook URLs, one for react and one for styled-react

Removed

Rollout strategy

• None; if selected, include a brief description as to why

This is a change to our test strategy for styled-react

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7d53232

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

[Copilot]

Pull request overview

This PR adds Storybook support and Visual Regression Testing (VRT) infrastructure to the @primer/styled-react package, enabling automated visual testing for styled-react components. The implementation mirrors the existing VRT setup for @primer/react, establishing a second Storybook instance running on port 6007 alongside the primary react Storybook on port 6006.

Key changes include:

• Added Storybook configuration for styled-react with Vite, React Compiler, and CSS Modules support
• Created a new getStories utility function to programmatically extract story metadata from Storybook files for automated test generation
• Updated VRT workflows to build and serve both Storybook instances simultaneously during test execution

Reviewed changes

Copilot reviewed 12 out of 15 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
script/test-e2e	Added support for STYLED_REACT_STORYBOOK_URL environment variable (port 6007)
packages/styled-react/src/components/Button.stories.tsx	Initial Button component stories for VRT testing with color and fontSize variations
packages/styled-react/package.json	Added Storybook dependencies and build/dev scripts
packages/styled-react/.storybook/preview.tsx	Storybook preview configuration with BaseStyles decorator and screenshot testid wrapper
packages/styled-react/.storybook/main.ts	Storybook main config with Vite, CSS Modules, PostCSS, and React Compiler setup
packages/styled-react/.storybook/global.css	Global CSS imports for Primer primitives including themes, typography, and sizing
package.json	Added root-level dependencies for @babel/core and change-case utilities
package-lock.json	Updated dependency lock file with Storybook 10.1.6 and related packages
e2e/test-helpers/storybook.ts	Added getStories utility and updated visit function to support multi-storybook setup
e2e/styled-react/components/Button.test.ts	E2E test file using getStories to automatically generate VRT tests for Button stories
.github/workflows/vrt.yml	Updated to build and serve styled-react Storybook alongside react Storybook
.github/workflows/vrt-reports.yml	Updated VRT reports workflow to support dual Storybook instances
.playwright/snapshots/styled-react/components/Button.test.ts-snapshots/*.png	Generated VRT baseline snapshots for Button component

[francinelucca]

do we have a plan for adding stories for the rest of the components? 👀

[joshblack]

@francinelucca I figured if folks were okay with this approach what I could do is make an umbrella issue and start fanning out from there if that works 👀