# @post-pioneer/ui-kit

![npm version](https://img.shields.io/npm/v/@post-pioneer/ui-kit.svg)
![npm license](https://img.shields.io/npm/l/@post-pioneer/ui-kit.svg)
![npm downloads](https://img.shields.io/npm/dm/@post-pioneer/ui-kit.svg)

Библиотека UI-компонентов для приложений Post Pioneer. Построена на React 19, TypeScript и SCSS модулях.

## 🚀 Установка

```bash
npm install @post-pioneer/ui-kit
```

📦 Зависимости

Убедитесь, что в вашем проекте установлены peer-зависимости:

npm install react@^19.1.1 react-dom@^19.1.1

🎯 Быстрый старт

import React from 'react';
import { Button } from '@post-pioneer/ui-kit';

function App() {
  return (
    <div>
      <Button variant="primary" onClick={() => console.log('Clicked!')}>
        Click me
      </Button>
      <Button variant="secondary" style={{ marginLeft: '10px' }}>
        Secondary
      </Button>
    </div>
  );
}

export default App;

📚 Компоненты

Button

Кнопка с различными вариантами стилей.

import { Button } from '@post-pioneer/ui-kit';

// Основное использование
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outline">Outline Button</Button>

// Размеры
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

// Состояния
<Button disabled>Disabled</Button>
<Button loading>Loading...</Button>

Props:

• variant?: 'primary' | 'secondary' | 'outline' - стиль кнопки
• size?: 'small' | 'medium' | 'large' - размер кнопки
• disabled?: boolean - отключенное состояние
• loading?: boolean - состояние загрузки
• onClick?: () => void - обработчик клика
• children: React.ReactNode - содержимое кнопки

Input (в разработке)

// Скоро будет доступно
import { Input } from '@post-pioneer/ui-kit';

Card (в разработке)

// Скоро будет доступно
import { Card } from '@post-pioneer/ui-kit';

🎨 Кастомизация

CSS Переменные

Вы можете переопределить CSS переменные для кастомизации стилей:

:root {
  --shadow-bottom-s: 0 0 8px rgba(68, 83, 113, 0.1), 0 2px 4px rgba(68, 83, 113, 0.05);

  /* Medium shadow */
  --shadow-bottom-m: 0 0 16px rgba(68, 83, 113, 0.1), 0 4px 8px rgba(68, 83, 113, 0.05);
}

SCSS Переменные

Если вы используете SCSS в своем проекте:

// Переопределение переменных перед импортом
$pp-primary-color: #your-color;
$pp-border-radius: 12px;

@import '~@post-pioneer/ui-kit/dist/styles/variables';

🔧 Разработка

Локальная разработка

# Клонирование репозитория
git clone https://github.com/post-pioneer/ui-kit-postpioneer.git
cd ui-kit-postpioneer

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

# Запуск Storybook для разработки
npm run storybook

# Запуск тестов
npm run test

# Сборка библиотеки
npm run build

Добавление нового компонента

1. Создайте папку компонента в src/components/
2. Добавьте файлы: Component.tsx, Component.module.scss, index.ts
3. Создайте stories в src/stories/Component.stories.tsx
4. Экспортируйте компонент в src/index.ts
5. Добавьте тесты в src/__tests__/

📖 Документация

Полная документация с примерами доступна в Storybook.

Для локального просмотра документации:

npm run storybook

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

# Запуск всех тестов
npm run test

# Запуск тестов в watch mode
npm run test:watch

# Запуск тестов с покрытием
npm run test:coverage

📦 Сборка

# Production сборка
npm run build

# Просмотр собранных файлов
npm pack --dry-run

🚀 Публикация

# Увеличение версии
npm version patch  # 0.1.0 → 0.1.1
npm version minor  # 0.1.0 → 0.2.0
npm version major  # 0.1.0 → 1.0.0

# Публикация
npm publish --access public
git push origin v0.1.11

🤝 Соответствие стандартам

• Accessibility: WCAG 2.1 AA compliant
• Performance: Optimized bundle size
• Type Safety: Full TypeScript support
• Testing: 100% test coverage goal

🐛 Сообщение об ошибках

Нашли баг? Создайте issue на GitHub.

💡 Предложения функций

Есть идея для нового компонента или улучшения? Предложите feature request.

📄 Лицензия

MIT License - смотрите файл LICENSE для деталей.

👥 Команда

• Команда Post Pioneer

🔗 Полезные ссылки

• GitHub Repository
• npm Package
• Storybook Documentation
• Changelog

Примечание: Эта библиотека находится в активной разработке. API может изменяться до версии 1.0.0.

Для миграции между версиями смотрите CHANGELOG.md.

## Дополнительные файлы которые стоит создать:

### CHANGELOG.md
```markdown
# Changelog

## [0.1.0] - 2024-01-01
### Added
- Initial release
- Button component with variants
- TypeScript definitions
- Storybook documentation
- Jest testing setup

LICENSE

MIT License

Copyright (c) 2024 Post Pioneer

Permission is hereby granted...