From 063867cc26f550454d8c206720ff98a88b992276 Mon Sep 17 00:00:00 2001 From: meriadec Date: Thu, 8 Mar 2018 14:27:37 +0100 Subject: [PATCH] Integrate i18n in storybook --- .storybook/config.js | 10 +++++-- .storybook/webpack.config.js | 13 +++++++++ package.json | 3 +- src/components/App.js | 2 +- src/renderer/events.js | 2 +- src/renderer/i18n.js | 41 -------------------------- src/renderer/i18n/electron.js | 11 +++++++ src/renderer/i18n/instanciate.js | 49 ++++++++++++++++++++++++++++++++ src/renderer/i18n/storybook.js | 20 +++++++++++++ yarn.lock | 8 +++++- 10 files changed, 111 insertions(+), 48 deletions(-) create mode 100644 .storybook/webpack.config.js delete mode 100644 src/renderer/i18n.js create mode 100644 src/renderer/i18n/electron.js create mode 100644 src/renderer/i18n/instanciate.js create mode 100644 src/renderer/i18n/storybook.js diff --git a/.storybook/config.js b/.storybook/config.js index fb6a875b..6ee5a24c 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -3,11 +3,13 @@ import { configure, addDecorator } from '@storybook/react' import { withKnobs } from '@storybook/addon-knobs' import { setOptions } from '@storybook/addon-options' import { ThemeProvider } from 'styled-components' +import { I18nextProvider } from 'react-i18next' import 'globals' import 'styles/global' import theme from 'styles/theme' +import i18n from 'renderer/i18n/storybook' const req = require.context('../src', true, /.stories.js$/) function loadStories() { @@ -15,9 +17,11 @@ function loadStories() { } addDecorator(story => ( - -
{story()}
- + + +
{story()}
+ + )) addDecorator(withKnobs) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js new file mode 100644 index 00000000..62f80fb7 --- /dev/null +++ b/.storybook/webpack.config.js @@ -0,0 +1,13 @@ +const path = require('path') + +module.exports = { + module: { + rules: [ + { + test: /\.yml$/, + loaders: ['json-loader', 'yaml-loader'], + include: path.resolve(__dirname, '../static/i18n'), + }, + ], + }, +} diff --git a/package.json b/package.json index bfa9fdf7..0fc16412 100644 --- a/package.json +++ b/package.json @@ -138,6 +138,7 @@ "react-hot-loader": "^4.0.0", "react-test-renderer": "^16.2.0", "webpack": "^3.11.0", - "webpack-bundle-analyzer": "^2.11.1" + "webpack-bundle-analyzer": "^2.11.1", + "yaml-loader": "^0.5.0" } } diff --git a/src/components/App.js b/src/components/App.js index bec57464..5b299d2c 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -9,7 +9,7 @@ import { I18nextProvider } from 'react-i18next' import theme from 'styles/theme' -import i18n from 'renderer/i18n' +import i18n from 'renderer/i18n/electron' import Default from 'components/layout/Default' import Dev from 'components/layout/Dev' diff --git a/src/renderer/events.js b/src/renderer/events.js index 675f19fe..02666dc0 100644 --- a/src/renderer/events.js +++ b/src/renderer/events.js @@ -14,7 +14,7 @@ import { setUpdateStatus } from 'reducers/update' import { getAccounts, getAccountById } from 'reducers/accounts' import { isLocked } from 'reducers/application' -import i18n from 'renderer/i18n' +import i18n from 'renderer/i18n/electron' const d = { device: debug('lwd:device'), diff --git a/src/renderer/i18n.js b/src/renderer/i18n.js deleted file mode 100644 index ecbcd1e5..00000000 --- a/src/renderer/i18n.js +++ /dev/null @@ -1,41 +0,0 @@ -// @flow - -import i18n from 'i18next' -import path from 'path' -import Backend from 'i18next-node-fs-backend' - -import staticPath from 'helpers/staticPath' - -i18n.use(Backend).init({ - ns: [ - 'account', - 'accountsOrder', - 'addAccount', - 'common', - 'dashboard', - 'device', - 'language', - 'receive', - 'send', - 'settings', - 'sidebar', - 'time', - 'transactionsList', - 'update', - ], - fallbackLng: 'en', - debug: false, - backend: { - loadPath: path.join(staticPath, '/i18n/{{lng}}/{{ns}}.yml'), - }, - react: { - wait: true, - }, -}) - -i18n.services.pluralResolver.addRule('en', { - numbers: [0, 1, 'plural'], - plurals: n => Number(n >= 2 ? 2 : n), -}) - -export default i18n diff --git a/src/renderer/i18n/electron.js b/src/renderer/i18n/electron.js new file mode 100644 index 00000000..928a92a5 --- /dev/null +++ b/src/renderer/i18n/electron.js @@ -0,0 +1,11 @@ +// @flow + +import path from 'path' +import FSBackend from 'i18next-node-fs-backend' + +import staticPath from 'helpers/staticPath' +import { createWithBackend } from './instanciate' + +export default createWithBackend(FSBackend, { + loadPath: path.join(staticPath, '/i18n/{{lng}}/{{ns}}.yml'), +}) diff --git a/src/renderer/i18n/instanciate.js b/src/renderer/i18n/instanciate.js new file mode 100644 index 00000000..35edd84e --- /dev/null +++ b/src/renderer/i18n/instanciate.js @@ -0,0 +1,49 @@ +import i18n from 'i18next' + +const commonConfig = { + ns: [ + 'account', + 'accountsOrder', + 'addAccount', + 'common', + 'dashboard', + 'device', + 'language', + 'receive', + 'send', + 'settings', + 'sidebar', + 'time', + 'transactionsList', + 'update', + ], + fallbackLng: 'en', + debug: false, + react: { + wait: true, + }, +} + +function addPluralRule(i18n) { + i18n.services.pluralResolver.addRule('en', { + numbers: [0, 1, 'plural'], + plurals: n => Number(n >= 2 ? 2 : n), + }) + return i18n +} + +export function createWithBackend(backend, backendOpts) { + i18n.use(backend).init({ + ...commonConfig, + backend: backendOpts, + }) + return addPluralRule(i18n) +} + +export function createWithResources(resources) { + i18n.init({ + ...commonConfig, + resources, + }) + return addPluralRule(i18n) +} diff --git a/src/renderer/i18n/storybook.js b/src/renderer/i18n/storybook.js new file mode 100644 index 00000000..1f875ef7 --- /dev/null +++ b/src/renderer/i18n/storybook.js @@ -0,0 +1,20 @@ +import { createWithResources } from './instanciate' + +const resources = { + account: require('../../../static/i18n/en/account.yml'), + accountsOrder: require('../../../static/i18n/en/accountsOrder.yml'), + addAccount: require('../../../static/i18n/en/addAccount.yml'), + common: require('../../../static/i18n/en/common.yml'), + dashboard: require('../../../static/i18n/en/dashboard.yml'), + device: require('../../../static/i18n/en/device.yml'), + language: require('../../../static/i18n/en/language.yml'), + receive: require('../../../static/i18n/en/receive.yml'), + send: require('../../../static/i18n/en/send.yml'), + settings: require('../../../static/i18n/en/settings.yml'), + sidebar: require('../../../static/i18n/en/sidebar.yml'), + time: require('../../../static/i18n/en/time.yml'), + transactionsList: require('../../../static/i18n/en/transactionsList.yml'), + update: require('../../../static/i18n/en/update.yml'), +} + +export default createWithResources({ en: resources }) diff --git a/yarn.lock b/yarn.lock index 09d0b9b6..fab7bc29 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6128,7 +6128,7 @@ js-yaml@3.5.4: argparse "^1.0.2" esprima "^2.6.0" -js-yaml@^3.10.0, js-yaml@^3.11.0, js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.0, js-yaml@^3.9.1: +js-yaml@^3.10.0, js-yaml@^3.11.0, js-yaml@^3.4.3, js-yaml@^3.5.2, js-yaml@^3.7.0, js-yaml@^3.9.0, js-yaml@^3.9.1: version "3.11.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef" dependencies: @@ -10721,6 +10721,12 @@ yallist@^2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52" +yaml-loader@^0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/yaml-loader/-/yaml-loader-0.5.0.tgz#86b1982d84a8e429e6647d93de9a0169e1c15827" + dependencies: + js-yaml "^3.5.2" + yargs-parser@^2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"