Skip to content

chore(s2): split S2 Storybook into demo and dev - #972

Merged
c-lamoureux merged 30 commits into
mainfrom
chore/s2-storybook-demo-dev-split
Oct 7, 2026
Merged

chore(s2): split S2 Storybook into demo and dev#972
c-lamoureux merged 30 commits into
mainfrom
chore/s2-storybook-demo-dev-split

Conversation

@c-lamoureux

@c-lamoureux c-lamoureux commented Oct 6, 2026

Copy link
Copy Markdown
Contributor

Splits the S2 Storybook into a polished demo Storybook and a dev Storybook for internal testing.

Description

  • Demo (yarn storybook:s2, port 6010; yarn build:storybook:s2, which the S2 Storybook publish workflow uses) loads only packages/react-spectrum-charts-s2/src/stories/**. Stories were curated to one representative story per feature with realistic data, no debug UI and no UNSAFE_/unstable_ APIs. Axis, Legend, Bar, Line, Chart, Popover and Action Bar stories are grouped into folders.
  • Dev (yarn storybook:s2:dev, port 6011; yarn build:storybook:s2:dev, new .storybook-s2-dev config) loads the demo stories plus src/dev/<Chart>/<Folder>/:
    • Playground: one story per chart/component with broad controls, children and interactions.
    • Performance: animation, large-data and stress stories.
    • Dashboards: variation dashboards (the Donut dashboard is unhidden here).
    • Regressions: real bug reproductions. Each sets parameters.regression = { description, pr }, which the dev preview shows above the story.
    • Coverage: test-specific and feature-coverage stories, including former demo variants.
  • Story data and helpers used by both live in storyShared. Dev story tests sit next to the dev stories, and S2 tests no longer depend on demo story args.
  • PR checks build both Storybooks.
  • CLAUDE.md documents the split and where new stories go.

How Has This Been Tested?

  • yarn lint, yarn tsc and the full test suite (314 suites / 4,646 tests) pass.
  • yarn build:storybook:s2 and yarn build:storybook:s2:dev both succeed.

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)

@c-lamoureux
c-lamoureux force-pushed the chore/s2-storybook-demo-dev-split branch from 930e14e to deb7e7c Compare October 6, 2026 21:25
madelineluke
madelineluke reviewed Oct 7, 2026
View reviewed changes
Comment thread packages/react-spectrum-charts-s2/src/stories/Donut/Features/DonutFeatures.story.tsx Outdated
@c-lamoureux
c-lamoureux force-pushed the chore/s2-storybook-demo-dev-split branch from deb7e7c to 0ea44bc Compare October 7, 2026 16:06
c-lamoureux and others added 27 commits October 7, 2026 10:22
@c-lamoureux
chore: add S2 dev Storybook config
282994e 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore: classify S2 dev stories
ec88d08 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore: add S2 dev playground stories
c2a4298 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
docs: document S2 Storybook split
e5dec8b 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore: rebuild S2 dev playgrounds with children and interactions
0b3a474 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore: curate S2 Axis, Legend and Title demo stories
b9d8e3c 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore: curate S2 Line, Bar, pre-alpha and chart demo stories
3988c0b 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
test: pin S2 tests to code paths independent of demo story args
1f1e3d9 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore: keep curated-out S2 regression stories in dev Storybook
5fad8c5 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore: restructure S2 demo stories to one story per prop
3e7033b 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore(s2): restructure Axis stories into Labels, Tooltips and Action …
42a44b7 
…Handlers folders

Apply Axis Storybook review feedback: remove ReferenceLine position/size,
currencyCode and tick-count stories; clarify Y/X axis stories; free-text
numberFormat; per-orientation position controls; wider bars for subLabels;
labelLimit on a horizontal bar; labelFormat 'time' option.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore(s2): group Legend, Bar, Line, Chart, Popover and Action Bar sto…
c0137bc 
…ries into folders

Callback stories move to an Action Handlers folder per component; props are
grouped into Labels, Series Visibility, Symbols, Spacing, Styling, Points,
Series, Animation, Highlight, Size and Encodings folders.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore(s2): move story data and helpers shared by demo and dev into st…
4b46726 
…oryShared

Dev stories no longer import from the demo stories tree.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
test(s2): colocate dev story tests with dev stories
6368073 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore(s2): widen slim bars in demo stories
f6bce36 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore(s2): drop removed Donut startAngle and otherItemColor from stories
cb72422 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
fix(s2): default colorScheme and backgroundColor in dev playgrounds
4b0b4b8 
Playgrounds passed undefined for both, overriding Chart's defaults and
crashing on render. Adds a smoke test that renders every playground.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore(s2): unhide Donut dashboard story in dev storybook
5befe40 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore(s2): remove sliver segments from demo stacked bars
9dccdc5 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
fix(s2): type playground chartArgs colorScheme
35b883b 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore(s2): show regression description and fixing PR on dev regressio…
2ce6989 
…n stories

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore(s2): move dev test and feature-coverage stories into per-chart …
2933c50 
…Coverage folders

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
fix(s2): type-check playground render test and merge duplicate imports
1922451 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore(s2): exclude Storybook-only S2 code from Sonar coverage
cb36c82 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
fix(s2): show object values as JSON in playground datum details
ac8b650 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
refactor(s2): share playground helpers to cut story complexity
61a8aeb 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
fix(s2): avoid default object stringification in playground formatter
d39a9d9 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
chore(s2): name dev coverage stories by what they cover
9aa8431 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@c-lamoureux
c-lamoureux force-pushed the chore/s2-storybook-demo-dev-split branch from 0ea44bc to 9aa8431 Compare October 7, 2026 16:34
@c-lamoureux
fix(s2-stories): HideDeemphasizedLabels story uses labelMode segment …
e639646 
…labels

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
madelineluke
madelineluke previously approved these changes Oct 7, 2026
View reviewed changes
@c-lamoureux
fix(s2-dev-stories): restore dropped Line coverage exports and fix pl…
54db55d 
…ayground dataPreset options

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@sonarqubecloud

sonarqubecloud Bot commented Oct 7, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@github-actions

github-actions Bot commented Oct 7, 2026

Copy link
Copy Markdown
Contributor

🎨 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-972

🎨 S2 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-972-s2

🎨 S2 Dev Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-972-s2-dev

📚 Docs -> https://opensource.adobe.com/react-spectrum-charts/PR-972-docs/

@c-lamoureux
c-lamoureux merged commit 1f395e4 into main Oct 7, 2026
7 checks passed
@c-lamoureux
c-lamoureux deleted the chore/s2-storybook-demo-dev-split branch October 7, 2026 19:22
c-lamoureux added a commit that referenced this pull request Oct 7, 2026
@c-lamoureux
Merge remote-tracking branch 'origin/main' into refactor/core-s2
eb4dade 
Brings in #967, #970 and #972. Story files moved by #972 take main's
version with imports rewritten to core-s2 subpaths and fully specified
.js extensions (scripts/addRelativeImportExtensions.mjs). Ports #970's
donut constants into core-s2 and excludes the new dev/ and storyShared/
story folders from the S2 declaration build.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@madelineluke madelineluke madelineluke approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@c-lamoureux @madelineluke