@vitrine-kit/vitrine 0.4.1 → 0.5.0

package/kit/registry/filters/files/components/filters/CatalogToolbar.tsx

@@ -0,0 +1,123 @@
+// Catalog listing toolbar — sort + option facets + price range. Uses GET so
+// listings stay shareable.
+'use client';
+
+export interface CatalogToolbarProps {
+  /** Current sort value from the page query string. */
+  sort?: string;
+  /** Form action (pathname). Defaults to "/". */
+  action?: string;
+  /** Available option facets from the current catalog slice. */
+  facets?: Record<string, string[]>;
+  /** Currently selected option filters. */
+  filters?: Record<string, string[]>;
+  /** Minor-unit price bounds (string so uncontrolled inputs stay simple). */
+  priceMin?: string;
+  priceMax?: string;
+}
+
+const SORT_OPTIONS: { value: string; label: string }[] = [
+  { value: 'newest', label: 'Newest' },
+  { value: 'price-asc', label: 'Price: low to high' },
+  { value: 'price-desc', label: 'Price: high to low' },
+];
+
+export function CatalogToolbar({
+  sort = 'newest',
+  action = '/',
+  facets = {},
+  filters = {},
+  priceMin = '',
+  priceMax = '',
+}: CatalogToolbarProps) {
+  const facetEntries = Object.entries(facets).filter(([, values]) => values.length > 0);
+
+  return (
+    <form
+      action={action}
+      method="get"
+      className="vt-catalog-toolbar flex flex-col gap-gutter"
+    >
+      <div className="flex flex-wrap items-end gap-gutter">
+        <label className="flex items-center gap-unit text-sm text-fg">
+          <span className="text-muted-fg">Sort</span>
+          <select
+            name="sort"
+            defaultValue={sort}
+            className="rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+            onChange={(e) => e.currentTarget.form?.requestSubmit()}
+          >
+            {SORT_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="flex items-center gap-unit text-sm text-fg">
+          <span className="text-muted-fg">Min $</span>
+          <input
+            type="number"
+            name="priceMin"
+            min={0}
+            step={0.01}
+            defaultValue={priceMin}
+            placeholder="0"
+            className="w-24 rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+          />
+        </label>
+        <label className="flex items-center gap-unit text-sm text-fg">
+          <span className="text-muted-fg">Max $</span>
+          <input
+            type="number"
+            name="priceMax"
+            min={0}
+            step={0.01}
+            defaultValue={priceMax}
+            placeholder="—"
+            className="w-24 rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+          />
+        </label>
+
+        <button
+          type="submit"
+          className="rounded-md border border-border px-gutter py-unit text-sm text-fg hover:bg-muted focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        >
+          Apply
+        </button>
+      </div>
+
+      {facetEntries.length > 0 ? (
+        <div className="flex flex-wrap gap-section">
+          {facetEntries.map(([key, values]) => (
+            <fieldset key={key} className="flex flex-col gap-unit">
+              <legend className="text-sm capitalize text-muted-fg">{key}</legend>
+              <div className="flex flex-wrap gap-gutter">
+                {values.map((value) => {
+                  const checked = Boolean(filters[key]?.includes(value));
+                  return (
+                    <label
+                      key={value}
+                      className="flex items-center gap-unit text-sm text-fg"
+                    >
+                      <input
+                        type="checkbox"
+                        name={key}
+                        value={value}
+                        defaultChecked={checked}
+                        className="rounded border-input"
+                        onChange={(e) => e.currentTarget.form?.requestSubmit()}
+                      />
+                      {value}
+                    </label>
+                  );
+                })}
+              </div>
+            </fieldset>
+          ))}
+        </div>
+      ) : null}
+    </form>
+  );
+}

package/kit/registry/filters/files/lib/filters/register.ts

@@ -0,0 +1,6 @@
+import { registerSlot } from '@vitrine-kit/core';
+import { CatalogToolbar } from '../../components/filters/CatalogToolbar.js';
+
+export function registerFiltersSlots(): void {
+  registerSlot({ slot: 'catalog.toolbar', component: CatalogToolbar, order: 10 });
+}

package/kit/registry/i18n/docs/i18n.md

@@ -0,0 +1,24 @@
+# Feature: i18n
+
+Locale switcher plus optional path-prefix routing when more than one locale is configured.
+When `i18n.locales` lists more than one code, path middleware and the locale switcher
+activate, and the demo seed applies RU product/category copy. Payload always enables
+`localization` from `site.config.i18n` (even for a single locale) so localized fields stay valid.
+
+## Modules
+- `LocaleSwitcher` — header control writing `vitrine_locale` and navigating to `/{locale}/…`
+- `middleware.ts` — when `i18n.locales.length > 1`, redirects bare paths to `/{locale}/…`
+  and rewrites to the unprefixed App Router tree (no route file move required)
+- `lib/i18n/dictionary.ts` — en/ru dictionaries for shared chrome strings
+- `lib/i18n/useChromeLabel.ts` — client hook used by cart/search/wishlist/account chrome
+- `lib/i18n/t.ts` — re-exports `t` / `MessageKey`
+- `lib/i18n/locale.ts` — `getRequestLocale()` from the cookie (used by catalog pages)
+
+The base template ships an English-only dictionary stub so chrome can always import
+`@/lib/i18n/*`; installing this feature overwrites it with multi-locale copy.
+
+## Setup
+Set `site.config` `i18n.locales` to more than one locale (e.g. `['en','ru']`). The switcher
+hides itself when only one locale is configured; middleware is a no-op in that case.
+Payload `localization` mirrors that list; mark product/category title and description as
+localized in the blueprint. Demo seed applies RU copy when `ru` is enabled.

package/kit/registry/i18n/feature.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "../../schemas/feature.schema.json",
+  "name": "i18n",
+  "title": "Locale switcher and path prefixes",
+  "kitVersion": "0.5.0",
+  "requiresContracts": ">=1.0.0 <2.0.0",
+  "tier": [
+    "catalog",
+    "simple-store",
+    "full-store"
+  ],
+  "registryDependencies": [],
+  "corePackages": {
+    "@vitrine-kit/core": ">=0.1.0"
+  },
+  "npm": [],
+  "files": [
+    {
+      "from": "files/components/i18n/",
+      "to": "components/i18n/"
+    },
+    {
+      "from": "files/lib/i18n/",
+      "to": "lib/i18n/"
+    },
+    {
+      "from": "files/middleware.ts",
+      "to": "middleware.ts"
+    }
+  ],
+  "config": {
+    "set": {
+      "features.i18n": true
+    }
+  },
+  "slots": [
+    {
+      "slot": "global.header-actions",
+      "component": "LocaleSwitcher",
+      "order": 30
+    }
+  ],
+  "env": [],
+  "claudeDoc": "docs/i18n.md",
+  "conflicts": [],
+  "removable": true
+}

package/kit/registry/i18n/files/components/i18n/LocaleSwitcher.tsx

@@ -0,0 +1,64 @@
+'use client';
+import { useEffect, useState } from 'react';
+
+const COOKIE = 'vitrine_locale';
+
+function readCookie(): string | null {
+  if (typeof document === 'undefined') return null;
+  const match = document.cookie.match(new RegExp(`(?:^|; )${COOKIE}=([^;]*)`));
+  return match ? decodeURIComponent(match[1]!) : null;
+}
+
+function writeCookie(locale: string): void {
+  // biome-ignore lint/suspicious/noDocumentCookie: locale preference cookie; Cookie Store API is not universal enough yet.
+  document.cookie = `${COOKIE}=${encodeURIComponent(locale)};path=/;max-age=31536000;samesite=lax`;
+}
+
+/** Strip a leading `/{locale}` segment when present. */
+function stripLocale(pathname: string, locales: string[]): string {
+  const seg = pathname.split('/')[1] ?? '';
+  if (locales.includes(seg)) {
+    return pathname.slice(seg.length + 1) || '/';
+  }
+  return pathname || '/';
+}
+
+/** Locales come from site.config via optional prop; falls back to en/ru demo pair. */
+export interface LocaleSwitcherProps {
+  locales?: string[];
+  defaultLocale?: string;
+}
+
+export function LocaleSwitcher({ locales, defaultLocale = 'en' }: LocaleSwitcherProps) {
+  const options = locales && locales.length > 0 ? locales : ['en', 'ru'];
+  const [locale, setLocale] = useState(defaultLocale);
+
+  useEffect(() => {
+    setLocale(readCookie() ?? defaultLocale);
+  }, [defaultLocale]);
+
+  if (options.length < 2) return null;
+
+  return (
+    <label className="vt-locale-switcher flex items-center gap-unit text-sm text-fg">
+      <span className="sr-only">Language</span>
+      <select
+        value={locale}
+        className="rounded-md border border-input bg-surface px-unit py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        onChange={(e) => {
+          const next = e.target.value;
+          writeCookie(next);
+          setLocale(next);
+          const rest = stripLocale(location.pathname, options);
+          location.assign(rest === '/' ? `/${next}` : `/${next}${rest}`);
+        }}
+      >
+        {options.map((code) => (
+          <option key={code} value={code}>
+            {code.toUpperCase()}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}

package/kit/registry/i18n/files/lib/i18n/dictionary.ts

@@ -0,0 +1,52 @@
+// Multi-locale chrome dictionary. Overwrites the base English stub when `i18n` is installed.
+export type MessageKey =
+  | 'cart'
+  | 'search'
+  | 'checkout'
+  | 'wishlist'
+  | 'orders'
+  | 'account'
+  | 'continueShopping'
+  | 'addToCart'
+  | 'thankYou'
+  | 'signIn'
+  | 'createAccount';
+
+const en: Record<MessageKey, string> = {
+  cart: 'Cart',
+  search: 'Search',
+  checkout: 'Checkout',
+  wishlist: 'Wishlist',
+  orders: 'Orders',
+  account: 'Account',
+  continueShopping: 'Continue shopping',
+  addToCart: 'Add to cart',
+  thankYou: 'Thank you for your order',
+  signIn: 'Sign in',
+  createAccount: 'Create account',
+};
+
+const ru: Record<MessageKey, string> = {
+  cart: 'Корзина',
+  search: 'Поиск',
+  checkout: 'Оформить',
+  wishlist: 'Избранное',
+  orders: 'Заказы',
+  account: 'Аккаунт',
+  continueShopping: 'Продолжить покупки',
+  addToCart: 'В корзину',
+  thankYou: 'Спасибо за заказ',
+  signIn: 'Войти',
+  createAccount: 'Создать аккаунт',
+};
+
+const dictionaries: Record<string, Record<MessageKey, string>> = { en, ru };
+
+export function t(key: MessageKey, locale = 'en'): string {
+  const dict = dictionaries[locale] ?? en;
+  return dict[key] ?? en[key] ?? key;
+}
+
+export function supportedLocales(): string[] {
+  return Object.keys(dictionaries);
+}

package/kit/registry/i18n/files/lib/i18n/locale.ts

@@ -0,0 +1,11 @@
+// Request locale from the vitrine_locale cookie (set by i18n middleware / switcher).
+import { cookies } from 'next/headers';
+import { siteConfig } from '@/site.config';
+
+export async function getRequestLocale(): Promise<string> {
+  const jar = await cookies();
+  const fromCookie = jar.get('vitrine_locale')?.value;
+  const locales = siteConfig.i18n.locales;
+  if (fromCookie && locales.includes(fromCookie)) return fromCookie;
+  return siteConfig.i18n.defaultLocale;
+}

package/kit/registry/i18n/files/lib/i18n/register.ts

@@ -0,0 +1,6 @@
+import { registerSlot } from '@vitrine-kit/core';
+import { LocaleSwitcher } from '../../components/i18n/LocaleSwitcher.js';
+
+export function registerI18nSlots(): void {
+  registerSlot({ slot: 'global.header-actions', component: LocaleSwitcher, order: 30 });
+}

package/kit/registry/i18n/files/lib/i18n/t.ts

@@ -0,0 +1 @@
+export { t, type MessageKey, supportedLocales } from './dictionary.js';

package/kit/registry/i18n/files/lib/i18n/useChromeLabel.ts

@@ -0,0 +1,28 @@
+// Client helper: resolve chrome copy from the locale cookie + dictionary.
+'use client';
+
+import { useEffect, useState } from 'react';
+import { t, type MessageKey } from './dictionary.js';
+
+const COOKIE = 'vitrine_locale';
+
+function readLocale(fallback: string): string {
+  if (typeof document === 'undefined') return fallback;
+  const match = document.cookie.match(new RegExp(`(?:^|; )${COOKIE}=([^;]*)`));
+  return match ? decodeURIComponent(match[1]!) : fallback;
+}
+
+/** Reactive label for header/chrome controls (updates after mount from the locale cookie). */
+export function useChromeLabel(key: MessageKey, fallbackLocale = 'en'): string {
+  const [label, setLabel] = useState(() => t(key, fallbackLocale));
+
+  useEffect(() => {
+    setLabel(t(key, readLocale(fallbackLocale)));
+  }, [key, fallbackLocale]);
+
+  return label;
+}
+
+export function chromeLabel(key: MessageKey, locale = 'en'): string {
+  return t(key, locale);
+}

package/kit/registry/i18n/files/middleware.ts

@@ -0,0 +1,51 @@
+// Locale path middleware: when site.config has multiple locales, prefix URLs
+// (`/en/cart`) and rewrite internally to the unprefixed App Router tree.
+// No-op when only one locale is configured.
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+import { siteConfig } from './site.config';
+
+const COOKIE = 'vitrine_locale';
+
+export function middleware(req: NextRequest) {
+  const locales = siteConfig.i18n.locales;
+  const defaultLocale = siteConfig.i18n.defaultLocale;
+  if (locales.length < 2) return NextResponse.next();
+
+  const { pathname } = req.nextUrl;
+
+  // Skip Next internals, Payload admin/API, and static assets.
+  if (
+    pathname.startsWith('/_next') ||
+    pathname.startsWith('/api') ||
+    pathname.startsWith('/admin') ||
+    pathname.includes('.') // files with extensions
+  ) {
+    return NextResponse.next();
+  }
+
+  const seg = pathname.split('/')[1] ?? '';
+  const hasLocale = locales.includes(seg);
+
+  if (!hasLocale) {
+    const cookieLocale = req.cookies.get(COOKIE)?.value;
+    const locale = cookieLocale && locales.includes(cookieLocale) ? cookieLocale : defaultLocale;
+    const url = req.nextUrl.clone();
+    url.pathname = pathname === '/' ? `/${locale}` : `/${locale}${pathname}`;
+    const res = NextResponse.redirect(url);
+    res.cookies.set(COOKIE, locale, { path: '/', maxAge: 31536000, sameSite: 'lax' });
+    return res;
+  }
+
+  const locale = seg;
+  const stripped = pathname.slice(locale.length + 1) || '/';
+  const rewrite = req.nextUrl.clone();
+  rewrite.pathname = stripped;
+  const res = NextResponse.rewrite(rewrite);
+  res.cookies.set(COOKIE, locale, { path: '/', maxAge: 31536000, sameSite: 'lax' });
+  return res;
+}
+
+export const config = {
+  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
+};

package/kit/registry/product-page/feature.json

@@ -2,7 +2,7 @@
   "$schema": "../../schemas/feature.schema.json",
   "name": "product-page",
   "title": "Product page",
-  "kitVersion": "0.4.1",
+  "kitVersion": "0.5.0",
   "requiresContracts": ">=1.0.0 <2.0.0",
   "tier": [
     "catalog",

package/kit/registry/product-page/files/components/product/ProductGallery.tsx

@@ -1,4 +1,6 @@
-// Product gallery — presentational, neutral.
+// Product gallery — client component so thumbnails switch the cover image.
+'use client';
+import { useState } from 'react';
 import type { ProductImage } from '@vitrine-kit/contracts';
 
 export interface ProductGalleryProps {
@@ -7,11 +9,12 @@ export interface ProductGalleryProps {
 }
 
 export function ProductGallery({ images, title }: ProductGalleryProps) {
-  const cover = images[0];
+  const [active, setActive] = useState(0);
+  const cover = images[active] ?? images[0];
   if (!cover) {
     return <div className="aspect-square w-full rounded-md bg-muted" aria-hidden="true" />;
   }
-  const rest = images.slice(1);
+
   return (
     <div className="vt-product-gallery">
       <img
@@ -19,15 +22,25 @@ export function ProductGallery({ images, title }: ProductGalleryProps) {
         alt={cover.alt ?? title}
         className="w-full rounded-md object-cover"
       />
-      {rest.length > 0 ? (
+      {images.length > 1 ? (
         <ul role="list" className="mt-gutter flex gap-gutter">
-          {rest.map((img, i) => (
+          {images.map((img, i) => (
             <li key={img.url}>
-              <img
-                src={img.url}
-                alt={img.alt ?? `${title} — image ${i + 2}`}
-                className="h-16 w-16 rounded-md object-cover"
-              />
+              <button
+                type="button"
+                onClick={() => setActive(i)}
+                aria-label={`Show image ${i + 1}`}
+                aria-current={i === active ? 'true' : undefined}
+                className={`rounded-md focus-visible:outline-none focus-visible:ring-2 ring-ring ${
+                  i === active ? 'ring-2 ring-ring' : 'opacity-80 hover:opacity-100'
+                }`}
+              >
+                <img
+                  src={img.url}
+                  alt={img.alt ?? `${title} — image ${i + 1}`}
+                  className="h-16 w-16 rounded-md object-cover"
+                />
+              </button>
             </li>
           ))}
         </ul>

package/kit/registry/product-page/files/components/product/ProductView.tsx

@@ -25,17 +25,21 @@ export function ProductView({ product }: ProductViewProps) {
         <Slot name="product.below-title" />
         <h1 className="font-heading text-fg">{product.title}</h1>
         {price != null ? (
-          <p className="text-price text-xl">{formatPrice(price, currency)}</p>
+          <p className="text-price text-xl">
+            {product.priceRange && product.priceRange.min !== product.priceRange.max
+              ? `${formatPrice(product.priceRange.min, currency)} – ${formatPrice(product.priceRange.max, currency)}`
+              : formatPrice(price, currency)}
+          </p>
         ) : null}
-        <Slot name="product.below-price" />
+        <Slot name="product.below-price" product={product} />
         <div className="vt-product-purchase">
           <Slot name="product.purchase" product={product} />
         </div>
         {product.description ? (
           <div className="vt-product-description text-fg">{product.description}</div>
         ) : null}
-        <Slot name="product.below-description" />
-        <Slot name="product.tabs" />
+        <Slot name="product.below-description" product={product} />
+        <Slot name="product.tabs" product={product} />
       </div>
     </article>
   );

package/kit/registry/reviews/docs/reviews.md

@@ -0,0 +1,11 @@
+# Feature: reviews
+
+Customer reviews stored as a JSON array on the product document (`reviews` field via blueprint).
+
+## Modules
+- `ReviewList` — renders existing reviews + form (`product.below-description`)
+- `POST /api/reviews` — appends a review (rate-limited)
+- `lib/reviews/blueprint.ts` — additive `reviews` json field on products
+
+## Note
+Moderation is not included — submissions are public immediately. Tighten access before production.

package/kit/registry/reviews/feature.json

@@ -0,0 +1,55 @@
+{
+  "$schema": "../../schemas/feature.schema.json",
+  "name": "reviews",
+  "title": "Product reviews",
+  "kitVersion": "0.5.0",
+  "requiresContracts": ">=1.0.0 <2.0.0",
+  "tier": [
+    "catalog",
+    "simple-store",
+    "full-store"
+  ],
+  "registryDependencies": [
+    "product-page"
+  ],
+  "corePackages": {
+    "@vitrine-kit/core": ">=0.1.0"
+  },
+  "npm": [],
+  "files": [
+    {
+      "from": "files/components/reviews/",
+      "to": "components/reviews/"
+    },
+    {
+      "from": "files/lib/reviews/",
+      "to": "lib/reviews/"
+    },
+    {
+      "from": "files/app/",
+      "to": "app/"
+    }
+  ],
+  "config": {
+    "set": {
+      "features.reviews": true
+    }
+  },
+  "slots": [
+    {
+      "slot": "product.below-description",
+      "component": "ReviewList",
+      "order": 20
+    }
+  ],
+  "blueprint": {
+    "extend": "product",
+    "addFields": [
+      "reviews"
+    ]
+  },
+  "env": [],
+  "claudeDoc": "docs/reviews.md",
+  "conflicts": [],
+  "removable": true
+}

package/kit/registry/reviews/files/app/api/reviews/route.ts

@@ -0,0 +1,55 @@
+// POST /api/reviews — append a review onto the product.reviews JSON array.
+import { NextResponse } from 'next/server';
+import { getPayload } from 'payload';
+import config from '@payload-config';
+import { checkRateLimit, clientIpFromHeaders } from '@vitrine-kit/core';
+import { parseReviews, type ProductReview } from '@/lib/reviews/types';
+
+const RATE_LIMIT = { limit: 10, windowMs: 60_000 };
+
+export async function POST(req: Request) {
+  const { allowed, retryAfterMs } = checkRateLimit(`reviews:${clientIpFromHeaders(req.headers)}`, RATE_LIMIT);
+  if (!allowed) {
+    return NextResponse.json(
+      { error: 'too many requests' },
+      { status: 429, headers: { 'Retry-After': String(Math.ceil((retryAfterMs ?? 0) / 1000)) } },
+    );
+  }
+
+  const body = (await req.json().catch(() => null)) as {
+    productId?: unknown;
+    author?: unknown;
+    rating?: unknown;
+    body?: unknown;
+  } | null;
+  const productId = typeof body?.productId === 'string' ? body.productId : '';
+  const author = typeof body?.author === 'string' ? body.author.trim().slice(0, 80) : '';
+  const text = typeof body?.body === 'string' ? body.body.trim().slice(0, 2000) : '';
+  const rating = typeof body?.rating === 'number' ? body.rating : Number(body?.rating);
+  if (!productId || !author || !text || !Number.isInteger(rating) || rating < 1 || rating > 5) {
+    return NextResponse.json({ error: 'invalid body' }, { status: 400 });
+  }
+
+  const payload = await getPayload({ config });
+  const doc = await payload.findByID({ collection: 'products', id: productId, depth: 0 }).catch(() => null);
+  if (!doc) return NextResponse.json({ error: 'product not found' }, { status: 404 });
+
+  const review: ProductReview = {
+    id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    author,
+    rating,
+    body: text,
+    createdAt: new Date().toISOString(),
+  };
+  const existing = parseReviews((doc as { reviews?: unknown }).reviews);
+  const reviews = [review, ...existing].slice(0, 100);
+
+  await payload.update({
+    collection: 'products',
+    id: productId,
+    data: { reviews },
+    overrideAccess: true,
+  });
+
+  return NextResponse.json({ review });
+}