title: Storybook in create-react-app with TypeScript
body: <p>I am trying to use Stotybook in a create-react-app with TypeScript without ejecting. I have understood that this should be possible, even though it is not described in the docs. Here are the resources I have used:</p>
  
  <p><a href="https://storybook.js.org/basics/introduction/" rel="nofollow noreferrer">https://storybook.js.org/basics/introduction/</a></p>
  
  <p><a href="https://storybook.js.org/configurations/typescript-config/" rel="nofollow noreferrer">https://storybook.js.org/configurations/typescript-config/</a></p>
  
  <p><a href="https://github.com/wmonk/create-react-app-typescript/issues/405" rel="nofollow noreferrer">https://github.com/wmonk/create-react-app-typescript/issues/405</a></p>
  
  <p>I get storybook to build but it shows:</p>
  
  <pre><code>No Preview
  Sorry, but you either have no stories or none are selected somehow.
  </code></pre>
  
  <p>This is what I have done:</p>
  
  <pre><code>npx -p @storybook/cli sb init
  npm install --save-dev react-docgen-typescript-webpack-plugin @storybook/addon-info @types/storybook__react awesome-typescript-loader
  npm run storybook
  </code></pre>
  
  <p>Here is code I have changed from what the init storybook command created:</p>
  
  <p>tsconfig.js</p>
  
  <pre><code>...
  "rootDirs": ["src", "stories"],
  ...
  </code></pre>
  
  <p>.storybook/config.js</p>
  
  <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>
  
  <p>.storybook/webpack.config.js</p>
  
  <pre><code>const path = require("path");
  const TSDocgenPlugin = require("react-docgen-typescript-webpack-plugin"); // Optional
  module.exports = (baseConfig, env, config) =&gt; {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve("ts-loader")
    });
    config.plugins.push(new TSDocgenPlugin()); // optional
    config.resolve.extensions.push(".ts", ".tsx");
    return config;
  };
  </code></pre>
  
  <p>src/stories/index.js</p>
  
  <pre><code>import * as React from 'react';
  import { storiesOf } from '@storybook/react';
  import { action } from '@storybook/addon-actions';
  import TicTacToeCell from './TicTacToeCell';
  
  const stories = storiesOf('Components', module);
  stories.add(
    'TicTacToeCell',
    () =&gt; &lt;TicTacToeCell value="X" position={{ x: 0, y: 0 }} onClick={action('onClick')} /&gt;,
    { info: { inline: true } }
  );
  </code></pre>
  
  <p>What is wrong with my setup?</p>
  
  <p>PS. I don't know if I need all of the packages above, so please let me know if I am adding things to my project that won't be relevant because I am running a create-react-app project</p>