Add localization support (#333)

* Add updated i18n config and en locale

package.json

@@ -26,7 +26,7 @@
         "start:web": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.web.ts",
         "test": "jest",
         "prepare": "husky install",
-        "i18next": "i18next -c src/renderer/i18n/i18next-parser.config.js",
+        "i18next": "i18next -c src/i18n/i18next-parser.config.js",
         "prod:buildserver": "pwsh -c \"./scripts/server-build.ps1\"",
         "prod:publishserver": "pwsh -c \"./scripts/server-publish.ps1\""
     },
@@ -252,7 +252,7 @@
         "file-loader": "^6.2.0",
         "html-webpack-plugin": "^5.5.0",
         "husky": "^7.0.4",
-        "i18next-parser": "^6.3.0",
+        "i18next-parser": "^6.6.0",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^27.5.1",
         "lint-staged": "^12.3.7",
@@ -321,7 +321,7 @@
         "framer-motion": "^10.13.0",
         "fuse.js": "^6.6.2",
         "history": "^5.3.0",
-        "i18next": "^21.6.16",
+        "i18next": "^21.10.0",
         "idb-keyval": "^6.2.1",
         "immer": "^9.0.21",
         "is-electron": "^2.2.2",
@@ -336,7 +336,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-error-boundary": "^3.1.4",
-        "react-i18next": "^11.16.7",
+        "react-i18next": "^11.18.6",
         "react-icons": "^4.10.1",
         "react-player": "^2.11.0",
         "react-router": "^6.16.0",

src/i18n/i18n.ts

@@ -0,0 +1,72 @@
+import { PostProcessorModule } from 'i18next';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import en from './locales/en.json';
+
+const resources = {
+    en: { translation: en },
+};
+
+export const languages = [
+    {
+        label: 'English',
+        value: 'en',
+    },
+];
+
+const lowerCasePostProcessor: PostProcessorModule = {
+    type: 'postProcessor',
+    name: 'lowerCase',
+    process: (value: string) => {
+        return value.toLocaleLowerCase();
+    },
+};
+
+const upperCasePostProcessor: PostProcessorModule = {
+    type: 'postProcessor',
+    name: 'upperCase',
+    process: (value: string) => {
+        return value.toLocaleUpperCase();
+    },
+};
+
+const titleCasePostProcessor: PostProcessorModule = {
+    type: 'postProcessor',
+    name: 'titleCase',
+    process: (value: string) => {
+        return value.replace(/\w\S*/g, (txt) => {
+            return txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase();
+        });
+    },
+};
+
+const sentenceCasePostProcessor: PostProcessorModule = {
+    type: 'postProcessor',
+    name: 'sentenceCase',
+    process: (value: string) => {
+        const sentences = value.split('. ');
+
+        return sentences
+            .map((sentence) => {
+                return sentence.charAt(0).toUpperCase() + sentence.slice(1).toLocaleLowerCase();
+            })
+            .join('. ');
+    },
+};
+i18n.use(lowerCasePostProcessor)
+    .use(upperCasePostProcessor)
+    .use(titleCasePostProcessor)
+    .use(sentenceCasePostProcessor)
+    .use(initReactI18next) // passes i18n down to react-i18next
+    .init({
+        fallbackLng: 'en',
+        // 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
+        },
+        resources,
+    });
+
+export default i18n;