Add new react-docgen propTypes to info addon

[danielduan]

What I did

This adds support for some new docgen propTypes such as union and includes some documentation on how to use info addon with react-docgen.

Originally @jribeiro created #1505 to fix that and I'm making some minor changes to fix merge conflicts and redundant package.json requirements.

The original PR got automatically closed by GitHub when I tried to push to his branch so here's a new PR.

How to test

run cra example app

[danielduan]

Hey @jribeiro, this seems to work for me for react elements without flow. if you check out this branch, the DocgenButton will display info whereas the TypedButton does not.

How were you able to make the flow type work with docgen?

[danielduan]

Removing in progress label since I don't think flow types are possible with the way our babel plugin works.

[jribeiro]

Flow type is possible and should work just fine as implemented on the initial commit... you might need the flow-bin package though. I’ve just got back from holidays and been quite busy but should be able to take a look soon if you’re actually looking for contributions to the project

[danielduan]

@jribeiro my bad, thanks for the update and heads up! I figured I haven't heard anything for a week so I might as well merge the parts I've tested.

We can give this another try. I'd love to support flow and add some documentation for it for Storybook. I think I might need to add a dependency or two to the example app and throw some flow tests in.

[danielduan]

I opened up a separate PR to add Flow type removal to the default Babel config.

#1621

[jribeiro]

I added back the flowtype example and is working fine without additional modules as can be seen on this comment:
#1623 (comment)

And this screenshot:

Also added some more information to #1621 explaining why the babel-preset-flow is not needed.

Hope this helps.

Best
Joao

[jribeiro]

Ah! One last thing, with the imminent release of React Docgen version 3, you'll have problems with the hard coded dependency on react-docgen as seen on babel-plugin-react-docgen package https://github.com/storybooks/babel-plugin-react-docgen/blob/master/package.json#L31

This should be a peerDependency and not a dependency IMO but anyways version 3 brings
signature types - say () => * which this merge request already supports.

[danielduan]

@jribeiro the babel-plugin-react-docgen needs a lot of work to make it work optimally. We basically check to see if it's a react component first, then pass it over to docgen. Docgen then checks if its a valid component again and does all the processing there.

We still miss some edge cases in the babel plugin in terms of detecting react components and I haven't tested it with docgen 3 yet. If you want to take a shot at it, feel free to open a PR.

I think peerDep * is something we can explore, ideally with a fallback of some sort so users don't have to manually install a version.

[jribeiro]

Cool. I'll try to have a look over the next couple of days. Cheers

[usulpro]

@danielduan

I've seen this warning in cra-kitchen-sink:

warning.js:35 Warning: DocgenButton: type specification of prop `style` is invalid; the type checker
 function must return `null` or an `Error` but returned a function. You may have forgotten to pass an
 argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all
 require an argument).

[danielduan]

Fixed the error and added a bunch more example docgen types.