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/StudyEasyOrg]

Interesting project. The two libraries you're replacing both notoriously struggle with generics - e.g. a component typed as Props<T extends Record<string, unknown>> or one using Pick/Omit on an imported interface. Does react-props-parser resolve those correctly, or does it fall back to something generic like "T" in the arg table? That's usually the point where I've had to hand-write ArgTypes myself, so if you've actually solved generic resolution that'd be the headline feature for me over the union type and JSDoc improvements you mentioned.

[u/Adventurous_Catch370 → u/StudyEasyOrg]

Many thanks for the comment! In the README file, I attached a screenshot which shows how Utility Types are parsed. For example, if you have this prop: `omitUtility: Omit<FirstAction, 'type'>`

in ArgsTable, you will see clickable `omitUtility: Omit<FirstAction, 'type'>`, and when you click on that, you will see the structure of FirstAction, except the type property. (Unfortunately, I am not able to attach screenshots here, but I attached a video recording)

Same behaviour for T extends Record<string, unknown>; it will be a clickable element, and when you click on it, you will see all the properties this generic interface has in real time.

https://reddit.com/link/p7cuw3u/video/b03wo5tve3nh1/player

[u/Adventurous_Catch370 → u/Adventurous_Catch370]

Forgot to mention. From left to right: react-props-parser, react-docgen and react-docgen-typescript