1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00

storybook - i18n toolbar (#10381)

* storybook - i18n toolbar

* lint fix
This commit is contained in:
kumavis 2021-02-06 10:28:54 +08:00 committed by GitHub
parent 531c35bc96
commit b0215738a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 342 additions and 20 deletions

57
.storybook/i18n.js Normal file
View File

@ -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;
}
}

58
.storybook/locales.js Normal file
View File

@ -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 };

View File

@ -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

View File

@ -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)

View File

@ -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",

189
yarn.lock
View File

@ -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==