Основа: Система вариантов

Уровень 1: Базовые примитивы (Атомы)

Уровень 2: UI-компоненты (Молекулы)

Уровень 3: Макеты (Организмы)

использует

использует

использует

использует

расширяет

расширяет

использует

расширяет

применяет

применяет

применяет

применяет

DashLayout

LayoutBlock

SplitBlock

Card + Card.Header/Content/Footer

Button

Badge

Title

Text

Image

Icon

Accordion

Sheet

Group

Container

Block

Box

Grid

Flex

Stack

class-variance-authority

spacingVariants

colorVariants

layoutVariants

typographyVariants

effectsVariants

пробрасывает свойства

импортирует

JSX разработчика
Card p='lg' rounded='xl'

Компонент Card
src/components/ui/Card.tsx

Примитив Block
src/core/ui/Block.tsx

spacingVariants
roundedVariants
shadowVariants

class-variance-authority
Разрешает варианты

Классы Tailwind
p-8 rounded-xl

// Из src/layouts/LayoutBlock.tsx
interface LayoutBlockProps {
  contentHooks?: {
    beforeContent?: () => React.ReactNode;
    content?: () => React.ReactNode;
    afterContent?: () => React.ReactNode;
  };
}

свойства

собственные варианты

пробрасывает в

применяет

объединяется с

Код пользователя
Button p='md' rounded='lg' shadow='sm'

Компонент Button
src/components/ui/Button.tsx

Примитив Box
src/core/ui/Box.tsx

buttonStyleVariants
buttonSizeVariants

spacingVariants
roundedVariants
shadowVariants

// src/components/ui/Card.tsx
<Block data-class="card" {...props}>
  {children}
</Block>

// Составные части также используют data-class
<Box data-class="card-header">{children}</Box>
<Box data-class="card-content">{children}</Box>
<Box data-class="card-footer">{children}</Box>

@ui8kit/core/
├── src/
│   ├── core/
│   │   ├── ui/              # Уровень 1: 5 примитивов
│   │   │   ├── Box.tsx
│   │   │   ├── Block.tsx
│   │   │   ├── Grid.tsx
│   │   │   ├── Flex.tsx
│   │   │   └── Stack.tsx
│   │   └── variants/        # Определения вариантов CVA
│   │       ├── spacing.ts
│   │       ├── colors.ts
│   │       ├── layout.ts
│   │       ├── typography.ts
│   │       └── effects.ts
│   ├── components/
│   │   └── ui/              # Уровень 2: 15 UI-компонентов
│   │       ├── button.tsx
│   │       ├── card.tsx
│   │       ├── badge.tsx
│   │       └── ...
│   ├── layouts/             # Уровень 3: 3 шаблона макетов
│   │   ├── DashLayout.tsx
│   │   ├── LayoutBlock.tsx
│   │   └── SplitBlock.tsx
│   ├── themes/
│   │   └── providers/       # Система тем
│   │       └── ThemeProvider.tsx
│   ├── lib/
│   │   ├── core-classes.json  # Сгенерированный whitelist классов (618 классов)
│   │   └── utils.ts
│   └── registry.json        # Метаданные компонентов
├── dist/                    # Результат сборки (модули ES2022)
│   ├── index.js
│   └── index.d.ts
└── scripts/
    └── cva-extractor.ts     # Извлечение классов на этапе сборки

компиляция tsc

npm publish

импортирует

импортирует

импортирует

src/core/ui/
Box, Block, Grid, Flex, Stack

src/core/variants/
12 определений вариантов

src/components/ui/
15 композитных компонентов

src/layouts/
3 шаблона макетов

src/themes/providers/
ThemeProvider

src/index.ts
Центральный файл экспорта

dist/
index.js + index.d.ts

Реестр NPM
@ui8kit/core

// Базовые примитивы
export * from './core/ui/Box';
export * from './core/ui/Block';
export * from './core/ui/Grid';
export * from './core/ui/Flex';
export * from './core/ui/Stack';

// UI-компоненты
export * from './components/ui/button';
export * from './components/ui/card';
// ... еще 13

// Макеты
export * from './layouts/DashLayout';
export * from './layouts/LayoutBlock';
export * from './layouts/SplitBlock';

// Система тем
export * from './themes/providers/ThemeProvider';

// Варианты (опциональный экспорт для расширения)
export * from './core/variants';

Паттерн 5: Хуки контента

LayoutBlock
функции contentHooks

beforeContent, content, afterContent

Динамическая отрисовка секций

Паттерн 4: Композиция макета

DashLayout
sidebar, header, children

Container + Card + Stack

Структура панели управления

Паттерн 3: Проброс свойств

Button p='md' rounded='lg'
+ специфичные свойства button

Объединяет варианты button + базовые варианты

Стилизованный элемент button

Паттерн 2: Составные компоненты

Card
Card.Header
Card.Content
Card.Footer

Структурированная карточка с частями

Паттерн 1: Прямой примитив

Block component='form' p='lg'

элемент form с отступами

Свойства компонента
p='lg' rounded='xl' shadow='md'

Импортированные варианты
spacingVariants
roundedVariants
shadowVariants

Движок CVA
class-variance-authority

Сгенерированные классы
'p-8 rounded-xl shadow-md'

core-classes.json
whitelist из 618 классов

Очистка Tailwind CSS
Валидация safelist

Вывод в DOM
атрибут className

сканирование

генерирует

записывает

импортируется в

src/core/variants/
определения вариантов *.ts

scripts/cva-extractor.ts
Статический анализ

Извлеченные классы
всего 618 классов

src/lib/core-classes.json
Зафиксированный артефакт

tailwind.config.js
конфигурация safelist

Артефакты сборки (Зафиксированные)

Инструменты времени сборки

Исходный код
src/

cva-extractor.ts
Извлечение CSS-классов

Компилятор TypeScript
tsc -p tsconfig.json

ESLint
Проверка качества кода

buildy-ui scan
Метаданные компонентов

src/lib/core-classes.json
618 классов

dist/index.js
dist/index.d.ts

src/registry.json
Метаданные компонентов

Приложение потребителя

Внешние зависимости времени выполнения

Системы времени выполнения

dist/index.js
Скомпилированные модули

Базовые примитивы
Block, Box, Grid, Flex, Stack

Система вариантов
class-variance-authority

UI-компоненты
15 композитных компонентов

Шаблоны макетов
3 компонента макетов

Система тем
ThemeProvider + useTheme

react ^18 | ^19

lucide-react
Иконки

react-resizable-panels
Макеты

class-variance-authority
Движок вариантов

Код приложения
импорт из @ui8kit/core

Tailwind CSS
Утилитарная стилизация

{
  "main": "./dist/index.js",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.js"
    },
    "./registry.json": "./src/registry.json",
    "./core-classes.json": "./src/lib/core-classes.json"
  }
}

Проект потребителя

Методы интеграции

npm publish

@ui8kit/core
Репозиторий GitHub

Реестр NPM
@ui8kit/Unsupported markdown: link

src/registry.json
Метаданные компонентов

npm install @ui8kit/core
Все 18 компонентов

npx buildy-ui add button
Выборочная установка

git submodule add
Интеграция монорепо

Копирование директории src/
Пользовательская сборка

node_modules/@ui8kit/core

src/components/ui/

packages/@ui8kit/core

src/lib/ui8kit/

interface Registry {
  version: string;
  items: ComponentItem[];
}

interface ComponentItem {
  name: string;              // Идентификатор компонента
  type: "registry:ui" | "registry:layout";
  description: string;       // Человекочитаемое описание
  dependencies?: string[];   // Зависимости внешних пакетов
  registryDependencies?: string[]; // Внутренние зависимости компонентов
  files: string[];          // Пути к исходным файлам
  target?: string;          // Целевая директория установки
}

{
  "name": "card",
  "type": "registry:ui",
  "description": "Flexible card component with compound parts",
  "dependencies": [],
  "registryDependencies": ["block", "box"],
  "files": ["src/components/ui/card.tsx"],
  "target": "components/ui"
}

{
  "paths": {
    "@/*": ["./src/*"],
    "@/components/*": ["./src/components/*"],
    "@/core/*": ["./src/core/*"],
    "@/layouts/*": ["./src/layouts/*"]
  }
}

Компоненты-потребители

Сохранение

Состояние темы

isDarkMode: boolean

setDarkMode: function

toggleDarkMode: function

Компонент ThemeProvider
src/themes/providers/ThemeProvider.tsx

localStorage
'ui8kit-theme'

prefers-color-scheme
медиа-запрос

хук useTheme()

ThemeContext

// Оборачивание приложения
import { ThemeProvider, modernUITheme } from '@ui8kit/core';

<ThemeProvider theme={modernUITheme}>
  <App />
</ThemeProvider>

// Доступ к теме в компонентах
import { useTheme } from '@ui8kit/core';

const { isDarkMode, toggleDarkMode } = useTheme();