reactjs / reactjs/react-docgen

styled-components and Glamorous support

Ouverte
#256 6 commentaires 8 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
TypeScript
Étoiles
3.8k
Forks
316
Merge moyen
5 h 7 min
PR mergées (30 j)
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.

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Reproduisez l’erreur signalée « No suitable component definition found » avec les exemples styled-components et Glamorous, puis examinez le react-docgen resolver et la modification référencée par #195. C’est terminé lorsque les deux exemples sont reconnus comme des composants valides sans l’erreur signalée.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, react, typescript
Domaine
documentation, tooling
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.