create-brainerce-store 1.62.0 → 1.64.0

package/templates/nextjs/designs/atelier/ui/shared/reveal.tsx

@@ -1,71 +1,71 @@
-'use client';
-
-/**
- * Scroll-reveal wrapper — adds `.is-visible` when the block enters the
- * viewport. The animation itself lives in globals.css strictly inside a
- * `prefers-reduced-motion: no-preference` guard, so with reduced motion the
- * content is simply visible (the base .reveal-scroll styles are also inside
- * the guard — no hidden content ever).
- */
-import * as React from 'react';
-import { cn } from '@/core/lib/utils';
-
-export function Reveal({
-  children,
-  className,
-  /** transition-delay in ms for stagger */
-  delay = 0,
-  as: Tag = 'div',
-}: {
-  children: React.ReactNode;
-  className?: string;
-  delay?: number;
-  as?: 'div' | 'section' | 'li' | 'span';
-}) {
-  const ref = React.useRef<HTMLElement | null>(null);
-  const [visible, setVisible] = React.useState(false);
-
-  React.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    if (
-      typeof window === 'undefined' ||
-      !('IntersectionObserver' in window) ||
-      window.matchMedia('(prefers-reduced-motion: reduce)').matches
-    ) {
-      setVisible(true);
-      return;
-    }
-    const io = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            setVisible(true);
-            io.disconnect();
-            break;
-          }
-        }
-      },
-      { rootMargin: '0px 0px -10% 0px', threshold: 0.08 }
-    );
-    io.observe(el);
-    // Safety net: never leave content hidden if the observer misfires
-    // (embedded webviews, print, prerender snapshots).
-    const failSafe = window.setTimeout(() => setVisible(true), 2000);
-    return () => {
-      io.disconnect();
-      window.clearTimeout(failSafe);
-    };
-  }, []);
-
-  const Comp = Tag as React.ElementType;
-  return (
-    <Comp
-      ref={ref}
-      className={cn('reveal-scroll', visible && 'is-visible', className)}
-      style={delay ? { transitionDelay: `${delay}ms` } : undefined}
-    >
-      {children}
-    </Comp>
-  );
-}
+'use client';
+
+/**
+ * Scroll-reveal wrapper — adds `.is-visible` when the block enters the
+ * viewport. The animation itself lives in globals.css strictly inside a
+ * `prefers-reduced-motion: no-preference` guard, so with reduced motion the
+ * content is simply visible (the base .reveal-scroll styles are also inside
+ * the guard — no hidden content ever).
+ */
+import * as React from 'react';
+import { cn } from '@/core/lib/utils';
+
+export function Reveal({
+  children,
+  className,
+  /** transition-delay in ms for stagger */
+  delay = 0,
+  as: Tag = 'div',
+}: {
+  children: React.ReactNode;
+  className?: string;
+  delay?: number;
+  as?: 'div' | 'section' | 'li' | 'span';
+}) {
+  const ref = React.useRef<HTMLElement | null>(null);
+  const [visible, setVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (
+      typeof window === 'undefined' ||
+      !('IntersectionObserver' in window) ||
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    ) {
+      setVisible(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setVisible(true);
+            io.disconnect();
+            break;
+          }
+        }
+      },
+      { rootMargin: '0px 0px -10% 0px', threshold: 0.08 }
+    );
+    io.observe(el);
+    // Safety net: never leave content hidden if the observer misfires
+    // (embedded webviews, print, prerender snapshots).
+    const failSafe = window.setTimeout(() => setVisible(true), 2000);
+    return () => {
+      io.disconnect();
+      window.clearTimeout(failSafe);
+    };
+  }, []);
+
+  const Comp = Tag as React.ElementType;
+  return (
+    <Comp
+      ref={ref}
+      className={cn('reveal-scroll', visible && 'is-visible', className)}
+      style={delay ? { transitionDelay: `${delay}ms` } : undefined}
+    >
+      {children}
+    </Comp>
+  );
+}

package/templates/nextjs/designs/atelier/ui/shared/select-menu.tsx

@@ -1,125 +1,125 @@
-'use client';
-
-/**
- * Styled replacement for toolbar `<select>`s — same popover language as the
- * header's language switcher (pill trigger, rotating chevron, rounded menu,
- * check on the selected row) so every dropdown in the store speaks one
- * dialect. Closes on outside click / Escape; arrows move focus in the list.
- */
-import { useEffect, useRef, useState } from 'react';
-import { cn } from '@/core/lib/utils';
-import { IconCheck, IconChevronDown } from '@/ui/shared/icons';
-
-export interface SelectMenuOption {
-  value: string;
-  label: string;
-}
-
-interface SelectMenuProps {
-  value: string;
-  options: SelectMenuOption[];
-  onChange: (value: string) => void;
-  ariaLabel: string;
-  className?: string;
-}
-
-export function SelectMenu({ value, options, onChange, ariaLabel, className }: SelectMenuProps) {
-  const [open, setOpen] = useState(false);
-  const rootRef = useRef<HTMLDivElement>(null);
-  const listRef = useRef<HTMLUListElement>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    function onDown(e: MouseEvent) {
-      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
-    }
-    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') {
-        setOpen(false);
-        triggerRef.current?.focus();
-      }
-    }
-    document.addEventListener('mousedown', onDown);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('mousedown', onDown);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [open]);
-
-  // Focus the selected row when the menu opens so keyboard users land in place.
-  useEffect(() => {
-    if (!open) return;
-    const el =
-      listRef.current?.querySelector<HTMLButtonElement>('[aria-selected="true"]') ??
-      listRef.current?.querySelector('button');
-    el?.focus();
-  }, [open]);
-
-  const selected = options.find((o) => o.value === value);
-
-  function onListKeyDown(e: React.KeyboardEvent) {
-    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
-    e.preventDefault();
-    const items = Array.from(listRef.current?.querySelectorAll('button') ?? []);
-    const idx = items.indexOf(document.activeElement as HTMLButtonElement);
-    const next = e.key === 'ArrowDown' ? Math.min(items.length - 1, idx + 1) : Math.max(0, idx - 1);
-    items[next]?.focus();
-  }
-
-  return (
-    <div ref={rootRef} className={cn('relative', className)}>
-      <button
-        ref={triggerRef}
-        type="button"
-        aria-label={ariaLabel}
-        aria-expanded={open}
-        aria-haspopup="listbox"
-        onClick={() => setOpen((v) => !v)}
-        className="inline-flex h-10 items-center gap-2 rounded-full border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-secondary/60"
-      >
-        {selected?.label ?? ariaLabel}
-        <IconChevronDown
-          size={16}
-          className={cn('shrink-0 text-foreground/60 transition-transform', open && 'rotate-180')}
-        />
-      </button>
-
-      {open && (
-        <ul
-          ref={listRef}
-          role="listbox"
-          aria-label={ariaLabel}
-          onKeyDown={onListKeyDown}
-          className="absolute start-0 top-full z-50 mt-2 max-h-72 min-w-full overflow-y-auto rounded-xl border border-border/60 bg-background py-1 shadow-lg"
-        >
-          {options.map((opt) => {
-            const isSelected = opt.value === value;
-            return (
-              <li key={opt.value}>
-                <button
-                  type="button"
-                  role="option"
-                  aria-selected={isSelected}
-                  onClick={() => {
-                    setOpen(false);
-                    triggerRef.current?.focus();
-                    if (!isSelected) onChange(opt.value);
-                  }}
-                  className={cn(
-                    'flex w-full items-center justify-between gap-3 whitespace-nowrap px-4 py-2 text-sm transition-colors hover:bg-secondary/70',
-                    isSelected ? 'font-semibold text-primary' : 'text-foreground/80'
-                  )}
-                >
-                  {opt.label}
-                  {isSelected && <IconCheck size={16} />}
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-    </div>
-  );
-}
+'use client';
+
+/**
+ * Styled replacement for toolbar `<select>`s — same popover language as the
+ * header's language switcher (pill trigger, rotating chevron, rounded menu,
+ * check on the selected row) so every dropdown in the store speaks one
+ * dialect. Closes on outside click / Escape; arrows move focus in the list.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '@/core/lib/utils';
+import { IconCheck, IconChevronDown } from '@/ui/shared/icons';
+
+export interface SelectMenuOption {
+  value: string;
+  label: string;
+}
+
+interface SelectMenuProps {
+  value: string;
+  options: SelectMenuOption[];
+  onChange: (value: string) => void;
+  ariaLabel: string;
+  className?: string;
+}
+
+export function SelectMenu({ value, options, onChange, ariaLabel, className }: SelectMenuProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    }
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  // Focus the selected row when the menu opens so keyboard users land in place.
+  useEffect(() => {
+    if (!open) return;
+    const el =
+      listRef.current?.querySelector<HTMLButtonElement>('[aria-selected="true"]') ??
+      listRef.current?.querySelector('button');
+    el?.focus();
+  }, [open]);
+
+  const selected = options.find((o) => o.value === value);
+
+  function onListKeyDown(e: React.KeyboardEvent) {
+    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
+    e.preventDefault();
+    const items = Array.from(listRef.current?.querySelectorAll('button') ?? []);
+    const idx = items.indexOf(document.activeElement as HTMLButtonElement);
+    const next = e.key === 'ArrowDown' ? Math.min(items.length - 1, idx + 1) : Math.max(0, idx - 1);
+    items[next]?.focus();
+  }
+
+  return (
+    <div ref={rootRef} className={cn('relative', className)}>
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-label={ariaLabel}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        onClick={() => setOpen((v) => !v)}
+        className="inline-flex h-10 items-center gap-2 rounded-full border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-secondary/60"
+      >
+        {selected?.label ?? ariaLabel}
+        <IconChevronDown
+          size={16}
+          className={cn('shrink-0 text-foreground/60 transition-transform', open && 'rotate-180')}
+        />
+      </button>
+
+      {open && (
+        <ul
+          ref={listRef}
+          role="listbox"
+          aria-label={ariaLabel}
+          onKeyDown={onListKeyDown}
+          className="absolute start-0 top-full z-50 mt-2 max-h-72 min-w-full overflow-y-auto rounded-xl border border-border/60 bg-background py-1 shadow-lg"
+        >
+          {options.map((opt) => {
+            const isSelected = opt.value === value;
+            return (
+              <li key={opt.value}>
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={isSelected}
+                  onClick={() => {
+                    setOpen(false);
+                    triggerRef.current?.focus();
+                    if (!isSelected) onChange(opt.value);
+                  }}
+                  className={cn(
+                    'flex w-full items-center justify-between gap-3 whitespace-nowrap px-4 py-2 text-sm transition-colors hover:bg-secondary/70',
+                    isSelected ? 'font-semibold text-primary' : 'text-foreground/80'
+                  )}
+                >
+                  {opt.label}
+                  {isSelected && <IconCheck size={16} />}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/cart/cart-bundle-offer.tsx

@@ -1,89 +1,89 @@
-'use client';
-
-import { useState } from 'react';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { useCurrency } from '@/core/lib/use-currency';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface CartBundleOfferCardProps {
-  offer: CartBundleOfferType;
-  cartId: string;
-  onAdd: () => void;
-  className?: string;
-}
-
-/**
- * DESIGN ME — bundle offer card on the cart page: offered products with
- * original vs. discounted prices + add-bundle button; offers come from
- * useCartPage().bundles.
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
-  const t = useTranslations('cart');
-  const currency = useCurrency();
-  const [adding, setAdding] = useState(false);
-
-  const offered = offer.offeredProducts;
-
-  const totalOriginal = parseFloat(offer.totalOriginalPrice);
-  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
-  const discountLabel =
-    offer.discountType === 'PERCENTAGE'
-      ? `${offer.discountValue}%`
-      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
-
-  async function handleAdd() {
-    if (adding) return;
-    try {
-      setAdding(true);
-      const { getClient } = await import('@/core/lib/brainerce');
-      const client = getClient();
-      // No variant selections in the default template — products with
-      // variants are best handled with a dedicated picker per offered item.
-      await client.addBundleToCart(cartId, offer.id);
-      onAdd();
-    } catch (err) {
-      console.error('Failed to add bundle:', err);
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <article className={cn(className)}>
-      <h4>{offer.name}</h4>
-      {offer.description && <p>{offer.description}</p>}
-
-      <ul>
-        {offered.map((p) => {
-          const firstImage = p.images?.[0];
-          const imageUrl = firstImage?.url ?? null;
-          return (
-            <li key={p.id} className="flex items-center gap-3">
-              {/* `relative` + fixed box are layout-critical for next/image fill */}
-              <span className="relative block h-12 w-12">
-                {imageUrl ? <Image src={imageUrl} alt={p.name} fill sizes="48px" /> : null}
-              </span>
-              <span>{p.name}</span>
-              <s>{formatPrice(parseFloat(p.originalPrice), { currency }) as string}</s>
-              <span>{formatPrice(parseFloat(p.discountedPrice), { currency }) as string}</span>
-            </li>
-          );
-        })}
-      </ul>
-
-      <div className="flex items-center gap-2">
-        <s>{formatPrice(totalOriginal, { currency }) as string}</s>
-        <span>{formatPrice(totalDiscounted, { currency }) as string}</span>
-        <span>-{discountLabel}</span>
-        <button type="button" onClick={handleAdd} disabled={adding}>
-          {adding ? t('addingBundle') : t('addBundleItem')}
-        </button>
-      </div>
-    </article>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface CartBundleOfferCardProps {
+  offer: CartBundleOfferType;
+  cartId: string;
+  onAdd: () => void;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — bundle offer card on the cart page: offered products with
+ * original vs. discounted prices + add-bundle button; offers come from
+ * useCartPage().bundles.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
+  const t = useTranslations('cart');
+  const currency = useCurrency();
+  const [adding, setAdding] = useState(false);
+
+  const offered = offer.offeredProducts;
+
+  const totalOriginal = parseFloat(offer.totalOriginalPrice);
+  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
+  const discountLabel =
+    offer.discountType === 'PERCENTAGE'
+      ? `${offer.discountValue}%`
+      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
+
+  async function handleAdd() {
+    if (adding) return;
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      // No variant selections in the default template — products with
+      // variants are best handled with a dedicated picker per offered item.
+      await client.addBundleToCart(cartId, offer.id);
+      onAdd();
+    } catch (err) {
+      console.error('Failed to add bundle:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <article className={cn(className)}>
+      <h4>{offer.name}</h4>
+      {offer.description && <p>{offer.description}</p>}
+
+      <ul>
+        {offered.map((p) => {
+          const firstImage = p.images?.[0];
+          const imageUrl = firstImage?.url ?? null;
+          return (
+            <li key={p.id} className="flex items-center gap-3">
+              {/* `relative` + fixed box are layout-critical for next/image fill */}
+              <span className="relative block h-12 w-12">
+                {imageUrl ? <Image src={imageUrl} alt={p.name} fill sizes="48px" /> : null}
+              </span>
+              <span>{p.name}</span>
+              <s>{formatPrice(parseFloat(p.originalPrice), { currency }) as string}</s>
+              <span>{formatPrice(parseFloat(p.discountedPrice), { currency }) as string}</span>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="flex items-center gap-2">
+        <s>{formatPrice(totalOriginal, { currency }) as string}</s>
+        <span>{formatPrice(totalDiscounted, { currency }) as string}</span>
+        <span>-{discountLabel}</span>
+        <button type="button" onClick={handleAdd} disabled={adding}>
+          {adding ? t('addingBundle') : t('addBundleItem')}
+        </button>
+      </div>
+    </article>
+  );
+}