add locales

This commit is contained in:
Primakov Alexandr Alexandrovich 2024-11-04 11:31:59 +03:00
parent 65e20202fb
commit f435d7b25c
8 changed files with 185 additions and 40 deletions

View File

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

3
locales/ru.json Normal file
View File

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

41
package-lock.json generated
View File

@ -9,7 +9,7 @@
"version": "0.0.0", "version": "0.0.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@brojs/cli": "^1.3.0", "@brojs/cli": "1.4.0-alpha.2",
"@chakra-ui/react": "^2.10.3", "@chakra-ui/react": "^2.10.3",
"@eslint/js": "^9.11.0", "@eslint/js": "^9.11.0",
"@stylistic/eslint-plugin": "^2.8.0", "@stylistic/eslint-plugin": "^2.8.0",
@ -1726,22 +1726,20 @@
} }
}, },
"node_modules/@brojs/cli": { "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", "license": "ISC",
"dependencies": { "dependencies": {
"@brojs/dev-server": "^1.3.0", "@brojs/dev-server": "^1.3.0",
"@brojs/fire.app": "^1.3.0", "@brojs/fire.app": "^1.3.0",
"@brojs/i18nextreactconfig": "^1.4.0-alpha.1",
"@brojs/templates": "^1.3.0", "@brojs/templates": "^1.3.0",
"@brojs/utils": "^1.3.0", "@brojs/utils": "^1.3.0",
"@brojs/webpack-config": "^1.3.0", "@brojs/webpack-config": "^1.3.0",
"axios": "^1.7.2", "axios": "^1.7.2",
"chalk": "^5.3.0", "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": { "bin": {
"brojs": "bin/cli.js" "brojs": "bin/cli.js"
@ -1770,6 +1768,18 @@
"integrity": "sha512-4jt/o944FttMUDU5fnGknaa8alz/0FaFATtgc5lVcsJ1Us4TKamHXtx4aj1hw6Pe89aBu61KLy8aCwNE24O0Mg==", "integrity": "sha512-4jt/o944FttMUDU5fnGknaa8alz/0FaFATtgc5lVcsJ1Us4TKamHXtx4aj1hw6Pe89aBu61KLy8aCwNE24O0Mg==",
"license": "ISC" "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": { "node_modules/@brojs/templates": {
"version": "1.3.0", "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", "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": { "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": [ "funding": [
{ {
"type": "individual", "type": "individual",
@ -6391,7 +6401,6 @@
} }
], ],
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@babel/runtime": "^7.23.2" "@babel/runtime": "^7.23.2"
} }
@ -8469,12 +8478,12 @@
} }
}, },
"node_modules/react-i18next": { "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", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.23.9", "@babel/runtime": "^7.25.0",
"html-parse-stringify": "^3.0.1" "html-parse-stringify": "^3.0.1"
}, },
"peerDependencies": { "peerDependencies": {

View File

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

View File

@ -1,37 +1,70 @@
import { import {
Avatar, Avatar,
Box, Box,
Button,
Card, Card,
CardBody, CardBody,
CardFooter, CardFooter,
CardHeader, CardHeader,
Center,
HStack, HStack,
Heading, Heading,
Icon, Icon,
Input,
Text, Text,
VStack,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'
import { FaRegStar, FaStar } from 'react-icons/fa6' 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> & { type User = Record<string, unknown> & {
id: string
name: string name: string
avatar?: string avatar?: string
rated: number 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 [rated, setRated] = useState(user.rated || 0)
const [isTrue, setTrue] = useState(false)
const { t } = useTranslation()
const handleSubmit = useCallback(() => {
fetch('/#')
}, [])
return ( return (
<Box mt={3} borderWidth="1px" p={3} overflowX="hidden"> <Box mt={3} borderWidth="1px" p={3} overflowX="hidden">
<Heading as="h2">Данные профиля</Heading> <Heading as="h2">{title || 'Данные профиля'}</Heading>
<Box m={3}> <Box m={3}>
<Card width={'fit-content'} shadow="2xl"> <Card width={'fit-content'} shadow="2xl">
<CardHeader> <CardHeader>
<Center>
<Avatar size="xl" pt={1} src={user.avatar as string} /> <Avatar size="xl" pt={1} src={user.avatar as string} />
</Center>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
{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> <Text fontWeight="bold">Имя: {user.name.toUpperCase()}</Text>
)}
</CardBody> </CardBody>
<CardFooter> <CardFooter>
<HStack> <HStack>
@ -54,13 +87,80 @@ export const Profile = ({ user }: { user: User }) => {
> >
<FaStar /> <FaStar />
</Icon> </Icon>
), )
)} )}
</HStack> </HStack>
</CardFooter> </CardFooter>
</Card> </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> </Box>
{!isLink && (
<Box mt={3}>{isTrue ? <Counter key={1} /> : <Counter key={2} />}</Box>
)}
<Button onClick={() => setTrue(!isTrue)}>Switch</Button>
</Box> </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>
)
}

View File

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

View File

@ -2,6 +2,11 @@
/* eslint-disable react/display-name */ /* eslint-disable react/display-name */
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom/client' 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' import App from './app'
@ -9,7 +14,8 @@ export default () => <App/>
let rootElement: ReactDOM.Root 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 = ReactDOM.createRoot(element)
rootElement.render(<Сomponent/>) rootElement.render(<Сomponent/>)

View File

@ -1,31 +1,56 @@
import { Container, Heading } from '@chakra-ui/react' import { Container, Heading } from '@chakra-ui/react'
import React from 'react' import React, { useState } from 'react'
import { useParams } from 'react-router-dom' import { useParams } from 'react-router-dom'
import { Profile } from '../components' import { Profile } from '../components'
const users = { const users = {
'some-user-id': { 'some-user-id': {
id: 'some-user-id',
name: 'alexandr', name: 'alexandr',
secondName: null, surname: null,
email: null, email: null,
rated: 3, 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 = () => { export const ByPage = () => {
const params = useParams() 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>
)
} }