Set react-docgen resolver to support styled-components

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?

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

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