@numueg/theme-cli 0.4.1 → 0.6.0

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

@@ -0,0 +1,109 @@
+import {
+  useState } from "react";
+import {
+  usePage,
+  useProducts,
+  type Product,
+} from "@numueg/theme-sdk";
+import { EditableText } from "../lib/EditableText";
+import type { EmpSectionProps } from "../lib/section";
+import { useT } from "../lib/i18n";
+import { ProductCard } from "../lib/ProductCard";
+
+interface FeaturedSettings {
+  title?: string;
+  view_all_link?: string;
+  view_all_label?: string;
+  max_items?: number;
+  tab_trending_label?: string;
+  tab_bestseller_label?: string;
+  tab_new_label?: string;
+}
+
+const TABS: Array<{
+  key: string;
+  settingId: keyof FeaturedSettings;
+  en: string;
+  ar: string;
+  tags: string[];
+}> = [
+  { key: "trending", settingId: "tab_trending_label", en: "Trending", ar: "الأكثر رواجاً", tags: ["رائج", "trending", "مميز", "featured"] },
+  { key: "bestseller", settingId: "tab_bestseller_label", en: "Bestsellers", ar: "الأكثر مبيعاً", tags: ["مبيع", "bestseller", "best", "الأكثر مبيعاً"] },
+  { key: "new", settingId: "tab_new_label", en: "New", ar: "وصل حديثاً", tags: ["جديد", "new", "حديث"] },
+];
+
+/** Filter products for a tab by their `tags` (case-insensitive substring),
+ *  falling back to the full list so a tab never renders empty. */
+function filterByTab(products: Product[], key: string): Product[] {
+  const tab = TABS.find((t) => t.key === key);
+  if (!tab || key === "trending") return products;
+  const matched = products.filter((p) =>
+    (p.tags ?? []).some((t) =>
+      tab.tags.some((needle) => t.toLowerCase().includes(needle.toLowerCase())),
+    ),
+  );
+  return matched.length > 0 ? matched : products;
+}
+
+/**
+ * Featured rail — large uppercase title with pill filter tabs on one row, then
+ * a horizontally-scrollable snap rail of product cards (Empire's signature
+ * layout). Reads the SSR-forwarded catalog from `page.data.products`, falling
+ * back to a client fetch when the route didn't pre-fetch.
+ */
+export default function FeaturedCollection({ id, settings }: EmpSectionProps) {
+  const s = settings as FeaturedSettings;
+  const tr = useT();
+  const title = s.title ?? tr("Shop", "المتجر");
+  const viewAll = s.view_all_link || "/products";
+  const max = Math.max(4, Math.min(12, s.max_items ?? 8));
+
+  const page = usePage();
+  const ssrProducts = (page?.data?.products as Product[] | undefined) ?? [];
+  const fallback = useProducts({ fetchIfMissing: ssrProducts.length === 0 });
+  const products = ssrProducts.length > 0 ? ssrProducts : fallback.products;
+
+  const [tab, setTab] = useState("trending");
+
+  const filtered = filterByTab(products, tab).slice(0, max);
+
+  if (products.length === 0) return null;
+
+  return (
+    <section className="nt-section nt-bg-white">
+      <div className="nt-container">
+        <div className="nt-shop__head">
+          <EditableText
+            as="h2"
+            className="nt-display-sm"
+            sectionId={id}
+            settingId="title"
+            value={title}
+          />
+          <div className="nt-tabs">
+            {TABS.map((item) => (
+              <button
+                key={item.key}
+                type="button"
+                className="nt-chip"
+                aria-pressed={tab === item.key}
+                onClick={() => setTab(item.key)}
+              >
+                {(s[item.settingId] as string) || tr(item.en, item.ar)}
+              </button>
+            ))}
+            <a className="nt-chip" href={viewAll}>
+              {s.view_all_label || tr("View all", "عرض الكل")}
+            </a>
+          </div>
+        </div>
+
+        <div className="nt-rail">
+          {filtered.map((p) => (
+            <ProductCard key={p.id} product={p} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,187 @@
+import {
+  useMemo,
+  useState } from "react";
+import {
+  useProductOptional,
+  useRelatedProducts,
+  useProducts,
+  usePage,
+  useCart,
+  useLocalization,
+  useShop,
+  type Product,
+} from "@numueg/theme-sdk";
+import { EditableText } from "../lib/EditableText";
+import type { EmpSectionProps } from "../lib/section";
+import { openCart } from "../lib/cartUI";
+
+interface FbtSettings {
+  title?: string;
+  max_items?: number;
+  /** Merchant on/off switch (belt-and-suspenders alongside the section
+   *  visibility toggle, which the host honours via `instance.disabled`). */
+  enabled?: boolean;
+  /** When true, render only the card (no full-width section wrapper) so it can
+   *  sit inside the PDP buy column. */
+  embedded?: boolean;
+}
+
+/**
+ * Frequently bought together — seeds the bundle with the current product and
+ * appends related items (`useRelatedProducts`, falling back to the page list).
+ * Each row is a togglable checkbox; "أضف الكل" adds every checked product to the
+ * live cart in one pass and pops the drawer. Hidden when fewer than 2 items.
+ */
+export default function FrequentlyBought({ id, settings }: EmpSectionProps) {
+  const s = settings as FbtSettings;
+  const max = Math.max(2, Math.min(4, s.max_items ?? 3));
+
+  const product = useProductOptional();
+  const related = useRelatedProducts(product?.id, { limit: max });
+  const page = usePage();
+  const { addItem } = useCart();
+  const { formatMoney } = useLocalization();
+  const shop = useShop();
+
+  const pageProducts = (page?.data?.products as Product[] | undefined) ?? [];
+  // Last-resort fallback so the bundle still renders on PDP routes that pass
+  // only the single product (no related endpoint data, no product list).
+  const catalog = useProducts({ fetchIfMissing: true });
+
+  const bundle = useMemo(() => {
+    const pool =
+      related.items.length > 0
+        ? related.items
+        : pageProducts.length > 0
+          ? pageProducts
+          : catalog.products;
+    const seen = new Set<string>();
+    const list: Product[] = [];
+    if (product) {
+      list.push(product);
+      seen.add(product.id);
+    }
+    for (const p of pool) {
+      if (list.length >= max) break;
+      if (seen.has(p.id)) continue;
+      seen.add(p.id);
+      list.push(p);
+    }
+    return list;
+  }, [product, related.items, pageProducts, catalog.products, max]);
+
+  const [selected, setSelected] = useState<Record<string, boolean>>({});
+  const isOn = (pid: string) => selected[pid] !== false; // default on
+  const [pending, setPending] = useState(false);
+
+  const currency = product?.currency || shop?.currency;
+  // Coerce to Number — related/catalog endpoints can return `price` as a string,
+  // which would make `sum + p.price` concatenate ("0"+"12"+"110" → 12110)
+  // instead of adding.
+  const total = bundle
+    .filter((p) => isOn(p.id))
+    .reduce((sum, p) => sum + (Number(p.price) || 0), 0);
+
+  if (s.enabled === false) return null;
+  // On a product page the PDP buy-box embeds its own FBT (`embedded`), so a
+  // standalone section here would be a duplicate. Step aside when a product is
+  // in context and we're not the embedded instance. (Off-PDP, `product` is
+  // null and the standalone "you might also like" use still renders.)
+  if (!s.embedded && product) return null;
+  if (bundle.length < 2) return null;
+
+  async function addBundle() {
+    if (pending) return;
+    setPending(true);
+    try {
+      for (const p of bundle) {
+        if (!isOn(p.id)) continue;
+        await addItem(p.id, p.variants?.[0]?.id, 1);
+      }
+      openCart();
+    } finally {
+      setPending(false);
+    }
+  }
+
+  const card = (
+    <div className="nt-fbt-card">
+      <EditableText
+        as="h2"
+        className="nt-fbt-card__title"
+        sectionId={id}
+        settingId="title"
+        value={s.title ?? "يُشترى عادةً معاً"}
+      />
+
+      <div className="nt-fbt">
+        {bundle.map((p, i) => {
+          // Tolerate images as ProductImage objects OR raw url strings.
+          const raw = p.images?.[0] as unknown;
+          const imgUrl =
+            typeof raw === "string" ? raw : (raw as { url?: string } | undefined)?.url;
+          return (
+            <div className="nt-fbt__item" key={p.id}>
+              <label className="nt-fbt__card">
+                <input
+                  type="checkbox"
+                  checked={isOn(p.id)}
+                  onChange={(e) =>
+                    setSelected((prev) => ({ ...prev, [p.id]: e.target.checked }))
+                  }
+                />
+                <span className="nt-fbt__thumb">
+                  {imgUrl ? (
+                    <img
+                      src={imgUrl}
+                      alt={p.name}
+                      loading="lazy"
+                      onError={(e) => {
+                        const el = e.target as HTMLImageElement;
+                        el.style.visibility = "hidden";
+                      }}
+                    />
+                  ) : (
+                    <span className="nt-card__placeholder" aria-hidden="true" />
+                  )}
+                </span>
+                <span className="nt-fbt__info">
+                  <span className="nt-fbt__name">{p.name}</span>
+                  <span className="nt-fbt__price">
+                    {formatMoney(Number(p.price) || 0, currency)}
+                  </span>
+                </span>
+              </label>
+              {i < bundle.length - 1 ? (
+                <span className="nt-fbt__plus" aria-hidden="true">
+                  +
+                </span>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="nt-fbt__foot">
+        <p className="nt-fbt__total">
+          الإجمالي: <strong>{formatMoney(total, currency)}</strong>
+        </p>
+        <button
+          className="nt-btn"
+          type="button"
+          disabled={pending || total <= 0}
+          onClick={addBundle}
+        >
+          {pending ? "..." : "أضف الكل للسلة"}
+        </button>
+      </div>
+    </div>
+  );
+
+  if (s.embedded) return card;
+  return (
+    <section className="nt-container" style={{ paddingBlock: "2rem" }}>
+      {card}
+    </section>
+  );
+}

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

@@ -0,0 +1,133 @@
+import {
+  useEffect,
+  useState } from "react";
+import { EditableText } from "../lib/EditableText";
+import type { EmpSectionProps } from "../lib/section";
+import { useT } from "../lib/i18n";
+
+interface HeroSettings {
+  headline?: string;
+  subtitle?: string;
+  cta_text?: string;
+  cta_link?: string;
+  image_1?: string;
+  image_2?: string;
+  image_3?: string;
+  autoplay?: boolean;
+}
+
+/**
+ * Full-bleed hero slideshow — black canvas, cross-fading cover images with a
+ * dark bottom gradient, centered headline + pill CTA at the bottom, dots and
+ * prev/next arrows. Slides auto-advance on a timer (client-only effect, so the
+ * SSR render is deterministic — slide 0 paints first).
+ */
+export default function Hero({ id, settings }: EmpSectionProps) {
+  const s = settings as HeroSettings;
+  const t = useT();
+  const headline = s.headline ?? t("Discover the new collection", "اكتشف التشكيلة الجديدة");
+  const subtitle = s.subtitle ?? t("Shop now", "تسوق الآن");
+  const ctaText = s.cta_text ?? t("Shop", "تسوق");
+  const ctaLink = s.cta_link ?? "/products";
+
+  const slides = [s.image_1, s.image_2, s.image_3].filter(
+    (x): x is string => Boolean(x),
+  );
+  if (slides.length === 0) {
+    slides.push(
+      "https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=1600",
+    );
+  }
+
+  const [current, setCurrent] = useState(0);
+  const count = slides.length;
+
+  useEffect(() => {
+    if (s.autoplay === false || count <= 1) return;
+    const t = setInterval(() => setCurrent((p) => (p + 1) % count), 6000);
+    return () => clearInterval(t);
+  }, [count, s.autoplay]);
+
+  const go = (i: number) => setCurrent(((i % count) + count) % count);
+
+  return (
+    <section className="nt-hero">
+      {slides.map((src, i) => (
+        <div
+          key={i}
+          className={`nt-hero__slide${i === current ? " is-active" : ""}`}
+          aria-hidden={i !== current}
+        >
+          <img src={src} alt="" />
+          <div className="nt-hero__overlay" />
+        </div>
+      ))}
+
+      <div className="nt-hero__content">
+        <EditableText
+          as="h1"
+          className="nt-hero__title"
+          sectionId={id}
+          settingId="headline"
+          value={headline}
+        />
+        <EditableText
+          as="p"
+          className="nt-hero__sub"
+          sectionId={id}
+          settingId="subtitle"
+          value={subtitle}
+        />
+        <a className="nt-hero__cta" href={ctaLink}>
+          <EditableText
+            as="span"
+            sectionId={id}
+            settingId="cta_text"
+            value={ctaText}
+          />
+        </a>
+
+        {count > 1 ? (
+          <div className="nt-hero__dots">
+            {slides.map((_, i) => (
+              <button
+                key={i}
+                className={`nt-hero__dot${i === current ? " is-active" : ""}`}
+                type="button"
+                aria-label={`شريحة ${i + 1}`}
+                onClick={() => go(i)}
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      {count > 1 ? (
+        <>
+          <button
+            className="nt-hero__arrow nt-hero__arrow--prev"
+            type="button"
+            aria-label="السابق"
+            onClick={() => go(current - 1)}
+          >
+            <Chevron dir="start" />
+          </button>
+          <button
+            className="nt-hero__arrow nt-hero__arrow--next"
+            type="button"
+            aria-label="التالي"
+            onClick={() => go(current + 1)}
+          >
+            <Chevron dir="end" />
+          </button>
+        </>
+      ) : null}
+    </section>
+  );
+}
+
+const Chevron = ({ dir }: { dir: "start" | "end" }) => (
+  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+    {dir === "start" ? <path d="m15 18-6-6 6-6" /> : <path d="m9 18 6-6-6-6" />}
+  </svg>
+);

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

@@ -0,0 +1,105 @@
+import { EditableImage } from "@numueg/theme-sdk";
+import { EditableText } from "../lib/EditableText";
+import type { EmpSectionProps } from "../lib/section";
+
+interface IwtSettings {
+  eyebrow?: string;
+  title?: string;
+  subtitle?: string;
+  cta_text?: string;
+  cta_link?: string;
+  image?: string;
+  image_position?: "start" | "end" | "background";
+  overlay?: boolean;
+}
+
+/**
+ * Image-with-text editorial block. Two modes:
+ *  - "background": full-bleed image with a dark overlay and centered copy
+ *    (used as a page hero, e.g. About / Lookbook).
+ *  - "start" / "end": side-by-side image + copy column.
+ * Title/subtitle/CTA + the image are inline-editable.
+ */
+export default function ImageWithText({ id, settings }: EmpSectionProps) {
+  const s = settings as IwtSettings;
+  const pos = s.image_position ?? "start";
+  const image =
+    s.image ||
+    "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600";
+  const hasCta = Boolean(s.cta_text);
+
+  const Copy = (
+    <div className="nt-iwt__copy">
+      {s.eyebrow ? (
+        <EditableText
+          as="p"
+          className="nt-label"
+          sectionId={id}
+          settingId="eyebrow"
+          value={s.eyebrow}
+        />
+      ) : null}
+      <EditableText
+        as="h2"
+        className="nt-heading"
+        sectionId={id}
+        settingId="title"
+        value={s.title ?? "قصة علامتنا"}
+      />
+      {s.subtitle ? (
+        <EditableText
+          as="p"
+          className="nt-iwt__sub"
+          sectionId={id}
+          settingId="subtitle"
+          value={s.subtitle}
+        />
+      ) : null}
+      {hasCta ? (
+        <a
+          className={pos === "background" ? "nt-btn-light" : "nt-btn"}
+          href={s.cta_link || "/products"}
+        >
+          <EditableText
+            as="span"
+            sectionId={id}
+            settingId="cta_text"
+            value={s.cta_text as string}
+          />
+        </a>
+      ) : null}
+    </div>
+  );
+
+  if (pos === "background") {
+    return (
+      <section className="nt-iwt nt-iwt--bg">
+        <EditableImage
+          className="nt-iwt__bgimg"
+          sectionId={id}
+          settingId="image"
+          src={image}
+          alt=""
+        />
+        {s.overlay !== false ? <div className="nt-iwt__overlay" /> : null}
+        <div className="nt-container nt-iwt__bgcontent">{Copy}</div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="nt-section nt-bg-white">
+      <div className={`nt-container nt-iwt nt-iwt--${pos}`}>
+        <div className="nt-iwt__media">
+          <EditableImage
+            sectionId={id}
+            settingId="image"
+            src={image}
+            alt={(s.title as string) || ""}
+          />
+        </div>
+        {Copy}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { useShop } from "@numueg/theme-sdk";
+import { EditableText } from "../lib/EditableText";
+import type { EmpSectionProps } from "../lib/section";
+import { useT } from "../lib/i18n";
+
+interface MarqueeSettings {
+  text?: string;
+  repeat?: number;
+}
+
+/** Black scrolling ticker — bold uppercase text alternating with the store
+ *  name, separated by dots. Pure CSS animation (respects reduced-motion). */
+export default function Marquee({ id, settings }: EmpSectionProps) {
+  const s = settings as MarqueeSettings;
+  const t = useT();
+  const shop = useShop();
+  const text = s.text ?? t("100% Independent", "100% مستقل");
+  const storeName = shop?.name || "STORE";
+  const repeat = Math.max(4, Math.min(20, (s.repeat as number) || 10));
+
+  const items = Array.from({ length: repeat }, (_, i) => (
+    <span className="nt-marquee__item" key={i}>
+      <span className="nt-marquee__text">{text}</span>
+      <span className="nt-marquee__dot">●</span>
+      <span className="nt-marquee__sub">{storeName}</span>
+      <span className="nt-marquee__dot">●</span>
+    </span>
+  ));
+
+  return (
+    <div className="nt-marquee">
+      <EditableText
+        as="span"
+        sectionId={id}
+        settingId="text"
+        value={text}
+        style={{ display: "none" }}
+      />
+      <div className="nt-marquee__track">
+        {items}
+        {items}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,79 @@
+import {
+  useState } from "react";
+import { EditableText } from "../lib/EditableText";
+import type { EmpSectionProps } from "../lib/section";
+import { useT } from "../lib/i18n";
+
+interface NewsletterSettings {
+  title?: string;
+  subtitle?: string;
+  button_text?: string;
+  placeholder?: string;
+}
+
+/** Black newsletter block — centered uppercase headline, muted subtitle and a
+ *  pill email field + light submit button. Submission is handled client-side
+ *  (swap in the host's marketing endpoint when wiring a real list). */
+export default function Newsletter({ id, settings }: EmpSectionProps) {
+  const s = settings as NewsletterSettings;
+  const t = useT();
+  const title = s.title ?? t("Join our newsletter", "اشترك في نشرتنا");
+  const subtitle = s.subtitle ?? t("Be first to hear about offers and new arrivals", "اعرف أول واحد عن العروض والمنتجات الجديدة");
+  const buttonText = s.button_text ?? t("Subscribe", "اشترك");
+  const placeholder = s.placeholder ?? t("Email address", "البريد الإلكتروني");
+
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (email) setSubmitted(true);
+  };
+
+  return (
+    <section className="nt-news">
+      <div className="nt-container">
+        <div className="nt-news__inner">
+          <EditableText
+            as="h2"
+            className="nt-news__title"
+            sectionId={id}
+            settingId="title"
+            value={title}
+          />
+          <EditableText
+            as="p"
+            className="nt-news__sub"
+            sectionId={id}
+            settingId="subtitle"
+            value={subtitle}
+          />
+
+          {submitted ? (
+            <p style={{ fontWeight: 600 }}>شكراً لاشتراكك! 🎉</p>
+          ) : (
+            <form className="nt-news__form" onSubmit={onSubmit}>
+              <input
+                className="nt-news__input"
+                type="email"
+                dir="ltr"
+                required
+                value={email}
+                placeholder={placeholder}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+              <button className="nt-btn-light" type="submit">
+                <EditableText
+                  as="span"
+                  sectionId={id}
+                  settingId="button_text"
+                  value={buttonText}
+                />
+              </button>
+            </form>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}