Integrate i18n in storybook

.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 => (
-  <ThemeProvider theme={theme}>
-    <div style={{ padding: 20 }}>{story()}</div>
-  </ThemeProvider>
+  <I18nextProvider i18n={i18n} initialLanguage="en">
+    <ThemeProvider theme={theme}>
+      <div style={{ padding: 20 }}>{story()}</div>
+    </ThemeProvider>
+  </I18nextProvider>
 ))
 
 addDecorator(withKnobs)

.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'),
+      },
+    ],
+  },
+}

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"
   }
 }

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'

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'),

src/renderer/i18n.js

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

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'),
+})

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)
+}

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

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"