fix: restore docgen auto argTypes (wrong @storybook/react entry point)#903
fix: restore docgen auto argTypes (wrong @storybook/react entry point)#903ndelangen wants to merge 2 commits into
Conversation
`argTypesEnhancers` and `parameters.docs.extractArgTypes` are exported from `@storybook/react/entry-preview-argtypes`, not `entry-preview-docs`. The old import resolved to `undefined`, silently disabling docgen-based auto controls (only core value inference remained). Adds a regression test asserting both are wired, plus a patch changeset. Co-authored-by: Cursor <cursoragent@cursor.com>
🦋 Changeset detectedLatest commit: 341ff27 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Pull request overview
Restores TypeScript-prop docgen–driven auto-generated controls (argTypes) in on-device Storybook by importing the correct Storybook React preview entry point, and adds a regression test to prevent the issue from recurring.
Changes:
- Switch
packages/react-native/src/preview.tsto importargTypesEnhancersandparameters.docs.extractArgTypesfrom@storybook/react/entry-preview-argtypes(instead ofentry-preview-docs). - Add a regression unit test asserting
preview.argTypesEnhancersandpreview.parameters.docs.extractArgTypesare correctly wired. - Add a patch changeset for
@storybook/react-native.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/react-native/src/preview.ts | Fixes docgen argTypes wiring by using the correct @storybook/react preview entry point. |
| packages/react-native/src/preview.test.ts | Adds regression coverage to ensure docgen-related preview exports aren’t undefined. |
| .changeset/fix-docgen-argtypes-entry-point.md | Publishes the fix as a patch release for @storybook/react-native. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
I'm not sure this test adds much value TBH, it only really covers the very specific scenario where we change the entry point structure of @storybook/react/entry-preview-argtypes. An E2E tests that actually checks for the proper existence of the controls seems a lot more useful here, but I can understand if that is impossible to write in practice.
There was a problem hiding this comment.
I wish writing e2e tests for RN were as simple as spinning up a playwright instance, but unfortunately, we do not have the infrastructure set up to do this right now.
I agree the test is far from optimal, but it's likely better than not having one.
There was a problem hiding this comment.
can typescript not provide the validation for the import existing? this seems like it would validate in the same way or at least it should
Co-authored-by: Norbert de Langen <ndelangen@me.com>
Summary
Auto-generated controls from a component's TypeScript props (docgen) were silently broken in on-device Storybook. Stories that relied on
__docgenInfo(no hand-writtenargTypes) showed no controls — or, where core value-inference kicked in, every prop rendered as a plain text field (enums never became radios, booleans/colors were lost).Root cause:
packages/react-native/src/preview.tsimportedargTypesEnhancersandparameters.docs.extractArgTypesfrom@storybook/react/entry-preview-docs, but those symbols are exported from@storybook/react/entry-preview-argtypes. The old import resolved toundefined, so the docgenargTypesEnhancer(enhanceArgTypes) never ran. Manual-argTypesstories kept working, which masked the regression.Why this is the right fix
entry-preview-docsexports onlyapplyDecorators, decorators, parameters(andparameters.docsonly hasstory).argTypesEnhancersandextractArgTypeslive inentry-preview-argtypes.experimentalDocgenServerissue. The entry-point layout is identical in the stable release this repo targets (@storybook/react@10.4.x) and back through9.x; auto-docgen had been quietly broken on stable, independent of any canary.entry-preview-argtypesexists across RN's supported Storybook range (peer dep>=10; present sincev10.0.0).Two red herrings ruled out during investigation
global.FEATURES.experimentalDocgenServer, which RN never enables — so it does not affect RN.console.log(Component.__docgenInfo)printingundefinedwas a statement-ordering artifact:babel-plugin-react-docgen-typescriptappends the__docgenInfoassignment to the bottom of the module, so a top-level log runs before it. Babel docgen was working the whole time.Test plan
packages/react-native/src/preview.test.ts) assertingpreview.argTypesEnhancersis a non-empty array of functions andpreview.parameters.docs.extractArgTypesis a function. It fails against the oldentry-preview-docsimport (bothundefined) and passes with the fix.@storybook/react@10.4.6(no canary): a component-only story produced full auto controls, including a docgen-onlysizeradio (small | medium | large) — a value set that only exists in the TS union type, so it can only come from docgen.Changeset
Patch (
@storybook/react-native), which bumps the fixed package group.Here's a screenshot of the correct controls due to properly injected __docgenInfo:
This was taken form an isolated example, which had it's node_modules patched with the fix this PR contains.