storybook: Some props not found Typescript

@shilman Hmm… I have repeated steps in your gist. Everything works fine, except for default exports. If there are no named exports, default exports don’t work.

Story

import React from 'react';
import Button from './Test';

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

export const primary = () => <Button>Push me</Button>;

Component.

This one doesn’t work.

import React, { FC } from "react";

interface ButtonProps {
  /**
   * Simple click handler
   */
  onClick?: () => void;
}

/**
 * The world's most _basic_ button
 */
const Button: FC<ButtonProps> = ({ children, onClick }) => (
  <button onClick={onClick} type="button">
    {children}
  </button>
);

export default Button;

But this works fine

Note an export statement near the Button.

import React, { FC } from "react";

interface ButtonProps {
  /**
   * Simple click handler
   */
  onClick?: () => void;
}

/**
 * The world's most _basic_ button
 */
export const Button: FC<ButtonProps> = ({ children, onClick }) => (
  <button onClick={onClick} type="button">
    {children}
  </button>
);

export default Button;

Screenshots:

No named export

With named export

~Not to hijack this issue, but I’m having difficulty getting any props recognized in my project with Typescript. I’m just adding docs in https://github.com/gymnasium/gym-ui/pull/62 now. The typescript preset caused all kinds of problems in my project, so I modified the webpack config, but to no avail.~

~Right now the only component I have wired up is Button, but it’s not finding any props: https://deploy-preview-62--gymnasium-storybook.netlify.com/?path=/docs/button--default~

~I followed the recommendation in the docs here to set up typescript~

~Would love any insights you might be able to offer!~

edit: update - I was modifying the wrong webpack config in my project. 🤦‍♂ Everything seems good now. My .storybook/webpack.config.js:

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

I’m not seeing any prop tables on the DocsPage either with a similar config. Using CRA and typescript, also swapped out babel-loader for ts-loader as specified in the typescript preset, but to no avail, it loaded, but still no prop tables.

const path = require('path');
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');

module.exports = ({ baseConfig, env, config }) => {
  // loads mdx stories
  config.module.rules.push({
    test: /\.(stories|story)\.mdx$/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      },
      {
        loader: require.resolve('@mdx-js/loader'),
        options: {
          compilers: [createCompiler({})],
        },
      },
    ],
  });

  // load docgen docs? I've tried swapping babel-loader for ts-lint and excluding stories, I get the same result
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    exclude: path.resolve(__dirname, '../node_modules/'),
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ],
  });
  
  // adds story source
  config.module.rules.push({
    test: /\.stories\.(ts|tsx)$/,
    exclude: path.resolve(__dirname, '../node_modules/'),
    use: [
      {
        loader: require.resolve('@storybook/source-loader'),
      },
    ],
  });

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

@F-Moody just to clarify: this is about the props table in addon-docs?

@shilman Yes, no props shown there

@F-Moody just to clarify: this is about the props table in addon-docs?

@joanrm20 thanks for that! also, for anybody reading this, you might try the recommended 6.0 setup (should work in 5.3 too) and I expect that also to fix the problem:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-prop-tables-with-typescript

@ElForastero I wrote a short walkthrough of how to set it up. Can you go through and see whether your setup matches. I’ve confirmed that this works:

https://gist.github.com/shilman/bc9cbedb2a7efb5ec6710337cbd20c0c

I’ve documented TS presets here: https://github.com/storybookjs/storybook/pull/8649

Any feedback on the changes is appreciated, since I’m still trying to get to the bottom of all this.

If you switch over to using presets, please let me know if:

• it solves your problem,
• it breaks something else,
• there’s no change

Also, whether or not you’re using presets, please let me know if you see any opportunities to improve the docs here.

Many thanks!!!

@F-Moody @zzwong @ddaniel-dt @rickdunkin @sami616 @jonathanherdt @NateRadebaugh @ElForastero @mbifulco @alexwhin @bigmoves @coreybruyere @PilotConway @stale

@ElForastero In CRA, use @storybook/preset-create-react-app for TS support. We need to document this better… 😭

I use ‘@storybook/preset-typescript’ with CRA and styled-components. And I see no props table neither with type nor interface.

And there’s a strange hooks message instead of props table. This is probably some styled-components hook because I don’t have any in my Button component.

The only table I can get is regular Button.propTypes on a regular React.FC component (not styled-components). Without any TypeScript integration.