React: Add react-docgen-typescript to component manifest by kasperpeulen · Pull Request #33818 · storybookjs/storybook

kasperpeulen · 2026-02-10T14:11:12Z

What I did

Adds react-docgen-typescript as an alternative docgen engine for the component manifest system, selectable via the existing reactDocgen config in main.ts. The manifest uses a single engine based on this config — either react-docgen (default) or react-docgen-typescript.

// main.ts — opt in to react-docgen-typescript for the manifest
typescript: {
  reactDocgen: 'react-docgen-typescript',
}

Manages a singleton TS program with incremental rebuild via previousProgram (preserved across manifest passes so TypeScript reuses unchanged source files)
Updates the manifest debugger HTML page to show which engine produced results, performance tips, and a recommendation to switch to react-docgen-typescript when using the default react-docgen
Extracts findTsconfigPath to shared utils
Adds react-docgen-typescript as explicit dependency

Prop filtering

RDT resolves the full type tree, which includes hundreds of inherited props from React, DOM, and CSS-in-JS libraries. A single heuristic (getLargeNonUserPropSources) filters bulk props while preserving meaningful ones:

When a single source file (in node_modules or ending in .d.ts) contributes >30 props, all props from that source are filtered out
This catches React built-ins (HTMLAttributes from @types/react → 200+ props), DOM interfaces (lib.dom.d.ts → hundreds of props), and CSS-in-JS system props (Panda CSS style-props.d.ts → 704 props)
User-authored .ts files are never filtered — only node_modules and generated .d.ts files are candidates
Small interfaces (e.g. RefAttributes with just ref) pass through since they're below the threshold
Example: Park UI Button goes from 850 → 12 props after filtering

QA Reports

Tested on 5 real-world React component libraries to compare react-docgen (RD) vs react-docgen-typescript (RDT):

Project	RD components	RDT components	RD props	RDT props	Winner
Mantine (183)	19 (10%)	151 (83%)	535	12,287	RDT
Flowbite-React (44)	42 (95%)	42 (95%)	282	308	Tie (slight RDT edge)
Primer React (225)	189 (84%)	161 (72%)	1,016	1,061	Tie (complementary)
Park UI (54)	8 (15%)	25 (46%)	11	393	RDT
Reshaped (78)	0 (0%)	63 (81%)	0	827	RDT
Total (584)	258 (44%)	441 (76%)	1,844	14,876	RDT

Why react-docgen-typescript

RDT is the clear choice for projects that need it:

RDT handles everything RD handles — where both work (Flowbite, Primer), results are nearly identical
RDT handles patterns RD cannot — factory wrappers (Mantine), namespace type imports (Reshaped), and complex generic types are completely invisible to RD's AST pattern matching
RDT is the only option for 2 out of 5 projects — Mantine and Reshaped get essentially zero useful results from RD
The trade-off is performance — RDT adds ~2s per request due to TypeScript compilation

The one area where RD has an edge is Primer React, where it covers 28 more components. This is likely due to specific patterns RDT doesn't match (e.g. components without explicit type annotations). Users can choose the engine that works best for their codebase.

Performance per project

Project	Components	Total	react-docgen	react-docgen-typescript	RDT init	RDT parse+filter
Mantine	183	15.8s	6.2s	8.1s	2.5s	5.7s
Flowbite-React	44	5.2s	2.2s	2.7s	1.4s	1.3s
Primer React	225	9.0s	2.7s	4.1s	1.6s	2.5s
Park UI	54	37.9s	0.9s	36.8s	1.9s	34.9s
Reshaped	78	4.4s	0.8s	2.1s	0.9s	1.2s

RDT init = ts.createProgram (one-time cost, reused across components)
RDT parse+filter = parseWithProgramProvider + prop filtering per component

Park UI performance (37.9s) — root cause

Park UI uses Panda CSS, which generates massive in-project type definitions in styled-system/types/:

style-props.d.ts — 704 CSS properties in SystemProperties (7,503 lines)
conditions.d.ts — 136 conditions (_hover, _focus, sm, md, lg, _dark, etc.)
ConditionalValue<V> — recursive type: V | Array<V | null> | { [K in keyof Conditions]?: ConditionalValue<V> }
Nested<P> — recursively self-referential: P & { [K in Selectors]?: Nested<P> } & { [K in Conditions]?: Nested<P> }

Every styled component's props type is HTMLStyledProps<T> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>, where JsxStyleProps = SystemStyleObject & WithCss expands to the full 704×136 recursive type. TypeScript must resolve this for each of the 54 components, taking 500ms–2.7s per component.

The bottleneck is checker.getApparentProperties() inside react-docgen-typescript's getPropsInfo() — this fully resolves the type tree before any filtering can happen. RDT's propFilter option runs after type resolution, so it cannot short-circuit the expensive work. RDT's internal propertiesOfPropsCache only caches props from node_modules, so Panda CSS's in-project .d.ts types bypass the cache between components.

Our system props filter correctly removes these props from the output (e.g. Button: 850 → 12 props), but the performance cost is unavoidable with the current RDT architecture.

Mantine — react-docgen (RD) vs react-docgen-typescript (RDT)

RDT: 151/183 components (82.5%) — RD: 19/183 (10.4%)

Summary

Metric	react-docgen (RD)	react-docgen-typescript (RDT)
Components with props	19 / 183 (10.4%)	151 / 183 (82.5%)
Total props extracted	535	12,287
Components with 0 props	164	32

RDT extracts 23x more props and covers 8x more components than RD on this codebase.

Why RDT wins on Mantine

Mantine wraps nearly all components in factory() or polymorphicFactory():

// Button — RD gets 0 props, RDT gets 81
export const Button = polymorphicFactory<ButtonFactory>((_props, ref) => { ... });

// Select — RD gets 0 props, RDT gets 126
export const Select = factory<SelectFactory>((_props, ref) => { ... });

react-docgen (AST/Babel) pattern-matches known React patterns like function Foo(props: FooProps) or React.forwardRef(...). It cannot follow types through factory() wrappers — it just sees a function call.

react-docgen-typescript uses the TypeScript compiler, so it resolves ButtonFactory → ButtonProps → all individual props, including inherited style/theme/polymorphic props.

The only components RD successfully parses are the ones that use plain export function:

// Accordion — RD gets 78 props (no factory wrapper)
export function Accordion<Multiple extends boolean = false>(_props: AccordionProps<Multiple>) { ... }

Breakdown by category

Both have props (19 components):

Component	RD	RDT	Diff
ModalBase	80	80	equal
Accordion	78	78	equal
InlineInput	76	76	equal
UnstyledButton	8	69	+61
Box	63	63	equal
Menu	52	52	equal
HoverCard	6	48	+42
Popover	47	47	equal
Combobox	44	44	equal
MantineProvider	16	16	equal
Transition	13	13	equal
NumberFormatter	9	9	equal
FocusTrap	4	4	equal
CopyButton	3	3	equal
DirectionProvider	3	3	equal

15 of 19 have equal prop counts. RDT finds significantly more for UnstyledButton (+61) and HoverCard (+42).

RDT-only (132 components) — top examples:

Component	RDT props
DatePickerInput	178
DateTimePicker	174
DateInput	171
MultiSelect	129
Select	126
NumberInput	124
Spotlight	117
Autocomplete	115
Button	81
Table	71
Chip	68
Avatar	63

All of these use factory() / polymorphicFactory() — completely invisible to RD.

Neither (32 components): Hooks (use-click-outside, use-move, etc.), guides, changelogs, and utilities without component props.

Conclusion

For libraries using higher-order component patterns like Mantine's factory(), RDT is essential — RD misses 132 out of 151 components entirely. Where both work, they produce identical results. RDT is the strictly better choice for Mantine.

Flowbite-React — react-docgen (RD) vs react-docgen-typescript (RDT)

RDT: 42/44 components (95.5%) — RD: 42/44 (95.5%)

Summary

Metric	react-docgen (RD)	react-docgen-typescript (RDT)
Components with props	42 / 44 (95.5%)	42 / 44 (95.5%)
Total props extracted	282	308
Components with 0 props	2	2

Both tools perform well on this codebase. RDT extracts 9% more props overall.

Setup: tsconfig paths trick

Flowbite-react's storybook lives in apps/storybook/ and imports components from the flowbite-react package:

import { Accordion } from "flowbite-react";

By default, neither RD nor RDT could resolve the source files — both returned 0 props for all 44 components. Adding a tsconfig path alias fixed this:

// apps/storybook/tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "flowbite-react": ["../../packages/ui/src/index.ts"]
    }
  }
}

This lets RDT resolve flowbite-react imports to the actual TypeScript source files, enabling prop extraction.

Why results are similar

Flowbite-react uses simple forwardRef patterns that both tools handle well:

export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => { ... });

No factory wrappers or complex HOC patterns — both AST and TypeScript compiler approaches work.

Breakdown by category

Both have props (41 components):

Component	RD	RDT	Diff
Datepicker	19	25	+6
Dropdown	11	21	+10
Card	5	8	+3
Accordion	8	7	-1
ToggleSwitch	8	7	-1
Avatar	13	13	equal
Carousel	11	11	equal
Modal	11	11	equal
Progress	11	11	equal
Popover	10	10	equal
Alert	9	9	equal
TextInput	9	9	equal
Tooltip	9	9	equal
... (28 more)			equal

35 of 41 shared components have equal prop counts. RDT finds more for Dropdown (+10), Datepicker (+6), and Card (+3).

RDT-only (1): Pagination (13 props) — RD fails to extract props here.

RD-only (1): Button (4 props) — RDT misses this one.

Neither (1): Banner — no extractable props.

Conclusion

For libraries using standard React patterns (forwardRef, simple function components), both tools produce near-identical results. RDT has a slight edge with 308 vs 282 total props and uniquely resolves Pagination. The tsconfig paths trick is essential for monorepos where stories import from a package name rather than relative paths.

Primer React — react-docgen (RD) vs react-docgen-typescript (RDT)

RDT: 161/225 components (71.6%) — RD: 189/225 (84%)

Summary

Metric	react-docgen (RD)	react-docgen-typescript (RDT)
Components with props	189 / 225 (84%)	161 / 225 (71.6%)
Total props extracted	1,016	1,061
Components with 0 props	36	64

Both tools perform well. RD covers more components (189 vs 161), while RDT extracts slightly more total props (1,061 vs 1,016).

Where both have props (150 components)

Comparison	Count
Equal prop count	83
RDT has more	26
RD has more	41

RDT wins big on: SelectPanel (RD=18, RDT=47), AnchoredOverlay (RD=15, RDT=22), Octicon (RD=2, RDT=7)

RD-only (39 entries, 21 unique components): Textarea, TextInputWithTokens, FormControl, Radio, Checkbox, Overlay, Label, Flash, SideNav, etc.

RDT-only (11 entries, 5 unique components): RelativeTime (26 props), Box, Portal, SegmentedControlIconButton, UnderlinePanels

Conclusion

Primer uses standard React patterns that both tools handle well. This is the most balanced result — RD has broader coverage (189 vs 161 components) while RDT extracts deeper props where it works (1,061 vs 1,016 total). The tools are complementary here.

Park UI — react-docgen (RD) vs react-docgen-typescript (RDT)

RDT: 25/54 components (46.3%) — RD: 8/54 (14.8%)

Summary

Metric	react-docgen (RD)	react-docgen-typescript (RDT)
Components with props	8 / 54 (14.8%)	25 / 54 (46.3%)
Total props extracted	11	393
Components with 0 props	46	29

RDT covers 3x more components and extracts 36x more props than RD.

Park UI is built on Panda CSS, which generates system props in in-project .d.ts files (styled-system/types/style-props.d.ts with 703 SystemProperties, types/conditions.d.ts with 135 Conditions). The .d.ts system props filter correctly removes these bulk props while preserving meaningful component-specific props.

Both have props (8 components)

Component	RD	RDT	Diff
PinInput	1	33	+32
Slider	2	33	+31
ProgressCircular	1	21	+20
ProgressLinear	1	21	+20
Avatar	2	14	+12
Button	2	12	+10
Spinner	1	10	+9
Skeleton	1	3	+2

RDT consistently finds 10-30x more props per component.

RDT-only (17 components) — top examples

Component	RDT props
NumberInput	35
RatingGroup	24
TreeView	24
Switch	22
Checkbox	21
Pagination	20
Badge	10
IconButton	10

Conclusion

RDT is the clear winner for Park UI. RD barely extracts any props (1-2 per component), while RDT provides meaningful prop coverage. The .d.ts system props filter is essential here — without it, each component would show 800+ Panda CSS system props.

Reshaped — react-docgen (RD) vs react-docgen-typescript (RDT)

RDT: 63/78 components (80.8%) — RD: 0/78 (0%)

Summary

Metric	react-docgen (RD)	react-docgen-typescript (RDT)
Components with props	0 / 78 (0%)	63 / 78 (80.8%)
Total props extracted	0	827
Components with 0 props	78	15

RDT is the only tool that works on this codebase. RD extracts zero props.

Why RD fails completely

Reshaped uses export default with types imported from a separate file:

import type * as T from "./Button.types";

const Button = forwardRef<ActionableRef, T.Props>((props, ref) => { ... });

export default Button;

react-docgen cannot follow the type * as T namespace import to resolve T.Props. react-docgen-typescript resolves this through the TypeScript compiler.

RDT-only (63 components) — top examples

Component	RDT props
View	48
Autocomplete	39
Popover	29
Flyout	29
NumberField	28
TextField	26
ToggleButton	25
DropdownMenu	24
Button	21
Select	21
Modal	20

Neither (15 components): Hooks (useHotkeys, useToggle, etc.) and utility components without props.

Conclusion

Reshaped demonstrates a pattern where RDT is the only viable option. The namespace type import pattern (type * as T) is completely opaque to RD's AST-based analysis.

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

Caution

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

Tested on 5 real-world React projects (Mantine, Flowbite-React, Primer React, Park UI, Reshaped) by publishing canary releases and building Storybook with experimentalComponentsManifest enabled. Verified prop extraction, system prop filtering, and compared RD vs RDT results. See QA Reports above for detailed results.

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 pull request has been released as version 0.0.0-pr-33818-sha-b6e1582e. Try it out in a new sandbox by running npx storybook@0.0.0-pr-33818-sha-b6e1582e sandbox or in an existing project with npx storybook@0.0.0-pr-33818-sha-b6e1582e upgrade.

More information


Published version	`0.0.0-pr-33818-sha-b6e1582e`
Triggered by	@kasperpeulen
Repository	storybookjs/storybook
Branch	`kasper/react-docgen-typescript`
Commit	`b6e1582e`
Datetime	Fri Feb 13 08:07:15 UTC 2026 (`1770970035`)
Workflow run	21979396877

To request a new release of this pull request, mention the @storybookjs/core team.

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

Integrate react-docgen-typescript alongside existing react-docgen to provide TypeScript-aware prop extraction in the component manifest. This gives more accurate type information for components using TypeScript features like generics, Pick/Omit, intersection types, and re-exports. Key changes: - New reactDocgenTypescript.ts module with TS program management, prop filtering (strips React built-in Attributes), and export name resolution - Wire rdt into getComponentImports alongside existing react-docgen - Add invalidateParser() for fresh TS program on each manifest request - Extract findTsconfigPath to shared utils (removed dead empathic/find import) - Type render-components-manifest.ts with rdt types, add rdt debug panel - Add styled-components as devDependency for test fixtures - 18 new test cases covering Button, Arrow, DefaultExport, MultipleExports, UnionProps, FunctionProps, DefaultValues, Documented, NoComponents, ImportedProps, PickOmit, Generic, ReExport, Intersection, DtsComponent, StyledComponent, ForwardRef, and Barrel exports

coderabbitai · 2026-02-10T14:18:36Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds react-docgen-typescript (RDT) support across the React component manifest pipeline and core manifest renderer: new cached/incremental RDT parser, manifest wiring to include RDT docs, UI toggle/badge/panel for RDT props, TS-type serialization updates, many TS/TSX test fixtures, and tsconfig lookup improvements.

Changes

Cohort / File(s)	Summary
Core Manifest Rendering `code/core/src/core-server/utils/manifests/render-components-manifest.ts`	Integrates RDT into component card rendering: adds RDT parsing path, rdt badge, `tg-rdt` toggle, `panel-rdt`, rdtPropsCode generation, new parsing/typing helpers (DocgenTsType, DocgenPropItem, DocgenDoc) and extended TS-type serialization; merges RDT and react-docgen outputs.
Renderer manifest wiring `code/renderers/react/src/componentManifest/generator.ts`, `code/renderers/react/src/componentManifest/getComponentImports.ts`	Adds optional `reactDocgenTypescript` to manifest shapes and ComponentRef; invokes `parseWithReactDocgenTypescript` and `matchComponentDoc`, merges RDT docs into component entries, with try/catch and debug logging.
RDT parser & API `code/renderers/react/src/componentManifest/reactDocgenTypescript.ts`, `code/renderers/react/src/componentManifest/reactDocgenTypescript.test.ts`	New cached/incremental parser exposing `parseWithReactDocgenTypescript`, `invalidateParser`, `matchComponentDoc`, and `ComponentDocWithExportName`; builds/reuses TS program, maps export/display names, filters built-ins, and contains an extensive fixture-driven test suite.
TS config & utils `code/renderers/react/src/componentManifest/reactDocgen.ts`, `code/renderers/react/src/componentManifest/utils.ts`	Introduces `findTsconfigPath(cwd)` and uses it to resolve tsconfig for docgen; refactors tsconfig lookup to use project-root-aware helper and adds cached tsconfig path helper.
Test fixtures `code/renderers/react/src/componentManifest/__testfixtures__/*`	Adds ~24 TypeScript/TSX fixtures (default/named/aliased exports, generics, unions/intersections, forwardRef, styled-components, barrels, imported props, displayName/renamed exports, etc.) used by RDT tests.
Styled-components dev dep `code/renderers/react/package.json`	Adds `styled-components: ^6.3.9` to devDependencies to support styled-component fixtures.
Manifest generator types `code/renderers/react/src/componentManifest/reactDocgen.ts` (adjacent)	Replaces previous tsconfig discovery with `findTsconfigPath` import/use; minor import and control-flow adjustments when loading tsconfig.

Sequence Diagram

sequenceDiagram
    participant Collector as Component Collector
    participant Cache as Parser Cache
    participant Parser as RDT Parser
    participant TS as TypeScript Program
    participant RDT as react-docgen-typescript

    Collector->>Cache: request parse(filePath)
    Cache-->>Cache: lookup cached result
    alt cache hit
        Cache->>Collector: return cached docs
    else cache miss
        Cache->>Parser: parse file
        Parser->>TS: create/reuse TS program (incremental)
        Parser->>RDT: invoke react-docgen-typescript
        RDT->>TS: query symbols/types
        RDT-->>Parser: return raw ComponentDoc[]
        Parser->>Parser: enrich docs (exportName, filter builtins)
        Parser-->>Cache: store ComponentDocWithExportName[]
        Parser->>Collector: return parsed docs
    end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

React: Change examples to stories in manifests and show correct examples and prop types #32908 — Adds/react-docgen parsing and prop-type UI panels; closely related to adding RDT parsing and UI wiring.
Manifest: Add docs entries to debugger #33607 — Modifies render-components-manifest.ts; overlaps with the RDT badge/toggle/panel changes.
React: Add isPackage flag to component imports for better package identification #33090 — Changes getComponentImports.ts; relates to ComponentRef enrichment and per-component manifest metadata.

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

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In
`@code/renderers/react/src/componentManifest/__testfixtures__/DefaultExport.ts`:
- Around line 5-7: The function Icon declares an unused parameter props which
triggers ESLint no-unused-vars; fix by renaming the parameter to a prefixed
unused name (e.g., _props) in the Icon function signature so lint ignores it,
updating the Icon(props: IconProps) declaration accordingly; ensure only the
parameter name changes (keep IconProps type) so the test fixture behavior and
type extraction remain the same.

In `@code/renderers/react/src/componentManifest/reactDocgenTypescript.ts`:
- Around line 83-117: invalidateParser() only resets the shared parser object
but not the per-file memoization used by parseWithReactDocgenTypescript, causing
stale results; add a cache-buster counter (e.g., parserInvalidateCounter) that
invalidateParser() increments and include that counter in the memoization key
for parseWithReactDocgenTypescript (change the memo key from just filePath to
something like `${filePath}:${parserInvalidateCounter}`) so cached entries are
ignored after invalidation; ensure the counter is initialized near
parser/previousProgram and referenced where the memoized lookup occurs.

Replace the fragile positional mapping (exportNames[i]) with a name-based approach using getExportNameMap. This correctly handles: - Aliased re-exports: `export { Card as RenamedCard }` - Default exports: displayName derived from filename - displayName overrides: `Foo.displayName = 'Bar'` Add test fixtures and tests for RenamedExport and DisplayNameOverride.

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@code/renderers/react/src/componentManifest/reactDocgenTypescript.test.ts`:
- Around line 9-18: The normalize function's replacer only strips Unix-style
separators so Windows paths remain; update the regex used in the JSON.stringify
replacer (the check for (key === 'filePath' || key === 'fileName') && typeof
value === 'string') to match both forward and backslashes (e.g. use a character
class for / and \) so __testfixtures__\... and __testfixtures__/... are both
stripped; keep the rest of the JSON.stringify-based normalization and only
change the regex used in normalize.

In `@code/renderers/react/src/componentManifest/reactDocgenTypescript.ts`:
- Around line 66-68: The code deriving fileName from sourceFile.fileName using
replace(/.*\//, '').replace(/\.[^.]+$/, '') is not cross-platform and fails on
Windows; update the logic in reactDocgenTypescript where fileName is computed
(referencing result, fileName, and sourceFile.fileName) to use Node's path
utilities (e.g., path.basename and path.extname) so you strip directories and
remove the extension in a platform-independent way, ensuring the default-export
displayName mapping works on Windows too.

When no matching doc was found in a multi-export file, the fallback `?? docs[0]` would silently return the first component (e.g. BaseStyles from src/index.ts). Return undefined instead so wrong data is never shown in the manifest.

Expand the prop filter to also exclude props inherited from DOM built-in interfaces (HTMLElement, Node, Element, GlobalEventHandlers, etc.) via lib.dom.d.ts. These leak through when wrapping Web Components like @github/relative-time-element, reducing RelativeTime from 331 to 27 props. Also tighten the React filter: check both Attributes name AND node_modules fileName to catch third-party augmentations (e.g. Next.js adding `tw` to HTMLAttributes via @vercel/og).

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@code/renderers/react/src/componentManifest/reactDocgenTypescript.ts`:
- Around line 204-207: Update the stale JSDoc in reactDocgenTypescript.ts:
replace the incorrect reference to invalidateCache() with the correct function
name invalidateParser() in the top comment above the parse function so the doc
matches the actual API (search for the comment block that starts "Parse a
component file with react-docgen-typescript..." and update the function name).
- Around line 143-158: invalidateParser currently only clears the parser
variable so fileNames remains cached and the tsconfig is not re-read; update
invalidateParser to also reset fileNames (and any related cached compilerOptions
if desired) so that on the next getParser() call the condition in getParser()
(configPath && !fileNames) will be true and the tsconfig and file list (used
when building the TS program) are reloaded; modify the invalidateParser function
to set fileNames = undefined (and optionally compilerOptions = undefined)
alongside parser = undefined.

nx-cloud · 2026-02-13T06:25:09Z

View your CI Pipeline Execution ↗ for commit 6d555c8

Command	Status	Duration	Result
`nx run-many -t compile,check,knip,test,pretty-d...`	❌ Failed	1m 14s	View ↗

☁️ Nx Cloud last updated this comment at 2026-02-20 12:13:15 UTC

nx-cloud · 2026-02-13T06:25:09Z

View your CI Pipeline Execution ↗ for commit 2329686

Command	Status	Duration	Result
`nx run-many -t compile,check,knip,test,pretty-d...`	❌ Failed	10m 33s	View ↗

☁️ Nx Cloud last updated this comment at 2026-02-13 06:36:59 UTC

storybook-app-bot · 2026-02-13T06:34:22Z

Package Benchmarks

^{Commit: 4f797eb, ran on 11 March 2026 at 09:30:08 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/addon-docs`

	Before	After	Difference
Dependency count	18	18	0
Self size	1.66 MB	1.64 MB	🎉 -17 KB 🎉
Dependency size	9.25 MB	9.25 MB	🎉 -491 B 🎉
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	49	49	0
Self size	20.21 MB	20.42 MB	🚨 +205 KB 🚨
Dependency size	16.52 MB	16.52 MB	🎉 -2 B 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	183	183	0
Self size	779 KB	779 KB	🚨 +70 B 🚨
Dependency size	67.35 MB	67.56 MB	🚨 +206 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	176	176	0
Self size	32 KB	32 KB	🎉 -2 B 🎉
Dependency size	65.88 MB	66.08 MB	🚨 +205 KB 🚨
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	50	50	0
Self size	1.04 MB	1.04 MB	🚨 +974 B 🚨
Dependency size	36.74 MB	36.94 MB	🚨 +205 KB 🚨
Bundle Size Analyzer	node	node

The filter rejected any component whose displayName didn't start with an uppercase letter. This silently dropped all Mantine factory components (displayName like @mantine/core/Button) and potentially others. react-docgen-typescript already only returns component-like symbols, so this filter was redundant.

The system props filter only checked node_modules sources, missing CSS-in-JS libraries like Panda CSS that generate type definitions in-project (e.g. styled-system/types/style-props.d.ts with 700+ props). Expand the check to also filter .d.ts files exceeding the threshold, while preserving user-authored .ts files.

Replace the two-layer filter (isBuiltinProp + getSystemPropSources) with a single heuristic: any source file in node_modules or ending in .d.ts that contributes >30 props is filtered out entirely. This naturally catches React built-ins (HTMLAttributes, DOMAttributes), DOM interfaces (lib.dom.d.ts), and CSS-in-JS system props (Panda CSS, styled-system). Small interfaces like RefAttributes (just ref) now pass through, which is an improvement. Also removes performance instrumentation code and unused logger import.

…config Instead of running both react-docgen and react-docgen-typescript in parallel, the manifest now reads typescript.reactDocgen from main.ts presets and runs only the selected engine. User's reactDocgenTypescriptOptions are passed through.

…pe meta - Surface react-docgen-typescript parse errors in manifest (not silently swallowed) - Remove dead esc() call in render-components-manifest - Remove unnecessary `as FileParser` cast - Add `meta` to ComponentsManifest type (required, not cast) - Simplify durationMs null checks now that meta is required Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>

…r optional fields)

…gen)

coderabbitai bot reviewed Feb 10, 2026

View reviewed changes

Comment thread code/renderers/react/src/componentManifest/__testfixtures__/DefaultExport.ts

Comment thread code/renderers/react/src/componentManifest/reactDocgenTypescript.ts

coderabbitai bot reviewed Feb 10, 2026

View reviewed changes

Comment thread code/renderers/react/src/componentManifest/reactDocgenTypescript.test.ts Outdated

Comment thread code/renderers/react/src/componentManifest/reactDocgenTypescript.ts

kasperpeulen added 2 commits February 10, 2026 22:06

coderabbitai bot reviewed Feb 10, 2026

View reviewed changes

Comment thread code/renderers/react/src/componentManifest/reactDocgenTypescript.ts

Comment thread code/renderers/react/src/componentManifest/reactDocgenTypescript.ts

kasperpeulen added 2 commits February 13, 2026 12:34

Filter bulk CSS-in-JS system props from component manifest

9d69201

Add react-docgen-typescript as explicit dependency

2329686

kasperpeulen added feature request ci:normal labels Feb 13, 2026

kasperpeulen added 3 commits February 13, 2026 14:21

kasperpeulen force-pushed the kasper/react-docgen-typescript branch from 7be464b to 88a11da Compare February 13, 2026 10:54

Fix lint errors and reset tsconfig on parser invalidation

734f791

kasperpeulen force-pushed the kasper/react-docgen-typescript branch from 88a11da to 734f791 Compare February 13, 2026 10:55

valentinpalkovic assigned kasperpeulen Feb 16, 2026

kasperpeulen and others added 5 commits February 18, 2026 22:44

Clean up type cast and add docs link to manifest debugger

c33c7ea

Safe-access manifest.meta to prevent crash when manifest is undefined

4204040

Conditionally spread reactDocgenTypescriptError (consistent with othe…

f090172

…r optional fields)

kasperpeulen force-pushed the kasper/react-docgen-typescript branch from d5b6150 to f090172 Compare February 19, 2026 10:01

kasperpeulen added 2 commits February 19, 2026 17:09

Treat reactDocgen: false as react-docgen for manifest (never skip doc…

318fe1f

…gen)

Make DtsComponent test resilient to @types/react version changes

9a0287b

renovate bot mentioned this pull request Apr 7, 2026

chore(deps): update storybook monorepo to v10 (major) yn1323/yps-crispy-carnival#292

Merged

1 task

renolh bot mentioned this pull request Apr 8, 2026

chore(deps): update storybook monorepo (major) limehawk/React95#28

Closed

1 task

renolh bot mentioned this pull request Apr 11, 2026

chore(deps): update storybook monorepo (major) limehawk/React95#52

Open

1 task

cultureamp-renovate bot mentioned this pull request Apr 17, 2026

chore(deps): update storybook monorepo to v10 (major) cultureamp/kaizen-design-system#6603

Closed

1 task

Uh oh!

Conversation

kasperpeulen commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Prop filtering

QA Reports

Why react-docgen-typescript

Performance per project

Park UI performance (37.9s) — root cause

Mantine — react-docgen (RD) vs react-docgen-typescript (RDT)

Summary

Why RDT wins on Mantine

Breakdown by category

Conclusion

Flowbite-React — react-docgen (RD) vs react-docgen-typescript (RDT)

Summary

Setup: tsconfig paths trick

Why results are similar

Breakdown by category

Conclusion

Primer React — react-docgen (RD) vs react-docgen-typescript (RDT)

Summary

Where both have props (150 components)

Conclusion

Park UI — react-docgen (RD) vs react-docgen-typescript (RDT)

Summary

Both have props (8 components)

RDT-only (17 components) — top examples

Conclusion

Reshaped — react-docgen (RD) vs react-docgen-typescript (RDT)

Summary

Why RD fails completely

RDT-only (63 components) — top examples

Conclusion

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Uh oh!

coderabbitai bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Possibly related PRs

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

nx-cloud bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

storybook-app-bot bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

@storybook/addon-docs

storybook

@storybook/cli

@storybook/codemod

kasperpeulen commented Feb 10, 2026 •

edited

Loading

coderabbitai bot commented Feb 10, 2026 •

edited

Loading

nx-cloud bot commented Feb 13, 2026 •

edited

Loading

nx-cloud bot commented Feb 13, 2026 •

edited

Loading

storybook-app-bot bot commented Feb 13, 2026 •

edited

Loading

`@storybook/addon-docs`

`storybook`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`