@george-kunka/ui-kit

Гибкая и расширяемая библиотека UI-компонентов, построенная на базе MUI, Tailwind CSS и React.

Особенности

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

Установка

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

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

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

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

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

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

// 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, вы можете использовать его, но убедитесь, что тема совместима.

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:

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. Клонируйте репозиторий:

   git clone https://github.com/your-repo/ui-kit.git

2. Установите зависимости:

   npm install

3. Запустите Storybook для разработки компонентов:

   npm run storybook

Сборка

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

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