styleguidist/react-styleguidist

How to change component display name in UI but not break example imports

Open

#826 aberto em 15 de fev. de 2018

Ver no GitHub
 (3 comments) (2 reactions) (0 assignees)TypeScript (1.416 forks)github user discovery
help wantedquestion

Métricas do repositório

Stars
 (11.091 stars)
Métricas de merge de PR
 (Métricas PR pendentes)

Description

This may be partially a docgen issue, but I am trying to change the name used for the component heading and TOC. Something like this:

function customDisplayName(componentPath) {
  return (documentation, definition) => {
    documentation.set("displayName", "v1");
  };
}

The use case is that we have multiple versions of a component maintained at one time, but we want those version groupings beneath the component name in the hierarchy. Example:

Components
  Button
    v1
    v2

Where the folder structure is:

/src/components/Button/v1/Button.js <-- default export is Button component
/src/components/Button/v1/Button.md <-- v1 docs
/src/components/Button/v2/Button.js <-- default export is slightly different Button component
/src/components/Button/v2/Button.md <-- v2 docs

So I am doing "Button" as a section and adding all versions of that component within /src/components/Button in the components array.

The problem

When I set displayName to something different from the component name as it's used in the examples, the TOC/headings look good but the examples now can't find it.

If my example is <Button />, how can I tell it "use the button in the same directory as you"? OR how can I change the TOC/heading text without setting the displayName and breaking everything?

Guia do colaborador