[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!

[shilman]

Repro: eaa147a

[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

[penx]

I'm pretty sure this is because of reactjs/react-docgen#256

There is a custom resolver https://github.com/jquense/react-docgen-styled-resolver

But this only picks up use of styled with a template literal and not when used as styled({ someStyles })

jquense/react-docgen-styled-resolver#1

We encountered issues with the workaround mentioned above in govuk-react/govuk-react#527. Unfortunately it was a few years ago so can't remember the specifics. We resolved this by exporting the const DocumentedComponent = (props) => <Component {...props}/> separately to the main component and using this export when generating docs.

I would love a real fix for this :D

[penx]

@shilman any thoughts on this? Perhaps allowing Storybook's docgen to be configured with a custom resolver would help for some people?

[maeriens]

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.

[penx]

Unfortunately for our use case, we're not "generating props" but need something that pulls out the docgen comment from TypeScript for inclusion in storybook.

I switched our project over to using TypeScript this morning (still using prop types for now) and noticed none of the docgen comments were appearing so had to switch to using this config in .storybook/main.js

  typescript: {
    reactDocgen: 'react-docgen',
  }

It's good to see that it's possible to use a custom docgen resolver with Storybook, but from what I can see, the solution is to put this in .storybook/main.js:

  webpackFinal: async config => {
    const reactDocgen = [
      "babel-plugin-react-docgen",
      {
        DOC_GEN_COLLECTION_NAME: "STORYBOOK_REACT_CLASSES",
        // custom handlers should go before the default ones
        preHandlers: ["typescript-react-function-component-props-handler"]
      }
    ];

    config.module.rules[3].oneOf[1].options.plugins.push(reactDocgen);

    return config;
  }

I expect this would be fairly fragile as-is so would be good to have a direct option for a custom resolver from the Storybook config, if that's seen as a possible way forwards.

[shilman]

@penx we currently recommend react-docgen-typescript for processing typescript files. When we fully support react-docgen, we could look into stylized ways of supporting better configuration.

[siminino]

@shilman Now do we have stylized way to configure react-docgen with a custom resolver?
If not, do we have any documentation about how is the best way to do it?