search

hipstersmoothie / storybook-addon-react-docgen

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

Long types, table readability #100

Closed petermikitsh closed 4 years ago

petermikitsh commented 4 years ago

I have some components who's prop types are a lot of text. For example, my Icon component is one of roughly 1,000 strings (enum). So it's a lot of scrolling to get to the next prop, when the propTypes data is 16,000px tall:

Screen Shot 2020-06-04 at 5 02 40 PM

Thoughts on having a max-height for types, with overflow scroll?

hipstersmoothie commented 4 years ago

Yeah this could probably be improved. I factored out all the renders but haven't integrated them

repo: https://github.com/hipstersmoothie/storybook-pretty-props

That one in particular

We could probably make it look like the shape renderer and have it expand.

It would look nice if it was formatted like a long type with prettier:

oneOf 
  | 'one'
  | 'two'
  | 'three'

Then the collapsed state (show like 23-36 characters)

oneOf = 'one' | 'two' | ...

If you make a PR to storybook-pretty-props i'll integrate it here 🚀

petermikitsh commented 4 years ago

Fixed in:

gsccheng commented 2 years ago

@hipstersmoothie How can the lines be maximized programmatically? Looks like clicking the ellipsis button is the only way to toggle this and it is always set to minimized by default (e.g. for the oneOf type)?