React: Upgrade `react-docgen` to 6.0.x and improve argTypes #23825

shilman · 2023-08-14T05:34:20Z

Extends #22324

What I did

NOTE: This only applies to VITE projects, not Webpack ones yet!!!

Extends #22324:

Update react-docgen to 6.0.x
Add support for fs resolver

Followup:

Update webpack too

Also improve argType generation:

Add experimental support for converting unions of literals into enum, which generate proper controls
Fix table summary types for array, object, and function

How to test in your project

To test this out in a React Vite TS project, install the canary version listed at the top of this PR into a project by manually updating its package.json to update all the @storybook/* packages from this monorepo:

    "@storybook/react": "0.0.0-pr-23825-sha-7875282b",
    "@storybook/react-vite": "0.0.0-pr-23825-sha-7875282b",
    ...

Once you've installed the packages, edit .storybook/main.ts to contain:

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

The behavior should be the same as before, but running storybook dev should be dramatically faster than before.

If you run into issues, please comment on this PR!

How to test in a development sandbox

Create a development sandbox in this branch, e.g.

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

Edit .storybook/main.ts to contain:

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

Add a new file starbucks-size.ts in src/stories directory:

export type StarbucksSize = 'tall' | 'grande' | 'venti';

Update the CLI-generated Button.tsx component with a new prop:

  /**
   * How large should the button be at Starbucks?
   */
  starbucksSize?: StarbucksSize;

Observe the result in the controls panel:

Checklist

Needs tests:

Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)

🦋 Canary release

This pull request has been released as version 0.0.0-pr-23825-sha-7875282b. Install it by pinning all your Storybook dependencies to that version.

More information


Published version	`0.0.0-pr-23825-sha-7875282b`
Triggered by	@shilman
Repository	storybookjs/storybook
Branch	`shilman/fix-react-docgen-enum`
Commit	`7875282b`
Datetime	Tue Aug 22 10:30:44 UTC 2023 (`1692700244`)
Workflow run	5937622254

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 canary-release-pr.yml --field pr=23825

yannbf · 2023-08-14T07:20:05Z

code/frameworks/react-vite/tsconfig.json

@@ -4,7 +4,7 @@
    "rootDir": "./src",
    "types": ["node"],
    "resolveJsonModule": true,
-    "strict": true
+    "skipLibCheck": true


what was this change necessary for?

Good question. This PR is mostly changes from #22324 and I guess this is one of those.

A @ndelangen special, here: a26c431 (#22324)

That seems wrong, indeed.

This was done, because the TS compiler options here are different than the settings in the react-docgen repo. This lead to one of the CI jobs to fail, because the it was validating react-docgen types with the different options (mostly strict stuff). I fixed a lot of it and enabled some more strict options in react-docgen, so maybe it works now.

yannbf · 2023-10-03T13:37:02Z

React.FC is not yet supported in react-docgen. I will see if I can find some time for this.

Hey @danez did you have any luck with React.FC? Thank you so much for taking a look into it! <3

shilman · 2023-10-04T15:23:48Z

@danez FYI we're going to evaluate https://www.npmjs.com/package/typescript-react-function-component-props-handler and will report back. If it works well, it could be a good candidate to incorporate in the default settings. cc @valentinpalkovic

danez · 2023-10-04T15:34:47Z

Nice. React.FC is already supported on the main branch of react-docgen but I noticed some other issues that i want to fix first, especially because i had to make a breaking change again.

valentinpalkovic · 2023-10-05T13:58:17Z

@shilman, @danez I took a quick look at the custom resolver , and it failed pretty quickly

@danez Do you need some support? I would say I don't spend time fixing the third-party resolve, but instead, I would rather wait and/or support your work on the main branch.

shilman · 2023-10-11T04:07:52Z

@danez that's great news. please let us know how we can support! we're going to release this upgrade PR in Storybook 7.5 next week, and will merge the companion PR #24165 for 8.0 once FC support is merged & released. Happy to adjust the plans if it helps you out in any way.

rachelholtz · 2023-10-13T16:10:38Z

I went to try this out but I am getting an error when running storybook.
I updated all @storybook packages:

    "@storybook/addon-a11y": "0.0.0-pr-23825-sha-7875282b",
    "@storybook/addon-essentials": "0.0.0-pr-23825-sha-7875282b",
    "@storybook/addon-interactions": "0.0.0-pr-23825-sha-7875282b",
    "@storybook/addon-links": "0.0.0-pr-23825-sha-7875282b",
    "@storybook/blocks": "0.0.0-pr-23825-sha-7875282b",
    "@storybook/react": "0.0.0-pr-23825-sha-7875282b",
    "@storybook/react-vite": "0.0.0-pr-23825-sha-7875282b",

Already had typescript: {reactDocgen: 'react-docgen'} in main.ts.

Did a clean install.

When I run storybook I get this error:

@storybook/cli v7.4.3
WARN Failed to load preset: "@storybook/react-vite/preset"
Error: Cannot find module '@storybook/react-vite/preset'
Error: Invariant failed: No builder configured in core.builder

So I tried to specifically install the canary of @storybook/cli and it didn't help.

I have reread the instructions above and I feel like I am missing something. Storybook runs fine with 7.1.0 but was hoping to test the updates for react-docgen. We have issues around pulling in descriptions for arg types when a component Type is extending another component's types.

danez · 2023-10-19T15:09:12Z

I released version 7.0 of react-docgen which supports React.FC and all the other helpers like React.PropsWithChildren. @yannbf The output might still be different for the Button example above because react-docgen does not support styled-components, but it should be at least getting closer.

ndelangen · 2023-10-19T16:32:30Z

cc @shilman ☝️

harryyaprakov · 2023-10-27T09:27:46Z

First, great work on this excellent product!
Second, do you guys plan on migrating to v7.0 of docgen as released any time soon?

I tried running v7.0 (by npm override) with sb v7.5 and am getting unexpected and strange errors.

yannbf · 2023-10-30T08:15:43Z

Hey @harryyaprakov thank you! We are planning on doing that for Storybook 7.6. This PR might be of interest to you

Can you maybe elaborate and share a reproduction that can display the errors you are mentioning? It will be really useful for us.

cc @shilman

danez and others added 9 commits May 20, 2023 17:51

update react-docgen to 6.0.0-rc.9

8c5354b

Merge branch 'next' into pr/danez/22324

0d5b7fd

fix type issues

a26c431

fix: update to 6.0 final

f9b9e76

Merge branch 'next' into pr/danez/22324

056719f

Merge branch 'next' into react-docgen

1f0fc81

Upgrade to react-docgen 6.0.2

d174979

Merge branch 'next' into pr/22324

e874745

Docs-tools: Fix react-docgen enum handling

c6ab522

shilman requested review from JReinhold, valentinpalkovic and kasperpeulen as code owners August 14, 2023 05:34

shilman mentioned this pull request Aug 14, 2023

React: Update react-docgen to 6.0.1 #22324

Merged

5 tasks

yannbf reviewed Aug 14, 2023

View reviewed changes

JReinhold assigned shilman Aug 21, 2023

shilman added dependencies react performance issue builder-vite labels Aug 22, 2023

Merge branch 'next' into shilman/fix-react-docgen-enum

7875282

shilman added 5 commits October 3, 2023 10:56

Merge branch 'next' into shilman/fix-react-docgen-enum

31704fc

React: Fix react-docgen handling for arrays, records, functions

c78890f

Fix types

617666d

Fix snapshots

60748de

Restore chromatic ignore

ac738ec

shilman changed the title ~~React: Update react-docgen to 6.0.x and improve union handling~~ React: Update react-docgen to 6.0.x and improve data handling Oct 4, 2023

shilman changed the title ~~React: Update react-docgen to 6.0.x and improve data handling~~ React: Update react-docgen to 6.0.x and improve argTypes Oct 4, 2023

Merge branch 'next' into shilman/fix-react-docgen-enum

9fe358f

shilman changed the title ~~React: Update react-docgen to 6.0.x and improve argTypes~~ React: Upgrade react-docgen to 6.0.x and improve argTypes Oct 4, 2023

shilman merged commit 109eb20 into next Oct 4, 2023
54 checks passed

shilman deleted the shilman/fix-react-docgen-enum branch October 4, 2023 04:37

github-actions bot mentioned this pull request Oct 4, 2023

Release: Prerelease 7.5.0-alpha.5 #24363

Closed

19 tasks

This was referenced Oct 5, 2023

TEST Release: Prerelease 7.5.0-alpha.5 #24383

Closed

TEST2 Release: Prerelease 7.5.0-alpha.5 #24384

Closed

TEST3 Release: Prerelease 7.5.0-alpha.5 #24385

Closed

This was referenced Oct 6, 2023

TEST3 Release: Prerelease 7.5.0-alpha.5 #24398

Closed

Release: Prerelease 7.5.0-alpha.5 #24407

Merged

Release: Prerelease 7.5.0-alpha.5 #24410

Closed

yannbf mentioned this pull request Oct 17, 2023

Release: Minor 7.5.0 #24481

Merged

5 tasks

DearYuto mentioned this pull request Feb 18, 2024

Storybook displayName으로 인해 에러 발생하는 현상 해결 방법 (실패 과정 포함) DearYuto/Yuto-Blog#17

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React: Upgrade `react-docgen` to 6.0.x and improve argTypes #23825

React: Upgrade `react-docgen` to 6.0.x and improve argTypes #23825

shilman commented Aug 14, 2023 •

edited

yannbf Aug 14, 2023

shilman Aug 14, 2023

shilman Aug 14, 2023

ndelangen Aug 28, 2023

danez Sep 7, 2023

yannbf commented Oct 3, 2023

shilman commented Oct 4, 2023 •

edited

danez commented Oct 4, 2023

valentinpalkovic commented Oct 5, 2023

shilman commented Oct 11, 2023

rachelholtz commented Oct 13, 2023

danez commented Oct 19, 2023

ndelangen commented Oct 19, 2023

harryyaprakov commented Oct 27, 2023

yannbf commented Oct 30, 2023 •

edited

React: Upgrade react-docgen to 6.0.x and improve argTypes #23825

React: Upgrade react-docgen to 6.0.x and improve argTypes #23825

Conversation

shilman commented Aug 14, 2023 • edited

What I did

How to test in your project

How to test in a development sandbox

Checklist

🦋 Canary release

yannbf Aug 14, 2023

Choose a reason for hiding this comment

shilman Aug 14, 2023

Choose a reason for hiding this comment

shilman Aug 14, 2023

Choose a reason for hiding this comment

ndelangen Aug 28, 2023

Choose a reason for hiding this comment

danez Sep 7, 2023

Choose a reason for hiding this comment

yannbf commented Oct 3, 2023

shilman commented Oct 4, 2023 • edited

danez commented Oct 4, 2023

valentinpalkovic commented Oct 5, 2023

shilman commented Oct 11, 2023

rachelholtz commented Oct 13, 2023

danez commented Oct 19, 2023

ndelangen commented Oct 19, 2023

harryyaprakov commented Oct 27, 2023

yannbf commented Oct 30, 2023 • edited

React: Upgrade `react-docgen` to 6.0.x and improve argTypes #23825

React: Upgrade `react-docgen` to 6.0.x and improve argTypes #23825

shilman commented Aug 14, 2023 •

edited

shilman commented Oct 4, 2023 •

edited

yannbf commented Oct 30, 2023 •

edited