@numueg/theme-cli 0.4.1 → 0.6.0

package/templates/scaffold/src/main.tsx

@@ -0,0 +1,230 @@
+import type { ComponentType } from "react";
+import {
+  defineThemeEntry,
+  Section,
+  useDirection,
+  type ThemeSettingsV3,
+} from "@numueg/theme-sdk";
+import manifest from "../theme.json";
+
+import Header from "./sections/Header";
+import Footer from "./sections/Footer";
+import Hero from "./sections/hero";
+import Marquee from "./sections/marquee";
+import FeaturedCollection from "./sections/featured_collection";
+import Categories from "./sections/categories";
+import PromoBanner from "./sections/promo_banner";
+import Testimonials from "./sections/testimonials";
+import Newsletter from "./sections/newsletter";
+import ProductDetails from "./sections/product_details";
+import SizeChart from "./sections/size_chart";
+import FrequentlyBought from "./sections/frequently_bought";
+import ProductGrid from "./sections/product_grid";
+import CartSummary from "./sections/cart_summary";
+import OrderConfirmation from "./sections/order_confirmation";
+import ImageWithText from "./sections/image_with_text";
+import RichTextSection from "./sections/rich_text";
+import NotFound from "./sections/not_found";
+import SearchResults from "./sections/search_results";
+import Account from "./sections/account";
+import AboutSection from "./sections/about_section";
+
+const SECTION_REGISTRY: Record<string, ComponentType<any>> = {
+  header: Header,
+  footer: Footer,
+  hero: Hero,
+  marquee: Marquee,
+  featured_collection: FeaturedCollection,
+  categories: Categories,
+  promo_banner: PromoBanner,
+  testimonials: Testimonials,
+  newsletter: Newsletter,
+  product_details: ProductDetails,
+  size_chart: SizeChart,
+  frequently_bought: FrequentlyBought,
+  product_grid: ProductGrid,
+  cart_summary: CartSummary,
+  order_confirmation: OrderConfirmation,
+  image_with_text: ImageWithText,
+  rich_text: RichTextSection,
+  not_found: NotFound,
+  search_results: SearchResults,
+  account: Account,
+  about_section: AboutSection,
+};
+
+const isKnown = (type: string) => Boolean(SECTION_REGISTRY[type]);
+
+interface SectionLike {
+  type: string;
+  settings?: Record<string, any>;
+  blocks?: Record<string, any> | any[];
+  block_order?: string[];
+  disabled?: boolean;
+}
+interface GroupLike {
+  sections?: Record<string, SectionLike> | SectionLike[];
+  order?: string[];
+}
+
+// The theme's own default templates/groups, baked into the bundle. The host
+// passes EMPTY templates for a marketplace PREVIEW (before install / before the
+// merchant customizes), expecting the bundle to fall back to these.
+const PRESETS = (manifest as any).presets ?? {};
+const BUILTIN_TEMPLATES: Record<string, GroupLike> = PRESETS.templates ?? {};
+const BUILTIN_GROUPS: Record<string, GroupLike> = PRESETS.section_groups ?? {};
+
+/** Normalise a section instance so blocks are always `{map}` + `order[]`
+ *  (presets store blocks as an array; resolved host data stores a map). */
+function normaliseInstance(instance: SectionLike): SectionLike {
+  if (Array.isArray(instance.blocks)) {
+    const map: Record<string, any> = {};
+    const order: string[] = [];
+    instance.blocks.forEach((b: any, i: number) => {
+      const id = `${b?.type ?? "block"}-${i}`;
+      map[id] = b;
+      order.push(id);
+    });
+    return { ...instance, blocks: map, block_order: order };
+  }
+  return instance;
+}
+
+/** Normalise a template/group (array OR map+order) → ordered instance list. */
+function resolveSections(
+  group: GroupLike | undefined,
+): Array<{ id: string; instance: SectionLike }> {
+  if (!group || !group.sections) return [];
+  if (Array.isArray(group.sections)) {
+    return group.sections.map((instance, idx) => ({
+      id: `${instance.type}-${idx}`,
+      instance: normaliseInstance(instance),
+    }));
+  }
+  const map = group.sections as Record<string, SectionLike>;
+  const order = group.order ?? Object.keys(map);
+  const out: Array<{ id: string; instance: SectionLike }> = [];
+  for (const id of order) {
+    const instance = map[id];
+    if (instance) out.push({ id, instance: normaliseInstance(instance) });
+  }
+  return out;
+}
+
+/** Prefer the host's customisation; fall back to bundled presets (preview). */
+function selectSections(
+  host: GroupLike | undefined,
+  builtin: GroupLike | undefined,
+): Array<{ id: string; instance: SectionLike }> {
+  const hostList = resolveSections(host).filter((s) => isKnown(s.instance.type));
+  if (hostList.length > 0) return hostList;
+  return resolveSections(builtin).filter((s) => isKnown(s.instance.type));
+}
+
+function styleVars(global: Record<string, any>): React.CSSProperties {
+  const vars: Record<string, string> = {};
+  if (global.accent_color) vars["--nt-accent"] = global.accent_color;
+  if (global.foreground_color) vars["--nt-fg"] = global.foreground_color;
+  if (global.background_color) vars["--nt-bg"] = global.background_color;
+  if (global.font_family) {
+    const stack = `"${global.font_family}", "Inter", system-ui, sans-serif`;
+    vars["--nt-font-body"] = stack;
+    vars["--nt-font-display"] = stack;
+  }
+  return vars as React.CSSProperties;
+}
+
+function renderList(
+  list: Array<{ id: string; instance: SectionLike }>,
+  keyPrefix: string,
+  groupId?: string,
+  extra?: Record<string, unknown>,
+) {
+  return list.map(({ id, instance }) => {
+    if (instance.disabled) return null;
+    const Component = SECTION_REGISTRY[instance.type];
+    if (!Component) return null;
+    // <Section> emits the data-section-id the customizer's PreviewBridge reads
+    // for click-to-select; passing the id down lets each component wire
+    // <EditableText>/<EditableImage> for inline field editing.
+    return (
+      <Section
+        key={`${keyPrefix}-${id}`}
+        id={id}
+        type={instance.type}
+        groupId={groupId}
+      >
+        <Component
+          id={id}
+          type={instance.type}
+          settings={instance.settings}
+          blocks={instance.blocks}
+          blockOrder={instance.block_order}
+          {...extra}
+        />
+      </Section>
+    );
+  });
+}
+
+interface ThemeProps {
+  themeSettings: ThemeSettingsV3;
+  currentTemplate: string;
+}
+
+export default function Theme({ themeSettings, currentTemplate }: ThemeProps) {
+  const pageType = currentTemplate || "home";
+  const global = themeSettings.global_settings || {};
+  const dir = useDirection();
+
+  const hostTemplates = (themeSettings.templates ?? {}) as Record<
+    string,
+    GroupLike
+  >;
+  const hostTemplate =
+    hostTemplates[pageType] ?? hostTemplates.page ?? hostTemplates.home;
+  const builtinTemplate =
+    BUILTIN_TEMPLATES[pageType] ??
+    BUILTIN_TEMPLATES.page ??
+    BUILTIN_TEMPLATES.home;
+
+  const hostGroups = (themeSettings.section_groups ?? {}) as Record<
+    string,
+    GroupLike
+  >;
+  const headerSections = selectSections(hostGroups.header, BUILTIN_GROUPS.header);
+  const footerSections = selectSections(hostGroups.footer, BUILTIN_GROUPS.footer);
+  const bodySections = selectSections(hostTemplate, builtinTemplate);
+
+  // The header is fixed/overlay; pages that don't open with a full-bleed hero
+  // need top padding so their first section clears it.
+  const firstType = bodySections[0]?.instance.type;
+  const bleedTop = firstType === "hero";
+
+  return (
+    <div className="nt" dir={dir} style={styleVars(global)}>
+      {renderList(headerSections, "hg", "header", { solidHeader: !bleedTop })}
+      {!bleedTop && headerSections.length > 0 ? (
+        <div className="nt-spacer-top" aria-hidden="true" />
+      ) : null}
+      {bodySections.length > 0 ? (
+        renderList(bodySections, pageType)
+      ) : (
+        <section className="nt-page nt-container">
+          <p className="nt-placeholder">
+            No template configured for "{pageType}".
+          </p>
+        </section>
+      )}
+      {renderList(footerSections, "fg", "footer")}
+    </div>
+  );
+}
+
+// ── Entry: ONE definition → mount (client/hydrate) + createApp (SSR) ────────
+const entry = defineThemeEntry(({ themeSettings, currentTemplate }) => (
+  <Theme themeSettings={themeSettings} currentTemplate={currentTemplate} />
+));
+
+export const mount = entry.mount;
+export const createApp = entry.createApp;

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

@@ -0,0 +1,161 @@
+import {
+  useEffect,
+  useState } from "react";
+import { useShop,
+  useCollections,
+} from "@numueg/theme-sdk";
+import { EditableText } from "../lib/EditableText";
+import type { EmpSectionProps } from "../lib/section";
+import { useT } from "../lib/i18n";
+
+interface FooterSettings {
+  brand_name?: string;
+  description?: string;
+  ticker_text?: string;
+  instagram?: string;
+  facebook?: string;
+  twitter?: string;
+  copyright?: string;
+}
+
+export default function Footer({ id, settings }: EmpSectionProps) {
+  const s = settings as FooterSettings;
+  const t = useT();
+  const shop = useShop();
+  const { collections } = useCollections({ limit: 5 });
+  // Prefer the real store name; the theme placeholder ("STORE") is treated as
+  // unset so it never overrides the store name baked in at activation.
+  const brand =
+    s.brand_name && s.brand_name !== "STORE"
+      ? s.brand_name
+      : shop?.name || s.brand_name || "STORE";
+  const ticker = s.ticker_text || "100% مستقل";
+
+  // Year is computed client-side to keep the SSR render path deterministic.
+  const [year, setYear] = useState<number | null>(null);
+  useEffect(() => setYear(new Date().getFullYear()), []);
+
+  const socials = [
+    { name: "Instagram", url: s.instagram, icon: <IconInstagram /> },
+    { name: "X", url: s.twitter, icon: <IconX /> },
+    { name: "Facebook", url: s.facebook, icon: <IconFacebook /> },
+  ].filter((x) => x.url);
+
+  const tickerItems = Array.from({ length: 10 });
+
+  return (
+    <footer className="nt-footer">
+      {/* Ticker */}
+      <div className="nt-footer__ticker">
+        <div className="nt-marquee__track">
+          {tickerItems.concat(tickerItems).map((_, i) => (
+            <span className="nt-marquee__item" key={i}>
+              <span className="nt-marquee__text">{ticker}</span>
+              <span className="nt-marquee__dot">●</span>
+              <span className="nt-marquee__sub">{brand}</span>
+              <span className="nt-marquee__dot">●</span>
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <div className="nt-container">
+        <div className="nt-footer__grid">
+          {/* Brand */}
+          <div className="nt-footer__brand">
+            <EditableText
+              as="h3"
+              sectionId={id}
+              settingId="brand_name"
+              value={brand}
+            />
+            <EditableText
+              as="p"
+              className="nt-footer__desc"
+              sectionId={id}
+              settingId="description"
+              value={
+                s.description ||
+                "متجر مستقل يقدّم تشكيلة مختارة بعناية. تصميم نظيف، جودة تدوم."
+              }
+            />
+            <div className="nt-footer__social">
+              {socials.length > 0
+                ? socials.map((so) => (
+                    <a
+                      key={so.name}
+                      href={so.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label={so.name}
+                    >
+                      {so.icon}
+                    </a>
+                  ))
+                : [<IconInstagram key="i" />, <IconX key="x" />, <IconFacebook key="f" />].map(
+                    (ic, i) => (
+                      <span key={i} style={{ opacity: 0.3 }}>
+                        {ic}
+                      </span>
+                    ),
+                  )}
+            </div>
+          </div>
+
+          {/* Shop links */}
+          <div>
+            <p className="nt-footer__heading">{t("Shop", "المتجر")}</p>
+            <div className="nt-footer__links">
+              <a href="/products">{t("All products", "كل المنتجات")}</a>
+              {collections.slice(0, 5).map((c) => (
+                <a key={c.id} href={`/collections/${c.slug}`}>
+                  {c.name}
+                </a>
+              ))}
+            </div>
+          </div>
+
+          {/* Help links */}
+          <div>
+            <p className="nt-footer__heading">{t("Help", "المساعدة")}</p>
+            <div className="nt-footer__links">
+              <a href="/pages/contact">{t("Contact us", "تواصل معنا")}</a>
+              <a href="/pages/shipping">{t("Shipping", "الشحن")}</a>
+              <a href="/pages/returns">{t("Returns", "الإرجاع")}</a>
+            </div>
+          </div>
+        </div>
+
+        <div className="nt-footer__bottom">
+          <p className="nt-footer__copy">
+            {s.copyright || `© ${year ?? ""} ${brand}`.trim()}
+          </p>
+          <div className="nt-paybadges">
+            <span className="nt-paybadge">VISA</span>
+            <span className="nt-paybadge">Mastercard</span>
+            <span className="nt-paybadge">mada</span>
+            <span className="nt-paybadge">Apple Pay</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+const IconInstagram = () => (
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <rect x="2" y="2" width="20" height="20" rx="5" />
+    <circle cx="12" cy="12" r="5" />
+    <circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none" />
+  </svg>
+);
+const IconX = () => (
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+  </svg>
+);
+const IconFacebook = () => (
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+  </svg>
+);