dev: 接入storybook

.storybook/addons.js

@@ -0,0 +1,8 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-viewport/register';
+import '@storybook/addon-console';
+import '@storybook/addon-storysource/register';
+import 'storybook-readme/register';

.storybook/config.js

@@ -0,0 +1,22 @@
+import { configure, getStorybook } from '@storybook/react';
+import { addParameters } from '@storybook/react';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { addDecorator } from '@storybook/react';
+import { withConsole } from '@storybook/addon-console';
+
+addParameters({
+  info: { inline: true },
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+    defaultViewport: 'someDefault',
+  },
+});
+// automatically import all files ending in *.stories.tsx
+configure(
+  require.context('../stories', true, /\.stories\.tsx?$/), module
+)
+
+addDecorator((storyFn, context) => withConsole()(storyFn)(context));
+
+import 'antd/dist/antd.less';
+export { getStorybook }

.storybook/webpack.config.js

@@ -0,0 +1,71 @@
+const fs = require('fs');
+const path = require('path');
+
+module.exports = ({ config }) => {
+  config.module.rules.push({
+    test: /\.stories\.tsx?$/,
+    loaders: [require.resolve('@storybook/source-loader')],
+    enforce: 'pre',
+  });
+  config.module.rules.push({
+    test: /\.less$/,
+    include: /node_modules|antd\.less/,
+    use: [
+      "style-loader",
+      "css-loader",
+      {
+        loader: "less-loader",
+        options: {
+          javascriptEnabled: true
+        }
+      }
+    ]
+  });
+  config.module.rules.push({
+    test: /\.less$/,
+    use: [
+    'style-loader', 
+    {
+      loader: 'css-loader',// translates CSS into CommonJS
+      options: {
+        modules: {
+          localIdentName: '[name]__[local]___[hash:base64:5]',
+        },
+      }
+    },
+    'postcss-loader',
+    {
+      loader: 'less-loader',
+      options: {
+        javascriptEnabled: true,
+      },
+    }],
+    exclude: /node_modules|antd\.less/,
+  });
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    use: [
+      {
+        loader: require.resolve('babel-loader'),
+        options: {
+          presets: [['react-app', { flow: false, typescript: true }]],
+          "plugins": [
+            ["import", { "libraryName": "antd", "style": true }]
+          ]
+        }
+      },
+      // Optional
+      {
+        loader: require.resolve("react-docgen-typescript-loader")
+      },
+    ]
+  });
+  config.resolve.extensions.push(".ts", ".tsx");
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    '@': `${path.resolve(fs.realpathSync(process.cwd()), './src')}`,
+    '@components': `${path.resolve(fs.realpathSync(process.cwd()), './src')}/components`,
+  }
+  config.output.library = "[name]";
+  return config;
+};

config-overrides.js

@@ -8,7 +8,7 @@ module.exports = function override(config, env) {
   config.resolve.extensions = ['.js', '.jsx', '.ts', '.tsx', '.less', '.json'];
   config.resolve.alias = {
     '@': srcPath,
-    '@components': `${srcPath}srcPath/components`,
+    '@components': `${srcPath}/components`,
   };
   config.module.rules.push({
     test: /\.less$/,

package.json

@@ -26,7 +26,9 @@
     "eject": "react-app-rewired eject",
     "build:lib": "rimraf lib && babel src/components --out-dir lib  --source-maps  --copy-files --extensions \".ts,.tsx\"",
     "build:css:": "",
-    "build:rollup": "rimraf lib && rollup -c ./rollup.config.js"
+    "build:rollup": "rimraf lib && rollup -c ./rollup.config.js",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -57,14 +59,33 @@
     "@rollup/plugin-image": "^2.0.0",
     "@rollup/plugin-node-resolve": "^6.0.0",
     "@rollup/plugin-url": "^4.0.0",
+    "@storybook/addon-actions": "^5.2.8",
+    "@storybook/addon-console": "^1.2.1",
+    "@storybook/addon-info": "^5.2.8",
+    "@storybook/addon-knobs": "^5.2.8",
+    "@storybook/addon-links": "^5.2.8",
+    "@storybook/addon-notes": "^5.2.8",
+    "@storybook/addon-storysource": "^5.2.8",
+    "@storybook/addon-viewport": "^5.2.8",
+    "@storybook/addons": "^5.2.8",
+    "@storybook/react": "^5.2.8",
+    "@types/storybook-readme": "^5.0.4",
+    "@types/storybook__addon-info": "^5.2.1",
+    "antd": "^3.26.4",
     "autoprefixer": "^9.7.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-import": "^1.13.0",
     "cross-env": "^6.0.3",
     "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "css-loader": "^3.2.1",
+    "file-loader": "^5.0.2",
+    "postcss-loader": "^3.0.0",
+    "style-loader": "^1.0.1",
     "node-eval": "^2.0.0",
     "postcss-url": "^8.0.0",
     "react-app-rewired": "^2.1.5",
+    "react-docgen-typescript-loader": "^3.6.0",
     "rimraf": "^3.0.0",
     "rollup": "^1.27.13",
     "rollup-plugin-alias": "^2.2.0",
@@ -76,6 +97,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss-modules": "^2.0.1",
     "rollup-plugin-replace": "^2.2.0",
+    "storybook-readme": "^5.0.8",
     "ts-loader": "^6.2.1"
   },
   "peerDependencies": {

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {  
+  plugins: {}
+} 

rollup.config.js

@@ -40,7 +40,6 @@ const cModuleMap = cModuleNames.reduce((prev, name) => {
   prev[name] = `${componentFold}/${name}/index.ts`;
   return prev;
 }, {});
-console.log('cModuleMap: ', cModuleMap);
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 

src/components/Payment/Common/PayPlatformOptions/index.tsx

@@ -228,4 +228,4 @@ class PayPlatformOptions extends PureComponent<Props, {}> {
   }
 }
 
-export default PayPlatformOptions;
+export default PayPlatformOptions;

src/components/Payment/Common/PriceOptions/index.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
-import { Input } from 'antd';
-import { FormattedMessage, useIntl } from 'react-intl';
-import classnames from 'classnames';
-import { formatMoney } from '../../Utils/utils';
+import React, { useState } from "react";
+import { Input } from "antd";
+import classnames from "classnames";
+import { formatMoney } from "../../Utils/utils";
 
-import styles from './PriceOptions.less';
+import styles from "./PriceOptions.less";
+
+const FormattedMessage = ({ id }: any) => id;
 
 type Props = {
   price: number;
@@ -13,17 +14,16 @@ type Props = {
   focusScroll: boolean;
   withTitle: boolean;
   inputRef: React.RefObject<Input>;
-}
+};
 
 const PriceOptions = ({
   price,
   onPriceChange,
-  size = 'normal',
+  size = "normal",
   focusScroll = true,
   withTitle = true,
-  inputRef,
+  inputRef
 }: Props) => {
-  const intl = useIntl();
   const defaultOptions = [100, 600, 800];
   // 控制是否为其他金额输入情况
   const [inputStatus, setInputStatus] = useState(false);
@@ -31,17 +31,21 @@ const PriceOptions = ({
   return (
     <div
       className={classnames(styles.options, {
-        [styles[size]]: true,
+        [styles[size]]: true
       })}
     >
-      {withTitle ? <p><FormattedMessage id="pay.price.select.text" /></p> : null}
-      <div className={styles.infoItem} style={{ marginBottom: '-12px' }}>
+      {withTitle ? (
+        <p>
+          <FormattedMessage id="pay.price.select.text" />
+        </p>
+      ) : null}
+      <div className={styles.infoItem} style={{ marginBottom: "-12px" }}>
         <span className={styles.priceBtn}>
           {defaultOptions.map(item => (
             <span
               className={classnames({
                 [styles.priceItem]: true,
-                [styles.active]: price === item && !inputStatus,
+                [styles.active]: price === item && !inputStatus
               })}
               key={item}
               onClick={() => {
@@ -49,12 +53,7 @@ const PriceOptions = ({
                 setInputStatus(false);
               }}
             >
-              <FormattedMessage
-                id="pay.price.money.text"
-                values={{
-                  value: formatMoney(item / 100, 0)
-                }}
-              />
+              <FormattedMessage id={`${formatMoney(item/100, 0)}¥`} />
             </span>
           ))}
         </span>
@@ -68,9 +67,9 @@ const PriceOptions = ({
           }}
           suffix="¥"
           className={styles.priceInput}
-          value={inputStatus ? (price / 100 || '') : ''}
-          placeholder={intl.formatMessage({ id: 'pay.price.money.others' })}
-          onChange={e => {  
+          value={inputStatus ? price / 100 || "" : ""}
+          placeholder="Others"
+          onChange={e => {
             const n = +e.target.value;
             if (Number.isNaN(n)) {
               return;

src/lang/en.json

@@ -1,9 +0,0 @@
-{
-  "pay.channel.select.text": "Select Your Platform",
-  "pay.channel.ali": "Alipay",
-  "pay.channel.wechat": "WeChat Pay",
-  "pay.channel.paypal": "PayPal",
-  "pay.price.select.text": "Select Your Reward",
-  "pay.price.money.text": "{value}¥",
-  "pay.price.money.others": "others value"
-}

src/lang/zh.json

@@ -1,9 +0,0 @@
-{
-  "pay.channel.select.text": "选择你的支付平台",
-  "pay.channel.ali": "支付宝",
-  "pay.channel.wechat": "微信",
-  "pay.channel.paypal": "PayPal",
-  "pay.price.select.text": "选择打赏金额",
-  "pay.price.money.text": "{value}¥",
-  "pay.price.money.others": "其他金额"
-}

stories/data/commentlist.json

@@ -0,0 +1,723 @@
+{
+  "list": [
+    {
+      "id": "5de8e52a107f8a000180aa31",
+      "nickname": "Anonymous",
+      "avatar": "https://links-comment.oss-cn-beijing.aliyuncs.com/comment/20180820/Kgka4_oU1.jpeg",
+      "introduction": "",
+      "followed": 0,
+      "invited": false,
+      "fans": 0,
+      "follows": 0,
+      "user_id": 58297,
+      "title": "app发布问题",
+      "content": "",
+      "is_liked": false,
+      "likes": 0,
+      "reads": 0,
+      "shares": 0,
+      "is_favorited": false,
+      "favorites": 0,
+      "comment_count": 1,
+      "last_comment": {
+        "id": "5de8e542107f8a000180aa36",
+        "nickname": "Anonymous",
+        "avatar": "https://links-comment.oss-cn-beijing.aliyuncs.com/comment/20180820/Kgka4_oU1.jpeg",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "user_id": 58297,
+        "type": 4,
+        "model_id": "5de8e52a107f8a000180aa31",
+        "model_type": "question",
+        "related_id": "5de8e542107f8a000180aa36",
+        "content": "测试闪退",
+        "content_text": "测试闪退",
+        "is_liked": true,
+        "is_favorited": true,
+        "favorites": 1,
+        "likes": 1,
+        "shares": 6,
+        "reads": 0,
+        "comment_count": 1,
+        "created": 1575544130,
+        "updated": 1575544130,
+        "question_title": "",
+        "assets": [],
+        "is_top": false,
+        "anonymity": true,
+        "deleted": 0,
+        "my_comment": {
+          "id": "5de8e542107f8a000180aa36",
+          "content": "测试转发问答。[e100][e101][e102][e103][e104][e105]",
+          "created": 1576083794
+        },
+        "read_times": 117,
+        "sort_score": 0,
+        "tip_num": 0,
+        "paid_money": 0
+      },
+      "my_comment": {
+        "id": "",
+        "nickname": "",
+        "avatar": "",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "user_id": 0,
+        "type": 0,
+        "model_id": "",
+        "model_type": "",
+        "related_id": "",
+        "content": "",
+        "content_text": "",
+        "is_liked": false,
+        "is_favorited": false,
+        "favorites": 0,
+        "likes": 0,
+        "shares": 0,
+        "reads": 0,
+        "comment_count": 0,
+        "created": 0,
+        "updated": 0,
+        "question_title": "",
+        "assets": null,
+        "is_top": false,
+        "anonymity": false,
+        "deleted": 0,
+        "my_comment": {
+          "id": "",
+          "content": "",
+          "created": 0
+        },
+        "read_times": 0,
+        "sort_score": 0,
+        "tip_num": 0,
+        "paid_money": 0
+      },
+      "draft": {
+        "nickname": "",
+        "avatar": "",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "id": "",
+        "user_id": 0,
+        "model_id": "",
+        "model_type": "",
+        "content": "",
+        "title": "",
+        "pure_content": "",
+        "content_type": "",
+        "created": 0,
+        "updated": 0,
+        "topic": null,
+        "is_long": false,
+        "assets": null
+      },
+      "assets": [
+        {
+          "type": "img",
+          "url": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/question/2019/12/05/77c774eee875cc71da8183404cf39d79.png",
+          "width": 1488,
+          "height": 1984
+        }
+      ],
+      "is_featured": false,
+      "labels": [
+        {
+          "id": "5dd4006bf90b7e0001b70fe0",
+          "text": "测试",
+          "question_num": 0
+        },
+        {
+          "id": "5de8e506107f8a000180aa2e",
+          "text": "大地飞歌",
+          "question_num": 0
+        },
+        {
+          "id": "5de8e50d107f8a000180aa2f",
+          "text": "发广告",
+          "question_num": 0
+        },
+        {
+          "id": "5cfdef809146c10001b73fcf",
+          "text": "发发发",
+          "question_num": 0
+        },
+        {
+          "id": "5de8e517107f8a000180aa30",
+          "text": "烦烦烦",
+          "question_num": 0
+        }
+      ],
+      "anonymity": true,
+      "invite_users": null,
+      "deleted": 0,
+      "created": 1575544106,
+      "tip_num": 0,
+      "is_reward": false,
+      "money": 0
+    },
+    {
+      "id": "5dbe889b1c58e200016d6daa",
+      "nickname": "a2",
+      "avatar": "https://links-comment.oss-cn-beijing.aliyuncs.com/comment/20180820/Kgka4_oU1.jpeg",
+      "introduction": "😄",
+      "followed": 0,
+      "invited": false,
+      "fans": 0,
+      "follows": 0,
+      "user_id": 71789,
+      "title": "测试1",
+      "content": "",
+      "is_liked": false,
+      "likes": 0,
+      "reads": 0,
+      "shares": 0,
+      "is_favorited": false,
+      "favorites": 0,
+      "comment_count": 1,
+      "last_comment": {
+        "id": "5dbe95c31c58e200016d6dea",
+        "nickname": "Dreamssxxxxjjdjd",
+        "avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/5/18/a9103c135da2844af06c6cf344ed3920.jpg",
+        "introduction": "hello你nncncncmcc",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "user_id": 71764,
+        "type": 4,
+        "model_id": "5dbe889b1c58e200016d6daa",
+        "model_type": "question",
+        "related_id": "5dbe95c31c58e200016d6dea",
+        "content": "回答测试 通知",
+        "content_text": "回答测试 通知",
+        "is_liked": true,
+        "is_favorited": true,
+        "favorites": 2,
+        "likes": 3,
+        "shares": 2,
+        "reads": 0,
+        "comment_count": 2,
+        "created": 1572771267,
+        "updated": 1572771267,
+        "question_title": "",
+        "assets": [],
+        "is_top": false,
+        "anonymity": false,
+        "deleted": 0,
+        "my_comment": {
+          "id": "5dbe95c31c58e200016d6dea",
+          "content": "测",
+          "created": 1572785768
+        },
+        "read_times": 128,
+        "sort_score": 0,
+        "tip_num": 1,
+        "paid_money": 0
+      },
+      "my_comment": {
+        "id": "",
+        "nickname": "",
+        "avatar": "",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "user_id": 0,
+        "type": 0,
+        "model_id": "",
+        "model_type": "",
+        "related_id": "",
+        "content": "",
+        "content_text": "",
+        "is_liked": false,
+        "is_favorited": false,
+        "favorites": 0,
+        "likes": 0,
+        "shares": 0,
+        "reads": 0,
+        "comment_count": 0,
+        "created": 0,
+        "updated": 0,
+        "question_title": "",
+        "assets": null,
+        "is_top": false,
+        "anonymity": false,
+        "deleted": 0,
+        "my_comment": {
+          "id": "",
+          "content": "",
+          "created": 0
+        },
+        "read_times": 0,
+        "sort_score": 0,
+        "tip_num": 0,
+        "paid_money": 0
+      },
+      "draft": {
+        "nickname": "",
+        "avatar": "",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "id": "",
+        "user_id": 0,
+        "model_id": "",
+        "model_type": "",
+        "content": "",
+        "title": "",
+        "pure_content": "",
+        "content_type": "",
+        "created": 0,
+        "updated": 0,
+        "topic": null,
+        "is_long": false,
+        "assets": null
+      },
+      "assets": [],
+      "is_featured": false,
+      "labels": [],
+      "anonymity": false,
+      "invite_users": null,
+      "deleted": 0,
+      "created": 1572767899,
+      "tip_num": 0,
+      "is_reward": false,
+      "money": 0
+    },
+    {
+      "id": "5db305cacd9c3400015a1db4",
+      "nickname": "Anonymous",
+      "avatar": "https://links-comment.oss-cn-beijing.aliyuncs.com/comment/20180820/Kgka4_oU1.jpeg",
+      "introduction": "",
+      "followed": 0,
+      "invited": false,
+      "fans": 0,
+      "follows": 0,
+      "user_id": 58297,
+      "title": "2019年10月24日报道，综合报道，全球变暖可能正改变北极的地貌！俄罗斯国防部日前表示，俄海军在北极发现了5座新岛屿，正是冰川融化导致了这几座岛屿显露出来。  俄国防部表示，俄海军在2016年首次利用卫星图像发现了这些岛屿，但只是在近年8月和9月的一次考察中确认并绘制了地图。  这些新岛屿位于北极Vylki冰川附近，远离遥远的新地马岛群岛海岸，该群岛位于俄罗斯大陆西北的北冰洋。它们的面积从900平方米到54500平方米不等。据俄罗斯塔斯社报道，俄探险队队长亚历山大·莫伊斯耶夫22日表示：“基本上，这一发现与冰川融化有关。”“以前这些是冰川，但冰的融化导致了岛屿的出现。”俄罗斯国防部称，俄罗斯海军研究人员多年来一直使用卫星数据来研究海岸线的变化。2015年至2018年期间，他们确认了新地岛（Novaya Zemlya）和弗朗茨约瑟夫岛（Franz Josef Land）两个群岛上的30多个新岛屿、海角和海湾。科学家们警告说，新出现的岛屿不是“意外”，而是北极冰川和海冰大规模融化导致的日益严重的气候危机的直接结果。据悉，北极的升温速度是全球平均水平的两倍，由此导致的冰川融化可能会破坏生命周期，并威胁到全球各地人们的生命。",
+      "content": "",
+      "is_liked": false,
+      "likes": 0,
+      "reads": 0,
+      "shares": 0,
+      "is_favorited": false,
+      "favorites": 0,
+      "comment_count": 1,
+      "last_comment": {
+        "id": "5db31b191f3bf31bb0031dad",
+        "nickname": "Adam的测试",
+        "avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/4/12/b705c964fdef980ac9b719f1973f7b75.jpg",
+        "introduction": "是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈哈哈哈订单是你哈哈订单是你哈哈哈订单是你的哈是你的哈哈哈订单哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单是你的哈哈哈订单",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "user_id": 45,
+        "type": 4,
+        "model_id": "5db305cacd9c3400015a1db4",
+        "model_type": "question",
+        "related_id": "5db31b191f3bf31bb0031dad",
+        "content": "\u003cp\u003e''11111\u003c/p\u003e",
+        "content_text": "''11111",
+        "is_liked": false,
+        "is_favorited": false,
+        "favorites": 0,
+        "likes": 2,
+        "shares": 4,
+        "reads": 0,
+        "comment_count": 2,
+        "created": 1572018969,
+        "updated": 1572018969,
+        "question_title": "",
+        "assets": [],
+        "is_top": false,
+        "anonymity": false,
+        "deleted": 0,
+        "my_comment": {
+          "id": "5db31b191f3bf31bb0031dad",
+          "content": "测试",
+          "created": 1572172386
+        },
+        "read_times": 66,
+        "sort_score": 0,
+        "tip_num": 0,
+        "paid_money": 0
+      },
+      "my_comment": {
+        "id": "",
+        "nickname": "",
+        "avatar": "",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "user_id": 0,
+        "type": 0,
+        "model_id": "",
+        "model_type": "",
+        "related_id": "",
+        "content": "",
+        "content_text": "",
+        "is_liked": false,
+        "is_favorited": false,
+        "favorites": 0,
+        "likes": 0,
+        "shares": 0,
+        "reads": 0,
+        "comment_count": 0,
+        "created": 0,
+        "updated": 0,
+        "question_title": "",
+        "assets": null,
+        "is_top": false,
+        "anonymity": false,
+        "deleted": 0,
+        "my_comment": {
+          "id": "",
+          "content": "",
+          "created": 0
+        },
+        "read_times": 0,
+        "sort_score": 0,
+        "tip_num": 0,
+        "paid_money": 0
+      },
+      "draft": {
+        "nickname": "",
+        "avatar": "",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "id": "",
+        "user_id": 0,
+        "model_id": "",
+        "model_type": "",
+        "content": "",
+        "title": "",
+        "pure_content": "",
+        "content_type": "",
+        "created": 0,
+        "updated": 0,
+        "topic": null,
+        "is_long": false,
+        "assets": null
+      },
+      "assets": [],
+      "is_featured": false,
+      "labels": [
+        {
+          "id": "5db305bdcd9c3400015a1db1",
+          "text": "常识",
+          "question_num": 0
+        },
+        {
+          "id": "5db305c3cd9c3400015a1db2",
+          "text": "百科",
+          "question_num": 0
+        },
+        {
+          "id": "5db305c6cd9c3400015a1db3",
+          "text": "综合",
+          "question_num": 0
+        }
+      ],
+      "anonymity": true,
+      "invite_users": null,
+      "deleted": 0,
+      "created": 1572013514,
+      "tip_num": 0,
+      "is_reward": false,
+      "money": 0
+    },
+    {
+      "id": "5db162bdcd9c3400015a18be",
+      "nickname": "Chris",
+      "avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/11/9/ed4f0b88b6a1aed7fce41432e47d6ba3.jpg",
+      "introduction": "",
+      "followed": 0,
+      "invited": false,
+      "fans": 0,
+      "follows": 0,
+      "user_id": 5,
+      "title": "下午好",
+      "content": "",
+      "is_liked": false,
+      "likes": 0,
+      "reads": 0,
+      "shares": 0,
+      "is_favorited": false,
+      "favorites": 0,
+      "comment_count": 2,
+      "last_comment": {
+        "id": "5db1d787cd9c3400015a192f",
+        "nickname": "L99193",
+        "avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2018/12/14/0d5b1c4c7f720f698946c7f6ab08f687.jpg",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "user_id": 71675,
+        "type": 4,
+        "model_id": "5db162bdcd9c3400015a18be",
+        "model_type": "question",
+        "related_id": "5db1d787cd9c3400015a192f",
+        "content": "123",
+        "content_text": "123",
+        "is_liked": true,
+        "is_favorited": false,
+        "favorites": 0,
+        "likes": 1,
+        "shares": 3,
+        "reads": 0,
+        "comment_count": 1,
+        "created": 1571936135,
+        "updated": 1571936135,
+        "question_title": "",
+        "assets": [],
+        "is_top": false,
+        "anonymity": false,
+        "deleted": 0,
+        "my_comment": {
+          "id": "5db1d787cd9c3400015a192f",
+          "content": "转发同时发布评论",
+          "created": 1572011648
+        },
+        "read_times": 66,
+        "sort_score": 0,
+        "tip_num": 1,
+        "paid_money": 0
+      },
+      "my_comment": {
+        "id": "",
+        "nickname": "",
+        "avatar": "",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "user_id": 0,
+        "type": 0,
+        "model_id": "",
+        "model_type": "",
+        "related_id": "",
+        "content": "",
+        "content_text": "",
+        "is_liked": false,
+        "is_favorited": false,
+        "favorites": 0,
+        "likes": 0,
+        "shares": 0,
+        "reads": 0,
+        "comment_count": 0,
+        "created": 0,
+        "updated": 0,
+        "question_title": "",
+        "assets": null,
+        "is_top": false,
+        "anonymity": false,
+        "deleted": 0,
+        "my_comment": {
+          "id": "",
+          "content": "",
+          "created": 0
+        },
+        "read_times": 0,
+        "sort_score": 0,
+        "tip_num": 0,
+        "paid_money": 0
+      },
+      "draft": {
+        "nickname": "",
+        "avatar": "",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "id": "",
+        "user_id": 0,
+        "model_id": "",
+        "model_type": "",
+        "content": "",
+        "title": "",
+        "pure_content": "",
+        "content_type": "",
+        "created": 0,
+        "updated": 0,
+        "topic": null,
+        "is_long": false,
+        "assets": null
+      },
+      "assets": [
+        {
+          "type": "img",
+          "url": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/question/2019/10/24/3a3f52bec83b347ad3b8f0a9a3a95714.jpg",
+          "width": 720,
+          "height": 1280
+        }
+      ],
+      "is_featured": false,
+      "labels": [],
+      "anonymity": false,
+      "invite_users": null,
+      "deleted": 0,
+      "created": 1571906237,
+      "tip_num": 0,
+      "is_reward": false,
+      "money": 0
+    },
+    {
+      "id": "5db2e7cacd9c3400015a1b70",
+      "nickname": "Anonymous",
+      "avatar": "https://links-comment.oss-cn-beijing.aliyuncs.com/comment/20180820/Kgka4_oU1.jpeg",
+      "introduction": "",
+      "followed": 0,
+      "invited": false,
+      "fans": 0,
+      "follows": 0,
+      "user_id": 58297,
+      "title": "2019年10月24日报道，综合报道，全球变暖可能正改变北极的地貌！俄罗斯国防部日前表示，俄海军在北极发现了5座新岛屿，正是冰川融化导致了这几座岛屿显露出来。 俄国防部表示，俄海军在2016年首次利用卫星图像发现了这些岛屿，但只是在近年8月和9月的一次考察中确认并绘制了地图。 这些新岛屿位于北极Vylki冰川附近，远离遥远的新地马岛群岛海岸，该群岛位于俄罗斯大陆西北的北冰洋。米到54500平方米不等。",
+      "content": "",
+      "is_liked": false,
+      "likes": 0,
+      "reads": 0,
+      "shares": 0,
+      "is_favorited": false,
+      "favorites": 0,
+      "comment_count": 2,
+      "last_comment": {
+        "id": "5db2e7d1cd9c3400015a1b72",
+        "nickname": "异想天开的喵(^･ｪ･^)",
+        "avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/5/27/b3ba4371dd24c64b48475b8020370790.jpg",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "user_id": 58297,
+        "type": 4,
+        "model_id": "5db2e7cacd9c3400015a1b70",
+        "model_type": "question",
+        "related_id": "5db2e7d1cd9c3400015a1b72",
+        "content": "\u003cp\u003e\u003cspan\u003e2019年10月24日报道，综合报道，全球变暖可能正改变北极的地貌！俄罗斯国防部日前表示，俄海军在北极发现了5座新岛屿，正是冰川融化导致了这几座岛屿显露出来。 俄国防部表示，俄海军在2016年首次利用卫星图像发现了这些岛屿，但只是在近年8月和9月的一次考察中确认并绘制了地图。 这些新岛屿位于北极Vylki冰川附近，远离遥远的新地马岛群岛海岸，该群岛位于俄罗斯大陆西北的北冰洋。它们的面积从900平方米到54500平方米不等。\u003c/span\u003e\u003c/p\u003e",
+        "content_text": "2019年10月24日报道，综合报道，全球变暖可能正改变北极的地貌！俄罗斯国防部日前表示，俄海军在北极发现了5座新岛屿，正是冰川融化导致了这几座岛屿显露出来。 俄国防部表示，俄海军在2016年首次利用卫星图像发现了这些岛屿，但只是在近年8月和9月的一次考察中确认并绘制了地图。 这些新岛屿位于北极Vylki冰川附近，远离遥远的新地马岛群岛海岸，该群岛位于俄罗斯大陆西北的北冰洋。它们的面积从900平方米到54500平方米不等。",
+        "is_liked": true,
+        "is_favorited": true,
+        "favorites": 1,
+        "likes": 1,
+        "shares": 2,
+        "reads": 0,
+        "comment_count": 2,
+        "created": 1572005841,
+        "updated": 1572005841,
+        "question_title": "",
+        "assets": [],
+        "is_top": false,
+        "anonymity": false,
+        "deleted": 0,
+        "my_comment": {
+          "id": "5db2e7d1cd9c3400015a1b72",
+          "content": "ceshi ",
+          "created": 1572010175
+        },
+        "read_times": 146,
+        "sort_score": 0,
+        "tip_num": 0,
+        "paid_money": 0
+      },
+      "my_comment": {
+        "id": "",
+        "nickname": "",
+        "avatar": "",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "user_id": 0,
+        "type": 0,
+        "model_id": "",
+        "model_type": "",
+        "related_id": "",
+        "content": "",
+        "content_text": "",
+        "is_liked": false,
+        "is_favorited": false,
+        "favorites": 0,
+        "likes": 0,
+        "shares": 0,
+        "reads": 0,
+        "comment_count": 0,
+        "created": 0,
+        "updated": 0,
+        "question_title": "",
+        "assets": null,
+        "is_top": false,
+        "anonymity": false,
+        "deleted": 0,
+        "my_comment": {
+          "id": "",
+          "content": "",
+          "created": 0
+        },
+        "read_times": 0,
+        "sort_score": 0,
+        "tip_num": 0,
+        "paid_money": 0
+      },
+      "draft": {
+        "nickname": "",
+        "avatar": "",
+        "introduction": "",
+        "followed": 0,
+        "invited": false,
+        "fans": 0,
+        "follows": 0,
+        "id": "",
+        "user_id": 0,
+        "model_id": "",
+        "model_type": "",
+        "content": "",
+        "title": "",
+        "pure_content": "",
+        "content_type": "",
+        "created": 0,
+        "updated": 0,
+        "topic": null,
+        "is_long": false,
+        "assets": null
+      },
+      "assets": [],
+      "is_featured": false,
+      "labels": [],
+      "anonymity": true,
+      "invite_users": null,
+      "deleted": 0,
+      "created": 1572005834,
+      "tip_num": 0,
+      "is_reward": false,
+      "money": 0
+    }
+  ],
+  "page": 1,
+  "limit": 5,
+  "total": 26
+}

stories/index.stories.tsx

@@ -0,0 +1,292 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withInfo } from "@storybook/addon-info";
+import { withKnobs, number, boolean, select } from "@storybook/addon-knobs";
+import { addReadme } from 'storybook-readme';
+
+import ConsumeListView from '@components/Payment/Common/ConsumeListView';
+import ConsumeListViewDoc from '@components/Payment/Common/ConsumeListView/README.md';
+import PayPlatFormOptions, { PAY_CHANNEL } from '@components/Payment/Common/PayPlatformOptions/index';
+import PayPlatFormOptionsDoc from '@components/Payment/Common/PayPlatformOptions/README.md';
+import PriceOptions from '@components/Payment/Common/PriceOptions';
+import PriceOptionsDoc from '@components/Payment/Common/PriceOptions/README.md';
+import WaitPayInfoView from '@components/Payment/Common/WaitPayInfoView';
+import WaitPayInfoViewDoc from '@components/Payment/Common/WaitPayInfoView/README.md';
+
+const stories = storiesOf('Payment', module);
+stories.addDecorator((storyFn) => <div style={{padding: "0px 40px"}}>{storyFn()}</div>)
+stories.addDecorator(withKnobs);
+stories.addDecorator(withInfo);
+stories.addDecorator(addReadme);
+
+const consumeData = [
+  {
+    "id": 69,
+    "consume_id": "20190919120838283305719",
+    "goods_id": 0,
+    "goods_type": 4,
+    "num": 9,
+    "user_id": 71082,
+    "user_nickname": "lydia",
+    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2018/8/26/10adf03c70fb128d546e0d40fea77047.jpg",
+    "to_user_id": 1,
+    "to_user_nickname": "",
+    "to_user_avatar": "",
+    "bill_price": 900,
+    "ref_id": 0,
+    "business_type": 3,
+    "created_at": 1568894918,
+    "updated_at": 1568894918
+  },
+  {
+    "id": 32,
+    "consume_id": "20190802095658644217897",
+    "goods_id": 2,
+    "goods_type": 1,
+    "num": 8,
+    "user_id": 2,
+    "user_nickname": "jim",
+    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2018/4/6/7d4948f6e9a66789f776b0c69c8d51d9.png",
+    "to_user_id": 1,
+    "to_user_nickname": "",
+    "to_user_avatar": "",
+    "bill_price": 800,
+    "ref_id": 0,
+    "business_type": 3,
+    "created_at": 1564739818,
+    "updated_at": 1564739818
+  },
+  {
+    "id": 46,
+    "consume_id": "20190819131433734083448",
+    "goods_id": 2,
+    "goods_type": 1,
+    "num": 7,
+    "user_id": 5,
+    "user_nickname": "Chris",
+    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/6/12/a1aec180fbb727cc693c7a2f14812dac.jpg",
+    "to_user_id": 1,
+    "to_user_nickname": "",
+    "to_user_avatar": "",
+    "bill_price": 700,
+    "ref_id": 0,
+    "business_type": 3,
+    "created_at": 1566220473,
+    "updated_at": 1566220473
+  },
+  {
+    "id": 20,
+    "consume_id": "20190729154830503859957",
+    "goods_id": 2,
+    "goods_type": 1,
+    "num": 5,
+    "user_id": 217,
+    "user_nickname": "Paul",
+    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/12/4/b9221e3176d92c349affc3633a0ec7bf.jpg",
+    "to_user_id": 1,
+    "to_user_nickname": "",
+    "to_user_avatar": "",
+    "bill_price": 500,
+    "ref_id": 0,
+    "business_type": 3,
+    "created_at": 1564415310,
+    "updated_at": 1564415310
+  },
+  {
+    "id": 127,
+    "consume_id": "20191204115927765695546",
+    "goods_id": 2,
+    "goods_type": 1,
+    "num": 1,
+    "user_id": 45,
+    "user_nickname": "Adam",
+    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/6/12/cbc5208e3a8aba6fcfc2cef2a4d5151d.jpg",
+    "to_user_id": 1,
+    "to_user_nickname": "",
+    "to_user_avatar": "",
+    "bill_price": 100,
+    "ref_id": 0,
+    "business_type": 3,
+    "created_at": 1575460767,
+    "updated_at": 1575460767
+  },
+  {
+    "id": 71,
+    "consume_id": "20190922010906704921621",
+    "goods_id": 0,
+    "goods_type": 4,
+    "num": 1,
+    "user_id": 22428,
+    "user_nickname": "简单生活",
+    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/9/22/27886bb4305ab56adc0b20018b975dc5.jpg",
+    "to_user_id": 1,
+    "to_user_nickname": "",
+    "to_user_avatar": "",
+    "bill_price": 100,
+    "ref_id": 0,
+    "business_type": 3,
+    "created_at": 1569114546,
+    "updated_at": 1569114546
+  },
+  {
+    "id": 70,
+    "consume_id": "20190920014118872836942",
+    "goods_id": 0,
+    "goods_type": 4,
+    "num": 1,
+    "user_id": 70406,
+    "user_nickname": "vicky",
+    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/5/5/8a0db661919f926501192eccf13740f1jpg",
+    "to_user_id": 1,
+    "to_user_nickname": "",
+    "to_user_avatar": "",
+    "bill_price": 100,
+    "ref_id": 0,
+    "business_type": 3,
+    "created_at": 1568943678,
+    "updated_at": 1568943678
+  },
+  {
+    "id": 68,
+    "consume_id": "20190917224355248346157",
+    "goods_id": 0,
+    "goods_type": 4,
+    "num": 1,
+    "user_id": 71603,
+    "user_nickname": "Slate",
+    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/10/19/1cb9f491e90258ba91a189027ef774b7.jpg",
+    "to_user_id": 1,
+    "to_user_nickname": "",
+    "to_user_avatar": "",
+    "bill_price": 100,
+    "ref_id": 0,
+    "business_type": 3,
+    "created_at": 1568760235,
+    "updated_at": 1568760235
+  }
+];
+
+stories.add(
+  'ConsumeListView',
+  () => {
+    const [toggle, setToggle] = React.useState(false);
+    return <ConsumeListView
+      isToggle={toggle}
+      onToggleChange={() => setToggle(!toggle)}
+      dataSource={consumeData}
+      listLength={consumeData.length}
+      showLength={number("showLength", 5)}
+    />
+  },
+  {
+    info: {
+      inline: true,
+      text: `
+      ~~~typescript
+      <ConsumeListView
+        isToggle={toggle}
+        onToggleChange={() => setToggle(!toggle)}
+        dataSource={consumeData}
+        listLength={consumeData.length}
+        showLength={number("showLength", 5)}
+      />
+      ~~~
+      `,
+      // TableComponent: (props: TableComponentOptionProps) => {
+      //   const { propDefinitions } = props;
+      //   return propDefinitions.map(i => {
+      //     return (
+      //       <div>
+      //         {i.defaultValue}
+      //       </div>
+      //     )
+      //   })
+      // },
+      source: false,
+      maxPropStringLength: 500,
+    },
+    notes: 'A very simple example of addon notes',
+    readme: {
+      sidebar: ConsumeListViewDoc,
+    }
+  }
+);
+
+stories.add(
+  'PayPlatFormOptions',
+  () => {
+    const [payitem, setPayitem] = React.useState(PAY_CHANNEL.PAYPAL);
+    return (
+      <PayPlatFormOptions
+        payitem={payitem}
+        onPayItemChange={(value) => {
+          action(`PayItemChange: ${value}`);
+          setPayitem(value);
+        }}
+        isMobile={boolean("isMobile", false)}
+        size={select("size", { Small: "small", Normal: "normal", Large: "large"}, "normal")}
+        withTitle={boolean("withTitle", false)}
+        locale={select("locale", { ZH: 'zh', EN: 'en' }, "zh")}
+      />
+    )
+  },
+  {
+    info: {
+      inline: true,
+      text: ``,
+      source: false,
+      maxPropStringLength: 500,
+    },
+    notes: 'A very simple example of addon notes',
+    readme: {
+      sidebar: PayPlatFormOptionsDoc,
+    }
+  }
+);
+
+stories.add(
+  'PriceOptions',
+  () => {
+    const [price, setPrice] = React.useState(0);
+    const refInput = React.useRef(null);
+    return (
+      <PriceOptions
+        price={price}
+        onPriceChange={(v) => setPrice(v)}
+        size={select("size", { Small: "small", Normal: "normal", Large: "large"}, "normal")}
+        withTitle={boolean("withTitle", false)}
+        focusScroll={boolean("focusScroll", false)}
+        inputRef={refInput}
+      />
+    )
+  },
+  {
+    info: {
+      inline: true,
+      text: ``,
+      source: false,
+      maxPropStringLength: 500,
+    },
+    notes: 'A very simple example of addon notes',
+    readme: {
+      sidebar: PriceOptionsDoc,
+    }
+  }
+)
+
+stories.add(
+  'WaitPayInfoView',
+  () => {
+    return (
+      <WaitPayInfoView />
+    )
+  },
+  {
+    info: { inline: true, text: ``, source: false, maxPropStringLength: 500 },
+    notes: 'A very simple example of addon notes',
+    readme: {
+      sidebar: WaitPayInfoViewDoc,
+    }
+  }
+)

tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
     "target": "es5",
+    "rootDirs": [
+      "src",
+      "stories"
+    ],
     "lib": [
       "dom",
       "dom.iterable",
@@ -15,16 +19,17 @@
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    // "isolatedModules": true,
+    "isolatedModules": true,
     "noEmit": true,
     "jsx": "react"
   },
   "baseUrl": ".",
   "paths": {
-    "@/*": ["*"],
+    "@/*": ["src/*"],
     "@components/*": [ "src/components/*" ]
   },
   "include": [
-    "src"
+    "src/**/*",
+    "stories/**/*"
   ]
 }