twostoryrobot / storybook-addon-docgen Goto Github PK

Similarly to #9, Array PropTypes are not displayed correctly.

react-docgen provides the parse docgen onto the Component at Component.__docgenInfo. This object is being passed to the storybook docs panel. Currently it just converts the object to a string and displays that.

What we want is for it to be nicely formatted with descriptions and a prop types table. See this repo for inspiration. The linked package is MIT so you could start by just pulling put the DocPanel and see how it looks.

Currently if a PropTypes function is used it displays it like this:

If PropTypes functions like PropTypes.arrayOf() or PropTypes.shape() are used, it should add a column (in the example below I named it shape names but it could be anything) and break the supplied object down to it's sub elements.

For example, the following:

cars: PropTypes.shape({
   id: PropTypes.string,
   isEmpty: PropTypes.bool,
   timeInYard: PropTypes.number
})

should produce:

However, there is the chance that this could become fairly deeply nested, so some thought should be put into how we might handle that.