Запуск проекта

npm ci - устанавливаем зависимости
npm run start:dev или npm run start:dev:vite - запуск сервера + frontend проекта в dev режиме

---

Скрипты

• npm run start - Запуск frontend проекта на webpack dev server
• npm run start:vite - Запуск frontend проекта на vite
• npm run start:dev - Запуск frontend проекта на webpack dev server + backend
• npm run start:dev:vite - Запуск frontend проекта на vite + backend
• npm 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 тестов с jest
• npm run test:ui - Хапуск скриншотных тестов с loki
• npm run test:ui:ok - Подтверждение новых скриншотов
• npm run test:ui:ci - Запуск скриншотных тестов в CI
• npm run test:ui:report - Генерация полного отчета для скриншотных тестов
• npm run test:ui:json - Генерация json отчета для скриншотных тестов
• npm run test:ui:html - Генерация HTML отчета для скриншотных тестов
• npm run test:e2e - Запуск e2e-тестов cypress
• npm run storybook - запуск Storybook
• npm run storybook:build - Сборка storybook билда
• npm run prepare - прекоммит хуки
• npm run generate:slice - Скрипт для генерации FSD слайсов
• refactoring:update-imports - Скрипт добавляет алиасы @ для всез FSD-компонентов
• refactoring:create-public-api - Скрипт создает Public api для ui shared-слоя
• remove-feature - Скрипт удаления фичей по feature-flags (см. описание ниже)

---

Архитектура проекта

Проект написан в соответствии с методологией Feature sliced design

Ссылка на документацию - feature-sliced design

---

Работа с переводами

В проекте используется библиотека i18next для работы с переводами. Файлы с переводами хранятся в public/locales.

Для комфортной работы рекомендуем установить плагин для webstorm/vscode

Документация i18next - https://react.i18next.com/

---

Тесты

В проекте используются 4 вида тестов:

1. Обычные unit тесты на jest - npm run test:unit
2. Тесты на компоненты с React testing library -npm run test:unit
3. Скриншотное тестирование с loki npm run test:ui
4. e2e тестирование с Cypress npm run test:e2e

Подробнее о тестах - документация тестирование

---

Линтинг

В проекте используется eslint для проверки typescript кода и stylelint для проверки файлов со стилями.

Также для строгого контроля главных архитектурных принципов используется собственный eslint plugin eslint-plugin-ulbi-tv-plugin, который содержит 3 правила

1. path-checker - запрещает использовать абсолютные импорты в рамках одного модуля
2. layer-imports - проверяет корректность использования слоев с точки зрения FSD (например widgets нельзя использовать в features и entitites)
3. 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

В проекте для каждого компонента описываются стори-кейсы. Запросы на сервер мокаются с помощью storybook-addon-mock.

Файл со сторикейсами создает рядом с компонентом с расширением .stories.tsx

Запустить сторибук можно командой:

• npm run storybook

Подробнее о Storybook

Пример:

import type { Meta, StoryObj } from '@storybook/react';

import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator';
import { Theme } from '@/shared/constants/theme';

import { Button, ButtonSize, ButtonTheme } from './Button';

const meta = {
    title: 'shared/Button',
    component: Button,
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
    args: {
        children: 'Text',
    },
};

export const Clear: Story = {
    args: {
        children: 'Text',
        theme: ButtonTheme.CLEAR,
    },
};

export const ClearInverted: Story = {
    args: {
        children: 'Text',
        theme: ButtonTheme.CLEAR_INVERTED,
    },
};

export const Outline: Story = {
    args: {
        children: 'Text',
        theme: ButtonTheme.OUTLINE,
    },
};

---

Конфигурация проекта

Для разработки проект содержит 2 конфига:

1. Webpack - ./config/build
2. vite - vite.config.ts

Оба сборщика адаптированы под основные фичи приложения.

Вся конфигурация хранится в /config

• /config/babel - babel
• /config/build - конфигурация webpack
• /config/jest - конфигурация тестовой среды
• /config/storybook - конфигурация сторибука

В папке scripts находятся различные скрипты для рефакторинга\упрощения написания кода\генерации отчетов и тд.

---

CI pipeline и pre commit хуки

Конфигурация github actions находится в /.github/workflows. В ci прогоняются все виды тестов, сборка проекта и сторибука, линтинг.

В прекоммит хуках проверяем проект линтерами, конфиг в /.husky

---

Работа с данными

Взаимодействие с данными осуществляется с помощью redux toolkit. По возможности переиспользуемые сущности необходимо нормализовать с помощью EntityAdapter

Запросы на сервер отправляются с помощью RTK query

Для асинхронного подключения редюсеров (чтобы не тянуть их в общий бандл) используется DynamicModuleLoader

---

Работа с feature-flags

Разрешено использование feature flags только с помощью хелпера toggleFeatures/компонента ToggleFeatures

Для функции в toggleFeatures передается объект с опциями

{
   name: название фича-флага, 
   on: функция, которая отработает после Включения фичи 
   of: функция, которая отработает после ВЫключения фичи
}

Для компонента в ToggleFeatures передаются пропсы

{
   feature: название фича-флага, 
   on: компонент, который отработает после Включения фичи 
   of: компонент, который отработает после ВЫключения фичи
}

Для автоматического удаления фичи использовать скрипт remove-feature.ts, который принимает 2 аргумента

1. Название удаляемого фича-флага
2. Состояние (on \ off)

Пример команды: ./node_modules/.bin/ts-node ./scripts/remove-feature.ts isCounterEnabled off

---

TODO:

• добавить тесты на регистрацию
• добавить на главную страницу фишки проекта
• добавить функционал создания статьи
• добавить изменение аватара пользователя
• поправить скролл плиток статей в redesigned версии