simplycms 0.4.0

package/src/storefront/loaders/stock.ts

@@ -0,0 +1,101 @@
+import { and, inArray, isNull, sql } from 'drizzle-orm';
+import { productModifications, stockByPickupPoint } from 'simplycms/schema';
+import type { ActorDb } from './db';
+
+/** Наявність однієї модифікації — форма, яку читає селектор на картці товару. */
+export interface ModificationStockRow {
+  totalQuantity: number;
+  isAvailable: boolean;
+}
+
+/**
+ * Сумарні залишки по модифікаціях: `modificationId → кількість`.
+ *
+ * 🔴 Сума рахується SQL-ом, а не в JS. Стара реалізація тягнула КОЖЕН рядок
+ * `stock_by_pickup_point` у браузер і складала їх там — тобто розкладка
+ * товару по точках видачі публікувалася назовні заради одного числа.
+ */
+export async function loadStockByModification(
+  db: ActorDb,
+  modificationIds: string[],
+): Promise<Record<string, number>> {
+  const byModification: Record<string, number> = {};
+  if (modificationIds.length === 0) return byModification;
+
+  const rows = await db
+    .select({
+      modification_id: stockByPickupPoint.modificationId,
+      quantity: sql<string>`sum(${stockByPickupPoint.quantity})`,
+    })
+    .from(stockByPickupPoint)
+    .where(inArray(stockByPickupPoint.modificationId, modificationIds))
+    .groupBy(stockByPickupPoint.modificationId);
+
+  for (const row of rows) {
+    if (row.modification_id === null) continue;
+    byModification[row.modification_id] = Number(row.quantity);
+  }
+  return byModification;
+}
+
+/** Сумарні залишки простих товарів (рядки без модифікації): `productId → кількість`. */
+export async function loadStockByProduct(
+  db: ActorDb,
+  productIds: string[],
+): Promise<Record<string, number>> {
+  const byProduct: Record<string, number> = {};
+  if (productIds.length === 0) return byProduct;
+
+  const rows = await db
+    .select({
+      product_id: stockByPickupPoint.productId,
+      quantity: sql<string>`sum(${stockByPickupPoint.quantity})`,
+    })
+    .from(stockByPickupPoint)
+    .where(
+      and(
+        inArray(stockByPickupPoint.productId, productIds),
+        isNull(stockByPickupPoint.modificationId),
+      ),
+    )
+    .groupBy(stockByPickupPoint.productId);
+
+  for (const row of rows) {
+    if (row.product_id === null) continue;
+    byProduct[row.product_id] = Number(row.quantity);
+  }
+  return byProduct;
+}
+
+/**
+ * Наявність модифікацій одного товару.
+ *
+ * 🔴 Заміна функції БД `get_stock_info`, якої в схемі v2 НЕМАЄ (baseline B13
+ * не везе жодної plpgsql-функції, крім читача актора). Правило збережено
+ * дослівно: доступно, якщо є залишок АБО статус — «під замовлення».
+ */
+export async function loadModificationStock(
+  db: ActorDb,
+  modificationIds: string[],
+): Promise<Record<string, ModificationStockRow>> {
+  const stock: Record<string, ModificationStockRow> = {};
+  if (modificationIds.length === 0) return stock;
+
+  const quantities = await loadStockByModification(db, modificationIds);
+  const rows = await db
+    .select({
+      id: productModifications.id,
+      stock_status: productModifications.stockStatus,
+    })
+    .from(productModifications)
+    .where(inArray(productModifications.id, modificationIds));
+
+  for (const row of rows) {
+    const totalQuantity = quantities[row.id] ?? 0;
+    stock[row.id] = {
+      totalQuantity,
+      isAvailable: totalQuantity > 0 || row.stock_status === 'on_order',
+    };
+  }
+  return stock;
+}

package/src/storefront/seo/index.ts

@@ -0,0 +1,2 @@
+export * from './sitemap';
+export * from './robots';

package/src/storefront/seo/robots.ts

@@ -0,0 +1,16 @@
+/** Генерує robots.txt. baseUrl інжектується host'ом. */
+export async function buildRobotsTxt(baseUrl: string): Promise<string> {
+  const lines = [
+    'User-agent: *',
+    'Allow: /',
+    'Disallow: /admin/',
+    // `/api/` уже накриває й ендпойнти Better Auth (`/api/auth/*`), тож
+    // окремого рядка під них немає. Рядок `/auth/callback` знято разом із
+    // OAuth-роутом GoTrue (К1′б).
+    'Disallow: /api/',
+    '',
+    `Sitemap: ${baseUrl}/sitemap.xml`,
+  ];
+
+  return lines.join('\n');
+}

package/src/storefront/seo/sitemap.ts

@@ -0,0 +1,73 @@
+import type { SitemapData } from '../loaders/sitemap';
+
+/**
+ * Рендер `/sitemap.xml` — ЧИСТА функція від даних (В2-К1а).
+ *
+ * 🔴 Раніше тут же жив і похід у базу (Supabase-клієнт параметром), і саме це
+ * робило юніт-тест тестом мока PostgREST, а не тестом sitemap. Після переходу
+ * на Drizzle предикат видимості перевіряється SQL-ом на живій БД
+ * (`loadSitemapData` + гейт `pnpm test:schema`), а тут лишається рівно те, що
+ * можна довести без БД: форма XML, екранування й склад URL-ів.
+ */
+export function renderSitemapXml(data: SitemapData, baseUrl: string): string {
+  const urls: string[] = [];
+
+  /** Статичні сторінки */
+  urls.push(entry(baseUrl, undefined, 'daily', 1));
+  urls.push(entry(`${baseUrl}/catalog`, undefined, 'daily', 0.9));
+  urls.push(entry(`${baseUrl}/properties`, undefined, 'weekly', 0.5));
+
+  /** Секції */
+  for (const section of data.sections) {
+    urls.push(
+      entry(
+        `${baseUrl}/catalog/${section.slug}`,
+        section.updated_at,
+        'daily',
+        0.8,
+      ),
+    );
+  }
+
+  /** Товари */
+  for (const product of data.products) {
+    const sectionSlug = product.section_slug ?? 'products';
+    urls.push(
+      entry(
+        `${baseUrl}/catalog/${sectionSlug}/${product.slug}`,
+        product.updated_at,
+        'weekly',
+        0.7,
+      ),
+    );
+  }
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls.join('\n')}
+</urlset>`;
+}
+
+function entry(
+  loc: string,
+  lastmod?: string,
+  changefreq?: string,
+  priority?: number,
+): string {
+  const parts = [`  <url>\n    <loc>${escapeXml(loc)}</loc>`];
+  if (lastmod) parts.push(`    <lastmod>${lastmod}</lastmod>`);
+  if (changefreq) parts.push(`    <changefreq>${changefreq}</changefreq>`);
+  if (priority !== undefined)
+    parts.push(`    <priority>${priority}</priority>`);
+  parts.push('  </url>');
+  return parts.join('\n');
+}
+
+function escapeXml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}

package/src/storefront-routes/active-theme.ts

@@ -0,0 +1,23 @@
+/**
+ * Передача назви активної теми із сервера на клієнт ДО гідрації.
+ *
+ * Сервер серіалізує назву в інлайн-скрипт (`<head>`), який виконується під час
+ * парсингу HTML — раніше за відкладений модуль `client.tsx`. Завдяки цьому
+ * клієнт встигає прогріти кеш саме активної теми перед `hydrateRoot`, і
+ * route-компоненти не суспендяться на `use(ThemeRegistry.load(...))`.
+ */
+
+/** Ключ у `window`, під яким лежить назва активної теми */
+export const ACTIVE_THEME_GLOBAL = '__SIMPLYCMS_ACTIVE_THEME__';
+
+/** Згенерувати тіло інлайн-скрипта, що записує назву теми у `window` */
+export function serializeActiveThemeScript(themeName: string): string {
+  return `window[${JSON.stringify(ACTIVE_THEME_GLOBAL)}]=${JSON.stringify(themeName)}`;
+}
+
+/** Прочитати назву активної теми, прокинуту сервером (клієнт) */
+export function readActiveThemeName(): string | undefined {
+  if (typeof window === 'undefined') return undefined;
+  return (window as unknown as Record<string, unknown>)[ACTIVE_THEME_GLOBAL] as
+    string | undefined;
+}

package/src/storefront-routes/components/BannerSlider.tsx

@@ -0,0 +1,196 @@
+import { useBanners } from 'simplycms/core/hooks/useBanners';
+import type { Banner, BannerButton } from 'simplycms/contracts/objects';
+import useEmblaCarousel from 'embla-carousel-react';
+import { useCallback, useEffect, useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from 'simplycms/ui/button';
+import { Link } from '@tanstack/react-router';
+
+interface BannerSliderProps {
+  placement?: string;
+  sectionId?: string;
+  banners?: Banner[];
+}
+
+export function BannerSlider({
+  placement = 'home',
+  sectionId,
+  banners: initialBanners,
+}: BannerSliderProps) {
+  const { data: fetchedBanners } = useBanners(placement, sectionId);
+  const banners = fetchedBanners ?? initialBanners;
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return;
+    setSelectedIndex(emblaApi.selectedScrollSnap());
+  }, [emblaApi]);
+
+  // Ініціалізація selectedIndex при появі emblaApi (adjust state during render)
+  const [prevEmblaApi, setPrevEmblaApi] = useState(emblaApi);
+  if (emblaApi && emblaApi !== prevEmblaApi) {
+    setPrevEmblaApi(emblaApi);
+    setSelectedIndex(emblaApi.selectedScrollSnap());
+  }
+
+  useEffect(() => {
+    if (!emblaApi || !banners?.length) return;
+    emblaApi.on('select', onSelect);
+
+    const currentBanner = banners[emblaApi.selectedScrollSnap()];
+    const duration = currentBanner?.slide_duration || 5000;
+
+    const interval = setInterval(() => {
+      if (emblaApi.canScrollNext()) emblaApi.scrollNext();
+      else emblaApi.scrollTo(0);
+    }, duration);
+
+    return () => {
+      clearInterval(interval);
+      emblaApi.off('select', onSelect);
+    };
+  }, [emblaApi, onSelect, banners]);
+
+  if (!banners?.length) return null;
+
+  return (
+    <div className="relative group">
+      <div className="overflow-hidden" ref={emblaRef}>
+        <div className="flex">
+          {banners.map((banner, index) => (
+            <div key={banner.id} className="flex-[0_0_100%] min-w-0 relative">
+              <BannerContent banner={banner} isFirst={index === 0} />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {banners.length > 1 && (
+        <>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute left-4 top-1/2 -translate-y-1/2 bg-background/60 hover:bg-background/80 opacity-0 group-hover:opacity-100 transition-opacity rounded-full"
+            onClick={() => emblaApi?.scrollPrev()}
+          >
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-4 top-1/2 -translate-y-1/2 bg-background/60 hover:bg-background/80 opacity-0 group-hover:opacity-100 transition-opacity rounded-full"
+            onClick={() => emblaApi?.scrollNext()}
+          >
+            <ChevronRight className="h-5 w-5" />
+          </Button>
+
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
+            {banners.map((_, i) => (
+              <button
+                key={i}
+                className={`h-2 rounded-full transition-all ${
+                  i === selectedIndex
+                    ? 'w-6 bg-primary'
+                    : 'w-2 bg-foreground/30'
+                }`}
+                onClick={() => emblaApi?.scrollTo(i)}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function BannerContent({
+  banner,
+  isFirst,
+}: {
+  banner: Banner;
+  isFirst: boolean;
+}) {
+  const textAlign =
+    banner.text_position === 'center'
+      ? 'items-center text-center'
+      : banner.text_position === 'right'
+        ? 'items-end text-right'
+        : 'items-start';
+  const gradientDir =
+    banner.text_position === 'right'
+      ? 'from-transparent to-black/40'
+      : banner.text_position === 'center'
+        ? 'from-black/30 via-black/20 to-black/30'
+        : 'from-black/40 to-transparent';
+
+  return (
+    <div className="relative aspect-[21/9] md:aspect-[3/1] bg-muted overflow-hidden">
+      <img
+        src={banner.image_url}
+        alt={banner.title}
+        fetchPriority={isFirst ? 'high' : undefined}
+        loading={isFirst ? 'eager' : 'lazy'}
+        decoding="async"
+        className="absolute inset-0 w-full h-full object-cover"
+        style={{
+          animationDuration: `${banner.animation_duration}ms`,
+        }}
+      />
+      <div
+        className={`absolute inset-0 bg-gradient-to-r ${gradientDir} flex ${textAlign}`}
+        style={{ backgroundColor: banner.overlay_color || undefined }}
+      >
+        <div className="container mx-auto px-4 flex flex-col justify-center h-full">
+          <div className={`max-w-lg text-white flex flex-col ${textAlign}`}>
+            <h2 className="text-2xl md:text-4xl font-heading font-bold mb-2">
+              {banner.title}
+            </h2>
+            {banner.subtitle && (
+              <p className="text-sm md:text-base opacity-90 mb-4">
+                {banner.subtitle}
+              </p>
+            )}
+            {banner.buttons.length > 0 && (
+              <div className="flex gap-3 flex-wrap">
+                {banner.buttons.map((btn, i) => (
+                  <BannerButtonEl key={i} button={btn} />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BannerButtonEl({ button }: { button: BannerButton }) {
+  const baseClass =
+    'inline-block px-6 py-2 rounded text-sm font-medium transition-colors';
+  const variantClass =
+    button.variant === 'secondary'
+      ? 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
+      : button.variant === 'outline'
+        ? 'border border-white text-white hover:bg-white/20'
+        : 'bg-primary text-primary-foreground hover:bg-primary/90';
+
+  if (button.target === '_blank') {
+    return (
+      <a
+        href={button.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={`${baseClass} ${variantClass}`}
+      >
+        {button.text}
+      </a>
+    );
+  }
+
+  return (
+    <Link to={button.url || '#'} className={`${baseClass} ${variantClass}`}>
+      {button.text}
+    </Link>
+  );
+}

package/src/storefront-routes/components/ProductCarousel.tsx

@@ -0,0 +1,93 @@
+import useEmblaCarousel from 'embla-carousel-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from 'simplycms/ui/button';
+import { Link } from '@tanstack/react-router';
+import { useT } from 'simplycms/i18n';
+// Канонічна картка товару з пакета: та сама, що на сторінках каталогу —
+// секції головної в ядрі не мають власного варіанта картки.
+import { ProductCard } from 'simplycms/catalog-ui/ProductCard';
+
+interface Product {
+  id: string;
+  name: string;
+  slug: string;
+  short_description?: string | null;
+  images?: string[];
+  section?: { slug: string } | null;
+  price?: number | null;
+  old_price?: number | null;
+  stock_status?: string | null;
+}
+
+interface ProductCarouselProps {
+  title: string;
+  products: Product[];
+  viewAllLink?: string;
+}
+
+export function ProductCarousel({
+  title,
+  products,
+  viewAllLink,
+}: ProductCarouselProps) {
+  const t = useT();
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: false,
+    align: 'start',
+    slidesToScroll: 1,
+  });
+
+  if (!products.length) return null;
+
+  return (
+    <section className="py-10">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-xl font-heading font-bold text-foreground uppercase tracking-wider">
+            {title}
+          </h2>
+          {viewAllLink && (
+            <Link
+              to={viewAllLink}
+              className="text-sm text-primary hover:underline font-medium"
+            >
+              {t('catalog.viewAll')}
+            </Link>
+          )}
+        </div>
+
+        <div className="relative group">
+          <div className="overflow-hidden" ref={emblaRef}>
+            <div className="flex gap-4">
+              {products.map((product) => (
+                <div
+                  key={product.id}
+                  className="flex-[0_0_calc(50%-8px)] sm:flex-[0_0_calc(33.333%-11px)] lg:flex-[0_0_calc(25%-12px)] min-w-0"
+                >
+                  <ProductCard product={product} />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute -left-3 top-1/3 -translate-y-1/2 bg-background/80 hover:bg-background rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity h-9 w-9"
+            onClick={() => emblaApi?.scrollPrev()}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute -right-3 top-1/3 -translate-y-1/2 bg-background/80 hover:bg-background rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity h-9 w-9"
+            onClick={() => emblaApi?.scrollNext()}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/storefront-routes/components/SetPasswordForm.tsx

@@ -0,0 +1,94 @@
+import { useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useT } from 'simplycms/i18n';
+import type { Translator } from 'simplycms/i18n';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from 'simplycms/ui/form';
+import { Input } from 'simplycms/ui/input';
+import { Button } from 'simplycms/ui/button';
+
+/** Схема будується від транслятора — повідомлення валідації теж локалізовані. */
+function buildSchema(t: Translator) {
+  return z
+    .object({
+      password: z.string().min(8, t('auth.setPassword.tooShort')),
+      confirm: z.string(),
+    })
+    .refine((data) => data.password === data.confirm, {
+      message: t('auth.setPassword.mismatch'),
+      path: ['confirm'],
+    });
+}
+
+type SetPasswordValues = z.infer<ReturnType<typeof buildSchema>>;
+
+/**
+ * Форма нового пароля: валідація й поля. Сам виклик Supabase лишається у
+ * сторінці — форма нічого не знає ні про клієнта, ні про навігацію.
+ */
+export function SetPasswordForm({
+  error,
+  onSubmit,
+}: {
+  error: string | null;
+  onSubmit: (password: string) => Promise<void>;
+}) {
+  const t = useT();
+  const schema = useMemo(() => buildSchema(t), [t]);
+  const form = useForm<SetPasswordValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { password: '', confirm: '' },
+  });
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit((values) => onSubmit(values.password))}
+        className="space-y-4"
+      >
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('auth.setPassword.password')}</FormLabel>
+              <FormControl>
+                <Input type="password" autoComplete="new-password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="confirm"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('auth.setPassword.confirm')}</FormLabel>
+              <FormControl>
+                <Input type="password" autoComplete="new-password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        {error && <p className="text-sm text-destructive">{error}</p>}
+        <Button
+          type="submit"
+          className="w-full"
+          disabled={form.formState.isSubmitting}
+        >
+          {t('auth.setPassword.submit')}
+        </Button>
+      </form>
+    </Form>
+  );
+}

package/src/storefront-routes/components/SsrProductGrid.tsx

@@ -0,0 +1,38 @@
+import { ProductCard } from 'simplycms/catalog-ui/ProductCard';
+import type { ProductListItem } from '../server/product-list-item';
+
+interface SsrProductGridProps {
+  items: ProductListItem[];
+  viewMode: 'grid' | 'list';
+}
+
+/**
+ * Сітка товарів із серверних даних. Рендериться на сервері й у першому
+ * клієнтському рендері — доки React Query не збагатить список (наявність,
+ * знижки, рейтинги). Після цього сторінка перемикається на клієнтський список.
+ */
+export function SsrProductGrid({ items, viewMode }: SsrProductGridProps) {
+  return (
+    <div
+      className={
+        viewMode === 'grid'
+          ? 'grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4'
+          : 'flex flex-col gap-4'
+      }
+    >
+      {items.map((item) => (
+        <ProductCard
+          key={item.id}
+          product={{
+            id: item.id,
+            name: item.name,
+            slug: item.slug,
+            images: item.imageUrl ? [item.imageUrl] : [],
+            section: item.sectionSlug ? { slug: item.sectionSlug } : null,
+            price: item.price,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/storefront-routes/index.ts

@@ -0,0 +1,7 @@
+// Публічний вхід пакета simplycms/storefront-routes.
+export { StorefrontShell } from './shells/StorefrontShell';
+export { ProtectedShell } from './shells/ProtectedShell';
+export { useActiveThemeModule } from './shells/useActiveThemeModule';
+export { BannerSlider } from './components/BannerSlider';
+export { ProductCarousel } from './components/ProductCarousel';
+export { default as HomePage, type HomePageProps } from './pages/Home';