diff --git a/README.md b/README.md index 3a9f21b8..c9c63c0e 100644 --- a/README.md +++ b/README.md @@ -1 +1,165 @@ # 🚀 production-project + +## Launch the project + +``` +npm ci - to install dependencies +npm run start:dev or npm run start:dev:vite - to launch client and backend part of the project +``` +---- + +## Scripts + +- `npm run start` - Running a client part on webpack dev server +- `npm run start:vite` - Running a client part on vite +- `npm run start:dev` - Running a client part on webpack and a backend part +- `npm run start:dev:vite` - Running a client part on vite and a backend part +- `npm run start:dev:server` - Running a backend server +- `npm run build:prod` - Build in prod mode +- `npm run build:dev` - Build in dev mode (without minimization) +- `npm run lint:ts` - Running eslint on .ts and .tsx files +- `npm run lint:ts:fix` - Running eslint fix on .ts and .tsx files +- `npm run lint:scss` - Running stylelint on style files +- `npm run lint:scss:fix` - Running stylelint fix on style files +- `npm run test:unit` - Running unit tests with jest +- `npm run test:ui` - Running screenshots tests with loki +- `npm run test:ui:ok` - Confirmation of new screenshots +- `npm run test:ui:ci` - Running screenshots tests in CI +- `npm run test:ui:json` - Generating a json report for screenshot tests +- `npm run test:ui:html` - Generating HTML report for screenshot tests +- `npm run test:ui:report` - Generating a full report for screenshot tests +- `npm run storybook` - Running storybook +- `npm run storybook:build` - Build storybook +- `npm run prepare` - Pre-commit hooks + +---- + +## Project architecture + +The project is written in accordance with [FSD (Feature sliced design)](https://feature-sliced.design/ru/docs/get-started/overview) + +---- + +## Working with translations + +The project uses the [i18next](https://www.i18next.com/) library to work with translations. +Translation files are stored in public/locales. + +For comfortable work, we recommend installing the plugin for webstorm/vscode **I18nSupport**. + +---- + +## Tests + +The project uses 4 types of tests: +1) Regular unit tests on jest - `npm run test:unit` +2) Component tests with React testing library -`npm run test:unit` +3) Screenshot testing with loki `npm run test:ui` +4) e2e testing with Cypress `npm run test:e2e` + +[Read more about tests](/docs/tests.md) + +---- + +## Linting + +The project uses eslint to check typescript code and stylelint to check style files. + +Also for strict control of the main architectural principles it uses own eslint plugin [**eslint-plugin-fsd-checker**](https://github.com/sashtje/eslint-plugin-fsd-checker), +which consists 3 rules: +1) **path-checker** - prohibits the use of absolute imports within one module; +2) **public-api-imports** - allows import from other modules only from public api. Has auto fix; +3) **layer-imports** - checks the correct use of layers in terms of FSD (import from overlying layers cannot be used in underlying layers); + +---- + +## Running linters + +- `npm run lint:ts` - Running eslint on .ts and .tsx files +- `npm run lint:ts:fix` - Running eslint fix on .ts and .tsx files +- `npm run lint:scss` - Running stylelint on style files +- `npm run lint:scss:fix` - Running stylelint fix on style files линтером + +---- + +## Storybook + +The project describes story cases for each component. +Requests to the server are mocked using storybook-addon-mock. + +A file with story cases is created next to the component with the extension .stories.tsx + +The storybook can be running with the command: +- `npm run storybook` + +[Read more about Storybook](/docs/storybook.md) + +---- + +## Project configuration + +For development, the project contains 2 configs: +1. `Webpack` - ./config/build +2. `vite` - vite.config.ts + +Both builders are adapted to the main features of the application. + +All configuration of webpack is stored in /config +- /config/babel - babel +- /config/build - configuration of webpack +- /config/jest - configuration of tests +- /config/storybook - configuration of storybook + +The folder `scripts` contains various scripts for refactoring and report generation. + +---- + +## CI pipeline and pre commit hooks + +The Github actions configuration is in /.github/workflows. +All types of tests, project building and storybook assembly, and linting are run in ci. + +In precommit hooks we check the project with linters, config is located in /.husky + +---- + +## Working with data + +Interaction with data is carried out using the **Redux Toolkit**. +If possible, reused entities should be normalized using EntityAdapter + +Requests to the server are sent using [**RTK query**](/src/shared/api/rtkApi.ts) + +For asynchronous connection of reducers (so as not to pull them into a common bundle) it is used +[**DynamicModuleLoader**](/src/shared/lib/components/DynamicModuleLoader/DynamicModuleLoader.tsx) + +---- + +## Entities + +- [Article](/src/entities/Article) +- [Comment](/src/entities/Comment) +- [Counter](/src/entities/Counter) +- [Country](/src/entities/Country) +- [Currency](/src/entities/Currency) +- [Notification](/src/entities/Notification) +- [Profile](/src/entities/Profile) +- [Rating](/src/entities/Rating) +- [User](/src/entities/User) + +---- + +## Features + +- [addCommentForm](/src/features/addCommentForm) +- [articleRating](/src/features/articleRating) +- [articleRecommendationsList](/src/features/articleRecommendationsList) +- [authByUsername](/src/features/authByUsername) +- [avatarDropdown](/src/features/avatarDropdown) +- [editableProfileCard](/src/features/editableProfileCard) +- [LangSwitcher](/src/features/LangSwitcher) +- [notificationButton](/src/features/notificationButton) +- [ThemeSwitcher](/src/features/ThemeSwitcher) +- [UI](/src/features/UI) + +---- diff --git a/docs/storybook.md b/docs/storybook.md new file mode 100644 index 00000000..4799a0b3 --- /dev/null +++ b/docs/storybook.md @@ -0,0 +1,43 @@ +## Storybook + +The project describes story cases for each component. +Requests to the server are mocked using storybook-addon-mock. + +A file with story cases is created next to the component with the extension .stories.tsx + +The storybook can be running with the command: +- `npm run storybook` + +[Docs of storybook](https://storybook.js.org/) + +Пример: + +```typescript jsx +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; + +const Template: ComponentStory = (args) =>