npm package: @george-kunka/ui-kit
Description: Гибкая и расширяемая библиотека UI-компонентов, построенная на базе [MUI](https://mui.com/), [Tailwind CSS](https://tailwindcss.com/) и [React](https://react.dev/).
Latest version: 0.1.1

# @george-kunka/ui-kit

Гибкая и расширяемая библиотека UI-компонентов, построенная на базе [MUI](https://mui.com/), [Tailwind CSS](https://tailwindcss.com/) и [React](https://react.dev/).

## Особенности

*   🚀 **Современный стек**: React, TypeScript, Vite.
*   🎨 **Гибкая стилизация**: Полная поддержка Tailwind CSS поверх компонентов MUI.
*   🧩 **Атомарный дизайн**: Компоненты структурированы для максимального переиспользования.
*   🌗 **Темизация**: Встроенная поддержка тем MUI с возможностью легкого расширения.
*   📦 **Tree Shaking**: Оптимизированная сборка для уменьшения размера бандла.

## Установка

```bash
npm install @george-kunka/ui-kit
# или
yarn add @george-kunka/ui-kit
# или
pnpm add @george-kunka/ui-kit
```

Также убедитесь, что у вас установлены необходимые peer dependencies:

```bash
npm install react react-dom @mui/material @emotion/react @emotion/styled
```

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

### 1. Подключение стилей

Для корректной работы Tailwind CSS, убедитесь, что стили подключены в вашем приложении. Если вы используете Tailwind в своем проекте, добавьте путь к компонентам библиотеки в `tailwind.config.js`:

```javascript
// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@george-kunka/ui-kit/dist/**/*.{js,ts,jsx,tsx}" // Добавьте эту строку
  ],
  // ...
}
```

### 2. Настройка ThemeProvider

Оберните ваше приложение в `UiKitThemeProvider`. Если у вас уже есть `ThemeProvider` от MUI, вы можете использовать его, но убедитесь, что тема совместима.

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { UiKitThemeProvider, Button } from '@george-kunka/ui-kit';

const App = () => (
  <UiKitThemeProvider>
    <div className="p-4">
      <Button variant="contained" color="primary">
        Привет, мир!
      </Button>
      
      {/* Использование классов Tailwind */}
      <Button className="bg-green-500 hover:bg-green-600 text-white mt-4">
        Кастомная кнопка
      </Button>
    </div>
  </UiKitThemeProvider>
);

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
```

### 3. Кастомизация темы (опционально)

Если вам нужно переопределить стандартную тему, создайте свою тему с помощью `createTheme` из MUI и передайте её в `UiKitThemeProvider`:

```tsx
import { createTheme } from '@mui/material/styles';
import { UiKitThemeProvider } from '@george-kunka/ui-kit';

const customTheme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
});

const App = () => (
  <UiKitThemeProvider theme={customTheme}>
    {/* ваше приложение */}
  </UiKitThemeProvider>
);
```

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

### Запуск локально

1.  Клонируйте репозиторий:
    ```bash
    git clone https://github.com/your-repo/ui-kit.git
    ```
2.  Установите зависимости:
    ```bash
    npm install
    ```
3.  Запустите Storybook для разработки компонентов:
    ```bash
    npm run storybook
    ```

### Сборка

Для сборки библиотеки выполните:

```bash
npm run build
```

Результат сборки будет в папке `dist`.

## Контрибьюция

Мы приветствуем вклад в развитие библиотеки! Пожалуйста, следуйте этим правилам:

1.  **Компоненты**: Создавайте новые компоненты в папке `src/components`. Используйте структуру `atoms`, `molecules`, `organisms`.
2.  **Стили**: Используйте Tailwind CSS для стилизации где это возможно. Для специфичных стилей MUI используйте `sx` проп или `styled` компоненты.
3.  **Типизация**: Все компоненты должны быть строго типизированы.
4.  **Storybook**: Для каждого компонента должна быть создана история (`.stories.tsx`).

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

1.  Обновите версию в `package.json` согласно семантическому версионированию.
2.  Соберите проект: `npm run build`.
3.  Опубликуйте: `npm publish --access public`.

## Лицензия

MIT