storybook: React.forwardRef cause invalid prop in PropTable for the withInfo addon

Bug or support request summary

Using React.forwardRef cause the prop type of PropTable to be incorrect.

Warning: Failed prop type: Invalid prop `type` of type `object` supplied to `PropTable`, expected `function`.
    in PropTable
    in Unknown (created by Story)
    in div (created by Story)
    in div (created by Story)
    in div (created by Story)
    in div (created by Story)
    in div (created by Story)
    in ThemeProvider (created by Story)
    in Story
    in WrapStory

It causes bugs in the story source and proptypes table

Story without the forwardRef wrapper:

Story with the forwardRef wrapper: (Note the Unknown tag)

Steps to reproduce

Add the wrapper React.forwardRef to a working component that is used in a story React.forwardRef(({ text, onDelete, ...rest }, ref) => { ... }

My code example uses styled-components but normal DOM element reproduce the bug too.

Please specify which version of Storybook and optionally any affected addons that you’re running

• @storybook/react 3.4.0
• @storybook/addon-info 3.4.0

Affected platforms

Chrome V65.0.3325.181, windows 10 V1709 I’m pretty sure its not related but my version of styled-components is 3.2.5

Screenshots / Screencast / Code Snippets (Optional)

This is the working exemple code:

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

const Container = styled.div`
    background-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.87);
    height: 36px;
    display: inline-block;
    padding: ${({ hasDelete }) => (hasDelete ? ' 0px 4px 0px 12px' : '0px 12px')};
    font-family: 'Roboto', sans-serif;
    border-radius: 36px;
    position: relative;
`;

const Text = styled.p`
    display: inline-block;
    height: 16px;
    margin: 10px 0px;
    font-size:14px;
    position: relative;
`;

const Chip = ({ text, onDelete, ...rest }) => {
    return (
        <Container hasDelete={onDelete !== undefined} {...rest} >
            <Text>{text}</Text>
        </Container>
    );
};

Chip.defaultProps = {
    onDelete: undefined,
};

Chip.propTypes = {
    text: PropTypes.string.isRequired,
    onDelete: PropTypes.func,
};

export default Chip;

This is the bug exemple code:

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

const Container = styled.div`
    background-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.87);
    height: 36px;
    display: inline-block;
    padding: ${({ hasDelete }) => (hasDelete ? ' 0px 4px 0px 12px' : '0px 12px')};
    font-family: 'Roboto', sans-serif;
    border-radius: 36px;
    position: relative;
`;

const Text = styled.p`
    display: inline-block;
    height: 16px;
    margin: 10px 0px;
    font-size:14px;
    position: relative;
`;

const Chip = React.forwardRef(({ text, onDelete, ...rest }, ref) => {
    return (
        <Container innerRef={ref} hasDelete={onDelete !== undefined} {...rest} >
            <Text>{text}</Text>
        </Container>
    );
});

Chip.defaultProps = {
    onDelete: undefined,
};

Chip.propTypes = {
    text: PropTypes.string.isRequired,
    onDelete: PropTypes.func,
};

export default Chip;

Story

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import Chip from '../src/chip';

storiesOf('Chip', module)
    .add('Basic Usage', withInfo({
        inline: true,
        text: `
            <div>
                <h3>Description</h3>
                <p>This is the basic usage of the Chip.</p>
                <h3>Requirement</h3>
                <p>None</p>
                <h3>Props</h3>
                <ul>
                    <li>text: Text added in the chip</li>
                    <li>onDelete: Function that is called when the delete button is clicked</li>
                </ul>
            </div>
    `,
    })((() => (
        <div>
            <Chip
                text="This is a test"
                onDelete={() => { console.log('test'); }}
            />
            <Chip
                text="This can't be deleted"
                style={{ marginLeft: '20px' }}
            />
        </div>
    ))));