create-brainerce-store 1.74.0 → 1.76.0

package/templates/nextjs/ui-canvas/layout/header-search.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+/**
+ * Header search with autocomplete (bare skeleton).
+ *
+ * The header itself is a server component (merchant-configured Content), so
+ * the search box is a client island — the same bridge `HeaderAccount` uses.
+ *
+ * Everything here is BEHAVIOUR and is already correct; only the presentation is
+ * yours to write. Keep all of it:
+ *   - `useSearch()` supplies the suggestions (300ms debounce, 2-char minimum,
+ *     abort on re-query). This component owns only the input + dropdown.
+ *   - Submitting navigates to `/products?search=<query>`, which is exactly
+ *     what `use-product-listing` reads back off the URL.
+ *   - Picking a product suggestion goes to its PDP; picking a category goes to
+ *     the listing filtered by `?category=<id>`, because a CategorySuggestion
+ *     carries `id` + `name` + `productCount` and no slug.
+ *   - Keyboard: ArrowDown / ArrowUp move the active option, Enter opens it (or
+ *     submits the raw query when nothing is active), Escape closes the panel.
+ *     A pointerdown outside the widget closes it.
+ *
+ * The ARIA wiring (`role="combobox"`, `aria-expanded`, `aria-controls`,
+ * `aria-activedescendant`, `role="listbox"`/`"option"`, `aria-selected`) is
+ * load-bearing for screen readers — style around it, do not remove it.
+ */
+
+import * as React from 'react';
+import { useRouter } from '@/core/lib/navigation';
+import { useSearch } from '@/core/hooks/use-search';
+import { useTranslations } from '@/core/lib/translations';
+
+interface HeaderSearchProps {
+  className?: string;
+}
+
+/** One flattened dropdown row — products first, then categories. */
+type Option =
+  | { kind: 'product'; id: string; label: string; href: string }
+  | { kind: 'category'; id: string; label: string; href: string };
+
+export function HeaderSearch({ className }: HeaderSearchProps) {
+  const router = useRouter();
+  const t = useTranslations('nav');
+  const tc = useTranslations('common');
+  const tp = useTranslations('products');
+
+  const [query, setQuery] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const { suggestions, loading } = useSearch(query);
+
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const listboxId = React.useId();
+
+  // Products first, then categories — one flat list so the arrow keys can walk
+  // the whole panel without caring which section a row came from.
+  const options: Option[] = React.useMemo(() => {
+    if (!suggestions) return [];
+    const rows: Option[] = [];
+    for (const product of suggestions.products) {
+      rows.push({
+        kind: 'product',
+        id: product.id,
+        label: product.name,
+        // `slug` is nullable on a ProductSuggestion — fall back to the id.
+        href: `/products/${product.slug || product.id}`,
+      });
+    }
+    for (const category of suggestions.categories) {
+      rows.push({
+        kind: 'category',
+        id: category.id,
+        label: category.name,
+        // CategorySuggestion carries no slug, so filter the listing by id.
+        href: `/products?category=${encodeURIComponent(category.id)}`,
+      });
+    }
+    return rows;
+  }, [suggestions]);
+
+  // A fresh result set invalidates whatever row was highlighted.
+  React.useEffect(() => {
+    setActiveIndex(-1);
+  }, [options]);
+
+  // Close when the click lands outside the widget. Pointerdown rather than
+  // click so the panel is gone before a link underneath activates.
+  React.useEffect(() => {
+    if (!open) return;
+    function onPointerDown(event: PointerEvent) {
+      if (!rootRef.current) return;
+      if (!rootRef.current.contains(event.target as Node)) setOpen(false);
+    }
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [open]);
+
+  function go(href: string) {
+    setOpen(false);
+    setActiveIndex(-1);
+    router.push(href);
+  }
+
+  function submit() {
+    const trimmed = query.trim();
+    if (!trimmed) return;
+    go(`/products?search=${encodeURIComponent(trimmed)}`);
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Escape') {
+      setOpen(false);
+      setActiveIndex(-1);
+      return;
+    }
+
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      if (options.length === 0) return;
+      event.preventDefault();
+      setOpen(true);
+      setActiveIndex((prev) => {
+        const step = event.key === 'ArrowDown' ? 1 : -1;
+        const next = prev + step;
+        if (next < 0) return options.length - 1;
+        if (next >= options.length) return 0;
+        return next;
+      });
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      const active = activeIndex >= 0 ? options[activeIndex] : undefined;
+      if (active) {
+        go(active.href);
+      } else {
+        submit();
+      }
+    }
+  }
+
+  // The panel is only worth showing once the hook has something to say —
+  // either rows, a spinner, or an explicit "nothing matched".
+  const showPanel = open && (loading || suggestions !== null);
+  const activeOptionId = activeIndex >= 0 ? `${listboxId}-${activeIndex}` : undefined;
+  const productCount = suggestions?.products.length ?? 0;
+
+  return (
+    <div ref={rootRef} className={className}>
+      {/* DESIGN ME — header search. Compose with the shadcn/ui primitives in
+          src/components/ui (Input, Command, Popover, Skeleton, ...) + lucide-react
+          icons. The panel below wants to overlay the page, so give this wrapper a
+          positioning context and the panel an elevated layer. */}
+      <form
+        role="search"
+        onSubmit={(event) => {
+          event.preventDefault();
+          submit();
+        }}
+      >
+        <label htmlFor={`${listboxId}-input`} className="sr-only">
+          {t('search')}
+        </label>
+        <input
+          id={`${listboxId}-input`}
+          type="search"
+          role="combobox"
+          autoComplete="off"
+          aria-expanded={showPanel}
+          aria-controls={listboxId}
+          aria-activedescendant={activeOptionId}
+          placeholder={t('searchPlaceholder')}
+          value={query}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setOpen(true);
+          }}
+          onFocus={() => setOpen(true)}
+          onKeyDown={handleKeyDown}
+        />
+      </form>
+
+      {showPanel && (
+        <div>
+          {/* DESIGN ME — suggestions panel. */}
+          {loading && options.length === 0 ? (
+            <p>{tc('loading')}</p>
+          ) : options.length === 0 ? (
+            <p>{tc('noResults')}</p>
+          ) : (
+            <ul id={listboxId} role="listbox" aria-label={t('search')}>
+              {options.map((option, index) => (
+                <React.Fragment key={`${option.kind}-${option.id}`}>
+                  {index === 0 && productCount > 0 && (
+                    <li role="presentation">{tp('pageTitle')}</li>
+                  )}
+                  {index === productCount && option.kind === 'category' && (
+                    <li role="presentation">{t('categories')}</li>
+                  )}
+                  <li
+                    id={`${listboxId}-${index}`}
+                    role="option"
+                    aria-selected={index === activeIndex}
+                    onPointerDown={(event) => {
+                      // Keep focus in the input so the blur handler cannot
+                      // close the panel before the navigation runs.
+                      event.preventDefault();
+                      go(option.href);
+                    }}
+                    onMouseEnter={() => setActiveIndex(index)}
+                  >
+                    {option.label}
+                  </li>
+                </React.Fragment>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/layout/site-header.tsx.ejs

@@ -18,6 +18,7 @@ import * as React from 'react';
 import { Link } from '@/core/lib/navigation';
 import type { Content } from 'brainerce';
 import { HeaderAccount } from './header-account';
+import { HeaderSearch } from './header-search';
 <% if (i18nEnabled) { %>
 import { LanguageSwitcher } from '@/ui/layout/language-switcher';
 <% } %>
@@ -53,6 +54,9 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
             <LanguageSwitcher />
             <% } %>
             <RegionSwitcher />
+            {/* Search is a MANDATORY feature, not decoration — the island carries the
+                debounce, keyboard navigation and ARIA wiring already. */}
+            <HeaderSearch />
             <HeaderAccount />
             <Link href="/cart" aria-label="Cart">
               Cart
@@ -96,6 +100,8 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
           <% } %>
           <RegionSwitcher />
 
+          <HeaderSearch />
+
           <HeaderAccount />
 
           <Link href="/cart" aria-label="Cart">

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

@@ -58,6 +58,11 @@ export function ProductCard({ product, className }: ProductCardProps) {
   const [adding, setAdding] = useState(false);
   const [added, setAdded] = useState(false);
 
+  // `!== false`, not `=== true`, and that matters for KIT products: a kit
+  // carries NO `inventory` object of its own (its availability is derived from
+  // its components), so a strict truthy check would render every kit as out of
+  // stock. A kit also falls through `isVariable` above and adds by `productId`
+  // alone, which is correct — kits take no variantId and no selections.
   const canPurchase = product.inventory?.canPurchase !== false;
 
   async function handleAddToCart(e: React.MouseEvent) {