npm install - ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ
npm run start:dev ΠΈΠ»ΠΈ npm run start:dev:vite - Π·Π°ΠΏΡΡΠΊ ΡΠ΅ΡΠ²Π΅ΡΠ° + frontend ΠΏΡΠΎΠ΅ΠΊΡΠ° Π² dev ΡΠ΅ΠΆΠΈΠΌΠ΅
npm run start
- ΠΠ°ΠΏΡΡΠΊ frontend ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π° webpack dev servernpm run start:vite
- ΠΠ°ΠΏΡΡΠΊ frontend ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π° vitenpm run start:dev
- ΠΠ°ΠΏΡΡΠΊ frontend ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π° webpack dev server + backendnpm run start:dev:vite
- ΠΠ°ΠΏΡΡΠΊ frontend ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π° vite + backendnpm run start:dev:server
- ΠΠ°ΠΏΡΡΠΊ backend ΡΠ΅ΡΠ²Π΅ΡΠ°npm run build:prod
- Π‘Π±ΠΎΡΠΊΠ° Π² prod ΡΠ΅ΠΆΠΈΠΌΠ΅npm run build:dev
- Π‘Π±ΠΎΡΠΊΠ° Π² dev ΡΠ΅ΠΆΠΈΠΌΠ΅ (Π½Π΅ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½)npm run lint:ts
- ΠΡΠΎΠ²Π΅ΡΠΊΠ° ts ΡΠ°ΠΉΠ»ΠΎΠ² Π»ΠΈΠ½ΡΠ΅ΡΠΎΠΌnpm run lint:ts:fix
- ΠΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ts ΡΠ°ΠΉΠ»ΠΎΠ² Π»ΠΈΠ½ΡΠ΅ΡΠΎΠΌnpm run lint:scss
- ΠΡΠΎΠ²Π΅ΡΠΊΠ° scss ΡΠ°ΠΉΠ»ΠΎΠ² style Π»ΠΈΠ½ΡΠ΅ΡΠΎΠΌnpm run lint:scss:fix
- ΠΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ scss ΡΠ°ΠΉΠ»ΠΎΠ² style Π»ΠΈΠ½ΡΠ΅ΡΠΎΠΌnpm run test:unit
- Π₯Π°ΠΏΡΡΠΊ unit ΡΠ΅ΡΡΠΎΠ² Ρ jestnpm run test:ui
- Π₯Π°ΠΏΡΡΠΊ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ½ΡΡ ΡΠ΅ΡΡΠΎΠ² Ρ lokinpm run test:ui:ok
- ΠΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΠ΅ Π½ΠΎΠ²ΡΡ ΡΠΊΡΠΈΠ½ΡΠΎΡΠΎΠ²npm run test:ui:ci
- ΠΠ°ΠΏΡΡΠΊ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ½ΡΡ ΡΠ΅ΡΡΠΎΠ² Π² CInpm run test:ui:report
- ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΠΎΡΡΠ΅ΡΠ° Π΄Π»Ρ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ½ΡΡ ΡΠ΅ΡΡΠΎΠ²npm run test:ui:json
- ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ json ΠΎΡΡΠ΅ΡΠ° Π΄Π»Ρ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ½ΡΡ ΡΠ΅ΡΡΠΎΠ²npm run test:ui:html
- ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ HTML ΠΎΡΡΠ΅ΡΠ° Π΄Π»Ρ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ½ΡΡ ΡΠ΅ΡΡΠΎΠ²npm run storybook
- Π·Π°ΠΏΡΡΠΊ Storybooknpm run storybook:build
- Π‘Π±ΠΎΡΠΊΠ° storybook Π±ΠΈΠ»Π΄Π°npm run prepare
- ΠΏΡΠ΅ΠΊΠΎΠΌΠΌΠΈΡ Ρ ΡΠΊΠΈnpm run generate:slice
- Π‘ΠΊΡΠΈΠΏΡ Π΄Π»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ FSD ΡΠ»Π°ΠΉΡΠΎΠ²
ΠΡΠΎΠ΅ΠΊΡ Π½Π°ΠΏΠΈΡΠ°Π½ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ Feature sliced design
Π‘ΡΡΠ»ΠΊΠ° Π½Π° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ - feature sliced design
Π ΠΏΡΠΎΠ΅ΠΊΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° i18next Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄Π°ΠΌΠΈ. Π€Π°ΠΉΠ»Ρ Ρ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄Π°ΠΌΠΈ Ρ ΡΠ°Π½ΡΡΡΡ Π² public/locales.
ΠΠ»Ρ ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ webstorm/vscode
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ i18next - https://react.i18next.com/
Π ΠΏΡΠΎΠ΅ΠΊΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ 4 Π²ΠΈΠ΄Π° ΡΠ΅ΡΡΠΎΠ²:
- ΠΠ±ΡΡΠ½ΡΠ΅ unit ΡΠ΅ΡΡΡ Π½Π° jest -
npm run test:unit
- Π’Π΅ΡΡΡ Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Ρ React testing library -
npm run test:unit
- Π‘ΠΊΡΠΈΠ½ΡΠΎΡΠ½ΠΎΠ΅ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Ρ loki
npm run test:ui
- e2e ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Ρ Cypress
npm run test:e2e
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΡΠ΅ΡΡΠ°Ρ - Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π ΠΏΡΠΎΠ΅ΠΊΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ eslint Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ typescript ΠΊΠΎΠ΄Π° ΠΈ stylelint Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² ΡΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ.
Π’Π°ΠΊΠΆΠ΅ Π΄Π»Ρ ΡΡΡΠΎΠ³ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π³Π»Π°Π²Π½ΡΡ Π°ΡΡ ΠΈΡΠ΅ΠΊΡΡΡΠ½ΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ eslint plugin eslint-plugin-ulbi-tv-plugin, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ 3 ΠΏΡΠ°Π²ΠΈΠ»Π°
- path-checker - Π·Π°ΠΏΡΠ΅ΡΠ°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ ΠΈΠΌΠΏΠΎΡΡΡ Π² ΡΠ°ΠΌΠΊΠ°Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠΎΠ΄ΡΠ»Ρ
- layer-imports - ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»ΠΎΠ΅Π² Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ FSD (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ widgets Π½Π΅Π»ΡΠ·Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² features ΠΈ entitites)
- public-api-imports - ΡΠ°Π·ΡΠ΅ΡΠ°Π΅Ρ ΠΈΠΌΠΏΠΎΡΡ ΠΈΠ· Π΄ΡΡΠ³ΠΈΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ· public api. ΠΠΌΠ΅Π΅Ρ auto fix
npm run lint:ts
- ΠΡΠΎΠ²Π΅ΡΠΊΠ° ts ΡΠ°ΠΉΠ»ΠΎΠ² Π»ΠΈΠ½ΡΠ΅ΡΠΎΠΌnpm run lint:ts:fix
- ΠΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ts ΡΠ°ΠΉΠ»ΠΎΠ² Π»ΠΈΠ½ΡΠ΅ΡΠΎΠΌnpm run lint:scss
- ΠΡΠΎΠ²Π΅ΡΠΊΠ° scss ΡΠ°ΠΉΠ»ΠΎΠ² style Π»ΠΈΠ½ΡΠ΅ΡΠΎΠΌnpm run lint:scss:fix
- ΠΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ scss ΡΠ°ΠΉΠ»ΠΎΠ² style Π»ΠΈΠ½ΡΠ΅ΡΠΎΠΌ
Π ΠΏΡΠΎΠ΅ΠΊΡΠ΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΡΡΠΎΡΠΈ-ΠΊΠ΅ΠΉΡΡ. ΠΠ°ΠΏΡΠΎΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ ΠΌΠΎΠΊΠ°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ storybook-addon-mock.
Π€Π°ΠΉΠ» ΡΠΎ ΡΡΠΎΡΠΈΠΊΠ΅ΠΉΡΠ°ΠΌΠΈ ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΡΠ΄ΠΎΠΌ Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ .stories.tsx
ΠΠ°ΠΏΡΡΡΠΈΡΡ ΡΡΠΎΡΠΈΠ±ΡΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ:
npm run storybook
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Storybook
ΠΡΠΈΠΌΠ΅Ρ:
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
import { Button, ButtonSize, ButtonTheme } from './Button';
import { Theme } from '@/shared/const/theme';
export default {
title: 'shared/Button',
component: Button,
argTypes: {
backgroundColor: { control: 'color' },
},
} as ComponentMeta<typeof Button>;
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
children: 'Text',
};
export const Clear = Template.bind({});
Clear.args = {
children: 'Text',
theme: ButtonTheme.CLEAR,
};
ΠΠ»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ 2 ΠΊΠΎΠ½ΡΠΈΠ³Π°:
- Webpack - ./config/build
- vite - vite.config.ts
ΠΠ±Π° ΡΠ±ΠΎΡΡΠΈΠΊΠ° Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½Ρ ΠΏΠΎΠ΄ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠΈΡΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Ρ ΡΠ°Π½ΠΈΡΡΡ Π² /config
- /config/babel - babel
- /config/build - ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ webpack
- /config/jest - ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΡΠ΅ΡΡΠΎΠ²ΠΎΠΉ ΡΡΠ΅Π΄Ρ
- /config/storybook - ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΡΡΠΎΡΠΈΠ±ΡΠΊΠ°
Π ΠΏΠ°ΠΏΠΊΠ΅ scripts
Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΊΡΠΈΠΏΡΡ Π΄Π»Ρ ΡΠ΅ΡΠ°ΠΊΡΠΎΡΠΈΠ½Π³Π°\ΡΠΏΡΠΎΡΠ΅Π½ΠΈΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΊΠΎΠ΄Π°\Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ ΠΎΡΡΠ΅ΡΠΎΠ² ΠΈ ΡΠ΄.
ΠΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ github actions Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² /.github/workflows. Π ci ΠΏΡΠΎΠ³ΠΎΠ½ΡΡΡΡΡ Π²ΡΠ΅ Π²ΠΈΠ΄Ρ ΡΠ΅ΡΡΠΎΠ², ΡΠ±ΠΎΡΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈ ΡΡΠΎΡΠΈΠ±ΡΠΊΠ°, Π»ΠΈΠ½ΡΠΈΠ½Π³.
Π ΠΏΡΠ΅ΠΊΠΎΠΌΠΌΠΈΡ Ρ ΡΠΊΠ°Ρ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡ Π»ΠΈΠ½ΡΠ΅ΡΠ°ΠΌΠΈ, ΠΊΠΎΠ½ΡΠΈΠ³ Π² /.husky
ΠΠ·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ redux toolkit. ΠΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠ΅ΡΠ΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΡΡΠ½ΠΎΡΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½ΠΎΡΠΌΠ°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ EntityAdapter
ΠΠ°ΠΏΡΠΎΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ RTK query
ΠΠ»Ρ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ΅Π΄ΡΡΠ΅ΡΠΎΠ² (ΡΡΠΎΠ±Ρ Π½Π΅ ΡΡΠ½ΡΡΡ ΠΈΡ Π² ΠΎΠ±ΡΠΈΠΉ Π±Π°Π½Π΄Π») ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ DynamicModuleLoader