babel-plugin-react-docgen-typescript

// 1. Install necessary packages: // npm install --save-dev babel-plugin-react-docgen-typescript @babel/core typescript react @babel/preset-typescript @babel/preset-react // 2. Configure your .babelrc (or babel.config.js): // .babelrc const babelConfig = { plugins: [ [ "babel-plugin-react-docgen-typescript", { // Name of the global object where docgen data will be collected. // Useful for integration with tools like Storybook. "docgenCollectionName": "STORYBOOK_REACT_CLASSES", // Regex to include files for parsing. Crucial for performance. "include": "src/components/.*\\.tsx$", // Regex to exclude files, e.g., stories or test files. "exclude": "src/components/.*\\.stories\\.tsx$" } ] ], // Add these presets if you're working with TypeScript and React "presets": ["@babel/preset-typescript", "@babel/preset-react"] }; // 3. Example TypeScript React Component (e.g., src/components/Button.tsx): /* import React from 'react'; interface ButtonProps { /** * The text content for the button. */ label: string; /** * Callback when the button is clicked. */ onClick: () => void; } /** * A simple button component with JSDoc comments for docgen. */ export const Button: React.FC<ButtonProps> = ({ label, onClick }) => { return ( <button onClick={onClick}> {label} </button> ); }; */ // During the Babel compilation process, this plugin will extract // documentation from 'Button.tsx' (if it matches 'include') and store it // in 'global.STORYBOOK_REACT_CLASSES'. This data can then be consumed by // documentation tools like Storybook to generate prop tables.