Description and Props slots not shown when using TS and Component.displayName

Describe the bug @storybook/addon-docs fails to populate the “Description” and “Props” slots in the following scenario;

• TypeScript is used.
• The component to document has a Component.displayName and the display name is assigned a string that doesn’t match the component’s name exactly.

To Reproduce Here’s a sample repo which reproduces this bug: https://github.com/eriktoyra/storybook-component-displayname-bug

1. npm run storybook
2. Open up the EmpireAlert story in the storybook and go to the Docs tab. Note that both the “Description” and “Props” slots are populated.
3. Open up ./src/components/EmpireAlert.tsx and uncomment //EmpireAlert.displayName = "RebelAlliance.EmpireAlert" on line 47. (You might have to restart Storybook to see the effect)
4. Go back to the Storybook and note that the “Description” and “Props” slots have lost their content.

Expected behavior I expect Component.displayName to have no effect at all on “Description” and “Props” in the docs. The displayName string is meant for debugging purposes.

Screenshots

Actual result

Expected result

Code snippets

./.storybook/main.js

module.exports = {
  stories: ["../src/**/*.stories.(js|tsx)"],
  addons: [
    "@storybook/preset-typescript",
    {
      name: "@storybook/preset-create-react-app",
      options: {
        tsDocgenLoaderOptions: {}
      }
    },
    "@storybook/addon-actions",
    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true
      }
    },
    "@storybook/addon-links"
  ]
};

./src/components/EmpireAlert.tsx

import styled from "@emotion/styled";
import React from "react";

const Wrapper = styled("div")<{}>(({ theme }) => ({
  backgroundColor: "tomato",
  color: "white",
  padding: 10
}));

type AlertCode = "Code Red" | "Code Yellow" | "Code Green";

export interface EmpireAlertProps {
  /**
   * A title that brings attention to the alert.
   */
  title: AlertCode;
  /**
   * A message alerting about Empire activities.
   */
  message: string;
}

/**
 * This message should show up in the Docs panel if everything works fine.
 */
export const EmpireAlert: React.FC<EmpireAlertProps> = ({
  title = "Code Yellow",
  message
}) => (
  <Wrapper>
    <h1>{title}</h1>
    <p>{message}</p>
  </Wrapper>
);

/**
 * Specifying a displayName with a different name for the component will
 * cause DocsPage to fail to populate the Description and Props slots
 *
 * Works:
 *  - Using a displayName that _matches_ the component name exactly.
 *  - Not using a displayName at all.
 *
 * Fails:
 *  - Using a displayName that _does not match_ the component name exactly.
 */
 // EmpireAlert.displayName = "RebelAlliance.EmpireAlert"; // Uncomment to trigger bug

./src/components/EmpireAlert.stories.tsx

import React from "react";
import { EmpireAlert } from "./EmpireAlert";

export default {
  title: "EmpireAlert",
  component: EmpireAlert
};

export const _default = () => (
  <EmpireAlert
    title="Code Red"
    message="The Empire has been sighted on Hoth. Man the battle stations!"
  />
);

System: Storybook 5.3.3 is also affected.

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
    npm: 6.13.4 - ~/.nvm/versions/node/v10.15.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 70.0.1
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: 5.3.4 => 5.3.4 
    @storybook/addon-docs: 5.3.4 => 5.3.4 
    @storybook/addon-links: 5.3.4 => 5.3.4 
    @storybook/addons: 5.3.4 => 5.3.4 
    @storybook/preset-create-react-app: ^1.5.1 => 1.5.1 
    @storybook/preset-typescript: ^1.2.0 => 1.2.0 
    @storybook/react: 5.3.4 => 5.3.4 

Additional context Yes, I will be able to assist in pushing a PR for this given som guidance.

[dzwillia]

I ran into this issue just a bit ago as well. We wanted to preface our components with the library name for better specificity in React DevTools. Have not had any luck with any of the workaround or suggestions above.

[eriktoyra]

@eriktoyra - i think the displayName is used by react-docgen-typescript to match the parsed typescript prop tables and and docgen info (ie the description). In this respect, it makes sense that the dislayName will affect those features, since the component prop table will not be “found”, no?

@atanasster Thank’s for looking that up! It seems you are correct. But the purpose of displayName is not to be used as a “component lookup” alternative to the actual component name. As per the official documentation its purpose is to be used for displaying an alternative component name when debugging.

Given the fact that this bug does not occur when using displayName in a JavaScript based component I would say that the TypeScript version is doing it wrong.