storybook: 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.