storybook: docgen does not detect React.createClass components

I’ve been struggling to get react-docgen working with the current default configs. Storybooks has a few features recently merged into addon-info to automatically generate documentation for description, prop-types, and more. We could potentially automatically generate configs for Knobs as well.

The issue seems to inside the Kadira babel plugin babel-plugin-react-docgen. When stepping through what’s happening during babel compile, I found out it never reaches the part that runs react-docgen.

1. Half the components get rejected because they’re stateless components. Some are incorrectly identified, some are correct that they are stateless, however I still think there is value in getting docgen description and prop info for stateless components. https://github.com/kadirahq/babel-plugin-react-docgen/blob/master/src/index.js#L25
2. All of the components will fail the parent path node name test which seems to always point to a render function and thus fail because they don’t have a name. The name is used to find the generated info later on. https://github.com/kadirahq/babel-plugin-react-docgen/blob/master/src/index.js#L29
3. All of the components will fail to be detected as exported. https://github.com/kadirahq/babel-plugin-react-docgen/blob/master/src/index.js#L34

My guess is that we need to update the plugin to support the new version of babel we’re using.

Example of a component that would be identified as stateless, without parent node name, and not exported:

const React = require('react');
const { PropTypes } = React;

const stylesheet = {};

/**
 * Component for displaying a container that resembles the original CSS environment for different themes
 */

const ComponentWrapper = React.createClass({
  propTypes: {
    /**
     * Theme to display
     */
    theme: PropTypes.string
  },

  getDefaultProps() {
    return {
      theme: 'damask'
    };
  },

  render() {
    return (
      <div className={ stylesheet[this.props.theme] }>
        <div className={ stylesheet.container }>
          { this.props.children }
        </div>
      </div>
    );
  }
});

module.exports = ComponentWrapper;

Since my component class names are the same as the filenames, I’ve been able to get it to work by changing the index.js in babel-plugin-react-docgen to:

      'FunctionDeclaration|FunctionExpression|ArrowFunctionExpression': function FunctionDeclarationFunctionExpressionArrowFunctionExpression(path, state) {

        console.log('babel-plugin-react-docgen 2');
        console.log(path.hub.file.opts.basename);
        // if (!(0, _isStatelessComponent2.default)(path)) {
        //   console.log('stateless');
        //   return;
        // }
        // if (!path.parentPath.node.id) {
        //   console.log('no parent');
        //   console.log(path.parentPath.node);
        //   return;
        // }
        // var className = path.parentPath.node.id.name;
        var className = path.hub.file.opts.basename;

        // if (!isExported(path, className, t)) {
        //   console.log('not exported');
        //   return;
        // }
        console.log('generating');
        injectReactDocgenInfo(className, path, state, this.file.code, t);
      }

I think we should try to bring the babel plugin under our umbrella org and maintain it since it does bring a lot of improvements to addon-info.

Thoughts?