npm package: @post-pioneer/ui-kit
Description: UI Kit for Post Pioneer applications
Author: Post Pioneer Team
Latest version: 0.1.123

````markdown
# @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-зависимости:

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

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

```tsx
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

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

```tsx
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 (в разработке)

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

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

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

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

### CSS Переменные

Вы можете переопределить 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 в своем проекте:

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

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

## 🔧 Разработка

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

```bash
# Клонирование репозитория
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](https://post-pioneer.github.io/ui-kit-postpioneer).

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

```bash
npm run storybook
```

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

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

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

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

## 📦 Сборка

```bash
# Production сборка
npm run build

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

## 🚀 Публикация

```bash
# Увеличение версии
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](https://github.com/post-pioneer/ui-kit-postpioneer/issues) на GitHub.

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

Есть идея для нового компонента или улучшения? [Предложите feature request](https://github.com/post-pioneer/ui-kit-postpioneer/issues).

## 📄 Лицензия

MIT License - смотрите файл [LICENSE](https://github.com/post-pioneer/ui-kit-postpioneer/blob/main/LICENSE) для деталей.

## 👥 Команда

- [Команда Post Pioneer](https://github.com/post-pioneer)

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

- [GitHub Repository](https://github.com/post-pioneer/ui-kit-postpioneer)
- [npm Package](https://www.npmjs.com/package/@post-pioneer/ui-kit)
- [Storybook Documentation](https://post-pioneer.github.io/ui-kit-postpioneer)
- [Changelog](https://github.com/post-pioneer/ui-kit-postpioneer/blob/main/CHANGELOG.md)

---

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

Для миграции между версиями смотрите [CHANGELOG.md](https://github.com/post-pioneer/ui-kit-postpioneer/blob/main/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

```text
MIT License

Copyright (c) 2024 Post Pioneer

Permission is hereby granted...
```