Инструкция по запуску сайта на ваш локальный компьютер:
- Склонируйте данный репозиторий.
- Напиши в терминале
npm install
для установки всех зависимостей. - Напишите в терминале команду
npm run dev
.
Или вы можете просто зайти на сайт, загруженный на Github Pages.
npm run dev
- Запуск проекта в dev режиме на Vitenpm run build
- Сборка проекта с помощью Vitenpm run deploy
- Деплой проекта на Github Pagesnpm run lint:scss
- Запуск проверки scss файлов проекта с помощью styleLintnpm run lint:scss:fix
- Запуск исправления scss файлов проекта, там где это возможно, с помощью styleLintnpm run lint:ts
- Запуск проверки ts файлов проекта с помощью esLintnpm run lint:ts:fix
- Запуск исправления ts файлов проекта, там где это возможно, с помощью esLintnpm run storybook
- запуск Storybooknpm run storybook:build
- Сборка storybook билдаnpm run test:unit
- Запуск unit тестов с jest/react-testing-librarynpm run prettier
- запуск Prettier для форматирования кодаnpm run prepare
- Загрузка husky для прекоммит-хуковnpm run test:e2e
- Запуск e2e тестов с Cypress
Проект написан в соответствии с методологией Feature sliced design.
Ссылка на документацию - feature sliced design
В проекте используются 3 вида тестов:
- Обычные unit тесты на jest -
npm run test:unit
- Тесты на компоненты с React testing library -
npm run test:unit
- e2e тестирование с Cypress -
npm run test:e2e
Подробнее о тестах - документация тестирования
В проекте используется eslint для проверки typescript кода и stylelint для проверки файлов со стилями. Также используется dependency-cruiser для анализа зависимостей.
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,
},
};
Для разработки проект содержит декомпозированный конфиг: Webpack - ./config/build и webpack.config.ts
Cборщик адаптирован под основные фичи приложения.
Вся конфигурация хранится в корне проекта:
- jest.config.ts - конфигурация тестовой среды Jest
- /.storybook - конфигурация Storybook
В папке scripts
находятся различные скрипты для рефакторинга/упрощения написания кода/генерации отчетов и тд.
В ci прогоняются все виды тестов, сборка проекта и сторибука, линтинг.
В прекоммит хуках проверяем проект линтерами, конфиг в /.husky
Взаимодействие с данными осуществляется с помощью redux toolkit. По возможности переиспользуемые сущности необходимо нормализовать с помощью EntityAdapter.
Для асинхронного подключения редюсеров (чтобы не тянуть их в общий бандл) используется DynamicModuleLoader