[Addon: info - v5.x] No Prop Types table if using React.forwardRef

[liamross]

Describe the bug

In version 5.0.x of the info addon, the Prop Types section is not appearing if the component is wrapped in forwardRef. This is in a TypeScript project.

Note: may be related to #5974

To Reproduce

1. Create any component using forwardRef in React.

Expected behaviour

Should match up with the result of version 4.x (table is present)

System

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

[liamross]

Maybe related to #3389 as well? Regression?

[shilman]

How did you setup docgen for typescript?

[liamross]

@shilman

.storybook/webpack.config.js

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = ({ config: defaultConfig }) => {
  // Extend defaultConfig as you need.

  // Sass loader:
  defaultConfig.module.rules.push({
    test: /\.scss$/,
    loaders: ['style-loader', 'css-loader', 'sass-loader'],
    include: [path.resolve(__dirname, '../src'), path.resolve(__dirname)],
  });
  defaultConfig.resolve.extensions.push('.scss');

  // Typescript loader:
  defaultConfig.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      { loader: require.resolve('ts-loader') },
      { loader: require.resolve('react-docgen-typescript-loader') },
    ],
  });
  defaultConfig.resolve.extensions.push('.ts', '.tsx');

  // Resolve baseUrl:
  if (!defaultConfig.resolve.plugins) defaultConfig.resolve.plugins = [];
  defaultConfig.resolve.plugins.push(
    new TsconfigPathsPlugin({
      configFile: './tsconfig.json',
      baseUrl: 'src',
    }),
  );

  return defaultConfig;
};

Example of component with no Prop Table

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>
    );
  },
);

And then addDecorator(withInfo); in .storybook/config.ts as the very first addDecorator

Does storybook 5.0 require a different set up? I know that the react-docgen-typescript-loader README still only shows examples for 4.x

[shilman]

@liamross No, there may have been some regressions in 5.0 but no material changes in addon-info specifically AFAIK. We'll be replacing it with a superior alternative very soon, so I'll be looking at this case as I work on that (and will patch addon-info if it's easy while I'm at it)

[stale]

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!

[stale]

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!

[stale]

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]

Addon-docs is in alpha now and is intended to replace addon-info. Please give it a try and see whether it solves this issue: https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing

[liamross]

It seems to have resolved itself actually!