dev: init theme

.storybook/addons.js

 import '@storybook/addon-viewport/register';
 import '@storybook/addon-console';
 import '@storybook/addon-storysource/register';
+import 'storybook-addon-themes';
 import 'storybook-readme/register';

.storybook/bilingoTheme.js

+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+
+  colorPrimary: '#fc4747',
+  colorSecondary: '#fc695a',
+
+  // UI
+  appBg: 'white',
+  appContentBg: 'white',
+  appBorderColor: 'grey',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: 'black',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+  barTextColor: 'black',
+  barSelectedColor: 'white',
+  barBg: '#fc4747',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: 'silver',
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+
+  brandTitle: 'BilingoUI',
+  brandUrl: 'https://www.bilingo.com/',
+  brandImage: 'https://a.links123.cn/common/imgs/logo_en_mobile@2x.png?2019021101',
+});

.storybook/config.js

 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { addDecorator } from '@storybook/react';
 import { withConsole } from '@storybook/addon-console';
+import bilingoTheme from './bilingoTheme';
 
 addParameters({
   info: { inline: true },
     viewports: INITIAL_VIEWPORTS,
     defaultViewport: 'someDefault',
   },
+  options: { theme: bilingoTheme },
 });
 // automatically import all files ending in *.stories.tsx
 configure(

package.json

     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss-modules": "^2.0.1",
     "rollup-plugin-replace": "^2.2.0",
+    "storybook-addon-themes": "^5.3.0",
     "storybook-readme": "^5.0.8",
     "style-loader": "^1.0.1",
     "ts-loader": "^6.2.1"

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

       const { text, image } = targetInstance;
       return (
         <PayPlatformBlock
+          key={valueKey}
           {...{ isMobile, locale, size }}
           onClick={() => onPayChannelChange(valueKey)}
           isActive={valueKey === payChannel}
         })}
       >
         <div className={styles.flexContainer}>
-          <div className={styles.flexItem}></div>
+          {payListDOM}
         </div>
       </div>
     </div>
   );
 };
 
-// class PayPlatformOptions extends PureComponent<Props, {}> {
-//   render() {
-//     const {
-//       payitem,
-//       onPayItemChange,
-//       isMobile = false,
-//       size = "normal",
-//       withTitle = true,
-//       titleTxt,
-//       locale = "zh"
-//     } = this.props;
-
-//     let titleDOM = null;
-//     if (withTitle) {
-//       const titleResult = titleTxt || locale === 'zh' ? '支付方式' : 'Payment';
-//       titleDOM = (
-//         <div className={styles.label}>
-//           {titleResult}
-//         </div>
-//       );
-//     }
-
-//     if (isMobile) {
-//       return (
-//         <div>
-//           {titleDOM}
-//           <div
-//             className={classnames(styles["payment-method-box"], {
-//               [styles.mobile]: isMobile
-//             })}
-//           >
-//             <div className={styles.flexContainer}>
-//               <div className={styles.flexItem}>
-//                 <div
-//                   className={classnames(
-//                     {
-//                       [styles.payitem]: true,
-//                       [styles.active]: payitem === PAY_CHANNEL.ALI_WEB,
-//                       ...exportStyleSizeClass(styles, size),
-//                     },
-//                     styles[locale]
-//                   )}
-//                   onClick={() => {
-//                     onPayItemChange(PAY_CHANNEL.ALI_WEB);
-//                   }}
-//                 >
-//                   <img
-//                     src={mobileIconAlipay}
-//                     alt="alipay"
-//                     className={styles["payment-method"]}
-//                   />
-//                   <div className={styles.platformName}>
-//                     支付宝
-//                   </div>
-//                 </div>
-//               </div>
-//               <div className={styles.flexItem}>
-//                 <div
-//                   className={classnames(
-//                     {
-//                       [styles.payitem]: true,
-//                       [styles.active]: payitem === PAY_CHANNEL.WX_NATIVE,
-//                       ...exportStyleSizeClass(styles, size),
-//                     },
-//                     styles[locale]
-//                   )}
-//                   onClick={() => {
-//                     onPayItemChange(PAY_CHANNEL.WX_NATIVE);
-//                   }}
-//                 >
-//                   <img
-//                     src={mobileIconWechatpay}
-//                     alt="wechatpay"
-//                     className={styles["payment-method"]}
-//                   />
-//                   <div className={styles.platformName}>
-//                     微信
-//                   </div>
-//                 </div>
-//               </div>
-//               <div className={styles.flexItem}>
-//                 <div
-//                   className={classnames(
-//                     {
-//                       [styles.payitem]: true,
-//                       [styles.active]: payitem === PAY_CHANNEL.PAYPAL,
-//                       ...exportStyleSizeClass(styles, size),
-//                     },
-//                     styles[locale]
-//                   )}
-//                   onClick={() => {
-//                     onPayItemChange(PAY_CHANNEL.PAYPAL);
-//                   }}
-//                 >
-//                   <img
-//                     src={mobileIconPaypal}
-//                     alt="paypal"
-//                     className={styles["payment-method"]}
-//                   />
-//                   <div className={styles.platformName}>
-//                     Paypal
-//                   </div>
-//                 </div>
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//       );
-//     }
-
-//     return (
-//       <div>
-//         {titleDOM}
-//         <div className={styles["payment-method-box"]}>
-//           <div className={styles.flexContainer}>
-//             <div className={styles.flexItem}>
-//               <div
-//                 className={classnames(
-//                   {
-//                     [styles.payitem]: true,
-//                     [styles.active]: payitem === PAY_CHANNEL.ALI_WEB,
-//                     ...exportStyleSizeClass(styles, size),
-//                   },
-//                   styles[locale]
-//                 )}
-//                 onClick={() => {
-//                   onPayItemChange(PAY_CHANNEL.ALI_WEB);
-//                 }}
-//               >
-//                 <span className={styles["payment-method-before"]} />
-//                 <img
-//                   src={iconAlipay}
-//                   alt="alipay"
-//                   className={styles["payment-method"]}
-//                 />
-//               </div>
-//             </div>
-//             <div className={styles.flexItem}>
-//               <div
-//                 className={classnames(
-//                   {
-//                     [styles.payitem]: true,
-//                     [styles.active]: payitem === PAY_CHANNEL.WX_NATIVE,
-//                     ...exportStyleSizeClass(styles, size),
-//                   },
-//                   styles[locale]
-//                 )}
-//                 onClick={() => {
-//                   onPayItemChange(PAY_CHANNEL.WX_NATIVE);
-//                 }}
-//               >
-//                 <span className={styles["payment-method-before"]} />
-//                 <img
-//                   src={iconWechatpay}
-//                   alt="wechatpay"
-//                   className={styles["payment-method"]}
-//                 />
-//               </div>
-//             </div>
-//             <div className={styles.flexItem}>
-//               <div
-//                 className={classnames(
-//                   {
-//                     [styles.payitem]: true,
-//                     [styles.active]: payitem === PAY_CHANNEL.PAYPAL,
-//                     ...exportStyleSizeClass(styles, size),
-//                   },
-//                   styles[locale]
-//                 )}
-//                 onClick={() => {
-//                   onPayItemChange(PAY_CHANNEL.PAYPAL);
-//                 }}
-//               >
-//                 <span className={styles["payment-method-before"]} />
-//                 <img
-//                   src={iconPaypal}
-//                   alt="paypal"
-//                   className={styles["payment-method"]}
-//                 />
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//       </div>
-//     );
-//   }
-// }
-
 export default PayPlatformOptions;

stories/Payment.stories.tsx

 stories.add(
   'PayPlatFormOptions',
   () => {
-    const [payitem, setPayitem] = React.useState(PAY_CHANNEL.PAYPAL);
+    const [payChannel, setPayChannel] = React.useState(PAY_CHANNEL.PAYPAL);
     return (
       <PayPlatFormOptions
-        payitem={payitem}
-        onPayItemChange={(value) => {
+        payChannel={payChannel}
+        onPayChannelChange={(value) => {
           action(`PayItemChange: ${value}`);
-          setPayitem(value);
+          setPayChannel(value);
         }}
         isMobile={boolean("isMobile", false)}
         size={select("size", { Small: "small", Normal: "normal", Large: "large"}, "normal")}

yarn.lock

   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.3.1":
+  version "7.8.4"
+  resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.8.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
+  integrity sha1-159aIED3yqJNU+VjqtScvAVYEwg=
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.4.0", "@babel/template@^7.7.4":
   version "7.7.4"
   resolved "https://registry.npm.taobao.org/@babel/template/download/@babel/template-7.7.4.tgz?cache=0&sync_timestamp=1574465630781&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftemplate%2Fdownload%2F%40babel%2Ftemplate-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
-"@emotion/core@^10.0.14", "@emotion/core@^10.0.9":
+"@emotion/core@^10.0.14", "@emotion/core@^10.0.20", "@emotion/core@^10.0.9":
   version "10.0.27"
   resolved "https://registry.npm.taobao.org/@emotion/core/download/@emotion/core-10.0.27.tgz#7c3f78be681ab2273f3bf11ca3e2edc4a9dd1fdc"
   integrity sha1-fD94vmgasic/O/Eco+LtxKndH9w=
     "@emotion/serialize" "^0.11.15"
     "@emotion/utils" "0.11.3"
 
-"@emotion/styled@^10.0.14":
+"@emotion/styled@^10.0.14", "@emotion/styled@^10.0.17":
   version "10.0.27"
   resolved "https://registry.npm.taobao.org/@emotion/styled/download/@emotion/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
   integrity sha1-Estn6R9610MeGHWx2DqUuBQTPq8=
     global "^4.3.2"
     util-deprecate "^1.0.2"
 
+"@storybook/addons@^5.1.0-rc.5":
+  version "5.3.9"
+  resolved "https://registry.npm.taobao.org/@storybook/addons/download/@storybook/addons-5.3.9.tgz?cache=0&sync_timestamp=1580391958611&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40storybook%2Faddons%2Fdownload%2F%40storybook%2Faddons-5.3.9.tgz#f2492de356e0cd38e3da357f4dafa058a4756e36"
+  integrity sha1-8kkt41bgzTjj2jV/Ta+gWKR1bjY=
+  dependencies:
+    "@storybook/api" "5.3.9"
+    "@storybook/channels" "5.3.9"
+    "@storybook/client-logger" "5.3.9"
+    "@storybook/core-events" "5.3.9"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    util-deprecate "^1.0.2"
+
 "@storybook/api@5.2.8":
   version "5.2.8"
   resolved "https://registry.npm.taobao.org/@storybook/api/download/@storybook/api-5.2.8.tgz#21f03df8041114eb929bd10b570a17f266568b7f"
     telejson "^3.0.2"
     util-deprecate "^1.0.2"
 
+"@storybook/api@5.3.9":
+  version "5.3.9"
+  resolved "https://registry.npm.taobao.org/@storybook/api/download/@storybook/api-5.3.9.tgz?cache=0&sync_timestamp=1580391957549&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40storybook%2Fapi%2Fdownload%2F%40storybook%2Fapi-5.3.9.tgz#090119c6fd4082442e926a434d3d171535ec6784"
+  integrity sha1-CQEZxv1AgkQukmpDTT0XFTXsZ4Q=
+  dependencies:
+    "@reach/router" "^1.2.1"
+    "@storybook/channels" "5.3.9"
+    "@storybook/client-logger" "5.3.9"
+    "@storybook/core-events" "5.3.9"
+    "@storybook/csf" "0.0.1"
+    "@storybook/router" "5.3.9"
+    "@storybook/theming" "5.3.9"
+    "@types/reach__router" "^1.2.3"
+    core-js "^3.0.1"
+    fast-deep-equal "^2.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    prop-types "^15.6.2"
+    react "^16.8.3"
+    semver "^6.0.0"
+    shallow-equal "^1.1.0"
+    store2 "^2.7.1"
+    telejson "^3.2.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/channel-postmessage@5.2.8":
   version "5.2.8"
   resolved "https://registry.npm.taobao.org/@storybook/channel-postmessage/download/@storybook/channel-postmessage-5.2.8.tgz?cache=0&sync_timestamp=1577364190437&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40storybook%2Fchannel-postmessage%2Fdownload%2F%40storybook%2Fchannel-postmessage-5.2.8.tgz#7a84869ce0fc270c3b5dcd7fa4ed798b6055816f"
   dependencies:
     core-js "^3.0.1"
 
+"@storybook/channels@5.3.9":
+  version "5.3.9"
+  resolved "https://registry.npm.taobao.org/@storybook/channels/download/@storybook/channels-5.3.9.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40storybook%2Fchannels%2Fdownload%2F%40storybook%2Fchannels-5.3.9.tgz#7ee8f6e6f4c9465227120d6711805b5e6862107f"
+  integrity sha1-fuj25vTJRlInEg1nEYBbXmhiEH8=
+  dependencies:
+    core-js "^3.0.1"
+
 "@storybook/client-api@5.2.8":
   version "5.2.8"
   resolved "https://registry.npm.taobao.org/@storybook/client-api/download/@storybook/client-api-5.2.8.tgz#1de791f7888442287f848e5f544eb883c5edc0da"
   dependencies:
     core-js "^3.0.1"
 
+"@storybook/client-logger@5.3.9", "@storybook/client-logger@^5.1.0-rc.5":
+  version "5.3.9"
+  resolved "https://registry.npm.taobao.org/@storybook/client-logger/download/@storybook/client-logger-5.3.9.tgz#06654be9caa8d37366270b0426c2d5acb217f504"
+  integrity sha1-BmVL6cqo03NmJwsEJsLVrLIX9QQ=
+  dependencies:
+    core-js "^3.0.1"
+
 "@storybook/components@5.2.8", "@storybook/components@^5.0.6":
   version "5.2.8"
   resolved "https://registry.npm.taobao.org/@storybook/components/download/@storybook/components-5.2.8.tgz?cache=0&sync_timestamp=1577364192028&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40storybook%2Fcomponents%2Fdownload%2F%40storybook%2Fcomponents-5.2.8.tgz#f5d4a06ba4ba8c700b2d962deae182105b72fb99"
     react-textarea-autosize "^7.1.0"
     simplebar-react "^1.0.0-alpha.6"
 
+"@storybook/components@^5.1.0-rc.5":
+  version "5.3.9"
+  resolved "https://registry.npm.taobao.org/@storybook/components/download/@storybook/components-5.3.9.tgz?cache=0&sync_timestamp=1580391963067&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40storybook%2Fcomponents%2Fdownload%2F%40storybook%2Fcomponents-5.3.9.tgz#1fbc688770889ddadb8c603f5a4dbcf987f3eb0f"
+  integrity sha1-H7xoh3CIndrbjGA/Wk28+Yfz6w8=
+  dependencies:
+    "@storybook/client-logger" "5.3.9"
+    "@storybook/theming" "5.3.9"
+    "@types/react-syntax-highlighter" "11.0.2"
+    "@types/react-textarea-autosize" "^4.3.3"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    markdown-to-jsx "^6.9.1"
+    memoizerific "^1.11.3"
+    polished "^3.3.1"
+    popper.js "^1.14.7"
+    prop-types "^15.7.2"
+    react "^16.8.3"
+    react-dom "^16.8.3"
+    react-focus-lock "^2.1.0"
+    react-helmet-async "^1.0.2"
+    react-popper-tooltip "^2.8.3"
+    react-syntax-highlighter "^11.0.2"
+    react-textarea-autosize "^7.1.0"
+    simplebar-react "^1.0.0-alpha.6"
+    ts-dedent "^1.1.0"
+
 "@storybook/core-events@5.2.8", "@storybook/core-events@^5.0.6":
   version "5.2.8"
   resolved "https://registry.npm.taobao.org/@storybook/core-events/download/@storybook/core-events-5.2.8.tgz#93fc458ea0820ff1409d268b0fe51abba200f5a4"
   dependencies:
     core-js "^3.0.1"
 
+"@storybook/core-events@5.3.9", "@storybook/core-events@^5.1.0-rc.5":
+  version "5.3.9"
+  resolved "https://registry.npm.taobao.org/@storybook/core-events/download/@storybook/core-events-5.3.9.tgz#3c7fbc20204ae4b937c896ed6281e782cc09c4aa"
+  integrity sha1-PH+8ICBK5Lk3yJbtYoHngswJxKo=
+  dependencies:
+    core-js "^3.0.1"
+
 "@storybook/core@5.2.8":
   version "5.2.8"
   resolved "https://registry.npm.taobao.org/@storybook/core/download/@storybook/core-5.2.8.tgz?cache=0&sync_timestamp=1577364262953&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40storybook%2Fcore%2Fdownload%2F%40storybook%2Fcore-5.2.8.tgz#3f6ddbacc705c1893deb15582c3a0a1ecd882cd1"
     webpack-dev-middleware "^3.7.0"
     webpack-hot-middleware "^2.25.0"
 
+"@storybook/csf@0.0.1":
+  version "0.0.1"
+  resolved "https://registry.npm.taobao.org/@storybook/csf/download/@storybook/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
+  integrity sha1-lZAVB9wC8LxvmsjuGYPi/Fu5jOY=
+  dependencies:
+    lodash "^4.17.15"
+
 "@storybook/node-logger@5.2.8":
   version "5.2.8"
   resolved "https://registry.npm.taobao.org/@storybook/node-logger/download/@storybook/node-logger-5.2.8.tgz?cache=0&sync_timestamp=1577364189635&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40storybook%2Fnode-logger%2Fdownload%2F%40storybook%2Fnode-logger-5.2.8.tgz#4a3df21d731014d54b9ca53d5b9a72dd350bb075"
     memoizerific "^1.11.3"
     qs "^6.6.0"
 
+"@storybook/router@5.3.9":
+  version "5.3.9"
+  resolved "https://registry.npm.taobao.org/@storybook/router/download/@storybook/router-5.3.9.tgz?cache=0&sync_timestamp=1580391953278&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40storybook%2Frouter%2Fdownload%2F%40storybook%2Frouter-5.3.9.tgz#3c6e01f4dced9de8e8c5c314352fdc437f2441c2"
+  integrity sha1-PG4B9NztnejoxcMUNS/cQ38kQcI=
+  dependencies:
+    "@reach/router" "^1.2.1"
+    "@storybook/csf" "0.0.1"
+    "@types/reach__router" "^1.2.3"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/source-loader@5.2.8":
   version "5.2.8"
   resolved "https://registry.npm.taobao.org/@storybook/source-loader/download/@storybook/source-loader-5.2.8.tgz#f8fb5c090e386749b058686f52ec5dedea538185"
     prop-types "^15.7.2"
     resolve-from "^5.0.0"
 
+"@storybook/theming@5.3.9", "@storybook/theming@^5.1.0-rc.5":
+  version "5.3.9"
+  resolved "https://registry.npm.taobao.org/@storybook/theming/download/@storybook/theming-5.3.9.tgz?cache=0&sync_timestamp=1580391955556&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40storybook%2Ftheming%2Fdownload%2F%40storybook%2Ftheming-5.3.9.tgz#caaeea398f9e630394298ccfe8f36a185a289e4f"
+  integrity sha1-yq7qOY+eYwOUKYzP6PNqGFoonk8=
+  dependencies:
+    "@emotion/core" "^10.0.20"
+    "@emotion/styled" "^10.0.17"
+    "@storybook/client-logger" "5.3.9"
+    core-js "^3.0.1"
+    deep-object-diff "^1.1.0"
+    emotion-theming "^10.0.19"
+    global "^4.3.2"
+    memoizerific "^1.11.3"
+    polished "^3.3.1"
+    prop-types "^15.7.2"
+    resolve-from "^5.0.0"
+    ts-dedent "^1.1.0"
+
 "@storybook/ui@5.2.8":
   version "5.2.8"
   resolved "https://registry.npm.taobao.org/@storybook/ui/download/@storybook/ui-5.2.8.tgz?cache=0&sync_timestamp=1577364257945&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40storybook%2Fui%2Fdownload%2F%40storybook%2Fui-5.2.8.tgz#da8afca9eb29a40ef3ddc6a9f6e76d7a3344f2ef"
   dependencies:
     "@types/react" "*"
 
+"@types/react-syntax-highlighter@11.0.2":
+  version "11.0.2"
+  resolved "https://registry.npm.taobao.org/@types/react-syntax-highlighter/download/@types/react-syntax-highlighter-11.0.2.tgz#a2e3ff657d7c47813f80ca930f3d959c31ec51e3"
+  integrity sha1-ouP/ZX18R4E/gMqTDz2VnDHsUeM=
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-textarea-autosize@^4.3.3":
   version "4.3.5"
   resolved "https://registry.npm.taobao.org/@types/react-textarea-autosize/download/@types/react-textarea-autosize-4.3.5.tgz#6c4d2753fa1864c98c0b2b517f67bb1f6e4c46de"
   resolved "https://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
-emotion-theming@^10.0.14:
+emotion-theming@^10.0.14, emotion-theming@^10.0.19:
   version "10.0.27"
   resolved "https://registry.npm.taobao.org/emotion-theming/download/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10"
   integrity sha1-GIe6rsFRmYYsibG5hLeYBvK5qxA=
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-focus-lock@^0.6.3:
+focus-lock@^0.6.3, focus-lock@^0.6.6:
   version "0.6.6"
   resolved "https://registry.npm.taobao.org/focus-lock/download/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7"
   integrity sha1-mBGadVo4z9vtoCgOqnfjB+7oUMc=
   resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.12.0.tgz?cache=0&sync_timestamp=1576163806990&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhighlight.js%2Fdownload%2Fhighlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
   integrity sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=
 
+highlight.js@~9.13.0:
+  version "9.13.1"
+  resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
+  integrity sha1-BUWG1TpoYzERaEiKD1jWxQXOZB4=
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
   resolved "https://registry.npm.taobao.org/lower-case/download/lower-case-1.1.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flower-case%2Fdownload%2Flower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
   integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
 
+lowlight@~1.11.0:
+  version "1.11.0"
+  resolved "https://registry.npm.taobao.org/lowlight/download/lowlight-1.11.0.tgz#1304d83005126d4e8b1dc0f07981e9b689ec2efc"
+  integrity sha1-EwTYMAUSbU6LHcDweYHptonsLvw=
+  dependencies:
+    fault "^1.0.2"
+    highlight.js "~9.13.0"
+
 lowlight@~1.9.1:
   version "1.9.2"
   resolved "https://registry.npm.taobao.org/lowlight/download/lowlight-1.9.2.tgz#0b9127e3cec2c3021b7795dd81005c709a42fdd1"
   dependencies:
     semver "^5.6.0"
 
-react-clientside-effect@^1.2.0:
+react-clientside-effect@^1.2.0, react-clientside-effect@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npm.taobao.org/react-clientside-effect/download/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
   integrity sha1-YhL7DgeyBOcUWB3VGZJgPRrMyDc=
     prop-types "^15.6.2"
     react-clientside-effect "^1.2.0"
 
+react-focus-lock@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.npm.taobao.org/react-focus-lock/download/react-focus-lock-2.2.1.tgz#1d12887416925dc53481914b7cedd39494a3b24a"
+  integrity sha1-HRKIdBaSXcU0gZFLfO3TlJSjsko=
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    focus-lock "^0.6.6"
+    prop-types "^15.6.2"
+    react-clientside-effect "^1.2.2"
+    use-callback-ref "^1.2.1"
+    use-sidecar "^1.0.1"
+
 react-helmet-async@^1.0.2:
   version "1.0.4"
   resolved "https://registry.npm.taobao.org/react-helmet-async/download/react-helmet-async-1.0.4.tgz#079ef10b7fefcaee6240fefd150711e62463cc97"
     shallowequal "^1.1.0"
     throttle-debounce "^2.1.0"
 
+react-syntax-highlighter@^11.0.2:
+  version "11.0.2"
+  resolved "https://registry.npm.taobao.org/react-syntax-highlighter/download/react-syntax-highlighter-11.0.2.tgz?cache=0&sync_timestamp=1576493296354&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-syntax-highlighter%2Fdownload%2Freact-syntax-highlighter-11.0.2.tgz#4e3f376e752b20d2f54e4c55652fd663149e4029"
+  integrity sha1-Tj83bnUrINL1TkxVZS/WYxSeQCk=
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "~9.13.0"
+    lowlight "~1.11.0"
+    prismjs "^1.8.4"
+    refractor "^2.4.1"
+
 react-syntax-highlighter@^8.0.1:
   version "8.1.0"
   resolved "https://registry.npm.taobao.org/react-syntax-highlighter/download/react-syntax-highlighter-8.1.0.tgz?cache=0&sync_timestamp=1576493296354&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-syntax-highlighter%2Fdownload%2Freact-syntax-highlighter-8.1.0.tgz#59103ff17a828a27ed7c8f035ae2558f09b6b78c"
   resolved "https://registry.npm.taobao.org/store2/download/store2-2.10.0.tgz#46b82bb91878daf1b0d56dec2f1d41e54d5103cf"
   integrity sha1-RrgruRh42vGw1W3sLx1B5U1RA88=
 
+storybook-addon-themes@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.npm.taobao.org/storybook-addon-themes/download/storybook-addon-themes-5.3.0.tgz#016be7c071401904ecb87acca4cdf8a777d23774"
+  integrity sha1-AWvnwHFAGQTsuHrMpM34p3fSN3Q=
+  dependencies:
+    "@storybook/addons" "^5.1.0-rc.5"
+    "@storybook/client-logger" "^5.1.0-rc.5"
+    "@storybook/components" "^5.1.0-rc.5"
+    "@storybook/core-events" "^5.1.0-rc.5"
+    "@storybook/theming" "^5.1.0-rc.5"
+    core-js "^2.6.5"
+    global "^4.3.2"
+    memoizerific "^1.11.3"
+    util-deprecate "^1.0.2"
+
 storybook-readme@^5.0.8:
   version "5.0.8"
   resolved "https://registry.npm.taobao.org/storybook-readme/download/storybook-readme-5.0.8.tgz#bc5bb9343191bb333cec2633555cec41f3ab6067"
   resolved "https://registry.npm.taobao.org/tapable/download/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha1-ofzMBrWNth/XpF2i2kT186Pme6I=
 
-telejson@^3.0.2:
+telejson@^3.0.2, telejson@^3.2.0:
   version "3.3.0"
   resolved "https://registry.npm.taobao.org/telejson/download/telejson-3.3.0.tgz#6d814f3c0d254d5c4770085aad063e266b56ad03"
   integrity sha1-bYFPPA0lTVxHcAharQY+JmtWrQM=
   dependencies:
     punycode "^2.1.0"
 
+ts-dedent@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.npm.taobao.org/ts-dedent/download/ts-dedent-1.1.1.tgz#68fad040d7dbd53a90f545b450702340e17d18f3"
+  integrity sha1-aPrQQNfb1TqQ9UW0UHAjQOF9GPM=
+
 ts-loader@^6.2.1:
   version "6.2.1"
   resolved "https://registry.npm.taobao.org/ts-loader/download/ts-loader-6.2.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fts-loader%2Fdownload%2Fts-loader-6.2.1.tgz#67939d5772e8a8c6bdaf6277ca023a4812da02ef"
   resolved "https://registry.npm.taobao.org/ts-pnp/download/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec"
   integrity sha1-hA4HOcifzl86vZA3uwkdv/Ftnew=
 
-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.10.0"
   resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha1-w8GflZc/sKYpc/sJ2Q2WHuQ+XIo=
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-callback-ref@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npm.taobao.org/use-callback-ref/download/use-callback-ref-1.2.1.tgz#898759ccb9e14be6c7a860abafa3ffbd826c89bb"
+  integrity sha1-iYdZzLnhS+bHqGCrr6P/vYJsibs=
+
+use-sidecar@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/use-sidecar/download/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6"
+  integrity sha1-5y9YKnWEL33k74vs1iNaRyCtivY=
+  dependencies:
+    detect-node "^2.0.4"
+    tslib "^1.9.3"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npm.taobao.org/use/download/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"