/- Главная страница/blog- Главная страница блога/blog/<id поста>- Страница поста в блоге/blog/create- Страница создания поста в блоге/catalog- Главная страница каталога Telegram-каналов/catalog/cart- Страница корзины каталога Telegram-каналов/create-card- Страница создания карточки организации/заказчика/create-order- Страница создания заказа/faq- Страница FAQ/internal- Страница с информацией о проекте/kind-deeds- Страница "Добрые дела" для благотворительности/kind-deeds/create-request- Страница создания запроса средств/myProjects- Страница проектов пользователя/channel/<id поста>- Страница Telegram-канала/channel/<id поста>/stats- Страница статистики Telegram-канала/services- Страница с услугами специалистов/services/<id проекта>- Страница проекта/turnkey-websites- Страница с услугой разработки сайтов под ключ/user- Страница пользователя/user/edit- Страница редактирования пользователя/<любая другая ссылка>- Страница 404
Инструкция по запуску сайта на ваш локальный компьютер:
- Склонируйте данный репозиторий.
- Перейдите в папку client с помощью
cd client. - Напиши в терминале
npm installдля установки всех зависимостей. - Напишите в терминале команду
npm run dev.
Или вы можете просто зайти на сайт, загруженный на Github Pages.
npm run dev- Запуск проекта в dev режиме на Vitenpm run build- Сборка проекта с помощью Vitenpm run deploy- Деплой проекта на Github Pagesnpm run stylelint:check- Запуск проверки scss файлов проекта с помощью styleLintnpm run stylelint:fix- Запуск исправления scss файлов проекта, там где это возможно, с помощью styleLintnpm run eslint:check- Запуск проверки ts файлов проекта с помощью esLintnpm run eslint:fix- Запуск исправления ts файлов проекта, там где это возможно, с помощью esLintnpm run storybook- запуск Storybooknpm run storybook:build- Сборка storybook билдаnpm run test:unit- Запуск unit тестов с jest/react-testing-librarynpm 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 prettier- запуск Prettier для форматирования кодаnpm run prepare- Загрузка husky для прекоммит-хуков
Проект написан в соответствии с методологией Feature sliced design, но имеет некоторые отличия в лице добавления для виджетов/сущностей/фичей родительских папок, которые определяют к какой странице проекта относится компонент.
Ссылка на документацию - feature sliced design
В проекте используются 3 вида тестов:
- Обычные unit тесты на jest -
npm run test:unit - Тесты на компоненты с React testing library -
npm run test:unit - Скриншотное тестирование с loki -
npm run test:ui
Подробнее о тестах - документация тестирования
В проекте используется eslint для проверки typescript кода и stylelint для проверки файлов со стилями.
Также для строгого контроля главных архитектурных принципов используется собственный eslint plugin eslint-plugin-teleworks, который содержит 4 правила:
- path-checker - запрещает использовать абсолютные импорты в рамках одного модуля;
- imports-from-layers - проверяет корректность использования слоёв с точки зрения архитектуры проекта (например widgets нельзя использовать в features и entitites);
- public-api-imports - разрешает импорт из других модулей только из public api. Имеет auto fix;
- exports-always-relative - разрешает экспорт из public api только если путь экспорта относительный.
Все правила имеют написанные тесты, которые можно запустить с помощью команды npm run test в директории плагина.
npm run lint:ts- Проверка ts файлов линтеромnpm run lint:ts:fix- Исправление ts файлов линтеромnpm run lint:scss- Проверка scss файлов style линтеромnpm run lint:scss:fix- Исправление scss файлов style линтером
В проекте для каждого компонента описываются стори-кейсы.
Файл со сторикейсами создаётся рядом с компонентом с расширением .stories.tsx
Запустить сторибук можно командой:
npm run storybook
Подробнее о Storybook
Пример:
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";
import { ButtonTypes } from "../model/Button__types";
const meta = {
title: "shared/Button",
component: Button,
parameters: {
layout: "centered",
},
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
export const ButtonRed: Story = {
args: {
to: "/",
text: "Красная кнопка",
type: ButtonTypes.RED,
},
};
export const ButtonBlue: Story = {
args: {
to: "/",
text: "Синяя кнопка",
type: ButtonTypes.BLUE,
},
};
export const ButtonGray: Story = {
args: {
to: "/",
text: "Серая кнопка",
type: ButtonTypes.GRAY,
},
};
export const ButtonBlack: Story = {
args: {
to: "/",
text: "Чёрная кнопка",
type: ButtonTypes.BLACK,
},
};Для разработки проект содержит конфиг: Vite - vite.config.ts
Cборщика адаптирован под основные фичи приложения.
Вся конфигурация хранится в корне проекта:
- babel.config.json - babel
- vite.config.ts - конфигурация Vite
- jest.config.ts - конфигурация тестовой среды Jest
- /.storybook - конфигурация Storybook
В папке scripts находятся различные скрипты для рефакторинга/упрощения написания кода/генерации отчетов и тд.
Конфигурация github actions находится в /.github/workflows. В ci прогоняются все виды тестов, сборка проекта и сторибука, линтинг.
В прекоммит хуках проверяем проект линтерами, конфиг в /.husky
Взаимодействие с данными осуществляется с помощью redux toolkit. По возможности переиспользуемые сущности необходимо нормализовать с помощью EntityAdapter.
Запросы на сервер отправляются с помощью RTK query
Для асинхронного подключения редюсеров (чтобы не тянуть их в общий бандл) используется DynamicModuleLoader