Iteco UI-Kit

UI Kit библиотека на основе Material UI со встроенными зависимостями.

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

📋 Полное оглавление документации - Навигация по всем документам

Основные документы:

• 📖 API Документация - Подробное описание всех компонентов и их свойств
• 📦 Экспорты - Краткая сводка всех экспортируемых элементов
• 🔄 Сравнение подходов - Bundled vs PeerDependencies
• 🚀 Публикация - Инструкции по публикации в npm

🚀 Быстрый старт

Установка

# Установите UI-kit
npm install iteco-ui-kit

# Или с помощью pnpm
pnpm add iteco-ui-kit

# Установите только React (если еще не установлен)
npm install react react-dom

Больше НЕ нужно устанавливать:

• @mui/material
• @emotion/react
• @emotion/styled
• styled-components

Всё уже включено в пакет! 🎉

Базовое использование

import React from 'react';
import { ThemeProvider, Button, Input, Card, styled } from 'iteco-ui-kit';

// Кастомный стилизованный контейнер
const Container = styled.div`
  padding: ${({ theme }) => theme.spacing(3)};
  max-width: 600px;
  margin: 0 auto;
  background: ${({ theme }) => theme.palette.background.paper};
  border-radius: ${({ theme }) => theme.shape.borderRadius * 2}px;
`;

function App() {
  return (
    <ThemeProvider>
      <Container>
        <Button color="primary" variant="contained">
          Привет от Iteco!
        </Button>
        
        <Input 
          label="Ваше имя" 
          placeholder="Введите имя..." 
          style={{ margin: '16px 0' }}
        />
        
        <Card elevation={2}>
          <div style={{ padding: '16px' }}>
            <h3>Добро пожаловать!</h3>
            <p>Это карточка из Iteco UI-kit с styled-components!</p>
          </div>
        </Card>
      </Container>
    </ThemeProvider>
  );
}

export default App;

С кастомной темой Material UI

import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { Button, Input, Card, theme } from 'iteco-ui-kit';

// Используйте готовую тему или создайте свою
const customTheme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
    secondary: { main: '#dc004e' },
  },
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <CssBaseline />
      <div>
        <Button color="primary">Кнопка</Button>
        <Input label="Поле ввода" />
        <Card>Содержимое карточки</Card>
      </div>
    </ThemeProvider>
  );
}

export default App;

🧩 Компоненты

| Компонент | Описание | Особенности | |-----------|----------|-------------| | Button | Расширенная кнопка | ✨ Состояние загрузки, 6 цветов | | Input | Поле ввода с валидацией | 🎯 Кастомные состояния ошибок | | Card | Карточка с анимациями | 🎭 Hover эффекты, поддержка действий |

Примеры использования

Button с загрузкой

<Button 
  color="primary" 
  variant="contained" 
  loading={isLoading}
  onClick={handleSubmit}
>
  Отправить
</Button>

Input с валидацией

<Input 
  label="Email" 
  type="email"
  error={hasError}
  helperText="Введите корректный email"
  fullWidth
/>

Card с действиями

<Card elevation={3}>
  <CardContent>
    <Typography variant="h5">Заголовок</Typography>
    <Typography variant="body2">Описание</Typography>
  </CardContent>
  <CardActions>
    <Button size="small">Действие</Button>
  </CardActions>
</Card>

📊 Характеристики

• 📦 All-in-one: Material UI + styled-components включены в пакет
• 💅 Styled-components: Встроенная поддержка стилизации компонентов
• 🎨 Кастомизируемый: Поддерживает темы Material UI
• 📱 Адаптивный: Работает на всех устройствах
• ⚡ Оптимизированный: Tree-shaking поддержка
• 🧪 Протестированный: 100% покрытие тестами
• 📚 Документированный: Интерактивная документация в Storybook
• 🔷 TypeScript: Полная поддержка типов

📦 Размер пакета

• Bundle размер: ~680KB (включая Material UI + styled-components)
• Gzipped: ~200KB
• Компоненты: 3 готовых компонента + styled-components
• Тема: 1 готовая тема Iteco

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

Полная документация проекта доступна в папке docs/:

📋 Справочники

• docs/README.md - Главная документация
• docs/api.md - Полная API документация
• docs/exports.md - Краткая сводка экспортов

🧩 Компоненты

• docs/components/ - Документация всех компонентов
  • Button - Универсальный компонент кнопки
  • Input - Компонент поля ввода
  • Card - Контейнер для группировки контента
  • ThemeProvider - Провайдер темы
  • Styled Components - styled-components интеграция

🔧 Для разработчиков

• docs/architecture.md - Архитектура и принципы
• docs/testing.md - Руководство по тестированию
• docs/deployment.md - Сборка и деплой
• docs/publishing.md - Публикация в npm
• docs/comparison.md - Bundled vs PeerDependencies

🛠️ Разработка

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

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

# Сборка
pnpm build

# Storybook
pnpm storybook

# Линтинг
pnpm lint

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

• 🎨 Storybook - Интерактивная документация компонентов
• 📘 Material UI - Базовая библиотека компонентов
• ⚛️ React - JavaScript библиотека для пользовательских интерфейсов

📄 Лицензия

MIT

👥 Команда

Разработано командой Iteco для внутренних проектов.

🎨 Тема

UI-kit включает готовую тему с брендингом Iteco:

import { theme } from 'iteco-ui-kit';
// Используется автоматически в ThemeProvider

ThemeProvider

Провайдер темы для оборачивания вашего приложения:

import { ThemeProvider } from 'iteco-ui-kit';

// Базовое использование
<ThemeProvider>
  <App />
</ThemeProvider>

// С кастомной темой
<ThemeProvider customTheme={myTheme} enableCssBaseline={false}>
  <App />
</ThemeProvider>

Button

Кнопка с поддержкой 6 цветовых вариантов и состояния загрузки:

import { Button } from 'iteco-ui-kit';

<Button color="primary" variant="contained">
  Основная кнопка
</Button>

<Button color="secondary" variant="outlined" loading>
  Загрузка...
</Button>

Input

Поле ввода с валидацией:

import { Input } from 'iteco-ui-kit';

<Input 
  label="Email" 
  type="email"
  error="Неверный формат email"
  helperText="Введите действующий email"
/>

Card

Карточка с анимациями:

import { Card } from 'iteco-ui-kit';

<Card elevation={3} onClick={() => console.log('Клик!')}>
  <div style={{ padding: '16px' }}>
    Содержимое карточки
  </div>
</Card>