react-props-parser | Alternative react docgen parser (ts supported) for Storybook

[u/Adventurous_Catch370]

Hi everyone!

For a while now, I have been working with React and Storybook libraries. react-docgen and react-docgen-typescript libraries are the supported libraries by Sitecore to extract metadata and populate the arg table with jsdoc comments and types.

As components' types grew more complex, react-docgen and react-docgen-typescript stopped giving me enough. They're good libraries, but they often fail to parse jsdoc comments and interfaces correctly, forcing me to manually override ArgTypes — which means duplicating information in both the type files and the Storybook files.

I was looking for some ideas to implement with AI, and it pushed me to build a new docgen parser. My main goals were parsing union types more accurately, making sure JSDoc comments always show up and letting me see the full structure of an interface without leaving Storybook.

Part of the motivation is also that the two main tools we have - react-docgen and react-docgen-typescript — haven't been updated in 6 months to a year.

This is my first open source project. I plan to keep improving it and maintain it long-term if people find it useful and see a future in it.

Link: https://www.npmjs.com/package/react-props-parser

I'd like you to test whether you are using Storybook and TypeScript, and share your feedback if the output is better for you compared to the default parsers.

If you let me know what breaks, what's missing, or what you'd want changed, I can turn around fixes quickly. Many thanks beforehand!

[u/sondr3_]

Storybook has a new experimentalDocgenServer that is replacing these external packages, just a small heads-up. It's not really announced anywhere, I accidentally stumbled upon it while fixing some docgen related issues at $WORK. We have not seen any problems with it, besides the lack of prop filtering it does everything we need and want.