create-brainerce-store 1.51.0 → 1.52.0

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { Check } from 'lucide-react';
 import { formatPrice } from 'brainerce';
 import { useStoreInfo, useCart } from '@/core/providers/store-provider';
 import { useCurrency } from '@/core/lib/use-currency';
@@ -35,9 +36,7 @@ export function FreeShippingBar({ className }: FreeShippingBarProps) {
     return (
       <div className={cn('rounded-lg border border-green-200 bg-green-50 p-3', className)}>
         <div className="flex items-center gap-2 text-sm font-medium text-green-700">
-          <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-          </svg>
+          <Check className="h-4 w-4 shrink-0" aria-hidden="true" />
           {t('freeShippingQualified')}
         </div>
       </div>

package/templates/nextjs/base/src/ui/cart/reservation-countdown.tsx

@@ -1,103 +1,95 @@
-'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;
-}
-
-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
-      className={cn(
-        'flex items-center gap-3 rounded-lg px-4 py-3 text-sm',
-        isExpired
-          ? 'bg-destructive/10 border-destructive/20 text-destructive border'
-          : isUrgent
-            ? 'border border-orange-200 bg-orange-50 text-orange-800 dark:border-orange-800 dark:bg-orange-950/30 dark:text-orange-300'
-            : 'bg-primary/5 border-primary/20 text-foreground border',
-        className
-      )}
-    >
-      <svg
-        className={cn(
-          'h-5 w-5 flex-shrink-0',
-          isExpired
-            ? 'text-destructive'
-            : isUrgent
-              ? 'text-orange-600 dark:text-orange-400'
-              : 'text-primary'
-        )}
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-        />
-      </svg>
-
-      <div className="flex-1">
-        {isExpired ? (
-          <p className="font-medium">{t('expired')}</p>
-        ) : displayMessage ? (
-          <p>{displayMessage}</p>
-        ) : (
-          <p>
-            {isUrgent ? `${t('hurry')} ` : ''}
-            {t('reservedFor')}{' '}
-            <span className="font-semibold tabular-nums">
-              {minutes}:{seconds.toString().padStart(2, '0')}
-            </span>
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Clock } from 'lucide-react';
+import type { ReservationInfo } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface ReservationCountdownProps {
+  reservation: ReservationInfo;
+  className?: string;
+}
+
+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
+      className={cn(
+        'flex items-center gap-3 rounded-lg px-4 py-3 text-sm',
+        isExpired
+          ? 'bg-destructive/10 border-destructive/20 text-destructive border'
+          : isUrgent
+            ? 'border border-orange-200 bg-orange-50 text-orange-800 dark:border-orange-800 dark:bg-orange-950/30 dark:text-orange-300'
+            : 'bg-primary/5 border-primary/20 text-foreground border',
+        className
+      )}
+    >
+      <Clock
+        className={cn(
+          'h-5 w-5 flex-shrink-0',
+          isExpired
+            ? 'text-destructive'
+            : isUrgent
+              ? 'text-orange-600 dark:text-orange-400'
+              : 'text-primary'
+        )}
+        aria-hidden="true"
+      />
+
+      <div className="flex-1">
+        {isExpired ? (
+          <p className="font-medium">{t('expired')}</p>
+        ) : displayMessage ? (
+          <p>{displayMessage}</p>
+        ) : (
+          <p>
+            {isUrgent ? `${t('hurry')} ` : ''}
+            {t('reservedFor')}{' '}
+            <span className="font-semibold tabular-nums">
+              {minutes}:{seconds.toString().padStart(2, '0')}
+            </span>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/ui/home/hero-section.tsx

@@ -2,6 +2,7 @@
 
 import { Link } from '@/core/lib/navigation';
 import { useTranslations } from '@/core/lib/translations';
+import { Button } from '@/components/ui/button';
 
 /** Homepage hero: welcome headline, subtitle, and shop-now CTA. */
 export function HeroSection({ storeName }: { storeName?: string | null }) {
@@ -17,12 +18,9 @@ export function HeroSection({ storeName }: { storeName?: string | null }) {
         <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
           {t('heroSubtitle')}
         </p>
-        <Link
-          href="/products"
-          className="bg-primary text-primary-foreground mt-8 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-        >
-          {tc('shopNow')}
-        </Link>
+        <Button asChild size="lg" className="mt-8 rounded px-6 text-base">
+          <Link href="/products">{tc('shopNow')}</Link>
+        </Button>
       </div>
     </section>
   );

package/templates/nextjs/base/src/ui/layout/announcement-bar.tsx.ejs

@@ -1,125 +1,116 @@
-/**
- * Storefront announcement bar — fully driven by the merchant's dashboard.
- *
- * The merchant configures announcements in the Brainerce dashboard under
- *   Sell → Content → Announcement
- *
- * Everything below is generic rendering logic — it adapts automatically to
- * any announcement shape returned by the API, so **you should not hardcode
- * the message or severity here**.
- *
- * API contract:
- *   GET → client.content.announcement.list(locale) → Content<'ANNOUNCEMENT'>[]
- *   Empty array → renders nothing (page layout stays intact).
- *
- * Time-bounded: each announcement may have `startsAt` / `endsAt` ISO
- * timestamps. We filter client-side so the cached server response can be
- * shared across visitors regardless of the current time.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-
-interface AnnouncementBarProps {
-  /** Pre-fetched list from the server. Pass `[]` to render nothing. */
-  announcements: Content<'ANNOUNCEMENT'>[];
-}
-
-const SEVERITY_STYLES: Record<'info' | 'warning' | 'success', string> = {
-  info: 'bg-blue-600 text-white',
-  warning: 'bg-amber-500 text-amber-950',
-  success: 'bg-emerald-600 text-white',
-};
-
-const STORAGE_KEY = 'brainerce_dismissed_announcements';
-
-export function AnnouncementBar({ announcements }: AnnouncementBarProps) {
-  const [dismissed, setDismissed] = React.useState<Set<string>>(() => new Set());
-
-  // Hydrate dismissals from localStorage on mount (avoids SSR/CSR mismatch).
-  React.useEffect(() => {
-    if (typeof window === 'undefined') return;
-    try {
-      const raw = window.localStorage.getItem(STORAGE_KEY);
-      if (raw) setDismissed(new Set(JSON.parse(raw) as string[]));
-    } catch {
-      // ignore malformed storage
-    }
-  }, []);
-
-  const dismiss = (id: string) => {
-    setDismissed((prev) => {
-      const next = new Set(prev);
-      next.add(id);
-      if (typeof window !== 'undefined') {
-        try {
-          window.localStorage.setItem(STORAGE_KEY, JSON.stringify([...next]));
-        } catch {
-          // ignore quota errors
-        }
-      }
-      return next;
-    });
-  };
-
-  const now = Date.now();
-  const visible = announcements.filter((a) => {
-    if (dismissed.has(a.id)) return false;
-    const startOk = !a.data.startsAt || new Date(a.data.startsAt).getTime() <= now;
-    const endOk = !a.data.endsAt || new Date(a.data.endsAt).getTime() >= now;
-    return startOk && endOk;
-  });
-
-  if (visible.length === 0) return null;
-
-  return (
-    <div role="region" aria-label="Site announcements">
-      {visible.map((announcement) => {
-        const severity = announcement.data.severity;
-        const tone = SEVERITY_STYLES[severity] ?? SEVERITY_STYLES.info;
-        return (
-          <div
-            key={announcement.id}
-            className={`flex items-center justify-center gap-3 px-4 py-2 text-sm ${tone}`}
-          >
-            <span className="flex-1 text-center">
-              {announcement.data.message}
-              {announcement.data.ctaHref && announcement.data.ctaLabel ? (
-                <>
-                  {' '}
-                  <a
-                    href={announcement.data.ctaHref}
-                    className="underline underline-offset-2"
-                  >
-                    {announcement.data.ctaLabel}
-                  </a>
-                </>
-              ) : null}
-            </span>
-            {announcement.data.dismissible ? (
-              <button
-                type="button"
-                onClick={() => dismiss(announcement.id)}
-                aria-label="Dismiss announcement"
-                className="text-current opacity-80 transition-opacity hover:opacity-100"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  className="h-4 w-4"
-                  aria-hidden="true"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            ) : null}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
+/**
+ * Storefront announcement bar — fully driven by the merchant's dashboard.
+ *
+ * The merchant configures announcements in the Brainerce dashboard under
+ *   Sell → Content → Announcement
+ *
+ * Everything below is generic rendering logic — it adapts automatically to
+ * any announcement shape returned by the API, so **you should not hardcode
+ * the message or severity here**.
+ *
+ * API contract:
+ *   GET → client.content.announcement.list(locale) → Content<'ANNOUNCEMENT'>[]
+ *   Empty array → renders nothing (page layout stays intact).
+ *
+ * Time-bounded: each announcement may have `startsAt` / `endsAt` ISO
+ * timestamps. We filter client-side so the cached server response can be
+ * shared across visitors regardless of the current time.
+ */
+'use client';
+
+import * as React from 'react';
+import { X } from 'lucide-react';
+import type { Content } from 'brainerce';
+
+interface AnnouncementBarProps {
+  /** Pre-fetched list from the server. Pass `[]` to render nothing. */
+  announcements: Content<'ANNOUNCEMENT'>[];
+}
+
+const SEVERITY_STYLES: Record<'info' | 'warning' | 'success', string> = {
+  info: 'bg-blue-600 text-white',
+  warning: 'bg-amber-500 text-amber-950',
+  success: 'bg-emerald-600 text-white',
+};
+
+const STORAGE_KEY = 'brainerce_dismissed_announcements';
+
+export function AnnouncementBar({ announcements }: AnnouncementBarProps) {
+  const [dismissed, setDismissed] = React.useState<Set<string>>(() => new Set());
+
+  // Hydrate dismissals from localStorage on mount (avoids SSR/CSR mismatch).
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      const raw = window.localStorage.getItem(STORAGE_KEY);
+      if (raw) setDismissed(new Set(JSON.parse(raw) as string[]));
+    } catch {
+      // ignore malformed storage
+    }
+  }, []);
+
+  const dismiss = (id: string) => {
+    setDismissed((prev) => {
+      const next = new Set(prev);
+      next.add(id);
+      if (typeof window !== 'undefined') {
+        try {
+          window.localStorage.setItem(STORAGE_KEY, JSON.stringify([...next]));
+        } catch {
+          // ignore quota errors
+        }
+      }
+      return next;
+    });
+  };
+
+  const now = Date.now();
+  const visible = announcements.filter((a) => {
+    if (dismissed.has(a.id)) return false;
+    const startOk = !a.data.startsAt || new Date(a.data.startsAt).getTime() <= now;
+    const endOk = !a.data.endsAt || new Date(a.data.endsAt).getTime() >= now;
+    return startOk && endOk;
+  });
+
+  if (visible.length === 0) return null;
+
+  return (
+    <div role="region" aria-label="Site announcements">
+      {visible.map((announcement) => {
+        const severity = announcement.data.severity;
+        const tone = SEVERITY_STYLES[severity] ?? SEVERITY_STYLES.info;
+        return (
+          <div
+            key={announcement.id}
+            className={`flex items-center justify-center gap-3 px-4 py-2 text-sm ${tone}`}
+          >
+            <span className="flex-1 text-center">
+              {announcement.data.message}
+              {announcement.data.ctaHref && announcement.data.ctaLabel ? (
+                <>
+                  {' '}
+                  <a
+                    href={announcement.data.ctaHref}
+                    className="underline underline-offset-2"
+                  >
+                    {announcement.data.ctaLabel}
+                  </a>
+                </>
+              ) : null}
+            </span>
+            {announcement.data.dismissible ? (
+              <button
+                type="button"
+                onClick={() => dismiss(announcement.id)}
+                aria-label="Dismiss announcement"
+                className="text-current opacity-80 transition-opacity hover:opacity-100"
+              >
+                <X className="h-4 w-4" aria-hidden="true" />
+              </button>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}