@numueg/theme-cli 0.5.0 → 0.6.0

package/templates/scaffold/src/sections/promo_banner.tsx

@@ -0,0 +1,80 @@
+import { EditableImage } from "@numueg/theme-sdk";
+import { EditableText } from "../lib/EditableText";
+import type { EmpSectionProps } from "../lib/section";
+import { useT } from "../lib/i18n";
+
+interface PromoSettings {
+  badge_text?: string;
+  headline?: string;
+  subtitle?: string;
+  cta_text?: string;
+  cta_link?: string;
+  image_url?: string;
+}
+
+/**
+ * Full-width black promo banner — square image beside a badge + headline +
+ * subtitle and a light pill CTA. All text + the image are inline-editable.
+ */
+export default function PromoBanner({ id, settings }: EmpSectionProps) {
+  const s = settings as PromoSettings;
+  const t = useT();
+  const badge = s.badge_text ?? t("Limited offer", "عرض محدود");
+  const headline = s.headline ?? t("25% off all accessories", "خصم ٢٥٪ على كل الإكسسوارات");
+  const subtitle = s.subtitle ?? t("Ends this month — don't miss out!", "العرض ساري لنهاية الشهر. متفوتش الفرصة!");
+  const ctaText = s.cta_text ?? t("Shop now", "تسوق الآن");
+  const ctaLink = s.cta_link ?? "/products";
+
+  return (
+    <section style={{ paddingBlock: "2rem" }}>
+      <div className="nt-container">
+        <div className="nt-promo">
+          <div className="nt-promo__img">
+            <EditableImage
+              sectionId={id}
+              settingId="image_url"
+              src={
+                s.image_url ||
+                "https://images.unsplash.com/photo-1611085583191-a3b181a88401?w=600"
+              }
+              alt=""
+            />
+          </div>
+          <div className="nt-promo__body">
+            {badge ? (
+              <EditableText
+                as="span"
+                className="nt-promo__badge"
+                sectionId={id}
+                settingId="badge_text"
+                value={badge}
+              />
+            ) : null}
+            <EditableText
+              as="h3"
+              className="nt-promo__title"
+              sectionId={id}
+              settingId="headline"
+              value={headline}
+            />
+            <EditableText
+              as="p"
+              className="nt-promo__sub"
+              sectionId={id}
+              settingId="subtitle"
+              value={subtitle}
+            />
+            <a className="nt-btn-light" href={ctaLink}>
+              <EditableText
+                as="span"
+                sectionId={id}
+                settingId="cta_text"
+                value={ctaText}
+              />
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/scaffold/src/sections/rich_text.tsx

@@ -0,0 +1,51 @@
+import { RichText } from "@numueg/theme-sdk";
+import { EditableText } from "../lib/EditableText";
+import type { EmpSectionProps } from "../lib/section";
+
+interface RichTextSettings {
+  title?: string;
+  content?: string;
+  align?: "start" | "center";
+  width?: "narrow" | "wide";
+}
+
+/**
+ * Rich-text content block — body for the `page` template (About / Shipping /
+ * Returns / Terms CMS pages). The merchant's HTML lives in `content` and is
+ * rendered through the SDK's sanitising `<RichText>`; the optional title is
+ * inline-editable.
+ */
+export default function RichTextSection({ id, settings }: EmpSectionProps) {
+  const s = settings as RichTextSettings;
+  const align = s.align === "center" ? "center" : "start";
+  const narrow = s.width !== "wide";
+
+  return (
+    <section className="nt-container" style={{ paddingBlock: "3rem" }}>
+      <div
+        className="nt-richtext"
+        style={{
+          textAlign: align,
+          maxWidth: narrow ? "44rem" : "64rem",
+          marginInline: align === "center" ? "auto" : undefined,
+        }}
+      >
+        {s.title ? (
+          <EditableText
+            as="h1"
+            className="nt-display-sm"
+            sectionId={id}
+            settingId="title"
+            value={s.title}
+            style={{ marginBottom: "1.5rem" }}
+          />
+        ) : null}
+        {s.content ? (
+          <RichText className="nt-prose" html={s.content} />
+        ) : (
+          <p className="nt-placeholder">أضف المحتوى من إعدادات القسم.</p>
+        )}
+      </div>
+    </section>
+  );
+}

package/templates/scaffold/src/sections/search_results.tsx

@@ -0,0 +1,93 @@
+import {
+  useMemo,
+  useState } from "react";
+import {
+  usePage,
+  useProducts,
+  type Product,
+} from "@numueg/theme-sdk";
+import { EditableText } from "../lib/EditableText";
+import type { EmpSectionProps } from "../lib/section";
+import { ProductCard } from "../lib/ProductCard";
+
+interface SearchSettings {
+  title?: string;
+  search_placeholder?: string;
+  no_results_text?: string;
+  columns_desktop?: number;
+}
+
+/**
+ * Search results — body for the `search` template. Seeds the query from
+ * `page.data.query` (the storefront /search route stashes it) and lets the
+ * visitor refine in a live box. Uses the host's pre-fetched `page.data.results`
+ * when present, else filters `useProducts()` client-side (customizer preview).
+ */
+export default function SearchResults({ id, settings }: EmpSectionProps) {
+  const s = settings as SearchSettings;
+  const cols = Math.max(2, Math.min(5, s.columns_desktop ?? 4));
+  const placeholder = s.search_placeholder ?? "ابحث عن المنتجات…";
+
+  const page = usePage();
+  const pd = page?.data as Record<string, unknown> | undefined;
+  const initialQuery =
+    (pd?.query as string | undefined) ?? (pd?.q as string | undefined) ?? "";
+  const preFetched = (pd?.results as Product[] | undefined) ?? [];
+
+  const { products } = useProducts({ fetchIfMissing: true });
+  const [query, setQuery] = useState(initialQuery);
+
+  const matches = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return preFetched;
+    const pool = preFetched.length > 0 ? preFetched : products;
+    return pool.filter(
+      (p) =>
+        p.name?.toLowerCase().includes(needle) ||
+        p.description?.toLowerCase().includes(needle),
+    );
+  }, [query, preFetched, products]);
+
+  return (
+    <section className="nt-container" style={{ paddingBlock: "2.5rem" }}>
+      <EditableText
+        as="h1"
+        className="nt-display-sm"
+        sectionId={id}
+        settingId="title"
+        value={s.title ?? "البحث"}
+        style={{ marginBottom: "1.25rem" }}
+      />
+
+      <input
+        className="nt-input"
+        type="search"
+        value={query}
+        placeholder={placeholder}
+        onChange={(e) => setQuery(e.target.value)}
+        style={{ marginBottom: "1.5rem" }}
+      />
+
+      {query.trim() ? (
+        <p className="nt-label" style={{ marginBottom: "1.5rem" }}>
+          {matches.length} نتيجة لـ "{query.trim()}"
+        </p>
+      ) : null}
+
+      {matches.length > 0 ? (
+        <div className="nt-grid" style={{ ["--cols" as string]: cols }}>
+          {matches.map((p) => (
+            <ProductCard key={p.id} product={p} />
+          ))}
+        </div>
+      ) : (
+        <p className="nt-placeholder" style={{ paddingBlock: "3rem" }}>
+          {query.trim()
+            ? s.no_results_text ||
+              "لا توجد نتائج. جرّب كلمة أخرى أو تصفّح كل التشكيلة."
+            : "اكتب كلمة للبحث في المتجر."}
+        </p>
+      )}
+    </section>
+  );
+}

package/templates/scaffold/src/sections/size_chart.tsx

@@ -0,0 +1,109 @@
+import {
+  useState } from "react";
+import { useProductSizeChart,
+} from "@numueg/theme-sdk";
+import { EditableText } from "../lib/EditableText";
+import type { EmpSectionProps } from "../lib/section";
+
+interface SizeChartSettings {
+  trigger_label?: string;
+  title?: string;
+}
+
+/**
+ * Size guide. Resolution (product `custom` → store `default` → `off`) is owned
+ * by the SDK's `useProductSizeChart()` so every theme resolves it identically
+ * to the merchant hub + backend validator. Renders a trigger pill + modal
+ * table; returns null when there's nothing to show.
+ */
+export default function SizeChart({ id, settings }: EmpSectionProps) {
+  const s = settings as SizeChartSettings;
+  const [open, setOpen] = useState(false);
+  const chart = useProductSizeChart();
+
+  if (!chart) return null;
+  const unit = chart.unit ? ` (${chart.unit})` : "";
+
+  return (
+    <div className="nt-container" style={{ paddingBottom: "1rem" }}>
+      <button
+        className="nt-sizeguide__trigger"
+        type="button"
+        onClick={() => setOpen(true)}
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+          <path d="M3 7h18v10H3z" />
+          <path d="M7 7v4M11 7v6M15 7v4M19 7v6" />
+        </svg>
+        <EditableText
+          as="span"
+          sectionId={id}
+          settingId="trigger_label"
+          value={s.trigger_label || "دليل المقاسات"}
+        />
+      </button>
+
+      {open ? (
+        <div
+          className="nt-modal"
+          role="dialog"
+          aria-modal="true"
+          aria-label={s.title || "دليل المقاسات"}
+        >
+          <div className="nt-modal__overlay" onClick={() => setOpen(false)} />
+          <div className="nt-modal__panel">
+            <div className="nt-modal__head">
+              <h2 className="nt-modal__title">
+                {(s.title || "دليل المقاسات") + unit}
+              </h2>
+              <button
+                className="nt-drawer__close"
+                type="button"
+                onClick={() => setOpen(false)}
+                aria-label="إغلاق"
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                  <path d="M18 6 6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div className="nt-modal__body">
+              {chart.image_url ? (
+                <img
+                  className="nt-sizeguide__img"
+                  src={chart.image_url}
+                  alt=""
+                />
+              ) : null}
+              <table className="nt-sizetable">
+                <thead>
+                  <tr>
+                    <th>المقاس</th>
+                    {chart.column_headers.map((h, i) => (
+                      <th key={i}>{h}</th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {chart.rows.map((row, ri) => (
+                    <tr key={ri}>
+                      <th scope="row">{row.size}</th>
+                      {chart.column_headers.map((_, ci) => (
+                        <td key={ci}>{row.values[ci] ?? "—"}</td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              {chart.notes ? (
+                <p className="nt-muted" style={{ fontSize: "0.8125rem", marginTop: "1rem" }}>
+                  {chart.notes}
+                </p>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/templates/scaffold/src/sections/testimonials.tsx

@@ -0,0 +1,112 @@
+import { type BlockInstance } from "@numueg/theme-sdk";
+import { EditableText } from "../lib/EditableText";
+import type { EmpSectionProps } from "../lib/section";
+import { useT } from "../lib/i18n";
+
+interface TestimonialsSettings {
+  title?: string;
+}
+
+/** Customer reviews — three bordered cards on the off-white canvas, each with
+ *  black star rating, quote and an avatar initial. Cards come from `review`
+ *  blocks the merchant arranges in the customizer. */
+export default function Testimonials({
+  id,
+  settings,
+  blocks,
+  blockOrder,
+}: EmpSectionProps) {
+  const s = settings as TestimonialsSettings;
+  const t = useT();
+  const title = s.title ?? t("What our customers say", "رأي عملائنا");
+
+  const reviews = (blockOrder ?? [])
+    .map((bid) => ({ bid, block: blocks?.[bid] }))
+    .filter(
+      (x): x is { bid: string; block: BlockInstance } =>
+        !!x.block && !x.block.disabled && x.block.type === "review",
+    );
+
+  if (reviews.length === 0) return null;
+
+  return (
+    <section className="nt-section nt-bg-white">
+      <div className="nt-container">
+        <EditableText
+          as="h2"
+          className="nt-display-sm"
+          sectionId={id}
+          settingId="title"
+          value={title}
+          style={{ textAlign: "center", marginBottom: "2rem" }}
+        />
+        <div className="nt-tgrid">
+          {reviews.map(({ bid, block }) => {
+            const rating = Math.max(
+              0,
+              Math.min(5, Number(block.settings.rating ?? 5)),
+            );
+            const author = (block.settings.author as string) || "عميل";
+            const city = block.settings.city as string | undefined;
+            const text = (block.settings.text as string) || "";
+            return (
+              <div className="nt-tcard" key={bid}>
+                <div className="nt-stars" aria-label={`${rating} من 5`}>
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <Star key={i} filled={i < rating} />
+                  ))}
+                </div>
+                <EditableText
+                  as="p"
+                  className="nt-tquote"
+                  sectionId={id}
+                  blockId={bid}
+                  settingId="text"
+                  value={`"${text}"`}
+                />
+                <div className="nt-tauthor">
+                  <span className="nt-tavatar">{author[0]}</span>
+                  <div>
+                    <EditableText
+                      as="p"
+                      className="nt-tname"
+                      sectionId={id}
+                      blockId={bid}
+                      settingId="author"
+                      value={author}
+                    />
+                    {city ? (
+                      <EditableText
+                        as="p"
+                        className="nt-tcity"
+                        sectionId={id}
+                        blockId={bid}
+                        settingId="city"
+                        value={city}
+                      />
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const Star = ({ filled }: { filled: boolean }) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill={filled ? "currentColor" : "none"}
+    stroke="currentColor"
+    strokeWidth="2"
+    className={`nt-star${filled ? " is-filled" : ""}`}
+    aria-hidden="true"
+  >
+    <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+  </svg>
+);