@vitrine-kit/vitrine 0.4.1 → 0.5.0

package/kit/registry/reviews/files/components/reviews/ReviewList.tsx

@@ -0,0 +1,119 @@
+'use client';
+import { useMemo, useState, type FormEvent } from 'react';
+import type { Product } from '@vitrine-kit/contracts';
+import { parseReviews, type ProductReview } from '../../lib/reviews/types.js';
+
+export interface ReviewListProps {
+  product?: Product;
+}
+
+export function ReviewList({ product }: ReviewListProps) {
+  const initial = useMemo(
+    () => parseReviews(product?.extensions?.reviews),
+    [product?.extensions?.reviews],
+  );
+  const [reviews, setReviews] = useState<ProductReview[]>(initial);
+  const [author, setAuthor] = useState('');
+  const [rating, setRating] = useState(5);
+  const [body, setBody] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (!product) return null;
+
+  async function submit(e: FormEvent): Promise<void> {
+    e.preventDefault();
+    setPending(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/reviews', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ productId: product!.id, author, rating, body }),
+      });
+      const data = (await res.json().catch(() => ({}))) as { review?: ProductReview; error?: string };
+      if (!res.ok || !data.review) {
+        setError(data.error ?? 'Could not submit review.');
+        return;
+      }
+      setReviews((prev) => [data.review!, ...prev]);
+      setAuthor('');
+      setBody('');
+      setRating(5);
+    } catch {
+      setError('Could not submit review.');
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <section className="vt-reviews flex flex-col gap-gutter border-t border-border pt-section" aria-labelledby="reviews-heading">
+      <h2 id="reviews-heading" className="font-heading text-fg">
+        Reviews
+      </h2>
+      {reviews.length === 0 ? (
+        <p className="text-muted-fg">No reviews yet — be the first.</p>
+      ) : (
+        <ul role="list" className="flex flex-col gap-gutter">
+          {reviews.map((r) => (
+            <li key={r.id} className="flex flex-col gap-unit border-b border-border pb-unit">
+              <p className="text-fg">
+                <span className="font-medium">{r.author}</span>
+                <span className="text-muted-fg"> — {r.rating}/5</span>
+              </p>
+              <p className="text-fg">{r.body}</p>
+            </li>
+          ))}
+        </ul>
+      )}
+      <form onSubmit={submit} className="flex max-w-md flex-col gap-gutter">
+        <label className="flex flex-col gap-unit text-sm">
+          <span className="text-fg">Name</span>
+          <input
+            required
+            value={author}
+            onChange={(e) => setAuthor(e.target.value)}
+            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"
+          />
+        </label>
+        <label className="flex flex-col gap-unit text-sm">
+          <span className="text-fg">Rating</span>
+          <select
+            value={rating}
+            onChange={(e) => setRating(Number(e.target.value))}
+            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"
+          >
+            {[5, 4, 3, 2, 1].map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="flex flex-col gap-unit text-sm">
+          <span className="text-fg">Review</span>
+          <textarea
+            required
+            rows={3}
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            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"
+          />
+        </label>
+        <button
+          type="submit"
+          disabled={pending}
+          className="w-fit rounded-md bg-primary px-gutter py-unit text-primary-fg disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        >
+          {pending ? 'Submitting…' : 'Submit review'}
+        </button>
+        {error ? (
+          <p role="alert" className="text-danger">
+            {error}
+          </p>
+        ) : null}
+      </form>
+    </section>
+  );
+}

package/kit/registry/reviews/files/lib/reviews/blueprint.ts

@@ -0,0 +1,13 @@
+import type { Extend } from '@vitrine-kit/contracts';
+
+export function extendReviewsBlueprint(blueprint: { extend: Extend }): void {
+  blueprint.extend('product', {
+    addFields: [
+      {
+        name: 'reviews',
+        type: 'json',
+        label: 'Reviews',
+      },
+    ],
+  });
+}

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

@@ -0,0 +1,6 @@
+import { registerSlot } from '@vitrine-kit/core';
+import { ReviewList } from '../../components/reviews/ReviewList.js';
+
+export function registerReviewsSlots(): void {
+  registerSlot({ slot: 'product.below-description', component: ReviewList, order: 20 });
+}

package/kit/registry/reviews/files/lib/reviews/types.ts

@@ -0,0 +1,22 @@
+export interface ProductReview {
+  id: string;
+  author: string;
+  rating: number;
+  body: string;
+  createdAt: string;
+}
+
+export function parseReviews(value: unknown): ProductReview[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter((r): r is ProductReview => {
+    if (!r || typeof r !== 'object') return false;
+    const o = r as Record<string, unknown>;
+    return (
+      typeof o.id === 'string' &&
+      typeof o.author === 'string' &&
+      typeof o.rating === 'number' &&
+      typeof o.body === 'string' &&
+      typeof o.createdAt === 'string'
+    );
+  });
+}

package/kit/registry/search/docs/search.md

@@ -0,0 +1,12 @@
+# Feature: search
+
+Header search form and `/search` results page over the `CatalogSource` contract.
+
+## Modules
+- `components/search/SearchForm` — GET form → `/search?q=` (slot `global.header-actions`)
+- `components/search/SearchResults` — results grid + empty state (hosts `search.*` slots)
+- `lib/search/data` — `loadSearch(source, term)` via `CatalogSource.search`
+- `app/(frontend)/search/page.tsx` — results page
+
+## Contracts
+`@vitrine-kit/contracts` (`CatalogSource.search`) + `@vitrine-kit/core` slots.

package/kit/registry/search/feature.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "../../schemas/feature.schema.json",
+  "name": "search",
+  "title": "Product search",
+  "kitVersion": "0.5.0",
+  "requiresContracts": ">=1.0.0 <2.0.0",
+  "tier": [
+    "catalog",
+    "simple-store",
+    "full-store"
+  ],
+  "registryDependencies": [
+    "catalog"
+  ],
+  "corePackages": {
+    "@vitrine-kit/core": ">=0.1.0"
+  },
+  "npm": [],
+  "files": [
+    {
+      "from": "files/components/search/",
+      "to": "components/search/"
+    },
+    {
+      "from": "files/lib/search/",
+      "to": "lib/search/"
+    },
+    {
+      "from": "files/app/",
+      "to": "app/"
+    }
+  ],
+  "config": {
+    "set": {
+      "features.search": true
+    }
+  },
+  "slots": [
+    {
+      "slot": "global.header-actions",
+      "component": "SearchForm",
+      "order": 5
+    }
+  ],
+  "env": [],
+  "claudeDoc": "docs/search.md",
+  "conflicts": [],
+  "removable": true
+}

package/kit/registry/search/files/app/(frontend)/search/page.tsx

@@ -0,0 +1,34 @@
+// Search results page. Query string `q` → CatalogSource.search.
+import type { Metadata } from 'next';
+import { getCatalogSource } from '@/lib/adapter';
+import { loadSearch } from '@/lib/search/data';
+import { SearchResults } from '@/components/search/SearchResults';
+
+interface PageProps {
+  searchParams: Promise<{ q?: string }>;
+}
+
+export async function generateMetadata({ searchParams }: PageProps): Promise<Metadata> {
+  const { q } = await searchParams;
+  const term = q?.trim() ?? '';
+  return {
+    title: term ? `Search: ${term}` : 'Search',
+    robots: { index: false, follow: true },
+  };
+}
+
+export default async function SearchPage({ searchParams }: PageProps) {
+  const { q } = await searchParams;
+  const term = q?.trim() ?? '';
+  const source = await getCatalogSource();
+  const products = term ? await loadSearch(source, term) : [];
+
+  return (
+    <div className="flex flex-col gap-section">
+      <header className="flex flex-col gap-unit">
+        <h1 className="font-heading text-fg">Search</h1>
+      </header>
+      <SearchResults term={term} products={products} />
+    </div>
+  );
+}

package/kit/registry/search/files/components/search/SearchForm.tsx

@@ -0,0 +1,32 @@
+// Header search form — GET /search?q= so results are shareable and crawlable.
+'use client';
+
+import { useChromeLabel } from '@/lib/i18n/useChromeLabel';
+
+export function SearchForm() {
+  const search = useChromeLabel('search');
+
+  return (
+    <search className="vt-search-form">
+      <form action="/search" method="get" className="flex items-center gap-unit">
+        <label className="sr-only" htmlFor="vt-search-q">
+          {search} products
+        </label>
+        <input
+          id="vt-search-q"
+          type="search"
+          name="q"
+          placeholder={search}
+          autoComplete="off"
+          className="w-28 rounded-md border border-input bg-surface px-unit py-unit text-sm text-surface-fg md:w-40 focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        />
+        <button
+          type="submit"
+          className="rounded-md border border-border px-unit py-unit text-sm text-fg transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        >
+          {search}
+        </button>
+      </form>
+    </search>
+  );
+}

package/kit/registry/search/files/components/search/SearchResults.tsx

@@ -0,0 +1,87 @@
+// Search results — presentational. Hosts search.results-top / search.empty slots.
+// Inline cards (not ProductGrid) so the feature typechecks without cross-feature imports.
+import type { Product } from '@vitrine-kit/contracts';
+import { Slot } from '@vitrine-kit/core/react';
+
+export interface SearchResultsProps {
+  term: string;
+  products: Product[];
+}
+
+function formatPrice(amount: number, currency: string): string {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount / 100);
+}
+
+export function SearchResults({ term, products }: SearchResultsProps) {
+  if (!term) {
+    return (
+      <p className="text-muted-fg">Type a query in the header search to find products.</p>
+    );
+  }
+
+  if (products.length === 0) {
+    return (
+      <div className="vt-search-empty flex flex-col gap-gutter">
+        <Slot name="search.empty" term={term} />
+        <p className="text-muted-fg">
+          No products matched <span className="text-fg">“{term}”</span>.
+        </p>
+        <a
+          href="/"
+          className="w-fit rounded-md border border-border px-gutter py-unit text-fg transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        >
+          Browse catalog
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <div className="vt-search-results flex flex-col gap-gutter">
+      <Slot name="search.results-top" term={term} products={products} />
+      <p className="text-sm text-muted-fg">
+        {products.length} result{products.length === 1 ? '' : 's'} for “{term}”
+      </p>
+      <ul role="list" className="grid grid-cols-1 gap-gutter sm:grid-cols-2 lg:grid-cols-3">
+        {products.map((product) => {
+          const price = product.priceRange?.min ?? product.variants[0]?.price;
+          const currency = product.priceRange?.currency ?? product.variants[0]?.currency ?? 'USD';
+          const image = product.images[0];
+          return (
+            <li key={product.id}>
+              <article className="vt-product-card rounded-md border border-border bg-surface text-surface-fg">
+                <a
+                  href={`/products/${product.slug}`}
+                  className="block focus-visible:outline-none focus-visible:ring-2 ring-ring"
+                >
+                  {image ? (
+                    <img
+                      src={image.url}
+                      alt={image.alt ?? product.title}
+                      width={image.width}
+                      height={image.height}
+                      loading="lazy"
+                      className="aspect-square w-full rounded-t-md object-cover"
+                    />
+                  ) : (
+                    <div className="aspect-square w-full rounded-t-md bg-muted" aria-hidden="true" />
+                  )}
+                  <div className="p-gutter">
+                    <h3 className="font-heading text-fg">{product.title}</h3>
+                    {price != null ? (
+                      <p className="text-price">
+                        {product.priceRange && product.priceRange.min !== product.priceRange.max
+                          ? `From ${formatPrice(price, currency)}`
+                          : formatPrice(price, currency)}
+                      </p>
+                    ) : null}
+                  </div>
+                </a>
+              </article>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/kit/registry/search/files/lib/search/data.ts

@@ -0,0 +1,8 @@
+// Search via CatalogSource.search — portable across Payload and Vendure adapters.
+import type { CatalogSource, Product } from '@vitrine-kit/contracts';
+
+export async function loadSearch(source: CatalogSource, term: string): Promise<Product[]> {
+  const q = term.trim();
+  if (!q) return [];
+  return source.search(q);
+}

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

@@ -0,0 +1,8 @@
+// Registers the search feature's slots. SearchForm sits in the header actions
+// (before CartIndicator when cart is installed).
+import { registerSlot } from '@vitrine-kit/core';
+import { SearchForm } from '../../components/search/SearchForm.js';
+
+export function registerSearchSlots(): void {
+  registerSlot({ slot: 'global.header-actions', component: SearchForm, order: 5 });
+}

package/kit/registry/seo/docs/seo.md

@@ -1,14 +1,17 @@
 # Feature: seo
 
-Page metadata and schema.org JSON-LD from domain types.
+Page metadata and schema.org JSON-LD from domain types, plus sitewide crawl files.
 
 ## Modules
 - `lib/seo/metadata` — `buildProductMetadata(product)` → `SiteMetadata` (structurally compatible with Next `Metadata`; in the client it's returned from `generateMetadata`).
 - `lib/seo/jsonld` — `productJsonLd(product)` → a schema.org `Product`/`Offer` object.
 - `components/seo/JsonLd` — `<JsonLd data={…} />` embeds a `<script type="application/ld+json">`.
+- `app/sitemap.ts` — dynamic sitemap from `CatalogSource` (home, categories, products).
+- `app/robots.ts` — robots.txt pointing at the sitemap; disallows admin/api/cart/order.
 
 ## Contracts
 Only `@vitrine-kit/contracts` (the `Product` type). Registers no slots.
 
 ## Note
 The price in JSON-LD is converted from minor units (`price/100`).
+Home and category pages set `generateMetadata` in the base template.

package/kit/registry/seo/feature.json

@@ -2,7 +2,7 @@
   "$schema": "../../schemas/feature.schema.json",
   "name": "seo",
   "title": "SEO — metadata and JSON-LD",
-  "kitVersion": "0.4.1",
+  "kitVersion": "0.5.0",
   "requiresContracts": ">=1.0.0 <2.0.0",
   "tier": [
     "catalog",
@@ -20,6 +20,10 @@
     {
       "from": "files/lib/seo/",
       "to": "lib/seo/"
+    },
+    {
+      "from": "files/app/",
+      "to": "app/"
     }
   ],
   "config": {

package/kit/registry/seo/files/app/robots.ts

@@ -0,0 +1,13 @@
+import type { MetadataRoute } from 'next';
+import { baseUrl } from '@/lib/site';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: ['/admin/', '/api/', '/cart', '/order/', '/account', '/wishlist'],
+    },
+    sitemap: `${baseUrl}/sitemap.xml`,
+  };
+}

package/kit/registry/seo/files/app/sitemap.ts

@@ -0,0 +1,27 @@
+import type { MetadataRoute } from 'next';
+import { getCatalogSource } from '@/lib/adapter';
+import { baseUrl } from '@/lib/site';
+
+/** Dynamic sitemap from the catalog (products + categories + home). */
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const source = await getCatalogSource();
+  const [products, categories] = await Promise.all([
+    source.listProducts({ perPage: 500 }),
+    source.listCategories(),
+  ]);
+
+  const entries: MetadataRoute.Sitemap = [
+    { url: baseUrl, changeFrequency: 'daily', priority: 1 },
+    ...categories.map((c) => ({
+      url: `${baseUrl}/categories/${c.slug}`,
+      changeFrequency: 'weekly' as const,
+      priority: 0.7,
+    })),
+    ...products.map((p) => ({
+      url: `${baseUrl}/products/${p.slug}`,
+      changeFrequency: 'weekly' as const,
+      priority: 0.8,
+    })),
+  ];
+  return entries;
+}

package/kit/registry/stubs/route-glue.d.ts

@@ -4,7 +4,24 @@
 declare module 'next/server' {
   export class NextResponse {
     static json(body: unknown, init?: ResponseInit): NextResponse;
+    static next(): NextResponse;
+    static redirect(url: URL | string): NextResponse;
+    static rewrite(url: URL | string): NextResponse;
+    cookies: {
+      set(name: string, value: string, options?: Record<string, unknown>): void;
+    };
   }
+  export interface NextRequest {
+    nextUrl: URL & { clone(): URL & { pathname: string } };
+    cookies: { get(name: string): { value: string } | undefined };
+  }
+}
+
+declare module 'next/navigation' {
+  export function useRouter(): {
+    push(href: string): void;
+    refresh(): void;
+  };
 }
 
 declare module 'next/headers' {
@@ -43,3 +60,57 @@ declare module '@/lib/checkout-yookassa/provider' {
   import type { PaymentProvider } from '@vitrine-kit/core';
   export const yookassaProvider: PaymentProvider;
 }
+
+declare module 'payload' {
+  export function getPayload(args: { config: unknown }): Promise<{
+    findByID(args: Record<string, unknown>): Promise<Record<string, unknown> | null>;
+    find(args: Record<string, unknown>): Promise<{ docs: Array<Record<string, unknown>> }>;
+    update(args: Record<string, unknown>): Promise<unknown>;
+    create(args: Record<string, unknown>): Promise<unknown>;
+  }>;
+}
+
+declare module '@payload-config' {
+  const config: unknown;
+  export default config;
+}
+
+declare module '@/site.config' {
+  import type { SiteConfig } from '@vitrine-kit/contracts';
+  export const siteConfig: SiteConfig;
+  export default siteConfig;
+}
+
+declare module '@/lib/i18n/dictionary' {
+  export type MessageKey =
+    | 'cart'
+    | 'search'
+    | 'checkout'
+    | 'wishlist'
+    | 'orders'
+    | 'account'
+    | 'continueShopping'
+    | 'addToCart'
+    | 'thankYou'
+    | 'signIn'
+    | 'createAccount';
+  export function t(key: MessageKey, locale?: string): string;
+  export function supportedLocales(): string[];
+}
+
+declare module '@/lib/i18n/useChromeLabel' {
+  import type { MessageKey } from '@/lib/i18n/dictionary';
+  export function useChromeLabel(key: MessageKey, fallbackLocale?: string): string;
+  export function chromeLabel(key: MessageKey, locale?: string): string;
+}
+
+declare module '@/lib/reviews/types' {
+  export interface ProductReview {
+    id: string;
+    author: string;
+    rating: number;
+    body: string;
+    createdAt: string;
+  }
+  export function parseReviews(value: unknown): ProductReview[];
+}

package/kit/registry/tsconfig.json

@@ -10,12 +10,17 @@
     "*/files/components/**/*.ts",
     "*/files/components/**/*.tsx",
     "*/files/lib/**/*.ts",
-    "*/files/lib/**/*.tsx"
+    "*/files/lib/**/*.tsx",
+    "stubs/**/*.d.ts"
   ],
   "exclude": [
     "**/node_modules",
     "**/dist",
     "*/files/lib/checkout-*/**",
-    "*/files/lib/checkout/fulfill.ts"
+    "*/files/lib/checkout/fulfill.ts",
+    "*/files/lib/checkout/notify.ts",
+    "*/files/lib/email/**",
+    "*/files/lib/accounts/session.ts",
+    "*/files/middleware.ts"
   ]
 }

package/kit/registry/wishlist/docs/wishlist.md

@@ -0,0 +1,11 @@
+# Feature: wishlist
+
+Client-side wishlist (localStorage). No backend — works on every tier including catalog-only.
+
+## Modules
+- `WishlistButton` — toggle on the product page (`product.below-price`)
+- `WishlistIndicator` — header link with count (`global.header-actions`)
+- `/wishlist` — list of saved product slugs resolved via `CatalogSource`
+
+## Note
+Guest-only. Clearing site data clears the wishlist. Accounts can later sync this storage.

package/kit/registry/wishlist/feature.json

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

package/kit/registry/wishlist/files/app/(frontend)/wishlist/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from 'next';
+import { WishlistView } from '@/components/wishlist/WishlistView';
+
+export const metadata: Metadata = {
+  title: 'Wishlist',
+  robots: { index: false, follow: true },
+};
+
+export default function WishlistPage() {
+  return (
+    <div className="flex flex-col gap-section">
+      <h1 className="font-heading text-fg">Wishlist</h1>
+      <WishlistView />
+    </div>
+  );
+}