feat: add i18next (#11)

2024-11-03 12:52:50 +03:00 · 2024-11-03 12:52:50 +03:00 · 9a490bd993
commit 9a490bd993
parent 7ff8a99505
6 changed files with 50 additions and 14 deletions
--- a/locales/ru.json
+++ b/locales/ru.json
@ -0,0 +1,5 @@
+{
+  "dry-wash.arm.masters.add": "Добавить",
+  "dry-wash.order.status.progress": "Выполняется",
+  "dry-wash.order.status.complete": "Завершено"
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
            "license": "ISC",
            "dependencies": {
                "@brojs/cli": "^1.3.0",
+                "@brojs/i18nextreactconfig": "^1.3.3",
                "@chakra-ui/icons": "^2.2.4",
                "@chakra-ui/react": "^2.4.2",
                "@emotion/react": "^11.4.1",
@ -17,6 +18,7 @@
                "@types/react": "^18.3.12",
                "express": "^4.21.1",
                "framer-motion": "^6.2.8",
+                "i18next": "^23.16.4",
                "react": "^18.3.1",
                "react-dom": "^18.3.1",
                "react-router-dom": "^6.27.0"
@ -1665,6 +1667,14 @@
            "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Ffire.app/-/1.3.0/fire.app-1.3.0.tgz",
            "integrity": "sha512-4jt/o944FttMUDU5fnGknaa8alz/0FaFATtgc5lVcsJ1Us4TKamHXtx4aj1hw6Pe89aBu61KLy8aCwNE24O0Mg=="
        },
+        "node_modules/@brojs/i18nextreactconfig": {
+            "version": "1.3.3",
+            "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Fi18nextreactconfig/-/1.3.3/i18nextreactconfig-1.3.3.tgz",
+            "integrity": "sha512-zdSjXTyXUXFjVYl/yHtHYfZBW3Tkawg9d5JbKdKwJOzDBvIA8b1P6yEAzNIwP/LBn4D/bFI2EuQzw1XIJYXjZQ==",
+            "dependencies": {
+                "i18next-xhr-backend": "^3.2.2"
+            }
+        },
        "node_modules/@brojs/templates": {
            "version": "1.3.0",
            "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Ftemplates/-/1.3.0/templates-1.3.0.tgz",
@ -7003,9 +7013,9 @@
            }
        },
        "node_modules/i18next": {
-            "version": "23.16.0",
-            "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.0.tgz",
-            "integrity": "sha512-Ni3CG6c14teOogY19YNRl+kYaE/Rb59khy0VyHVn4uOZ97E2E/Yziyi6r3C3s9+wacjdLZiq/LLYyx+Cgd+FCw==",
+            "version": "23.16.4",
+            "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.4.tgz",
+            "integrity": "sha512-9NIYBVy9cs4wIqzurf7nLXPyf3R78xYbxExVqHLK9od3038rjpyOEzW+XB130kZ1N4PZ9inTtJ471CRJ4Ituyg==",
            "funding": [
                {
                    "type": "individual",
@ -7020,7 +7030,6 @@
                    "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
                }
            ],
-            "peer": true,
            "dependencies": {
                "@babel/runtime": "^7.23.2"
            }
@ -7041,6 +7050,15 @@
                "cross-fetch": "4.0.0"
            }
        },
+        "node_modules/i18next-xhr-backend": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/i18next-xhr-backend/-/i18next-xhr-backend-3.2.2.tgz",
+            "integrity": "sha512-OtRf2Vo3IqAxsttQbpjYnmMML12IMB5e0fc5B7qKJFLScitYaXa1OhMX0n0X/3vrfFlpHL9Ro/H+ps4Ej2j7QQ==",
+            "deprecated": "replaced by i18next-http-backend",
+            "dependencies": {
+                "@babel/runtime": "^7.5.5"
+            }
+        },
        "node_modules/iconv-lite": {
            "version": "0.4.24",
            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "license": "ISC",
    "dependencies": {
        "@brojs/cli": "^1.3.0",
+        "@brojs/i18nextreactconfig": "^1.3.3",
        "@chakra-ui/icons": "^2.2.4",
        "@chakra-ui/react": "^2.4.2",
        "@emotion/react": "^11.4.1",
@ -25,6 +26,7 @@
        "@types/react": "^18.3.12",
        "express": "^4.21.1",
        "framer-motion": "^6.2.8",
+        "i18next": "^23.16.4",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "react-router-dom": "^6.27.0"
--- a/src/components/Masters/Masters.tsx
+++ b/src/components/Masters/Masters.tsx
@ -14,6 +14,7 @@ import {
 import { mastersData } from '../../mocks';
 import MasterItem from '../MasterItem';
 import MasterDrawer from '../MasterModal';
+import i18next from 'i18next';

 const TABLE_HEADERS = ['Имя', 'Актуальная занятость', 'Телефон', 'Действия'];

@ -25,7 +26,7 @@ const Masters = () => {
      <Flex justifyContent='space-between' alignItems='center' mb='5'>
        <Heading size='lg'>Мастера</Heading>
        <Button colorScheme='green' onClick={onOpen}>
-          + Добавить
+          + {i18next.t('dry-wash.arm.masters.add')}
        </Button>
      </Flex>
      <Table variant='simple' colorScheme='blackAlpha'>
--- a/src/components/OrderItem/OrderItem.tsx
+++ b/src/components/OrderItem/OrderItem.tsx
@ -1,5 +1,8 @@
 import React, { useState } from 'react';
 import { Td, Tr, Link, Select } from '@chakra-ui/react';
+import i18next from 'i18next';
+
+const statuses = ['pending', 'progress', 'working', 'canceled', 'complete'];

 const OrderItem = ({
  carNumber,
@ -22,11 +25,11 @@ const OrderItem = ({
          onChange={(e) => setStatus(e.target.value)}
          placeholder='Выберите статус'
        >
-          <option value='в ожидании'>в ожидании</option>
-          <option value='В процессе'>в процессе</option>
-          <option value='в работе'>в работе</option>
-          <option value='отменил'>отменил</option>
-          <option value='Завершено'>Завершено</option>
+          {statuses.map((status) => (
+            <option key={status} value={status}>
+              {i18next.t(`dry-wash.order.status.${status}`)}
+            </option>
+          ))}
        </Select>
      </Td>
      <Td>
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,19 +1,26 @@
- 
 /* eslint-disable react/display-name */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-
+import { i18nextReactInitConfig } from '@brojs/i18nextreactconfig';
 import App from './app';
+import i18next from 'i18next';

+i18next.t = i18next.t.bind(i18next);
+const i18nextPromise = i18nextReactInitConfig(i18next);
 export default () => <App />;

 let rootElement: ReactDOM.Root;

-export const mount = (Component, element = document.getElementById('app')) => {
+export const mount = async (
+  Component,
+  element = document.getElementById('app'),
+) => {
  const rootElement = ReactDOM.createRoot(element);
+  await i18nextPromise;
  rootElement.render(<Component />);
  if (module.hot) {
-    module.hot.accept('./app', () => {
+    module.hot.accept('./app', async () => {
+      await i18next.reloadResources();
      rootElement.render(<Component />);
    });
  }