feat: add i18next (#11)

Reviewed-on: #15

bro.config.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-require-imports */
 const pkg = require("./package");
 
 module.exports = {

eslint.config.mjs

@@ -0,0 +1,39 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import stylistic from '@stylistic/eslint-plugin';
+
+export default [
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    plugins: {
+      '@stylistic': stylistic
+    },
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn", // or "error"
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_",
+          "caughtErrorsIgnorePattern": "^_"
+        }
+      ],
+      "sort-imports": ["error", {
+        "ignoreCase": false,
+        "ignoreDeclarationSort": true,
+        "ignoreMemberSort": true,
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
+        "allowSeparatedGroups": true
+      }],
+      semi: ["error", "always"],
+      '@stylistic/indent': ['error', 2],
+      'react/prop-types': 'off'
+    },
+  }
+];

locales/ru.json

@@ -0,0 +1,5 @@
+{
+  "dry-wash.arm.masters.add": "Добавить",
+  "dry-wash.order.status.progress": "Выполняется",
+  "dry-wash.order.status.complete": "Завершено"
+}

package.json

@@ -8,13 +8,17 @@
         "start": "brojs server --port=8099 --with-open-browser",
         "build": "npm run clean && brojs build --dev",
         "build:prod": "npm run clean && brojs build",
-        "clean": "rimraf dist"
+        "clean": "rimraf dist",
+        "eslint": "npx eslint .",
+        "eslint:fix": "npx eslint . --fix",
+        "preversion": "npm run eslint"
     },
     "keywords": [],
     "author": "",
     "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",
@@ -22,12 +26,19 @@
         "@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"
     },
     "devDependencies": {
+        "@eslint/js": "^9.14.0",
+        "@stylistic/eslint-plugin": "^2.10.1",
         "@types/react-dom": "^18.3.1",
-        "prettier": "3.3.3"
+        "eslint": "^9.14.0",
+        "eslint-plugin-react": "^7.37.2",
+        "globals": "^15.11.0",
+        "prettier": "3.3.3",
+        "typescript-eslint": "^8.12.2"
     }
 }

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,14 +26,14 @@ 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'>
         <Thead>
           <Tr>
             {TABLE_HEADERS.map((name) => (
-              <Th>{name}</Th>
+              <Th key={name}>{name}</Th>
             ))}
           </Tr>
         </Thead>

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>

src/index.tsx

@@ -1,19 +1,26 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /* 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 />);
     });
   }

stubs/api/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-require-imports */
 const router = require('express').Router();
 
 module.exports = router;