create-brainerce-store 1.0.0

package/templates/nextjs/base/src/components/layout/header.tsx

@@ -0,0 +1,329 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import type { SearchSuggestions, ProductSuggestion } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useStoreInfo, useAuth, useCart } from '@/providers/store-provider';
+export function Header() {
+  const { storeInfo } = useStoreInfo();
+  const { isLoggedIn, logout } = useAuth();
+  const { itemCount } = useCart();
+  const router = useRouter();
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [suggestions, setSuggestions] = useState<SearchSuggestions | null>(null);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const searchRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const currency = storeInfo?.currency || 'USD';
+
+  // Debounced search suggestions
+  const fetchSuggestions = useCallback((query: string) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+
+    if (query.length < 2) {
+      setSuggestions(null);
+      setShowSuggestions(false);
+      return;
+    }
+
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const client = getClient();
+        const result = await client.getSearchSuggestions(query, 5);
+        setSuggestions(result);
+        setShowSuggestions(true);
+      } catch {
+        setSuggestions(null);
+      }
+    }, 300);
+  }, []);
+
+  // Close suggestions on click outside
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
+        setShowSuggestions(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  function handleSearchSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (searchQuery.trim()) {
+      router.push(`/products?search=${encodeURIComponent(searchQuery.trim())}`);
+      setShowSuggestions(false);
+      setSearchQuery('');
+    }
+  }
+
+  function handleSuggestionClick(suggestion: ProductSuggestion) {
+    const href = suggestion.slug ? `/products/${suggestion.slug}` : `/products/${suggestion.id}`;
+    router.push(href);
+    setShowSuggestions(false);
+    setSearchQuery('');
+  }
+
+  return (
+    <header className="bg-background border-border sticky top-0 z-50 border-b">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 items-center justify-between gap-4">
+          {/* Logo / Store Name */}
+          <Link href="/" className="text-foreground flex-shrink-0 text-xl font-bold">
+            {storeInfo?.name || 'Store'}
+          </Link>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden items-center gap-6 md:flex">
+            <Link
+              href="/products"
+              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+            >
+              Products
+            </Link>
+            <Link
+              href="/account"
+              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+            >
+              Account
+            </Link>
+          </nav>
+
+          {/* Search */}
+          <div ref={searchRef} className="relative hidden max-w-md flex-1 sm:block">
+            <form onSubmit={handleSearchSubmit}>
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => {
+                  setSearchQuery(e.target.value);
+                  fetchSuggestions(e.target.value);
+                }}
+                onFocus={() => {
+                  if (suggestions && searchQuery.length >= 2) {
+                    setShowSuggestions(true);
+                  }
+                }}
+                placeholder="Search products..."
+                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-9 w-full rounded border px-3 pe-9 text-sm focus:outline-none focus:ring-2"
+              />
+              <button
+                type="submit"
+                className="text-muted-foreground hover:text-foreground absolute end-0 top-0 flex h-9 w-9 items-center justify-center"
+                aria-label="Search"
+              >
+                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  />
+                </svg>
+              </button>
+            </form>
+
+            {/* Search Suggestions Dropdown */}
+            {showSuggestions && suggestions && (
+              <div className="bg-background border-border absolute top-full z-50 mt-1 w-full overflow-hidden rounded-lg border shadow-lg">
+                {suggestions.products.length > 0 && (
+                  <div>
+                    <div className="text-muted-foreground bg-muted px-3 py-1.5 text-xs font-medium">
+                      Products
+                    </div>
+                    {suggestions.products.map((product) => (
+                      <button
+                        key={product.id}
+                        type="button"
+                        onClick={() => handleSuggestionClick(product)}
+                        className="hover:bg-muted flex w-full items-center gap-3 px-3 py-2 text-start transition-colors"
+                      >
+                        {product.image ? (
+                          <Image
+                            src={product.image}
+                            alt={product.name}
+                            width={32}
+                            height={32}
+                            className="flex-shrink-0 rounded object-cover"
+                          />
+                        ) : (
+                          <div className="bg-muted h-8 w-8 flex-shrink-0 rounded" />
+                        )}
+                        <div className="min-w-0 flex-1">
+                          <p className="text-foreground truncate text-sm">{product.name}</p>
+                          <p className="text-muted-foreground text-xs">
+                            {
+                              formatPrice(product.salePrice || product.price, {
+                                currency,
+                              }) as string
+                            }
+                          </p>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                )}
+
+                {suggestions.categories.length > 0 && (
+                  <div>
+                    <div className="text-muted-foreground bg-muted px-3 py-1.5 text-xs font-medium">
+                      Categories
+                    </div>
+                    {suggestions.categories.map((cat) => (
+                      <button
+                        key={cat.id}
+                        type="button"
+                        onClick={() => {
+                          router.push(`/products?category=${cat.id}`);
+                          setShowSuggestions(false);
+                          setSearchQuery('');
+                        }}
+                        className="hover:bg-muted flex w-full items-center justify-between px-3 py-2 text-start transition-colors"
+                      >
+                        <span className="text-foreground text-sm">{cat.name}</span>
+                        <span className="text-muted-foreground text-xs">
+                          {cat.productCount} products
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+
+                {suggestions.products.length === 0 && suggestions.categories.length === 0 && (
+                  <div className="text-muted-foreground px-3 py-4 text-center text-sm">
+                    No results found
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Right side actions */}
+          <div className="flex items-center gap-3">
+            {/* Auth */}
+            {isLoggedIn ? (
+              <button
+                onClick={logout}
+                className="text-muted-foreground hover:text-foreground hidden text-sm transition-colors sm:inline-flex"
+              >
+                Logout
+              </button>
+            ) : (
+              <Link
+                href="/login"
+                className="text-muted-foreground hover:text-foreground hidden text-sm transition-colors sm:inline-flex"
+              >
+                Login
+              </Link>
+            )}
+
+            {/* Cart */}
+            <Link
+              href="/cart"
+              className="text-foreground hover:text-primary relative p-2 transition-colors"
+              aria-label={`Cart with ${itemCount} items`}
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+                />
+              </svg>
+              {itemCount > 0 && (
+                <span className="bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full text-[10px] font-bold">
+                  {itemCount > 99 ? '99+' : itemCount}
+                </span>
+              )}
+            </Link>
+
+            {/* Mobile menu button */}
+            <button
+              type="button"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="text-foreground p-2 md:hidden"
+              aria-label="Menu"
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                {mobileMenuOpen ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                ) : (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 6h16M4 12h16M4 18h16"
+                  />
+                )}
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Menu */}
+        {mobileMenuOpen && (
+          <div className="border-border space-y-2 border-t py-3 md:hidden">
+            <Link
+              href="/products"
+              onClick={() => setMobileMenuOpen(false)}
+              className="text-foreground hover:bg-muted block rounded px-2 py-2 text-sm"
+            >
+              Products
+            </Link>
+            <Link
+              href="/account"
+              onClick={() => setMobileMenuOpen(false)}
+              className="text-foreground hover:bg-muted block rounded px-2 py-2 text-sm"
+            >
+              Account
+            </Link>
+            {isLoggedIn ? (
+              <button
+                onClick={() => {
+                  logout();
+                  setMobileMenuOpen(false);
+                }}
+                className="text-foreground hover:bg-muted block w-full rounded px-2 py-2 text-start text-sm"
+              >
+                Logout
+              </button>
+            ) : (
+              <Link
+                href="/login"
+                onClick={() => setMobileMenuOpen(false)}
+                className="text-foreground hover:bg-muted block rounded px-2 py-2 text-sm"
+              >
+                Login
+              </Link>
+            )}
+
+            {/* Mobile search */}
+            <form onSubmit={handleSearchSubmit} className="px-2 pt-2">
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search products..."
+                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-9 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
+              />
+            </form>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}

package/templates/nextjs/base/src/components/products/discount-badge.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { ProductDiscountBadge } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { cn } from '@/lib/utils';
+
+interface DiscountBadgeProps {
+  productId: string;
+  className?: string;
+}
+
+export function DiscountBadge({ productId, className }: DiscountBadgeProps) {
+  const [badge, setBadge] = useState<ProductDiscountBadge | null>(null);
+
+  useEffect(() => {
+    const client = getClient();
+    client
+      .getProductDiscountBadge(productId)
+      .then(setBadge)
+      .catch(() => setBadge(null));
+  }, [productId]);
+
+  if (!badge) return null;
+
+  return (
+    <span
+      className={cn(
+        'bg-destructive text-destructive-foreground inline-flex items-center rounded px-2 py-1 text-xs font-bold',
+        className
+      )}
+    >
+      {badge.badgeText}
+    </span>
+  );
+}

package/templates/nextjs/base/src/components/products/product-card.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+import type { Product } from 'brainerce';
+import { getProductPriceInfo } from 'brainerce';
+import { PriceDisplay } from '@/components/shared/price-display';
+import { StockBadge } from '@/components/products/stock-badge';
+import { DiscountBadge } from '@/components/products/discount-badge';
+import { cn } from '@/lib/utils';
+
+interface ProductCardProps {
+  product: Product;
+  className?: string;
+}
+
+export function ProductCard({ product, className }: ProductCardProps) {
+  const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
+  const mainImage = product.images?.[0];
+  const imageUrl = mainImage?.url || null;
+  const slug = product.slug || product.id;
+
+  return (
+    <Link
+      href={`/products/${slug}`}
+      className={cn(
+        'border-border bg-background group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
+        className
+      )}
+    >
+      {/* Image */}
+      <div className="bg-muted relative aspect-square overflow-hidden">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={mainImage?.alt || product.name}
+            fill
+            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+            <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+        )}
+
+        {/* Badges */}
+        <div className="absolute start-2 top-2 flex flex-col gap-1">
+          {isOnSale && (
+            <span className="bg-destructive text-destructive-foreground rounded px-2 py-1 text-xs font-bold">
+              Sale
+            </span>
+          )}
+          <DiscountBadge productId={product.id} />
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="space-y-2 p-3">
+        {/* Categories */}
+        {product.categories && product.categories.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {product.categories.slice(0, 2).map((cat) => (
+              <span
+                key={cat.id}
+                className="text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-[10px]"
+              >
+                {cat.name}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Name */}
+        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
+          {product.name}
+        </h3>
+
+        {/* Price */}
+        <PriceDisplay price={originalPrice} salePrice={isOnSale ? price : undefined} size="sm" />
+
+        {/* Stock */}
+        <StockBadge inventory={product.inventory} />
+      </div>
+    </Link>
+  );
+}

package/templates/nextjs/base/src/components/products/product-grid.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import type { Product } from 'brainerce';
+import { ProductCard } from '@/components/products/product-card';
+import { cn } from '@/lib/utils';
+
+interface ProductGridProps {
+  products: Product[];
+  className?: string;
+}
+
+export function ProductGrid({ products, className }: ProductGridProps) {
+  if (products.length === 0) {
+    return (
+      <div className="py-16 text-center">
+        <p className="text-muted-foreground text-lg">No products found.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+        className
+      )}
+    >
+      {products.map((product) => (
+        <ProductCard key={product.id} product={product} />
+      ))}
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/products/stock-badge.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { getStockStatus } from 'brainerce';
+import type { InventoryInfo } from 'brainerce';
+import { cn } from '@/lib/utils';
+
+interface StockBadgeProps {
+  inventory: InventoryInfo | null | undefined;
+  lowStockThreshold?: number;
+  className?: string;
+}
+
+export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
+  const status = getStockStatus(inventory, { lowStockThreshold });
+
+  const colorClasses =
+    status === 'Out of Stock' || status === 'Unavailable'
+      ? 'bg-red-100 text-red-800'
+      : status === 'Low Stock'
+        ? 'bg-yellow-100 text-yellow-800'
+        : 'bg-green-100 text-green-800';
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+        colorClasses,
+        className
+      )}
+    >
+      {status}
+    </span>
+  );
+}

package/templates/nextjs/base/src/components/products/variant-selector.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { Product, ProductVariant } from 'brainerce';
+import { getVariantOptions, getStockStatus, formatPrice } from 'brainerce';
+import { useStoreInfo } from '@/providers/store-provider';
+import { cn } from '@/lib/utils';
+
+interface VariantSelectorProps {
+  product: Product;
+  selectedVariant: ProductVariant | null;
+  onVariantChange: (variant: ProductVariant) => void;
+  className?: string;
+}
+
+interface AttributeGroup {
+  name: string;
+  values: Array<{
+    value: string;
+    variants: ProductVariant[];
+  }>;
+}
+
+export function VariantSelector({
+  product,
+  selectedVariant,
+  onVariantChange,
+  className,
+}: VariantSelectorProps) {
+  const { storeInfo } = useStoreInfo();
+  const currency = storeInfo?.currency || 'USD';
+  const variants = useMemo(() => product.variants || [], [product.variants]);
+
+  // Build attribute groups from product attribute options or variant data
+  const attributeGroups = useMemo<AttributeGroup[]>(() => {
+    const groups = new Map<string, Map<string, ProductVariant[]>>();
+
+    for (const variant of variants) {
+      const options = getVariantOptions(variant);
+      for (const { name, value } of options) {
+        if (!groups.has(name)) {
+          groups.set(name, new Map());
+        }
+        const valuesMap = groups.get(name)!;
+        if (!valuesMap.has(value)) {
+          valuesMap.set(value, []);
+        }
+        valuesMap.get(value)!.push(variant);
+      }
+    }
+
+    return Array.from(groups.entries()).map(([name, valuesMap]) => ({
+      name,
+      values: Array.from(valuesMap.entries()).map(([value, variantList]) => ({
+        value,
+        variants: variantList,
+      })),
+    }));
+  }, [variants]);
+
+  // Get currently selected attribute values
+  const selectedOptions = useMemo(() => {
+    if (!selectedVariant) return new Map<string, string>();
+    const opts = getVariantOptions(selectedVariant);
+    return new Map(opts.map(({ name, value }) => [name, value]));
+  }, [selectedVariant]);
+
+  // Find the variant that matches all selected attributes
+  function findMatchingVariant(
+    attributeName: string,
+    newValue: string
+  ): ProductVariant | undefined {
+    const nextSelection = new Map(selectedOptions);
+    nextSelection.set(attributeName, newValue);
+
+    return variants.find((v) => {
+      const opts = getVariantOptions(v);
+      return Array.from(nextSelection.entries()).every(([name, value]) =>
+        opts.some((o) => o.name === name && o.value === value)
+      );
+    });
+  }
+
+  if (attributeGroups.length === 0) return null;
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {attributeGroups.map((group) => (
+        <div key={group.name}>
+          <label className="text-foreground mb-2 block text-sm font-medium">
+            {group.name}
+            {selectedOptions.get(group.name) && (
+              <span className="text-muted-foreground ms-1 font-normal">
+                : {selectedOptions.get(group.name)}
+              </span>
+            )}
+          </label>
+          <div className="flex flex-wrap gap-2">
+            {group.values.map(({ value, variants: matchingVariants }) => {
+              const isSelected = selectedOptions.get(group.name) === value;
+              const matchedVariant = findMatchingVariant(group.name, value);
+              const isAvailable = matchedVariant?.inventory?.canPurchase !== false;
+
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  disabled={!isAvailable}
+                  onClick={() => {
+                    const variant = matchedVariant || matchingVariants[0];
+                    if (variant) onVariantChange(variant);
+                  }}
+                  className={cn(
+                    'rounded border px-4 py-2 text-sm transition-colors',
+                    isSelected
+                      ? 'border-primary bg-primary text-primary-foreground'
+                      : isAvailable
+                        ? 'border-border bg-background text-foreground hover:border-primary'
+                        : 'border-border bg-muted text-muted-foreground cursor-not-allowed line-through opacity-50'
+                  )}
+                >
+                  {value}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+
+      {/* Variant-specific info */}
+      {selectedVariant && (
+        <div className="text-muted-foreground flex items-center gap-3 pt-1 text-sm">
+          {selectedVariant.price && (
+            <span>
+              {
+                formatPrice(selectedVariant.salePrice || selectedVariant.price, {
+                  currency,
+                }) as string
+              }
+            </span>
+          )}
+          <span>{getStockStatus(selectedVariant.inventory)}</span>
+        </div>
+      )}
+    </div>
+  );
+}