Gathering detailed insights and metrics for @storybook/react-docgen-typescript
Gathering detailed insights and metrics for @storybook/react-docgen-typescript
Gathering detailed insights and metrics for @storybook/react-docgen-typescript
Gathering detailed insights and metrics for @storybook/react-docgen-typescript
A simple parser for react properties defined in typescript instead of propTypes.
npm install @storybook/react-docgen-typescript
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
542 Commits
2 Watching
2 Branches
97 Contributors
Updated on 03 Mar 2023
TypeScript (100%)
Cumulative downloads
Total Downloads
Last day
126.3%
869
Compared to previous day
Last week
-11.3%
5,107
Compared to previous week
Last month
37.5%
23,071
Compared to previous month
Last year
48.7%
203,863
Compared to previous year
A simple parser for React properties defined in TypeScript instead of propTypes.
It can be used with React Styleguidist.
1npm install --save-dev react-docgen-typescript
To parse a file for docgen information use the parse
function.
1const docgen = require("react-docgen-typescript"); 2 3const options = { 4 savePropValueAsString: true, 5}; 6 7// Parse a file for docgen info 8docgen.parse("./path/to/component", options);
If you want to customize the typescript configuration or docgen options, this package exports a variety of ways to create custom parsers.
1const docgen = require("react-docgen-typescript");
2
3// Create a parser with the default typescript config and custom docgen options
4const customParser = docgen.withDefaultConfig(options);
5
6const docs = customParser.parse("./path/to/component");
7
8// Create a parser with the custom typescript and custom docgen options
9const customCompilerOptionsParser = docgen.withCompilerOptions(
10 { esModuleInterop: true },
11 options
12);
13
14// Create a parser with using your typescript config
15const tsConfigParser = docgen.withCustomConfig("./tsconfig.json", {
16 savePropValueAsString: true,
17});
Include following line in your styleguide.config.js
:
1module.exports = { 2 propsParser: require("react-docgen-typescript").withDefaultConfig([ 3 parserOptions, 4 ]).parse, 5};
or if you want to use custom tsconfig file
1module.exports = { 2 propsParser: require("react-docgen-typescript").withCustomConfig( 3 "./tsconfig.json", 4 [parserOptions] 5 ).parse, 6};
propFilter
The propFilter
option allows you to omit certain props from documentation generation.
You can either provide and object with some of our pre-configured filters:
1interface FilterOptions { 2 skipPropsWithName?: string[] | string; 3 skipPropsWithoutDoc?: boolean; 4} 5 6const options = { 7 propFilter: { 8 skipPropsWithName: ['as', 'id']; 9 skipPropsWithoutDoc: true; 10 } 11}
If you do not want to print out all the HTML attributes of a component typed like the following:
1const MyComponent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ()...
you can provide a propFilter
function and do the filtering logic yourself.
1type PropFilter = (prop: PropItem, component: Component) => boolean; 2 3const options = { 4 propFilter: (prop: PropItem, component: Component) => { 5 if (prop.declarations !== undefined && prop.declarations.length > 0) { 6 const hasPropAdditionalDescription = prop.declarations.find((declaration) => { 7 return !declaration.fileName.includes("node_modules"); 8 }); 9 10 return Boolean(hasPropAdditionalDescription); 11 } 12 13 return true; 14 }, 15};
Note: children
without a doc comment will not be documented.
componentNameResolver
1(exp: ts.Symbol, source: ts.SourceFile) => string | undefined | null | false;
If a string is returned, then the component will use that name. Else it will fallback to the default logic of parser.
shouldExtractLiteralValuesFromEnum
: booleanIf set to true, string enums and unions will be converted to docgen enum format. Useful if you use Storybook and want to generate knobs automatically using addon-smart-knobs.
shouldExtractValuesFromUnion
: booleanIf set to true, every unions will be converted to docgen enum format.
skipChildrenPropWithoutDoc
: boolean (default: true
)If set to false the docs for the children
prop will be generated even without an explicit description.
shouldRemoveUndefinedFromOptional
: booleanIf set to true, types that are optional will not display " | undefined" in the type.
savePropValueAsString
: booleanIf set to true, defaultValue to props will be string. Example:
1Component.defaultProps = { 2 counter: 123, 3 disabled: false, 4};
Will return:
1 counter: { 2 defaultValue: '123', 3 required: true, 4 type: 'number' 5 }, 6 disabled: { 7 defaultValue: 'false', 8 required: true, 9 type: 'boolean' 10 }
Styled components example:
1componentNameResolver: (exp, source) => 2 exp.getName() === "StyledComponentClass" && getDefaultExportForFile(source);
The parser exports
getDefaultExportForFile
helper through its public API.
In the example folder you can see React Styleguidist integration.
Warning: only named exports are supported. If your project uses default exports, you still need to include named exports for react-docgen-typescript
.
The component Column.tsx
1import * as React from "react"; 2import { Component } from "react"; 3 4/** 5 * Column properties. 6 */ 7export interface IColumnProps { 8 /** prop1 description */ 9 prop1?: string; 10 /** prop2 description */ 11 prop2: number; 12 /** 13 * prop3 description 14 */ 15 prop3: () => void; 16 /** prop4 description */ 17 prop4: "option1" | "option2" | "option3"; 18} 19 20/** 21 * Form column. 22 */ 23export class Column extends Component<IColumnProps, {}> { 24 render() { 25 return <div>Test</div>; 26 } 27}
Will generate the following stylesheet:
The functional component Grid.tsx
1import * as React from "react"; 2 3/** 4 * Grid properties. 5 */ 6export interface IGridProps { 7 /** prop1 description */ 8 prop1?: string; 9 /** prop2 description */ 10 prop2: number; 11 /** 12 * prop3 description 13 */ 14 prop3: () => void; 15 /** Working grid description */ 16 prop4: "option1" | "option2" | "option3"; 17} 18 19/** 20 * Form Grid. 21 */ 22export const Grid = (props: IGridProps) => { 23 const smaller = () => { 24 return; 25 }; 26 return <div>Grid</div>; 27};
Will generate the following stylesheet:
The typescript is pretty complex and there are many different ways how to define components and their props so it's realy hard to support all these use cases. That means only one thing, contributions are highly welcome. Just keep in mind that each PR should also include tests for the part it's fixing.
Thanks to all contributors without their help there wouldn't be a single bug fixed or feature implemented. Check the contributors tab to find out more. All those people supported this project. THANK YOU!
The integration with React Styleguidist wouldn't be possible without Vyacheslav Slinko pull request #118 at React Styleguidist.
No vulnerabilities found.
No security vulnerabilities found.