create-brainerce-store 1.62.0 → 1.63.0

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

@@ -1,42 +1,42 @@
-'use client';
-
-import type { Product } from 'brainerce';
-import { Link } from '@/core/lib/navigation';
-import { useTranslations } from '@/core/lib/translations';
-import { ProductCard } from '@/ui/product/product-card';
-import { cn } from '@/core/lib/utils';
-import { IconSparkle } from '@/ui/shared/icons';
-
-interface ProductGridProps {
-  products: Product[];
-  className?: string;
-}
-
-export function ProductGrid({ products, className }: ProductGridProps) {
-  const t = useTranslations('products');
-  const tc = useTranslations('common');
-
-  // Designed empty state — never a bare sentence in blank space.
-  if (products.length === 0) {
-    return (
-      <div className="card mx-auto flex max-w-md flex-col items-center gap-3 px-8 py-14 text-center">
-        <span className="bg-secondary text-primary flex h-14 w-14 items-center justify-center rounded-full">
-          <IconSparkle size={28} />
-        </span>
-        <p className="font-display text-foreground text-xl">{t('emptyTitle')}</p>
-        <p className="text-muted-foreground text-sm">{t('emptyBody')}</p>
-        <Link href="/products" className="btn-soft btn-sm mt-2">
-          {tc('viewAll')}
-        </Link>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn('grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4 lg:gap-6', className)}>
-      {products.map((product) => (
-        <ProductCard key={product.id} product={product} />
-      ))}
-    </div>
-  );
-}
+'use client';
+
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { ProductCard } from '@/ui/product/product-card';
+import { cn } from '@/core/lib/utils';
+import { IconSparkle } from '@/ui/shared/icons';
+
+interface ProductGridProps {
+  products: Product[];
+  className?: string;
+}
+
+export function ProductGrid({ products, className }: ProductGridProps) {
+  const t = useTranslations('products');
+  const tc = useTranslations('common');
+
+  // Designed empty state — never a bare sentence in blank space.
+  if (products.length === 0) {
+    return (
+      <div className="card mx-auto flex max-w-md flex-col items-center gap-3 px-8 py-14 text-center">
+        <span className="bg-secondary text-primary flex h-14 w-14 items-center justify-center rounded-full">
+          <IconSparkle size={28} />
+        </span>
+        <p className="font-display text-foreground text-xl">{t('emptyTitle')}</p>
+        <p className="text-muted-foreground text-sm">{t('emptyBody')}</p>
+        <Link href="/products" className="btn-soft btn-sm mt-2">
+          {tc('viewAll')}
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4 lg:gap-6', className)}>
+      {products.map((product) => (
+        <ProductCard key={product.id} product={product} />
+      ))}
+    </div>
+  );
+}

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

@@ -1,260 +1,260 @@
-'use client';
-
-import {
-  useProductListing,
-  sortOptions,
-  type CategoryNode,
-} from '@/core/hooks/use-product-listing';
-import { ProductGrid } from '@/ui/product/product-grid';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { SelectMenu, type SelectMenuOption } from '@/ui/shared/select-menu';
-import { useTranslations } from '@/core/lib/translations';
-
-/**
- * Flatten the category tree into indented options so nested categories stay
- * selectable in the styled dropdown.
- */
-function flattenCategories(items: CategoryNode[], depth = 0): SelectMenuOption[] {
-  return items.flatMap((node) => [
-    { value: node.id, label: `${'— '.repeat(depth)}${node.name}` },
-    ...flattenCategories(node.children, depth + 1),
-  ]);
-}
-
-/** Shimmer skeleton card shown while the grid loads — no layout jump. */
-function SkeletonGrid() {
-  return (
-    <div
-      className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4 lg:gap-6"
-      role="status"
-      aria-label="Loading"
-    >
-      {Array.from({ length: 8 }).map((_, i) => (
-        <div key={i} className="card overflow-hidden">
-          <div className="aspect-square animate-pulse bg-secondary" />
-          <div className="space-y-2.5 p-4">
-            <div className="h-4 w-3/4 animate-pulse rounded bg-secondary" />
-            <div className="h-4 w-1/3 animate-pulse rounded bg-secondary" />
-            <div className="mt-2 h-9 w-full animate-pulse rounded-full bg-secondary" />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-/**
- * Product listing page: page header band, filter/sort toolbar, 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 (
-    <section>
-      {/* Page header band */}
-      <header className="wash-hero relative overflow-hidden">
-        <div className="container-page py-10 text-center lg:py-14">
-          <h1 className="text-4xl sm:text-5xl">
-            {searchQuery ? `${t('searchPrefix')} "${searchQuery}"` : t('allProducts')}
-          </h1>
-          <p className="mx-auto mt-3 max-w-xl text-muted-foreground">
-            {searchQuery ? (
-              !loading && (
-                <>
-                  {total} {total === 1 ? tc('product') : tc('products')} {tc('found')}
-                </>
-              )
-            ) : (
-              t('listingSubtitle')
-            )}
-          </p>
-        </div>
-      </header>
-
-      <div className="container-page pb-16 pt-8 lg:pb-20">
-        {/* Filters + sort toolbar */}
-        <div className="mb-8 flex flex-wrap items-center gap-3">
-          {/* Category filter — nested tree flattened into a select */}
-          {categories.length > 0 && (
-            <SelectMenu
-              value={categoryId}
-              options={[{ value: '', label: tc('all') }, ...flattenCategories(categories)]}
-              onChange={(v) => (v ? handleCategorySelect(v) : updateParam('category', ''))}
-              ariaLabel={t('filtersLabel')}
-            />
-          )}
-
-          {/* Brand Filter */}
-          {brands.length > 0 && (
-            <SelectMenu
-              value={brandId}
-              options={[
-                { value: '', label: t('allBrands') },
-                ...brands.map((b) => ({ value: b.id, label: b.name })),
-              ]}
-              onChange={(v) => updateParam('brand', v)}
-              ariaLabel={t('allBrands')}
-            />
-          )}
-
-          {/* Tag Filter */}
-          {tags.length > 0 && (
-            <SelectMenu
-              value={tagId}
-              options={[
-                { value: '', label: t('allTags') },
-                ...tags.map((tg) => ({ value: tg.id, label: tg.name })),
-              ]}
-              onChange={(v) => updateParam('tag', v)}
-              ariaLabel={t('allTags')}
-            />
-          )}
-
-          {/* Custom-field (metafield) facets — rendered per definition type.
-              Only definitions flagged `filterable: true` and published to
-              this sales channel reach this list. */}
-          {metafieldDefs.map((def) => {
-            const selected = getSelectedMetafieldValues(def.key);
-
-            if (def.type === 'BOOLEAN') {
-              const isOn = selected.includes('true');
-              return (
-                <label
-                  key={def.id}
-                  className="inline-flex h-10 cursor-pointer items-center gap-2 rounded-full border bg-background px-4 text-sm font-medium"
-                >
-                  <input
-                    type="checkbox"
-                    checked={isOn}
-                    onChange={(e) => setMetafieldValue(def.key, e.target.checked ? ['true'] : [])}
-                    className="h-4 w-4 accent-primary"
-                  />
-                  {def.name}
-                </label>
-              );
-            }
-
-            if (def.type === 'SELECT') {
-              return (
-                <SelectMenu
-                  key={def.id}
-                  value={selected[0] || ''}
-                  options={[
-                    { value: '', label: `${tc('all')} ${def.name}` },
-                    ...(def.enumValues || []).map((v) => ({
-                      value: v.value,
-                      label: v.label || v.value,
-                    })),
-                  ]}
-                  onChange={(v) => setMetafieldValue(def.key, v ? [v] : [])}
-                  ariaLabel={def.name}
-                />
-              );
-            }
-
-            // MULTI_SELECT — checkbox toggles. Each click adds/removes one value.
-            return (
-              <fieldset
-                key={def.id}
-                className="inline-flex flex-wrap items-center gap-2 rounded-full border bg-background px-4 py-2"
-              >
-                <legend className="sr-only">{def.name}</legend>
-                <span className="text-sm font-medium text-muted-foreground">{def.name}:</span>
-                {(def.enumValues || []).map((v) => {
-                  const active = selected.includes(v.value);
-                  return (
-                    <label
-                      key={v.value}
-                      className="inline-flex cursor-pointer items-center gap-1.5 text-sm"
-                    >
-                      <input
-                        type="checkbox"
-                        checked={active}
-                        onChange={() =>
-                          setMetafieldValue(
-                            def.key,
-                            active ? selected.filter((s) => s !== v.value) : [...selected, v.value]
-                          )
-                        }
-                        className="h-4 w-4 accent-primary"
-                      />
-                      {v.label || v.value}
-                    </label>
-                  );
-                })}
-              </fieldset>
-            );
-          })}
-
-          {/* Result count + sort — pushed to the end of the toolbar */}
-          <div className="ms-auto flex items-center gap-3">
-            {!loading && (
-              <p className="hidden text-sm text-muted-foreground sm:block">
-                {total} {total === 1 ? tc('product') : tc('products')}
-              </p>
-            )}
-            <SelectMenu
-              value={String(sortIndex)}
-              options={sortOptions.map((opt, idx) => ({
-                value: String(idx),
-                label: t(opt.labelKey),
-              }))}
-              onChange={(v) => updateParam('sort', v)}
-              ariaLabel={tc('sortBy')}
-            />
-          </div>
-        </div>
-
-        {/* Products Grid */}
-        {loading ? (
-          <SkeletonGrid />
-        ) : (
-          <>
-            <ProductGrid products={products} />
-
-            {/* Load More */}
-            {page < totalPages && (
-              <div className="mt-10 flex justify-center">
-                <button
-                  type="button"
-                  onClick={handleLoadMore}
-                  disabled={loadingMore}
-                  className="btn-outline btn-md min-w-44"
-                >
-                  {loadingMore ? <LoadingSpinner size="sm" /> : t('loadMore')}
-                </button>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </section>
-  );
-}
+'use client';
+
+import {
+  useProductListing,
+  sortOptions,
+  type CategoryNode,
+} from '@/core/hooks/use-product-listing';
+import { ProductGrid } from '@/ui/product/product-grid';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { SelectMenu, type SelectMenuOption } from '@/ui/shared/select-menu';
+import { useTranslations } from '@/core/lib/translations';
+
+/**
+ * Flatten the category tree into indented options so nested categories stay
+ * selectable in the styled dropdown.
+ */
+function flattenCategories(items: CategoryNode[], depth = 0): SelectMenuOption[] {
+  return items.flatMap((node) => [
+    { value: node.id, label: `${'— '.repeat(depth)}${node.name}` },
+    ...flattenCategories(node.children, depth + 1),
+  ]);
+}
+
+/** Shimmer skeleton card shown while the grid loads — no layout jump. */
+function SkeletonGrid() {
+  return (
+    <div
+      className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4 lg:gap-6"
+      role="status"
+      aria-label="Loading"
+    >
+      {Array.from({ length: 8 }).map((_, i) => (
+        <div key={i} className="card overflow-hidden">
+          <div className="aspect-square animate-pulse bg-secondary" />
+          <div className="space-y-2.5 p-4">
+            <div className="h-4 w-3/4 animate-pulse rounded bg-secondary" />
+            <div className="h-4 w-1/3 animate-pulse rounded bg-secondary" />
+            <div className="mt-2 h-9 w-full animate-pulse rounded-full bg-secondary" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Product listing page: page header band, filter/sort toolbar, 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 (
+    <section>
+      {/* Page header band */}
+      <header className="wash-hero relative overflow-hidden">
+        <div className="container-page py-10 text-center lg:py-14">
+          <h1 className="text-4xl sm:text-5xl">
+            {searchQuery ? `${t('searchPrefix')} "${searchQuery}"` : t('allProducts')}
+          </h1>
+          <p className="mx-auto mt-3 max-w-xl text-muted-foreground">
+            {searchQuery ? (
+              !loading && (
+                <>
+                  {total} {total === 1 ? tc('product') : tc('products')} {tc('found')}
+                </>
+              )
+            ) : (
+              t('listingSubtitle')
+            )}
+          </p>
+        </div>
+      </header>
+
+      <div className="container-page pb-16 pt-8 lg:pb-20">
+        {/* Filters + sort toolbar */}
+        <div className="mb-8 flex flex-wrap items-center gap-3">
+          {/* Category filter — nested tree flattened into a select */}
+          {categories.length > 0 && (
+            <SelectMenu
+              value={categoryId}
+              options={[{ value: '', label: tc('all') }, ...flattenCategories(categories)]}
+              onChange={(v) => (v ? handleCategorySelect(v) : updateParam('category', ''))}
+              ariaLabel={t('filtersLabel')}
+            />
+          )}
+
+          {/* Brand Filter */}
+          {brands.length > 0 && (
+            <SelectMenu
+              value={brandId}
+              options={[
+                { value: '', label: t('allBrands') },
+                ...brands.map((b) => ({ value: b.id, label: b.name })),
+              ]}
+              onChange={(v) => updateParam('brand', v)}
+              ariaLabel={t('allBrands')}
+            />
+          )}
+
+          {/* Tag Filter */}
+          {tags.length > 0 && (
+            <SelectMenu
+              value={tagId}
+              options={[
+                { value: '', label: t('allTags') },
+                ...tags.map((tg) => ({ value: tg.id, label: tg.name })),
+              ]}
+              onChange={(v) => updateParam('tag', v)}
+              ariaLabel={t('allTags')}
+            />
+          )}
+
+          {/* Custom-field (metafield) facets — rendered per definition type.
+              Only definitions flagged `filterable: true` and published to
+              this sales channel reach this list. */}
+          {metafieldDefs.map((def) => {
+            const selected = getSelectedMetafieldValues(def.key);
+
+            if (def.type === 'BOOLEAN') {
+              const isOn = selected.includes('true');
+              return (
+                <label
+                  key={def.id}
+                  className="inline-flex h-10 cursor-pointer items-center gap-2 rounded-full border bg-background px-4 text-sm font-medium"
+                >
+                  <input
+                    type="checkbox"
+                    checked={isOn}
+                    onChange={(e) => setMetafieldValue(def.key, e.target.checked ? ['true'] : [])}
+                    className="h-4 w-4 accent-primary"
+                  />
+                  {def.name}
+                </label>
+              );
+            }
+
+            if (def.type === 'SELECT') {
+              return (
+                <SelectMenu
+                  key={def.id}
+                  value={selected[0] || ''}
+                  options={[
+                    { value: '', label: `${tc('all')} ${def.name}` },
+                    ...(def.enumValues || []).map((v) => ({
+                      value: v.value,
+                      label: v.label || v.value,
+                    })),
+                  ]}
+                  onChange={(v) => setMetafieldValue(def.key, v ? [v] : [])}
+                  ariaLabel={def.name}
+                />
+              );
+            }
+
+            // MULTI_SELECT — checkbox toggles. Each click adds/removes one value.
+            return (
+              <fieldset
+                key={def.id}
+                className="inline-flex flex-wrap items-center gap-2 rounded-full border bg-background px-4 py-2"
+              >
+                <legend className="sr-only">{def.name}</legend>
+                <span className="text-sm font-medium text-muted-foreground">{def.name}:</span>
+                {(def.enumValues || []).map((v) => {
+                  const active = selected.includes(v.value);
+                  return (
+                    <label
+                      key={v.value}
+                      className="inline-flex cursor-pointer items-center gap-1.5 text-sm"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={active}
+                        onChange={() =>
+                          setMetafieldValue(
+                            def.key,
+                            active ? selected.filter((s) => s !== v.value) : [...selected, v.value]
+                          )
+                        }
+                        className="h-4 w-4 accent-primary"
+                      />
+                      {v.label || v.value}
+                    </label>
+                  );
+                })}
+              </fieldset>
+            );
+          })}
+
+          {/* Result count + sort — pushed to the end of the toolbar */}
+          <div className="ms-auto flex items-center gap-3">
+            {!loading && (
+              <p className="hidden text-sm text-muted-foreground sm:block">
+                {total} {total === 1 ? tc('product') : tc('products')}
+              </p>
+            )}
+            <SelectMenu
+              value={String(sortIndex)}
+              options={sortOptions.map((opt, idx) => ({
+                value: String(idx),
+                label: t(opt.labelKey),
+              }))}
+              onChange={(v) => updateParam('sort', v)}
+              ariaLabel={tc('sortBy')}
+            />
+          </div>
+        </div>
+
+        {/* Products Grid */}
+        {loading ? (
+          <SkeletonGrid />
+        ) : (
+          <>
+            <ProductGrid products={products} />
+
+            {/* Load More */}
+            {page < totalPages && (
+              <div className="mt-10 flex justify-center">
+                <button
+                  type="button"
+                  onClick={handleLoadMore}
+                  disabled={loadingMore}
+                  className="btn-outline btn-md min-w-44"
+                >
+                  {loadingMore ? <LoadingSpinner size="sm" /> : t('loadMore')}
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </section>
+  );
+}