MPI Design System

Унифицированная компонентная система, объединяющая shadcn/ui и OriginUI с Lucide иконками и компонентной дизайн системой.

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

# Клонирование и установка
git clone <repository>
cd MPI
npm install

# Запуск в режиме разработки
npm run dev

# Сборка для продакшена
npm run build

Проект доступен по адресу: http://localhost:3000

📁 Структура проекта

src/
├── app/                     # Next.js App Router страницы
│   ├── layout.tsx          # Корневой layout
│   ├── page.tsx            # Главная страница
│   └── demo/               # Демонстрационная страница
├── components/
│   ├── ui/                 # UI компоненты (с cva внутри)
│   │   ├── button.tsx      # Button + buttonVariants
│   │   ├── alert.tsx       # Alert + alertVariants
│   │   ├── badge.tsx       # Badge + badgeVariants
│   │   └── ...
│   └── index.ts            # Централизованный экспорт
├── lib/
│   ├── design-system.ts    # ТОЛЬКО токены дизайна
│   ├── utils.ts            # Утилиты (cn функция)
│   └── figma-import.ts     # Figma MCP интеграция
└── styles/
    └── globals.css         # CSS переменные и глобальные стили

🎨 Архитектура дизайн системы

Компонентная архитектура

Каждый компонент содержит свои собственные cva варианты:

// src/components/ui/button.tsx
import { cva, type VariantProps } from "class-variance-authority"

const buttonVariants = cva(
  "базовые-стили",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground",
        // ...
      },
    },
  }
)

export const Button = React.forwardRef(...)
export { buttonVariants }

Токены дизайна

src/lib/design-system.ts содержит ТОЛЬКО токены:

export const designSystem = {
  spacing: { xs: "0.25rem", sm: "0.5rem", md: "1rem", ... },
  typography: { xs: "text-xs", sm: "text-sm", base: "text-base", ... },
  radius: { none: "rounded-none", sm: "rounded-sm", ... },
  shadow: { sm: "shadow-sm", md: "shadow-md", ... },
}

CSS переменные

Все цвета определены через CSS переменные в globals.css:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --secondary: 210 40% 96%;
  --destructive: 0 84.2% 60.2%;
  /* ... */
}

🧩 Использование компонентов

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

import { Button, Alert, Badge } from "@/components"

function App() {
  return (
    <div>
      <Button variant="default" size="lg">
        Click me
      </Button>

      <Alert variant="success">
        <AlertTitle>Success!</AlertTitle>
        <AlertDescription>Operation completed successfully.</AlertDescription>
      </Alert>

      <Badge variant="outline">New</Badge>
    </div>
  )
}

Доступ к вариантам

import { Button, buttonVariants } from "@/components";

// Использование вариантов напрямую
const buttonClasses = buttonVariants({ variant: "outline", size: "sm" });

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

Из shadcn/ui

1. Скопируйте компонент из shadcn/ui
2. Оставьте cva варианты в компоненте
3. Замените иконки на Lucide
4. Обновите стили для CSS переменных

// src/components/ui/new-component.tsx
import { cva, type VariantProps } from "class-variance-authority"
import { SomeIcon } from "lucide-react"

const newComponentVariants = cva(...)

export const NewComponent = React.forwardRef(...)
export { newComponentVariants }

Из OriginUI

1. Скопируйте компонент из OriginUI
2. Создайте cva варианты в компоненте
3. Замените иконки на Lucide
4. Используйте CSS переменные

Пример добавления

// 1. Создаем компонент
// src/components/ui/tooltip.tsx
const tooltipVariants = cva(...)
export const Tooltip = React.forwardRef(...)
export { tooltipVariants }

// 2. Добавляем в index.ts
export { Tooltip, tooltipVariants } from "./ui/tooltip"

🔗 Figma MCP интеграция

Сопоставление компонентов

Система автоматически сопоставляет Figma компоненты с кодовой базой:

• @#Button → Button
• @#Alert → Alert
• @#CustomComponent → CustomComponent

Логика работы

// Найден существующий компонент
if (componentExists) {
  useExistingComponent(componentName);
} else {
  createNewComponent(componentName); // с cva внутри
}

Пример импорта

import { extractComponentName, getComponentAction } from "@/lib/figma-import"

const figmaComponent = { name: "@#Card", ... }
const action = getComponentAction(figmaComponent, projectComponents)

if (action.action === 'use_existing') {
  // Использовать существующий Card компонент
} else {
  // Создать новый компонент с cva вариантами
}

🎭 Lucide иконки

Все иконки используют Lucide React:

import { Search, User, Settings, Heart, Star } from "lucide-react"

function Example() {
  return (
    <div>
      <Search className="h-4 w-4 text-muted-foreground" />
      <User size={20} />
      <Settings className="h-5 w-5 text-primary" />
    </div>
  )
}

🤖 Правила для AI агента

Детальные правила находятся в:

• AGENT_RULES.md - Полные правила адаптации
• AI_AGENT_INSTRUCTIONS.md - Краткие инструкции

Ключевые принципы

• ✅ cva варианты ВНУТРИ каждого компонента
• ✅ design-system.ts содержит ТОЛЬКО токены
• ✅ Все иконки заменяются на Lucide
• ✅ Обязательный экспорт вариантов: export { Component, componentVariants }
• ✅ CSS переменные вместо хардкод цветов

Контрольный список

• cva варианты в компоненте?
• Lucide иконки?
• CSS переменные?
• React.forwardRef + displayName?
• Экспорт компонента И вариантов?

🛠 Технологии

• Next.js 14+ - React фреймворк с App Router
• TypeScript - Типизированный JavaScript
• Tailwind CSS - CSS фреймворк с утилитами
• CSS Variables - Кастомные CSS свойства для тем
• Lucide React - Иконки (https://lucide.dev)
• class-variance-authority - Типобезопасные варианты стилей
• clsx + tailwind-merge - Утилиты для работы с классами
• @radix-ui/react-slot - Гибкое рендеринг компонентов

📝 Лицензия

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

🤝 Вклад в проект

1. Fork проекта
2. Создайте feature ветку (git checkout -b feature/amazing-feature)
3. Следуйте правилам в AGENT_RULES.md
4. Commit изменения (git commit -m 'Add amazing feature')
5. Push в ветку (git push origin feature/amazing-feature)
6. Откройте Pull Request

---

Особенности архитектуры:

• 🎯 Компонентная дизайн система
• 🔄 Figma → Code интеграция
• 🎨 Единообразные стили через CSS переменные
• 🧩 Модульные, переиспользуемые компоненты