How to move from propTypes to jsDoc for react javascript arg/prop documentation?

[aaronbarker]

Summary

We have a storybook instance that is currently pulling in propTypes defined in the component to populate the Args table.

We saw that prop-types has been "archived by the owner on Sep 1, 2024. It is now read-only." and so wanted to move to jsDoc. The jsDoc direction was based on in the Storybook 7 Docs post saying "we’ve leaned into JSDoc as the method of choice" for component and story descriptions... but maybe that is the extent of the leaning in, and not for args/props.

When I change to use a jsDoc block of code it does indeed pull in the description, but then all the args/props are also included as description and doesn't do anything in the args table.

/** Primary UI component for user interaction
 *
 * @param {string} label - I'm the JSDoc description
 * @param {bool} primary - I'm the JSDoc description for primary
 */

I know that I can duplicate the descriptions in the story, but that duplicates the descriptions which is no fun to maintain. There would still be extra info in the description that is incorrect, and if I remove that extra info I don't get any IDE enhancements that are provided by the jsDocs.

Am I doing the jsDoc block incorrectly? Is there a different way to replace propTypes? Is propTypes what still needs to be used even though it has been archived?

Additional information

No response

Create a reproduction

https://stackblitz.com/edit/github-cvakjv?file=src%2Fstories%2FButton.jsx,src%2Fstories%2FButton.stories.js&preset=node

[dougalg]

I was looking into this a bit as well, it seems that react-docgen-typescript could make this possible, there would just need to be an option to enable it for non-ts files, I think

[dougalg]

@aaronbarker I was able to get it working with a vanilla install by using an undocumented config option from @joshwooding/vite-plugin-react-docgen-typescript which allows to set the included files manually, and it defaults to **/*.tsx...

{
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      include: ["**/*.jsx"],
      tsconfigPath: './tsconfig.json',
    },
  }
}

[dougalg]

Actually, the above only applies if you are using Vite for storybook. With webpack, there may be another similar option. Or not :/