feat(ui): add i18n

ui/package.json

@@ -16,10 +16,12 @@
     "compose-function": "^3.0.3",
     "effector": "^22.8.7",
     "effector-react": "^22.5.4",
+    "i18next": "^23.6.0",
     "normalize.css": "^8.0.1",
     "oidc-client-ts": "^2.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^13.3.1",
     "react-oidc-context": "^2.3.0",
     "react-router-dom": "^6.16.0"
   },

ui/src/app/index.tsx

@@ -7,6 +7,7 @@ import { ArrElement } from "shared/types";
 import { Link } from "react-router-dom";
 import { Routing } from "pages";
 import withProviders from "./providers";
+import { Trans } from "react-i18next";
 
 const { Header, Content } = Layout;
 
@@ -40,6 +41,7 @@ const App: React.FC = () => {
             label: (
                 <Link to="/">
                     <HomeOutlined />
+                    <Trans i18nKey="nav-bar.home" />
                 </Link>
             ),
         },
@@ -48,6 +50,7 @@ const App: React.FC = () => {
             label: (
                 <Link to="/storages">
                     <DatabaseOutlined />
+                    <Trans i18nKey="nav-bar.storages" />
                 </Link>
             ),
         },

ui/src/main.tsx

@@ -1,23 +1,20 @@
 import App from "app";
 import React from "react";
-import ReactDOM from "react-dom/client";
-import { attachLogger } from "effector-logger";
-import { mockServer } from "shared/mock";
+import { createRoot } from "react-dom/client";
+import { mockServer as setupMockServer } from "shared/mock";
+import { setupTranslation } from "shared/i18n";
+import config from "shared/config";
+import { setupEffector } from "shared/effector";
 
-if (process.env.NODE_ENV === "development") {
-    mockServer({ environment: "development" });
-    attachLogger({
-        name: "bookshelf",
-    });
-}
+setupTranslation(config.env);
+setupMockServer(config.env);
+setupEffector(config.env)
 
-const root = document.getElementById("root");
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = createRoot(document.getElementById("root")!);
 
-ReactDOM
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    .createRoot(root!)
-    .render(
-        <React.StrictMode>
-            <App />
-        </React.StrictMode>,
-    );
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+);

ui/src/shared/config/index.ts

@@ -1,4 +1,5 @@
 export default {
+    env: process.env.NODE_ENV ?? "development",
     auth: {
         authority: import.meta.env.BS_AUTH_OIDC_AUTHORITY ?? "",
         clientID: import.meta.env.BS_AUTH_OIDC_CLIENT_ID ?? "",

ui/src/shared/effector/index.ts

@@ -0,0 +1,11 @@
+export const setupEffector = async (env: string): Promise<void> => {
+    if (env === "production") {
+        return;
+    }
+
+    const module = await import("effector-logger");
+
+    module.attachLogger({
+        name: "bookshelf",
+    });
+}

ui/src/shared/i18n/index.tsx

@@ -0,0 +1,24 @@
+import { initReactI18next } from "react-i18next";
+import ruTrans from "./locales/ru.json";
+import i18next from "i18next";
+
+export const setupTranslation = (env: string = "development"): void => {
+    i18next
+        .use(initReactI18next)
+        .init({
+            lng: "ru",
+            fallbackLng: "ru",
+            debug: env !== "production",
+            react: {
+                useSuspense: true
+            },
+            interpolation: {
+                escapeValue: false,
+            },
+            resources: {
+                "ru": {
+                    "translation": ruTrans,
+                },
+            },
+        });
+};

ui/src/shared/i18n/locales/ru.json

@@ -0,0 +1,6 @@
+{
+    "nav-bar": {
+        "home": "Главная",
+        "storages": "Хранилища"
+    }
+}

ui/src/shared/mock/index.ts

@@ -2,7 +2,7 @@ import { AppServer, endpoints, models, seeds, serializers } from "./types";
 import config from "shared/config";
 import { createServer } from "miragejs";
 
-export const mockServer = ({ environment = "test" }): AppServer => {
+export const mockServer = (environment = "test"): AppServer => {
     return createServer({
         environment,
 

ui/yarn.lock

@@ -1374,6 +1374,20 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
+i18next@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.6.0.tgz#c6e996cfd3fef0bf60be3b7c581c35338dba5a71"
+  integrity sha512-z0Cxr0MGkt+kli306WS4nNNM++9cgt2b2VCMprY92j+AIab/oclgPxdwtTZVLP1zn5t5uo8M6uLsZmYrcjr3HA==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
+
 ignore@^5.2.0, ignore@^5.2.4:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
@@ -2219,6 +2233,14 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-i18next@^13.3.1:
+  version "13.3.1"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.3.1.tgz#9b072bf4dd4cafb028e92315a8a1415f8034bdca"
+  integrity sha512-JAtYREK879JXaN9GdzfBI4yJeo/XyLeXWUsRABvYXiFUakhZJ40l+kaTo+i+A/3cKIED41kS/HAbZ5BzFtq/Og==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
+    html-parse-stringify "^3.0.1"
+
 react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -2480,6 +2502,11 @@ vite@^4.4.5:
   optionalDependencies:
     fsevents "~2.3.2"
 
+[email protected]:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"