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 ( + {props.children} + ); +}; + +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 => ( - - - -
- { story() } -
-
-
-
-) +const metamaskDecorator = (story, context) => { + const currentLocale = context.globals.locale + const current = allLocales[currentLocale] + return ( + + + +
+ { story() } +
+
+
+
+ ) +} 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==