create-brainerce-store 1.51.0 → 1.52.0

package/templates/nextjs/base/src/ui/product/product-listing.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState, useRef } from 'react';
+import { ChevronDown } from 'lucide-react';
 import {
   useProductListing,
   sortOptions,
@@ -9,27 +10,22 @@ import {
 } from '@/core/hooks/use-product-listing';
 import { ProductGrid } from '@/ui/product/product-grid';
 import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 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>
-  );
-}
+/** Radix Select items can't carry an empty-string value, so "no filter"
+ *  round-trips through this sentinel and is written back as ''. */
+const ALL = '__all__';
 
 /** Recursive dropdown items for nested categories */
 function CategoryDropdownItems({
@@ -146,11 +142,14 @@ function CategoryChip({
             {'·'} {selectedChildName}
           </span>
         )}
-        <ChevronDown className={cn('ms-0.5 transition-transform', open && 'rotate-180')} />
+        <ChevronDown
+          className={cn('ms-0.5 h-3 w-3 transition-transform', open && 'rotate-180')}
+          aria-hidden="true"
+        />
       </button>
 
       {open && (
-        <div className="bg-background border-border absolute start-0 top-full z-50 mt-1 min-w-[180px] overflow-hidden rounded-lg border shadow-lg">
+        <div className="bg-popover text-popover-foreground border-border absolute start-0 top-full z-50 mt-1 min-w-[180px] overflow-hidden rounded-lg border shadow-lg">
           {/* "All in [category]" option */}
           <button
             onClick={() => {
@@ -258,34 +257,42 @@ export function ProductListing() {
         <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-background text-foreground focus:ring-primary/20 focus:border-primary h-9 rounded border px-3 text-sm focus:outline-none focus:ring-2"
+            <Select
+              value={brandId || ALL}
+              onValueChange={(v) => updateParam('brand', v === ALL ? '' : v)}
             >
-              <option value="">{t('allBrands')}</option>
-              {brands.map((b) => (
-                <option key={b.id} value={b.id}>
-                  {b.name}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger className="h-9 w-auto min-w-[8rem] rounded" aria-label={t('allBrands')}>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ALL}>{t('allBrands')}</SelectItem>
+                {brands.map((b) => (
+                  <SelectItem key={b.id} value={b.id}>
+                    {b.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           )}
 
           {/* Tag Filter */}
           {tags.length > 0 && (
-            <select
-              value={tagId}
-              onChange={(e) => updateParam('tag', e.target.value)}
-              className="border-border bg-background text-foreground focus:ring-primary/20 focus:border-primary h-9 rounded border px-3 text-sm focus:outline-none focus:ring-2"
+            <Select
+              value={tagId || ALL}
+              onValueChange={(v) => updateParam('tag', v === ALL ? '' : v)}
             >
-              <option value="">{t('allTags')}</option>
-              {tags.map((tg) => (
-                <option key={tg.id} value={tg.id}>
-                  {tg.name}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger className="h-9 w-auto min-w-[8rem] rounded" aria-label={t('allTags')}>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ALL}>{t('allTags')}</SelectItem>
+                {tags.map((tg) => (
+                  <SelectItem key={tg.id} value={tg.id}>
+                    {tg.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           )}
 
           {/* Custom-field (metafield) facets — rendered per definition type.
@@ -299,39 +306,43 @@ export function ProductListing() {
             if (def.type === 'BOOLEAN') {
               const isOn = selected.includes('true');
               return (
-                <label
+                <Label
                   key={def.id}
-                  className="border-border text-foreground hover:border-primary inline-flex h-9 cursor-pointer items-center gap-2 rounded border px-3 text-sm transition-colors"
+                  className="border-border text-foreground hover:border-primary inline-flex h-9 cursor-pointer items-center gap-2 rounded border px-3 text-sm font-normal transition-colors"
                 >
-                  <input
-                    type="checkbox"
+                  <Checkbox
                     checked={isOn}
-                    onChange={(e) => setMetafieldValue(def.key, e.target.checked ? ['true'] : [])}
-                    className="accent-primary h-4 w-4"
+                    onCheckedChange={(checked) =>
+                      setMetafieldValue(def.key, checked === true ? ['true'] : [])
+                    }
                   />
                   {def.name}
-                </label>
+                </Label>
               );
             }
 
             if (def.type === 'SELECT') {
               return (
-                <select
+                <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-background text-foreground focus:ring-primary/20 focus:border-primary h-9 rounded border px-3 text-sm focus:outline-none focus:ring-2"
+                  value={selected[0] || ALL}
+                  onValueChange={(v) => setMetafieldValue(def.key, v === ALL ? [] : [v])}
                 >
-                  <option value="">{`${tc('all')} ${def.name}`}</option>
-                  {(def.enumValues || []).map((v) => (
-                    <option key={v.value} value={v.value}>
-                      {v.label || v.value}
-                    </option>
-                  ))}
-                </select>
+                  <SelectTrigger
+                    className="h-9 w-auto min-w-[8rem] rounded"
+                    aria-label={def.name}
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value={ALL}>{`${tc('all')} ${def.name}`}</SelectItem>
+                    {(def.enumValues || []).map((v) => (
+                      <SelectItem key={v.value} value={v.value}>
+                        {v.label || v.value}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               );
             }
 
@@ -372,21 +383,27 @@ export function ProductListing() {
 
           {/* Sort */}
           <div className="flex items-center gap-2 sm:ms-auto">
-            <label htmlFor="sort" className="text-muted-foreground whitespace-nowrap text-sm">
+            <Label
+              htmlFor="sort"
+              className="text-muted-foreground whitespace-nowrap font-normal"
+            >
               {tc('sortBy')}
-            </label>
-            <select
-              id="sort"
-              value={sortIndex}
-              onChange={(e) => updateParam('sort', e.target.value)}
-              className="border-border bg-background text-foreground focus:ring-primary/20 focus:border-primary h-9 rounded border px-3 text-sm focus:outline-none focus:ring-2"
+            </Label>
+            <Select
+              value={String(sortIndex)}
+              onValueChange={(v) => updateParam('sort', v)}
             >
-              {sortOptions.map((opt, idx) => (
-                <option key={idx} value={idx}>
-                  {t(opt.labelKey)}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger id="sort" className="h-9 w-auto min-w-[8rem] rounded">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {sortOptions.map((opt, idx) => (
+                  <SelectItem key={idx} value={String(idx)}>
+                    {t(opt.labelKey)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         </div>
       </div>
@@ -403,10 +420,10 @@ export function ProductListing() {
           {/* Load More */}
           {page < totalPages && (
             <div className="mt-10 flex justify-center">
-              <button
+              <Button
                 onClick={handleLoadMore}
                 disabled={loadingMore}
-                className="bg-primary text-primary-foreground inline-flex items-center gap-2 rounded px-6 py-2.5 font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
+                className="rounded px-6 py-2.5"
               >
                 {loadingMore ? (
                   <>
@@ -419,7 +436,7 @@ export function ProductListing() {
                 ) : (
                   t('loadMore')
                 )}
-              </button>
+              </Button>
             </div>
           )}
         </>

package/templates/nextjs/base/src/ui/product/recommendation-section.tsx

@@ -1,107 +1,102 @@
-'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(
-        'border-border bg-background group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
-        className
-      )}
-    >
-      <div className="bg-muted relative aspect-square overflow-hidden">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={item.name}
-            fill
-            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
-            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-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 p-3">
-        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
-          {item.name}
-        </h3>
-        <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
-      </div>
-    </Link>
-  );
-}
-
-interface RecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <div className={cn('', className)}>
-      <h2 className="text-foreground mb-4 text-xl font-semibold">{title}</h2>
-      <div className="grid grid-cols-2 gap-3 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 mb-4 text-lg font-semibold">{title}</h2>
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-        {items.map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { Image as ImageIcon } from 'lucide-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(
+        // Card-equivalent shell (bg-card + border + rounded-lg) as a link —
+        // the whole recommendation tile is clickable.
+        'bg-card text-card-foreground group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
+        className
+      )}
+    >
+      <div className="bg-muted relative aspect-square overflow-hidden">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={item.name}
+            fill
+            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+            <ImageIcon className="h-10 w-10" strokeWidth={1.5} aria-hidden="true" />
+          </div>
+        )}
+      </div>
+      <div className="space-y-1.5 p-3">
+        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
+          {item.name}
+        </h3>
+        <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
+      </div>
+    </Link>
+  );
+}
+
+interface RecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className={cn('', className)}>
+      <h2 className="text-foreground mb-4 text-xl font-semibold">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 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 mb-4 text-lg font-semibold">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}