Skip to content

Latest commit

 

History

History
334 lines (241 loc) · 13.3 KB

CONTRIBUTING.md

File metadata and controls

334 lines (241 loc) · 13.3 KB

Введение

Спасибо, что решили внести вклад в React Native UI Kit! Ваша помощь делает этот проект лучше.

Зачем читать это руководство?

Следование этим рекомендациям помогает нам эффективно работать вместе. Это ускоряет процесс рассмотрения ваших изменений и делает проект более стабильным и качественным.

Какие вклады мы приветствуем

Мы открыты для различных видов вклада:

  • Исправление багов — сообщения об ошибках и их исправления
  • Новые функции — предложения и реализация новых компонентов
  • Улучшение документации — исправление ошибок, добавление примеров, улучшение читаемости
  • Тесты — написание и улучшение тестов
  • Рефакторинг — улучшение качества кода без изменения функциональности
  • Улучшение Storybook — добавление новых историй и примеров использования компонентов

Что мы не принимаем

  • Изменения, нарушающие обратную совместимость без обоснования
  • Изменения, не соответствующие дизайн-системе проекта
  • PR без тестов для новой функциональности
  • PR с неисправленными ошибками линтера или форматтера

Основные правила

Технические требования

  • Кросс-платформенная совместимость: Все изменения должны работать на iOS и Android
  • TypeScript: Весь код должен быть типизирован
  • Тесты: Новый функционал должен быть покрыт тестами
  • Линтинг и форматирование: Код должен проходить проверки ESLint и Prettier
  • Storybook: Новые компоненты должны иметь примеры использования в Storybook

Ваш первый вклад

Не знаете, с чего начать? Вот несколько способов помочь:

  1. Изучите открытые issues — найдите задачи с метками good first issue или help wanted
  2. Исправьте опечатки в документации — это отличный способ начать
  3. Добавьте тесты — улучшите покрытие тестами существующих компонентов
  4. Создайте истории в Storybook — добавьте примеры использования компонентов

Начало работы

Установка зависимостей

yarn install
bundle install
yarn pod-install

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

Storybook:

  • yarn start — запускает Metro Bundler для Storybook
  • yarn ios — запускает Storybook на iOS симуляторе
  • yarn android — запускает Storybook на Android эмуляторе

Сборка библиотеки:

yarn build

Тестирование:

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

yarn test

Запуск тестов с обновлением снэпшотов

yarn test -u

Линтинг и форматирование:

  • yarn lint:check — проверка ошибок линтера
  • yarn lint:fix — автоматическое исправление ошибок линтера
  • yarn prettier:check — проверка форматирования
  • yarn prettier:fix — автоматическое форматирование кода

Процесс внесения изменений

  1. Создайте форк репозитория (если у вас нет прав на запись)

  2. Создайте ветку для ваших изменений:

    git checkout -b feature/short-description
# или
git checkout -b fix/short-description

    Правила именования веток:

    • feature/name — для новых функций
    • fix/name — для исправления багов
    • chore/name — для других изменений (обновление зависимостей, конфигурации и т.д.)

  3. Внесите изменения в коде

  4. Убедитесь, что код проходит проверки:

    yarn lint:check
yarn prettier:check
yarn test
yarn build

  5. Создайте коммит используя commitizen:

    git add .
git commit  # Запустит интерактивный интерфейс commitizen

    Или используйте обычный коммит, следуя Conventional Commits:

    feat(Upload): добавлен новый компонент
fix(InputTextBase): исправлена логика фокуса
docs(readme): исправлена опечатка
test(Avatar): добавлены тесты

  6. Отправьте изменения:

    git push origin feature/name

  7. Создайте Pull Request на GitHub

Как сообщить о баге

Шаблон для сообщения о баге

При создании issue о баге, пожалуйста, укажите:

  1. Версию React Native: react-native --version
  2. Версию библиотеки: версия из package.json
  3. Операционную систему: iOS/Android и версия
  4. Как повторить: шаги для воспроизведения
  5. Ожидаемое поведение: что должно было произойти
  6. Фактическое поведение: что произошло на самом деле
  7. Скриншоты/видео: если применимо
  8. Дополнительный контекст: любая другая полезная информация

Как предложить новую функцию

Процесс предложения функции

  1. Создайте issue с описанием предлагаемой функции
  2. Объясните проблему, которую решает функция
  3. Опишите желаемое решение и как оно должно работать
  4. Обсудите с командой перед началом реализации
  5. Дождитесь одобрения перед созданием PR

Процесс code review

Что происходит после отправки PR

  1. Автоматические проверки:

    • Линтинг (ESLint)
    • Проверка типов (TypeScript)
    • Тесты (Jest)
    • Проверка форматирования (Prettier)

  2. Ручной review:

    • Команда проекта проверяет код
    • Могут быть запрошены изменения
    • После одобрения PR будет смержен

Соглашения по коду, коммитам и меткам

Стиль кода

Проект использует:

  • ESLint для проверки кода
  • Prettier для форматирования
  • TypeScript для типизации

Важные правила:

  • Все компоненты должны быть типизированы
  • testID должен быть в формате UpperPascalCase (например: ButtonPrimary, InputText)
  • Компоненты должны быть покрыты тестами
  • Новые компоненты должны иметь истории в Storybook

Перед отправкой PR убедитесь:

yarn lint:fix
yarn prettier:fix
yarn test

Соглашения по коммитам

Проект следует Conventional Commits, за исключением части, связанной с BREAKING CHANGES:

Формат:

<type>(<scope>): <subject>

<body>

<footer>

Типы:

  • feat — новый функционал
  • fix — исправления багов
  • docs — изменения касающиеся только документации
  • style — изменения не влияющие на работу кода (изменения форматирования кода)
  • refactor — рефакторинг кода
  • perf — изменения по улучшению производительности
  • test — добавление и исправление тестов
  • build — изменения касающиеся только системы сборки
  • ci — изменения в конфигурации CI/CD
  • chore — другие изменения не затрагивающие исходный код или тестовые файлы
  • revert — реверт коммита

Примеры:

feat(Button): добавить поддержку иконок
fix(Input): исправить обработку пустых значений
docs: обновить README с примерами использования
test(Avatar): добавить тесты для размеров

Использование commitizen:

git commit  # Запустит интерактивный интерфейс

Соглашение по именованию веток

  • main — основная ветка (только для коммитов из CI/CD)
  • feature/name — новые функции
  • fix/name — исправления багов
  • chore/name — другие изменения (обновление зависимостей, конфигурации и т.д.)

Метки issues

Мы используем следующие метки для issues:

  • bug — ошибка в коде
  • enhancement — улучшение существующей функции
  • feature — новая функция
  • documentation — улучшение документации
  • good first issue — подходит для новичков
  • help wanted — нужна помощь сообщества
  • question — вопрос, требующий обсуждения

Разработка компонентов

Структура компонента

Каждый компонент должен иметь следующую структуру:

ComponentName/
  ├── ComponentName.tsx          # Основной компонент
  ├── ComponentName.test.tsx     # Тесты
  ├── ComponentName.stories.tsx  # Storybook истории
  ├── types.ts                   # TypeScript типы (опционально)
  └── index.ts                   # Экспорт

Создание нового компонента

  1. Создайте директорию в src/components/
  2. Создайте компонент с типизацией
  3. Добавьте тесты используя Jest и React Native Testing Library
  4. Создайте истории в Storybook
  5. Экспортируйте компонент из src/components/index.ts
  6. Обновите документацию при необходимости

Тестирование

  • Используйте Jest и React Native Testing Library
  • Покрывайте основную функциональность тестами
  • Тесты должны быть быстрыми и изолированными
  • Используйте snapshots для проверки рендеринга
  • В качестве примера, опирайтесь на уже написанные тесты в проекте

Storybook

Каждый компонент должен иметь истории в Storybook, демонстрирующие:

  • Основное использование
  • Различные варианты (variants)
  • Различные состояния (disabled, loading и т.д.)
  • Различные размеры (если применимо)

Дополнительные ресурсы

Спасибо за ваш вклад! 🎉