v0.4.1: Готовые многостраничные шаблоны, e-commerce компоненты, SaaS-приложение и светлая тема

Создание полноценных приложений и магазинов на Astro

Вышел astro-component-kit 0.4.1, знаменующий переход от набора отдельных UI-элементов к полноценной системе шаблонов и веб-приложений для Astro.

Раньше в вашем распоряжении были кнопки, карточки, формы, графики и секции. В версии 0.4.1 вы получаете полноценные готовые к продакшену многостраничные шаблоны с общим состоянием, клиентской маршрутизацией, фильтрацией на лету, сохраняемой корзиной и реальными бизнес-сценариями — всё это с нулевыми runtime-зависимостями, поддержкой светлой/тёмной тем и стандартом доступности WCAG AA.

---

3 готовых шаблона для продакшена

Все шаблоны доступны в новом Каталоге шаблонов с интерактивными демонстрациями на русском, английском и испанском языках:

🛒 Интернет-магазин (Nova Store)

Полноценный магазин из пяти страниц:

• Включенные страницы: Главная, Каталог, Карточка товара (PDP), Корзина и Оформление заказа (Checkout).
• Сохраняемая корзина: Реактивная корзина (cart-store.ts), сохраняющая состояние при перезагрузке и синхронизирующаяся между вкладками без сторонних фреймворков.
• Мгновенная фильтрация: Быстрый клиентский фильтр по категориям, диапазону цен, цветам, рейтингу и наличию.
• Полное оформление заказа: Расчёт стоимости доставки, налогов, поддержка промокодов и подтверждение заказа.
• Встроенные иллюстрации: 16 векторных линейных SVG-иллюстраций товаров — стоковые фото не требуются.

🏺 Эдиториал e-commerce (Forma Studio)

Бутик одежды и дизайна с журнальной эстетикой:

• Дизайн: Изысканная антиква для заголовков, строгая геометрия, тёплые терракотовые акценты и журнальная вёрстка.
• Страницы и секции: Hero Editorial, мозаика коллекций, лукбук, ленты товаров, бегущая строка ценностей, отзывы, а также страницы корзины и чекаута.
• Светлая тема по умолчанию: Создана в тёплой светлой палитре с быстрым переключением в тёмный режим.

🏨 SaaS-система для отелей (The Lobby)

Комплексный дашборд управления отелями и апартаментами:

• Разделы: Главный дашборд с ключевыми метриками, шахматка номеров (Room Rack), табло заездов/выездов в реальном времени, статус уборки (Housekeeping), справочник гостей с профилями, отчёты по доходам и загрузке, настройки и экран авторизации (Sign-in).
• Интерактивный интерфейс: Фильтры статусов, выбор периодов в календаре, бейджи занятости и расширяемые таблицы.

---

2 новые категории компонентов

Компоненты, на базе которых построены эти шаблоны, теперь выделены в две отдельные точки экспорта в npm:

🛍️ astro-component-kit/ecommerce

Более 17 специализированных компонентов для электронной коммерции:

• StoreHeader и PromoBar
• CartDrawer и CartToast
• ProductBuyBox и VariantPicker
• ProductGrid и ProductCardMinimal
• FilterSidebar и FilterBar
• OrderSummary и CheckoutForm
• StockIndicator, CountdownBanner и LiveActivityToast

---
import 'astro-component-kit/global.css';
import { ProductBuyBox, VariantPicker, CartDrawer } from 'astro-component-kit/ecommerce';
---

<ProductBuyBox
  title="Минималистичная керамическая ваза"
  price={64}
  rating={4.9}
  reviewsCount={128}
  inStock={true}
>
  <VariantPicker slot="variants" options={['Камень', 'Терракота', 'Обсидиан']} />
</ProductBuyBox>

<CartDrawer />

📊 astro-component-kit/app

Компоненты высокой плотности для веб-приложений и дашбордов:

• DataTable — Таблица данных с сортировкой, фильтрацией, пагинацией и выбором строк.
• AppSidebar и AppTopbar — Сворачиваемая навигационная панель с индикацией активных страниц и быстрыми действиями.
• RoomRack — Временная шкала занятости номеров для бронирования.
• ArrivalsBoard и HousekeepingBoard — Канбан-панели с мгновенной сменой статусов.
• GuestProfileCard и PlanUsageCard — Карточки профиля и индикаторы лимитов тарифного плана.
• AuthCard — Элегантный контейнер для форм авторизации и регистрации.

---

🌓 Полная поддержка светлой темы (Light Theme)

Библиотека astro-component-kit теперь официально поддерживает светлый режим во всех компонентах, графиках и секциях.

• Добавлены CSS-токены --ink-rgb, --paper-rgb и --c-on-primary в global.css.
• Переключение между тёмной и светлой темами через [data-theme="light"] на корневом элементе.
• Все 41 SVG-графика и секции автоматически адаптируют контраст, сетки и подсказки под выбранную тему.

---

🔍 Улучшения боковой панели и документации

• Поиск в фокусе: Нажмите клавишу / на любой странице документации для мгновенного перехода к поисковой строке.
• Сворачиваемые категории: Чистая и удобная навигация благодаря сворачиваемым разделам компонентов и секций.
• Раздел шаблонов: Прямые ссылки на живые демо и исходный код шаблонов.

---

Обновление до v0.4.1

npm install astro-component-kit@0.4.1

Попробуйте все интерактивные демо в новой галерее Шаблонов!