refactor(storybook): rationalize sidebar taxonomy and prune variants#1395
Merged
Conversation
Reorganize storybook into 4 top-level buckets and prune variant
explosions across primitive components.
Sidebar shape:
- Diffs/{Charts, Results}/<check-type> (Forms bucket removed)
- Lineage/LineageCanvas/{CllExperience, ScaleTests}/...
- Lineage/NodeView/{NodeView, LineageTab}
- Checks/* absorbs former App, Editor, Summary, Timeline singletons
- Primitives/* (DiffPrimitives split reverted; merged back)
Story prunes (rely on argType controls instead of per-variant stories):
- SquareIcon 13->3, DataTypeIcon 12->2 (keep AllCategories table)
- ScreenshotBox 9->2, Split 12->4, DropdownValuesInput 16->3
- ExternalLinkConfirmDialog 13->5, MarkdownContent 18->2
- EmptyState 17->5, Toaster 15->3
- DiffText 16->3, RunStatusBadge 12->3
- TimelineEvent 18->9 (constrained by visual.ts regression test IDs)
- EnvInfo 10->7
Drop tags: ["autodocs"] from all stories. The per-component Docs page
duplicated the canvas, amplified Vite cold-start cost, and the
docs-loading smoke loop in verify-ui-stories.visual.ts is replaced by
direct story-ID smoke tests.
Delete HistogramDiffForm + TopKDiffForm stories (broken in storybook —
require a LineageGraphContext that the mocks don't fully satisfy).
Rename HistogramResultView -> HistogramDiffResultView (filename now
matches the exported component).
Net: 428 -> 244 stories.
Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Danyel Fisher <danyel@gmail.com>
The earlier prune dropped DescriptionChanged, NameChanged, PresetApplied, CommentFromOtherUser, ActorWithoutFullname, and ActorWithoutName, but TimelineEvent.test.tsx imports them via composeStories() as test fixtures. Restoring the six story exports so the unit tests compile and keep their behavioral coverage of event-type rendering and actor fallbacks. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Contributor
Author
|
Responses to a self-review:
The page did not render -- it showed an internal error that the LineageGraphContext mock wasn't working. I'd add ot that the forms themselves are barely load-bearing; they're not the pieces I'm most worried about inspecting.
Because we've had many broken stories in the test without actually turning this red, I'm not sure that it was doing what we wanted it to. I'm ok restoring it (and the autodocs), but I'd like to do so with intent. |
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors the Storybook story taxonomy to reduce sidebar sprawl, remove autodocs overhead, and prune variant-explosion stories while keeping key compositions and test/visual fixtures aligned with the new IDs.
Changes:
- Reorganized story titles into the new
Checks/,Diffs/,Lineage/, andPrimitives/buckets (and removedtags: ["autodocs"]broadly). - Pruned many primitive story variants down to a smaller set of control-driven defaults + a few meaningful compositions/play tests.
- Updated Playwright visual/smoke tests and removed broken form stories that required unmet context.
Reviewed changes
Copilot reviewed 47 out of 47 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| js/packages/storybook/stories/valuediff/ValueDiffResultView.stories.tsx | Move story under Diffs/Results/... and drop autodocs tagging. |
| js/packages/storybook/stories/valuediff/ValueDiffDetailResultView.stories.tsx | Move story under Diffs/Results/... and drop autodocs tagging. |
| js/packages/storybook/stories/ui/verify-ui-stories.visual.ts | Replace docs-page loop with direct story-id smoke tests (representative primitives). |
| js/packages/storybook/stories/ui/ToggleSwitch.stories.tsx | Move to Primitives/ bucket and drop autodocs tagging. |
| js/packages/storybook/stories/ui/Toaster.stories.tsx | Move to Primitives/ bucket and prune story variants substantially. |
| js/packages/storybook/stories/ui/SquareIcon.stories.tsx | Move to Primitives/ bucket and prune color-variant explosion into default + compositions. |
| js/packages/storybook/stories/ui/Split.stories.tsx | Move to Primitives/ bucket and prune story variants. |
| js/packages/storybook/stories/ui/ScreenshotBox.stories.tsx | Move to Primitives/ bucket and prune story variants. |
| js/packages/storybook/stories/ui/RunStatusBadge.stories.tsx | Move to Primitives/ bucket and prune story variants. |
| js/packages/storybook/stories/ui/MarkdownContent.stories.tsx | Move to Primitives/ bucket and reduce many variants to a default + key interaction test. |
| js/packages/storybook/stories/ui/ExternalLinkConfirmDialog.stories.tsx | Move to Primitives/ bucket and prune URL/edge-case variants while keeping play tests. |
| js/packages/storybook/stories/ui/EmptyState.stories.tsx | Move to Primitives/ bucket, prune variants, keep action click play tests. |
| js/packages/storybook/stories/ui/DropdownValuesInput.stories.tsx | Move to Primitives/ bucket and prune many configuration variants. |
| js/packages/storybook/stories/ui/DiffTextWithToast.stories.tsx | Move to Primitives/ bucket and drop autodocs tagging. |
| js/packages/storybook/stories/ui/DiffText.stories.tsx | Move to Primitives/ bucket and prune variants, keep copy interaction test. |
| js/packages/storybook/stories/ui/DiffDisplayModeSwitch.stories.tsx | Move to Primitives/ bucket and drop autodocs tagging. |
| js/packages/storybook/stories/ui/DataTypeIcon.stories.tsx | Move to Primitives/ bucket; keep “AllCategories” overview plus a default. |
| js/packages/storybook/stories/ui/ChangedOnlyCheckbox.stories.tsx | Move to Primitives/ bucket and drop autodocs tagging. |
| js/packages/storybook/stories/top-k/TopKDiffResultView.stories.tsx | Move Top-K diff result story under Diffs/Results/... and drop autodocs tagging. |
| js/packages/storybook/stories/top-k/TopKDiffForm.stories.tsx | Remove broken story (required unmet LineageGraphContext mocking). |
| js/packages/storybook/stories/top-k/TopKBarChart.stories.tsx | Move chart story under Diffs/Charts/... and drop autodocs tagging. |
| js/packages/storybook/stories/timeline/TimelineEvent.visual.ts | Update visual test story ID to match new Checks/TimelineEvent location. |
| js/packages/storybook/stories/timeline/TimelineEvent.stories.tsx | Move TimelineEvent stories under Checks/ and reorganize comments/fixtures usage. |
| js/packages/storybook/stories/summary/ChangeSummary.stories.tsx | Move ChangeSummary under Checks/ and drop autodocs tagging. |
| js/packages/storybook/stories/schema/SchemaDiff.stories.tsx | Move schema diff story under Diffs/Results/Schema and drop autodocs tagging. |
| js/packages/storybook/stories/rowcount/RowCountResultView.stories.tsx | Move rowcount result story under Diffs/Results/... and drop autodocs tagging. |
| js/packages/storybook/stories/rowcount/RowCountDiffResultView.stories.tsx | Move rowcount diff story under Diffs/Results/... and drop autodocs tagging. |
| js/packages/storybook/stories/query/QueryResultView.stories.tsx | Move query result story under Diffs/Results/... and drop autodocs tagging. |
| js/packages/storybook/stories/query/QueryDiffResultView.stories.tsx | Move query diff story under Diffs/Results/... and drop autodocs tagging. |
| js/packages/storybook/stories/profile/ProfileResultView.stories.tsx | Move profile result story under Diffs/Results/... and drop autodocs tagging. |
| js/packages/storybook/stories/profile/ProfileDiffResultView.stories.tsx | Move profile diff story under Diffs/Results/... and drop autodocs tagging. |
| js/packages/storybook/stories/lineage/ZoomLegibility.stories.tsx | Nest zoom legibility under Lineage/LineageCanvas/ScaleTests/.... |
| js/packages/storybook/stories/lineage/NodeView.stories.tsx | Drop autodocs tagging (keeping NodeView taxonomy). |
| js/packages/storybook/stories/lineage/NodeTag.stories.tsx | Reclassify NodeTag under Primitives/. |
| js/packages/storybook/stories/lineage/LineageTabContent.stories.tsx | Nest LineageTab story under Lineage/NodeView/LineageTab. |
| js/packages/storybook/stories/lineage/LineageDiffComplete.stories.tsx | Nest lineage diff scale test under Lineage/LineageCanvas/ScaleTests/.... |
| js/packages/storybook/stories/lineage/LineageCanvas.stories.tsx | Drop autodocs tagging for the LineageCanvas story set. |
| js/packages/storybook/stories/lineage/CllExperience.stories.tsx | Rename/nest the CLL experience story under Lineage/LineageCanvas/.... |
| js/packages/storybook/stories/histogram/HistogramDiffResultView.visual.ts | Update visual test story ID + describe name for renamed histogram diff story. |
| js/packages/storybook/stories/histogram/HistogramDiffResultView.stories.tsx | Move histogram diff result story under Diffs/Results/... and drop autodocs tagging. |
| js/packages/storybook/stories/histogram/HistogramDiffForm.stories.tsx | Remove broken story (required unmet LineageGraphContext mocking). |
| js/packages/storybook/stories/editor/DiffEditor.stories.tsx | Move editor story under Diffs/Results/SqlEditor/... and drop autodocs tagging. |
| js/packages/storybook/stories/data/ScreenshotDataGrid.stories.tsx | Move data grid story under Diffs/Results/DataGrid/... and drop autodocs tagging. |
| js/packages/storybook/stories/check/OutdatedCheckIndicator.stories.tsx | Move check stories under Checks/ and drop autodocs tagging. |
| js/packages/storybook/stories/check/CheckList.stories.tsx | Move check list under Checks/ and drop autodocs tagging. |
| js/packages/storybook/stories/check/CheckDetail.stories.tsx | Move check detail under Checks/ and drop autodocs tagging. |
| js/packages/storybook/stories/app/EnvInfo.stories.tsx | Move EnvInfo under Checks/, prune variants, keep key interaction plays. |
| { id: "primitives-split--horizontal-split", name: "Split - Horizontal" }, | ||
| ]; | ||
|
|
||
| for (const story of testStories) { |
Contributor
Author
There was a problem hiding this comment.
thanks for pointing it out! fixed.
gcko
approved these changes
May 26, 2026
Contributor
gcko
left a comment
gcko
left a comment
There was a problem hiding this comment.
Code Review: PR #1395
SHA ebc02668 · Verdict GO
Storybook-only refactor. Cross-reference verification:
- Visual regression test story IDs match titles + exports:
verify-ui-stories.visual.ts→Primitives/{SquareIcon,ToggleSwitch,EmptyState,DiffText,Split}with matching named exports (Default,Interactive,HorizontalSplit).
TimelineEvent.visual.ts→Checks/TimelineEventwith all 7 pinned story slugs present.
HistogramDiffResultView.visual.ts→Diffs/Results/Histogram/HistogramDiffResultViewwithDefaultandDatetimeColumnexports present. TimelineEvent.test.tsxconsumes 13 stories viacomposeStories()— all 13 remain in the trimmed stories file (15 total kept).- Deleted
HistogramDiffForm.stories.tsxandTopKDiffForm.stories.tsx— no remaining references in source tree (production components injs/packages/ui/srcuntouched). - Renamed
HistogramResultView.stories.tsx → HistogramDiffResultView.stories.tsxand matching.visual.tsrename — both consistent. - Title taxonomy: 0 duplicate
title:values across 47 changed files. tags: ["autodocs"]removed everywhere; no residualtags:left in story files.
Quality gates: pnpm lint, pnpm type:check, pnpm test (164 files / 3779 tests) all clean.
Notes
-
js/packages/storybook/stories/app/fixtures.ts:105—createMinimalEnvInfois now dead code; its only consumer (MinimalInfostory) was removed in this PR.
Evidence: no source-tree consumers (grep -rn createMinimalEnvInfo js/packages --include="*.ts" --include="*.tsx"excludingdist/returns only the export site).
Pass C. -
js/packages/storybook/stories/lineage/WholeModelImpact.stories.tsx:134— titleLineage/WholeModelImpactis not listed under the new taxonomy in the PR description, but exists as a top-level Lineage entry. Description is slightly stale relative to the final sidebar; no code issue.
Pass F.
…moke test Match the pattern used by the other .visual.ts files: a relative URL (honors playwright config baseURL / STORYBOOK_URL) and waitForSelector on #storybook-root instead of networkidle + arbitrary timeout. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR checklist
What type of PR is this?
refactor— storybook-only; no product code or user-facing behavior changes.What this PR does / why we need it:
Storybook had grown to 16 top-level folders and ~428 stories, with two competing taxonomies (
Visualizations/*vs top-levelSchema/,Editor/,Lineage/), singleton folders forApp/Editor/Schema/Summary/Timeline/Data, and a large variant explosion across primitives (EmptyState had 17, Toaster had 15, SquareIcon had 13 — most just demonstrating prop values already covered by argType controls). Finding features in the sidebar was hard.This PR reorganizes the sidebar into 4 top-level buckets and prunes variant-explosion files down to a
Default(with controls) plus the compositions that actually demonstrate something controls can't show.Final sidebar shape:
Notable prunes (16 → 3 pattern, with controls + compositions):
Other cleanup:
tags: ["autodocs"]from every story file. The autodocs page duplicated the canvas and slowed Vite cold-start.HistogramDiffForm+TopKDiffFormstories — broken (require aLineageGraphContextthe storybook mocks don't satisfy).HistogramResultView.stories.tsx→HistogramDiffResultView.stories.tsx(file now matches the exported component).verify-ui-stories.visual.ts(would have broken when autodocs was removed) to load story IDs directly.Net: 428 → 244 stories.
Which issue(s) this PR fixes: N/A
Special notes for your reviewer:
TimelineEvent.visual.ts(Playwright visual regression) and 6 more are consumed byTimelineEvent.test.tsxviacomposeStories()as unit-test fixtures.pnpm --filter @datarecce/storybook exec tscare MUI-augmentation drift, not regressions — they exist onmainand are fixed by a possible follow-up tsconfig PR. Canonicalcd js && pnpm type:checkpasses clean.Does this PR introduce a user-facing change?:
NONE