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

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:

Create a component based on StyledComponent
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® Core™ 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

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 1
Comments: 17 (9 by maintainers)

Commits related to this issue

Props: #8279 repro — committed to storybookjs/storybook by shilman 4 years ago

Most upvoted comments

I think this is related to https://github.com/storybookjs/babel-plugin-react-docgen/pull/74.

Can we get some feedback on that PR?

salmanm on Oct 3, 2019

@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 on Oct 27, 2019

Chiming in - from the issue linked by the Storybook docs itself (see here), in this comment, @Winner95 explains he made another resolver Typescript-react-function-component-props-handler that even has an example running with the beta of Storybook 6.

maeriens on May 31, 2021

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.

maeriens on May 1, 2020

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.

dastasoft on Oct 16, 2019