storybookjs/babel-plugin-react-docgen

Support HOCs that wrap & export component

Closed this issue · 4 comments

No documentation is produced if a component is wrapped before being exported, e.g. using redux connect.

I've tried using different resolvers but this doesn't fix the problem. I can see in the react-docgen codebase history that they have added support for HOCs, so I believe this limitation must be specific to this plugin.

can you paste a full file that I can test? we do support some HOCs, but definitely think we missed some edge cases.

TestComponent.jsx:

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { mapStateToProps, mapDispatchToProps } from './testSelector';

const TestComponent = (props) => {
    const { text, onClick } = props;
    
    return (
        <div>
            <div>Text: {text}</div>
            <button onClick={onClick}>Button</button>
        </div>
    );
};

TestComponent.propTypes = {
    /** Text to display */
    text: PropTypes.string,
    /** Called on click */
    onClick: PropTypes.func
};

export default connect(mapStateToProps, mapDispatchToProps)(TestComponent);

testSelector.js:

export const mapStateToProps = (state, props) => ({
    text: 'hello'
});

export const mapDispatchToProps = (dispatch) => ({
    onClick: () => dispatch({ type: 'ON_CLICK' })
});

Note this issue occurs regardless of whether TestComponent is a pure functional or class component.

Also running into this issue with similar code

Fixed in v3.2.0