Imported interfaces not displaying in Prop tables

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)

[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.

[kylemh]

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

https://github.com/storybookjs/storybook/issues/9556