title: Getting Storybook react-docgen-typescript-loader to use typescript props
body: <p>I'm trying to use <code>react-docgen-typescript-loader</code> to generate my props documentation in Storybook with my TypeScript Props, but it's not populating anything into the <code>withInfo</code> addon.</p>
  
  <p>I'm using the TypeScript flavor of create-react-app and I'm following multiple different methods of configuring the <code>.storybook/webpack.config.js</code> and nothing seems to work.</p>
  
  <p>Here's what my current config is:</p>
  
  <h2>.storybook/webpack.config.js</h2>
  
  <pre><code>module.exports = ({ config, mode }) =&gt; {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('babel-loader'),
          options: {
            presets: [['react-app', { flow: false, typescript: true }]],
          }
        },
        require.resolve("react-docgen-typescript-loader"),
      ]
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  };
  
  </code></pre>
  
  <h2>.storybook/config.ts</h2>
  
  <pre><code>import { configure } from '@storybook/react';
  // automatically import all files ending in *.stories.js
  const req = require.context('../', true, /.stories.tsx$/);
  function loadStories() {
    req.keys().forEach(filename =&gt; req(filename));
  }
  configure(loadStories, module);
  </code></pre>
  
  <h2>stories/button.stories.tsx</h2>
  
  <pre><code>import * as React from 'react';
  
  import { storiesOf } from '@storybook/react';
  import { withInfo } from '@storybook/addon-info';
  import Button from '../src/components/Button';
  
  storiesOf('Button', module)
      .addDecorator(withInfo)
      .add('continue', () =&gt; &lt;Button buttonType="submit"&gt;Hello Button&lt;/Button&gt;, { info: { inline: true } })
      .add('back', () =&gt; &lt;Button buttonType="reset"&gt;Hello Button&lt;/Button&gt;, { info: { inline: true } });
  </code></pre>
  
  <h3>src/components/Button.tsx</h3>
  
  <pre><code>import React from 'react';
  
  interface Props {
      buttonType: Button.Type;
  }
  
  const Button: React.FunctionComponent&lt;Props&gt; = (props) =&gt; {
      const getStyles = (buttonType: string): {color: string} =&gt; {
          if (buttonType === 'reset') {
              return { color: 'red' };
          }
          if (buttonType === 'submit') {
              return { color: 'green' };
          }
          return { color: 'green' };
      };
  
      const { buttonType, children } = props;
  
      return &lt;button type={buttonType} style={getStyles(buttonType)}&gt;{children}&lt;/button&gt;;
  };
  
  export default Button;
  
  </code></pre>
  
  <p>There are currently no issues with this configuration, but I only see this as the info output in Storybook:
  <a href="https://i.stack.imgur.com/82tHy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/82tHy.png" alt="storybook screenshot"></a></p>