reactjs / reactjs/react-docgen
styled-components and Glamorous support
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.8k
- Forks
- 316
- Avg merge
- 5h 7m
- Merged PRs (30d)
- 4
Description
Further to this discussion https://github.com/styleguidist/react-styleguidist/issues/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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the reported “No suitable component definition found” error with the styled-components and Glamorous examples, then inspect the react-docgen resolver and the change referenced by #195. Done means both examples are recognized as valid components without the reported error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, typescript
- Domain
- documentation, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100