create-brainerce-store 1.62.0 → 1.64.0

package/templates/nextjs/ui-canvas/cart/free-shipping-bar.tsx

@@ -1,54 +1,54 @@
-'use client';
-
-import { formatPrice } from 'brainerce';
-import { useStoreInfo, useCart } from '@/core/providers/store-provider';
-import { useCurrency } from '@/core/lib/use-currency';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface FreeShippingBarProps {
-  className?: string;
-}
-
-/**
- * DESIGN ME — free-shipping progress on the cart page ("add X more for free
- * shipping"); threshold from useStoreInfo().upsell, subtotal from
- * useCart().totals. The semantic <progress> is a placeholder — build your own
- * meter.
- *
- * 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 FreeShippingBar({ className }: FreeShippingBarProps) {
-  // Hooks must be called unconditionally and in the same order on every
-  // render — keep all of them above any early `return null` branch.
-  const t = useTranslations('cart');
-  const { storeInfo } = useStoreInfo();
-  const { totals } = useCart();
-  const currency = useCurrency();
-
-  const upsell = storeInfo?.upsell;
-  const threshold = upsell?.freeShippingThreshold;
-  const enabled = upsell?.freeShippingBarEnabled !== false;
-
-  // Don't render if disabled or no threshold configured
-  if (!enabled || !threshold || threshold <= 0) return null;
-
-  const subtotal = totals.subtotal;
-  const remaining = Math.max(0, threshold - subtotal);
-  const qualified = remaining <= 0;
-
-  if (qualified) {
-    return <p className={cn(className)}>{t('freeShippingQualified')}</p>;
-  }
-
-  return (
-    <div className={cn(className)}>
-      <p>
-        {t('freeShippingRemaining', {
-          amount: formatPrice(remaining, { currency }) as string,
-        })}
-      </p>
-      <progress value={Math.min(subtotal, threshold)} max={threshold} />
-    </div>
-  );
-}
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useStoreInfo, useCart } from '@/core/providers/store-provider';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface FreeShippingBarProps {
+  className?: string;
+}
+
+/**
+ * DESIGN ME — free-shipping progress on the cart page ("add X more for free
+ * shipping"); threshold from useStoreInfo().upsell, subtotal from
+ * useCart().totals. The semantic <progress> is a placeholder — build your own
+ * meter.
+ *
+ * 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 FreeShippingBar({ className }: FreeShippingBarProps) {
+  // Hooks must be called unconditionally and in the same order on every
+  // render — keep all of them above any early `return null` branch.
+  const t = useTranslations('cart');
+  const { storeInfo } = useStoreInfo();
+  const { totals } = useCart();
+  const currency = useCurrency();
+
+  const upsell = storeInfo?.upsell;
+  const threshold = upsell?.freeShippingThreshold;
+  const enabled = upsell?.freeShippingBarEnabled !== false;
+
+  // Don't render if disabled or no threshold configured
+  if (!enabled || !threshold || threshold <= 0) return null;
+
+  const subtotal = totals.subtotal;
+  const remaining = Math.max(0, threshold - subtotal);
+  const qualified = remaining <= 0;
+
+  if (qualified) {
+    return <p className={cn(className)}>{t('freeShippingQualified')}</p>;
+  }
+
+  return (
+    <div className={cn(className)}>
+      <p>
+        {t('freeShippingRemaining', {
+          amount: formatPrice(remaining, { currency }) as string,
+        })}
+      </p>
+      <progress value={Math.min(subtotal, threshold)} max={threshold} />
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/cart/reservation-countdown.tsx

@@ -1,81 +1,81 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import type { ReservationInfo } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface ReservationCountdownProps {
-  reservation: ReservationInfo;
-  className?: string;
-}
-
-/**
- * DESIGN ME — stock-reservation countdown on the cart/checkout pages; the
- * `reservation` prop comes from useCartPage().cart.reservation. Keep the
- * ticking logic and the expired/urgent states (exposed via data-state).
- *
- * 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 ReservationCountdown({ reservation, className }: ReservationCountdownProps) {
-  const t = useTranslations('reservation');
-  const [remainingSeconds, setRemainingSeconds] = useState<number>(0);
-
-  const calculateRemaining = useCallback(() => {
-    if (!reservation.expiresAt) return 0;
-    const expiresAtMs = new Date(reservation.expiresAt).getTime();
-    const nowMs = Date.now();
-    return Math.max(0, Math.floor((expiresAtMs - nowMs) / 1000));
-  }, [reservation.expiresAt]);
-
-  useEffect(() => {
-    setRemainingSeconds(calculateRemaining());
-
-    const interval = setInterval(() => {
-      const remaining = calculateRemaining();
-      setRemainingSeconds(remaining);
-
-      if (remaining <= 0) {
-        clearInterval(interval);
-      }
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [calculateRemaining]);
-
-  if (!reservation.hasReservation) return null;
-
-  const minutes = Math.floor(remainingSeconds / 60);
-  const seconds = remainingSeconds % 60;
-  const isExpired = remainingSeconds <= 0;
-  const isUrgent = remainingSeconds > 0 && remainingSeconds < 120;
-
-  const displayMessage = reservation.countdownMessage
-    ? reservation.countdownMessage.replace(
-        '{time}',
-        `${minutes}:${seconds.toString().padStart(2, '0')}`
-      )
-    : null;
-
-  return (
-    <div
-      role="timer"
-      data-state={isExpired ? 'expired' : isUrgent ? 'urgent' : 'active'}
-      className={cn(className)}
-    >
-      {isExpired ? (
-        <p>{t('expired')}</p>
-      ) : displayMessage ? (
-        <p>{displayMessage}</p>
-      ) : (
-        <p>
-          {isUrgent ? `${t('hurry')} ` : ''}
-          {t('reservedFor')}{' '}
-          <span>
-            {minutes}:{seconds.toString().padStart(2, '0')}
-          </span>
-        </p>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import type { ReservationInfo } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface ReservationCountdownProps {
+  reservation: ReservationInfo;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — stock-reservation countdown on the cart/checkout pages; the
+ * `reservation` prop comes from useCartPage().cart.reservation. Keep the
+ * ticking logic and the expired/urgent states (exposed via data-state).
+ *
+ * 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 ReservationCountdown({ reservation, className }: ReservationCountdownProps) {
+  const t = useTranslations('reservation');
+  const [remainingSeconds, setRemainingSeconds] = useState<number>(0);
+
+  const calculateRemaining = useCallback(() => {
+    if (!reservation.expiresAt) return 0;
+    const expiresAtMs = new Date(reservation.expiresAt).getTime();
+    const nowMs = Date.now();
+    return Math.max(0, Math.floor((expiresAtMs - nowMs) / 1000));
+  }, [reservation.expiresAt]);
+
+  useEffect(() => {
+    setRemainingSeconds(calculateRemaining());
+
+    const interval = setInterval(() => {
+      const remaining = calculateRemaining();
+      setRemainingSeconds(remaining);
+
+      if (remaining <= 0) {
+        clearInterval(interval);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [calculateRemaining]);
+
+  if (!reservation.hasReservation) return null;
+
+  const minutes = Math.floor(remainingSeconds / 60);
+  const seconds = remainingSeconds % 60;
+  const isExpired = remainingSeconds <= 0;
+  const isUrgent = remainingSeconds > 0 && remainingSeconds < 120;
+
+  const displayMessage = reservation.countdownMessage
+    ? reservation.countdownMessage.replace(
+        '{time}',
+        `${minutes}:${seconds.toString().padStart(2, '0')}`
+      )
+    : null;
+
+  return (
+    <div
+      role="timer"
+      data-state={isExpired ? 'expired' : isUrgent ? 'urgent' : 'active'}
+      className={cn(className)}
+    >
+      {isExpired ? (
+        <p>{t('expired')}</p>
+      ) : displayMessage ? (
+        <p>{displayMessage}</p>
+      ) : (
+        <p>
+          {isUrgent ? `${t('hurry')} ` : ''}
+          {t('reservedFor')}{' '}
+          <span>
+            {minutes}:{seconds.toString().padStart(2, '0')}
+          </span>
+        </p>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/home/discount-banner-strip.tsx

@@ -1,19 +1,21 @@
-'use client';
-
-import type { DiscountBanner } from 'brainerce';
-
-/** Store-wide discount banner strip (bare skeleton) shown at the very top of the homepage. */
-export function DiscountBannerStrip({ banners }: { banners: DiscountBanner[] }) {
-  if (banners.length === 0) return null;
-
-  return (
-    <div role="region" aria-label="Promotions">
-      {/* DESIGN ME — discount banner strip: active discount-rule texts; banners come from useHomeData() in the parent. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <ul className="flex items-center gap-4">
-        {banners.map((banner) => (
-          <li key={banner.ruleId}>{banner.text}</li>
-        ))}
-      </ul>
-    </div>
-  );
-}
+'use client';
+
+import type { DiscountBanner } from 'brainerce';
+
+/** Store-wide discount banner strip (bare skeleton) shown at the very top of the homepage. */
+export function DiscountBannerStrip({ banners }: { banners: DiscountBanner[] }) {
+  if (banners.length === 0) return null;
+
+  return (
+    <div role="region" aria-label="Promotions">
+      {/* DESIGN ME — discount banner strip: active discount-rule texts; banners come from useHomeData() in the parent. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <ul className="flex items-center gap-4">
+        {banners.map((banner) => (
+          <li key={banner.ruleId} className="whitespace-pre-line">
+            {banner.text}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/home/featured-products-section.tsx

@@ -1,23 +1,23 @@
-'use client';
-
-import type { Product } from 'brainerce';
-import { Link } from '@/core/lib/navigation';
-import { useTranslations } from '@/core/lib/translations';
-import { ProductGrid } from '@/ui/product/product-grid';
-
-/** Homepage featured-products grid (bare skeleton) with a "view all" link. */
-export function FeaturedProductsSection({ products }: { products: Product[] }) {
-  const t = useTranslations('home');
-  const tc = useTranslations('common');
-
-  return (
-    <section>
-      {/* DESIGN ME — homepage featured products: heading + view-all link + product grid; products come from useHomeData() in the parent. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <div className="flex items-center justify-between">
-        <h2>{t('featuredProducts')}</h2>
-        <Link href="/products">{tc('viewAll')}</Link>
-      </div>
-      <ProductGrid products={products} />
-    </section>
-  );
-}
+'use client';
+
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { ProductGrid } from '@/ui/product/product-grid';
+
+/** Homepage featured-products grid (bare skeleton) with a "view all" link. */
+export function FeaturedProductsSection({ products }: { products: Product[] }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section>
+      {/* DESIGN ME — homepage featured products: heading + view-all link + product grid; products come from useHomeData() in the parent. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <div className="flex items-center justify-between">
+        <h2>{t('featuredProducts')}</h2>
+        <Link href="/products">{tc('viewAll')}</Link>
+      </div>
+      <ProductGrid products={products} />
+    </section>
+  );
+}

package/templates/nextjs/ui-canvas/home/hero-section.tsx

@@ -1,21 +1,21 @@
-'use client';
-
-import { Link } from '@/core/lib/navigation';
-import { useTranslations } from '@/core/lib/translations';
-
-/** Homepage hero (bare skeleton): welcome headline, subtitle, and shop-now CTA. */
-export function HeroSection({ storeName }: { storeName?: string | null }) {
-  const t = useTranslations('home');
-  const tc = useTranslations('common');
-
-  return (
-    <section>
-      {/* DESIGN ME — homepage hero: headline + subtitle + shop-now CTA; store name via useStoreInfo() in the parent, copy via the `home`/`common` translation namespaces. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <h1>
-        {t('welcomeTo')} {storeName || tc('store')}
-      </h1>
-      <p>{t('heroSubtitle')}</p>
-      <Link href="/products">{tc('shopNow')}</Link>
-    </section>
-  );
-}
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+
+/** Homepage hero (bare skeleton): welcome headline, subtitle, and shop-now CTA. */
+export function HeroSection({ storeName }: { storeName?: string | null }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section>
+      {/* DESIGN ME — homepage hero: headline + subtitle + shop-now CTA; store name via useStoreInfo() in the parent, copy via the `home`/`common` translation namespaces. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <h1>
+        {t('welcomeTo')} {storeName || tc('store')}
+      </h1>
+      <p>{t('heroSubtitle')}</p>
+      <Link href="/products">{tc('shopNow')}</Link>
+    </section>
+  );
+}

package/templates/nextjs/ui-canvas/home/home-client.tsx

@@ -1,26 +1,26 @@
-'use client';
-
-import { useStoreInfo } from '@/core/providers/store-provider';
-import { useHomeData } from '@/core/hooks/use-home-data';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { DiscountBannerStrip } from './discount-banner-strip';
-import { HeroSection } from './hero-section';
-import { FeaturedProductsSection } from './featured-products-section';
-
-export function HomeClient() {
-  const { storeInfo, loading: storeLoading } = useStoreInfo();
-  const { products, banners, loading } = useHomeData();
-
-  if (storeLoading || loading) {
-    return <LoadingSpinner size="lg" />;
-  }
-
-  return (
-    <div>
-      {/* DESIGN ME — homepage composition: discount banners + hero + featured products; data via useHomeData() and useStoreInfo(). Add/remove/reorder sections freely. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <DiscountBannerStrip banners={banners} />
-      <HeroSection storeName={storeInfo?.name} />
-      <FeaturedProductsSection products={products} />
-    </div>
-  );
-}
+'use client';
+
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { useHomeData } from '@/core/hooks/use-home-data';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { DiscountBannerStrip } from './discount-banner-strip';
+import { HeroSection } from './hero-section';
+import { FeaturedProductsSection } from './featured-products-section';
+
+export function HomeClient() {
+  const { storeInfo, loading: storeLoading } = useStoreInfo();
+  const { products, banners, loading } = useHomeData();
+
+  if (storeLoading || loading) {
+    return <LoadingSpinner size="lg" />;
+  }
+
+  return (
+    <div>
+      {/* DESIGN ME — homepage composition: discount banners + hero + featured products; data via useHomeData() and useStoreInfo(). Add/remove/reorder sections freely. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <DiscountBannerStrip banners={banners} />
+      <HeroSection storeName={storeInfo?.name} />
+      <FeaturedProductsSection products={products} />
+    </div>
+  );
+}