@cimplify/cli 0.2.0

package/templates/storefront-grocery/components/header.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { Suspense } from "react";
+import { NavLink } from "./nav-link";
+import { CartPill, CartPillSkeleton } from "./cart-pill";
+import { brand } from "@/lib/brand";
+
+/**
+ * Server-rendered header chrome. Brand mark + nav layout streams from the
+ * cache; the active-link styling and live cart count are dynamic islands
+ * mounted in their own Suspense boundaries so the chrome never blocks.
+ */
+export function Header() {
+  return (
+    <header className="sticky top-0 z-30 flex items-center justify-between px-8 py-4 border-b border-border bg-background/90 backdrop-blur-md">
+      <Link href="/" className="flex items-baseline gap-2">
+        <span className="font-serif text-[22px] font-semibold -tracking-[0.02em]">
+          {brand.shortName}
+        </span>
+        <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
+          {brand.microTag}
+        </span>
+      </Link>
+      <nav className="flex items-center gap-6">
+        {brand.header.nav.map((link) => (
+          <Suspense key={link.href} fallback={<NavLinkFallback>{link.label}</NavLinkFallback>}>
+            <NavLink href={link.href}>{link.label}</NavLink>
+          </Suspense>
+        ))}
+        <Suspense fallback={<CartPillSkeleton />}>
+          <CartPill />
+        </Suspense>
+      </nav>
+    </header>
+  );
+}
+
+function NavLinkFallback({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="text-[13px] font-medium tracking-wide text-muted-foreground">
+      {children}
+    </span>
+  );
+}

package/templates/storefront-grocery/components/hero.tsx

@@ -0,0 +1,25 @@
+interface HeroProps {
+  badge?: string;
+  title: string;
+  subtitle?: string;
+}
+
+export function Hero({ badge, title, subtitle }: HeroProps) {
+  return (
+    <section className="px-8 py-16 text-center bg-gradient-to-b from-accent to-background">
+      {badge && (
+        <span className="inline-block mb-4 px-3.5 py-1.5 rounded-full bg-card border border-accent text-accent-foreground text-[11px] font-semibold uppercase tracking-[0.12em]">
+          {badge}
+        </span>
+      )}
+      <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold m-0 -tracking-[0.02em]">
+        {title}
+      </h1>
+      {subtitle && (
+        <p className="mx-auto mt-2 max-w-xl text-base text-muted-foreground">
+          {subtitle}
+        </p>
+      )}
+    </section>
+  );
+}

package/templates/storefront-grocery/components/nav-link.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
+  const pathname = usePathname();
+  const active = pathname === href;
+  return (
+    <Link
+      href={href}
+      className={[
+        "text-[13px] font-medium tracking-wide transition-colors",
+        active ? "text-primary" : "text-muted-foreground hover:text-foreground",
+      ].join(" ")}
+    >
+      {children}
+    </Link>
+  );
+}

package/templates/storefront-grocery/components/policy-page.tsx

@@ -0,0 +1,49 @@
+import type { BrandPolicySection } from "@/lib/brand";
+
+interface PolicyShape {
+  eyebrow: string;
+  title: string;
+  lastUpdated?: string;
+  sections: BrandPolicySection[];
+}
+
+/**
+ * Shared layout for shipping / returns / accessibility / terms / privacy.
+ * Reads a `{ eyebrow, title, lastUpdated, sections[] }` block from brand.
+ */
+export function PolicyPage({ policy }: { policy: PolicyShape }) {
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        {policy.eyebrow}
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
+        {policy.title}
+      </h1>
+      {policy.lastUpdated && (
+        <p className="text-sm text-muted-foreground not-prose mb-10">
+          Last updated: {policy.lastUpdated}
+        </p>
+      )}
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        {policy.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="text-2xl font-semibold mt-0">{s.heading}</h2>
+            {typeof s.body === "string" ? (
+              <p>{s.body}</p>
+            ) : (
+              <>
+                <p>{s.body.intro}</p>
+                <ul className="list-disc pl-6 space-y-2">
+                  {s.body.bullets.map((b) => (
+                    <li key={b}>{b}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        ))}
+      </section>
+    </article>
+  );
+}

package/templates/storefront-grocery/components/product-modal.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect } from "react";
+import Image from "next/image";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { ProductSheet, useProduct, useCart } from "@cimplify/sdk/react";
+
+/**
+ * URL-driven product modal. Reads `?product=<slug>` and renders the SDK's
+ * `<ProductSheet/>` — vertical layout with image-on-top, then header, then
+ * the variant/add-on/composite/bundle customizer. Closing the modal clears
+ * the search param. Deep-linkable and survives reloads.
+ */
+export function ProductModal() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const slug = searchParams?.get("product") ?? null;
+
+  const { product } = useProduct(slug ?? "", { enabled: Boolean(slug) });
+  const { addItem } = useCart();
+
+  useEffect(() => {
+    if (!slug) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [slug]);
+
+  useEffect(() => {
+    if (!slug) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slug]);
+
+  if (!slug) return null;
+
+  function close() {
+    const next = new URLSearchParams(searchParams?.toString() ?? "");
+    next.delete("product");
+    const qs = next.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+  }
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      onClick={close}
+      className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center sm:p-6 bg-foreground/50 backdrop-blur-sm"
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="relative w-full sm:max-w-lg max-h-[92vh] overflow-auto bg-card sm:rounded-3xl rounded-t-3xl shadow-2xl"
+      >
+        <button
+          onClick={close}
+          aria-label="Close product details"
+          className="absolute top-4 right-4 z-10 w-9 h-9 rounded-full bg-card border border-border text-sm cursor-pointer transition-colors hover:bg-muted"
+        >
+          ✕
+        </button>
+        {product ? (
+          <ProductSheet
+            product={product}
+            onClose={close}
+            onAddToCart={async (p, qty, options) => {
+              await addItem(p, qty, options);
+              close();
+            }}
+            renderImage={({ src, alt, className }) => (
+              <Image
+                src={src}
+                alt={alt}
+                width={1200}
+                height={900}
+                className={className}
+                style={{ width: "100%", height: "auto", objectFit: "cover" }}
+                priority
+              />
+            )}
+            classNames={{
+              root: "p-6 sm:p-8 gap-4",
+              image: "rounded-2xl overflow-hidden -mx-6 sm:-mx-8 -mt-6 sm:-mt-8 mb-2",
+              header: "flex items-baseline justify-between gap-4",
+              name: "font-serif text-2xl font-semibold m-0",
+              price: "text-lg font-semibold text-primary",
+              description: "text-sm text-muted-foreground leading-relaxed",
+              customizer: "pt-2",
+            }}
+          />
+        ) : (
+          <div className="p-8 text-center text-muted-foreground">Loading…</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-grocery/components/providers.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useMemo, type ReactNode } from "react";
+import { createCimplifyClient } from "@cimplify/sdk";
+import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
+
+/**
+ * Boots the Cimplify SDK client once on the client-side and exposes it via
+ * <CimplifyProvider/>.
+ *
+ * Base-URL resolution:
+ *   1) If NEXT_PUBLIC_CIMPLIFY_API_URL is set, use it verbatim.
+ *   2) Otherwise use the current origin so requests flow through the
+ *      Next.js rewrite in `next.config.ts` to the mock at :8787 (no CORS).
+ *   3) Fall back to 127.0.0.1:8787 only during SSR, when there's no window.
+ */
+export function Providers({ children }: { children: ReactNode }) {
+  const client = useMemo(() => {
+    const baseUrl =
+      process.env.NEXT_PUBLIC_CIMPLIFY_API_URL?.trim() ||
+      (typeof window !== "undefined" ? window.location.origin : "http://127.0.0.1:8787");
+    const publicKey = process.env.NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY ?? "mock-dev";
+    return createCimplifyClient({
+      baseUrl,
+      publicKey,
+      suppressPublicKeyWarning: true,
+    });
+  }, []);
+
+  return (
+    <CimplifyProvider client={client}>
+      <CartDrawerProvider>{children}</CartDrawerProvider>
+    </CimplifyProvider>
+  );
+}

package/templates/storefront-grocery/components/store-product-card.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import Link from "next/link";
+import {
+  CardVariant,
+  FoodProductCard,
+  RetailProductCard,
+  WholesaleProductCard,
+  DigitalProductCard,
+  BundleProductCard,
+  CompositeProductCard,
+  StandardServiceCard,
+  CompactServiceCard,
+  ScheduleServiceCard,
+  RentalServiceCard,
+  AccommodationCard,
+  LeaseServiceCard,
+  SubscriptionCard,
+} from "@cimplify/sdk/react";
+import type { CardLayoutProps } from "@cimplify/sdk/react";
+import type { Product } from "@cimplify/sdk";
+import { PRODUCT_TYPE, RENDER_HINT, DURATION_UNIT } from "@cimplify/sdk";
+
+const RENTAL_UNITS = new Set<string>([DURATION_UNIT.Days, DURATION_UNIT.Hours]);
+const LEASE_UNITS = new Set<string>([DURATION_UNIT.Weeks, DURATION_UNIT.Months, DURATION_UNIT.Years]);
+
+const VARIANT_CARDS: Record<CardVariant, React.ComponentType<CardLayoutProps>> = {
+  [CardVariant.Food]: FoodProductCard,
+  [CardVariant.Retail]: RetailProductCard,
+  [CardVariant.Wholesale]: WholesaleProductCard,
+  [CardVariant.Digital]: DigitalProductCard,
+  [CardVariant.Bundle]: BundleProductCard,
+  [CardVariant.Composite]: CompositeProductCard,
+  [CardVariant.Standard]: StandardServiceCard,
+  [CardVariant.Compact]: CompactServiceCard,
+  [CardVariant.Schedule]: ScheduleServiceCard,
+  [CardVariant.Rental]: RentalServiceCard,
+  [CardVariant.Accommodation]: AccommodationCard,
+  [CardVariant.Lease]: LeaseServiceCard,
+  [CardVariant.Subscription]: SubscriptionCard,
+};
+
+function resolveVariant(p: Product): CardVariant {
+  if (p.type === PRODUCT_TYPE.Bundle) return CardVariant.Bundle;
+  if (p.type === PRODUCT_TYPE.Composite) return CardVariant.Composite;
+  if (p.quantity_pricing && p.quantity_pricing.length > 1) return CardVariant.Wholesale;
+  if (p.type === PRODUCT_TYPE.Digital) return CardVariant.Digital;
+  if (p.type === PRODUCT_TYPE.Service) {
+    if (p.duration_unit && RENTAL_UNITS.has(p.duration_unit)) return CardVariant.Rental;
+    if (p.duration_unit === DURATION_UNIT.Nights) return CardVariant.Accommodation;
+    if (p.duration_unit && LEASE_UNITS.has(p.duration_unit)) return CardVariant.Lease;
+    if (p.billing_plans && p.billing_plans.length > 0 && !p.duration_minutes) return CardVariant.Subscription;
+    return CardVariant.Standard;
+  }
+  if (p.render_hint === RENDER_HINT.Food) return CardVariant.Food;
+  return CardVariant.Retail;
+}
+
+interface Props {
+  product: Product;
+  /** Override the auto-detected card variant. */
+  variant?: CardVariant;
+}
+
+/**
+ * Variant-aware product card that opens the URL-driven product modal on
+ * click. Uses `next/link` with `?product=<slug>` so the link is statically
+ * pre-renderable — no `useSearchParams` dependency means cards don't
+ * become dynamic islands. The modal (which already reads `useSearchParams`
+ * inside a Suspense boundary in the root layout) handles the rest.
+ */
+export function StoreProductCard({ product, variant }: Props) {
+  const slug = product.slug || product.id;
+  const Card = VARIANT_CARDS[variant ?? resolveVariant(product)];
+  const href = `?product=${encodeURIComponent(slug)}`;
+
+  return (
+    <Card
+      product={product}
+      renderLink={({ className, children }) => (
+        <Link href={href} scroll={false} prefetch={false} className={className}>
+          {children}
+        </Link>
+      )}
+    />
+  );
+}