[Bug]: react-docgen not correctly populating Description column if props are Readonly

[federico-ntr]

Describe the bug

After the latest major update, which brings the new autodocs package react-docgen, the doc table of all of my stories is missing pieces of information. Before it was populating the Description column with the JSDocs of component's props' interface:

interface Props {
  /**
   * Id used to compose ids of sub-components
   */
  id: string;
  /**
   * Name of the document
   */
  docName?: string;
  /**
   * Direct link to the resource
   */
  link: string;
  /**
   * Controls whether the responsive version is shown
   */
  isUnderBreakpoint?: boolean;
  /**
   * Controls whether the buttons are disabled
   */
  disabled?: boolean;
}

Resulted in:

After the update it looks like this:

As you can see the text I wrote in the JSDocs is missing and the type of the two props with a default is not correctly inferred.

While trying to create a repro I discovered that the issue lies in the use of utility type Readonly<T>. You can open the repro and see docs for Button are badly generated. Remove Readonly and restart sb, you'll see they'll be correctly generated.
As a workaround I switched to the old react-docgen-typescript which is handling Readonly correctly.

To Reproduce

https://stackblitz.com/edit/github-inlxfv?file=src%2Fstories%2FButton.tsx

System

Storybook Environment Info:

  System:
    OS: macOS 14.4
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 4.1.1 - ~/.nvm/versions/node/v20.11.1/bin/yarn <----- active
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
  Browsers:
    Safari: 17.4
  npmPackages:
    @storybook/addon-essentials: 8.0.2 => 8.0.2 
    @storybook/addon-interactions: 8.0.2 => 8.0.2 
    @storybook/addon-links: 8.0.2 => 8.0.2 
    @storybook/addon-mdx-gfm: 8.0.2 => 8.0.2 
    @storybook/preview-api: 8.0.2 => 8.0.2 
    @storybook/react: 8.0.2 => 8.0.2 
    @storybook/react-vite: 8.0.2 => 8.0.2 
    msw-storybook-addon: 2.0.0-beta.1 => 2.0.0-beta.1 
    storybook: 8.0.2 => 8.0.2

Additional context

No response

[skorenb]

I also encounter the problem when i use forwardRef from react:

const ReactComponent = forwardRef<HTMLDivElement, MyProps>(props, ref) => { ... };

There aren't description content in controls tab and i see uknown type on some arguments.

So i have to assign the type to props argument explicitly to get it working well:

const ReactComponent = forwardRef<HTMLDivElement, MyProps>(props: MyProps, ref) => { ... };

[ajkl2533]

I also hit this issue while using forwardRef (repro: https://stackblitz.com/edit/github-rccvwa?file=src%2Fstories%2FForwardedButton.stories.ts).
This is extremely problematic for component libraries because after upgrading to v8 we lost lots of documentation.

This is related to #26496

Following examples are for:

export type SurfaceProps = {
  children: ReactNode;
  /** Background of the surface box */
  background?: (typeof SurfaceBackgrounds)[number];
  /** Corner rounding of the surface box */
  radius?: (typeof SurfaceRadii)[number];
  /** Size of the box shadow. Takes and integer, Bigger value, bigger size of the shadow */
  elevation?: number;
  /** Show border around the surface box */
  hasBorder?: boolean;
  /**
   * Switch color scheme for light or dark backgrounds
   *
   * @deprecated Replaced with design tokens for using dark mode add .dark classname
   * to Surface or its parent
   */
  mode?: (typeof SurfaceMode)[number];
} & ComponentPropsWithoutRef<'div'>;




const Surface = forwardRef<HTMLDivElement, SurfaceProps>(( props, ref ) => {
    ...
);

V7 or V8 with { typescript: { reactDocgen: "react-docgen-typescript" } }

V8

V8 with reassigning types to props (const Surface = forwardRef<HTMLDivElement, SurfaceProps>((props: SurfaceProps, ref) => {)

[Charismara]

Is there any progress on this?

[shilman]

This is an issue in react-docgen.

reactjs/react-docgen#905

Please help fix the issue there or, if you can't wait for the fix, please use react-docgen-typescript, which is still supported in Storybook.

https://storybook.js.org/docs/api/main-config/main-config-typescript

[Charismara]

This is an issue in react-docgen.

reactjs/react-docgen#905

Please help fix the issue there or, if you can't wait for the fix, please use react-docgen-typescript, which is still supported in Storybook.

https://storybook.js.org/docs/api/main-config/main-config-typescript

I run into this problem even with react-docgen-typescript. Someone seems to have the same issue here: #29340

[shilman]

@Charismara Is that issue related to Readonly properties or is it about including properties from node_modules?

[Charismara]

@Charismara Is that issue related to Readonly properties or is it about including properties from node_modules?

I suppose it is mainly about including properties from the node_modules but a bunch of those props are string literals

[ChristianRaoulis]

Any progress on this?

[matricali]

Up

[helpIneedAname]

Up

[Charismara]

It looks like pnpm is causing that issue for me.

I tested it with Bun and npm and both times all props showed up.