React: Fix several CSF factory bugs #33354

kasperpeulen · 2025-12-13T11:45:26Z

Closes #32620, Closes #32831, Closes #33024

What I did

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
- Play handlers can be composed via meta-level input, allowing story-level play to forward to meta.input.play.
Refactor
- More accurate story selection and richer metadata collection, including parameter checks and inclusion of child (test) stories with IDs.
- Project-level composed preview source now follows the selected factory story.
- Stricter React preview typings and new overloads for more precise args handling.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

nx-cloud · 2025-12-13T11:46:00Z

View your CI Pipeline Execution ↗ for commit 02804b5

Command	Status	Duration	Result
`nx run-many -t compile,check,knip,test,pretty-d...`	✅ Succeeded	10m 11s	View ↗

☁️ Nx Cloud last updated this comment at 2025-12-17 14:03:16 UTC

Copilot

Pull request overview

This PR fixes several CSF (Component Story Format) factory bugs related to type inference and story processing. The changes address three issues: incorrect handling of non-story exports in factory-based CSF files, type inference problems with meta args, and missing access to meta.input.play.

Key changes:

Fixed CSF file processing to correctly identify story exports instead of assuming the first export is a story
Improved TypeScript type inference for React meta factory args
Added new overload to support calling meta.story() without arguments when all required args are provided in meta

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
code/renderers/react/src/preview.tsx	Improved TypeScript types for ReactPreview meta return type, changed story method signatures from optional to required parameters, and added new overload for parameterless story() calls
code/renderers/react/src/csf-factories.test.tsx	Updated test to use `meta.story()` instead of `meta.story({})` to match new API, and added test verifying `meta.input.play` accessibility
code/core/src/preview-api/modules/store/csf/processCSFFile.ts	Fixed bug where first export was assumed to be a story by using `find()` to locate actual story exports, and added defensive check to ensure exports are Story objects in factory mode

Copilot · 2025-12-13T11:48:54Z

code/core/src/preview-api/modules/store/csf/processCSFFile.ts

+  const factoryStory = Object.values(namedExports).find((it) => isStory<TRenderer>(it));
+  if (factoryStory) {


The change from Object.values(namedExports)[0] to Object.values(namedExports).find((it) => isStory<TRenderer>(it)) is a bug fix that ensures the code finds an actual story export rather than assuming the first export is a story. However, there appears to be no test coverage for this scenario in processCSFFile.test.ts. Consider adding a test case where the first named export is not a story (e.g., a helper function or constant) to verify this fix works correctly.

Copilot · 2025-12-13T11:48:55Z

code/core/src/preview-api/modules/store/csf/processCSFFile.ts


    Object.keys(namedExports).forEach((key) => {
-      if (isExportStory(key, meta)) {
+      if (isExportStory(key, meta) && isStory<TRenderer>(namedExports[key])) {


The additional isStory check on line 61 ensures that only actual Story objects (created by meta.story()) are processed in factory-based CSF files, not just any export that passes the isExportStory filter. This is a defensive check that prevents processing non-Story exports as stories. Consider adding test coverage for a scenario where a factory-based CSF file has a named export that passes isExportStory but is not a Story object (e.g., a helper function with a name that looks like a story name).

Copilot · 2025-12-13T11:48:55Z

code/renderers/react/src/csf-factories.test.tsx

      });
      // @ts-expect-error disabled not provided ❌
-      const Basic = meta.story({});
+      const Basic = meta.story();


Unused variable Basic.

Suggested change

const Basic = meta.story();

meta.story();

Copilot · 2025-12-13T11:48:55Z

code/renderers/react/src/csf-factories.test.tsx

+    },
+  });
+
+  const ExtendedInteractionsStory = meta.story({


Unused variable ExtendedInteractionsStory.

Suggested change

const ExtendedInteractionsStory = meta.story({

meta.story({

coderabbitai · 2025-12-13T11:49:09Z

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

Selects the first exported story that satisfies isStory as the factory, narrows exported-story processing to values passing isStory, adds parameter checks and test-child handling with __id assignment, adjusts play/mount destructuring in Story.test, and refines React preview/Meta typings including meta.input.play behavior.

Changes

Cohort / File(s)	Summary
CSF processing & test-child handling `code/core/src/preview-api/modules/store/csf/processCSFFile.ts`	Pick the first export satisfying `isStory` as the factory; normalize component annotations from that factory; only process exports whose values satisfy `isStory`; attach parameter checks for each story; collect and normalize story children (tests) and assign `__id` for test child inputs; set `projectAnnotations` source from `factoryStory.meta.preview.composed`.
Story test execution tweak `code/core/src/csf/csf-factories.ts`	Generate Story.test play wrapper that destructures `{ mount, context }` from the StoryContext parameter (adds an ESLint disable for unused `mount`) before invoking play/test functions.
React preview typings `code/renderers/react/src/preview.tsx`	Add `InferArgs` alias and rework `ReactPreview`/`ReactMeta` public surface: reconstruct `args` via `Omit<...,'args'> & { args: ... }`, make primary `story` parameter required in overloads, add a variadic overload for optional-args scenarios, and include an internal `ts-expect-error` annotation.
Renderer test update `code/renderers/react/src/csf-factories.test.tsx`	Add/adjust test showing `meta.input.play` is accessible and that a story-level `play` can delegate to `meta.input.play`.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Focus areas:
- code/renderers/react/src/preview.tsx — verify conditional overloads, InferArgs correctness, and compatibility with existing public types.
- code/core/src/preview-api/modules/store/csf/processCSFFile.ts — confirm story detection/filtering, parameter-check wiring, and __id assignment for test children.
- code/core/src/csf/csf-factories.ts — ensure destructured { mount, context } semantics align with existing play/test expectations and test harness usage.

Possibly related PRs

CSF: Add Storybook test syntax (Storybook v10) #32455 — related CSF test-syntax additions (story.test children and test-id/index handling) overlapping with child-test processing and __id logic.
Core: 10.1 features WIP #32810 — overlaps with CSF processing/enrichment changes and story/meta normalization touched here.
Fix: Export interface declaration for ReactMeta #32915 — touches ReactMeta/preview typings that intersect with the preview.tsx type reshaping in this change.

✨ Finishing touches

📝 Generate docstrings

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f817405 and 365c71d.

📒 Files selected for processing (1)

code/renderers/react/src/preview.tsx (5 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

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