Show objects as objects and not strings within Props Tables (when using Typescript type definitions)

[martinburford]

Hi there,

When using PropTypes within a React component, props which contain objects are rendered like this, showing key/value pairs in a tabulated format:

When switching over to TypeScript and providing type definitions via interfaces, objects get shown as strings, like this:

The interface I'm using is nothing more than this:

My question is ... how can I get a similar format for objects (as shown when defined via PropTypes) within Props tables when defining types via Typescript interfaces and to NOT have them returned as strings. With a bit of nesting, a single string of key/value pairs gets quite unreadable pretty quickly.

I am having PropsTables defined via this code in my story files:

import Image from '../';

<Props of={Image} />

[martinburford]

The current implementation (understandably) truncates types defined via TypeScript. PLEASE update this to include some kind of prettified formatting of objects defined this way. It's largely unreadable in this format. Many thanks!

[MondaySam]

I think I stumbled upon a related issue concerning PropTypes and imported Objects.

In my Button.js I am using PropTypes.oneOf(Object.values(BTN_SIZES)) with const BTN_SIZES = {SMALL: 'small', REGULAR: 'regular', LARGE: 'large'}

Now, if that BTN_SIZES Object is defined within my Button.js, everything is fine. However, if I define and export the BTN_SIZES in another class, and import it into Button.js, Storybook no longer returns a list of the entries, but a Dropdown with just numbers from 0 to X, where X equals the number of characters within the PropTypes.oneOf()-Bracket. So it treats Object.values(BTN_SIZES) as a String.