feat: add i18next (#11)

Reviewed-on: #15

.gitignore

@@ -130,3 +130,4 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
+.idea

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "arrowParens": "always",
+  "max-len": ["error", 140, 2],
+  "tabWidth": 2,
+  "useTabs": false
+}

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

@@ -1,5 +1,5 @@
 {
-    "name": "dry-wash-pl",
+    "name": "dry-wash",
     "version": "0.0.0",
     "description": "<a id=\"readme-top\"></a>",
     "main": "./src/index.tsx",
@@ -8,16 +8,37 @@
         "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",
+        "@emotion/styled": "^11.3.0",
+        "@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",
+        "eslint": "^9.14.0",
+        "eslint-plugin-react": "^7.37.2",
+        "globals": "^15.11.0",
+        "prettier": "3.3.3",
+        "typescript-eslint": "^8.12.2"
     }
 }

src/app.tsx

@@ -1,12 +1,15 @@
-import React from "react";
-import { BrowserRouter } from "react-router-dom";
-import Routers from "./routes";
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import Routers from './routes';
+import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
 
 const App = () => {
   return (
-    <BrowserRouter>
-      <Routers></Routers>
-    </BrowserRouter>
+    <ChakraProvider theme={chakraTheme}>
+      <BrowserRouter>
+        <Routers></Routers>
+      </BrowserRouter>
+    </ChakraProvider>
   );
 };
 

src/components/LayoutArm/LayoutArm.tsx

@@ -0,0 +1,17 @@
+import { Box, Flex } from '@chakra-ui/react';
+import Sidebar from '../Sidebar';
+import Orders from '../Orders';
+import Masters from '../Masters';
+import React from 'react';
+
+const LayoutArm = ({ currentPage, onSelectPage }) => (
+  <Flex h='100vh'>
+    <Sidebar onSelectPage={onSelectPage} />
+    <Box flex='1' bg='gray.50'>
+      {currentPage === 'orders' && <Orders />}
+      {currentPage === 'masters' && <Masters />}
+    </Box>
+  </Flex>
+);
+
+export default LayoutArm;

src/components/LayoutArm/index.ts

@@ -0,0 +1 @@
+export { default } from './LayoutArm';

src/components/MasterActionsMenu/MasterActionsMenu.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton,
+} from '@chakra-ui/react';
+import { EditIcon } from '@chakra-ui/icons';
+
+const MasterActionsMenu = () => {
+  return (
+    <Menu>
+      <MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
+      <MenuList>
+        <MenuItem>Посмотреть профиль</MenuItem>
+        <MenuItem>Изменить расписание</MenuItem>
+        <MenuItem>Удалить мастера</MenuItem>
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default MasterActionsMenu;

src/components/MasterActionsMenu/index.ts

@@ -0,0 +1 @@
+export { default } from './MasterActionsMenu';

src/components/MasterItem/MasterItem.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react';
+import MasterActionsMenu from '../MasterActionsMenu';
+
+const MasterItem = ({ name, schedule, phone }) => {
+  return (
+    <Tr>
+      <Td>{name}</Td>
+      <Td>
+        <Stack direction='row'>
+          {schedule.map((time, index) => (
+            <Badge colorScheme={'green'} key={index}>
+              {time}
+            </Badge>
+          ))}
+        </Stack>
+      </Td>
+      <Td>
+        <Link href='tel:'>{phone}</Link>
+      </Td>
+      <Td>
+        <MasterActionsMenu />
+      </Td>
+    </Tr>
+  );
+};
+
+export default MasterItem;

src/components/MasterItem/index.ts

@@ -0,0 +1 @@
+export { default } from './MasterItem';

src/components/MasterModal/MasterDrawer.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+} from '@chakra-ui/react';
+
+const MasterDrawer = ({ isOpen, onClose }) => {
+  const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
+
+  const handleSave = () => {
+    console.log(`Сохранение мастера: ${newMaster}`);
+    onClose();
+  };
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} size='md'>
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerCloseButton />
+        <DrawerHeader>Добавить нового мастера</DrawerHeader>
+        <DrawerBody>
+          <FormControl mb='4'>
+            <FormLabel>ФИО</FormLabel>
+            <Input
+              value={newMaster.name}
+              onChange={(e) =>
+                setNewMaster({ ...newMaster, name: e.target.value })
+              }
+              placeholder='Введите ФИО'
+            />
+          </FormControl>
+          <FormControl>
+            <FormLabel>Номер телефона</FormLabel>
+            <Input
+              value={newMaster.phone}
+              onChange={(e) =>
+                setNewMaster({ ...newMaster, phone: e.target.value })
+              }
+              placeholder='Введите номер телефона'
+            />
+          </FormControl>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button colorScheme='teal' mr={3} onClick={handleSave}>
+            Сохранить
+          </Button>
+          <Button variant='ghost' onClick={onClose}>
+            Отменить
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default MasterDrawer;

src/components/MasterModal/index.ts

@@ -0,0 +1 @@
+export { default } from './MasterDrawer';

src/components/Masters/Masters.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  Box,
+  Heading,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Button,
+  useDisclosure,
+  Flex,
+} from '@chakra-ui/react';
+import { mastersData } from '../../mocks';
+import MasterItem from '../MasterItem';
+import MasterDrawer from '../MasterModal';
+import i18next from 'i18next';
+
+const TABLE_HEADERS = ['Имя', 'Актуальная занятость', 'Телефон', 'Действия'];
+
+const Masters = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <Box p='8'>
+      <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 key={name}>{name}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {mastersData.map((master, index) => (
+            <MasterItem key={index} {...master} />
+          ))}
+        </Tbody>
+      </Table>
+      <MasterDrawer isOpen={isOpen} onClose={onClose} />
+    </Box>
+  );
+};
+
+export default Masters;

src/components/Masters/index.ts

@@ -0,0 +1 @@
+export { default } from './Masters';

src/components/OrderItem/OrderItem.tsx

@@ -0,0 +1,43 @@
+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,
+  washTime,
+  orderDate,
+  status,
+  phone,
+  location,
+}) => {
+  const [statusSelect, setStatus] = useState(status);
+
+  return (
+    <Tr>
+      <Td>{carNumber}</Td>
+      <Td>{washTime}</Td>
+      <Td>{orderDate}</Td>
+      <Td>
+        <Select
+          value={statusSelect}
+          onChange={(e) => setStatus(e.target.value)}
+          placeholder='Выберите статус'
+        >
+          {statuses.map((status) => (
+            <option key={status} value={status}>
+              {i18next.t(`dry-wash.order.status.${status}`)}
+            </option>
+          ))}
+        </Select>
+      </Td>
+      <Td>
+        <Link href='tel:'>{phone}</Link>
+      </Td>
+      <Td>{location}</Td>
+    </Tr>
+  );
+};
+
+export default OrderItem;

src/components/OrderItem/index.ts

@@ -0,0 +1 @@
+export { default } from './OrderItem';

src/components/Orders/Orders.tsx

@@ -0,0 +1,38 @@
+import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
+import React from 'react';
+import { ordersData } from '../../mocks';
+import OrderItem from '../OrderItem';
+
+const Orders = () => {
+  const TABLE_HEADERS = [
+    'Номер машины',
+    'Время мойки',
+    'Дата заказа',
+    'Статус',
+    'Телефон',
+    'Расположение',
+  ];
+  return (
+    <Box p='8'>
+      <Heading size='lg' mb='5'>
+        Заказы
+      </Heading>
+      <Table variant='simple' colorScheme='blackAlpha'>
+        <Thead>
+          <Tr>
+            {TABLE_HEADERS.map((name, key) => (
+              <Th key={key}>{name}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {ordersData.map((order, index) => (
+            <OrderItem key={index} {...order} />
+          ))}
+        </Tbody>
+      </Table>
+    </Box>
+  );
+};
+
+export default Orders;

src/components/Orders/index.ts

@@ -0,0 +1 @@
+export { default } from './Orders';

src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,42 @@
+import { Box, Button, Heading, VStack } from '@chakra-ui/react';
+import React from 'react';
+import { Divider } from '@chakra-ui/react';
+
+const Sidebar = ({ onSelectPage }) => (
+  <Box
+    borderRight='1px solid black'
+    bg='gray.50'
+    color='white'
+    w='250px'
+    p='5'
+    pt='8'
+  >
+    <Heading color='green' size='lg' mb='5'>
+      Сухой мастер
+    </Heading>
+
+    <VStack align='start' spacing='4'>
+      <Divider />
+      <Button
+        onClick={() => onSelectPage('orders')}
+        w='100%'
+        colorScheme='green'
+        variant='ghost'
+      >
+        Заказы
+      </Button>
+      <Divider />
+      <Button
+        onClick={() => onSelectPage('masters')}
+        w='100%'
+        colorScheme='green'
+        variant='ghost'
+      >
+        Мастера
+      </Button>
+      <Divider />
+    </VStack>
+  </Box>
+);
+
+export default Sidebar;

src/components/Sidebar/index.ts

@@ -0,0 +1 @@
+export { default } from './Sidebar';

src/index.tsx

@@ -1,22 +1,28 @@
-/* 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';
-  
-export default () => <App/>;
-  
-let rootElement: ReactDOM.Root
-  
-export const mount = (Сomponent, element = document.getElementById('app')) => {
-  const rootElement = ReactDOM.createRoot(element);
-  rootElement.render(<Сomponent/>);
+import i18next from 'i18next';
 
-  if(module.hot) {
-      module.hot.accept('./app', ()=> {
-        rootElement.render(<Сomponent/>);
-      })
+i18next.t = i18next.t.bind(i18next);
+const i18nextPromise = i18nextReactInitConfig(i18next);
+export default () => <App />;
+
+let rootElement: ReactDOM.Root;
+
+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', async () => {
+      await i18next.reloadResources();
+      rootElement.render(<Component />);
+    });
   }
 };
 

src/mocks/index.ts

@@ -0,0 +1,35 @@
+export const mastersData = [
+  {
+    id: 'masters1',
+    name: 'Иван Иванов',
+    schedule: ['15:00 - 16:30', '17:00 - 18:00'],
+    phone: '+7 900 123 45 67',
+  },
+  {
+    id: 'masters2',
+    name: 'Сергей Петров',
+    schedule: ['10:00 - 12:30', '14:00 - 15:30', '16:00 - 17:00'],
+    phone: '+7 900 234 56 78',
+  },
+];
+
+export const ordersData = [
+  {
+    id: 'order1',
+    carNumber: 'A123BC',
+    washTime: '10:30',
+    orderDate: '2024-10-31',
+    status: 'progress',
+    phone: '79001234567',
+    location: 'Казань, ул. Баумана, 1',
+  },
+  {
+    id: 'order2',
+    carNumber: 'B456CD',
+    washTime: '11:00',
+    orderDate: '2024-10-31',
+    status: 'complete',
+    phone: '79002345678',
+    location: 'Казань, ул. Кремлёвская, 3',
+  },
+];

src/pages/arm/index.tsx

@@ -1,7 +1,10 @@
-import React from "react";
+import React, { useState } from 'react';
+import LayoutArm from '../../components/LayoutArm';
 
 const Page = () => {
-  return <h1>Arm </h1>;
+  const [currentPage, setCurrentPage] = useState('orders');
+
+  return <LayoutArm currentPage={currentPage} onSelectPage={setCurrentPage} />;
 };
 
 export default Page;

src/routes.tsx

@@ -1,15 +1,15 @@
-import React from "react";
-import { Routes, Route } from "react-router-dom";
-import Arm from "./pages/arm";
-import Order from "./pages/order-view";
-import Landing from "./pages/landing";
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import Arm from './pages/arm';
+import Order from './pages/order-view';
+import Landing from './pages/landing';
 
 const Routers = () => {
   return (
     <Routes>
-      <Route path="/dry-wash-pl" element={<Landing />}></Route>
-      <Route path="/dry-wash-pl/order" element={<Order />}></Route>
-      <Route path="/dry-wash-pl/arm" element={<Arm />}></Route>
+      <Route path='/dry-wash' element={<Landing />}></Route>
+      <Route path='/dry-wash/order' element={<Order />}></Route>
+      <Route path='/dry-wash/arm' element={<Arm />}></Route>
     </Routes>
   );
 };

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;

types.d.ts

@@ -0,0 +1,5 @@
+declare interface NodeModule {
+  hot?: {
+    accept: (path: string, callback: () => void) => void;
+  };
+}