Skip to content

EvgeniyWis/SuncovRussian

Repository files navigation

Сайт для изучения русского языка

Запуск сайта

Инструкция по запуску сайта на ваш локальный компьютер:

  1. Склонируйте данный репозиторий.
  2. Напиши в терминале npm install для установки всех зависимостей.
  3. Напишите в терминале команду npm run dev.

Или вы можете просто зайти на сайт, загруженный на Github Pages.

Скрипты

  • npm run dev - Запуск проекта в dev режиме на Vite
  • npm run build - Сборка проекта с помощью Vite
  • npm run deploy - Деплой проекта на Github Pages
  • npm run lint:scss - Запуск проверки scss файлов проекта с помощью styleLint
  • npm run lint:scss:fix - Запуск исправления scss файлов проекта, там где это возможно, с помощью styleLint
  • npm run lint:ts - Запуск проверки ts файлов проекта с помощью esLint
  • npm run lint:ts:fix - Запуск исправления ts файлов проекта, там где это возможно, с помощью esLint
  • npm run storybook - запуск Storybook
  • npm run storybook:build - Сборка storybook билда
  • npm run test:unit - Запуск unit тестов с jest/react-testing-library
  • npm run prettier - запуск Prettier для форматирования кода
  • npm run prepare - Загрузка husky для прекоммит-хуков
  • npm run test:e2e - Запуск e2e тестов с Cypress

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

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

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


Тесты

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

  1. Обычные unit тесты на jest - npm run test:unit
  2. Тесты на компоненты с React testing library - npm run test:unit
  3. 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 линтером

Storybook

В проекте для каждого компонента описываются стори-кейсы.

Файл со сторикейсами создаётся рядом с компонентом с расширением .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 находятся различные скрипты для рефакторинга/упрощения написания кода/генерации отчетов и тд.


Pre commit хуки

В ci прогоняются все виды тестов, сборка проекта и сторибука, линтинг.

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


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

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

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


Releases

No releases published

Packages

No packages published

Languages