Storybook: [Addon: info - v5.x] Story Source breaks if using React.forwardRef

[liamross]

Describe the bug

In version 5.0 of the info addon, Story Source is breaking if the component is wrapped in forwardRef

This additionally breaks the parsing of props in TypeScript (and maybe JavaScript, have not been able to test).

_Here are some collapsable sections for the files in question:_

Component

import React, { forwardRef } from 'react';

export interface TestButtonProps {
  /**
   * Some input prop.
   * @default: "Default value"
   */
  someProp?: string;
  /**
   * Some onClick handler prop.
   */
  onClick?: () => void;
}

export const TestButton = forwardRef<HTMLButtonElement, TestButtonProps>(
  ({ someProp = 'Default value', onClick }, ref) => {
    return (
      <button onClick={onClick} ref={ref}>{someProp}</button>
    );
  },
);

Version 4.x Story Source (GOOD)

<TestButton
  someProp="Hello, World!"
  onClick={onClick}
/>

Version 5.x Story Source (BAD)

<ForwardRef
  someProp="Hello, World!"
  onClick={action}
>
  <button onClick={action}>
    Hello, World!
  </button>
</ForwardRef>

To Reproduce

1. Create any component using forwardRef in React.

Expected behaviour

Should match up with the result of version 4.x.

System

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: all
• Framework: React
• Addons: info
• Version: 5.0
  
  
  
  • Language: TypeScript
  
  

[liamross]

Note: this result is shown when using TypeScript and react-docgen-typescript-loader. I haven't been able to test with JavaScript, but since the issue seems to be around React.forwardRef, I suspect the same issue will be there

[liamross]

@shilman I think this is addon: info not storysource, unless storysource is used internally by info.

[shilman]

Related: https://github.com/storybooks/storybook/pull/4961

Looks like this needs to get ported to v5

[misund]

Looks like I have this same issue. 4.1.13 on the left hand side, 5.0.1 on the right hand side.

[muratmarkaryan]

+1
also props are not generated when i use React.forwardRef. It causes "Hooks can only be called inside the body of a function component" error.

[tomashapl]

+1

[elie222]

Is this also why import styled from '@emotion/styled' broke?

[Krustal]

This is being caused by PR https://github.com/storybooks/storybook/pull/4961 and I'm hoping I have a proposed solution up at the moment.

[Krustal]

@elie222 I'm assuming yes, the original reason I started investigating this was due to inconsistencies between v4 and v5 using styled-components.

[shilman]

Yippee!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.19 containing PR #6222 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

[tomashapl]

Works like charm 🎉

Thank you guys 👏

[marcel-k]

The table component is still not working in my build.
Is this fix also for the table? Or is it my build.. using CRA, Storybook and styled components.

"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4",
"styled-components": "^4.1.3",
"styled-normalize": "^8.0.6"
},
"devDepedencies": {
"@babel/core": "^7.3.4",
"@storybook/addon-actions": "^5.1.0-alpha.19",
"@storybook/addon-info": "^5.1.0-alpha.19",
"@storybook/addon-knobs": "^5.1.0-alpha.19",
"@storybook/addon-links": "^5.1.0-alpha.19",
"@storybook/addon-storyshots": "^5.1.0-alpha.19",
"@storybook/addons": "^5.1.0-alpha.19",
"@storybook/react": "^5.1.0-alpha.19",
"babel-loader": "^8.0.5",
"react-docgen-typescript-loader": "^3.0.1",
"react-scripts": "2.1.5",
"require-context.macro": "^1.0.4",
"typescript": "3.3.1",
...
}

[liamross]

@marcel-k Yeah I'm noticing the same thing, except that for mine, there just isn't a Prop Types section at all. Hopefully this can be resolved as well. @Krustal @shilman

Edit: I just checked and it was also missing prior to this fix (in version 5.0.x). I was just too distracted by the forwardRef issue to notice. I opened a new issue:

6345

[shilman]

Whoopee!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.6 containing PR #6222 that references this issue. Upgrade today to try it out!