How to change component display name in UI but not break example imports
#826 geöffnet am 15. Feb. 2018
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?