feat: add skeleton of i18n framework

packages/desktop-client/package.json

@@ -41,6 +41,7 @@
     "fs-extra": "7.0.0",
     "glamor": "^2.20.40",
     "html-webpack-plugin": "4.0.0-alpha.2",
+    "i18next": "^21.9.1",
     "identity-obj-proxy": "3.0.0",
     "load-js": "^3.0.3",
     "mini-css-extract-plugin": "0.4.3",
@@ -60,6 +61,7 @@
     "react-dev-utils": "^12.0.1",
     "react-dnd": "^10.0.2",
     "react-dom": "16.13.1",
+    "react-i18next": "^11.18.4",
     "react-modal": "3.4.4",
     "react-redux": "7.2.1",
     "react-router": "5.2.0",

packages/desktop-client/src/components/manager/subscribe/Bootstrap.js

@@ -9,8 +9,11 @@ import { createBudget } from 'loot-core/src/client/actions/budgets';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { ConfirmPasswordForm } from './ConfirmPasswordForm';
 import { useBootstrapped, Title, Input, Link, ExternalLink } from './common';
+import { useTranslation } from 'react-i18next';
 
 export default function Bootstrap() {
+  const { t } = useTranslation();
+
   let dispatch = useDispatch();
   let history = useHistory();
   let [error, setError] = useState(null);
@@ -52,7 +55,7 @@ export default function Bootstrap() {
   return (
     <>
       <View style={{ width: 450, marginTop: -30 }}>
-        <Title text="Bootstrap this Actual instance" />
+        <Title text={t('bootstrap.title')} />
         <Text
           style={{
             fontSize: 16,
@@ -60,7 +63,7 @@ export default function Bootstrap() {
             lineHeight: 1.4
           }}
         >
-          Set a password for this server instance
+          {t('bootstrap.setPassword')}
         </Text>
 
         {error && (
@@ -83,7 +86,7 @@ export default function Bootstrap() {
               style={{ fontSize: 15, color: colors.b4, marginRight: 15 }}
               onClick={onDemo}
             >
-              Try Demo
+              {t('bootstrap.tryDemo')}
             </Button>
           }
           onSetPassword={onSetPassword}

packages/desktop-client/src/index.js

@@ -23,6 +23,7 @@ import * as actions from 'loot-core/src/client/actions';
 import thunk from 'redux-thunk';
 import { handleGlobalEvents } from './global-events';
 import { initialState as initialAppState } from 'loot-core/src/client/reducers/app';
+import './locales';
 
 // See https://github.com/WICG/focus-visible. Only makes the blue
 // focus outline appear from keyboard events.

packages/desktop-client/src/locales/en-GB.json

@@ -0,0 +1,7 @@
+{
+    "bootstrap": {
+        "title": "Bootstrap this Actual instance",
+        "setPassword": "Set a password for this server instance",
+        "tryDemo": "Try Demo"
+    }
+}

packages/desktop-client/src/locales/es-ES.json

@@ -0,0 +1,7 @@
+{
+    "bootstrap": {
+        "title": "Bootstrap esta instancia de Actual",
+        "setPassword": "Establecer una contraseña para esta instancia de servidor",
+        "tryDemo": "Probar Demo"
+    }
+}

packages/desktop-client/src/locales/index.js

@@ -0,0 +1,29 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import enUK from './en-GB.json';
+import esES from './es-ES.json';
+
+const resources = {
+  en: {
+    translation: enUK
+  },
+  es: {
+    translation: esES
+  }
+};
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: 'es', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+
+    interpolation: {
+      escapeValue: false // react already safes from xss
+    }
+  });
+
+export default i18n;

yarn.lock

@@ -97,6 +97,7 @@ __metadata:
     fs-extra: 7.0.0
     glamor: ^2.20.40
     html-webpack-plugin: 4.0.0-alpha.2
+    i18next: ^21.9.1
     identity-obj-proxy: 3.0.0
     load-js: ^3.0.3
     mini-css-extract-plugin: 0.4.3
@@ -116,6 +117,7 @@ __metadata:
     react-dev-utils: ^12.0.1
     react-dnd: ^10.0.2
     react-dom: 16.13.1
+    react-i18next: ^11.18.4
     react-modal: 3.4.4
     react-redux: 7.2.1
     react-router: 5.2.0
@@ -11689,6 +11691,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-parse-stringify@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "html-parse-stringify@npm:3.0.1"
+  dependencies:
+    void-elements: 3.1.0
+  checksum: 334fdebd4b5c355dba8e95284cead6f62bf865a2359da2759b039db58c805646350016d2017875718bc3c4b9bf81a0d11be5ee0cf4774a3a5a7b97cde21cfd67
+  languageName: node
+  linkType: hard
+
 "html-webpack-plugin@npm:4.0.0-alpha.2":
   version: 4.0.0-alpha.2
   resolution: "html-webpack-plugin@npm:4.0.0-alpha.2"
@@ -11894,6 +11905,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"i18next@npm:^21.9.1":
+  version: 21.9.1
+  resolution: "i18next@npm:21.9.1"
+  dependencies:
+    "@babel/runtime": ^7.17.2
+  checksum: 1bc59c61fbb27385841f76436c7dd60e9f42a3fb326797db44a65dd165c489420e549b5370e3de75b85f8d61239f4869fc9fbcf63deae5f40ee606bc04916e6d
+  languageName: node
+  linkType: hard
+
 "iconv-corefoundation@npm:^1.1.7":
   version: 1.1.7
   resolution: "iconv-corefoundation@npm:1.1.7"
@@ -19094,6 +19114,24 @@ jest-snapshot@test:
   languageName: node
   linkType: hard
 
+"react-i18next@npm:^11.18.4":
+  version: 11.18.4
+  resolution: "react-i18next@npm:11.18.4"
+  dependencies:
+    "@babel/runtime": ^7.14.5
+    html-parse-stringify: ^3.0.1
+  peerDependencies:
+    i18next: ">= 19.0.0"
+    react: ">= 16.8.0"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+    react-native:
+      optional: true
+  checksum: c64546e22447410cb09020156d86a35cc672f5e34899155456068a7caedfb70dacd70e3619e671ebc831b11d0ca95c1de1c56897842fd1de401a87b86d040beb
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.12.0, react-is@npm:^16.13.0, react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0, react-is@npm:^16.8.4, react-is@npm:^16.8.6, react-is@npm:^16.9.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -22959,6 +22997,13 @@ jest-snapshot@test:
   languageName: node
   linkType: hard
 
+"void-elements@npm:3.1.0":
+  version: 3.1.0
+  resolution: "void-elements@npm:3.1.0"
+  checksum: 0390f818107fa8fce55bb0a5c3f661056001c1d5a2a48c28d582d4d847347c2ab5b7f8272314cac58acf62345126b6b09bea623a185935f6b1c3bbce0dfd7f7f
+  languageName: node
+  linkType: hard
+
 "w3c-hr-time@npm:^1.0.1, w3c-hr-time@npm:^1.0.2":
   version: 1.0.2
   resolution: "w3c-hr-time@npm:1.0.2"