Слой стилизации

Слой 1: Базовые примитивы

Слой 2: UI-компоненты

Слой 3: Макеты

Дерево решений

Да

Нет

Да

Нет

Да

Начало разработки

Нужна пользовательская структура макета?

Нужен предварительно стилизованный компонент?

Нужен базовый примитив?

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

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

Использование базовых примитивов

DashLayout
src/layouts/DashLayout.tsx

LayoutBlock
src/layouts/LayoutBlock.tsx

SplitBlock
src/layouts/SplitBlock.tsx

Button
src/components/ui/Button.tsx

Card + Card.Header/Content/Footer
src/components/ui/Card.tsx

Accordion
src/components/ui/Accordion.tsx

Sheet
src/components/ui/Sheet.tsx

Box
src/core/ui/Box.tsx

Block
src/core/ui/Block.tsx

Grid
src/core/ui/Grid.tsx

Flex
src/core/ui/Flex.tsx

Stack
src/core/ui/Stack.tsx

Применение вариантов CVA
src/core/variants/

spacingVariants

colorVariants

layoutVariants

typographyVariants

effectsVariants

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

Обработка во время выполнения

Категории вариантов

Рабочий процесс разработчика

Написание JSX с пропсами вариантов

Выбор из 12 категорий вариантов

TypeScript валидирует пропсы

Отступы: p, m, px, py, mx, my и т.д.
src/core/variants/spacingVariants.ts

Цвета: bg, c, borderColor
src/core/variants/colorVariants.ts

Макет: w, h, minH, maxW, position
src/core/variants/layoutVariants.ts

Типография: size, weight, align, leading
src/core/variants/typographyVariants.ts

Эффекты: rounded, shadow, border
src/core/variants/effectsVariants.ts

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

Сгенерированные классы Tailwind

core-classes.json
белый список из 618 классов
src/lib/core-classes.json

Базовые примитивы
Прямое применение вариантов

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

Отрендеренный DOM
с атрибутами data-class

import { Box, Stack } from '@ui8kit/core';

// Простой контейнер с вариантами
<Box p="lg" bg="card" rounded="xl" shadow="md">
  <Stack gap="md">
    {/* контент */}
  </Stack>
</Box>

import { Button, Card } from '@ui8kit/core';

// Составной компонент с составными частями
<Card p="lg" shadow="md">
  <Card.Header>
    <Card.Title>Заголовок</Card.Title>
  </Card.Header>
  <Card.Content>
    Контент
  </Card.Content>
  <Card.Footer>
    <Button variant="primary">Действие</Button>
  </Card.Footer>
</Card>

import { DashLayout, Container } from '@ui8kit/core';

// Шаблон панели управления
<DashLayout 
  sidebar={<Sidebar />}
  header={<Header />}
>
  <Container>
    {/* основной контент */}
  </Container>
</DashLayout>

import { Button } from '@ui8kit/core';

// Button расширяет Box, наследует все пропсы вариантов
<Button 
  variant="primary"
  size="md"
  p="lg"           // вариант отступов из Box
  rounded="xl"     // вариант эффектов из Box
  shadow="sm"      // вариант эффектов из Box
>
  Отправить
</Button>

import { LayoutBlock } from '@ui8kit/core';

<LayoutBlock
  layout="grid"
  contentHooks={{
    beforeContent: () => <Header />,
    content: () => <MainContent />,
    afterContent: () => <Footer />
  }}
/>

Метод 4: Прямой исходный код

Метод 3: Git Submodule

Метод 2: Установка по компонентам

Метод 1: Полная установка NPM

Факторы решения

Да

Нет

Да

Нет

Да

Нет

Да

Нет

Выбор метода интеграции

Нужна вся библиотека?

Критичен размер бандла?

Архитектура монорепозитория?

Требуется пользовательская сборка?

npm install @ui8kit/core

Импорт всех 18 компонентов

Использует dist/index.js
модули ES2022

npx buildy-ui add button card

Читает метаданные registry.json

Копирует конкретные файлы в
components/ui/ или layouts/

git submodule add
Unsupported markdown: link

packages/@ui8kit/core

Импорт из пути субмодуля

Копирование каталога src/

Пользовательская сборка TypeScript

Полный контроль над компиляцией

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@ui8kit/core/dist/**/*.js',
  ],
  darkMode: 'class',
  safelist: [
    // Включите core-classes.json при необходимости
  ],
};

const coreClasses = require('@ui8kit/core/src/lib/core-classes.json');

module.exports = {
  safelist: coreClasses,
};

Фаза выполнения

Фаза сборки

Фаза разработки

Пропсы вариантов

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

Unsupported markdown: list
Unsupported markdown: list
Unsupported markdown: list
Unsupported markdown: list
Unsupported markdown: list
Unsupported markdown: list
Unsupported markdown: list
Unsupported markdown: list
Unsupported markdown: list
Unsupported markdown: list
Unsupported markdown: list

// Компонент Card рендерится с data-class
<Card p="lg">
  {/* Рендерится как: */}
  {/* <div data-class="card" class="p-8">...</div> */}
</Card>

// Составные компоненты поддерживают иерархию
<Card.Header>
  {/* Рендерится как: */}
  {/* <div data-class="card-header">...</div> */}
</Card.Header>

// Запрос по data-class в тестах
const card = screen.getByTestId('[data-class="card"]');
const header = screen.getByTestId('[data-class="card-header"]');

// CSS-селекторы
[data-class="card"] { /* стили */ }
[data-class="button"][data-variant="primary"] { /* стили */ }

import { Button, Box } from '@ui8kit/core';
import { useRef } from 'react';

function MyComponent() {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const boxRef = useRef<HTMLDivElement>(null);
  
  const handleClick = () => {
    buttonRef.current?.focus();
    boxRef.current?.scrollIntoView();
  };
  
  return (
    <>
      <Button ref={buttonRef}>Фокус на мне</Button>
      <Box ref={boxRef}>Прокрутить ко мне</Box>
    </>
  );
}

import type { ButtonProps, CardProps } from '@ui8kit/core';

// Типобезопасное определение пропсов
interface MyButtonProps extends ButtonProps {
  customProp?: string;
}

// Типы пропсов вариантов выводятся автоматически
<Button 
  variant="primary"  // ✓ Типобезопасно: 'primary' | 'secondary' | 'ghost' | 'destructive'
  size="md"          // ✓ Типобезопасно: 'sm' | 'md' | 'lg'
  p="lg"             // ✓ Типобезопасно: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
>
  Отправить
</Button>