React: Change examples to stories in manifests and show correct examples and prop types

[kasperpeulen]

Closes #

What I did

• Updated the manifest to convert examples to stories
• Also show calculated prop types and errors in manifest

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 publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• New Features
  • Component docs now show parsed prop types, descriptions, and prop code blocks.
  • Added a Properties panel with prop usage details and examples.
  • Documentation/examples converted to a stories-based format for clearer organization.
  • New story-level status and badges to surface story warnings/errors and prop-type errors.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit fcef900

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

---

☁️ Nx Cloud last updated this comment at 2025-10-31 22:44:06 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

Replaces example-focused manifest fields and UI with story-focused fields and prop-type information: renames ComponentManifest.examples → stories, marks the componentManifest generator config experimental, adds parseReactDocgen/ParsedDocgen exports, and updates manifest generation, rendering, tests, types, and related CSS/UI to surface prop types and story errors.

Changes

Cohort / File(s)	Summary
Core manifest renderer & UI code/core/src/core-server/manifest.ts	Replaced example metrics/UI with story and prop-type metrics; added prop-type badge and properties panel; renamed CSS selectors/panels from example-* → story-* / props; added and exported parseReactDocgen() and ParsedDocgen type; adjusted classNames/state keys (e.g., hasComponentError → hasPropTypeError).
Type definitions code/core/src/types/modules/core-common.ts	Renamed ComponentManifest.examples → ComponentManifest.stories; renamed StorybookConfigRaw.componentManifestGenerator → StorybookConfigRaw.experimental_componentManifestGenerator.
Manifest generation (react renderer) code/renderers/react/src/componentManifest/generator.ts	Switched manifest output field from examples to stories across generation and error paths; normalized error object shape.
Generator tests / snapshots code/renderers/react/src/componentManifest/generator.test.ts	Updated tests and inline snapshots to expect stories arrays (name/snippet) instead of examples; added/adjusted summary where present.
Build/dev server local typing changes code/core/src/core-server/build-static.ts, code/core/src/core-server/dev-server.ts	Removed explicit local type annotations for componentManifestGenerator and removed unused imports; now use inferred types and call experimental_componentManifestGenerator preset.

Sequence Diagram

sequenceDiagram
    participant Gen as Component Manifest Generator
    participant Doc as React DocGen Parser
    participant Render as Manifest Renderer (server)
    participant UI as Manifest HTML/UI

    Gen->>Doc: Provide reactDocgen for component
    Doc-->>Gen: ParsedDocgen (prop types, descriptions)
    Gen->>Render: Emit component manifest with `stories` and ParsedDocgen
    Render->>UI: Render badges/panels (prop-type badge, properties panel, story errors)
    UI-->>User: Display component entry (stories, props, story statuses)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Areas to inspect closely:
  • parseReactDocgen() implementation and exported ParsedDocgen type for correctness and edge cases.
  • All migrations from examples → stories to ensure no remaining references or incompatible consumers.
  • UI/CSS selector renames (example-* → story-*/props) and filtering logic in manifest.ts.
  • Updated tests/snapshots for completeness and any new optional fields (e.g., summary).

Possibly related PRs

• Core: 10.1 features WIP #32810 — related changes to component manifest shape and react-docgen integration; likely overlaps in generator and docgen handling.
• React: Improve error handling of component manifest generation #32855 — modifications to manifest generation and public ComponentManifest types (examples→stories), directly related to generator/test changes.
• React: Add manifests/components.html page #32905 — changes to manifest renderer/UI that touch the same manifest HTML rendering file and UI panels.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6316419 and fcef900.

📒 Files selected for processing (2)

• code/core/src/core-server/build-static.ts (1 hunks)
• code/core/src/core-server/dev-server.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (use yarn lint:js:cmd <file>)

Files:

• code/core/src/core-server/build-static.ts
• code/core/src/core-server/dev-server.ts

**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions from modules when they need to be unit-tested

Files:

• code/core/src/core-server/build-static.ts
• code/core/src/core-server/dev-server.ts

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

In application code, use Storybook loggers instead of console.* (client code: storybook/internal/client-logger; server code: storybook/internal/node-logger)

Files:

• code/core/src/core-server/build-static.ts
• code/core/src/core-server/dev-server.ts

{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/core/src/core-server/build-static.ts
• code/core/src/core-server/dev-server.ts

🧠 Learnings (3)

📓 Common learnings

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`

Applied to files:

• code/core/src/core-server/build-static.ts

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)

Applied to files:

• code/core/src/core-server/build-static.ts

🧬 Code graph analysis (2)

code/core/src/core-server/build-static.ts (2)

code/renderers/react/src/componentManifest/generator.ts (1)

• componentManifestGenerator (20-154)

code/renderers/react/src/preset.ts (1)

• componentManifestGenerator (11-11)

code/core/src/core-server/dev-server.ts (2)

code/renderers/react/src/componentManifest/generator.ts (1)

• componentManifestGenerator (20-154)

code/renderers/react/src/preset.ts (1)

• componentManifestGenerator (11-11)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (3)

code/core/src/core-server/build-static.ts (1)

169-171: LGTM: Type inference is appropriate here.

The removal of the explicit type annotation is fine—TypeScript will correctly infer the type from presets.apply(). This aligns with the broader PR refactoring to rely on inferred types for manifest generators.

code/core/src/core-server/dev-server.ts (2)

172-174: Consistent with the type inference change on line 147.

Same type annotation removal pattern as the first occurrence. The change maintains consistency throughout the feature flag handling.

---

147-149: Type inference is correct and safer than explicit annotation.

The inferred type from options.presets.apply('experimental_componentManifestGenerator') is ComponentManifestGenerator | undefined because the preset property is optional in StorybookConfigRaw. This is more accurate than a hardcoded ComponentManifestGenerator annotation. The code correctly handles this with a truthy check on line 151 before using the value, following the same pattern used elsewhere in the file (e.g., line 143 for 'features'). No changes needed.

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

code/core/src/core-server/manifest.ts (2)

774-801: New public API: ParsedDocgen type and parseReactDocgen function.

These exports add new public API surface for parsing React DocGen data. The implementation correctly extracts prop information and delegates type serialization.

Note: As per the coding guidelines, functions exported from modules should be unit-tested. Consider adding tests for parseReactDocgen.

---

803-870: Type serialization logic handles complex TypeScript structures.

The serializeTsType helper comprehensively handles unions, intersections, functions, objects, and generics. The recursive implementation with fallbacks to raw values is appropriate for react-docgen type structures.

While this is an internal helper, consider adding unit tests given its complexity, especially for edge cases like deeply nested generics or recursive type references.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0133ff2 and 6316419.

📒 Files selected for processing (4)

• code/core/src/core-server/manifest.ts (16 hunks)
• code/core/src/types/modules/core-common.ts (2 hunks)
• code/renderers/react/src/componentManifest/generator.test.ts (5 hunks)
• code/renderers/react/src/componentManifest/generator.ts (6 hunks)

🧰 Additional context used

📓 Path-based instructions (7)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (use yarn lint:js:cmd <file>)

Files:

• code/core/src/types/modules/core-common.ts
• code/renderers/react/src/componentManifest/generator.ts
• code/renderers/react/src/componentManifest/generator.test.ts
• code/core/src/core-server/manifest.ts

**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions from modules when they need to be unit-tested

Files:

• code/core/src/types/modules/core-common.ts
• code/renderers/react/src/componentManifest/generator.ts
• code/renderers/react/src/componentManifest/generator.test.ts
• code/core/src/core-server/manifest.ts

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

In application code, use Storybook loggers instead of console.* (client code: storybook/internal/client-logger; server code: storybook/internal/node-logger)

Files:

• code/core/src/types/modules/core-common.ts
• code/renderers/react/src/componentManifest/generator.ts
• code/renderers/react/src/componentManifest/generator.test.ts
• code/core/src/core-server/manifest.ts

{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/core/src/types/modules/core-common.ts
• code/renderers/react/src/componentManifest/generator.ts
• code/renderers/react/src/componentManifest/generator.test.ts
• code/core/src/core-server/manifest.ts

code/**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx

Files:

• code/renderers/react/src/componentManifest/generator.test.ts

**/*.test.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)

**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together

Files:

• code/renderers/react/src/componentManifest/generator.test.ts

**/*.@(test|spec).{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.@(test|spec).{ts,tsx,js,jsx}: Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Mock external dependencies in tests using vi.mock() (e.g., filesystem, loggers)

Files:

• code/renderers/react/src/componentManifest/generator.test.ts

🧠 Learnings (5)

📓 Common learnings

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios

Applied to files:

• code/core/src/types/modules/core-common.ts
• code/renderers/react/src/componentManifest/generator.test.ts

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there

Applied to files:

• code/core/src/types/modules/core-common.ts

📚 Learning: 2025-09-24T09:39:39.233Z

Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.

Applied to files:

• code/core/src/types/modules/core-common.ts

📚 Learning: 2025-09-17T08:11:47.197Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors

Applied to files:

• code/core/src/core-server/manifest.ts

🧬 Code graph analysis (2)

code/renderers/react/src/componentManifest/generator.ts (1)

code/core/src/csf-tools/CsfFile.ts (1)

• stories (968-970)

code/core/src/core-server/manifest.ts (1)

code/frameworks/react-vite/src/plugins/react-docgen.ts (1)

• reactDocgen (40-98)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: normal

🔇 Additional comments (12)

code/core/src/types/modules/core-common.ts (2)

355-355: Breaking change: examples renamed to stories.

The field rename is consistent with the PR objectives to shift from example-based to story-based terminology. The type signature correctly includes the new error field structure.

---

384-384: Good practice marking the API as experimental.

Prefixing with experimental_ appropriately signals that this API is unstable and may change in future releases.

code/renderers/react/src/componentManifest/generator.ts (4)

41-56: LGTM: Stories array construction is correct.

The mapping logic correctly transforms CSF stories into the manifest format, with appropriate error handling for code snippet generation failures.

---

58-64: Correct base object structure.

The base manifest object properly includes the stories field and satisfies the updated ComponentManifest type.

---

66-87: Error handling preserves stories data.

The error path correctly returns the manifest with stories included, maintaining data consistency even when component analysis fails.

---

90-141: Consistent stories field across all code paths.

All return paths (success and error scenarios) correctly include the stories field, ensuring the returned manifests consistently match the updated type definition.

code/renderers/react/src/componentManifest/generator.test.ts (3)

300-318: Test snapshots correctly updated for stories structure.

The snapshots accurately reflect the renamed field and new structure, with stories containing name, snippet, and optional error fields.

---

396-410: Header component snapshot properly structured.

The stories array correctly captures the LoggedIn and LoggedOut stories with their respective snippets.

---

570-582: Error handling in stories correctly captured.

The snapshot properly shows story-level errors with the expected error object structure containing name and message fields.

code/core/src/core-server/manifest.ts (3)

13-34: Metrics and UI updated to reflect prop type and story terminology.

The totals calculation and pill rendering correctly shift from "component errors" to "prop type errors" and add new story-based metrics, aligning with the PR's objectives.

---

579-604: analyzeComponent correctly tracks prop type and story errors.

The function properly computes statistics for both prop type errors and story-level errors, providing comprehensive component health metrics.

---

614-772: Card rendering extensively enhanced with prop types and stories panels.

The refactored rendering logic adds comprehensive display of:

• Prop type information from React DocGen
• Story-level errors and successes
• Appropriate badges and toggles

The structure is consistent and aligns with the updated CSS.