Вывод

Паттерны React

Система вариантов CVA

Слой 1: Базовые компоненты (этот документ)

Block
component='section' | 'article' | 'nav' | и т.д.
data-class='block'

Box
component='div' | 'span' | любой ElementType
data-class='box'

Grid
CSS Grid макет
props: cols, rows, gap

Flex
Flexbox макет
props: direction, align, justify

Stack
Вертикальное/горизонтальное расположение
props: gap, direction

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

spacingVariants()
p, m, px, py и т.д.

colorVariants()
bg, c, borderColor

layoutVariants()
w, h, minH, position

roundedVariants()
rounded

shadowVariants()
shadow

borderVariants()
border, borderTop и т.д.

forwardRef()
Пересылка ref в DOM

Интерфейсы TypeScript
HTMLAttributes + VariantProps

...props
Пересылка HTML-атрибутов

Семантический HTML5
section, article, nav, header, footer

Атрибуты data-class
для обращения к DOM

Классы Tailwind CSS
применяются к className

ref={blockRef}

пересылка ref

blockRef.current?.scrollIntoView()

Родительский компонент
const blockRef = useRef(null)

Block
forwardRef

DOM-элемент
section | article | nav | и т.д.

export const Block = forwardRef<HTMLElement, BlockProps>(
  ({ children, className, component, variant = 'div', ...props }, ref) => {
    // Реализация компонента
  }
);

extends

extends

extends

Pick<..., 'w' | 'h' | 'minH' | 'position'>

extends

extends

extends

включает

BlockProps
Интерфейс компонента

React.HTMLAttributes
Стандартные HTML-атрибуты

VariantSpacingProps
p, px, py, pt, pb, pl, pr
m, mx, my, mt, mb, ml, mr

ColorProps
bg, c, borderColor

VariantLayoutProps
w, h, minH, maxW, position

RoundedProps
rounded

ShadowProps
shadow

BorderProps
border, borderTop и т.д.

Кастомные пропсы
children: ReactNode
component?: ElementType
variant?: 'section' | 'article' | ...

export interface BlockProps 
  extends React.HTMLAttributes<HTMLElement>,
    VariantSpacingProps,
    ColorProps,
    Pick<VariantLayoutProps, 'w' | 'h' | 'minH' | 'position'>,
    RoundedProps,
    ShadowProps,
    BorderProps {
  children: ReactNode;
  component?: ElementType;
  variant?: 'section' | 'main' | 'nav' | 'article' | 'header' | 'footer' | 'aside' | 'div';
}

Входящие пропсы
p='lg', onClick, data-testid и т.д.

Деструктурированные пропсы вариантов
p, px, py, m, bg, c, w, h, rounded, shadow, border

Остальные пропсы (...props)
onClick, data-testid, aria-label и т.д.

Функции вариантов
spacingVariants({ p, px, py, ... })
colorVariants({ bg, c })
layoutVariants({ w, h })

prop className
cn(варианты, кастомный className)

Базовый компонент
Block/Box/Grid/Flex/Stack

Отрендеренный DOM-элемент
с className + ...props

({ 
  children, 
  className,
  component,
  variant = 'div',
  // Пропсы отступов
  p, px, py, pt, pb, pl, pr,
  m, mx, my, mt, mb, ml, mr,
  // Пропсы цвета
  bg, c, borderColor,
  // Пропсы макета
  w = 'full', h, minH, position,
  // Визуальные пропсы
  rounded, shadow,
  // Пропсы границ
  border, borderTop, borderBottom, borderLeft, borderRight,
  ...props  // Оставшиеся HTML-атрибуты
}, ref)

// Использовать variant как component, если component не указан явно
const elementType = component || variant;

return (
  <BaseBlock
    ref={ref}
    component={elementType}
    data-class="block"

// Рендерится как <section> с полной шириной
<Block variant="section" p="lg" rounded="xl">
  Содержимое секции
</Block>

// Рендерится как <nav> с кастомным фоном
<Block variant="nav" bg="primary" c="white">
  Навигационные ссылки
</Block>

// Переопределение кастомным компонентом
<Block component="article" p="md">
  Содержимое статьи
</Block>

// Рендерится как <div>
<Box p="md" bg="card">
  Универсальный контейнер
</Box>

// Рендерится как <span> (инлайн)
<Box component="span" c="primary" weight="bold">
  Инлайн-текст
</Box>

// Рендерится как кастомный элемент
<Box component="input" w="full" p="sm" border="default" />

// Сетка с 2 колонками и промежутками
<Grid cols={2} gap="md" p="lg">
  <Box>Элемент 1</Box>
  <Box>Элемент 2</Box>
  <Box>Элемент 3</Box>
  <Box>Элемент 4</Box>
</Grid>

// Адаптивная сетка с 3 колонками
<Grid cols={3} gap="lg" w="full">
  {items.map(item => <Card key={item.id}>{item.name}</Card>)}
</Grid>

// Горизонтальный flex с центрированными элементами
<Flex direction="row" align="center" justify="between" p="md">
  <Text>Левое содержимое</Text>
  <Button>Правое действие</Button>
</Flex>

// Вертикальный flex
<Flex direction="column" gap="md">
  <Box>Элемент 1</Box>
  <Box>Элемент 2</Box>
</Flex>

// Вертикальное расположение (по умолчанию)
<Stack gap="md" p="lg">
  <Text>Элемент 1</Text>
  <Text>Элемент 2</Text>
  <Text>Элемент 3</Text>
</Stack>

// Горизонтальное расположение
<Stack direction="horizontal" gap="sm">
  <Button>Отмена</Button>
  <Button variant="primary">Отправить</Button>
</Stack>

валидируется через

Пропсы вариантов
p='lg', bg='card', rounded='xl'

Функции вариантов
spacingVariants({ p: 'lg' })
colorVariants({ bg: 'card' })
roundedVariants({ rounded: 'xl' })

Сгенерированные классы
'p-8' (из p='lg')
'bg-card' (из bg='card')
'rounded-xl' (из rounded='xl')

Кастомный className
(опциональное переопределение пользователем)

утилита cn()
tw-merge для разрешения конфликтов

Финальный className
применяется к компоненту

core-classes.json
белый список из 618 классов
предотвращает очистку Tailwind

className={cn(
  // Применить варианты
  spacingVariants({ p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr }),
  colorVariants({ bg, c, borderColor }),
  layoutVariants({ w, h, minH, position }),
  roundedVariants({ rounded }),
  shadowVariants({ shadow }),
  borderVariants({ border, borderTop, borderBottom, borderLeft, borderRight }),
  className  // Кастомный className пользователя (если указан)
)}

src/core/ui/Block/
├── Block.tsx          # Реализация компонента
└── index.ts           # Публичные экспорты

import {
  Block as BaseBlock,           // Базовый компонент из core
  spacingVariants,              // Функции вариантов
  colorVariants,
  layoutVariants,
  roundedVariants,
  shadowVariants,
  borderVariants,
  type VariantSpacingProps,     // Типы TypeScript
  type ColorProps,
  type VariantLayoutProps,
  type RoundedProps,
  type ShadowProps,
  type BorderProps,
  cn                            // Утилитная функция
} from "@ui8kit/core";

export { Box, type BoxProps } from "./Box";

Block
data-class='block'

Box
data-class='box'

Grid
data-class='grid'

Flex
data-class='flex'

Stack
data-class='stack'

Запросы к DOM
document.querySelector('[data-class=block]')
screen.getByTestId('block')

CSS-селекторы
[data-class='block'] { ... }

Инструменты браузера
фильтрация по data-class

data-class="block"

// React Testing Library
const blockElement = screen.getByTestId('block');

// Прямой запрос к DOM
const allBlocks = document.querySelectorAll('[data-class="block"]');

// Cypress
cy.get('[data-class="block"]').should('exist');

Block.displayName = "Block";

Слой 1: Базовые компоненты

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

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

использует

использует

использует

использует

использует

использует

расширяет

расширяет

использует

DashLayout
Компонует: Container, Grid, Flex

LayoutBlock
Использует: Grid или Flex

SplitBlock
Использует: Container

Card
Расширяет: Block
Пересылает пропсы вариантов

Button
Расширяет: Box
Добавляет специфичные для кнопки варианты

Container
Использует: Block
Добавляет логику max-width

Block
Прямое применение вариантов

Box
Прямое применение вариантов

Grid
Прямое применение вариантов

Flex
Прямое применение вариантов

Stack
Прямое применение вариантов

// Компонент Card внутренне использует Block
<Block
  component="div"
  data-class="card"
  className={cn(cardVariants({ variant }), className)}
  {...variantProps}  // Пересылает пропсы spacing, color, layout
>
  {children}
</Block>

// DashLayout компонует несколько базовых компонентов
<Block component="div" className="dashboard-layout">
  <Grid cols={12} gap="md">
    <Block component="aside" className="sidebar">
      {sidebar}
    </Block>
    <Block component="main" className="content">
      {children}
    </Block>
  </Grid>
</Block>