storybook: addon-info doesn't show Proptypes and description

It started working properly for me when I installed:

• react-docgen
• babel-plugin-react-docgen (add to .babelrc “plugins”: [“react-docgen”])

I fixed this by ‘extending’ the PropTable component from storybook/addon-info.

import React from 'react';
import PropTable from '@storybook/addon-info/dist/components/PropTable';

const PropTypesTable = ({ propDefinitions, ...props }) => {
  propDefinitions.forEach((def) => {
    if (typeof def.propType === 'string') {
      def.propType = { name: def.propType };
    }
  });

  return <PropTable propDefinitions={propDefinitions} {...props} />;
};

export default PropTypesTable;

Then override the TableComponent in storybook/config.js

import { setDefaults } from '@storybook/addon-info';

setDefaults({
  TableComponent: PropTypesTable, // Override the component used to render the props table
});

I had a similar issue: propTypes and descriptions appear if I use a functional component, but doesn’t work if I use a class component (only properties names are displayed).

I had trouble with getting this to work while using Typescript 😃 Even though it is fairly easy to use Typescript with storybook it seams to break addon-info’s propTypes and description. However, defaultProps and property still works 😃

It still does not work for me with docgen @niecnasowa

Still had this issue even with the latest versions (see list below). @niecnasowa’s solution worked for me - I simply added babel-plugin-react-docgen (add to .babelrc "plugins": ["react-docgen"]) without having to add react-docgen

Package Version info:

    "@storybook/addon-actions": "^4.1.2",
    "@storybook/addon-centered": "^4.1.2",
    "@storybook/addon-info": "^4.1.2",
    "@storybook/addon-knobs": "^4.1.2",
    "@storybook/addon-links": "^4.1.2",
    "@storybook/addon-options": "^4.1.2",
    "@storybook/addons": "^4.1.2",
    "@storybook/cli": "^4.1.2",
    "@storybook/react": "^4.1.2",

Code example that was failing:

export default class SomeComponent extends PureComponent {
    static propTypes = {
        /** Test comment. */
        foo: PropTypes.string
    };
}

It still does not work for me with docgen

I’m facing this problem too!

Hi, I’m seeing a similar issue, and I’ve narrowed it down to a case where I have multiple exports

Given this:

import React from 'react';
import PropTypes from 'prop-types';

class Test extends React.PureComponent {
  render() {
    return <button>test</button>;
  }
}

Test.propTypes = {
  /** Some description here */
  randomProp: PropTypes.string
};

export default Test;

export const Test2 = () => <div>Hi</div>;

The description will not show up for randomProp. HOWEVER, if I comment out the last line, as such:

// export const Test2 = () => <div>Hi</div>;

Then the description for randomProp will show up. This is even if my Story does not import Test2 at all.

I don’t know if there are other situations where descriptions won’t show up, but the scenario I described above is definitely reproducible.

Incidentally, a use case for my code having a default export as well as other exports is to have a Redux-connected component as well as its unconnected component available for testing.

op’s example is added to https://github.com/storybooks/babel-plugin-react-docgen/pull/54 and fixed

We do not support multiple exports within the same file with Info documentation at the moment. It’s a limitation with our babel plugin and the way react-docgen works.

https://github.com/storybooks/babel-plugin-react-docgen/pull/46

Another curious case.

Docgen works for this:

import React from 'react';
import PropTypes from 'prop-types';

const Test = () => <button>A button</button>;

Test.propTypes = {
  /** Another label */
  randomProp: PropTypes.string
};

export default Test;

But this doesn’t:

import React from 'react';
import PropTypes from 'prop-types';

export const Test = () => <button>A button</button>;

Test.propTypes = {
  /** Another label */
  randomProp: PropTypes.string
};

Of course, in the storybook, I’m using import Test from 'Test'; in the first scenario and import { Test } from 'Test'; in the second.

@kgwebsites That didn’t solve my problem

In my case the issue is only for stateless functional components defined as a regular function declaration, example…

import React, { PropTypes } from 'react'

const Child = () => (
  <div>Sample</div>
)

function FuncDeclaration({ children }) {
  return (
    <div>
      {children}
      <Child />
    </div>
  )
}

FuncDeclaration.propTypes = {
  children: PropTypes.node
}

export default FuncDeclaration

The issue has to do with babel-plugin-react-docgen. I created a PR in the babel-plugin-react-docgen repo to address my issue in particular… https://github.com/storybooks/babel-plugin-react-docgen/pull/41/files