Storybook: addon-docs: Typescript not showing table of Proptypes

[davidnguyen179]

Describe the bug
I set up project using storybook and typescript. I followed the documentation, but I cannot make the docs tab show props description based on JS docs of props

main.ts

module.exports = {
  stories: ['../src/**/*.story.(tsx|jsx|mdx)'],
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        sourceLoaderOptions: null,
      },
    },
    '@storybook/preset-typescript',
  ],
};

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('ts-loader'),
      },
      // Optional
      {
        loader: require.resolve('react-docgen-typescript-loader'),
        options: {
          // Provide the path to your tsconfig.json so that your stories can
          // display types from outside each individual story.
          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
        },
      },
    ],
  });

  config.module.rules.push({
    test: /\.less$/,
    use: [
      'style-loader',
      'css-modules-typescript-loader', // Build the typing for style using less
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          modules: true,
          localsConvention: 'camelCase', // Allow access css module with camelCase when use the "." to access attribute
          modules: {
            localIdentName: '[local]--[hash:base64:5]',
            // Do not add "mode: local" or "context"
            // Because it affects the "css-modules-require-hook"
            // The storybook and testing environment generates different hashes for class name
          },
        },
      },
      {
        loader: 'less-loader',
        options: {
          sourceMap: true,
        },
      },
    ],
    include: path.resolve(__dirname, '../'),
  });

  config.resolve.modules = [
    ...(config.resolve.modules || []),
    path.resolve(__dirname, '../'),
    path.resolve(__dirname, '../src'),
  ];

  config.resolve.alias = {
    lib: path.resolve(__dirname, '../lib'),
  };

  config.resolve.extensions.push('.ts', '.tsx', '.less');

  config.plugins.push(
    new webpack.DefinePlugin({
      COMPONENT_PATTERN: /^.*\index.tsx$/,
      PROPS_PATTERN: /^.*\.story.([tj]sx)$/,
    })
  );

  return config;
};

============= Component =================

button.ts

import * as React from 'react';

import * as style from './style.less';

export class Button extends React.Component<Props> {
  public render(): JSX.Element {
    const className = [style.container, style[this.props.size || '']];

    return (
      <button onClick={this.props.onClick} id="button" className={className.join(' ')}>
        {this.props.children}
      </button>
    );
  }
}

export type Props = DataProps & EventProps;

interface DataProps {
  /** Children node */
  children: string | React.ReactNode;
  /** Size of button */
  size?: 'small' | 'medium' | 'large';
}

interface EventProps {
  /** Click event */
  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
}

Here is the repo: https://github.com/davidnguyen179/storybook-wdio/tree/temp

[stale[bot]]

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]

A few weeks ago we released zero-config typescript support in 6.0-beta. I suspect this will solve most of your typescript props-related issues.

• Release 6.0.0-beta.12+
• Migration instructions
• Updated docs

Please try it out!

[stale[bot]]

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[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!