Props Table doesn't display for Props with complex types (Typescript addon-docs)

[shripadk]

Describe the bug
This bug is specific to Typescript. When you import Props from another Component and create a union type with current Component's Props, the Props table fails to load.

Expected behavior
Expect Props Table to be displayed for Components with complex Props Types.

Screenshots

Code snippets to Reproduce the above problem
An example Button Component (assume it is at ./src/Button.tsx):

import * as React from "react"

export type Props = {
  type: "button" | "submit" | "reset"
  kind?: string
  children: React.ReactNode
}

export function Button(props: Props) {
  return (
    <button className={props.kind} type={props.type}>
      {props.children}
    </button>
  )
}

A Submit Button Component (assume it is at ./src/SubmitButton.tsx):

import * as React from "react"
import { Button, Props as ButtonProps } from "./Button"

export type Props = ButtonProps & {
  color: string
}

export function SubmitButton(props: Props) {
  return (
    <Button type="submit">
      {props.children} <strong style={{ color: props.color }}>→</strong>
    </Button>
  )
}

Story for the above SubmitButton component (in MDX):

import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks'
import { SubmitButton } from "../src/SubmitButton"

<Meta title="SubmitButton" component={SubmitButton} />

# SubmitButton

<Preview withToolbar>
  <Story name='Default'>
    <SubmitButton color="blue">Submit</SubmitButton>
  </Story>
</Preview>

### Props

<Props of={SubmitButton} />

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
  Binaries:
    Node: 10.18.1 - /usr/local/bin/node
    Yarn: 1.22.0 - ~/.yarn/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 80.0.3987.132
    Firefox: 67.0.4
    Safari: 13.0.5
  npmPackages:
    @storybook/addon-a11y: ^5.3.14 => 5.3.14 
    @storybook/addon-actions: ^5.3.14 => 5.3.14 
    @storybook/addon-docs: ^5.3.14 => 5.3.14 
    @storybook/addon-info: ^5.3.14 => 5.3.14 
    @storybook/addon-knobs: ^5.3.14 => 5.3.14 
    @storybook/addon-links: ^5.3.14 => 5.3.14 
    @storybook/addons: ^5.3.14 => 5.3.14 
    @storybook/react: ^5.3.14 => 5.3.14

Additional context
I tested it directly with react-docgen-typescript which I believe is what Storybook is using beneath the hood. It gives me the correct output. Have attached a screenshot of the same here:

[shilman]

It looks like the loader is not running properly on your typescript files. Do you have a repro?

[shripadk]

@shilman I can make one and put it up in sometime. The loader is working for simpler components. As soon as I create a complex Props type it fails.

[shripadk]

@shilman Have pushed a repro repo here: https://github.com/shripadk/storybook-repro

Two stories: one for Button component and another for SubmitButton. As you'll be able to see, the Button props table renders perfectly. SubmitButton on the other hand renders an empty props table.

Screenshot of Button Props Table:

Screenshot of SubmitButton Props Table:

[shilman]

Thanks @shripadk. This looks like a dupe to #9591, I'm going to close this for now.