feat: auto generate prop info

.storybook/config.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { configure, addDecorator,addParameters } from '@storybook/react';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
 import { createGlobalStyle } from 'styled-components';
 import { ThemeProvider } from '../src';
 import theme from './theme';
@@ -47,6 +48,12 @@ addDecorator(story => (
   </ThemeProvider>
 ));
 
+addDecorator(
+  withInfo({
+    source: false,
+  })
+);
+
 // automatically import all files ending in *.stories.js
 configure(
   [

.storybook/main.js

@@ -4,12 +4,19 @@ module.exports = {
   webpackFinal: async config => {
     config.module.rules.push({
       test: /\.(ts|tsx)$/,
-      loader: require.resolve('babel-loader'),
-      options: {
-        presets: [['react-app', { flow: false, typescript: true }]],
-      },
+      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;
   },
-  };
+};

package.json

@@ -67,6 +67,7 @@
     "@storybook/addon-a11y": "5.3.18",
     "@storybook/addon-actions": "5.3.18",
     "@storybook/addon-docs": "5.3.18",
+    "@storybook/addon-info": "^5.3.19",
     "@storybook/addon-knobs": "5.3.18",
     "@storybook/addon-links": "5.3.18",
     "@storybook/addon-storysource": "5.3.18",
@@ -86,6 +87,7 @@
     "nodemon": "^1.19.1",
     "npm-run-all": "^4.1.5",
     "react": "^16.8.3",
+    "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^16.8.3",
     "react-router-dom": "^4.2.2",
     "rimraf": "^2.6.3",

src/Icon/Icon.tsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { css } from 'styled-components';
 import { createComponent } from '../utils';
 
-interface IconProps {
+export interface IconProps {
   name: string;
   size?: number;
   color?: string;