@shmidko61/lc-ui-templates

Переиспользуемые адаптивные шаблоны и слотные композиции на базе @shmidko61/lc-ui-kit.

Установка

pnpm add @shmidko61/lc-ui-templates @shmidko61/lc-ui-kit

@shmidko61/lc-ui-kit является обязательной peer-зависимостью и устанавливается в приложении один раз. Стили UI-kit также подключаются один раз в точке входа:

import '@shmidko61/lc-ui-kit/styles.css';

Пакет требует React 19. Для нескольких шаблонов можно использовать корневой entry point:

import { HeroDefault, Spacer } from '@shmidko61/lc-ui-templates';

Для одной фичи рекомендуется отдельный subpath:

import { HeroDefault } from '@shmidko61/lc-ui-templates/hero-default';
import { Spacer } from '@shmidko61/lc-ui-templates/spacer';

Прежний импорт Hero из @shmidko61/lc-ui-templates/hero сохранён как deprecated-алиас для обратной совместимости. В новом коде используйте HeroDefault и subpath hero-default.

Npm скачивает один tarball, но отдельные entry points позволяют сборщику приложения не включать неиспользуемые фичи в итоговый bundle.

Релиз 0.7.0

Добавлен AnimatedTarotCard: одиночный слотный шаблон с независимыми настройками entrance, idle, reveal, flip и deck. Все медиа передаются через слоты; CSS-файлы и пакет features не требуются. В Storybook 12 примеров API и 20 оформлений с реальными изображениями. Подробнее — CHANGELOG.

import { AnimatedTarotCard } from '@shmidko61/lc-ui-templates/animated-tarot-card';

Каталог фич

Каждый публичный шаблон сопровождается README с preview-скриншотом, описанием API и примером использования:

• HeroDefault — адаптивный первый экран.
• ImageTrailHero — интерактивный слотный hero со следом из media-элементов.
• DragElementsCarousel — свободная draggable-сцена с responsive-позициями и ReactNode-слотами.
• ModernHero — слотный hero с семипозиционным media-коллажем.
• PrismaHero — слотный media-hero с многослойной композицией.
• ScrollLandingHero — scroll-сцена, перемещающая icon-слоты внутрь финального текста.
• TigerTearHero — слотный scroll-hero с разрывом foreground-листа и reveal-слоем.
• Spacer — адаптивный вертикальный отступ.
• CardsWrapper — стандартная generic-обёртка из коллекции cards-wrapper.
• PickCardsWrapper — управляемый слотный шаблон выбора карточки и показа результата.
• AnimatedTarotCard — слотная одиночная карточка с настраиваемой анимацией и фоновым веером.
• DefaultCard — карточка из ReactNode-слотов.
• HorizontalCard — горизонтальная media-карточка.
• HorizontalFeatureWrapper — горизонтальная обёртка с левым и правым слотами.
• VerticalFeatureWrapper — вертикальная обёртка с верхним и нижним слотами (FeatureWrapper сохранён как alias).
• SecondaryFooter — вертикальный footer с пятью именованными слотами.
• SideDecoration — боковая декорация.
• DefaultHeader — адаптивный шаблон header.
• StickyHeader — интерактивный sticky-header с мобильным меню.
• DefaultFooter — адаптивный шаблон footer.
• ExpandingCarousel — слотная раскрывающаяся карусель.
• StackedCarousel — циклическая drag-карусель с карточками, разложенными веером.

HeroDefault

HeroDefault — адаптивный контейнер первого экрана. Он управляет размерами и art direction фонового изображения на breakpoint-ах sm, md, lg, xl.

import { HeroDefault } from '@shmidko61/lc-ui-templates/hero-default';
import { Typography } from '@shmidko61/lc-ui-kit/typography';

export function HomeHero() {
  return (
    <HeroDefault
      aria-label="Главный экран"
      data={{
        width: '100%',
        height: 480,
        background: '/images/hero-mobile.webp',
        md: {
          height: 560,
          background: '/images/hero-tablet.webp',
        },
        lg: {
          height: 680,
          background: '/images/hero-desktop.webp',
        },
      }}
    >
      <Typography as="h1" color="#fff" variant="h1">
        Заголовок первого экрана
      </Typography>
    </HeroDefault>
  );
}

Наследование breakpoint-ов

Поля внутри md, lg, xl опциональны. Пропущенное значение наследуется из предыдущего диапазона:

<HeroDefault
  data={{
    width: '100%',
    height: 400,
    background: '/hero.webp',
    md: { height: 520 },
    xl: { height: 720, background: '/hero-wide.webp' },
  }}
/>

В примере фон hero.webp используется до XL, а LG наследует высоту 520 от MD.

Настройка source

Вместо строки background принимает объект, совместимый с PictureBreakpointSource. Он нужен для явного MIME-типа, sizes и других атрибутов <source>:

<HeroDefault
  data={{
    width: '100%',
    height: 600,
    background: {
      srcSet: '/hero.avif 1x, /[email protected] 2x',
      type: 'image/avif',
    },
  }}
/>

Canvas-слой

canvas располагается над фоном и под children. Обёртка слоя декоративная, не перехватывает события мыши и скрыта от accessibility tree.

<HeroDefault
  canvas={<StarsCanvas />}
  data={{ width: '100%', height: '100vh', background: '/space.webp' }}
>
  <HeroContent />
</HeroDefault>

Props

• data — обязательные базовые размеры и фон, а также частичные md, lg, xl overrides.
• canvas — необязательный декоративный слой.
• contentClassName — класс внутреннего слоя с children.
• children — содержимое поверх фона и canvas.
• остальные props передаются HTML-элементу <section>, включая id, aria-*, className и style.

Фоновое изображение считается декоративным: внутренний img получает пустой alt, а picture — aria-hidden.

Spacer

Spacer задаёт адаптивный вертикальный отступ. Значение каждого следующего breakpoint наследуется от предыдущего.

import { Spacer } from '@shmidko61/lc-ui-templates/spacer';

<Spacer
  data={{
    smVerticalSpace: 24,
    mdVerticalSpace: 40,
    lgVerticalSpace: 64,
    xlVerticalSpace: 80,
  }}
/>;

Storybook

Из корня монорепозитория:

pnpm storybook:ui-templates

Статическая сборка:

pnpm storybook:build:ui-templates