Automate Documentation Generation in your Typescript React Codebase with Storybook
Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.
In this short video I show how to set up the react-docgen-typescript-webpack-plugin, a neat plugin that leverages the types you are -already- writing for Typescript to autogenerate documentation.
Instructor: [00:01] We're going to add React.gen Typescript webpack plugin. To configure the plugin, we're going to go to the webpack config and import it. All we need to use it is to just push it into the plugins list of the default config.
[00:18] Now, when you run Storybook, this is what you see. You should see the prop type section populated with extra fields. Sometimes, you find you want annotate individual props to tell your users what each of them might do.
[00:32] Head over to button.tsx, and add extra comments on top of your interface. When you reload, you should get full indications of descriptions of each prop, as well as whether something is required, and whether there is a default value.
I never relised storybook had these capabilities. I only found out about this course by chance in a tweet. What a stroke of luck!👍🏾
Thanks for the course Shaw. The docgen plugin you used was not working for me. I did not get any errors, but PropTypes didn't appear so I change it by using the recommended plugin by storybook (react-docgen-typescript-loader) and now it works (maybe this is helpful for someone). https://storybook.js.org/configurations/typescript-config/
Thank you very much for the great explanation Shaw, it reflects by far the powerful capatibilities of storybook, and I'm convinced that I will use it in my next proyect