Merge branch 'master' into feature/extensions-panels-and-docs

2019-06-14 20:45:00 -04:00 · 2019-06-14 20:45:00 -04:00 · df2a984cd3
commit df2a984cd3
parent 89b1ce4a4e 04e00fad20
39 changed files with 6178 additions and 37 deletions
--- a/docs/latest/SUMMARY.md
+++ b/docs/latest/SUMMARY.md
@ -6,6 +6,7 @@
  - [Data Source](essentials/data-source.md)
  - [Configuration](essentials/configuration.md)
  - [Themeing](essentials/themeing.md)
+  - [Translating](essentials/translating.md)
  - [Troubleshooting](essentials/troubleshooting.md)
 - [Scope of Project](essentials/scope-of-project.md)

--- a/docs/latest/essentials/translating.md
+++ b/docs/latest/essentials/translating.md
@ -0,0 +1,264 @@
+# Translating
+
+OHIF supports internationalization using [i18next](https://www.i18next.com/)
+through the npm package [@ohif/i18n](https://www.npmjs.com/package/@ohif/i18n),
+where is the main instance of i18n containing several languages and tools.
+
+### Installing
+
+```bash
+yarn add @ohif/i18n
+
+# OR
+
+npm install --save @ohif/i18n
+```
+
+### How it works
+
+After installing `@ohif/i18n` npm package, the translation function
+[t](https://www.i18next.com/overview/api#t) can be used [with](#with-react) or
+[without](#without-react) React.
+
+A translation will occur every time a text match happens in a
+[t](https://www.i18next.com/overview/api#t) function.
+
+The [t](https://www.i18next.com/overview/api#t) function is responsible for
+getting translations using all the power of i18next.
+
+E.g.
+
+Before:
+
+```html
+<div>my translated text</div>
+```
+
+After:
+
+```html
+<div>{t('my translated text')}</div>
+```
+
+If the translation.json file contains a key that matches the HTML content e.g.
+`my translated text`, it will be replaced automatically by the
+[t](https://www.i18next.com/overview/api#t) function.
+
+---
+
+#### With React
+
+This section will introduce you to [react-i18next](https://react.i18next.com/)
+basics and show how to implement the [t](https://www.i18next.com/overview/api#t)
+function easily.
+
+##### Using HOCs
+
+In most cases we used
+[High Order Components](https://react.i18next.com/latest/withtranslation-hoc) to
+share the `t` function among OHIF's components.
+
+E.g.
+
+```js
+import React from 'react';
+import { withTranslation } from '@ohif/i18n';
+
+function MyComponent({ t, i18n }) {
+  return <p>{t('my translated text')}</p>;
+}
+
+export default withTranslation('MyNameSpace')(MyComponent);
+```
+
+> Important: if you are using React outside the OHIF Viewer, check the
+> [I18nextProvider](#using-outside-of-ohif-viewer) section, `withTranslation`
+> HOC doesnt works without a I18nextProvider
+
+##### Using Hooks
+
+Also, it's possible to get the `t` tool using
+[React Hooks](https://react.i18next.com/latest/usetranslation-hook), but it
+requires at least React > 16.8 😉
+
+#### Using outside of OHIF viewer
+
+OHIF Viewer already sets a main
+[I18nextProvider](https://react.i18next.com/latest/i18nextprovider) connected to
+the shared i18n instance from `@ohif/i18n`, all extensions inside OHIF Viewer
+will share this same provider at the end, you don't need to set new providers at all.
+
+But, if you need to use it completely outside of OHIF viewer, you can set the
+I18nextProvider this way:
+
+```js
+import i18n, { I18nextProvider } from '@ohif/i18n';
+import App from './App';
+
+<I18nextProvider i18n={i18n}>
+  <App />
+</I18nextProvider>;
+```
+
+After setting `I18nextProvider` in your React App, all translations from
+`@ohif/i18n` should be available following the basic [With React](#with-react) usage.
+
+---
+
+#### Without React
+
+When needed, you can also use available translations _without React_.
+
+E.g.
+
+```js
+import { t } from '@ohif/i18n';
+console.log(t('my translated text'));
+console.log(t('$t(Common:Play) my translated text'));
+```
+
+---
+
+# Main Concepts While Translating
+
+## - Namespaces
+
+Namespaces are being used to organize translations in smaller portions, combined
+semantically or by use. Each `.json` file inside `@ohif/i18n` npm package
+becomes a new namespace automatically.
+
+- Buttons: All buttons translations
+- CineDialog: Translations for the toll tips inside the Cine Player Dialog
+- Common: all common jargons that can be reused like `t('$t(common:image)')`
+- Header: translations related to OHIF's Header Top Bar
+- MeasurementTable - Translations for the react-viewerbase Measurement Table
+- UserPreferencesModal - Translations for the react-viewerbase Preferences Modal
+
+### How to use another NameSpace inside the current NameSpace?
+i18next provides a parsing feature able to get translations strings from any NameSpace,
+ like this following example getting data from `Common` NameSpace:
+```
+$t(Common:Reset)
+```
+
+## - Extending Languages in @ohif/i18n
+
+Sometimes, even using the same language, some nouns or jargons can change according to 
+the country, states or even from Hospital to Hospital. 
+
+In this cases, you don't need to set an entire language again, you can extend languages creating a new folder inside a pre existent language folder and @ohif/i18n will do the hard work.
+
+This new folder must to be called with a double character name, like the `UK` in the following file tree:
+
+```bash
+ |-- src
+    |-- locales
+        |-- en
+            |-- Buttons.json
+            | UK
+               |-- Buttons.js
+            | US
+               |-- Buttons.js
+  ...
+```
+
+All properties inside a Namespace will be merged in the new sub language, e.g `en-US` and `en-UK` will merge the props with `en`.
+
+This feature is based on i18next's fallback languages tool.
+
+### - Extending languages dynamically
+
+Once you have access to the i18n instance, you can use the 
+[addResourceBundle](https://www.i18next.com/how-to/add-or-load-translations#add-after-init)
+method to add and change language resources.
+
+E.g.
+
+```js
+import { i18n } from '@ohif/i18n';
+i18next.addResourceBundle('pt-BR', 'Buttons', {
+  Angle: 'Ângulo',
+});
+```
+
+---
+
+### How to set a whole new language
+
+To set a brand new language you can do it in two different ways:
+
+- Opening a pull request for `@ohif/i18n` and sharing the translation with the
+  community. 😍 Please see [Contributing](#contributing-with-new-languages) section
+  for further information.
+  
+- Setting it only in your project or extension:
+
+You'll need a folder structure like the following, which you can load using the `node context` and send it to `addLocales` method.
+
+Folder structure:
+```bash
+ |-- ...
+ |-- src
+    |-- locales
+        |-- en
+            |-- Buttons.json
+        |-- es
+            | CO
+               |-- Buttons.js
+            |-- Buttons.json
+  ...
+```
+
+E.g. of `addLocales` usage
+```js
+import { addLocales } from '@ohif/i18n';
+
+const localesPath = './locales';
+const context = require.context(localesPath, true, /\.json$/);
+addLocales(context);
+```
+
+Also, [i18next](https://www.i18next.com/how-to/add-or-load-translations#add-after-init) provides a few methods to deal with languages, you have access to it's instance importing the default of @ohif/i18n;
+Fell fre to play around with i18next like this:
+
+```
+import i18next from '@ohif/i18n';
+
+i18next.addResourceBundle('en', 'namespace1', {
+  key: 'hello from namespace 1'
+});
+   
+```
+
+---
+
+## language Detections
+@ohif/i18n uses [i18next-browser-languageDetector](https://github.com/i18next/i18next-browser-languageDetector) to manage detections, also exports a method called initI18n that accepts a new detector config as parameter.
+
+### Changing the language
+OHIF Viewer accepts a query param called `lng` in the url to change the language.
+
+E.g. 
+```
+https://docs.ohif.org/demo/?lng=es-MX
+```
+
+### Language Persistence
+The user's language preference is kept automatically by the detector and stored at a cookie called 'i18next', and in a localstorage key called 'i18nextLng'. 
+These names can be changed with a new [Detector Config](https://github.com/i18next/i18next-browser-languageDetector).
+
+
+## Debugging translations
+
+There is an environment variable responsible for debugging the translations, called `REACT_APP_I18N_DEBUG`.
+
+Run the project as following to get full debug information:
+
+```bash
+REACT_APP_I18N_DEBUG=true yarn run dev
+```
+
+### Contributing with new languages
+
+Contributions of any kind are welcome! Please check the
+[instructions](https://docs.ohif.org/contributing.html).
--- a/extensions/ohif-i18n/.babelrc
+++ b/extensions/ohif-i18n/.babelrc
@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "ie": "11"
+      }
+    }],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime"
+  ]
+}
--- a/extensions/ohif-i18n/.editorconfig
+++ b/extensions/ohif-i18n/.editorconfig
@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
--- a/extensions/ohif-i18n/.gitignore
+++ b/extensions/ohif-i18n/.gitignore
@ -0,0 +1,26 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# builds
+build
+dist
+.rpt2_cache
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.idea
+
+yalc.lock
+.yalc
--- a/extensions/ohif-i18n/LICENSE
+++ b/extensions/ohif-i18n/LICENSE
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Open Health Imaging Foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/extensions/ohif-i18n/package.json
+++ b/extensions/ohif-i18n/package.json
@ -0,0 +1,86 @@
+{
+  "name": "@ohif/i18n",
+  "version": "0.0.4",
+  "description": "OHIF extension for internationalization",
+  "author": "OHIF",
+  "license": "MIT",
+  "repository": "OHIF/Viewers",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "jsnext:main": "dist/index.es.js",
+  "engines": {
+    "node": ">=8",
+    "npm": ">=5"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "i18next": "^17.0.3",
+    "i18next-browser-languagedetector": "^3.0.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-i18next": "^10.11.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-external-helpers": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.1",
+    "cross-env": "^5.2.0",
+    "eslint": "5.13.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-node": "^8.0.0",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-react": "^7.11.1",
+    "husky": "^1.3.1",
+    "i18next": "^15.1.3",
+    "i18next-browser-languagedetector": "^3.0.1",
+    "lint-staged": "^8.1.0",
+    "prettier": "^1.15.3",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-i18next": "^10.11.0",
+    "rollup": "^1.1.2",
+    "rollup-plugin-babel": "^4.2.0",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-copy": "^2.0.1",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-url": "^2.1.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,json,css}": [
+      "prettier --single-quote --write",
+      "git add"
+    ]
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.2.0",
+    "classnames": "^2.2.6",
+    "rollup-plugin-json": "^4.0.0"
+  }
+}
--- a/extensions/ohif-i18n/rollup.config.js
+++ b/extensions/ohif-i18n/rollup.config.js
@ -0,0 +1,72 @@
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+import external from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import resolve from 'rollup-plugin-node-resolve';
+import url from 'rollup-plugin-url';
+import pkg from './package.json';
+// Deal with https://github.com/rollup/rollup-plugin-commonjs/issues/297
+import builtins from 'rollup-plugin-node-builtins';
+import copy from 'rollup-plugin-copy';
+import json from 'rollup-plugin-json';
+
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'react-redux': 'ReactRedux',
+  'react-resize-detector': 'ReactResizeDetector',
+  'prop-types': 'PropTypes',
+  'i18next': 'i18next',
+  'react-i18next': 'react-i18next',
+  'i18next-browser-languagedetector': 'LngDetector'
+};
+
+export default {
+  input: 'src/index.js',
+  output: [
+    {
+      file: pkg.main,
+      format: 'umd',
+      name: 'ohif-i18n',
+      sourcemap: true,
+      globals,
+      exports: 'named',
+    },
+    {
+      file: pkg.module,
+      format: 'es',
+      sourcemap: true,
+      globals,
+      exports: 'named',
+    },
+  ],
+  plugins: [
+    builtins(),
+    external(),
+    postcss({
+      modules: false,
+    }),
+    copy({
+      targets: ['src/locales'],
+      outputFolder: 'dist',
+    }),
+    json({
+      // ignores indent and generates the smallest code
+      compact: true, // Default: false
+
+      // generate a named export for every property of the JSON object
+      namedExports: true // Default: true
+    }),
+    url(),
+    babel({
+      exclude: 'node_modules/**',
+      externalHelpers: true,
+      runtimeHelpers: true,
+    }),
+    resolve(),
+    commonjs({
+      include: ['node_modules/**', '.yalc/**'],
+    }),
+  ],
+  external: Object.keys(pkg.peerDependencies || {})
+};
--- a/extensions/ohif-i18n/src/config.js
+++ b/extensions/ohif-i18n/src/config.js
@ -0,0 +1,24 @@
+const debugMode = !!(
+  process.env.NODE_ENV !== 'production' && process.env.REACT_APP_I18N_DEBUG
+);
+
+const detectionOptions = {
+  // order and from where user language should be detected
+  order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
+
+  // keys or params to lookup language from
+  lookupQuerystring: 'lng',
+  lookupCookie: 'i18next',
+  lookupLocalStorage: 'i18nextLng',
+  lookupFromPathIndex: 0,
+  lookupFromSubdomainIndex: 0,
+
+  // cache user language on
+  caches: ['localStorage', 'cookie'],
+  excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)
+
+  // optional htmlTag with lang attribute, the default is:
+  htmlTag: document.documentElement
+};
+
+export { debugMode, detectionOptions };
--- a/extensions/ohif-i18n/src/debugger.js
+++ b/extensions/ohif-i18n/src/debugger.js
@ -0,0 +1,8 @@
+import { debugMode } from './config';
+
+export default (message, level = 'log') => {
+  if (debugMode) {
+    // eslint-disable-next-line
+    console[level]('@ohif/i18n: ', message);
+  }
+};
--- a/extensions/ohif-i18n/src/index.js
+++ b/extensions/ohif-i18n/src/index.js
@ -0,0 +1,97 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LngDetector from 'i18next-browser-languagedetector';
+import customDebug from './debugger';
+import pkg from '../package.json';
+import { debugMode, detectionOptions } from './config';
+
+let translate;
+
+function getNameSpaceString(key) {
+  const nameSpaceMatcher = key.match(/[^/]+$/g);
+  let finalNameSpace;
+
+  if (nameSpaceMatcher !== null) {
+    finalNameSpace = nameSpaceMatcher[0].replace('.json', '');
+  }
+
+  return finalNameSpace;
+}
+
+function getKeyForNameSpaces(key) {
+  const cleanedKey = key.match(/[/\\].+(?=[/\\])/);
+  let finalKey;
+
+  if (cleanedKey !== null) {
+    finalKey = cleanedKey[0].replace(/[/\\]/, '');
+    finalKey = finalKey.replace(/[/\\]/, '-');
+  }
+
+  return finalKey;
+}
+
+function getLocales() {
+  var isTestEnvironment = process.env.NODE_ENV === 'test';
+
+  // require.context is exclusive from webpack. This conditional is needed to escape while running tests
+  if (isTestEnvironment) {
+    return {};
+  }
+
+  const context = require.context(`./locales`, true, /\.json$/);
+  const locales = {};
+
+  context.keys().forEach(key => {
+    locales[getKeyForNameSpaces(key)] = {
+      ...locales[getKeyForNameSpaces(key)],
+      [getNameSpaceString(key)]: context(key),
+    };
+  });
+
+  return locales;
+}
+
+function addLocales(context) {
+  context.keys().forEach(key => {
+    i18n.addResourceBundle(
+      getKeyForNameSpaces(key),
+      getNameSpaceString(key),
+      context(key),
+      true,
+      true
+    );
+  });
+  customDebug(`Locales added successfully`, 'info');
+}
+
+function initI18n(detection = detectionOptions) {
+  i18n
+    .use(LngDetector)
+    .use(initReactI18next)
+    .init({
+      resources: getLocales(),
+      debug: debugMode,
+      keySeparator: false,
+      interpolation: {
+        escapeValue: false,
+      },
+      detection,
+      fallbackNS: ['Common'],
+      defaultNS: 'Common',
+      react: {
+        wait: true,
+      },
+    })
+    .then(function(t) {
+      translate = t;
+      customDebug(`t function available.`, 'info');
+    });
+}
+
+customDebug(`version ${pkg.version} loaded.`, 'info');
+
+initI18n();
+
+export { translate as t, addLocales, initI18n };
+
+export default i18n;
--- a/extensions/ohif-i18n/src/locales/en/Buttons.json
+++ b/extensions/ohif-i18n/src/locales/en/Buttons.json
@ -0,0 +1,43 @@
+{
+  "Themes": "Themes",
+  "Previous": "$t(Common:Previous)",
+  "Next": "$t(Common:Next)",
+  "Play": "$t(Common:Play)",
+  "Stop": "$t(Common:Stop)",
+  "Layout": "$t(Common:Layout)",
+  "More": "$t(Common:More)",
+  "Crosshairs": "Crosshairs",
+  "Magnify": "Magnify",
+  "ROI Window": "ROI Window",
+  "Probe": "Probe",
+  "Ellipse": "Ellipse",
+  "Rectangle": "Rectangle",
+  "Invert": "Invert",
+  "Rotate Right": "Rotate Right",
+  "Flip H": "Flip H",
+  "Flip V": "Flip V",
+  "Clear": "Clear",
+  "Brush": "Brush",
+  "Coronal": "Coronal",
+  "Stack Scroll": "Stack Scroll",
+  "Measurements": "Measurements",
+  "Zoom": "Zoom",
+  "Levels": "Levels",
+  "Pan": "Pan",
+  "Length": "Length",
+  "Angle": "Angle",
+  "Bidirectional": "Bidirectional",
+  "Freehand": "Freehand",
+  "Elliptical": "Elliptical",
+  "Circle": "Circle",
+  "Rectangle": "Rectangle",
+  "Reset": "$t(Common:Reset)",
+  "CINE": "CINE",
+  "Acquired": "Acquired",
+  "Sagittal": "Sagittal",
+  "Axial": "Axial",
+  "Manual": "Manual",
+  "Save": "Save",
+  "Reset to Defaults": "$t(Common:Reset) to Defaults",
+  "Cancel": "Cancel"
+}
--- a/extensions/ohif-i18n/src/locales/en/CineDialog.json
+++ b/extensions/ohif-i18n/src/locales/en/CineDialog.json
@ -0,0 +1,8 @@
+{
+  "fps": "fps",
+  "Skip to first image": "Skip to first $t(Common:Image)",
+  "Previous image": "$t(Common:Previous) $t(Common:Image)",
+  "Play / Stop": "$t(Common:Play) / $t(Common:Stop)",
+  "Next image": "$t(Common:Play) $t(Common:Image)",
+  "Skip to last image": "Skip, to last $t(Common:Image)"
+}
--- a/extensions/ohif-i18n/src/locales/en/Common.json
+++ b/extensions/ohif-i18n/src/locales/en/Common.json
@ -0,0 +1,10 @@
+{
+  "Reset": "Reset",
+  "Previous": "Previous",
+  "Next": "Next",
+  "Play": "Play",
+  "Stop": "Stop",
+  "Layout": "Layout",
+  "More": "More",
+  "Image": "Image"
+}
--- a/extensions/ohif-i18n/src/locales/en/Header.json
+++ b/extensions/ohif-i18n/src/locales/en/Header.json
@ -0,0 +1,8 @@
+{
+  "INVESTIGATIONAL USE ONLY": "INVESTIGATIONAL USE ONLY",
+  "Options": "Options",
+  "About": "About",
+  "Preferences": "Preferences",
+  "Study list": "Study list",
+  "Back to Viewer": "Back to Viewer"
+}
--- a/extensions/ohif-i18n/src/locales/en/MeasurementTable.json
+++ b/extensions/ohif-i18n/src/locales/en/MeasurementTable.json
@ -0,0 +1,9 @@
+{
+  "Criteria nonconformities": "Criteria nonconformities",
+  "Relabel": "Relabel",
+  "Description": "Description",
+  "Delete": "Delete",
+  "Targets": "Targets",
+  "NonTargets": "NonTargets",
+  "MAX": "MAX"
+}
--- a/extensions/ohif-i18n/src/locales/en/UK/Header.json
+++ b/extensions/ohif-i18n/src/locales/en/UK/Header.json
@ -0,0 +1,3 @@
+{
+  "About": "Info"
+}
--- a/extensions/ohif-i18n/src/locales/en/US/Header.json
+++ b/extensions/ohif-i18n/src/locales/en/US/Header.json
@ -0,0 +1,3 @@
+{
+  "About": "About"
+}
--- a/extensions/ohif-i18n/src/locales/en/UserPreferencesModal.json
+++ b/extensions/ohif-i18n/src/locales/en/UserPreferencesModal.json
@ -0,0 +1,6 @@
+{
+  "User Preferences": "User Preferences",
+  "Save": "$t(Buttons:Save)",
+  "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "Cancel": "$t(Buttons:Cancel)"
+}
--- a/extensions/ohif-i18n/src/locales/es/AR/Header.json
+++ b/extensions/ohif-i18n/src/locales/es/AR/Header.json
@ -0,0 +1,3 @@
+{
+  "INVESTIGATIONAL USE ONLY": "SOLO USO DE DESAROLLO"
+}
--- a/extensions/ohif-i18n/src/locales/es/Buttons.json
+++ b/extensions/ohif-i18n/src/locales/es/Buttons.json
@ -0,0 +1,42 @@
+{
+  "Themes": "Temas",
+  "Previous": "$t(Common:Previous)",
+  "Next": "$t(Common:Next)",
+  "Play": "$t(Common:Play)",
+  "Stop": "$t(Common:Stop)",
+  "Layout": "$t(Common:Layout)",
+  "More": "$t(Common:More)",
+  "Crosshairs": "Cruces",
+  "Magnify": "Lupa",
+  "ROI Window": "Ventana ROI",
+  "Probe": "Probar",
+  "Ellipse": "Elipse",
+  "Rectangle": "Rectángulo",
+  "Invert": "Invertido",
+  "Rotate Right": "Rotar ->",
+  "Flip H": "Espejo Hor.",
+  "Flip V": "Espejo Ver.",
+  "Clear": "Limpiar",
+  "Brush": "Escoba",
+  "Coronal": "Coronal",
+  "Stack Scroll": "Avance X slice",
+  "Measurements": "Medidas",
+  "Zoom": "Zoom",
+  "Levels": "Niveles",
+  "Pan": "Mover",
+  "Length": "Medición",
+  "Angle": "Ángulo",
+  "Bidirectional": "Bidirectional",
+  "Freehand": "Freehand",
+  "Elliptical": "Elliptical",
+  "Circle": "Circle",
+  "Reset": "$t(Common:Reset)",
+  "CINE": "CINE",
+  "Acquired": "Acquired",
+  "Sagittal": "Sagittal",
+  "Axial": "Axial",
+  "Manual": "Manual",
+  "Save": "Guardar",
+  "Reset to Defaults": "$t(Common:reset) por defectos",
+  "Cancel": "Cancelar"
+}
--- a/extensions/ohif-i18n/src/locales/es/CineDialog.json
+++ b/extensions/ohif-i18n/src/locales/es/CineDialog.json
@ -0,0 +1,8 @@
+{
+  "fps": "fps",
+  "Skip to first image": "Avanza para la primera $t(Common:Image)",
+  "Previous image": "$t(Common:Previous) $t(Common:Image)",
+  "Play / Stop": "$t(Common:Play) / $t(Common:Stop)",
+  "Next image": "$t(Common:Play) $t(Common:Image)",
+  "Skip to last image": "Pular para la ultima $t(Common:Image)"
+}
--- a/extensions/ohif-i18n/src/locales/es/Common.json
+++ b/extensions/ohif-i18n/src/locales/es/Common.json
@ -0,0 +1,10 @@
+{
+  "reset": "Reiniciar",
+  "Previous": "Anterior",
+  "Next": "Próximo",
+  "Play": "Play",
+  "Stop": "Stop",
+  "Layout": "Esquema",
+  "More": "Más",
+  "Image": "Imagen"
+}
--- a/extensions/ohif-i18n/src/locales/es/Header.json
+++ b/extensions/ohif-i18n/src/locales/es/Header.json
@ -0,0 +1,8 @@
+{
+  "INVESTIGATIONAL USE ONLY": "SOLO USO DE INVESTIGACIÓN",
+  "Options": "Opciones",
+  "About": "Sobre",
+  "Preferences": "Preferencias",
+  "Study list": "Lista de estudio",
+  "Back to Viewer": "Back to Viewer"
+}
--- a/extensions/ohif-i18n/src/locales/es/MX/Header.json
+++ b/extensions/ohif-i18n/src/locales/es/MX/Header.json
@ -0,0 +1,3 @@
+{
+  "INVESTIGATIONAL USE ONLY": "SOLO USO DE INVESTIGACIÓN"
+}
--- a/extensions/ohif-i18n/src/locales/es/MeasurementTable.json
+++ b/extensions/ohif-i18n/src/locales/es/MeasurementTable.json
@ -0,0 +1,11 @@
+{
+  "Criteria nonconformities": "Criterios de no conformidades",
+  "Relabel": "Reetiquetar",
+  "Description": "Descripción",
+  "Delete": "Borrar",
+  "Targets": "Objetivos",
+  "NonTargets": "NonObjetivos",
+  "MAX": "máximo",
+  "Chest Wall Posterior": "Pared pectoral posterior",
+  "Bone Extremity": "Extremidad ósea"
+}
--- a/extensions/ohif-i18n/src/locales/es/UserPreferencesModal.json
+++ b/extensions/ohif-i18n/src/locales/es/UserPreferencesModal.json
@ -0,0 +1,6 @@
+{
+  "User Preferences": "Preferencias de usuario",
+  "Save": "$t(Buttons:Save)",
+  "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "Cancel": "$t(Buttons:Cancel)"
+}
--- a/extensions/ohif-i18n/yarn.lock
+++ b/extensions/ohif-i18n/yarn.lock
--- a/extensions/ohif-vtk-extension/package.json
+++ b/extensions/ohif-vtk-extension/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-vtk",
-  "version": "0.0.2",
+  "version": "0.0.3",
  "description": "OHIF extension for VTK.js",
  "author": "OHIF",
  "license": "MIT",
@ -25,6 +25,7 @@
    "dicom-parser": "^1.8.3",
    "hammerjs": "^2.0.8",
    "ohif-core": "^0.3.3",
+    "@ohif/i18n": "0.0.4",
    "prop-types": "^15.6.2",
    "react": "^15.0.0 || ^16.0.0",
    "react-dom": "^15.0.0 || ^16.0.0",
@ -56,6 +57,7 @@
    "rollup": "^1.1.2",
    "rollup-plugin-babel": "^4.2.0",
    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-copy": "^2.0.1",
    "rollup-plugin-node-builtins": "^2.1.2",
    "rollup-plugin-node-resolve": "^4.0.0",
    "rollup-plugin-peer-deps-external": "^2.2.0",
--- a/extensions/ohif-vtk-extension/rollup.config.js
+++ b/extensions/ohif-vtk-extension/rollup.config.js
@ -6,6 +6,7 @@ import pkg from './package.json';
 import postcss from 'rollup-plugin-postcss';
 import resolve from 'rollup-plugin-node-resolve';
 import url from 'rollup-plugin-url';
+import copy from 'rollup-plugin-copy';

 // Deal with https://github.com/rollup/rollup-plugin-commonjs/issues/297

@ -24,7 +25,8 @@ const globals = {
  dcmjs: 'dcmjs',
  'dicom-parser': 'dicomParser',
  'ohif-core': 'OHIF',
-  hammerjs: 'Hammer'
+  hammerjs: 'Hammer',
+  '@ohif/i18n': 'i18n'
 };

 export default {
@ -56,6 +58,10 @@ export default {
      externalHelpers: true,
      runtimeHelpers: true
    }),
+    copy({
+      targets: ['src/locales'],
+      outputFolder: 'dist',
+    }),
    resolve(),
    commonjs({
      include: ['node_modules/**', '.yalc/**'],
--- a/extensions/ohif-vtk-extension/src/index.js
+++ b/extensions/ohif-vtk-extension/src/index.js
@ -1,3 +1,7 @@
+import loadLocales from './loadLocales';
+
 import OHIFVTKExtension from './OHIFVTKExtension.js';

+loadLocales();
+
 export default OHIFVTKExtension;
--- a/extensions/ohif-vtk-extension/src/loadLocales.js
+++ b/extensions/ohif-vtk-extension/src/loadLocales.js
@ -0,0 +1,8 @@
+import { addLocales } from '@ohif/i18n';
+
+function loadLocales() {
+  const context = require.context(`./locales`, true, /\.json$/);
+  addLocales(context);
+}
+
+export default loadLocales;
--- a/extensions/ohif-vtk-extension/src/locales/en/Buttons.json
+++ b/extensions/ohif-vtk-extension/src/locales/en/Buttons.json
@ -0,0 +1,3 @@
+{
+  "Rotate": "Rotate"
+}
--- a/extensions/ohif-vtk-extension/src/locales/es/Buttons.json
+++ b/extensions/ohif-vtk-extension/src/locales/es/Buttons.json
@ -0,0 +1,3 @@
+{
+  "Rotate": "Rotacionar"
+}
--- a/extensions/ohif-vtk-extension/yarn.lock
+++ b/extensions/ohif-vtk-extension/yarn.lock
@ -2994,7 +2994,7 @@ from2@^2.1.0:
    inherits "^2.0.1"
    readable-stream "^2.0.0"

-fs-extra@^7.0.0:
+fs-extra@^7.0.0, fs-extra@^7.0.1:
  version "7.0.1"
  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
@ -3963,6 +3963,13 @@ is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
  dependencies:
    isobject "^3.0.1"

+is-plain-object@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.0.tgz#47bfc5da1b5d50d64110806c199359482e75a928"
+  integrity sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==
+  dependencies:
+    isobject "^4.0.0"
+
 is-promise@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
@ -4076,6 +4083,11 @@ isobject@^3.0.0, isobject@^3.0.1:
  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=

+isobject@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
+  integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==
+
 isstream@~0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@ -7041,6 +7053,15 @@ rollup-plugin-commonjs@^9.2.0:
    resolve "^1.8.1"
    rollup-pluginutils "^2.3.3"

+rollup-plugin-copy@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-copy/-/rollup-plugin-copy-2.0.1.tgz#2a45e45be84a0d4054d1774604044e7f7581fdae"
+  integrity sha512-IE+Ob5k1Pi/DLi8SlFcf9jN1m2p0ovIwMuz0GM5NeQeV14puW/bCUpmXlqVtQVy+ErXOhZEeBaqinJ0xnJdxKg==
+  dependencies:
+    chalk "^2.4.2"
+    fs-extra "^7.0.1"
+    is-plain-object "^3.0.0"
+
 rollup-plugin-node-builtins@^2.1.2:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/rollup-plugin-node-builtins/-/rollup-plugin-node-builtins-2.1.2.tgz#24a1fed4a43257b6b64371d8abc6ce1ab14597e9"
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "ohif-viewer",
-  "version": "0.0.20",
+  "version": "0.0.21",
  "description": "OHIF Viewer",
  "author": "OHIF Contributors",
  "license": "MIT",
@ -70,6 +70,7 @@
    "@ohif/extension-cornerstone": "0.0.34",
    "@ohif/extension-dicom-microscopy": "0.0.6",
    "@ohif/extension-vtk": "0.0.2",
+    "@ohif/i18n": "0.0.4",
    "classnames": "^2.2.6",
    "cornerstone-core": "^2.2.8",
    "cornerstone-math": "^0.1.8",
@ -79,6 +80,8 @@
    "dicom-parser": "^1.8.3",
    "dicomweb-client": "^0.4.2",
    "hammerjs": "^2.0.8",
+    "i18next": "^17.0.3",
+    "i18next-browser-languagedetector": "^3.0.1",
    "lodash.isequal": "4.5.0",
    "moment": "^2.24.0",
    "ohif-core": "0.5.8",
@ -89,6 +92,7 @@
    "react-bootstrap-modal": "^4.2.0",
    "react-dnd": "^7.0.2",
    "react-dnd-html5-backend": "^7.0.2",
+    "react-i18next": "^10.11.0",
    "react-redux": "^6.0.0",
    "react-resize-detector": "^3.4.0",
    "react-router": "^4.3.1",
--- a/src/App.js
+++ b/src/App.js
@ -28,6 +28,8 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import WhiteLabellingContext from './WhiteLabellingContext';
 import appCommands from './appCommands';
 import setupTools from './setupTools';
+import i18n from '@ohif/i18n';
+import { I18nextProvider } from 'react-i18next';
 import store from './store';

 // ~~~~ APP SETUP
@ -128,24 +130,30 @@ class App extends Component {
    if (userManager) {
      return (
        <Provider store={store}>
-          <OidcProvider store={store} userManager={userManager}>
-            <Router basename={this.props.routerBasename}>
-              <WhiteLabellingContext.Provider value={this.props.whiteLabelling}>
-                <OHIFStandaloneViewer userManager={userManager} />
-              </WhiteLabellingContext.Provider>
-            </Router>
-          </OidcProvider>
+          <I18nextProvider i18n={i18n}>
+            <OidcProvider store={store} userManager={userManager}>
+              <Router basename={this.props.routerBasename}>
+                <WhiteLabellingContext.Provider
+                  value={this.props.whiteLabelling}
+                >
+                  <OHIFStandaloneViewer userManager={userManager} />
+                </WhiteLabellingContext.Provider>
+              </Router>
+            </OidcProvider>
+          </I18nextProvider>
        </Provider>
      );
    }

    return (
      <Provider store={store}>
-        <Router basename={this.props.routerBasename}>
-          <WhiteLabellingContext.Provider value={this.props.whiteLabelling}>
-            <OHIFStandaloneViewer />
-          </WhiteLabellingContext.Provider>
-        </Router>
+        <I18nextProvider i18n={i18n}>
+          <Router basename={this.props.routerBasename}>
+            <WhiteLabellingContext.Provider value={this.props.whiteLabelling}>
+              <OHIFStandaloneViewer />
+            </WhiteLabellingContext.Provider>
+          </Router>
+        </I18nextProvider>
      </Provider>
    );
  }
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@ -4,6 +4,8 @@ import { Link, withRouter } from 'react-router-dom';
 import React, { Component } from 'react';

 import { Dropdown } from 'react-viewerbase';
+import { withTranslation } from 'react-i18next';
+import './Header.css';
 import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
 import PropTypes from 'prop-types';
 // import { UserPreferencesModal } from 'react-viewerbase';
@ -14,6 +16,7 @@ class Header extends Component {
    home: PropTypes.bool.isRequired,
    location: PropTypes.object.isRequired,
    children: PropTypes.node,
+    t: PropTypes.func.isRequired,
  };

  static defaultProps = {
@ -41,16 +44,19 @@ class Header extends Component {

    // const onClick = this.toggleUserPreferences.bind(this);

+    this.loadOptions();
+  }
+
+  loadOptions() {
+    const { t } = this.props;
    this.options = [
      // {
-      //   title: 'Preferences ',
-      //   icon: {
-      //     name: 'user',
-      //   },
+      //   title: t('Preferences'),
+      //   icon: { name: 'user' },
      //   onClick: onClick,
      // },
      {
-        title: 'About',
+        title: t('About'),
        icon: {
          name: 'info',
        },
@ -77,6 +83,7 @@ class Header extends Component {
  }

  render() {
+    const { t } = this.props;
    return (
      <div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
        <div className="header-left-box">
@ -85,7 +92,7 @@ class Header extends Component {
              to={this.props.location.studyLink}
              className="header-btn header-viewerLink"
            >
-              Back to Viewer
+              {t('Back to Viewer')}
            </Link>
          )}

@ -99,26 +106,19 @@ class Header extends Component {
                state: { studyLink: this.props.location.pathname },
              }}
            >
-              Study list
+              {t('Study list')}
            </Link>
          )}
        </div>

        <div className="header-menu">
-          <span className="research-use">INVESTIGATIONAL USE ONLY</span>
-          <Dropdown title="Options" list={this.options} align="right" />
-          {/* <UserPreferencesModal
-            isOpen={this.state.isUserPreferencesOpen}
-            onCancel={this.toggleUserPreferences.bind(this)}
-            onSave={this.toggleUserPreferences.bind(this)}
-            onResetToDefaults={this.toggleUserPreferences.bind(this)}
-            windowLevelData={{}}
-            hotKeysData={this.hotKeysData}
-          /> */}
+          <span className="research-use">{t('INVESTIGATIONAL USE ONLY')}</span>
+          <Dropdown title={t('Options')} list={this.options} align="right" />
+          {/* <ConnectedUserPreferencesModal /> */}
        </div>
      </div>
    );
  }
 }

-export default withRouter(Header);
+export default withTranslation('Header')(withRouter(Header));
--- a/yarn.lock
+++ b/yarn.lock
@ -1042,6 +1042,15 @@
    classnames "^2.2.6"
    react-vtkjs-viewport "^0.0.7"

+"@ohif/i18n@0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@ohif/i18n/-/i18n-0.0.4.tgz#e54176e7799e311dbaff37995f9d2745b58cbd0f"
+  integrity sha512-lW+S9weZbJS300yCRR8Ygb1KTULbD1Qx5ZGcYUXyseJIWr5jeJ4V/6FdS30w8u8ejiIVwF8rYOguHsmueQrkdw==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    classnames "^2.2.6"
+    rollup-plugin-json "^4.0.0"
+
 "@samverschueren/stream-to-observable@^0.3.0":
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@ -4836,6 +4845,11 @@ estree-walker@^0.6.0:
  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.0.tgz#5d865327c44a618dde5699f763891ae31f257dae"
  integrity sha512-peq1RfVAVzr3PU/jL31RaOjUKLoZJpObQWJJ+LgfcxDUifyLZ1RjPQZTl0pzj2uJ45b7A7XpyppXvxdEqzo4rw==

+estree-walker@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
+  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
+
 esutils@^2.0.0, esutils@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@ -6187,6 +6201,13 @@ html-minifier@^3.2.3:
    relateurl "0.2.x"
    uglify-js "3.4.x"

+html-parse-stringify2@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
+  integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
+  dependencies:
+    void-elements "^2.0.1"
+
 html-tags@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
@ -6322,6 +6343,18 @@ husky@1.3.x:
    run-node "^1.0.0"
    slash "^2.0.0"

+i18next-browser-languagedetector@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-3.0.1.tgz#a47c43176e8412c91e808afb7c6eb5367649aa8e"
+  integrity sha512-WFjPLNPWl62uu07AHY2g+KsC9qz0tyMq+OZEB/H7N58YKL/JLiCz9U709gaR20Mule/Ppn+uyfVx5REJJjn1HA==
+
+i18next@^17.0.3:
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-17.0.3.tgz#82d67826d13e8ca2cd2a3c87871533414e952d03"
+  integrity sha512-vQyW6a4ZLt3Dxnd6GXSnhbW5DwGYC4uLPKk1MFE5pfFbR9CEiNatdwwUZDQfrcNOh2x0eOGDFYeCEyLlkLvDQA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 iconv-lite@0.4.23:
  version "0.4.23"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
@ -9738,9 +9771,9 @@ oidc-client@1.7.x:
  integrity sha512-qsPBQVa/BY6AmdY89erANJbfDXrX1dqu9lKgvYZzkVDzIj5mmw6wGjFeQuV2HDm4TiJA0VT5HSTWOWnXZUYu0g==

 ol@^5.3.0:
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/ol/-/ol-5.3.2.tgz#dfc70b315b2dcce3cb4b9b79a2e9eb4ef856dd72"
-  integrity sha512-PfS8Fe1iy4YNJ7P+TvebKME+8gp5NBfQuIldAHfBCkc7agmTezscQrsJWggz5B6Sprm/M/4YBtbyQtw4pIC65w==
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/ol/-/ol-5.3.3.tgz#ad39b7b485fdbae4b3e1535a0a07cc5d88b0b9b5"
+  integrity sha512-7eU4x8YMduNcED1D5wI+AMWDRe7/1HmGfsbV+kFFROI9RNABU/6n4osj6Q3trZbxxKnK2DSRIjIRGwRHT/Z+Ww==
  dependencies:
    pbf "3.1.0"
    pixelworks "1.1.0"
@ -11592,6 +11625,14 @@ react-error-overlay@^5.1.4:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.4.tgz#88dfb88857c18ceb3b9f95076f850d7121776991"
  integrity sha512-fp+U98OMZcnduQ+NSEiQa4s/XMsbp+5KlydmkbESOw4P69iWZ68ZMFM5a2BuE0FgqPBKApJyRuYHR95jM8lAmg==

+react-i18next@^10.11.0:
+  version "10.11.0"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-10.11.0.tgz#a6854e556d3aff9f5f161b4aa871d43cfff6bd9b"
+  integrity sha512-jmxLZK8mf+KxG3RUIiu/COperTq1c7+iHNsna7LODOYEYaoj6EXFuchOytnB80GoUOb0JC1csT37Zp+U5nPQqQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    html-parse-stringify2 "2.0.1"
+
 react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.2, react-is@^16.8.4, react-is@^16.8.6:
  version "16.8.6"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
@ -12512,6 +12553,13 @@ rollup-plugin-json@^3.1.0:
  dependencies:
    rollup-pluginutils "^2.3.1"

+rollup-plugin-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-json/-/rollup-plugin-json-4.0.0.tgz#a18da0a4b30bf5ca1ee76ddb1422afbb84ae2b9e"
+  integrity sha512-hgb8N7Cgfw5SZAkb3jf0QXii6QX/FOkiIq2M7BAQIEydjHvTyxXHQiIzZaTFgx1GK0cRCHOCBHIyEkkLdWKxow==
+  dependencies:
+    rollup-pluginutils "^2.5.0"
+
 rollup-plugin-node-builtins@^2.1.2:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/rollup-plugin-node-builtins/-/rollup-plugin-node-builtins-2.1.2.tgz#24a1fed4a43257b6b64371d8abc6ce1ab14597e9"
@ -12574,6 +12622,13 @@ rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.3.0, rollup-pluginutils@^2.3.1,
    estree-walker "^0.6.0"
    micromatch "^3.1.10"

+rollup-pluginutils@^2.5.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.1.tgz#8fa6dd0697344938ef26c2c09d2488ce9e33ce97"
+  integrity sha512-J5oAoysWar6GuZo0s+3bZ6sVZAC0pfqKz68De7ZgDi5z63jOVZn1uJL/+z1jeKHNbGII8kAyHF5q8LnxSX5lQg==
+  dependencies:
+    estree-walker "^0.6.1"
+
 rollup@^1.1.2:
  version "1.10.0"
  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.10.0.tgz#91d594aa4386c51ca0883ad4ef2050b469d3e8aa"
@ -14541,6 +14596,11 @@ vm-browserify@0.0.4:
  dependencies:
    indexof "0.0.1"

+void-elements@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 vtk.js@^8.3.11:
  version "8.4.9"
  resolved "https://registry.yarnpkg.com/vtk.js/-/vtk.js-8.4.9.tgz#139d3cf2f36139e836fc1cf360b47e0d05f0b3be"