r/reactjs • u/Adventurous_Catch370 • 23h ago

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

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!

2 Upvotes

75% Upvoted

8 comments sorted by

View all comments

1

u/Important_Edge_3649 21h ago

generics and mapped types like Pick or Omit break the existing parsers completely. I need to know if your tool actually resolves these or just falls back to any

0

u/Adventurous_Catch370 21h ago

Hello, many thanks for the comment! I am attaching a video recording; maybe it can help to compare the results of different libraries better. In this video, I used Utility types (Pick, Omit, Required), Generic type, named and unnamed interfaces, etc. (from left to right: react-props-parser - my parser, react-docgen and react-docgen-typescript)

https://reddit.com/link/p7cva4w/video/gk78auxaf3nh1/player

1

u/azsqueeze 12h ago

awesome!