hipstersmoothie / storybook-addon-react-docgen

A storybook addon to display react docgen info.
MIT License
87 stars 14 forks source link

feat: interactive props panel #104

Closed petermikitsh closed 4 years ago

petermikitsh commented 4 years ago

Feature

This PR adds functionality to make the Props panel interactive. (Prior to this PR, clicking the ellipsis button for enums had no effect).

Screen Shot 2020-06-08 at 10 52 19 PM Screen Shot 2020-06-08 at 10 52 31 PM

Context

Previously, the Props panel area was rendered as a string, and passed to the panel via an event emitters:

https://github.com/hipstersmoothie/storybook-addon-react-docgen/blob/0ed4acef661ac50ea7b2e2b28a90cb4ffe449ae6/src/index.js#L76-L79

This serialization of the React node loses the interactivity: click handlers, etc will not function when communicating this way.

The solution is to pass the data needed over the event emitter, and then render 'on the other side'. There are some caveats, though. Functions don't go through the event emitter very well. Now that everything needs to be serialized, it would be good to check propTables, propTablesInclude, and propTablesExclude still work correctly.

📦 Published PR as canary version: 1.2.36-canary.104.1362.0
:sparkles: Test out this PR locally via: ```sh npm install storybook-addon-react-docgen@1.2.36-canary.104.1362.0 # or yarn add storybook-addon-react-docgen@1.2.36-canary.104.1362.0 ```