Component being omitted from output for no reason

[reintroducing]

I'm using 6.0.0 beta.2 and I have a single component out of all of my UI kit that is not being shown for no apparent reason. I don't have any settings in my config that would ignore this component. Every single other component in my project that's in the same directory structure as this one is outputting correctly in my SG.

NotificationContainer.jsx

import find from 'lodash/find';
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Notification from './Notification';
import NotificationPropTypes from './NotificationPropTypes';

export default class NotificationContainer extends Component {
    static propTypes = {
        /** Additional class(es) to add to the component. */
        className: PropTypes.string,
        /** A notification to queue up for to display. */
        notification: PropTypes.shape(NotificationPropTypes),
        /** A function to execute when the notification queue is empty. Use this to clear your local state of any associated notification data. */
        onQueueEmpty: PropTypes.func
    };
    state = {
        currentNotification: this.props.notification
    };

    constructor(props) {
        super(props);

        const {
            notification
        } = props;

        this._notificationQueue = [];

        if (notification) {
            this._notificationQueue.push(notification);
        }
    }

    componentWillReceiveProps(nextProps) {
        const {
            notification
        } = nextProps;

        if (notification && !find(this._notificationQueue, {id: notification.id})) {
            this._notificationQueue.push(notification);
            this._checkQueue();
        }
    }

    componentDidUpdate(prevProps, prevState) {
        this._checkQueue();

        if (prevState.currentNotification && !this.state.currentNotification && !this._notificationQueue.length) {
            this.props.onQueueEmpty();
        }
    }

    _onRemove = () => {
        this._notificationQueue.shift();

        // clear the state first so that it causes a re-render and the queue can be re-checked
        this.setState({
            currentNotification: null
        });
    }

    _checkQueue() {
        if (this.state.currentNotification || !this._notificationQueue.length) { return; }

        this.setState({
            currentNotification: this._notificationQueue[0]
        });
    }

    render() {
        const {
            className
        } = this.props;
        const {
            currentNotification
        } = this.state;
        const classes = classNames(
            'NotificationContainer',
            className
        );

        return (
            <div className={classes}>
                {currentNotification &&
                    <Notification
                        onRemove={this._onRemove}
                        {...currentNotification}
                    />
                }
            </div>
        );
    }
}

NotificationContainer.md

It is recommended to keep the notifications being sent in a local state or, better yet, a Redux store. You should also use the `onQueueEmpty` prop in `NotificationContainer` to clear that state.

    initialState = {
        notification: null
    };

    <div className="App">
        <NotificationContainer
            notification={state.notification}
            onQueueEmpty={() => {
                setState({
                    notification: null
                })
            }}
        />
        <Button
            color="primary"
            onClick={() => {
                setState({
                    notification: {
                        type: 'success',
                        id: new Date(),
                        message: 'This is a success notification.'
                    }
                })
            }}
        >
            Show Notification
        </Button>
    </div>

The below code can be copy/pasted into your project.

jsx static
import React, {Component} from 'react';
import uuidV4 from 'uuid/v4';
import {
    NotificationContainer
} from 'spothero-ui';

export default class App extends Component {
    state = {
        notification: null
    };

    componentDidMount() {
        this._addNotification('success');

        setTimeout(() => {
            this._addNotification('error');
        }, 2000);

        setTimeout(() => {
            this._addNotification('warning');
        }, 4000);

        setTimeout(() => {
            this._addNotification();
        }, 6000);
    }

    _onQueueEmpty = () => {
        this.setState({
            notification: null
        });
    }

    _addNotification(type = 'info') {
        this.setState({
            notification: {
                type,
                id: uuidV4(),
                message: 'This is a test.',
                autoClose: false
            }
        });
    }

    render() {
        const {
            notification
        } = this.state;

        return (
            <div className="App">
                <NotificationContainer
                    notification={notification}
                    onQueueEmpty={this._onQueueEmpty}
                />
            </div>
        );
    }
}

I can't for the life of me figure out what it is about this component that is different from all others and making it not get parsed.

[n1313]

Does it work if you roll back to v5? And the "jsx static" bit in the middle of your .md file looks weird -- is this is a formatting error or...?

[sapegin]

Please make a demo project that we can debug based on this repo: https://github.com/styleguidist/example

[reintroducing]

So i went ahead and made a demo and nailed it down to the line that is causing the issue. My PropTypes are:

static propTypes = {
    /** Additional class(es) to add to the component. */
    className: PropTypes.string,
    /** A notification to queue up for to display. */
    notification: PropTypes.shape(NotificationPropTypes),
    /** A function to execute when the notification queue is empty. Use this to clear your local state of any associated notification data. */
    onQueueEmpty: PropTypes.func
};

NotificationPropTypes is:

import PropTypes from 'prop-types';

export default {
    /** Additional class(es) to add to the component. */
    className: PropTypes.string,
    /** A unique ID to identify the notification with. The suggested way to create this is to use <a href="https://www.npmjs.com/package/uuid#quickstart---commonjs-recommended" target="_blank">uuid</a>. */
    id: PropTypes.string.isRequired,
    /** The message body of the notification. */
    message: PropTypes.node.isRequired,
    /** Determines the characteristics of the notification. */
    type: PropTypes.oneOf(['info', 'success', 'error', 'warning']),
    /** Whether to display the close button. */
    showClose: PropTypes.bool,
    /** The time (in milliseconds) that the notification stays open for. */
    duration: PropTypes.number,
    /** Whether the notification should close itself without having to click the close button after the specified duration. */
    autoClose: PropTypes.bool,
    /** A function to execute after the notification has been hidden. Will receive the notification's props. */
    onHidden: PropTypes.func
};

This is causing an issue as follows when I compile in the example project:
Warning: Cannot parse lib/components/Notification/NotificationContainer.js: Error: [{type: ImportDefaultSpecifier, start: 195, end: 216, loc: [object Object], local: [object Object], id: null, name: null}] does not match type Printable

If I change the PropTypes to be there inline in the file, it works:

static propTypes = {
    /** Additional class(es) to add to the component. */
    className: PropTypes.string,
    /** A notification to queue up for to display. */
    notification: PropTypes.shape({
        /** Additional class(es) to add to the component. */
        className: PropTypes.string,
        /** A unique ID to identify the notification with. The suggested way to create this is to use <a href="https://www.npmjs.com/package/uuid#quickstart---commonjs-recommended" target="_blank">uuid</a>. */
        id: PropTypes.string.isRequired,
        /** The message body of the notification. */
        message: PropTypes.node.isRequired,
        /** Determines the characteristics of the notification. */
        type: PropTypes.oneOf(['info', 'success', 'error', 'warning']),
        /** Whether to display the close button. */
        showClose: PropTypes.bool,
        /** The time (in milliseconds) that the notification stays open for. */
        duration: PropTypes.number,
        /** Whether the notification should close itself without having to click the close button after the specified duration. */
        autoClose: PropTypes.bool,
        /** A function to execute after the notification has been hidden. Will receive the notification's props. */
        onHidden: PropTypes.func
    }),
    /** A function to execute when the notification queue is empty. Use this to clear your local state of any associated notification data. */
    onQueueEmpty: PropTypes.func
};

Problem is, I prefer to have them separate files as I like to export them for use in the containing project as well. Is there no way around this? How should I export the props (preferably in a separate file) so that they get read properly?

[reintroducing]

I should also point out that this is related to my question here: #548

[sapegin]

This looks like a react-docgen issue and should be reported in their repo.

[reintroducing]

Looks like this is already a long standing issue there: reactjs/react-docgen#33

Closing this and following there, thanks.