Imported interfaces not displaying in Prop tables

[sami616]

When extending an interface with another imported from another file, the prop table doesn't render any of the imported properties. I assume this would also apply when using the Type's too.

eg:

// Foo.tsx

export interface Foo {
  bar?: string
}

// Component.tsx

import { Foo } from './Foo.tsx'

interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement>, Foo {
  disabled?: boolean
}

const Component = ( { disabled = false, children }: Props) => <button disabled={disabled}>{children}</button>

☝🏼Prop table only outputs the disabled prop (ignores bar)

[kylemh]

It's not about any imported type, but rather it's about using types stemming from an import of a default export.

#9556

[shilman]

Closing this in favor of #9556. Thanks @kylemh!!

[tobiaskraus]

I have the same issue, and #9556 is not the same as the issue described here.

@sami616 wrote

Prop table only outputs the disabled prop (ignores bar)

So it did render the base properties, and not like in 9556 described, nothing.
I am NOT using the default import syntax React.FunctionComponent but the named export syntax FunctionComponent and I try to extend another properties interface from another file (named export), and it ignores these properies:

// InptTextField.tsx
export interface InputTextFieldProps {
  placeholder?: string;
  labelId?: string;
  error?: boolean;
}


// Input.tsx
import InputTextField, { InputTextFieldProps } from './elements/InputTextField';

export interface InputProps extends InputTextFieldProps {
  forTag?: string;
  labelText?: string;
}

const Input: FunctionComponent<InputProps> = ({

Output in Storybook:

Name	Description	Default
forTag	string	-
labelText	string	-

So my properties from other file are ignored.

[tobiaskraus]

This issue is a currently opened issue in react-docgen-typescript-loader/issues/47

The problem seems to lay deep:

This is a bit tricky because the loader is executed once for each file seen by webpack, and at that time we have no information of some other extended interfaces imported from other files

(from paibamboo in the above issue)

[shilman]

FYI we are recommending react-docgen in SB 6.0. It suffers from the same issue, but fixes a lot of other issues, and we think issues are more likely to get fixed there:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-prop-tables-with-typescript