Storybook: @storybook/addon-info skips PropTypes.object

Created on 2 Mar 2018  路  6Comments  路  Source: storybookjs/storybook

Issue details

When displaying Component information with @storybook/addon-info, we can see its accepted and default props. To define these, we would use Prop-Types. One of the available types is PropTypes.object. When used in a Component, @storybook/addon-info will not display it in the PropTypes table, we get empty DOM node (table cell) instead.

Other types render fine, just this one seems to get skipped.

Steps to reproduce

Create a component like in the example below and render it with the addon.

Please specify which version of Storybook and optionally any affected addons that you're running

  • @storybook/addon-info: 3.3.14
  • @storybook/addons: 3.3.14
  • @storybook/react: 3.3.14

Screenshots / Screencast / Code Snippets (Optional)

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class ExampleComponent extends Component {
  render() {
    return <div>{this.props.children}</div>
  }
}

ExampleComponent.propTypes = {
  thisWillBeBlank: PropTypes.object,
};

export default ExampleComponent;
info

Most helpful comment

This was brought up in a PR with other unrelated issues that I'm not sure is being merged here.

I found that the propType object is using the ObjectType component in src/components/types/PrettyPropType.js.

Inside src/components/types/ObjectType.js, we have:

const ObjectType = () => <span>{}</span>;

This is transpiled to:

var ObjectType = function ObjectType() {
  return _react2.default.createElement('span', null);
};

Which renders an empty span.

Also, there is what I think is an orphan file, src/components/types/Object.js with the same contents as src/components/types/ObjectType.js.

@storybook/react 3.3.15
@storybook/addon-info 3.3.15

Please let me know if a PR to fix this issue would be accepted.

All 6 comments

Not really @Hypnosphi. And thank you!

This was brought up in a PR with other unrelated issues that I'm not sure is being merged here.

I found that the propType object is using the ObjectType component in src/components/types/PrettyPropType.js.

Inside src/components/types/ObjectType.js, we have:

const ObjectType = () => <span>{}</span>;

This is transpiled to:

var ObjectType = function ObjectType() {
  return _react2.default.createElement('span', null);
};

Which renders an empty span.

Also, there is what I think is an orphan file, src/components/types/Object.js with the same contents as src/components/types/ObjectType.js.

@storybook/react 3.3.15
@storybook/addon-info 3.3.15

Please let me know if a PR to fix this issue would be accepted.

@CLL80 Good find! I hope @Hypnosphi says yes!

Please let me know if a PR to fix this issue would be accepted.

Sure, you're welcome

Released as 3.4.0-rc.4

Was this page helpful?
0 / 5 - 0 ratings