Addon-docs: Load prop table from file

[atanasster]

Parsing prop tables for typescript project takes a long time. react-docgen-typescript-loader parses all the prop table on every storybook load.

However most times the prop tables very rarely change. A faster solution would be to generate prop table files only once in a while when the props of the components actually change.

If possible can you allow for loading prop tables from external files. By default, I am naming the external .json files for an example story ComponentName.stories.tsx as ComponentName.json

example external json file generated using directly "react-docgen-typescript":
https://github.com/atanasster/grommet-controls/blob/master/src/components/ColorInput/doc/ColorInput.json

my current (temporary) solution to use a webpack plugin to load the prop tables from files:
https://github.com/atanasster/grommet-controls/blob/master/.storybook/webpack.config.js

my current script to generate external json prop tables:
https://github.com/atanasster/grommet-controls/blob/master/tools/generate-docs.js

If the feature request is accepted I can clean up my script and release it for other people to also use if they have typescript docgen prop tables.

[shilman]

Love this. It will also help for frameworks like Angular #6664 where there might not be a loader handy. I'd like some time to think about how to integrate this most cleanly cc @South-Paw https://github.com/South-Paw/storybook-addon-overview-angular

[atanasster]

great, pls let me know when you are ready with how it should work (especially how to configure the file names to load the prop tables from - in my case they are in the same folder as the story, has a name like the component displayName, and an extension .json - but I suppose people can have them in different places.)

[clintandrewhall]

I'll +1 this. A prop table cache would be pretty sick. I'd gladly help (as available) and/or test (as ready) this kind of feature.

[atanasster]

@clintandrewhall - any chance you can try my temporary solution in the meantime? Would love to get your feedback on the configuration options we can have.
—
Add the generate-docs script to your package.json and add my webpack loader to your storybook webpack config.

[shilman]

@atanasster Relevant: #8585 #8489

[laplacesdemon]

This is a great idea! I need to customize the props table because I need to filter out some props from the documentation (for some interesting reason specific to my project). A props file would work perfectly in my case.

[shilman]

@laplacesdemon you can also filter with propsFilter loader option e.g. https://github.com/strothj/react-docgen-typescript-loader#loader-options

[atanasster]

Just released https://github.com/atanasster/webpack-react-docgen-typescript for caching and speed up of parsing typescript prop tables. Feedback and issues welcome to get it stable.