Docz: Set react-docgen resolver to support styled-components

[Emilios1995]

Currently, the PropsTable component does not recognize components made with styled-components.
react-styleguidist has the option to set a custom react-docgen resolver to fix this, as shown here: https://github.com/styled-components/styled-components/issues/945
Could we have something similar here? Or even better, to support styled-components by default?

[Emilios1995]

I was looking for a way to solve this and saw that this project uses babel-plugin-react-docgen which doesn't support using custom resolvers.
Now, the author is open to accepting a PR for that, which wouldn't be very hard...
but it wouldn't be of any use since I'm having problems configuring plugins with the modifyBabelRc option;

export default {
  wrapper: 'doczWrapper',
  propsParser: false,
  modifyBabelRc: conf => {
    conf.plugins.push(['react-docgen'])
    return conf
  },
}

This throws an error while building:
Module build failed (from ./node_modules/happypack/loader.js): TypeError: Property name expected type of string but got null
I don't know why.

I had to set propsParser: false because the babel config I get from modifyBabelRc doesn't have any plugins on it, so if I add the babel-plugin-react-docgen, docz then adds it again, resulting in a duplicated plugin error.

So to summarize, the first problems to solve are

• Config frommodifyBabelRc doesn't have any plugins on it
• Error from happypack when manually adding babel-plugin-react-docgen (as shown in the snippet above)

[mlent]

Having the same issue, would be happy to collaborate on this @Emilios1995.

[ilyanoskov]

@Emilios1995 you should not add babel-plugin-react-docgen as it's already in Docz. I am using react-emotion styled-components and was able to get PropTypes descriptions by doing this:

const StyledBadge = styled('div')`
  ${baseStyles};
  ${colorStyles};
  ${circleStyles};
`;

/* Adding this line makes react-docgen work for styled-components */
const Badge = props => <StyledBadge {...props} />;

Badge.propTypes = {
  /**
   * Callback for the click event.
   */
  onClick: PropTypes.func,
  /**
   * Ensures text is centered and the badge looks like a circle.
   */
  circle: PropTypes.bool,
  color: PropTypes.oneOf(values(colorNames))
};

this seems like a simple workaround, maybe @pedronauck can close this issue.

P.S. is there a way to integrate this solution directly into Docz ? or may be we add custom resolvers to react-docgen setting in Docz?

This way nobody will have to type extra things, but also enabling styled-components support ;)

[nicholasess]

@Emilios1995 could please you use the example as base to test?
I will close the issue, if the error continue with your case, reopen again.
https://github.com/pedronauck/docz/tree/master/examples/styled-components

[antoniojps]

@ilyanoskov
This is not a "simple workaround".
I am in the process of documenting a project done with styled components with a big set of components already implemented, changing all the components right now is not a viable solution.

Is there any work around other than wrapping the Styled Component?

[lucasconstantino]

@ilyanoskov @antoniojps this is not really an option: doing so will break any styled-component functionality, as none of the properties from the styled-components will be available in the new wrapping component.