Внешние зависимости

Уровень 1: Используемые примитивы

Уровень 2: Используемые UI-компоненты

Уровень 3: Компоненты макетов

использует

использует

использует

использует

использует

использует

требует

использует

использует

использует

использует

использует

использует

использует

использует

использует

использует

использует

использует

использует

опциональные иконки

опциональные иконки

DashLayout
(Структура дашборда)

LayoutBlock
(Секции контента)

SplitBlock
(Двухколоночные макеты)

Card

Button

Text

Title

Badge

Icon

Image

Container

Group

Block
(Семантические секции)

Box
(Общий контейнер)

Grid
(CSS Grid)

Stack
(Вертикальный/горизонтальный)

react-resizable-panels
(PanelGroup, Panel)

lucide-react
(Компоненты иконок)

рендерит

рендерит

содержит

содержит

содержит

оборачивает

оборачивает

использует

использует

использует

использует

использует

использует

использует

использует

Dashboard
(Основной компонент)

Navbar
(Заголовок с брендом + переключатель темы)

Sidebar
(Сворачиваемая навигация)

Main Panel
(Область контента)

PanelGroup
(direction: horizontal)

Panel
(Контейнер боковой панели)

PanelResizeHandle
(Ручка перетаскивания)

Panel
(Контейнер контента)

Block component='nav'

Group

Button variant='ghost'

Icon

Text

Block component='aside'

Stack

Container

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

<DashLayout
  sidebar={<NavSidebar />}
  navbarProps={{
    brand: "MyApp",
    isDarkMode: true,
    toggleDarkMode: handleToggle
  }}
>
  <Container>
    <Card p="lg">Content</Card>
  </Container>
</DashLayout>

рендерит

рендерит

рендерит

использует

использует

использует

оборачивает с

оборачивает в

LayoutBlock

Режим Grid
(layout='grid')

Режим Flex
(layout='flex')

Режим Stack
(layout='stack')

Компонент Grid
cols, gap, align, justify

Компонент Group
gap, align, justify, wrap

Компонент Stack
gap, align

Container
(опциональная обертка)

Block component='section'

content: {
  badge?: string;          // Опциональный текст бейджа
  title?: string;          // Заголовок секции
  description?: string;    // Описание секции
  items?: Array<{
    id: string;           // Обязательный уникальный идентификатор
    title?: string;       // Заголовок элемента
    description: string;  // Описание элемента (обязательно)
    image?: {             // Опциональное изображение
      src: string;
      alt: string;
    };
    lucideIcon?: any;     // Опциональный компонент иконки Lucide
    [key: string]: any;   // Дополнительные кастомные данные
  }>;
}

grid

flex

stack

renderItems()

тип layout?

Компонент Grid
cols, gap, align, justify
data-class='layout-grid'

Компонент Group
gap, align, justify, wrap
data-class='layout-flex'

Компонент Stack
gap, align
data-class='layout-stack'

itemRenderer(item, index)

<LayoutBlock
  layout="grid"
  cols="1-2-3"
  gap="lg"
  content={{
    badge: "Features",
    title: "Why Choose Us",
    description: "Discover our advantages",
    items: [
      {
        id: "1",
        title: "Fast",
        description: "Lightning speed",
        lucideIcon: Zap
      }
    ]
  }}
/>

<LayoutBlock
  layout="flex"
  wrap="wrap"
  contentHooks={{
    header: (content) => <CustomHeader {...content} />,
    item: (item, index) => <CustomCard key={item.id} {...item} />
  }}
  content={data}
/>

SplitBlock

Режим Container
(splitSection=false)

Режим на всю ширину
(splitSection=true)

Block component='section'

Обертка Container

Grid cols='1-2'

Grid cols='1-2'
data-class='split-grid'

leftMedia=true

leftMedia=false

slots?: {
  media?: ReactNode;      // Переопределить медиа секцию
  header?: ReactNode;     // Будущее: Слот заголовка
  body?: ReactNode;       // Будущее: Слот тела
  actions?: ReactNode;    // Будущее: Слот действий
}

<SplitBlock
  mediaSection={
    <Image src="/hero.jpg" alt="Hero" fit="cover" />
  }
  contentSection={
    <Stack gap="lg">
      <Title order={1}>Welcome</Title>
      <Text>Description text</Text>
      <Button>Get Started</Button>
    </Stack>
  }
  leftMedia
/>

<SplitBlock
  content={{ title: "Feature", description: "Details" }}
  contentHooks={{
    beforeContent: (content) => <Badge>{content.badge}</Badge>,
    content: (content) => (
      <Stack gap="md">
        <Title>{content.title}</Title>
        <Text>{content.description}</Text>
      </Stack>
    ),
    afterContent: () => <Button>Learn More</Button>
  }}
  slots={{
    media: <Image src="/feature.jpg" />
  }}
/>

<SplitBlock
  splitSection
  leftMedia={false}
  mediaSection={<HeroImage />}
  contentSection={<HeroContent />}
/>

применяет

применяет

применяет

применяет

'1-2-3' создает

Grid
(CSS Grid)

вариант cols
'1-2-3', '2', '3', '4'

вариант gap
'sm', 'md', 'lg', 'xl'

вариант align
'start', 'center', 'end'

вариант justify
'start', 'center', 'between'

Адаптивные колонки
1 колонка мобильная
2 колонки планшет
3 колонки десктоп

<Block
  component="section"  // Семантический HTML5 тег
  w="full"            // Полная ширина
  py="xl"             // Вертикальный padding
  data-class="layout-block"  // Идентификация DOM
>
  {/* Контент макета */}
</Block>

children

children

children

рендерит

рендерит

рендерит

DashLayout
(Оболочка приложения)

LayoutBlock layout='grid'
(Секция Hero)

LayoutBlock layout='flex'
(Секция Features)

SplitBlock
(Секция контента)

Card

Card

Card

<DashLayout sidebar={<Navigation />}>
  <LayoutBlock layout="grid" cols="1-2-3" content={heroData} />
  <SplitBlock mediaSection={<Image />} contentSection={<Content />} />
  <LayoutBlock layout="stack" content={testimonialsData} />
</DashLayout>

переопределяет

fallback

Рендерер по умолчанию
(Встроенный)

Кастомный хук
(Предоставленный пользователем)

Финальный рендер
(Вывод)

Данные контента

<SplitBlock
  // Базовые пропсы
  leftMedia
  gap="xl"
  
  // Оригинальные секции
  mediaSection={<DefaultImage />}
  contentSection={<DefaultContent />}
  
  // Переопределения слотов
  slots={{
    media: <CustomVideo />  // Переопределяет mediaSection
  }}
/>

const pageData = {
  badge: "New",
  title: "Feature Section",
  description: "Amazing features",
  items: [
    { id: "1", title: "Fast", description: "Speed", lucideIcon: Zap },
    { id: "2", title: "Secure", description: "Safe", lucideIcon: Lock }
  ]
};

<LayoutBlock layout="grid" cols="2" content={pageData} />

const contentHooks = useMemo(() => ({
  item: (item, index) => <ExpensiveComponent {...item} />
}), [dependencies]);

import { DashLayout, LayoutBlock, Card } from '@ui8kit/core';
import { Home, Settings, Users } from 'lucide-react';

function DashboardApp() {
  const [darkMode, setDarkMode] = useState(false);
  
  return (
    <DashLayout
      navbarProps={{
        brand: "Admin Panel",
        isDarkMode: darkMode,
        toggleDarkMode: () => setDarkMode(!darkMode)
      }}
      sidebar={
        <Stack gap="md">
          <Button variant="ghost" leftSection={<Home />}>
            Dashboard
          </Button>
          <Button variant="ghost" leftSection={<Users />}>
            Users
          </Button>
          <Button variant="ghost" leftSection={<Settings />}>
            Settings
          </Button>
        </Stack>
      }
    >
      <LayoutBlock
        layout="grid"
        cols="1-2-3"
        gap="lg"
        content={{
          title: "Overview",
          description: "Key metrics",
          items: statsData
        }}
      />
    </DashLayout>
  );
}

import { SplitBlock, LayoutBlock } from '@ui8kit/core';
import { Zap, Shield, Globe } from 'lucide-react';

function LandingPage() {
  return (
    <>
      <SplitBlock
        leftMedia={false}
        splitSection
        mediaSection={
          <Image
            src="/hero.jpg"
            alt="Hero"
            fit="cover"
            h="full"
          />
        }
        contentSection={
          <Stack gap="xl" align="start" p="2xl">
            <Badge variant="secondary">New Release</Badge>
            <Title order={1} size="4xl" fw="bold">
              Build Faster
            </Title>
            <Text size="xl" c="secondary-foreground">
              Create amazing interfaces with minimal code
            </Text>
            <Group gap="md">
              <Button variant="primary" size="lg">
                Get Started
              </Button>
              <Button variant="outline" size="lg">
                Learn More
              </Button>
            </Group>
          </Stack>
        }
      />
      
      <LayoutBlock
        layout="grid"
        cols="1-2-3"
        gap="xl"
        py="3xl"
        content={{
          badge: "Features",
          title: "Why Choose Us",
          description: "Everything you need to succeed",
          items: [
            {
              id: "fast",
              title: "Lightning Fast",
              description: "Optimized for performance",
              lucideIcon: Zap
            },
            {
              id: "secure",
              title: "Secure by Default",
              description: "Built with security in mind",
              lucideIcon: Shield
            },
            {
              id: "global",
              title: "Global Scale",
              description: "Deploy worldwide instantly",
              lucideIcon: Globe
            }
          ]
        }}
      />
    </>
  );
}

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

const articleHooks = createLayoutContentHook({
  header: (content) => (
    <Stack gap="md" align="center" ta="center">
      <Badge>{content.category}</Badge>
      <Title order={1} size="4xl">{content.title}</Title>
      <Text c="muted" size="sm">
        {content.author} • {content.date}
      </Text>
    </Stack>
  ),
  item: (item, index) => (
    <Card p="xl" rounded="lg" shadow="sm">
      <Stack gap="lg">
        <Title order={2} size="2xl">{item.title}</Title>
        <Text>{item.content}</Text>
        {item.quote && (
          <Box p="lg" bg="muted" rounded="md" border="1px solid border">
            <Text size="lg" fw="medium">"{item.quote}"</Text>
          </Box>
        )}
      </Stack>
    </Card>
  )
});

function ArticlePage() {
  return (
    <LayoutBlock
      layout="stack"
      gap="2xl"
      containerSize="md"
      contentHooks={articleHooks}
      content={articleData}
    />
  );
}