create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/ui-canvas/product/product-grid.tsx

@@ -1,27 +1,27 @@
-'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 <p>{t('noProducts')}</p>;
-  }
-
-  return (
-    <div className={cn('grid grid-cols-2 gap-4 lg:grid-cols-4', className)}>
-      {/* DESIGN ME — product grid: lays out ProductCard units; products arrive as a prop from the listing/home hooks. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      {products.map((product) => (
-        <ProductCard key={product.id} product={product} />
-      ))}
-    </div>
-  );
-}
+'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 <p>{t('noProducts')}</p>;
+  }
+
+  return (
+    <div className={cn('grid grid-cols-2 gap-4 lg:grid-cols-4', className)}>
+      {/* DESIGN ME — product grid: lays out ProductCard units; products arrive as a prop from the listing/home hooks. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      {products.map((product) => (
+        <ProductCard key={product.id} product={product} />
+      ))}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/product/product-listing.tsx

@@ -1,224 +1,224 @@
-'use client';
-
-import * as React from 'react';
-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 { useTranslations } from '@/core/lib/translations';
-
-/**
- * Flatten the category tree into indented <option>s so nested categories
- * stay selectable in a plain, semantic <select>. Replace with any control
- * you like (chips, dropdown tree, sidebar) — keep `handleCategorySelect`.
- */
-function CategoryOptions({ items, depth }: { items: CategoryNode[]; depth: number }) {
-  return (
-    <>
-      {items.map((node) => (
-        <React.Fragment key={node.id}>
-          <option value={node.id}>
-            {`${'— '.repeat(depth)}${node.name}`}
-          </option>
-          {node.children.length > 0 && <CategoryOptions items={node.children} depth={depth + 1} />}
-        </React.Fragment>
-      ))}
-    </>
-  );
-}
-
-/**
- * Product listing page (bare skeleton): 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 (
-    <section>
-      {/* DESIGN ME — product listing page: header, category/brand/tag/custom-field filters, sort, product grid, load-more; everything comes from useProductListing(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <header>
-        <h1>{searchQuery ? `${t('searchPrefix')} "${searchQuery}"` : t('allProducts')}</h1>
-        {!loading && (
-          <p>
-            {total} {total === 1 ? tc('product') : tc('products')} {tc('found')}
-          </p>
-        )}
-      </header>
-
-      {/* Filters and Sort */}
-      <div className="flex flex-wrap items-center gap-3">
-        {/* Category filter — nested tree flattened into a select */}
-        {categories.length > 0 && (
-          <label>
-            <span className="sr-only">{tc('all')}</span>
-            <select
-              value={categoryId}
-              onChange={(e) =>
-                e.target.value ? handleCategorySelect(e.target.value) : updateParam('category', '')
-              }
-            >
-              <option value="">{tc('all')}</option>
-              <CategoryOptions items={categories} depth={0} />
-            </select>
-          </label>
-        )}
-
-        {/* Brand Filter */}
-        {brands.length > 0 && (
-          <select
-            value={brandId}
-            onChange={(e) => updateParam('brand', e.target.value)}
-            aria-label={t('allBrands')}
-          >
-            <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)}
-            aria-label={t('allTags')}
-          >
-            <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="inline-flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  checked={isOn}
-                  onChange={(e) => setMetafieldValue(def.key, e.target.checked ? ['true'] : [])}
-                />
-                {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}
-              >
-                <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 — checkbox toggles. Each click adds/removes one value.
-          return (
-            <fieldset key={def.id} className="inline-flex items-center gap-2">
-              <legend>{def.name}</legend>
-              {(def.enumValues || []).map((v) => {
-                const active = selected.includes(v.value);
-                return (
-                  <label key={v.value} className="inline-flex items-center gap-1">
-                    <input
-                      type="checkbox"
-                      checked={active}
-                      onChange={() =>
-                        setMetafieldValue(
-                          def.key,
-                          active ? selected.filter((s) => s !== v.value) : [...selected, v.value]
-                        )
-                      }
-                    />
-                    {v.label || v.value}
-                  </label>
-                );
-              })}
-            </fieldset>
-          );
-        })}
-
-        {/* Sort */}
-        <label htmlFor="sort">{tc('sortBy')}</label>
-        <select id="sort" value={sortIndex} onChange={(e) => updateParam('sort', e.target.value)}>
-          {sortOptions.map((opt, idx) => (
-            <option key={idx} value={idx}>
-              {t(opt.labelKey)}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {/* Products Grid */}
-      {loading ? (
-        <LoadingSpinner size="lg" />
-      ) : (
-        <>
-          <ProductGrid products={products} />
-
-          {/* Load More */}
-          {page < totalPages && (
-            <button type="button" onClick={handleLoadMore} disabled={loadingMore}>
-              {loadingMore ? tc('loading') : t('loadMore')}
-            </button>
-          )}
-        </>
-      )}
-    </section>
-  );
-}
+'use client';
+
+import * as React from 'react';
+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 { useTranslations } from '@/core/lib/translations';
+
+/**
+ * Flatten the category tree into indented <option>s so nested categories
+ * stay selectable in a plain, semantic <select>. Replace with any control
+ * you like (chips, dropdown tree, sidebar) — keep `handleCategorySelect`.
+ */
+function CategoryOptions({ items, depth }: { items: CategoryNode[]; depth: number }) {
+  return (
+    <>
+      {items.map((node) => (
+        <React.Fragment key={node.id}>
+          <option value={node.id}>
+            {`${'— '.repeat(depth)}${node.name}`}
+          </option>
+          {node.children.length > 0 && <CategoryOptions items={node.children} depth={depth + 1} />}
+        </React.Fragment>
+      ))}
+    </>
+  );
+}
+
+/**
+ * Product listing page (bare skeleton): 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 (
+    <section>
+      {/* DESIGN ME — product listing page: header, category/brand/tag/custom-field filters, sort, product grid, load-more; everything comes from useProductListing(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <header>
+        <h1>{searchQuery ? `${t('searchPrefix')} "${searchQuery}"` : t('allProducts')}</h1>
+        {!loading && (
+          <p>
+            {total} {total === 1 ? tc('product') : tc('products')} {tc('found')}
+          </p>
+        )}
+      </header>
+
+      {/* Filters and Sort */}
+      <div className="flex flex-wrap items-center gap-3">
+        {/* Category filter — nested tree flattened into a select */}
+        {categories.length > 0 && (
+          <label>
+            <span className="sr-only">{tc('all')}</span>
+            <select
+              value={categoryId}
+              onChange={(e) =>
+                e.target.value ? handleCategorySelect(e.target.value) : updateParam('category', '')
+              }
+            >
+              <option value="">{tc('all')}</option>
+              <CategoryOptions items={categories} depth={0} />
+            </select>
+          </label>
+        )}
+
+        {/* Brand Filter */}
+        {brands.length > 0 && (
+          <select
+            value={brandId}
+            onChange={(e) => updateParam('brand', e.target.value)}
+            aria-label={t('allBrands')}
+          >
+            <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)}
+            aria-label={t('allTags')}
+          >
+            <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="inline-flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={isOn}
+                  onChange={(e) => setMetafieldValue(def.key, e.target.checked ? ['true'] : [])}
+                />
+                {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}
+              >
+                <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 — checkbox toggles. Each click adds/removes one value.
+          return (
+            <fieldset key={def.id} className="inline-flex items-center gap-2">
+              <legend>{def.name}</legend>
+              {(def.enumValues || []).map((v) => {
+                const active = selected.includes(v.value);
+                return (
+                  <label key={v.value} className="inline-flex items-center gap-1">
+                    <input
+                      type="checkbox"
+                      checked={active}
+                      onChange={() =>
+                        setMetafieldValue(
+                          def.key,
+                          active ? selected.filter((s) => s !== v.value) : [...selected, v.value]
+                        )
+                      }
+                    />
+                    {v.label || v.value}
+                  </label>
+                );
+              })}
+            </fieldset>
+          );
+        })}
+
+        {/* Sort */}
+        <label htmlFor="sort">{tc('sortBy')}</label>
+        <select id="sort" value={sortIndex} onChange={(e) => updateParam('sort', e.target.value)}>
+          {sortOptions.map((opt, idx) => (
+            <option key={idx} value={idx}>
+              {t(opt.labelKey)}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Products Grid */}
+      {loading ? (
+        <LoadingSpinner size="lg" />
+      ) : (
+        <>
+          <ProductGrid products={products} />
+
+          {/* Load More */}
+          {page < totalPages && (
+            <button type="button" onClick={handleLoadMore} disabled={loadingMore}>
+              {loadingMore ? tc('loading') : t('loadMore')}
+            </button>
+          )}
+        </>
+      )}
+    </section>
+  );
+}