search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.57k stars 9.16k forks source link

[Addon-docs] ForwardRef has props === undefined during exractProps #8894

Closed shmidt-i closed 3 years ago

shmidt-i commented 4 years ago

Describe the bug ForwardRef components receive undefined as props during exractProps step. https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/react/extractProps.ts#L28-L31

Check out code snippets [1], [2]

Both are actually incorrect, since in React runtime you always have the props object presented, it just doesn't have any keys on it if no props were passed.

To Reproduce If you change examples/official-storybook/components/ForwardedRefButton.js to have a destructuring on props, the props extraction process will fail, e.g. [3]

And then check the story examples/official-storybook/stories/addon-docs/props.stories.mdx. There would be no props available for the component.

Expected behavior Props table is shown

Code snippets [1]:

processedComponent = component.render().type;

[2]:

processedComponent = component.type().type;

[3]: 

const ForwardedRefButton = forwardRef(({ disabled, ...restProps }, ref) => (
  <BaseButton disabled={disabled} {...restProps} forwardedRef={ref} />
));

System: Replicated in latest storybook repo's examples, but originally found in @storybook/addon-docs@5.2.5.

Additional context Here is a downgrade commit in our repo that fixed the behaviour: https://github.com/nordnet/ui/commit/6cf7ee5a56d1b065aba1243a30baa267805e8b13.

The component that failed was https://github.com/nordnet/ui/tree/master/src/Atoms/Box

stale[bot] commented 4 years ago

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!

shilman commented 4 years ago

Repro: https://github.com/storybookjs/storybook/commit/822f3dfe70ae10a0dac035408addbd5fee991a29

shilman commented 3 years ago

@andezzat here's the forwardRef case as we discussed relative to #12638

shilman commented 3 years ago

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.21 containing PR #12686 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.