styleguidist/react-styleguidist

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

Open

#826 创建于 2018年2月15日

在 GitHub 查看
 (3 评论) (2 反应) (0 负责人)TypeScript (1,416 fork)github user discovery
help wantedquestion

仓库指标

Star
 (11,091 star)
PR 合并指标
 (PR 指标待抓取)

描述

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?

贡献者指南