create-brainerce-store 1.51.0 → 1.52.0

package/templates/nextjs/base/src/ui/product/discount-badge.tsx

@@ -1,22 +1,18 @@
-import type { ProductDiscount } from 'brainerce';
-import { cn } from '@/core/lib/utils';
-
-interface DiscountBadgeProps {
-  discount?: ProductDiscount | null;
-  className?: string;
-}
-
-export function DiscountBadge({ discount, className }: DiscountBadgeProps) {
-  if (!discount) 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
-      )}
-    >
-      {discount.badgeText}
-    </span>
-  );
-}
+import type { ProductDiscount } from 'brainerce';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/core/lib/utils';
+
+interface DiscountBadgeProps {
+  discount?: ProductDiscount | null;
+  className?: string;
+}
+
+export function DiscountBadge({ discount, className }: DiscountBadgeProps) {
+  if (!discount) return null;
+
+  return (
+    <Badge variant="destructive" className={cn('rounded px-2 py-1 font-bold', className)}>
+      {discount.badgeText}
+    </Badge>
+  );
+}

package/templates/nextjs/base/src/ui/product/frequently-bought-together.tsx

@@ -1,12 +1,16 @@
 'use client';
 
 import { useState } from 'react';
+import { Image as ImageIcon } from 'lucide-react';
 import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import type { Product, ProductRecommendation } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { useCart, useStoreInfo } from '@/core/providers/store-provider';
 import { useCurrency } from '@/core/lib/use-currency';
 import { useTranslations } from '@/core/lib/translations';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
 import { cn } from '@/core/lib/utils';
 
 interface FrequentlyBoughtTogetherProps {
@@ -47,11 +51,10 @@ function ProductThumb({
       )}
     >
       {onToggle && (
-        <input
-          type="checkbox"
+        <Checkbox
           checked={checked}
-          onChange={onToggle}
-          className="absolute start-2 top-2 h-4 w-4 rounded"
+          onCheckedChange={onToggle}
+          className="absolute start-2 top-2"
         />
       )}
       <div className="bg-muted relative mb-2 h-20 w-20 overflow-hidden rounded">
@@ -59,19 +62,11 @@ function ProductThumb({
           <Image src={imageUrl} alt={name} fill sizes="80px" className="object-cover" />
         ) : (
           <div className="flex h-full w-full items-center justify-center">
-            <svg
+            <ImageIcon
               className="text-muted-foreground h-8 w-8"
-              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>
+              strokeWidth={1.5}
+              aria-hidden="true"
+            />
           </div>
         )}
       </div>
@@ -147,7 +142,7 @@ export function FrequentlyBoughtTogether({
   }
 
   return (
-    <div className={cn('border-border rounded-lg border p-6', className)}>
+    <Card className={cn('shadow-none p-6', className)}>
       <h2 className="text-foreground mb-4 text-xl font-semibold">
         {t('frequentlyBoughtTogether')}
       </h2>
@@ -187,17 +182,10 @@ export function FrequentlyBoughtTogether({
         <span className="text-foreground text-lg font-semibold">
           {t('totalPrice', { price: formatPrice(totalPrice, { currency }) as string })}
         </span>
-        <button
-          onClick={handleAddAll}
-          disabled={adding || selected.size === 0}
-          className={cn(
-            'bg-primary text-primary-foreground rounded px-5 py-2.5 text-sm font-medium transition-opacity hover:opacity-90',
-            'disabled:cursor-not-allowed disabled:opacity-50'
-          )}
-        >
+        <Button onClick={handleAddAll} disabled={adding || selected.size === 0} className="rounded px-5">
           {adding ? t('addingAll') : t('addSelectedToCart')}
-        </button>
+        </Button>
       </div>
-    </div>
+    </Card>
   );
 }

package/templates/nextjs/base/src/ui/product/modifier-group-selector.tsx

@@ -1,175 +1,206 @@
-'use client';
-
-/**
- * <ModifierGroupSelector> — reference React component for storefront authors
- * (PRD §8.4).
- *
- * Drop-in renderer for a single modifier group (toppings, sauce, bread type, …).
- * Storefront authors are encouraged to copy this file and tailor the styling /
- * markup to their site — the data contract is what matters, not the markup.
- *
- * Behavior pinned by the contract:
- *   - SINGLE   → renders as <input type="radio">,    max picks = 1
- *   - MULTIPLE → renders as <input type="checkbox">, picks bounded by min..max
- *   - effectiveMax === 0 → group is hidden entirely (variant-disable convention)
- *   - available === false → modifier is disabled with "Sold out" badge
- *   - free counter shows "{used} of {freeQuantity} free" when freeQuantity > 0
- *   - defaultModifierIds + isDefault drive first-render checked state
- *   - client-side guards mirror min/max (UX); the SERVER is authoritative — wire
- *     `MODIFIER_VALIDATION_FAILED` errors back to the user when add-to-cart fails
- *
- * The price-delta side: this component does NOT compute totals. The server
- * runs the free-allocation policy and returns the line's `unitPrice` /
- * `modifiers[]` / `modifiersTotal` snapshot — render those after add-to-cart.
- */
-
-import type { Modifier, ModifierGroup } from 'brainerce';
-
-// The pure selection logic (defaults, validation, wire-format adapter) lives
-// in core (zero markup) so that `core/hooks/use-product-page` never imports
-// from `ui/`. Re-exported here for backward compatibility with existing imports.
-export {
-  buildInitialSelections,
-  toModifierSelections,
-  validateSelections,
-} from '@/core/lib/product-options';
-
-interface ModifierGroupSelectorProps {
-  /**
-   * Effective group as returned by `GET /products/:id` (overrides already
-   * applied — `min`, `max`, `freeQuantity`, etc. are the values the server
-   * will validate against for the active variant).
-   */
-  group: ModifierGroup;
-  /** Currently-selected modifier IDs in click-order. */
-  value: string[];
-  onChange: (next: string[]) => void;
-  /** Disable all controls (e.g., while add-to-cart is in flight). */
-  disabled?: boolean;
-}
-
-export function ModifierGroupSelector({
-  group,
-  value,
-  onChange,
-  disabled = false,
-}: ModifierGroupSelectorProps) {
-  // PRD §7.2.2: variant-disable convention — group with effectiveMax=0 is hidden.
-  if (group.max === 0) return null;
-
-  const isSingle = group.selectionType === 'SINGLE';
-  // Client-side bound — server is authoritative.
-  const effectiveMax = isSingle ? 1 : (group.max ?? Infinity);
-
-  const handleToggle = (modifierId: string, checked: boolean) => {
-    if (disabled) return;
-
-    if (isSingle) {
-      // Radio behavior: replace the selection.
-      onChange(checked ? [modifierId] : []);
-      return;
-    }
-
-    if (checked) {
-      if (value.length >= effectiveMax) return; // would exceed max — ignore the click
-      if (value.includes(modifierId)) return;
-      onChange([...value, modifierId]);
-    } else {
-      onChange(value.filter((id) => id !== modifierId));
-    }
-  };
-
-  const sortedModifiers = [...group.modifiers].sort((a, b) => a.position - b.position);
-
-  // Counter: how many of the picked items are within the "free" window.
-  const usedFreeSlots = Math.min(value.length, group.freeQuantity);
-  const showFreeCounter = group.freeQuantity > 0;
-
-  return (
-    <fieldset className="modifier-group">
-      <legend className="modifier-group__legend">
-        <span className="modifier-group__name">{group.name}</span>
-        {group.required && <span className="modifier-group__required"> *</span>}
-        <span className="modifier-group__rules">{ruleSummary(group)}</span>
-      </legend>
-
-      {group.description && <p className="modifier-group__description">{group.description}</p>}
-
-      {showFreeCounter && (
-        <p className="modifier-group__counter" aria-live="polite">
-          {usedFreeSlots} of {group.freeQuantity} free
-        </p>
-      )}
-
-      <ul className="modifier-group__options">
-        {sortedModifiers.map((modifier) => {
-          const isChecked = value.includes(modifier.id);
-          const isAtCap = !isSingle && !isChecked && value.length >= effectiveMax;
-          const isDisabled = disabled || !modifier.available || isAtCap;
-
-          return (
-            <li key={modifier.id} className="modifier-option">
-              <label className="modifier-option__label">
-                <input
-                  type={isSingle ? 'radio' : 'checkbox'}
-                  name={`modifier-group-${group.id}`}
-                  value={modifier.id}
-                  checked={isChecked}
-                  disabled={isDisabled}
-                  onChange={(e) => handleToggle(modifier.id, e.target.checked)}
-                  className="modifier-option__input"
-                />
-                <span className="modifier-option__name">{modifier.name}</span>
-                <ModifierPriceLabel modifier={modifier} />
-                {!modifier.available && (
-                  <span
-                    className="modifier-option__badge modifier-option__badge--soldout"
-                    aria-label="Sold out"
-                  >
-                    Sold out
-                  </span>
-                )}
-              </label>
-              {modifier.description && (
-                <p className="modifier-option__description">{modifier.description}</p>
-              )}
-            </li>
-          );
-        })}
-      </ul>
-    </fieldset>
-  );
-}
-
-/**
- * Renders the modifier's price contribution next to its name.
- *
- * Negative deltas display with a leading minus sign (downsell modifiers per
- * PRD §6.3.4); zero-delta modifiers render nothing — silence is the right
- * affordance for a free option.
- */
-function ModifierPriceLabel({ modifier }: { modifier: Modifier }) {
-  const delta = parseFloat(modifier.priceDelta);
-  if (Number.isNaN(delta) || delta === 0) return null;
-  const sign = delta > 0 ? '+' : '';
-  return (
-    <span className="modifier-option__price">
-      {sign}
-      {modifier.priceDelta}
-    </span>
-  );
-}
-
-function ruleSummary(group: ModifierGroup): string {
-  const parts: string[] = [];
-  if (group.selectionType === 'SINGLE') {
-    parts.push('Pick one');
-  } else if (group.max != null) {
-    if (group.min === 0) parts.push(`Up to ${group.max}`);
-    else if (group.min === group.max) parts.push(`Pick exactly ${group.min}`);
-    else parts.push(`${group.min}–${group.max}`);
-  } else if (group.min > 0) {
-    parts.push(`At least ${group.min}`);
-  }
-  return parts.length ? `(${parts.join(', ')})` : '';
-}
+'use client';
+
+/**
+ * <ModifierGroupSelector> — reference React component for storefront authors
+ * (PRD §8.4).
+ *
+ * Drop-in renderer for a single modifier group (toppings, sauce, bread type, …).
+ * Storefront authors are encouraged to copy this file and tailor the styling /
+ * markup to their site — the data contract is what matters, not the markup.
+ *
+ * Behavior pinned by the contract:
+ *   - SINGLE   → renders as a radio group,   max picks = 1
+ *   - MULTIPLE → renders as checkboxes,      picks bounded by min..max
+ *   - effectiveMax === 0 → group is hidden entirely (variant-disable convention)
+ *   - available === false → modifier is disabled with "Sold out" badge
+ *   - free counter shows "{used} of {freeQuantity} free" when freeQuantity > 0
+ *   - defaultModifierIds + isDefault drive first-render checked state
+ *   - client-side guards mirror min/max (UX); the SERVER is authoritative — wire
+ *     `MODIFIER_VALIDATION_FAILED` errors back to the user when add-to-cart fails
+ *
+ * The price-delta side: this component does NOT compute totals. The server
+ * runs the free-allocation policy and returns the line's `unitPrice` /
+ * `modifiers[]` / `modifiersTotal` snapshot — render those after add-to-cart.
+ */
+
+import type { Modifier, ModifierGroup } from 'brainerce';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+
+// The pure selection logic (defaults, validation, wire-format adapter) lives
+// in core (zero markup) so that `core/hooks/use-product-page` never imports
+// from `ui/`. Re-exported here for backward compatibility with existing imports.
+export {
+  buildInitialSelections,
+  toModifierSelections,
+  validateSelections,
+} from '@/core/lib/product-options';
+
+interface ModifierGroupSelectorProps {
+  /**
+   * Effective group as returned by `GET /products/:id` (overrides already
+   * applied — `min`, `max`, `freeQuantity`, etc. are the values the server
+   * will validate against for the active variant).
+   */
+  group: ModifierGroup;
+  /** Currently-selected modifier IDs in click-order. */
+  value: string[];
+  onChange: (next: string[]) => void;
+  /** Disable all controls (e.g., while add-to-cart is in flight). */
+  disabled?: boolean;
+}
+
+export function ModifierGroupSelector({
+  group,
+  value,
+  onChange,
+  disabled = false,
+}: ModifierGroupSelectorProps) {
+  // PRD §7.2.2: variant-disable convention — group with effectiveMax=0 is hidden.
+  if (group.max === 0) return null;
+
+  const isSingle = group.selectionType === 'SINGLE';
+  // Client-side bound — server is authoritative.
+  const effectiveMax = isSingle ? 1 : (group.max ?? Infinity);
+
+  const handleToggle = (modifierId: string, checked: boolean) => {
+    if (disabled) return;
+
+    if (isSingle) {
+      // Radio behavior: replace the selection.
+      onChange(checked ? [modifierId] : []);
+      return;
+    }
+
+    if (checked) {
+      if (value.length >= effectiveMax) return; // would exceed max — ignore the click
+      if (value.includes(modifierId)) return;
+      onChange([...value, modifierId]);
+    } else {
+      onChange(value.filter((id) => id !== modifierId));
+    }
+  };
+
+  const sortedModifiers = [...group.modifiers].sort((a, b) => a.position - b.position);
+
+  // Counter: how many of the picked items are within the "free" window.
+  const usedFreeSlots = Math.min(value.length, group.freeQuantity);
+  const showFreeCounter = group.freeQuantity > 0;
+
+  const renderOption = (modifier: Modifier) => {
+    const isChecked = value.includes(modifier.id);
+    const isAtCap = !isSingle && !isChecked && value.length >= effectiveMax;
+    const isDisabled = disabled || !modifier.available || isAtCap;
+
+    return (
+      <li key={modifier.id} className="modifier-option">
+        <Label className="modifier-option__label flex cursor-pointer items-center gap-2 font-normal">
+          {isSingle ? (
+            <RadioGroupItem
+              value={modifier.id}
+              disabled={isDisabled}
+              className="modifier-option__input"
+            />
+          ) : (
+            <Checkbox
+              checked={isChecked}
+              disabled={isDisabled}
+              onCheckedChange={(checked) => handleToggle(modifier.id, checked === true)}
+              className="modifier-option__input"
+            />
+          )}
+          <span className="modifier-option__name text-sm">{modifier.name}</span>
+          <ModifierPriceLabel modifier={modifier} />
+          {!modifier.available && (
+            <Badge
+              variant="secondary"
+              className="modifier-option__badge modifier-option__badge--soldout font-normal"
+              aria-label="Sold out"
+            >
+              Sold out
+            </Badge>
+          )}
+        </Label>
+        {modifier.description && (
+          <p className="modifier-option__description text-muted-foreground ms-6 text-xs">
+            {modifier.description}
+          </p>
+        )}
+      </li>
+    );
+  };
+
+  return (
+    <fieldset className="modifier-group">
+      <legend className="modifier-group__legend text-sm">
+        <span className="modifier-group__name font-medium">{group.name}</span>
+        {group.required && <span className="modifier-group__required text-destructive"> *</span>}
+        <span className="modifier-group__rules text-muted-foreground"> {ruleSummary(group)}</span>
+      </legend>
+
+      {group.description && (
+        <p className="modifier-group__description text-muted-foreground text-xs">
+          {group.description}
+        </p>
+      )}
+
+      {showFreeCounter && (
+        <p className="modifier-group__counter text-muted-foreground text-xs" aria-live="polite">
+          {usedFreeSlots} of {group.freeQuantity} free
+        </p>
+      )}
+
+      {isSingle ? (
+        <RadioGroup
+          value={value[0] ?? ''}
+          onValueChange={(v) => onChange([v])}
+          disabled={disabled}
+          asChild
+        >
+          <ul className="modifier-group__options mt-2 gap-2">
+            {sortedModifiers.map(renderOption)}
+          </ul>
+        </RadioGroup>
+      ) : (
+        <ul className="modifier-group__options mt-2 grid gap-2">
+          {sortedModifiers.map(renderOption)}
+        </ul>
+      )}
+    </fieldset>
+  );
+}
+
+/**
+ * Renders the modifier's price contribution next to its name.
+ *
+ * Negative deltas display with a leading minus sign (downsell modifiers per
+ * PRD §6.3.4); zero-delta modifiers render nothing — silence is the right
+ * affordance for a free option.
+ */
+function ModifierPriceLabel({ modifier }: { modifier: Modifier }) {
+  const delta = parseFloat(modifier.priceDelta);
+  if (Number.isNaN(delta) || delta === 0) return null;
+  const sign = delta > 0 ? '+' : '';
+  return (
+    <span className="modifier-option__price text-muted-foreground text-xs">
+      {sign}
+      {modifier.priceDelta}
+    </span>
+  );
+}
+
+function ruleSummary(group: ModifierGroup): string {
+  const parts: string[] = [];
+  if (group.selectionType === 'SINGLE') {
+    parts.push('Pick one');
+  } else if (group.max != null) {
+    if (group.min === 0) parts.push(`Up to ${group.max}`);
+    else if (group.min === group.max) parts.push(`Pick exactly ${group.min}`);
+    else parts.push(`${group.min}–${group.max}`);
+  } else if (group.min > 0) {
+    parts.push(`At least ${group.min}`);
+  }
+  return parts.length ? `(${parts.join(', ')})` : '';
+}

package/templates/nextjs/base/src/ui/product/price-display.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { formatPrice } from 'brainerce';
+import { Badge } from '@/components/ui/badge';
 import { useCurrency } from '@/core/lib/use-currency';
 import { cn } from '@/core/lib/utils';
 
@@ -46,9 +47,9 @@ export function PriceDisplay({
             {formatPrice(basePrice, { currency: currencyCode }) as string}
           </span>
           {discountPercent > 0 && (
-            <span className="bg-destructive text-destructive-foreground rounded px-1.5 py-0.5 text-xs font-medium">
+            <Badge variant="destructive" className="rounded px-1.5 py-0.5 font-medium">
               -{discountPercent}%
-            </span>
+            </Badge>
           )}
         </>
       ) : (