Frontend часть проекта "Платформа для управления найма"

Оглавление

• О проекте
  • Старт работы с проектом
  • Работа с коммитами и ветками
    • Создание новой рабочей ветки
    • Коммиты
    • Проверка PR других участников проекта
  • Работа с временным API
  • Работа с SCSS
    • Миксины
    • Переменные
  • Скрипты запуска проекта
  • Используемые технологии

О проекте

Старт работы с проектом

• Перед стартом работы с проектом не забываем установить все необходимые зависимости:

  npm install

Работа с коммитами и ветками

Создание новой рабочей ветки

• Убеждаемся, что на локальном компьютере последняя версия нужной ветки проекта (для разработки это - develop)

  git pull

• От ветки develop создаём ветку для работы:

  git checkout -b feat/your_work_name //(если задача на новую фичу)
  git checkout -b fix/your_work_name //(если задача на правку бага),
  git checkout -b chore/your_work_name //(если что-то прочее)

Коммиты

• Перед коммитом необходимо проверить, что служебные файлы не попадают в коммит. Служебные файлы добавляем в .gitignore. При необходимости актуализируем README.md

• Убедитесь, что ваша ветка feat/you-branch синхронизирована с веткой develop, выполните команды:

  git checkout develop
  git pull origin develop

  • Если во время выполнения команды git pull origin develop у вас будет ошибка Your local changes to the following files would be overwritten by merge: … это означает, что у вас есть незафиксированные изменения в указанных файлах. Если встретились с этой ошибкой выполните команды:

    git stash
    git pull origin develop
    git stash apply

    После чего необходимо будет решить конфликты в файлах подсвеченных красным цветом (без решения конфликтов будет невозможно выполнить следующую команду - git checkout feat/you-branch).

• Выполните команду git checkout feat/you-branch

  • Если во время выполнения команды у вас будет ошибка Your local changes to the following files would be overwritten by checkout: …, то выполните команду git stash, и повторите команду указанную в предыдущем пункте.

• Выполните команду git merge develop. Если возникнут конфликты решите их.

• Выполните команду git stash pop и достаньте спрятанные в stash изменения.

• После того, как ваша ветка feat/you-branch актуализирована, выполните команды для создания нового коммита:

  git add -A //Добавляем файлы
  npm run commit
  //Что за коммит?
  //Объём коммита (варианты - Tiny, Small, Medium, Large, X-Large)
  //Сокращенное описание коммита
  //Полная информация о коммите
  //No
  //No

• Выполните команду git push origin feat/you-branch.

• В интерфейсе GitHub создайте PR из своей ветки в ветку develop.

Проверка PR других участников проекта

• Сохранить на всякий случай свой проект в архив!
• Сохраняем свои наработки командой git stash.
• Скачиваем ветку которую нужно проверить не смёрживая их командой git fetch origin feat/need-to-check.
• Переключаемся в ветку, которую скачали git checkout feat/need-to-check.
• Тестируем.
• Переключаемся обратно в свою рабочую ветку git checkout feat/you-branch.
• Удаляем скаченную ветку git branch -d feat/need-to-check.
• Возвращаем свои наработки git stash pop.

Работа с временным API

Для работы используется ReqRes Fake API. Регистрация и аутентификация пользователя возможно только с применением email-адреса уже имеющегося в базе ReqRes API, например eve.holt@reqres.in. Пароль можно указать произвольный.

Работа с SCSS

Миксины и переменные находятся в директории src/components/Shared/. Для того чтобы работать с миксинами и переменными необходимо в начале стилевого файла компонента указать следующие импорты (если их не указать, то при сохранение изменений в файле получим ошибку о том, что переменная или миксин не найдены):

@import '../../Shared/mixins';
@import '../../Shared/variables';

Миксины

Пример миксины:

@mixin font-sans($size, $color, $weight, $lh: false, $ls: false) {
  font: {
    family: 'OpenSans', Helvetica, Arial, sans-serif;
    size: $size;
    weight: $weight;
  }
  color: $color;
  @if $lh {
    line-height: $lh;
  }
  @if $ls {
    letter-spacing: $ls;
  }
}

Миксин принимает 5 параметров:

• $size - отвечает за размер шрифта, является обязательным параметром
• $color - отвечает за цвет шрифта, является обязательным параметром
• $weight - отвечает за вес шрифта, является обязательным параметром
• $lh - отвечает за высоту строки, является не обязательным, т.е. если его не указывать, то можно считать, что данный параметр вообще не указан, и браузер использует его значение по умолчанию.
• $ls - отвечает за расстояние между словами, является не обязательным, т.е. если его не указывать, то можно считать, что данный параметр вообще не указан, и браузер использует его значение по умолчанию.

Пример использования миксины:

.app {
  &__content {
    /* Без необязательных параметров */
    @include font-sans($textXL, $color-violet, 700);
  }
}

Переменные

• Для удобства переменные цвета начинаются с $color-..., переменные размера шрифта с $text..., это необходимо чтобы Emmet не вываливал вам все значения со знаком $, а вы пытались вспомнить название цвета.
• При выборе названия переменной цвета пытаемся исходить из следующей логики
  • Если цвет используется например не только в тексте, но и, допустим, как фоновой цвет элементов, то стараемся назвать переменную по названию цвета, например $color-violet.
  • Если цвет используется, допустим как фоновый цвет элемента, то стараемся назвать его по месту применения, например $color-bg-divider.

Скрипты запуска проекта

• Запуск проекта в режиме разработки:

  npm run start

• Сборка проекта для деплоя:

  npm run build

• Сборка ветки develop для деплоя на GH Pages:

  npm run build:dev

• Запуск Storybook:

  npm run storybook

• Сборка Storybook для деплоя на сервер:

  npm run build-storybook

• Проверка проекта на ошибки:

  npm run lint

• Исправление некоторых ошибок (для которых доступно автоисправление):

  npm run lint:fix

• Форматирование кода (легче установить и настроить расширение Prettier на автоматическое форматирование при сохранении), команда нужна для работы Husky:

  npm run format

• Создание коммита (Добавляем файлы в staged (git add -A) далее вызываем команду npm run commit и следуем подсказкам в консоли):

  npm run commit

• Служебная команда GH Pages запускающая скрипт сборки проекта из ветки develop:

  npm run predeploy

• Сборка проекта из ветки develop и его деплой на GH Pages:

  npm run deploy

Используемые технологии

• React v 18.2.0
• React-router-dom v 6.14.1
• Storybook v 7.0.7
• Commitizen v 4.3.0
• Eslint-config-airbnb v 19.0.4
• Husky v 8.0.3
• Prettier v 2.8.8
• Sass v 1.63.6
• React Hook Form v 7.45.2
• Framer Motion v 10.15.0
• gh-pages v 5.0.0