Storybook: [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 https://github.com/storybookjs/babel-plugin-react-docgen/pull/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!

[shilman]

Repro: https://github.com/storybookjs/storybook/commit/eaa147ae6239533c6db352e97cf06946c2720c65

[maeriens]

Not sure if this adds much - but I am able to show the docGen if I create a React functional component that returns the Styled Component. But it means wrapping all the styled components that way...

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

const Anchor = styled.a`
  color: ${props => props.color};
  text-decoration: none;
`;

/** Now this would `work` but it's not the best approach */
const NewAnchor = (props) => <Anchor {...props}/>

NewAnchor.propTypes = {
  /** Show me your color */
  color: PropTypes.string
}

NewAnchor.defaultProps = { color: teal };

export default NewAnchor;

Proof:

All storybook versions are 5.3.18. Styled Components 4.4.1.

[testacode]

Not sure if this adds much - but I am able to show the docGen if I create a React functional component that returns the Styled Component. But it means wrapping all the styled components that way...

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

const Anchor = styled.a`
  color: ${props => props.color};
  text-decoration: none;
`;

/** Now this would `work` but it's not the best approach */
const NewAnchor = (props) => <Anchor {...props}/>

NewAnchor.propTypes = {
  /** Show me your color */
  color: PropTypes.string
}

NewAnchor.defaultProps = { color: teal };

export default NewAnchor;

Proof:

All storybook versions are 5.3.18. Styled Components 4.4.1.

I personally don't like to change my Components so that they can work with Storybook. It's like changing code for making tests pass...

[shilman]

@testacode that's why it's a workaround, not a proper fix

[maeriens]

@shilman to confirm - the issue here is in react-docgen, right? Haven't investigated much since but it seems not related to Storybook

[shilman]

Yeah, this particular codepath (react PropTypes) gets handled by react-docgen @maeriens