[addon-docs] DocGen description are not displayed with StyledComponent

[davidouanounou]

Describe the bug
Description related to the component or to the props are not displayed when component is based on StyledComponent.

To Reproduce
Steps to reproduce the behavior:

1. Create a component based on StyledComponent
2. Launch Storybook

Expected behavior
Should display description as expected

Screenshots

Code snippets

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

/**
* Use `A` to provide a regular link
*/
const A = styled('a')(
    {
        margin: '8px 0',
        outline: 'none'
    }
)

A.displayName = 'Link';
A.defaultProps = {
    children: 'This is a link'
};

A.propTypes = {
    /** That should be the clickable element */
    children: PropTypes.node.isRequired
};
export default A;

System:
System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
Binaries:
Node: 12.4.0 - /usr/local/bin/node
Yarn: 1.17.0 - /usr/local/bin/yarn
npm: 6.11.3 - /usr/local/bin/npm
Browsers:
Chrome: 77.0.3865.90
Safari: 13.0.1
npmPackages:
@storybook/addon-actions: ^5.2.1 => 5.2.1
@storybook/addon-docs: ^5.3.0-alpha.6 => 5.3.0-alpha.6
@storybook/addon-info: ^5.2.1 => 5.2.1
@storybook/addon-knobs: ^5.2.1 => 5.2.1
@storybook/addon-links: ^5.2.1 => 5.2.1
@storybook/addon-storysource: ^5.2.1 => 5.2.1
@storybook/addons: ^5.2.1 => 5.2.1
@storybook/react: ^5.2.1 => 5.2.1

Additional context
Nothing special

[salmanm]

I think this is related to storybookjs/babel-plugin-react-docgen#74.

Can we get some feedback on that PR?

[dastasoft]

In 5.2.4 I see the props from styled components in some components, not in all. Idk if it's my fault or not but I have all components styled and with stories in the same way.

Can you confirm this issue is resolved on 5.2.4? Thanks.

[shilman]

@KoshiroKun since there are no comments on the issue and no PRs that reference it, it means that the issue is still active (unfixed) as far as I know.

[michaelcitro]

Hi @shilman I am having this issue as well but in my case, it seems to happen when I am deconstructing the rest of the props in my component. For example:

const Input = (props) => {
  const { prop1, prop2, ...rest } = props;
  return <input {...rest} />;
};

Input.propTypes = {
  prop1: PropTypes.string,
  prop2: PropTypes.string,
  prop3: PropTypes.string,
};

export default Input;

when I remove ...rest or deconstruct each prop individually it works fine though. I have also tried version 5.3.0-alpha.30 as to pull in the babel-plugin-react-docgen updates but still no luck. As I was troblshooting I did see some weird behaviour. For example, if I exported the props and used them on another component so I can pass it to the <Props of={ProxyProps} /> it did not work that way either. Maybe it could be something wrong with <Props />?

[shilman]

@michaelcitro thanks for the info. i'm making a bunch of repros now for all of the issues raised in #8435 (umbrella issue, that includes this one) and then will go through & diagnose. appreciate your patience!