Core: Add missing subtype props #32490

ghengeveld · 2025-09-17T10:59:57Z

Closes #

What I did

Added subtype: 'story' where it was missing in mock/story/test data. This fixes the single story hoisting story.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

New Features
- Add per-story test functions with deep-linking, execution, and Vitest integration; tests appear as children under stories with a new test icon.
- Overhauled Tags filter: include/exclude selections, tag presets, reset-to-defaults, refined built-in/hidden tags.
UI
- Sidebar shows test nodes with statuses, improved keyboard navigation and selection; search/highlighting support tests.
- Controls: hide “Save” for test entries.
- Fix tooltip list item overflow.
Documentation
- Switch init/upgrade commands to @latest; improve Vitest config snippets; refresh release notes.
Chore
- Remove Docs table-of-contents script to simplify dependencies.

coderabbitai · 2025-09-17T11:00:13Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Adds story test functionality across CSF and UI: introduces story entries with subtype (story/test), parent links, test indexing, rendering, and execution paths. Refactors vitest plugin/manager logic, preview/store extraction, and sidebar/tree rendering. Overhauls tag filtering to include/exclude with presets. Updates templates, docs, E2E/tests, and misc utilities.

Changes

Cohort / File(s)	Summary
Story index subtype and tests plumbing `code/core/src/types/modules/indexer.ts`, `.../api-stories.ts`, `.../core-common.ts`, `.../csf.ts`, `code/core/src/core-server/utils/StoryIndexGenerator.ts`, `.../summarizeIndex.ts`, `.../summarizeIndex.test.ts`, `.../build-index.test.ts`, `.../stories-json.test.ts`, `.../__tests__/index-extraction.test.ts`, `code/core/src/preview-api/modules/store/sortStories.ts`, `.../storySort.test.ts`, `code/core/src/manager-api/lib/stories.ts`, `.../stories.test.ts`, `code/core/src/manager-api/modules/stories.ts`, `.../root.tsx`, `code/core/src/manager/components/sidebar/Tree.tsx`, `.../TreeNode.tsx`, `.../TreeNode.stories.tsx`, `.../HighlightStyles.tsx`, `.../SearchResults.tsx`, `.../mockdata.ts`, `.../Explorer.stories.tsx`, `.../Tree.stories.tsx`, `.../MobileNavigation.stories.tsx`, `.../Refs.tsx`, `.../useExpanded.ts`, `.../useHighlighted.ts`, `code/renderers/server/src/preset.ts`, `code/core/src/preview-api/modules/preview-web/PreviewWeb.mockdata.ts`, `.../PreviewWeb.test.ts`, `.../render/StoryRender.test.ts`, `.../store/StoryIndexStore.test.ts`, `.../store/StoryStore.test.ts`, `code/core/src/preview/preview-navigator.stories.tsx`, `code/core/src/manager-api/tests/*`	Adds subtype field and test entries to story index/types; links tests to parent stories; updates transformations, summaries, sorting, rendering (tree, icons, highlighting), and numerous tests/mock data to include subtype and test handling.
CSF factories: story tests and children `code/core/src/csf/csf-factories.ts`, `.../csf-factories.test.ts`, `code/core/src/csf/index.ts`, `code/core/src/csf/story.ts`, `code/core/src/preview-api/modules/store/csf/processCSFFile.ts`, `.../csf-factory-utils.ts`, `code/core/src/preview-api/modules/store/csf/prepareStory.ts`	Adds Story.test API, child stories, getStoryChildren export, toTestId helper, TestFunction type, processing of child tests into CSF, and tag override for test-fn.
CSF tools: parsing and transform `code/core/src/csf-tools/CsfFile.ts`, `.../CsfFile.test.ts`, `code/core/src/csf-tools/storyIndexer.test.ts`, `code/core/src/csf-tools/vitest-plugin/transformer.ts`, `.../transformer.test.ts`	Parses story-level test calls, emits indexed test entries (subtype test, parent links, tags), exposes getStoryTests; vitest transformer refactor to describe/test per story with double-space delimiting and source map guards; updates tests.
Vitest integration `code/addons/vitest/src/node/vitest-manager.ts`, `.../test-manager.test.ts`, `code/addons/vitest/src/vitest-plugin/test-utils.ts`	Introduces DOUBLE_SPACES naming, robust single-story/run regex logic, filtered stories set, improved fetch with timeout; testStory signature expanded (storyId/testName), child test selection, skip by tags; tests updated/added.
Storybook config and preview wiring `code/.storybook/main.ts`, `code/.storybook/preview.tsx`, `code/addons/docs/src/preview.ts`, `.../typings.d.ts`, `code/addons/docs/src/blocks/blocks/external/ExternalPreview.ts`	Limits loaded stories to test-fn file, decorator updated to handle testFunction, removes tocbot integration and global, adds subtype on docs external preview entries.
Tags filtering include/exclude model `code/core/src/manager/components/sidebar/TagsFilter.tsx`, `.../TagsFilter.stories.tsx`, `.../TagsFilterPanel.tsx`, `.../TagsFilterPanel.stories.tsx`, `code/core/src/manager/components/sidebar/Sidebar.tsx`	Replaces single selection with include/exclude sets, presets support, hidden/built-in tags exports, reset/default behaviors, updated panel props/UI, Sidebar passes tagPresets; stories updated.
New test stories and templates `code/core/src/component-testing/components/test-fn.stories.tsx`, `code/renderers/react/template/stories/test-fn.stories.tsx`, `code/renderers/react/template/stories/preview.ts`	Adds example test-enabled stories and CSF4 preview/template for React demonstrating story tests and extensions.
E2E tests and utils `code/e2e-tests/component-tests.spec.ts`, `code/e2e-tests/util.ts`, `code/e2e-tests/json-files.spec.ts`, `code/e2e-tests/tags.spec.ts`, `code/e2e-tests/preview-api.spec.ts`	Adds deepLinkToStory testName support, new test-function suite, selector tweaks for tags, expected subtype updates, helper checkTemplate; cleans unused import.
Manager UI tweaks `code/core/src/manager/components/sidebar/components/CollapseIcon.tsx`, `code/core/src/manager/components/sidebar/IconSymbols.tsx`	CollapseIcon refactor (prop forwarding, currentColor), adds test icon and supports 'test' in UseSymbol.
Minor fixes and misc `.gitignore`, `CHANGELOG.prerelease.md`, `code/core/src/components/components/tooltip/ListItem.tsx`, `code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx`, `code/frameworks/sveltekit/src/preset.ts`, `code/renderers/react/src/preview.tsx`, `docs/_snippets/`, `docs/get-started/frameworks/angular.mdx`, `docs/versions/latest.json`, `code/lib/cli-storybook/src/`, `scripts/sandbox/generate.ts`	Path ignore change, formatting/links updates, overflow minWidth, comment cleanup, unused type removal, TS comment additions, docs commands to latest, migration URLs adjusted, sandbox script tweak.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Sidebar as Manager Sidebar
  participant API as Manager API
  participant Preview as Preview Store
  participant CSF as CSF Processor
  participant Vitest as Vitest Plugin/Runner

  User->>Sidebar: Click test node (type=story, subtype=test)
  Sidebar->>API: selectStory(storyId:test)
  API->>Preview: Render selection
  Preview->>CSF: Resolve parent story + child test via getStoryChildren
  CSF-->>Preview: Composed story/test (storyId, testName)
  Preview->>Vitest: testStory(exportName, story|child, meta, skipTags, storyId, testName)
  Vitest->>Vitest: Compose, skip by tags, run()
  Vitest-->>Preview: Reports/status
  Preview-->>API: Update status
  API-->>Sidebar: Reflect test icon/status

sequenceDiagram
  autonumber
  participant Indexer as StoryIndexGenerator
  participant Types as Types/Indexer
  participant Manager as Manager Hash
  participant UI as Sidebar Tree

  Indexer->>Types: Emit entries {type:story, subtype:'story'|'test', parent?}
  Note right of Indexer: TEST_FN_TAG tags set on tests
  Manager->>Manager: Build hash, attach test children to parent story
  UI->>Manager: Fetch prepared index
  Manager-->>UI: Entries with subtype, children
  UI->>UI: Render icons (story/test), expand/collapse, select

sequenceDiagram
  autonumber
  participant User
  participant Tags as TagsFilter
  participant Panel as TagsFilterPanel
  participant Hash as Stories Hash Filter

  User->>Tags: Open tag filter
  Tags->>Panel: Show tags with include/exclude states
  User->>Panel: Toggle include/exclude for Tag X
  Panel-->>Tags: includedTags/excludedTags updated
  Tags->>Hash: Apply filter (include any included AND exclude excluded)
  Hash-->>User: Filtered sidebar list

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120+ minutes

Poem

I thump my paw: two spaces wide,
New tests now nest by parent’s side.
The tags hop twice—include, exclude—
The tree sprouts beakers, neatly hued.
I chase each story’s subtle thread,
And wink: “All green!”—then back to bed. 🐇✨

Pre-merge checks and finishing touches and finishing touches and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "Core: Add missing subtype props" is concise, a single sentence, and accurately summarizes the primary change in the diff — adding missing subtype properties across core modules, tests, and mock data; it clearly conveys scope ("Core") and intent ("Add missing subtype props") so a reviewer scanning history understands the main change.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2025-09-17T11:05:21Z

View your CI Pipeline Execution ↗ for commit 7913c9d

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	43s	View ↗

☁️ Nx Cloud last updated this comment at 2025-09-17 21:00:08 UTC

storybook-app-bot · 2025-09-17T11:12:32Z

Package Benchmarks

^{Commit: 7913c9d, ran on 17 September 2025 at 20:22:07 UTC}

No significant changes detected, all good. 👏

Add missing subtype properties

25f0f92

ghengeveld requested a review from yannbf September 17, 2025 10:59

ghengeveld self-assigned this Sep 17, 2025

ghengeveld requested review from jonniebigodes and kylegach as code owners September 17, 2025 10:59

ghengeveld added cleanup Minor cleanup style change that won't show up in release changelog ci:normal labels Sep 17, 2025

ghengeveld changed the base branch from next to feature/test-syntax-in-csf-sb10 September 17, 2025 11:00

yannbf approved these changes Sep 17, 2025

View reviewed changes

ghengeveld added 2 commits September 17, 2025 21:44

Change property order

9183a9b

Remove subtype prop

7913c9d

ghengeveld merged commit ba4758a into feature/test-syntax-in-csf-sb10 Sep 17, 2025
55 of 56 checks passed

ghengeveld deleted the add-missing-subtype-props branch September 17, 2025 21:01

This was referenced Sep 25, 2025

CSF tests each and matrix #32556

Open

Core: Make subtype an optional property on an index input #32602

Merged

This was referenced Oct 3, 2025

Docs: Update tags, add filtering #32627

Merged

Addon-Vitest: Extra changes for Vitest 4 #32600

Closed

Nextjs: New rsc vite framework #32412

Open

This was referenced Oct 15, 2025

React: Add components.json for dev and build with examples snippets #32682

Merged

React: Add component name to component manifest #32746

Closed

React: Implement manifests/component.json for React #32751

Merged

This was referenced Oct 24, 2025

Addon-Vitest: Support Vitest 4 #32819

Merged

React: Experimental code examples #32813

Merged

React: Improve error handling of component manifest generation #32855

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Core: Add missing subtype props #32490

Core: Add missing subtype props #32490

Uh oh!

ghengeveld commented Sep 17, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Sep 17, 2025 •

edited

Loading

Review skipped

Uh oh!

nx-cloud bot commented Sep 17, 2025 •

edited

Loading

Uh oh!

storybook-app-bot bot commented Sep 17, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Core: Add missing subtype props #32490

Core: Add missing subtype props #32490

Uh oh!

Conversation

ghengeveld commented Sep 17, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Pre-merge checks and finishing touches and finishing touches and finishing touches

Uh oh!

nx-cloud bot commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

storybook-app-bot bot commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ghengeveld commented Sep 17, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Sep 17, 2025 •

edited

Loading

nx-cloud bot commented Sep 17, 2025 •

edited

Loading

storybook-app-bot bot commented Sep 17, 2025 •

edited

Loading