feat: add documentation

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)
+
+----

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<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,
+};
+```

docs/tests.md

@@ -0,0 +1,7 @@
+## 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`

package.json

@@ -19,9 +19,9 @@
     "test:ui": "npx loki test",
     "test:ui:ok": "npx loki approve",
     "test:ui:ci": "npx loki --requireReference --reactUri file:./storybook-static",
-    "test:ui:report": "npm run test:ui:json && npm run test:ui:html",
     "test:ui:json": "node scripts/generate-visual-json-report.js",
     "test:ui:html": "reg-cli --from .loki/report.json --report .loki/report.html",
+    "test:ui:report": "npm run test:ui:json && npm run test:ui:html",
     "storybook": "start-storybook -p 6006 -c ./config/storybook",
     "storybook:build": "build-storybook -c ./config/storybook",
     "prepare": "husky install"

src/entities/Article/README.md

@@ -0,0 +1,16 @@
+## Article Entity
+
+Article Entity for Blog
+
+#### Public api
+
+- Components
+    - `ArticleDetails` - Component with article information
+    - `ArticleList` -  Component with list of articles
+    - `ArticleViewSelector` - Component - switcher for displaying a list of articles (tile, list)
+    - `ArticleSortSelector` - Component with a choice of sorting for a list of articles
+    - `ArticleTypeTabs` - Component with article type selection
+- types
+    - `Article` - Type describing the article
+- selectors
+    - `getArticleDetailsData` - Selector to get information about the currently open article

src/entities/Comment/README.md

@@ -0,0 +1 @@
+## Comment Entity

src/entities/Counter/README.md

@@ -0,0 +1 @@
+## Counter Entity

src/entities/Counter/ui/Counter.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { Button } from '@/shared/ui';
+import { Button } from '@/shared/ui/Button';
 
 import { getCounterValue } from '../model/selectors/getCounterValue/getCounterValue';
 import { counterActions } from '../model/slice/counterSlice';

src/entities/Country/README.md

@@ -0,0 +1 @@
+## Country Entity

src/entities/Currency/README.md

@@ -0,0 +1 @@
+## Currency Entity

src/entities/Notification/README.md

@@ -0,0 +1 @@
+## Notification Entity

src/entities/Profile/README.md

@@ -0,0 +1 @@
+## Profile Entity

src/entities/Rating/README.md

@@ -0,0 +1 @@
+## Rating Entity

src/entities/User/README.md

@@ -0,0 +1 @@
+## User Entity

src/features/LangSwitcher/README.md

@@ -0,0 +1 @@
+## Feature for switching language

src/features/ThemeSwitcher/README.md

@@ -0,0 +1 @@
+## Feature for switching themes

src/features/UI/README.md

@@ -0,0 +1 @@
+## A feature containing functionality related to the UI (scroll, etc.)

src/features/addCommentForm/README.md

@@ -0,0 +1 @@
+## Feature of the comment form to add a comment

src/features/articleRating/README.md

@@ -0,0 +1,3 @@
+## Article rating feature
+
+To rate the article

src/features/articleRecommendationsList/README.md

@@ -0,0 +1 @@
+## Feature with a list of article recommendations

src/features/authByUsername/README.md

@@ -0,0 +1 @@
+## Feature for authorization by username and password

src/features/avatarDropdown/README.md

@@ -0,0 +1 @@
+## Feature with user avatar and menu

src/features/editableProfileCard/README.md

@@ -0,0 +1 @@
+## Feature with profile change form

src/features/notificationButton/README.md

@@ -0,0 +1 @@
+## Feature with a button that opens a list of notifications

src/shared/lib/hooks/useDebounce/useDebounce.ts

@@ -1,5 +1,10 @@
 import { MutableRefObject, useCallback, useRef } from 'react';
 
+/**
+ * A hook that cancels the previous function call until the delay time expires
+ * @param callback
+ * @param delay
+ */
 export function useDebounce(callback: (...args: any[]) => void, delay: number) {
   const timer = useRef() as MutableRefObject<any>;
 

src/shared/lib/hooks/useModal/useModal.ts

@@ -8,6 +8,11 @@ interface useModalProps {
   animationDelay: number;
 }
 
+/**
+ * Reused hook for modal components (Drawer / Modal)
+ * @param props
+ */
+
 export function useModal(props: useModalProps) {
   const {
     isOpen, onClose, animationDelay,

src/shared/ui/Button/ui/Button.tsx

@@ -21,6 +21,9 @@ export enum ButtonSize {
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>{
     className?: string;
+    /**
+     * Button theme. Responsible for the visual presentation of the button
+     */
     theme?: ButtonTheme;
     square?: boolean;
     size?: ButtonSize;