From b0215738a295024d39ac3dc7d7b6c9d7b5f44f2e Mon Sep 17 00:00:00 2001
From: kumavis <kumavis@users.noreply.github.com>
Date: Sat, 6 Feb 2021 10:28:54 +0800
Subject: [PATCH] storybook - i18n toolbar (#10381)

* storybook - i18n toolbar

* lint fix
---
 .storybook/i18n.js    |  57 +++++++++++++
 .storybook/locales.js |  58 +++++++++++++
 .storybook/main.js    |   1 +
 .storybook/preview.js |  56 ++++++++-----
 package.json          |   1 +
 yarn.lock             | 189 +++++++++++++++++++++++++++++++++++++++++-
 6 files changed, 342 insertions(+), 20 deletions(-)
 create mode 100644 .storybook/i18n.js
 create mode 100644 .storybook/locales.js

diff --git a/.storybook/i18n.js b/.storybook/i18n.js
new file mode 100644
index 000000000..9eadca331
--- /dev/null
+++ b/.storybook/i18n.js
@@ -0,0 +1,57 @@
+import React, { Component, createContext, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { getMessage } from '../ui/app/helpers/utils/i18n-helper';
+import { I18nContext } from '../ui/app/contexts/i18n';
+
+export { I18nContext }
+
+export const I18nProvider = (props) => {
+  const { currentLocale, current, en } = props
+
+  const t = useMemo(() => {
+    return (key, ...args) =>
+      getMessage(currentLocale, current, key, ...args) ||
+      getMessage(currentLocale, en, key, ...args);
+  }, [currentLocale, current, en]);
+
+  return (
+    <I18nContext.Provider value={t}>{props.children}</I18nContext.Provider>
+  );
+};
+
+I18nProvider.propTypes = {
+  currentLocale: PropTypes.string,
+  current: PropTypes.object,
+  en: PropTypes.object,
+  children: PropTypes.node,
+};
+
+I18nProvider.defaultProps = {
+  children: undefined,
+};
+
+export class LegacyI18nProvider extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+  };
+
+  static defaultProps = {
+    children: undefined,
+  };
+
+  static contextType = I18nContext;
+
+  static childContextTypes = {
+    t: PropTypes.func,
+  };
+
+  getChildContext() {
+    return {
+      t: this.context,
+    };
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
diff --git a/.storybook/locales.js b/.storybook/locales.js
new file mode 100644
index 000000000..1e92f94d8
--- /dev/null
+++ b/.storybook/locales.js
@@ -0,0 +1,58 @@
+import * as am from '../app/_locales/am/messages.json';
+import * as ar from '../app/_locales/ar/messages.json';
+import * as bg from '../app/_locales/bg/messages.json';
+import * as bn from '../app/_locales/bn/messages.json';
+import * as ca from '../app/_locales/ca/messages.json';
+import * as cs from '../app/_locales/cs/messages.json';
+import * as da from '../app/_locales/da/messages.json';
+import * as de from '../app/_locales/de/messages.json';
+import * as el from '../app/_locales/el/messages.json';
+import * as en from '../app/_locales/en/messages.json';
+import * as es from '../app/_locales/es/messages.json';
+import * as es_419 from '../app/_locales/es_419/messages.json';
+import * as et from '../app/_locales/et/messages.json';
+import * as fa from '../app/_locales/fa/messages.json';
+import * as fi from '../app/_locales/fi/messages.json';
+import * as fil from '../app/_locales/fil/messages.json';
+import * as fr from '../app/_locales/fr/messages.json';
+import * as gu from '../app/_locales/gu/messages.json';
+import * as he from '../app/_locales/he/messages.json';
+import * as hi from '../app/_locales/hi/messages.json';
+import * as hn from '../app/_locales/hn/messages.json';
+import * as hr from '../app/_locales/hr/messages.json';
+import * as ht from '../app/_locales/ht/messages.json';
+import * as hu from '../app/_locales/hu/messages.json';
+import * as id from '../app/_locales/id/messages.json';
+import * as it from '../app/_locales/it/messages.json';
+import * as ja from '../app/_locales/ja/messages.json';
+import * as kn from '../app/_locales/kn/messages.json';
+import * as ko from '../app/_locales/ko/messages.json';
+import * as lt from '../app/_locales/lt/messages.json';
+import * as lv from '../app/_locales/lv/messages.json';
+import * as ml from '../app/_locales/ml/messages.json';
+import * as mr from '../app/_locales/mr/messages.json';
+import * as ms from '../app/_locales/ms/messages.json';
+import * as nl from '../app/_locales/nl/messages.json';
+import * as no from '../app/_locales/no/messages.json';
+import * as ph from '../app/_locales/ph/messages.json';
+import * as pl from '../app/_locales/pl/messages.json';
+import * as pt from '../app/_locales/pt/messages.json';
+import * as pt_BR from '../app/_locales/pt_BR/messages.json';
+import * as pt_PT from '../app/_locales/pt_PT/messages.json';
+import * as ro from '../app/_locales/ro/messages.json';
+import * as ru from '../app/_locales/ru/messages.json';
+import * as sk from '../app/_locales/sk/messages.json';
+import * as sl from '../app/_locales/sl/messages.json';
+import * as sr from '../app/_locales/sr/messages.json';
+import * as sv from '../app/_locales/sv/messages.json';
+import * as sw from '../app/_locales/sw/messages.json';
+import * as ta from '../app/_locales/ta/messages.json';
+import * as te from '../app/_locales/te/messages.json';
+import * as th from '../app/_locales/th/messages.json';
+import * as tr from '../app/_locales/tr/messages.json';
+import * as uk from '../app/_locales/uk/messages.json';
+import * as vi from '../app/_locales/vi/messages.json';
+import * as zh_CN from '../app/_locales/zh_CN/messages.json';
+import * as zh_TW from '../app/_locales/zh_TW/messages.json';
+
+export { am, ar, bg, bn, ca, cs, da, de, el, en, es, es_419, et, fa, fi, fil, fr, gu, he, hi, hn, hr, ht, hu, id, it, ja, kn, ko, lt, lv, ml, mr, ms, nl, no, ph, pl, pt, pt_BR, pt_PT, ro, ru, sk, sl, sr, sv, sw, ta, te, th, tr, uk, vi, zh_CN, zh_TW };
\ No newline at end of file
diff --git a/.storybook/main.js b/.storybook/main.js
index 8b1860ee5..b2ff41a8e 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -8,6 +8,7 @@ module.exports = {
     '@storybook/addon-knobs',
     '@storybook/addon-actions',
     '@storybook/addon-backgrounds',
+    '@storybook/addon-toolbars',
   ],
   webpackFinal: async (config) => {
     config.module.strictExportPresence = true
diff --git a/.storybook/preview.js b/.storybook/preview.js
index c3115997c..8c6c910cf 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,11 +1,12 @@
 import React from 'react'
 import { addDecorator, addParameters } from '@storybook/react'
 import { withKnobs } from '@storybook/addon-knobs'
-import { I18nProvider, LegacyI18nProvider } from '../ui/app/contexts/i18n'
 import { Provider } from 'react-redux'
 import configureStore from '../ui/app/store/store'
 import '../ui/app/css/index.scss'
-import en from '../app/_locales/en/messages'
+import localeList from '../app/_locales/index.json'
+import * as allLocales from './locales'
+import { I18nProvider, LegacyI18nProvider } from './i18n'
 
 addParameters({
   backgrounds: {
@@ -17,6 +18,20 @@ addParameters({
   }
 })
 
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: localeList.map(({ code, name }) => {
+        return { value: code, right: code, title: name }
+      })
+    },
+  },
+};
+
 const styles = {
   height: '100vh',
   display: 'flex',
@@ -25,25 +40,28 @@ const styles = {
 }
 
 const store = configureStore({
-  metamask: { metamask: { currentLocale: 'en' } },
-
-  localeMessages: {
-    current: en,
-    en: en,
-  },
+  metamask: { metamask: { } },
 })
 
-const metamaskDecorator = story => (
-  <Provider store={store}>
-    <I18nProvider>
-      <LegacyI18nProvider>
-        <div style={styles}>
-          { story() }
-        </div>
-      </LegacyI18nProvider>
-    </I18nProvider>
-  </Provider>
-)
+const metamaskDecorator = (story, context) => {
+  const currentLocale = context.globals.locale
+  const current = allLocales[currentLocale]
+  return (
+    <Provider store={store}>
+      <I18nProvider
+        currentLocale={currentLocale}
+        current={current}
+        en={allLocales.en}
+      >
+        <LegacyI18nProvider>
+          <div style={styles}>
+            { story() }
+          </div>
+        </LegacyI18nProvider>
+      </I18nProvider>
+    </Provider>
+  )
+}
 
 addDecorator(withKnobs)
 addDecorator(metamaskDecorator)
diff --git a/package.json b/package.json
index a0e1886c6..93b8b7a72 100644
--- a/package.json
+++ b/package.json
@@ -200,6 +200,7 @@
     "@storybook/addon-actions": "^6.1.9",
     "@storybook/addon-backgrounds": "^6.1.9",
     "@storybook/addon-knobs": "^6.1.9",
+    "@storybook/addon-toolbars": "^6.1.17",
     "@storybook/core": "^6.1.9",
     "@storybook/react": "^6.1.9",
     "@storybook/storybook-deployer": "^2.8.6",
diff --git a/yarn.lock b/yarn.lock
index fff1a8a76..21f567b93 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -269,6 +269,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
   integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
 
+"@babel/helper-plugin-utils@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz#174254d0f2424d8aefb4dd48057511247b0a9eeb"
+  integrity sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA==
+
 "@babel/helper-remap-async-to-generator@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.12.1.tgz#8c4dbbf916314f6047dc05e6a2217074238347fd"
@@ -546,6 +551,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-syntax-module-string-names@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-module-string-names/-/plugin-syntax-module-string-names-7.12.13.tgz#2188abd8cb621b0446c9626acb54f7aea2527fd1"
+  integrity sha512-EEoEqJqlqbcwut6727/w9NJs4grtDsICI1Z/805Rr4E5bTo6kLqHvf8meDc8/da346fl2kxIQlqrmnyU6+3pyw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
 "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
@@ -2472,6 +2484,32 @@
     react-select "^3.0.8"
     regenerator-runtime "^0.13.7"
 
+"@storybook/addon-toolbars@^6.1.17":
+  version "6.1.17"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.1.17.tgz#15a015dc871e26be66340b5641631e649925c5e2"
+  integrity sha512-hEH4MFNbhCOzHs9yB+V+GH9FHD5MN7dxUfLFYM1tuZPqtotgfrYwCBUTy8m/tSxyOOSM+Y1BSHBozt2h7D23eA==
+  dependencies:
+    "@storybook/addons" "6.1.17"
+    "@storybook/api" "6.1.17"
+    "@storybook/client-api" "6.1.17"
+    "@storybook/components" "6.1.17"
+    core-js "^3.0.1"
+
+"@storybook/addons@6.1.17":
+  version "6.1.17"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.1.17.tgz#ab0666446acb9fc19c94d7204dc9aafdefb6c7c2"
+  integrity sha512-3upDPJPzUkls2V3Fozzg+JOcv138bF90pbdRe9YSNu37QvRIL+iQODY7oFygMl+kqjG2F1FGw5EvxAV1mnlwCw==
+  dependencies:
+    "@storybook/api" "6.1.17"
+    "@storybook/channels" "6.1.17"
+    "@storybook/client-logger" "6.1.17"
+    "@storybook/core-events" "6.1.17"
+    "@storybook/router" "6.1.17"
+    "@storybook/theming" "6.1.17"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/addons@6.1.9":
   version "6.1.9"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.1.9.tgz#78f3cb27b7d934f091f311f89b6ca312d34f12b8"
@@ -2487,6 +2525,31 @@
     global "^4.3.2"
     regenerator-runtime "^0.13.7"
 
+"@storybook/api@6.1.17":
+  version "6.1.17"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.1.17.tgz#50393ce9b718063b67680212df895eceacc0c11d"
+  integrity sha512-sthcfuk2EQ3F5R620PBqpI4Pno3g7KQm6YPZA0DXB+LD/z61xH9ToE1gTLF4nzlE6HwghwkXOZyRwDowRdG+7A==
+  dependencies:
+    "@reach/router" "^1.3.3"
+    "@storybook/channels" "6.1.17"
+    "@storybook/client-logger" "6.1.17"
+    "@storybook/core-events" "6.1.17"
+    "@storybook/csf" "0.0.1"
+    "@storybook/router" "6.1.17"
+    "@storybook/semver" "^7.3.2"
+    "@storybook/theming" "6.1.17"
+    "@types/reach__router" "^1.3.7"
+    core-js "^3.0.1"
+    fast-deep-equal "^3.1.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    regenerator-runtime "^0.13.7"
+    store2 "^2.7.1"
+    telejson "^5.0.2"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/api@6.1.9":
   version "6.1.9"
   resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.1.9.tgz#3f9bf00b2b18fa02965079fe775bd713677b30a3"
@@ -2512,6 +2575,19 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/channel-postmessage@6.1.17":
+  version "6.1.17"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.1.17.tgz#309ce67c94637ec13319d4ce360a8f3742ddbaf4"
+  integrity sha512-2nVqxq4oZdSITqhFOnkh1rmDMjCwHuobnK5Fp3l7ftCkbmiZHMheKK9Tz4Rb803dhXvcGYs0zRS8NjKyxlOLsA==
+  dependencies:
+    "@storybook/channels" "6.1.17"
+    "@storybook/client-logger" "6.1.17"
+    "@storybook/core-events" "6.1.17"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    qs "^6.6.0"
+    telejson "^5.0.2"
+
 "@storybook/channel-postmessage@6.1.9":
   version "6.1.9"
   resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.1.9.tgz#5d73c67ba94bcf68b14138bba6c5bb0850c72c5e"
@@ -2525,6 +2601,15 @@
     qs "^6.6.0"
     telejson "^5.0.2"
 
+"@storybook/channels@6.1.17":
+  version "6.1.17"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.1.17.tgz#2cc89a6b9727d19c24b15fa3cb15569b469db864"
+  integrity sha512-MUdj0eKr/AbxevHTSXX7AsgxAz6e5O4ZxoYX5G8ggoqSXrWzws6zRFmUmmTdjpIvVmP2M1Kh4SYFAKcS/AGw9w==
+  dependencies:
+    core-js "^3.0.1"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/channels@6.1.9":
   version "6.1.9"
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.1.9.tgz#94f07ff3615b11c07d1902be6b6cd298c0eea55c"
@@ -2534,6 +2619,30 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/client-api@6.1.17":
+  version "6.1.17"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.1.17.tgz#3ced22f08a47af70ccf8929111bc44b79e9e8ec0"
+  integrity sha512-Loz/wdh0axgq0PS19tx0tGEFEkFWlYc6YauJGHjygYa1xX7mJ54hDoaTolySCXN1HtfZn08D847yjGSN2oIqVg==
+  dependencies:
+    "@storybook/addons" "6.1.17"
+    "@storybook/channel-postmessage" "6.1.17"
+    "@storybook/channels" "6.1.17"
+    "@storybook/client-logger" "6.1.17"
+    "@storybook/core-events" "6.1.17"
+    "@storybook/csf" "0.0.1"
+    "@types/qs" "^6.9.0"
+    "@types/webpack-env" "^1.15.3"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
+    regenerator-runtime "^0.13.7"
+    stable "^0.1.8"
+    store2 "^2.7.1"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/client-api@6.1.9":
   version "6.1.9"
   resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.1.9.tgz#d4a8d38bc657f26e4837831b961e085da1954d51"
@@ -2558,6 +2667,14 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/client-logger@6.1.17":
+  version "6.1.17"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.1.17.tgz#0d89aaf824457f19bf9aa585bbcada57595e7d01"
+  integrity sha512-oqExrxhmws0ihB47sjdynZHd3OpUP4KWkx4udG+74lYIvBH+EZmQ9xF+UofeY3j5p1I9k8ugEcVKy0sqh1yR3w==
+  dependencies:
+    core-js "^3.0.1"
+    global "^4.3.2"
+
 "@storybook/client-logger@6.1.9":
   version "6.1.9"
   resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.1.9.tgz#1d61a64000d4691780d75e19b78fd44adfdb5d9c"
@@ -2566,6 +2683,32 @@
     core-js "^3.0.1"
     global "^4.3.2"
 
+"@storybook/components@6.1.17":
+  version "6.1.17"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.1.17.tgz#f92d36e370ec6039d8c7cee9ef13dda866eed3da"
+  integrity sha512-rIEll0UTxEKmG4IsSS5K+6DjRLVtX8J+9cg79GSAC7N1ZHUR1UQmjjJaehJa5q/NQ5H8C39acxpT4Py/BcsL2g==
+  dependencies:
+    "@popperjs/core" "^2.5.4"
+    "@storybook/client-logger" "6.1.17"
+    "@storybook/csf" "0.0.1"
+    "@storybook/theming" "6.1.17"
+    "@types/overlayscrollbars" "^1.9.0"
+    "@types/react-color" "^3.0.1"
+    "@types/react-syntax-highlighter" "11.0.4"
+    core-js "^3.0.1"
+    fast-deep-equal "^3.1.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    markdown-to-jsx "^6.11.4"
+    memoizerific "^1.11.3"
+    overlayscrollbars "^1.10.2"
+    polished "^3.4.4"
+    react-color "^2.17.0"
+    react-popper-tooltip "^3.1.1"
+    react-syntax-highlighter "^13.5.0"
+    react-textarea-autosize "^8.1.1"
+    ts-dedent "^2.0.0"
+
 "@storybook/components@6.1.9":
   version "6.1.9"
   resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.1.9.tgz#f25d18f3a410cc7e9549ddb3c971c40d9108d4d8"
@@ -2592,6 +2735,13 @@
     react-textarea-autosize "^8.1.1"
     ts-dedent "^2.0.0"
 
+"@storybook/core-events@6.1.17":
+  version "6.1.17"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.1.17.tgz#697ed916fcb2a411bc9f8bdbfacd0eb9d394eb58"
+  integrity sha512-xBI7kmyROcqhYNmFv4QBjD77CzV+k/0F051YFS5WicEI4qDWPPvzaShhm96ZrGobUX3+di4pC11gqdsrFeNCEg==
+  dependencies:
+    core-js "^3.0.1"
+
 "@storybook/core-events@6.1.9":
   version "6.1.9"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.1.9.tgz#0a88281837d1aa657a93a9abf7f5aad65b8d68e7"
@@ -2751,6 +2901,18 @@
     ts-dedent "^2.0.0"
     webpack "^4.44.2"
 
+"@storybook/router@6.1.17":
+  version "6.1.17"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.1.17.tgz#96746878c50c6c97c7de5a1b23a9503c5d648775"
+  integrity sha512-wLqSOB5yLXgNyDGy008RUvjVRtVMq7lhmMRicSIxgJpkakPrMRN8n/nK7pxgQc/xDTphnS0u1nT01i97WszhCg==
+  dependencies:
+    "@reach/router" "^1.3.3"
+    "@types/reach__router" "^1.3.7"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
+
 "@storybook/router@6.1.9":
   version "6.1.9"
   resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.1.9.tgz#c0b24dc3ab53d58541b81c7abea2f11d7fbbebf6"
@@ -2782,6 +2944,24 @@
     shelljs "^0.8.1"
     yargs "^15.0.0"
 
+"@storybook/theming@6.1.17":
+  version "6.1.17"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.1.17.tgz#99cc120a230c30458d833b40c806b9b4dff7b34a"
+  integrity sha512-LpRuY2aIh2td+qZi7E8cp2oM88LudNMmTsBT6N2/Id69u/a9qQd2cYCA9k9fAsg7rjor+wR/N695jk3SGtoFTw==
+  dependencies:
+    "@emotion/core" "^10.1.1"
+    "@emotion/is-prop-valid" "^0.8.6"
+    "@emotion/styled" "^10.0.23"
+    "@storybook/client-logger" "6.1.17"
+    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.4.4"
+    resolve-from "^5.0.0"
+    ts-dedent "^2.0.0"
+
 "@storybook/theming@6.1.9":
   version "6.1.9"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.1.9.tgz#8c584aa623f3d6e33b1e3b3de2ec1f41bdc5d9ab"
@@ -3144,6 +3324,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/reach__router@^1.3.7":
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.3.7.tgz#de8ab374259ae7f7499fc1373b9697a5f3cd6428"
+  integrity sha512-cyBEb8Ef3SJNH5NYEIDGPoMMmYUxROatuxbICusVRQIqZUB85UCt6R2Ok60tKS/TABJsJYaHyNTW3kqbpxlMjg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-color@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.1.tgz#5433e2f503ea0e0831cbc6fd0c20f8157d93add0"
@@ -21378,7 +21565,7 @@ react-motion@^0.5.2:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
-react-popper-tooltip@^3.1.0:
+react-popper-tooltip@^3.1.0, react-popper-tooltip@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz#329569eb7b287008f04fcbddb6370452ad3f9eac"
   integrity sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==