Addon-Docs: Props table won't be generated for TypeScript types if forwardRef used with the default export

Describe the bug If forwardRef used without named export and with only default one, then no props table will be generated.

For example, this:

Button.tsx

import React, { forwardRef } from 'react';

interface ButtonProps {
  /**
   * Sets the button size.
   */
  variant?: 'small' | 'large';
  /**
   * Disables the button.
   */
  disabled?: boolean;
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ disabled = false, variant = 'small', children }, ref) => (
    <button disabled={disabled} ref={ref}>
      {children} {variant}
    </button>
  ),
);

export default Button;

Button.stories.tsx

import React, { FC } from 'react';
import Button from './Button';

export default { title: 'Button', component: Button };

export const Default: FC = () => <Button>I'm a button!</Button>;

Will lead to this result:

But if I add export, a props table will be generated. No need to change import from default to named, jus add export.

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ disabled = false, variant = 'small', children }, ref) => (
    <button disabled={disabled} ref={ref}>
      {children} {variant}
    </button>
  ),
);

Expected behavior A props table should be generated

Packages

{
    "@storybook/addon-actions": "^5.3.5",
    "@storybook/addon-docs": "^5.3.5",
    "@storybook/addon-links": "^5.3.5",
    "@storybook/addons": "^5.3.5",
    "@storybook/preset-create-react-app": "^1.5.1",
    "@storybook/preset-typescript": "^1.2.0",
    "@storybook/react": "^5.3.5"
}

main.js

module.exports = {
  stories: ['../src/**/*.stories.(tsx|mdx)'],
  addons: [
    {
      name: '@storybook/preset-create-react-app',
      options: {
        tsDocgenLoaderOptions: {},
      },
    },
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
      },
    },
  ],
};

[Zunaib]

Hi, You are missing the export keyword before the Component’s name. You have to export const {Component} too, as react-docgen-typescript-loader or react-docgen-loader has not added support for forwardRef’s yet.

import React, { forwardRef } from 'react';

interface ButtonProps {
  /**
   * Sets the button size.
   */
  variant?: 'small' | 'large';
  /**
   * Disables the button.
   */
  disabled?: boolean;
}

//Added export here
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ disabled = false, variant = 'small', children }, ref) => (
    <button disabled={disabled} ref={ref}>
      {children} {variant}
    </button>
  ),
);

export default Button;

[GreLI]

If someone got here in search of why props aren’t generated as it did for me, try instead of writing

export default forwardRef(Component)

Do it this way:

const Component = forwardRef((props: Props, ref: Ref<HTMLWhateverElement>) => /* implementation */)

export default Component