Pattriarch - Новостной Портал (Продвинутый React)

Пет-проект представляет собой новостной портал, разработанный на основе архитектуры Feature Sliced Design. Приложение позволяет пользователям авторизовываться, просматривать статьи других авторов, управлять своими публикациями и при необходимости редактировать их. Благодаря применению архитектуры Feature Sliced Design, проект легко масштабируется и развивается, обеспечивая чистоту и порядок в структуре кода.

• 
• 

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

npm install - устанавливаем зависимости
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:prettier - Применение Prettier ко всем файлам проекта (ts, tsx, json)

• 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:update - Обновление скриншотов с loki

• npm run test:ui:ok - Подтверждение новых скриншотов с loki

• npm run test:ui:ci - Запуск скриншотных тестов в CI

• npm run test:ui:json - Генерация json отчета для скриншотных тестов

• npm run test:ui:html - Генерация HTML отчета для скриншотных тестов

• npm run test:ui:report - Генерация полного отчета для скриншотных тестов

• npm run test:e2e - Запуск end-to-end тестов с помощью Cypress

• npm run storybook - Запуск Storybook

• npm run storybook:build - Сборка storybook билда

• npm run prepare - Запускает прекоммит хуки

• npm run postinstall - Запускает скрипт очистки кэша из node_modules после установки зависимостей.

• npm run scripts:generate-dependency-graph - Скрипт для генерации SVG-файла всех зависимостей проекта

• npm run scripts:generate-slice - Скрипт для генерации FSD слайсов (см. подробнее)

• npm run scripts:update-imports - Скрипт для обновления импортов в проекте (см. подробнее)

• npm run scripts:update-src-imports - Скрипт для обновления импортов в проекте (см. подробнее)

• npm run scripts:create-public-api - Скрипт для создания PUBLIC API в shared-слое (см. подробнее)

• npm run scripts:create-readme - Скрипт для генерации README (см. подробнее)

• npm run scripts:remove-feature - Удаление определенной фичи со всего проекта (см. подробнее)

---

Основные технологии:

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

• Feature Sliced Design - методология разработки проекта.

Инструменты сборки и разработки:

• Webpack и Vite - инструменты для сборки и разработки проекта.

Библиотеки и фреймворки:

• React - библиотека для разработки пользовательских интерфейсов.
• React Router - библиотека для маршрутизации страниц в React.
• Redux, Redux Toolkit - инструменты для управления состоянием приложения.
• React-virutoso - библиотека виртуализации списков для React.
• @headlessui/react - набор утилит для создания интерактивных элементов пользовательского интерфейса.
• @use-gesture/react - библиотека для управления жестами в React приложениях.

Языки и препроцессоры:

• TypeScript - язык программирования, расширяющий JavaScript статической типизацией.
• SCSS - препроцессор для CSS.

Локализация:

• i18next - библиотека для локализации приложения.

Тестирование и документация:

• Jest и Cypress - инструменты для тестирования кода.
• React Testing Library - библиотека для тестирования React компонентов.
• Storybook - инструмент для документирования UI-компонентов.
• Loki — инструмент для визуального тестирования компонентов в Storybook.

Code Style и качество кода:

• ESLint, Prettier и Stylelint - инструменты для поддержания качества кода.
• ts-morph - API для анализа и изменения кода на TypeScript.
• dependency-cruiser - инструмент для анализа кольцевых зависимостей в проекте (вне контекста Webpack).
• circular-dependency-plugin - плагин для обнаружения циклических зависимостей в проекте (в контекста Webpack).

Другие инструменты:

• JSON Server - инструмент для создания моковых RESTful API.
• Concurrently - утилита для одновременного выполнения npm-скриптов.
• Husky и lint-staged - инструменты для автоматического применения линтеров перед коммитом.
• browserslist - инструмент для определения поддерживаемых версий браузеров.

Удаление всех feature-flag

Чтобы удалить все feature-flag's, связанные с дизайном и оставить в проекте только один из дизайнов (старый/новый) необходимо выполнить одну из команд:

• npm run scripts:remove-feature isAppRedesigned on - оставить только новый дизайн
• npm run scripts:remove-feature isAppRedesigned off - оставить только старый дизайн

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

Проект написан в соответствии с методологией 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.

Файл со сторикейсами создает рядом с компонентом с расширением AppImageTriggerMainLayout.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 конфига:

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

Хелпер принимает в себя объект с опциями:

{ name: название feature flag; on: функция, отрабатывающая после включения фичи; off: функция, отрабатывающая после выключения фичи }

Для автоматического удаления фичи следует использовать remove-feature.ts (из папки scripts), принимающий в себя 2 аргумента:

1. Название удаляемого feature flag
2. Состояние (on/off)

---

Граф зависимостей

Деплой

• Деплой и Конфигурация nginx

CI/CD

• Пайплайны

Прекоммит хуки

• Прекоммит хуки

Самописные babel-плагины

• Удаление атрибутов

Storybook

• Декораторы, плагины и использование

Сущности (entities)

• Article
• Comment
• Counter
• Country
• Currency
• Notification
• Profile
• Rating
• User

Фичи (features)

• addCommentForm
• articleEditForm
• articleRating
• articleRecommendationsList
• AuthByUsername
• avatarDropdown
• editableProfileCard
• LangSwitcher
• notificationButton
• profileRating
• ThemeSwitcher
• UI