styleguidist/react-styleguidist

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

Open

#826 aperta il 15 feb 2018

Vedi su GitHub
 (3 commenti) (2 reazioni) (0 assegnatari)TypeScript (1416 fork)github user discovery
help wantedquestion

Metriche repository

Star
 (11.091 star)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

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?

Guida contributor