styled-components and Glamorous support

[penx]

Further to this discussion styleguidist/react-styleguidist#37

If you are using styled-components, you may have a component similar to:

import styled, { css } from "styled-components";
import PropTypes from "prop-types";

const Button = styled.a`
  background: transparent;
  color: white;

  ${({primary}) =>
    !!primary &&
    css`
      background: white;
      color: palevioletred;
    `};
`;

Button.propTypes = {
  primary: PropTypes.bool
};

export default Button;

or, with Glamorous:

import glamorous from "glamorous";
import PropTypes from "prop-types";

const Button = glamorous.button({
  background: "transparent",
  color: "white"
},
  ({ primary }) => (!!primary && {
    background: "white",
    color: "palevioletred"
  })
);

Button.propTypes = {
  primary: PropTypes.bool
};

This doesn't import React, so afaik is why the react-docgen resolver does not pick it up as a valid component.

No suitable component definition found.

Is there an existing way to get this to work e.g. with a custom resolver? Or is a bugfix/new feature needed?

#195 looks like it resolves this, and is marked as closed as the feature in v3. I've installed react-docgen@3.0.0-beta11 but still get the issue with the above 2 examples.

[penx]

Related:

#70
#177
#187
#195
f847bd7

[chpeters]

I am seeing this issue as well using styled-components (through styled-system's system function).

[ckihneman]

Ran into this issue with the Storybook Info Addon. Tracked it down to this function in their code, which made me realize it is an issue with react-docgen parsing styled-components, this information brought me here - noting for others.

This is what react-docgen is able to get from the styled-component with a docgen style description on the prop:

{
  "property": "children",
  "propType": "node",
  "required": true,
  "description": null
}

When other react components look like:

{
  "property": "children",
  "propType": {
    "name": "node"
  },
  "required": true,
  "description": "Heading text or node"
}

[jquense]

if anyone is interested this is what we came up with for css-literal-loader, but the syntax is the same for styled components or emotion, so this should work for them as well:

https://gist.github.com/jquense/c2a92f1c909552f295bb7953fcd2ce4d

[floppey]

I have a solution/workaround for this issue:
Normally a component exported as a styled component will look something like this

const foo = (props) => (...);
foo.propTypes = { ... };
export default styled(foo)``;

By changing this up a little and adding prop types to both the react-component and the styled-component wrapper it's now possible to read prop-types from the exported component and it still keeps eslint "react/prop-types" happy :)

const fooComponent = (props) => (...);
const foo = styled(fooComponent)``;
const propTypes = { ... };
foo.propTypes = propTypes;
fooComponent.propTypes = propTypes;
export default foo;

It adds a little bit more code, and it's not suuuuper sexy, but it gets the job done.

[jquense]

I wonder if we should close this im using (and released) https://www.npmjs.com/package/react-docgen-styled-resolver which does need a README but works great