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

Created on 29 Mar 2019 · 9Comments · Source: storybookjs/storybook

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.

Screen Shot 2019-03-29 at 11 13 02 AM

Note: may be related to #5974

To Reproduce

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

info question / support

Source

liamross

👍1

All 9 comments

Maybe related to #3389 as well? Regression?

liamross on 29 Mar 2019

How did you setup docgen for typescript?

shilman on 9 Apr 2019

@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

liamross on 10 Apr 2019

@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)

shilman on 11 Apr 2019

👍1

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!