Storybook: Addon-docs: empty props on DocsPage. TypeScript and dot notation.

[Jekins]

Describe the bug
I am using TypeScript and dot notation with FunctionComponent. If the main FC component is additionally passed an object with child components for dot notation, then he properties are not shown on the DocsPage.

This is showing props: const Main: FC<IMainProps> = ...
This is not showing props: const Main: FC<IMainProps> & { Item: FC<IItemProps> } = ...

Expected behavior
Props FC Main are shown on DocsPage

Code snippets
_./Main.tsx_

import React, { FC } from 'react'

interface IItemProps {
  spacing: 'large' | 'small'
}

const Item: FC<IItemProps> = ({ spacing, children }) => (
  <div spacing={spacing}>{children}</div>
)

interface IMainProps {
  color: 'blue' | 'red'
}

const Main: FC<IMainProps> & { Item: FC<IItemProps> } = ({ color, children }) => (
  <div color={color}>{children}</div>
)

Main.item = Item

export default Main

_./index.ts_

import Main from './Main'

export { Main }

_./Main.stories.tsx_

import React, { FC } from 'react'
import { Main } from '.'

export default {
  title: 'UI/Components/Main',
  component: Main,
}

export const playground: FC = () => (
  <Main color='blue'>
    <Main.Item spacing='large'>Text</Main.Item>
  </Main>
)

System:
System:
OS: macOS Mojave 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
Browsers:
Chrome: 84.0.4147.135
Firefox: 72.0.2
Safari: 12.1.2

Additional context
"@storybook/addon-docs": "^6.0.18",
"@storybook/react": "^6.0.18",
"typescript": "^4.0.2"

[shilman]

can you share a screenshot to help explain?

[Jekins]

can you share a screenshot to help explain?

A screenshot of what exactly? On DocsPage, instead of a table with props, it says "No inputs found for this component. Read the docs >"

[shilman]

thanks for the clarification

[imeredith]

EDIT: Nvm this seems like another issue, will report it seperatly

I have the same issue with propTypes. I have verified that docgen is attaching the info to the component, but then I don't see any props in controls/addon-docs.

If I set Story.args = { ... } then whatever defaults I have set will show up as props and be editable but the type is inferred from the defaults

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[seschi98]

I can confirm this issue, I have exactly the same problem. If you need further details to reproduce this, please let me know (my code is almost the same as the one from @Jekins and I am on v6.0.21). One more note: This broke with the upgrade to SB6, with SB5 the props are displayed as usual.

[shilman]

Do you have a repro repo you can share?

[seschi98]

Do you have a repro repo you can share?

@shilman I can try to copy some of the code to a public repo on Monday.

[seschi98]

@shilman I created a repo with a demo component where you can see the issue.
https://github.com/seschi98/storybook-typescript-demo

If you open up Table.stories.tsx in your browser and navigate to the Doc tab, you can see that there are no props shown for the Table Component, but only for Table.Column.