create-brainerce-store 1.51.0 → 1.52.0

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

@@ -1,103 +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 → 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';
-
-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 [openIdx, setOpenIdx] = React.useState<number | null>(0);
-
-  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>
-        <a
-          href="/contact"
-          className="bg-primary text-primary-foreground inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:opacity-90"
-        >
-          {t('faqContactCta')}
-        </a>
-      </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>
-      <ul className="border-border divide-border divide-y rounded-lg border">
-        {items.map((item, idx) => {
-          const open = openIdx === idx;
-          return (
-            <li key={idx}>
-              <button
-                type="button"
-                onClick={() => setOpenIdx(open ? null : idx)}
-                aria-expanded={open}
-                className="hover:bg-muted/40 flex w-full items-center justify-between gap-4 p-4 text-start transition-colors"
-              >
-                <span className="text-foreground text-sm font-medium sm:text-base">
-                  {item.question}
-                </span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  className={`text-muted-foreground h-4 w-4 transition-transform ${
-                    open ? 'rotate-180' : ''
-                  }`}
-                  aria-hidden="true"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-                </svg>
-              </button>
-              {open ? (
-                <div
-                  className="text-muted-foreground prose prose-sm dark:prose-invert max-w-none px-4 pb-4 text-sm leading-relaxed"
-                  dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
-                />
-              ) : null}
-            </li>
-          );
-        })}
-      </ul>
-    </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

@@ -13,26 +13,11 @@
  * 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';
 
-const UserIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={2}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-    <circle cx="12" cy="7" r="4" />
-  </svg>
-);
-
 export function HeaderAccount() {
   const { isLoggedIn } = useAuth();
   const t = useTranslations('nav');
@@ -48,7 +33,7 @@ export function HeaderAccount() {
       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"
     >
-      <UserIcon className="h-5 w-5" />
+      <User className="h-5 w-5" aria-hidden="true" />
       <span className="hidden text-sm font-medium sm:inline">{label}</span>
     </Link>
   );

package/templates/nextjs/base/src/ui/layout/language-switcher.tsx.ejs

@@ -1,70 +1,80 @@
-<% if (i18nEnabled) { %>
-'use client';
-
-import { usePathname } from 'next/navigation';
-import { supportedLocales } from '@/i18n';
-
-const LOCALE_NAMES: Record<string, string> = {
-  en: 'English',
-  he: 'עברית',
-  ar: 'العربية',
-  es: 'Español',
-  fr: 'Français',
-  de: 'Deutsch',
-  it: 'Italiano',
-  pt: 'Português',
-  nl: 'Nederlands',
-  ja: '日本語',
-  ko: '한국어',
-  zh: '中文',
-  ru: 'Русский',
-  tr: 'Türkçe',
-  pl: 'Polski',
-  sv: 'Svenska',
-  da: 'Dansk',
-  no: 'Norsk',
-  fi: 'Suomi',
-  cs: 'Čeština',
-  th: 'ไทย',
-  vi: 'Tiếng Việt',
-};
-
-const defaultLocale = '<%= defaultLocale %>';
-
-export function LanguageSwitcher() {
-  const pathname = usePathname();
-  const firstSeg = pathname.split('/')[1];
-  const currentLocale = supportedLocales.includes(firstSeg as (typeof supportedLocales)[number])
-    ? firstSeg
-    : defaultLocale;
-
-  function switchLocale(newLocale: string) {
-    // Strip any existing locale segment, then re-add only if the new one
-    // isn't the default — matches the as-needed prefix scheme in middleware.
-    const segments = pathname.split('/');
-    if (supportedLocales.includes(segments[1] as (typeof supportedLocales)[number])) {
-      segments.splice(1, 1);
-    }
-    const bare = segments.join('/') || '/';
-    window.location.href =
-      newLocale === defaultLocale ? bare : `/${newLocale}${bare === '/' ? '' : bare}`;
-  }
-
-  if (supportedLocales.length <= 1) return null;
-
-  return (
-    <select
-      value={currentLocale}
-      onChange={(e) => switchLocale(e.target.value)}
-      className="text-sm border rounded px-2 py-1 bg-transparent"
-      aria-label="Select language"
-    >
-      {supportedLocales.map((locale) => (
-        <option key={locale} value={locale}>
-          {LOCALE_NAMES[locale] || locale}
-        </option>
-      ))}
-    </select>
-  );
-}
-<% } %>
+<% if (i18nEnabled) { %>
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { supportedLocales } from '@/i18n';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+const LOCALE_NAMES: Record<string, string> = {
+  en: 'English',
+  he: 'עברית',
+  ar: 'العربية',
+  es: 'Español',
+  fr: 'Français',
+  de: 'Deutsch',
+  it: 'Italiano',
+  pt: 'Português',
+  nl: 'Nederlands',
+  ja: '日本語',
+  ko: '한국어',
+  zh: '中文',
+  ru: 'Русский',
+  tr: 'Türkçe',
+  pl: 'Polski',
+  sv: 'Svenska',
+  da: 'Dansk',
+  no: 'Norsk',
+  fi: 'Suomi',
+  cs: 'Čeština',
+  th: 'ไทย',
+  vi: 'Tiếng Việt',
+};
+
+const defaultLocale = '<%= defaultLocale %>';
+
+export function LanguageSwitcher() {
+  const pathname = usePathname();
+  const firstSeg = pathname.split('/')[1];
+  const currentLocale = supportedLocales.includes(firstSeg as (typeof supportedLocales)[number])
+    ? firstSeg
+    : defaultLocale;
+
+  function switchLocale(newLocale: string) {
+    // Strip any existing locale segment, then re-add only if the new one
+    // isn't the default — matches the as-needed prefix scheme in middleware.
+    const segments = pathname.split('/');
+    if (supportedLocales.includes(segments[1] as (typeof supportedLocales)[number])) {
+      segments.splice(1, 1);
+    }
+    const bare = segments.join('/') || '/';
+    window.location.href =
+      newLocale === defaultLocale ? bare : `/${newLocale}${bare === '/' ? '' : bare}`;
+  }
+
+  if (supportedLocales.length <= 1) return null;
+
+  return (
+    <Select value={currentLocale} onValueChange={switchLocale}>
+      <SelectTrigger
+        className="h-8 w-auto gap-1 rounded border bg-transparent px-2 py-1 text-sm"
+        aria-label="Select language"
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {supportedLocales.map((locale) => (
+          <SelectItem key={locale} value={locale}>
+            {LOCALE_NAMES[locale] || locale}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+<% } %>