feat: using react-docgen-typescript-loader in storybook

Author: foryuki

template/examples/.storybook/webpack.config.js

@@ -1,26 +1,34 @@
 const path = require('path')
 
-module.exports = {
-  module: {
-    rules: [
+module.exports = (baseConfig, env, defaultConfig) => {
+  defaultConfig.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    use: [
       {
-        test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
+        loader: require.resolve('babel-loader'),
+        options: {
+          cacheDirectory: true,
+          ...require('../../.babelrc')
+        }
       },
-      {
-        test: /\.jsx?$/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: true,
-          }
-        },
-        exclude: /node_modules/,
-      }
+      require.resolve('react-docgen-typescript-loader')
     ]
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'],
-    modules: ['node_modules', '../node_modules']
-  },
+  }, {
+    test: /\.scss$/,
+    use: ['style-loader', 'css-loader', 'sass-loader']
+  })
+
+  defaultConfig.resolve.extensions.push('.ts', '.tsx')
+
+  defaultConfig.resolve.modules.push(
+    path.resolve(__dirname, '../node_modules'),
+    path.resolve(__dirname, '../../node_modules')
+  )
+
+  defaultConfig.devServer = {
+    inline: true,
+    hot: true
+  }
+
+  return defaultConfig
 }

template/examples/package.json

@@ -4,25 +4,32 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "start-storybook -p 9001 -c .storybook",
     "build-storybook": "build-storybook -s public",
     "deploy": "storybook-to-ghpages"
   },
   "storybook-deployer": {
-    "gitUsername": "Yuki Bot",
-    "gitEmail": "zhangjihong1993@gmail.com",
+    "gitUsername": "<%= username %>'s bot",
+    "gitEmail": "<%= email %>",
     "commitMessage": "Deploy Storybook"
   },
-  "author": "",
+  "author": "<%= username %> <<%= email %>>",
   "license": "MIT",
   "devDependencies": {
-    "@storybook/addon-options": "^3.2.17",
-    "@storybook/react": "^3.2.15",
+    "@babel/core": "^7.0.1",
+    "@storybook/addon-info": "^3.4.10",
+    "@storybook/addon-options": "^3.4.10",
+    "@storybook/react": "^3.4.10",
+    "@types/storybook__addon-actions": "^3.4.1",
+    "@types/storybook__addon-info": "^3.4.2",
+    "@types/storybook__react": "^3.0.9",
+    "babel-loader": "^8.0.2",
     "css-loader": "^0.28.7",
     "node-sass": "^4.7.2",
+    "react-docgen-typescript-loader": "^2.2.0",
     "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0"
+    "style-loader": "^0.19.0",
+    "typescript": "^3.0.3"
   },
   "dependencies": {
     "react": "^16.1.1",

template/examples/stories/index.js

@@ -0,0 +1,33 @@
+import React, { CSSProperties} from 'react'
+import { storiesOf } from '@storybook/react'
+import { withInfo } from "@storybook/addon-info"
+// import { action } from '@storybook/addon-actions'
+
+import Hello from 'index'
+
+storiesOf('Hello', module)
+  .add('with text', () => (
+    <Hello content="world" />
+  ))
+  .add('docs', withInfo({ inline: true })(() => (
+    <div style={styles.container}>
+      <div style={styles.firstCellContainer}>
+        <Hello content="world!!!233" />
+      </div>
+      <div style={styles.cellContainer}>
+      <Hello content="world" />
+      </div>
+    </div>
+  )))
+
+const styles: { [key: string]: CSSProperties } = {
+  container: {
+    display: "flex",
+  },
+  cellContainer: {
+    width: 100,
+    height: 100,
+    backgroundColor: "rgb(72, 78, 104)",
+  },
+};
+styles.firstCellContainer = { ...styles.cellContainer, marginRight: 20 };

template/examples/stories/index.tsx

@@ -34,6 +34,7 @@
   "devDependencies": {
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.0.1",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
     "@babel/plugin-transform-modules-commonjs": "^7.0.0",
     "@babel/preset-env": "^7.0.0",

template/package.json

@@ -1,16 +1,21 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import a from './a'
 
-class Hello extends React.PureComponent<{
-  content: string;
-}, {}> {
+interface Props {
+  /**
+   * Value to display, either empty string or you passed
+   *
+   * @default ""
+   **/
+  content?: string;
+}
+
+export class Hello extends PureComponent<Props, {}> {
   render () {
     return (
       <div className='title'>
-        {a} 2222 {this.props.content}
+        {a} {this.props.content}
       </div>
     )
   }
 }
-
-export default Hello

template/src/Hello.tsx

@@ -1,4 +1,2 @@
-import Hello from './Hello'
+export { Hello as default } from './Hello'
 import './styles.scss'
-
-export default Hello

template/src/index.ts

@@ -1,4 +1,4 @@
-import A from '../src/a'
+import A from 'src/a'
 
 test('a should return a string', () => {
   expect(typeof A).toBe('string')