styleguidist/react-styleguidist

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

Open

#826 geöffnet am 15. Feb. 2018

Auf GitHub ansehen
 (3 Kommentare) (2 Reaktionen) (0 zugewiesene Personen)TypeScript (1.416 Forks)github user discovery
help wantedquestion

Repository-Metriken

Stars
 (11.091 Stars)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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?

Contributor Guide