create-brainerce-store 1.62.0 → 1.64.0

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

@@ -1,24 +1,24 @@
-'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 with a "view all" link. */
-export function FeaturedProductsSection({ products }: { products: Product[] }) {
-  const t = useTranslations('home');
-  const tc = useTranslations('common');
-
-  return (
-    <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
-      <div className="mb-8 flex items-center justify-between">
-        <h2 className="text-foreground text-2xl font-bold">{t('featuredProducts')}</h2>
-        <Link href="/products" className="text-primary text-sm font-medium hover:underline">
-          {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 with a "view all" link. */
+export function FeaturedProductsSection({ products }: { products: Product[] }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+      <div className="mb-8 flex items-center justify-between">
+        <h2 className="text-foreground text-2xl font-bold">{t('featuredProducts')}</h2>
+        <Link href="/products" className="text-primary text-sm font-medium hover:underline">
+          {tc('viewAll')}
+        </Link>
+      </div>
+      <ProductGrid products={products} />
+    </section>
+  );
+}

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

@@ -1,27 +1,27 @@
-'use client';
-
-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 }) {
-  const t = useTranslations('home');
-  const tc = useTranslations('common');
-
-  return (
-    <section className="bg-muted">
-      <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
-        <h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
-          {t('welcomeTo')} {storeName || tc('store')}
-        </h1>
-        <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
-          {t('heroSubtitle')}
-        </p>
-        <Button asChild size="lg" className="mt-8 rounded px-6 text-base">
-          <Link href="/products">{tc('shopNow')}</Link>
-        </Button>
-      </div>
-    </section>
-  );
-}
+'use client';
+
+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 }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section className="bg-muted">
+      <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
+        <h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
+          {t('welcomeTo')} {storeName || tc('store')}
+        </h1>
+        <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
+          {t('heroSubtitle')}
+        </p>
+        <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/home/home-client.tsx

@@ -1,29 +1,29 @@
-'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 (
-      <div className="flex min-h-[60vh] items-center justify-center">
-        <LoadingSpinner size="lg" />
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <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 (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <DiscountBannerStrip banners={banners} />
+      <HeroSection storeName={storeInfo?.name} />
+      <FeaturedProductsSection products={products} />
+    </div>
+  );
+}

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

@@ -1,116 +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 { 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>
-  );
-}
+/**
+ * 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>
+  );
+}

package/templates/nextjs/base/src/ui/layout/faq-section.tsx.ejs

@@ -1,90 +1,90 @@
-/**
- * FAQ accordion — fully driven by the merchant's dashboard configuration.
- *
- * The merchant configures FAQs in the Brainerce dashboard under
- *   Sell → Content → FAQ
- *
- * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
- * pre-fetched payload as `faq`; this component knows nothing about which
- * key it came from.
- *
- * Two render branches:
- *   1. `faq` has items → shadcn Accordion of question/answer pairs
- *   2. `faq` is null OR has no items → friendly empty state with a contact
- *      CTA, so the /faq page never looks broken before the merchant seeds.
- *
- * Security: FAQ answers may contain merchant-authored HTML — we sanitize
- * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { sanitizeHtml } from '@/core/lib/sanitize';
-import { Link } from '@/core/lib/navigation';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@/components/ui/accordion';
-import { Button } from '@/components/ui/button';
-
-interface FaqSectionProps {
-  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
-  faq: Content<'FAQ'> | null;
-}
-
-export function FaqSection({ faq }: FaqSectionProps) {
-  const t = useTranslations('content');
-
-  const items = faq?.data?.items ?? [];
-  const heading = faq?.name || t('faqTitle');
-
-  // Empty state — runs when the merchant hasn't created a FAQ row yet,
-  // or the row exists but contains no items. Keep the page non-empty and
-  // give the visitor a path to contact instead of a blank screen.
-  if (!faq || items.length === 0) {
-    return (
-      <section className="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <h1 className="text-foreground mb-3 text-2xl font-semibold sm:text-3xl">{heading}</h1>
-        <p className="text-muted-foreground mb-6 text-sm sm:text-base">
-          <strong className="text-foreground">{t('faqEmptyTitle')}</strong>
-          <br />
-          {t('faqEmptyBody')}
-        </p>
-        <Button asChild>
-          <Link href="/contact">{t('faqContactCta')}</Link>
-        </Button>
-      </section>
-    );
-  }
-
-  return (
-    <section className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">{heading}</h1>
-      <Accordion
-        type="single"
-        collapsible
-        defaultValue="faq-0"
-        className="border-border rounded-lg border"
-      >
-        {items.map((item, idx) => (
-          <AccordionItem
-            key={idx}
-            value={`faq-${idx}`}
-            className="border-border last:border-b-0"
-          >
-            <AccordionTrigger className="hover:bg-muted/40 p-4 text-sm hover:no-underline sm:text-base">
-              {item.question}
-            </AccordionTrigger>
-            <AccordionContent className="text-muted-foreground prose prose-sm dark:prose-invert max-w-none px-4 pb-4 text-sm leading-relaxed">
-              <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }} />
-            </AccordionContent>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    </section>
-  );
-}
+/**
+ * FAQ accordion — fully driven by the merchant's dashboard configuration.
+ *
+ * The merchant configures FAQs in the Brainerce dashboard under
+ *   Sell → Content → FAQ
+ *
+ * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
+ * pre-fetched payload as `faq`; this component knows nothing about which
+ * key it came from.
+ *
+ * Two render branches:
+ *   1. `faq` has items → shadcn Accordion of question/answer pairs
+ *   2. `faq` is null OR has no items → friendly empty state with a contact
+ *      CTA, so the /faq page never looks broken before the merchant seeds.
+ *
+ * Security: FAQ answers may contain merchant-authored HTML — we sanitize
+ * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
+ */
+'use client';
+
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { sanitizeHtml } from '@/core/lib/sanitize';
+import { Link } from '@/core/lib/navigation';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Button } from '@/components/ui/button';
+
+interface FaqSectionProps {
+  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
+  faq: Content<'FAQ'> | null;
+}
+
+export function FaqSection({ faq }: FaqSectionProps) {
+  const t = useTranslations('content');
+
+  const items = faq?.data?.items ?? [];
+  const heading = faq?.name || t('faqTitle');
+
+  // Empty state — runs when the merchant hasn't created a FAQ row yet,
+  // or the row exists but contains no items. Keep the page non-empty and
+  // give the visitor a path to contact instead of a blank screen.
+  if (!faq || items.length === 0) {
+    return (
+      <section className="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <h1 className="text-foreground mb-3 text-2xl font-semibold sm:text-3xl">{heading}</h1>
+        <p className="text-muted-foreground mb-6 text-sm sm:text-base">
+          <strong className="text-foreground">{t('faqEmptyTitle')}</strong>
+          <br />
+          {t('faqEmptyBody')}
+        </p>
+        <Button asChild>
+          <Link href="/contact">{t('faqContactCta')}</Link>
+        </Button>
+      </section>
+    );
+  }
+
+  return (
+    <section className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">{heading}</h1>
+      <Accordion
+        type="single"
+        collapsible
+        defaultValue="faq-0"
+        className="border-border rounded-lg border"
+      >
+        {items.map((item, idx) => (
+          <AccordionItem
+            key={idx}
+            value={`faq-${idx}`}
+            className="border-border last:border-b-0"
+          >
+            <AccordionTrigger className="hover:bg-muted/40 p-4 text-sm hover:no-underline sm:text-base">
+              {item.question}
+            </AccordionTrigger>
+            <AccordionContent className="text-muted-foreground prose prose-sm dark:prose-invert max-w-none px-4 pb-4 text-sm leading-relaxed">
+              <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }} />
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </section>
+  );
+}

package/templates/nextjs/base/src/ui/layout/header-account.tsx

@@ -1,40 +1,40 @@
-'use client';
-
-/**
- * Auth-aware account control for the site header.
- *
- * The header itself is a server component fed by merchant-configured Content,
- * so it can't read client auth state. This small client island bridges that:
- * it links to `/account` when the visitor is signed in (the account page shows
- * profile + orders + sign-out) and to `/login` otherwise.
- *
- * The label/icon are i18n-driven via the `nav` namespace (`login` / `account`)
- * so RTL + translated stores stay consistent. Text is hidden on mobile to match
- * the cart icon's icon-only treatment; the icon + aria-label keep it accessible.
- */
-import * as React from 'react';
-import { User } from 'lucide-react';
-import { Link } from '@/core/lib/navigation';
-import { useAuth } from '@/core/providers/store-provider';
-import { useTranslations } from '@/core/lib/translations';
-
-export function HeaderAccount() {
-  const { isLoggedIn } = useAuth();
-  const t = useTranslations('nav');
-
-  // Guests land on /login; signed-in visitors go to /account (which itself
-  // bounces guests back to /login, so the link is safe even mid auth-resolve).
-  const href = isLoggedIn ? '/account' : '/login';
-  const label = isLoggedIn ? t('account') : t('login');
-
-  return (
-    <Link
-      href={href}
-      aria-label={label}
-      className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 items-center justify-center gap-1.5 rounded-md px-2 transition-colors"
-    >
-      <User className="h-5 w-5" aria-hidden="true" />
-      <span className="hidden text-sm font-medium sm:inline">{label}</span>
-    </Link>
-  );
-}
+'use client';
+
+/**
+ * Auth-aware account control for the site header.
+ *
+ * The header itself is a server component fed by merchant-configured Content,
+ * so it can't read client auth state. This small client island bridges that:
+ * it links to `/account` when the visitor is signed in (the account page shows
+ * profile + orders + sign-out) and to `/login` otherwise.
+ *
+ * The label/icon are i18n-driven via the `nav` namespace (`login` / `account`)
+ * so RTL + translated stores stay consistent. Text is hidden on mobile to match
+ * the cart icon's icon-only treatment; the icon + aria-label keep it accessible.
+ */
+import * as React from 'react';
+import { User } from 'lucide-react';
+import { Link } from '@/core/lib/navigation';
+import { useAuth } from '@/core/providers/store-provider';
+import { useTranslations } from '@/core/lib/translations';
+
+export function HeaderAccount() {
+  const { isLoggedIn } = useAuth();
+  const t = useTranslations('nav');
+
+  // Guests land on /login; signed-in visitors go to /account (which itself
+  // bounces guests back to /login, so the link is safe even mid auth-resolve).
+  const href = isLoggedIn ? '/account' : '/login';
+  const label = isLoggedIn ? t('account') : t('login');
+
+  return (
+    <Link
+      href={href}
+      aria-label={label}
+      className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 items-center justify-center gap-1.5 rounded-md px-2 transition-colors"
+    >
+      <User className="h-5 w-5" aria-hidden="true" />
+      <span className="hidden text-sm font-medium sm:inline">{label}</span>
+    </Link>
+  );
+}