React: resolve RDT referenced tsconfigs

[ia319]

Closes #34710

What I did

Root cause:

RDT only used the root tsconfig.json resolved from process.cwd() when parsing component manifest props.

In the Vite React TS sandbox, the root tsconfig.json only contains:

{
  "files": [],
  "references": [{ "path": "./tsconfig.app.json" }]
}

As a result, the parser output becomes:

parsed.fileNames = []

Storybook then creates the TypeScript program using this empty root config. Since Button.tsx is not included in the program, react-docgen-typescript cannot find the component docs and returns an empty array. The manifest is therefore generated with:

react-docgen-typescript found no component docs

Changes:

When generating the component manifest, RDT now selects the tsconfig that actually contains the current component file.

• Starting from the root tsconfig.json, it traverses projectReferences to find the referenced tsconfig that includes the component file.
• The selected tsconfig is then used to create the TypeScript program and RDT parser, instead of always using the root config.
• Parsers are cached by tsconfig + parser options, and a file-to-tsconfig index is maintained to avoid repeated scans.

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

Verification steps:

yarn task sandbox --template react-vite/default-ts --start-from auto

cd /home/ia/front-end/storybook-sandboxes/react-vite-default-ts

3. Update .storybook/main.ts to enable RDT:

typescript: {
  reactDocgen: 'react-docgen-typescript',
},

yarn build-storybook

5. Inspect the generated manifest:

node -e "const fs=require('fs'); const m=JSON.parse(fs.readFileSync('storybook-static/manifests/components.json','utf8')); console.log(m.components['example-button']);"

Before the fix, the output shows:

error.name = "react-docgen-typescript found no component docs"

and the Button props are missing.
After the fix, example-button.reactDocgenTypescript.props includes:

primary
backgroundColor
size
label
onClick

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

• Improvements

  • Enhanced React component parsing for TypeScript projects with complex configurations and multiple project references, improving type resolution accuracy.

• Tests

  • Added test suite validating component parsing and type extraction with TypeScript project references.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 079c3e0a-498f-405a-85b3-b724b5e392c0

📥 Commits

Reviewing files that changed from the base of the PR and between b175a22 and c35f2f6.

📒 Files selected for processing (1)

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

✅ Files skipped from review due to trivial changes (1)

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

---

📝 Walkthrough

Walkthrough

This PR refactors TypeScript parser management in the React component manifest to resolve and cache TypeScript programs per-file by finding the tsconfig that owns a file (including projectReferences), and caches/rebuilds ts.Program and react-docgen-typescript FileParser instances keyed by (tsconfigPath, parserOptions).

Changes

Per-file tsconfig parser resolution and caching

Layer / File(s)	Summary
Path utilities and parser/program caching infrastructure code/renderers/react/src/componentManifest/reactDocgenTypescript.ts	Added join import and global cache maps for programs/parsers keyed by (tsconfigPath, parserOptions). Added canonical path normalization helpers and updated invalidateParser() to clear per-tsconfig caches.
tsconfig discovery and file-to-config resolution code/renderers/react/src/componentManifest/reactDocgenTypescript.ts	Implemented cached tsconfig parsing and findTsconfigForFile() that traverses projectReferences recursively with memoization and cycle protection to locate the config containing a source file.
Per-file getParser refactoring with per-tsconfig program caching code/renderers/react/src/componentManifest/reactDocgenTypescript.ts	Refactored getParser() to accept filePath, resolve the applicable tsconfig, and create/cache incrementally rebuilt ts.Program and react-docgen-typescript FileParser instances keyed by (tsconfigPath, userOptions).
Integration through parseWithReactDocgenTypescript entry point code/renderers/react/src/componentManifest/reactDocgenTypescript.ts, code/renderers/react/src/componentManifest/reactDocgenTypescript.test.ts	Updated parseWithReactDocgenTypescript() to call getParser(filePath, userOptions). Added tests that create a temp project with referenced tsconfigs and assert component docgen output for a sample Button.tsx.

Sequence Diagram(s)

sequenceDiagram
  participant API as parseWithReactDocgenTypescript
  participant GetParser as getParser(filePath, userOptions)
  participant TsconfigLookup as findTsconfigForFile
  participant Cache as program/fileParser cache
  participant Parser as react-docgen-typescript FileParser
  API->>GetParser: request parser for filePath
  GetParser->>TsconfigLookup: resolve tsconfig owning filePath
  TsconfigLookup-->>GetParser: tsconfig path
  GetParser->>Cache: lookup (tsconfigPath, userOptions)
  alt cache hit
    Cache-->>GetParser: return cached Program/FileParser
  else cache miss
    GetParser->>Parser: build ts.Program + FileParser
    Parser-->>GetParser: FileParser instance
    GetParser->>Cache: store Program/FileParser
  end
  GetParser-->>API: Program, FileParser, typescript
  API->>Parser: parse(filePath) using resolved parser

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Possibly related PRs

• storybookjs/storybook#33818: Introduces parseWithReactDocgenTypescript and initial parser caching/invalidation wiring that this PR extends.
• storybookjs/storybook#34353: Also modifies tsconfig discovery and getParser initialization behavior in reactDocgenTypescript.ts.

---

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