Copper UI

Modern React UI components library with TypeScript support, built on top of Ant Design.

Installation

npm install copper-ui

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install react react-dom @types/node class-variance-authority clsx nuqs

Usage

Table Component

import { Table, useTableStates } from 'copper-ui';
import 'copper-ui/dist/copper-ui.css';

function MyComponent() {
  const tableStates = useTableStates();
  
  return (
    <Table
      data={yourData}
      columns={yourColumns}
      {...tableStates}
    />
  );
}

Conditional Rendering Component

import { If } from 'copper-ui';

function MyComponent() {
  return (
    <If condition={someCondition}>
      <div>This will render only if condition is true</div>
    </If>
  );
}

Components

• Table - Advanced data table with sorting, filtering, and pagination
• FilterTags - Filter tags for table component
• If - Conditional rendering component
• useTableStates - Hook for managing table state

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build

# Run Storybook
npm run storybook

CI/CD и Релизы

Общий процесс

feature branch → main (PR + review) → auto release → manual Storybook deploy

Conventional Commits

Проект использует Conventional Commits для автоматического управления версиями.

Формат коммитов

<type>[optional scope]: <description>

Типы коммитов с версионированием

• feat: - новая функциональность (minor версия: 1.2.3 → 1.3.0)
• fix: - исправление багов (patch версия: 1.2.3 → 1.2.4)
• feat!: - breaking changes (major версия: 1.2.3 → 2.0.0)
• fix!: - breaking fix (major версия: 1.2.3 → 2.0.0)

Типы коммитов без версионирования

• docs: - документация
• style: - форматирование кода
• refactor: - рефакторинг без изменения API
• test: - тесты
• build: - конфигурация сборки
• ci: - настройки CI/CD
• chore: - прочие изменения
• perf: - оптимизации

Примеры коммитов

# Версионирование (автоматическое)
git commit -m "feat: add DatePicker component"
git commit -m "fix: resolve Table sorting issue"
git commit -m "feat!: change Table API structure"

# Без версионирования
git commit -m "docs: update README"
git commit -m "refactor: optimize Table code"
git commit -m "test: add filter tests"

Workflow разработки

1. Создание feature ветки

git checkout -b feature/add-datepicker

2. Разработка

• Внесите изменения
• Проверьте работу в Storybook
• Добавьте тесты при необходимости

3. Коммит изменений

# Автоматически запустится линтинг и валидация формата Conventional Commits
git commit -m "feat: add DatePicker component"

4. Создание Pull Request

git push origin feature/add-datepicker
# Создайте PR в main через GitHub interface

5. Merge в main

# После ревью и аппрува PR будет смержен в main
# Автоматически:
# - Проанализируются коммиты
# - Определится новая версия
# - Опубликуется в NPM
# - Создастся GitHub Release

CI/CD Pipeline

Build workflow (PR проверка)

Триггер: Pull Request в main или test Что делает:

• Линтинг кода
• Сборка библиотеки
• Сборка Storybook
• Проверка что все работает

Publish workflow (автоматический релиз)

Триггер: Push в ветку main Алгоритм:

1. Анализ коммитов с последнего git tag
2. Определение новой версии по Conventional Commits
3. Линтинг и сборка библиотеки
4. Обновление package.json с новой версией
5. Создание git tag v{version}
6. Публикация в NPM с тегом latest
7. Создание GitHub Release с changelog

Результат:

• Автоматический NPM релиз
• Git tag с версией
• GitHub Release с описанием изменений
• Обновленный CHANGELOG.md

Storybook deploy (ручной)

Триггер: Ручной запуск через GitHub Actions Параметры:

• Branch name: любая ветка (main, develop, feature/name)
• Environment: test или staging

Как запустить:

1. Перейти в Actions → Deploy Storybook
2. Нажать Run workflow
3. Ввести название ветки
4. Выбрать окружение

Pre-commit хуки

При каждом коммите автоматически выполняются:

1. ESLint проверка - код должен соответствовать стандартам (с автофиксом)
2. Валидация Conventional Commits - проверка формата коммита

Если есть ошибки линтинга или неверный формат коммита, коммит будет отклонён.

Что НЕ делать

1. Не меняйте версию в package.json вручную - это делает автоматический workflow
2. Не создавайте git теги вручную - это делает CI/CD
3. Не используйте старые префиксы (patch:, minor:, major:)
4. Не пушьте в main напрямую - только через PR

Troubleshooting

Релиз не создался

• Проверьте формат коммитов (Conventional Commits)
• Убедитесь, что есть коммиты с feat: или fix:
• Проверьте, что CI/CD прошел без ошибок

Ошибка в pre-commit

# Автофикс линтинга
npm run lint -- --fix

Нужно изменить уже опубликованную версию

1. Создайте hotfix коммит с fix:
2. Сделайте PR в main
3. Релиз будет создан автоматически

License

MIT