Display destructured props from separate files

[reintroducing]

In my UI component library I export components but I also export some PropTypes. Here is an example:

IconPropTypes.js

import PropTypes from 'prop-types';

export default {
    /** Additional class(es) to add to the component. */
    className: PropTypes.string,
    /** The name of the icon to display from the icons map. */
    name: PropTypes.string.isRequired,
    /** The ARIA role attribute. */
    role: PropTypes.string,
    /** The dimensions to set the width and height of the icon to. */
    size: PropTypes.number,
    /** Additional key/value pairs for the icon names/path definitions to add on to the common set provided. */
    iconDefinitions: PropTypes.object
};

This gets used in my Icon component.

Icon.jsx

import has from 'lodash/has';
import React, {Component} from 'react';
import classNames from 'classnames';
import IconPropTypes from './IconPropTypes';
import ICONS from './icon-defs';

export default class Icon extends Component {
    static propTypes = IconPropTypes;
    static defaultProps = {
        role: 'presentation',
        size: 20
    };

    constructor(props) {
        super(props);

        const {
            name,
            iconDefinitions
        } = props;

        this._ICONS = {
            ...ICONS,
            ...iconDefinitions
        };

        if (!has(this._ICONS, name)) {
            throw new Error(`'${name}' is not a valid icon name. Please use a defined name from the icon definitions available.`);
        }
    }

    render() {
        const {
            className,
            name,
            role,
            size
        } = this.props;
        const classes = classNames(
            'Icon',
            `Icon-${name}`,
            className
        );

        return (
            <svg
                className={classes}
                role={role}
                viewBox="0 0 1024 1024"
                width={`${size}px`}
                height={`${size}px`}
            >
                <path d={this._ICONS[name]} />
            </svg>
        );
    }
}

I export this because I can extend the icon set on a per project basis by using the same IconPropTypes (but really the explanation here is not important). The output in react-styleguidist only shows the role and size props with their default values, presumably ignoring my propTypes because they are set to an external source.

It would be nice if somehow, in a case like this, styleguidist could crawl that file and report the PropTypes that live within it. I think this is a relatively common use case, or maybe I'm mistaken, but it's pretty common in our UI kit so that we're not re-writing the same PropTypes for components that get extended on a per project basis.

Thoughts?

[tizmagik]

Curious why you don't export the Icon proptypes from the same file? Not sure if it would solve your issue, but might be worth a try?

[reintroducing]

I guess it's a habit where we only have one export per file like this. That being said I'm not sure it would solve it anyway but I'd rather not export multiple items out of a component file.

[stepancar]

Give a look at our project https://github.com/alfa-laboratory/arui-feather/blob/master/src/email-input/email-input.jsx#L20
We reuse proptypes from another component. See how it looks in react-styleguidist demo https://alfa-laboratory.github.io/arui-feather/styleguide/#emailinput
If you open props section - you can see that props equal to input component props.
But we use custom propsParser https://github.com/alfa-laboratory/arui-feather/blob/master/styleguide.config.js#L61
https://github.com/alfa-laboratory/arui-feather/blob/master/styleguide.config.js#L9
Try use this solution for your case.

[reintroducing]

Looks like this is a known issue in react-docgen: reactjs/react-docgen#33

Closing this and following there.