add locales

eslint.config.mjs

@@ -16,6 +16,7 @@ export default [
     },
     "rules": {
       "no-unused-vars": "off",
+      "react/prop-types": "off",
       "@typescript-eslint/no-unused-vars": [
         "warn", // or "error"
         {

locales/ru.json

@@ -0,0 +1,3 @@
+{
+    "key.to.override": "name: {{name}}"
+}

package-lock.json

@@ -9,7 +9,7 @@
             "version": "0.0.0",
             "license": "ISC",
             "dependencies": {
-                "@brojs/cli": "^1.3.0",
+                "@brojs/cli": "1.4.0-alpha.2",
                 "@chakra-ui/react": "^2.10.3",
                 "@eslint/js": "^9.11.0",
                 "@stylistic/eslint-plugin": "^2.8.0",
@@ -1726,22 +1726,20 @@
             }
         },
         "node_modules/@brojs/cli": {
-            "version": "1.3.0",
+            "version": "1.4.0-alpha.2",
-            "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Fcli/-/1.3.0/cli-1.3.0.tgz",
+            "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Fcli/-/1.4.0-alpha.2/cli-1.4.0-alpha.2.tgz",
-            "integrity": "sha512-qQYpMqglmVsd5Wt32NKKAGqjJQYKr1xXXNa5sVZkAiJTUHcEu3868SWB8voPQpxuQSogPkjuRvEjjrAF2mf+jA==",
+            "integrity": "sha512-1bXiz2Gix1MLM91asWLIh+d054K2jr8pOnaiMopUpefGaO6NYlYUQKTUebo4M+QBF+2maym7wRdxDblgVJuvjg==",
             "license": "ISC",
             "dependencies": {
                 "@brojs/dev-server": "^1.3.0",
                 "@brojs/fire.app": "^1.3.0",
+                "@brojs/i18nextreactconfig": "^1.4.0-alpha.1",
                 "@brojs/templates": "^1.3.0",
                 "@brojs/utils": "^1.3.0",
                 "@brojs/webpack-config": "^1.3.0",
                 "axios": "^1.7.2",
                 "chalk": "^5.3.0",
-                "commander": "^12.1.0",
+                "commander": "^12.1.0"
-                "i18next-browser-languagedetector": "^8.0.0",
-                "i18next-http-backend": "^2.5.2",
-                "react-i18next": "^14.1.2"
             },
             "bin": {
                 "brojs": "bin/cli.js"
@@ -1770,6 +1768,18 @@
             "integrity": "sha512-4jt/o944FttMUDU5fnGknaa8alz/0FaFATtgc5lVcsJ1Us4TKamHXtx4aj1hw6Pe89aBu61KLy8aCwNE24O0Mg==",
             "license": "ISC"
         },
+        "node_modules/@brojs/i18nextreactconfig": {
+            "version": "1.4.0-alpha.1",
+            "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Fi18nextreactconfig/-/1.4.0-alpha.1/i18nextreactconfig-1.4.0-alpha.1.tgz",
+            "integrity": "sha512-pFCEFw8cvfUlqFGqzr94i9qaq6DIJX6AotLZXXYvqPzouWlc+1f/O68NFw3S3Eqd/dW4pt3WyeqKqHaEYtlMpg==",
+            "license": "ISC",
+            "dependencies": {
+                "i18next": "^23.16.4",
+                "i18next-browser-languagedetector": "^8.0.0",
+                "i18next-http-backend": "^2.6.2",
+                "react-i18next": "^15.1.0"
+            }
+        },
         "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",
@@ -6373,9 +6383,9 @@
             }
         },
         "node_modules/i18next": {
-            "version": "23.16.2",
+            "version": "23.16.4",
-            "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.2.tgz",
+            "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.4.tgz",
-            "integrity": "sha512-dFyxwLXxEQK32f6tITBMaRht25mZPJhQ0WbC0p3bO2mWBal9lABTMqSka5k+GLSRWLzeJBKDpH7BeIA9TZI7Jg==",
+            "integrity": "sha512-9NIYBVy9cs4wIqzurf7nLXPyf3R78xYbxExVqHLK9od3038rjpyOEzW+XB130kZ1N4PZ9inTtJ471CRJ4Ituyg==",
             "funding": [
                 {
                     "type": "individual",
@@ -6391,7 +6401,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@babel/runtime": "^7.23.2"
             }
@@ -8469,12 +8478,12 @@
             }
         },
         "node_modules/react-i18next": {
-            "version": "14.1.3",
+            "version": "15.1.0",
-            "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.3.tgz",
+            "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.1.0.tgz",
-            "integrity": "sha512-wZnpfunU6UIAiJ+bxwOiTmBOAaB14ha97MjOEnLGac2RJ+h/maIYXZuTHlmyqQVX1UVHmU1YDTQ5vxLmwfXTjw==",
+            "integrity": "sha512-zj3nJynMnZsy2gPZiOTC7XctCY5eQGqT3tcKMmfJWC9FMvgd+960w/adq61j8iPzpwmsXejqID9qC3Mqu1Xu2Q==",
             "license": "MIT",
             "dependencies": {
-                "@babel/runtime": "^7.23.9",
+                "@babel/runtime": "^7.25.0",
                 "html-parse-stringify": "^3.0.1"
             },
             "peerDependencies": {

package.json

@@ -16,7 +16,7 @@
     "license": "ISC",
     "description": "",
     "dependencies": {
-        "@brojs/cli": "^1.3.0",
+        "@brojs/cli": "1.4.0-alpha.2",
         "@chakra-ui/react": "^2.10.3",
         "@eslint/js": "^9.11.0",
         "@stylistic/eslint-plugin": "^2.8.0",

src/components/profile/profile.tsx

@@ -1,37 +1,70 @@
 import {
   Avatar,
   Box,
+  Button,
   Card,
   CardBody,
   CardFooter,
   CardHeader,
+  Center,
   HStack,
   Heading,
   Icon,
+  Input,
   Text,
+  VStack,
 } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
 import { FaRegStar, FaStar } from 'react-icons/fa6'
+import { Link, generatePath } from 'react-router-dom'
+import React, { memo, useCallback, useState } from 'react'
 
-import React, { useState } from 'react'
+import { URLs } from '../../__data__/urls'
 
 type User = Record<string, unknown> & {
+  id: string
   name: string
   avatar?: string
   rated: number
+  friends?: User[]
 }
 
-export const Profile = ({ user }: { user: User }) => {
+export const Profile = ({
+  user,
+  isLink,
+  title,
+}: {
+  user: User
+  isLink?: boolean
+  title?: string
+}) => {
   const [rated, setRated] = useState(user.rated || 0)
+  const [isTrue, setTrue] = useState(false)
+  const { t } = useTranslation()
+
+  const handleSubmit = useCallback(() => {
+    fetch('/#')
+  }, [])
+
   return (
     <Box mt={3} borderWidth="1px" p={3} overflowX="hidden">
-      <Heading as="h2">Данные профиля</Heading>
+      <Heading as="h2">{title || 'Данные профиля'}</Heading>
       <Box m={3}>
         <Card width={'fit-content'} shadow="2xl">
           <CardHeader>
-            <Avatar size="xl" pt={1} src={user.avatar as string} />
+            <Center>
+              <Avatar size="xl" pt={1} src={user.avatar as string} />
+            </Center>
           </CardHeader>
           <CardBody>
-            <Text fontWeight="bold">Имя: {user.name.toUpperCase()}</Text>
+            {isLink ? (
+              <Link to={generatePath(URLs.by.url, { userId: user.id })}>
+                Имя: {user.name.toUpperCase()}
+                {t('key.to.override', { name: user.name.toUpperCase() })}
+              </Link>
+            ) : (
+              <Text fontWeight="bold">Имя: {user.name.toUpperCase()}</Text>
+            )}
           </CardBody>
           <CardFooter>
             <HStack>
@@ -54,13 +87,80 @@ export const Profile = ({ user }: { user: User }) => {
                   >
                     <FaStar />
                   </Icon>
-                ),
+                )
               )}
             </HStack>
           </CardFooter>
         </Card>
+        {!isLink && <Form initialState="" onSubmit={handleSubmit} />}
+        <Box mt={3}>
+          {user.friends &&
+            user.friends.map((friend) => (
+              <Profile title="Друг" key={user.id} user={friend} isLink />
+            ))}
+        </Box>
       </Box>
-      <pre>{JSON.stringify(user, null, 4)}</pre>
+      {!isLink && (
+        <Box mt={3}>{isTrue ? <Counter key={1} /> : <Counter key={2} />}</Box>
+      )}
+      <Button onClick={() => setTrue(!isTrue)}>Switch</Button>
     </Box>
   )
 }
+
+const Form = memo<{ initialState: string; onSubmit(value: string): void }>(
+  ({ initialState, onSubmit }) => {
+    const [message, setMessage] = useState(initialState)
+
+    const handleMessageChange = (event) => {
+      setMessage(event.target.value)
+    }
+
+    return (
+      <Box mt={3} mb={3}>
+        <Text fontWeight="bold">Написать сообщение:</Text>
+
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            onSubmit(message)
+          }}
+        >
+          <Box
+            bg="gray.100"
+            p={4}
+            borderRadius={3}
+            borderWidth={1}
+            mt={3}
+            mb={3}
+            rounded="md"
+          >
+            <label htmlFor="message">Сообщение:</label>
+            <Input
+              placeholder="Отпавим весточку?"
+              value={message}
+              onChange={handleMessageChange}
+              id="message"
+            />
+          </Box>
+          <Button type="submit">Отправить</Button>
+        </form>
+      </Box>
+    )
+  },
+)
+
+Form.displayName = 'FormMemo'
+
+const Counter = () => {
+  const [value, setValue] = useState(0)
+
+  return (
+    <VStack>
+      <Heading>{value}</Heading>
+
+      <Button onClick={() => setValue(value + 1)}>+</Button>
+      <Button onClick={() => setValue(value - 1)}>-</Button>
+    </VStack>
+  )
+}

src/dashboard.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Navigate, Route, Routes } from 'react-router-dom'
+import { Container } from '@chakra-ui/react'
 
 import { URLs } from './__data__/urls'
 
@@ -13,7 +14,7 @@ export const Dashboard = () => {
         path={URLs.baseUrl}
         element={<Navigate replace to={URLs.toNotFound.url} />}
       />
-      <Route path={URLs.by.url} element={<ByPage />} />
+      <Route path={URLs.by.url} element={<Container maxW="container.xl"><ByPage /></Container>} />
       <Route path="*" element={<NotFound />} />
     </Routes>
   )

src/index.tsx

@@ -2,6 +2,11 @@
 /* eslint-disable react/display-name */
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { i18nextReactInitConfig } from '@brojs/cli'
+import i18next from 'i18next'
+
+i18next.t = i18next.t.bind(i18next)
+const config = i18nextReactInitConfig(i18next)
   
 import App from './app'
   
@@ -9,7 +14,8 @@ export default () => <App/>
   
 let rootElement: ReactDOM.Root
   
-export const mount = (Сomponent, element = document.getElementById('app')) => {
+export const mount = async (Сomponent, element = document.getElementById('app')) => {
+  await config
   rootElement = ReactDOM.createRoot(element)
   rootElement.render(<Сomponent/>)
 

src/pages/by.tsx

@@ -1,31 +1,56 @@
 import { Container, Heading } from '@chakra-ui/react'
-import React from 'react'
+import React, { useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { Profile } from '../components'
 
 const users = {
   'some-user-id': {
+    id: 'some-user-id',
     name: 'alexandr',
-    secondName: null,
+    surname: null,
     email: null,
     rated: 3,
-    avatar: 'https://www.gravatar.com/avatar/6529e885535ef67a3fad810ad71167c2c03f79480936e9b3a714731753cbb47e?d=robohash'
+    avatar:
-  }
+      'https://www.gravatar.com/avatar/6529e885535ef67a3fad810ad71167c2c03f79480936e9b3a714731753cbb47e?d=robohash',
+    friends: [
+      {
+        id: '2',
+        name: 'not alexandr',
+        surname: null,
+        email: null,
+        rated: 2,
+        avatar: 'https://www.gravatar.com/avatar/6e?d=robohash',
+      },
+    ],
+  },
+  '2': {
+    id: '2',
+    name: 'not alexandr',
+    surname: null,
+    email: null,
+    rated: 2,
+    avatar: 'https://www.gravatar.com/avatar/6e?d=robohash',
+    friends: [
+      {
+        id: 'some-user-id',
+        name: 'alexandr',
+        surname: null,
+        email: null,
+        rated: 3,
+        avatar:
+          'https://www.gravatar.com/avatar/6529e885535ef67a3fad810ad71167c2c03f79480936e9b3a714731753cbb47e?d=robohash',
+      },
+    ],
+  },
 }
 
 export const ByPage = () => {
   const params = useParams()
 
-  const user = users[params.userId]
+  if (!users[params.userId]) {
+    return <Heading as="h2">Пользователь не найден</Heading>
+  }
 
-  return (
+  return <Profile key={users[params.userId].id} user={users[params.userId]} />
-    <Container maxW="container.xl">
-      {user ? (
-        <Profile user={user} />
-      ) : (
-        <Heading as="h2">Пользователь не найден</Heading>
-      )}
-    </Container>
-  )
 }