create-brainerce-store 1.51.0 → 1.52.0

package/templates/nextjs/designs/passepartout/ui/product/product-grid.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import type { Product } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { ProductCard } from '@/ui/product/product-card';
-import { cn } from '@/core/lib/utils';
-
-interface ProductGridProps {
-  products: Product[];
-  className?: string;
-}
-
-export function ProductGrid({ products, className }: ProductGridProps) {
-  const t = useTranslations('products');
-  if (products.length === 0) {
-    return (
-      <div className="py-16 text-center">
-        <p className="text-muted-foreground text-lg">{t('noProducts')}</p>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn(
-        'grid grid-cols-2 gap-x-4 gap-y-12 lg:grid-cols-4 lg:gap-x-6 lg:gap-y-16',
-        className
-      )}
-    >
-      {products.map((product) => (
-        <ProductCard key={product.id} product={product} />
-      ))}
-    </div>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/product/product-listing.tsx

@@ -1,427 +0,0 @@
-'use client';
-
-import { useEffect, useState, useRef } from 'react';
-import {
-  useProductListing,
-  sortOptions,
-  isActiveInTree,
-  type CategoryNode,
-} from '@/core/hooks/use-product-listing';
-import { ProductGrid } from '@/ui/product/product-grid';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-/** Chevron down SVG */
-function ChevronDown({ className }: { className?: string }) {
-  return (
-    <svg
-      className={className}
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M3 4.5L6 7.5L9 4.5" />
-    </svg>
-  );
-}
-
-/** Recursive dropdown items for nested categories */
-function CategoryDropdownItems({
-  items,
-  depth,
-  selectedId,
-  onSelect,
-}: {
-  items: CategoryNode[];
-  depth: number;
-  selectedId: string;
-  onSelect: (id: string) => void;
-}) {
-  return (
-    <>
-      {items.map((child) => (
-        <div key={child.id}>
-          <button
-            onClick={() => onSelect(child.id)}
-            className={cn(
-              'hover:bg-muted w-full px-4 py-2 text-start text-sm transition-colors',
-              selectedId === child.id && 'bg-muted text-foreground font-medium'
-            )}
-            style={{ paddingInlineStart: `${(depth + 1) * 16}px` }}
-          >
-            {child.name}
-          </button>
-          {child.children.length > 0 && (
-            <CategoryDropdownItems
-              items={child.children}
-              depth={depth + 1}
-              selectedId={selectedId}
-              onSelect={onSelect}
-            />
-          )}
-        </div>
-      ))}
-    </>
-  );
-}
-
-/** Category chip with dropdown for subcategories */
-function CategoryChip({
-  category,
-  selectedId,
-  onSelect,
-  tc,
-}: {
-  category: CategoryNode;
-  selectedId: string;
-  onSelect: (id: string) => void;
-  tc: (key: string) => string;
-}) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-  const hasChildren = category.children.length > 0;
-  const isActive = isActiveInTree(category, selectedId);
-
-  // Find the display name for the selected subcategory
-  function findName(nodes: CategoryNode[], id: string): string | null {
-    for (const n of nodes) {
-      if (n.id === id) return n.name;
-      const found = findName(n.children, id);
-      if (found) return found;
-    }
-    return null;
-  }
-
-  const selectedChildName =
-    isActive && selectedId !== category.id ? findName(category.children, selectedId) : null;
-
-  // Close dropdown on outside click
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [open]);
-
-  if (!hasChildren) {
-    return (
-      <button
-        onClick={() => onSelect(category.id)}
-        className={cn(
-          'border px-3 py-1.5 text-xs transition-colors',
-          selectedId === category.id
-            ? 'bg-primary text-primary-foreground border-primary'
-            : 'border-border text-muted-foreground hover:border-foreground hover:text-foreground'
-        )}
-      >
-        {category.name}
-      </button>
-    );
-  }
-
-  return (
-    <div ref={ref} className="relative">
-      <button
-        onClick={() => setOpen((prev) => !prev)}
-        className={cn(
-          'inline-flex items-center gap-1 border px-3 py-1.5 text-xs transition-colors',
-          isActive
-            ? 'bg-primary text-primary-foreground border-primary'
-            : 'border-border text-muted-foreground hover:border-foreground hover:text-foreground'
-        )}
-      >
-        {category.name}
-        {selectedChildName && (
-          <span className="opacity-80">
-            {'·'} {selectedChildName}
-          </span>
-        )}
-        <ChevronDown className={cn('ms-0.5 transition-transform', open && 'rotate-180')} />
-      </button>
-
-      {open && (
-        <div className="bg-surface border-border absolute start-0 top-full z-50 mt-1 min-w-[180px] overflow-hidden border">
-          {/* "All in [category]" option */}
-          <button
-            onClick={() => {
-              onSelect(category.id);
-              setOpen(false);
-            }}
-            className={cn(
-              'hover:bg-muted w-full px-4 py-2 text-start text-sm font-medium transition-colors',
-              selectedId === category.id && 'bg-muted text-foreground'
-            )}
-          >
-            {tc('all')} {category.name}
-          </button>
-          <div className="bg-border mx-2 h-px" />
-          {/* Recursive children */}
-          <div onClick={() => setOpen(false)}>
-            <CategoryDropdownItems
-              items={category.children}
-              depth={0}
-              selectedId={selectedId}
-              onSelect={onSelect}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * Product listing page (filters + sort + grid + load-more). All data and
- * URL-state behavior comes from `useProductListing`; this component is
- * presentation only. Must be rendered inside `<Suspense>` (URL params).
- */
-export function ProductListing() {
-  const t = useTranslations('products');
-  const tc = useTranslations('common');
-
-  const {
-    products,
-    loading,
-    loadingMore,
-    page,
-    totalPages,
-    total,
-    categories,
-    brands,
-    tags,
-    metafieldDefs,
-    searchQuery,
-    categoryId,
-    brandId,
-    tagId,
-    sortIndex,
-    handleLoadMore,
-    updateParam,
-    handleCategorySelect,
-    getSelectedMetafieldValues,
-    setMetafieldValue,
-  } = useProductListing();
-
-  return (
-    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      {/* Page Header */}
-      <div className="mb-10 pt-6">
-        <h1 className="text-foreground font-serif text-3xl font-light">
-          {searchQuery ? `${t('searchPrefix')} "${searchQuery}"` : t('allProducts')}
-        </h1>
-        {!loading && (
-          <p className="text-muted-foreground tabular mt-2 text-[0.6875rem] tracking-[0.08em]">
-            {total} {total === 1 ? tc('product') : tc('products')} {tc('found')}
-          </p>
-        )}
-        <div className="border-border mt-6 border-b" />
-      </div>
-
-      {/* Filters and Sort */}
-      <div className="mb-6 flex flex-col gap-4">
-        {/* Category Filter */}
-        {categories.length > 0 && (
-          <div className="flex flex-wrap gap-2">
-            <button
-              onClick={() => updateParam('category', '')}
-              className={cn(
-                'border px-3 py-1.5 text-xs transition-colors',
-                !categoryId
-                  ? 'bg-primary text-primary-foreground border-primary'
-                  : 'border-border text-muted-foreground hover:border-foreground hover:text-foreground'
-              )}
-            >
-              {tc('all')}
-            </button>
-            {categories.map((cat) => (
-              <CategoryChip
-                key={cat.id}
-                category={cat}
-                selectedId={categoryId}
-                onSelect={handleCategorySelect}
-                tc={tc as (key: string) => string}
-              />
-            ))}
-          </div>
-        )}
-
-        {/* Brand, Tag & Sort row */}
-        <div className="flex flex-wrap items-center gap-3">
-          {/* Brand Filter */}
-          {brands.length > 0 && (
-            <select
-              value={brandId}
-              onChange={(e) => updateParam('brand', e.target.value)}
-              className="border-border bg-surface text-foreground focus:border-foreground h-9 border px-3 text-sm focus:outline-none"
-            >
-              <option value="">{t('allBrands')}</option>
-              {brands.map((b) => (
-                <option key={b.id} value={b.id}>
-                  {b.name}
-                </option>
-              ))}
-            </select>
-          )}
-
-          {/* Tag Filter */}
-          {tags.length > 0 && (
-            <select
-              value={tagId}
-              onChange={(e) => updateParam('tag', e.target.value)}
-              className="border-border bg-surface text-foreground focus:border-foreground h-9 border px-3 text-sm focus:outline-none"
-            >
-              <option value="">{t('allTags')}</option>
-              {tags.map((tg) => (
-                <option key={tg.id} value={tg.id}>
-                  {tg.name}
-                </option>
-              ))}
-            </select>
-          )}
-
-          {/* Custom-field (metafield) facets — rendered per definition type.
-              Only definitions flagged `filterable: true` and published to
-              this sales channel reach this list (see `metafieldDefs` filter
-              in the hook). The merchant's display name (`def.name`) is shown
-              as-is — `enumValues` come from the merchant's dashboard config. */}
-          {metafieldDefs.map((def) => {
-            const selected = getSelectedMetafieldValues(def.key);
-
-            if (def.type === 'BOOLEAN') {
-              const isOn = selected.includes('true');
-              return (
-                <label
-                  key={def.id}
-                  className="border-border text-foreground hover:border-foreground inline-flex h-9 cursor-pointer items-center gap-2 border px-3 text-sm transition-colors"
-                >
-                  <input
-                    type="checkbox"
-                    checked={isOn}
-                    onChange={(e) => setMetafieldValue(def.key, e.target.checked ? ['true'] : [])}
-                    className="accent-primary h-4 w-4"
-                  />
-                  {def.name}
-                </label>
-              );
-            }
-
-            if (def.type === 'SELECT') {
-              return (
-                <select
-                  key={def.id}
-                  value={selected[0] || ''}
-                  onChange={(e) =>
-                    setMetafieldValue(def.key, e.target.value ? [e.target.value] : [])
-                  }
-                  aria-label={def.name}
-                  className="border-border bg-surface text-foreground focus:border-foreground h-9 border px-3 text-sm focus:outline-none"
-                >
-                  <option value="">{`${tc('all')} ${def.name}`}</option>
-                  {(def.enumValues || []).map((v) => (
-                    <option key={v.value} value={v.value}>
-                      {v.label || v.value}
-                    </option>
-                  ))}
-                </select>
-              );
-            }
-
-            // MULTI_SELECT — chip toggles. Each click adds/removes one value.
-            return (
-              <div
-                key={def.id}
-                className="border-border inline-flex items-center gap-1 border px-2 py-1"
-                aria-label={def.name}
-              >
-                <span className="text-muted-foreground px-1 text-xs">{def.name}:</span>
-                {(def.enumValues || []).map((v) => {
-                  const active = selected.includes(v.value);
-                  return (
-                    <button
-                      key={v.value}
-                      type="button"
-                      onClick={() =>
-                        setMetafieldValue(
-                          def.key,
-                          active ? selected.filter((s) => s !== v.value) : [...selected, v.value]
-                        )
-                      }
-                      className={cn(
-                        'border px-2 py-0.5 text-xs transition-colors',
-                        active
-                          ? 'bg-primary text-primary-foreground border-primary'
-                          : 'border-border text-muted-foreground hover:border-foreground hover:text-foreground'
-                      )}
-                    >
-                      {v.label || v.value}
-                    </button>
-                  );
-                })}
-              </div>
-            );
-          })}
-
-          {/* Sort */}
-          <div className="flex items-center gap-2 sm:ms-auto">
-            <label htmlFor="sort" className="text-muted-foreground whitespace-nowrap text-sm">
-              {tc('sortBy')}
-            </label>
-            <select
-              id="sort"
-              value={sortIndex}
-              onChange={(e) => updateParam('sort', e.target.value)}
-              className="border-border bg-surface text-foreground focus:border-foreground h-9 border px-3 text-sm focus:outline-none"
-            >
-              {sortOptions.map((opt, idx) => (
-                <option key={idx} value={idx}>
-                  {t(opt.labelKey)}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-      </div>
-
-      {/* Products Grid */}
-      {loading ? (
-        <div className="flex items-center justify-center py-20">
-          <LoadingSpinner size="lg" />
-        </div>
-      ) : (
-        <>
-          <ProductGrid products={products} />
-
-          {/* Load More */}
-          {page < totalPages && (
-            <div className="mt-10 flex justify-center">
-              <button
-                onClick={handleLoadMore}
-                disabled={loadingMore}
-                className="bg-primary text-primary-foreground inline-flex items-center gap-2 px-6 py-2.5 text-[0.8125rem] font-semibold transition-colors disabled:opacity-50"
-              >
-                {loadingMore ? (
-                  <>
-                    <LoadingSpinner size="sm" className="bg-primary-foreground" />
-                    {tc('loading')}
-                  </>
-                ) : (
-                  t('loadMore')
-                )}
-              </button>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/product/recommendation-section.tsx

@@ -1,113 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { Link } from '@/core/lib/navigation';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { ProductRecommendation } from 'brainerce';
-import { PriceDisplay } from '@/ui/product/price-display';
-import { cn } from '@/core/lib/utils';
-
-interface RecommendationCardProps {
-  item: ProductRecommendation;
-  className?: string;
-}
-
-function RecommendationCard({ item, className }: RecommendationCardProps) {
-  const firstImage = item.images?.[0];
-  const imageUrl = typeof firstImage === 'string' ? firstImage : firstImage?.url || null;
-  const slug = item.slug || item.id;
-  const basePrice = parseFloat(item.basePrice);
-  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
-  const isOnSale = salePrice != null && salePrice < basePrice;
-
-  return (
-    <Link href={`/products/${slug}`} className={cn('group block', className)}>
-      <div className="bg-surface border-border relative aspect-square overflow-hidden border">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={item.name}
-            fill
-            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
-            className="object-cover transition-transform duration-700 group-hover:scale-[1.03]"
-          />
-        ) : (
-          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-            <svg className="h-10 w-10" 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>
-        )}
-      </div>
-      <div className="space-y-1.5 pt-3 text-start">
-        <h3 className="text-foreground line-clamp-2 font-serif text-sm font-normal">
-          {item.name}
-        </h3>
-        <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
-      </div>
-    </Link>
-  );
-}
-
-interface RecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-  /** Catalog number line above the title, e.g. 'מס׳ 03'. */
-  kicker?: string;
-}
-
-export function RecommendationSection({
-  title,
-  items,
-  className,
-  kicker,
-}: RecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <div className={cn('', className)}>
-      <div>
-        {kicker ? <p className="placard tabular">{kicker}</p> : null}
-        <h2 className="text-foreground mt-1 font-serif text-xl font-normal">{title}</h2>
-      </div>
-      <div className="border-border mb-8 mt-5 border-b" />
-      <div className="grid grid-cols-2 gap-x-4 gap-y-10 sm:grid-cols-3 lg:grid-cols-4">
-        {items.map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-interface CartRecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-export function CartRecommendationSection({
-  title,
-  items,
-  className,
-}: CartRecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <div className={cn('', className)}>
-      <h2 className="text-foreground font-serif text-lg font-normal">{title}</h2>
-      <div className="border-border mb-6 mt-4 border-b" />
-      <div className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4">
-        {items.map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </div>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/product/stock-badge.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import type { InventoryInfo } from 'brainerce';
-import { cn } from '@/core/lib/utils';
-import { useTranslations } from '@/core/lib/translations';
-
-interface StockBadgeProps {
-  inventory: InventoryInfo | null | undefined;
-  lowStockThreshold?: number;
-  className?: string;
-}
-
-/**
- * Stock as a museum placard caption — silence means available.
- * The placard only speaks when scarcity or absence needs saying:
- * low stock gets a quiet terracotta dot, absence gets terracotta text.
- */
-export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
-  const t = useTranslations('productDetail');
-
-  const caption = 'text-[0.6875rem] tracking-[0.08em]';
-
-  if (!inventory) {
-    return <span className={cn('text-destructive', caption, className)}>{t('outOfStock')}</span>;
-  }
-
-  const { trackingMode, inStock, available } = inventory;
-
-  if (trackingMode === 'DISABLED') {
-    return <span className={cn('text-destructive', caption, className)}>{t('unavailable')}</span>;
-  }
-  if (!inStock) {
-    return <span className={cn('text-destructive', caption, className)}>{t('outOfStock')}</span>;
-  }
-  if (trackingMode === 'TRACKED' && available <= lowStockThreshold) {
-    return (
-      <span
-        className={cn(
-          'text-muted-foreground inline-flex items-center gap-1.5',
-          caption,
-          className
-        )}
-      >
-        <span aria-hidden="true" className="bg-destructive h-1.5 w-1.5 rounded-full" />
-        {t('onlyLeft').replace('{available}', String(available))}
-      </span>
-    );
-  }
-
-  // In stock, no scarcity — the placard stays silent.
-  return null;
-}