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.

[apdrsn]

Hi :) This still seems to be an issue. Any progress on it? :)

[seschi98]

Hi :) This still seems to be an issue. Any progress on it? :)

@apdrsn I think I managed to get it to work, but I will have to check how I did it on monday :)

[apdrsn]

@seschi98 That would be lovely! Thanks 💯

[apdrsn]

Hi agian @seschi98 :) Did you get to have a look if you managed to solve this?

[seschi98]

@apdrsn Yes i did some research and unfortunately I was wrong... I did not find a solution for the problem

[apdrsn]

@seschi98 alright - no worries :) A colleague of mine found the solution for my use case. Turns out it was pretty simple:

import { Flex } from '../Flex';

export default {
  title: 'Components/Layout/Flex',
  component: Flex,
  subcomponents: { 'Flex.Item': Flex.Item },
} as Meta;

[atlk-kv]

I have the same problem + does not logging events in actions tab. Adding a subcomponent to Meta object doesn't solve the problem.

type SliderComponent = React.FunctionComponent<SliderPropsTypes> & {
  Range: React.FunctionComponent<SliderRangePropsTypes>;
};

const Slider: SliderComponent = ({
...
...
...

Slider.Range = SliderRange

export default Slider

export default {
  title: 'Core components/Slider',
  component: Slider,
  subcomponents: { 'Slider.Range': Slider.Range },
} as Meta;

[jzempel]

Similar problem with various components in https://zendeskgarden.github.io/react-components/. I found that exporting a subcomponent with a displayName mismatch results in the following:

...where the subcomponent code looks some thing like:

interface ITimelineItemProps extends LiHTMLAttributes<HTMLLIElement> {
  /** Replaces the dot with an icon */
  icon?: ReactNode;
  /** Provides surface color for an icon placed on a non-white background */
  surfaceColor?: string;
}

export const ItemComponent = forwardRef<HTMLLIElement, ITimelineItemProps>(/* subcomponent code here... */);

Item.displayName = 'Timeline.Item';

I can get Storybook to render subcomponent props with the following export tweak...

interface ITimelineItemProps extends LiHTMLAttributes<HTMLLIElement> {
  /** Replaces the dot with an icon */
  icon?: ReactNode;
  /** Provides surface color for an icon placed on a non-white background */
  surfaceColor?: string;
}

const ItemComponent = forwardRef<HTMLLIElement, ITimelineItemProps>(/* subcomponent code here... */);

ItemComponent.displayName = 'Timeline.Item';

export const Item = ItemComponent;

A bit hacky, but I get the displayName I need (for my own docgen parsing) and Storybook is updated with:

In either case, the main component type definition is shaped something like...

interface ITimelineProps extends OlHTMLAttributes<HTMLOListElement> {
  /** Applies alternate styling */
  isAlternate?: boolean;
}

const TimelineComponent = forwardRef<HTMLOListElement, ITimelineProps>(/* component code here... */);

TimelineComponent.displayName = 'Timeline';

export const Timeline = TimelineComponent as typeof TimelineComponent & {
  Content: typeof Content;
  Item: typeof Item;
  OppositeContent: typeof OppositeContent;
};

Timeline.Content = Content;
Timeline.Item = Item;
Timeline.OppositeContent = OppositeContent;

[krishnanspace]

Facing the same problem. If I change the displayName of the subcomponent to anything other than the actual component variable name, it does not work. If the displayName is the same the props show up

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).