blocks/blocks

Use docgen to auto-generate property controls

Opened this issue · 2 comments

We used react-docgen for Carte Blanche to parse out the prop definitions of components via their source code.

We could leverage it for Blocks to automatically generate the applyPropertyControls pieces of code from types—whether that's flowtype, typescript or prop-types. Instead of manually defining applyPropertyControls, we do that automatically for users. (runtime? pre-build step? editor extension?)

From personal experience, I've tried doing this for our design system by using various tools such as react-docgen-typescript-loader and extract-react-types and they aren't fully reliable to be used for auto-generating controls or knobs.

Most extractors fail to extract props in cases of imported and extended interfaces, and even complex union/enum types. At best, this could be supplementary and used for primitive types such as strings and booleans.

Strongly agreed!

I think of this feature as "do the tedious 80% automatically and let the user manually annotate the remaining 20%", rather than "do 100% automatically reliably everytime" which would be much harder.