@cimplify/cli 0.2.8 → 0.3.1

package/templates/storefront-auto/components/brand-marquee.tsx

@@ -0,0 +1,27 @@
+import { brand } from "@/lib/brand";
+
+/**
+ * Brand authority strip. Wordmark-only (avoids licensing issues with real
+ * logos), monospaced for the brand-as-typography aesthetic.
+ */
+export function BrandMarquee() {
+  const strip = brand.brandStrip;
+  if (!strip || strip.brands.length === 0) return null;
+  return (
+    <section className="border-y border-border bg-background py-8 sm:py-10 overflow-hidden">
+      <p className="text-center text-[11px] font-mono uppercase tracking-[0.2em] text-muted-foreground mb-6">
+        {strip.headline}
+      </p>
+      <div className="flex items-center justify-around gap-10 sm:gap-14 flex-wrap px-6">
+        {strip.brands.map((b) => (
+          <span
+            key={b}
+            className="text-[clamp(1.25rem,2vw,1.75rem)] font-semibold text-muted-foreground hover:text-foreground transition-colors -tracking-[0.025em] opacity-70 hover:opacity-100"
+          >
+            {b}
+          </span>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-auto/components/cart-drawer.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CartDrawer as SdkCartDrawer } from "@cimplify/sdk/react";
+
+/**
+ * Side-drawer cart. Auto-opens when an item is added (via
+ * `<CartDrawerProvider>` in `providers.tsx`). The header's cart pill
+ * also calls `useCartDrawer().open()` to reveal it on click.
+ */
+export function CartDrawer() {
+  const router = useRouter();
+  return <SdkCartDrawer onCheckout={() => router.push("/checkout")} />;
+}

package/templates/storefront-auto/components/cart-pill.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useCartDrawer } from "@cimplify/sdk/react";
+import { useCartCount } from "@/lib/cart";
+
+/**
+ * Cart pill — dynamic island. Reads the live cart count via the SDK and
+ * opens the side cart drawer on click (instead of navigating to /cart).
+ * Wrap in `<Suspense fallback={<CartPillSkeleton/>}>` so the cached
+ * header chrome streams without blocking on the cart fetch.
+ */
+export function CartPill() {
+  const { count } = useCartCount();
+  const { open } = useCartDrawer();
+  return (
+    <button
+      type="button"
+      onClick={open}
+      aria-label={`Open cart, ${count} ${count === 1 ? "item" : "items"}`}
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105 cursor-pointer"
+    >
+      Cart · {count}
+    </button>
+  );
+}
+
+export function CartPillSkeleton() {
+  return (
+    <span
+      aria-hidden
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground/80 text-background text-xs font-semibold tracking-wide"
+    >
+      Cart · …
+    </span>
+  );
+}

package/templates/storefront-auto/components/category-grid.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CategoryGrid as SdkCategoryGrid } from "@cimplify/sdk/react";
+import type { Category } from "@cimplify/sdk";
+
+/**
+ * Homepage category tiles — defers to the SDK's <CategoryGrid/> for layout
+ * and accessibility, and routes selections to /categories/:slug.
+ */
+export function CategoryGrid({ categories }: { categories?: Category[] }) {
+  const router = useRouter();
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-14">
+      <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">Browse the menu</h2>
+      <SdkCategoryGrid
+        categories={categories}
+        onSelect={(c) => router.push(`/categories/${c.slug}`)}
+        classNames={{
+          item: "flex flex-col gap-1 p-6 bg-card border border-border rounded-2xl cursor-pointer text-left transition-all hover:border-primary hover:-translate-y-0.5",
+          name: "font-serif text-lg font-semibold text-foreground",
+          description: "text-xs text-muted-foreground",
+          count: "text-xs text-muted-foreground mt-1",
+        }}
+      />
+    </section>
+  );
+}

package/templates/storefront-auto/components/category-tiles.tsx

@@ -0,0 +1,104 @@
+import Link from "next/link";
+import Image from "next/image";
+import type { Category } from "@cimplify/sdk";
+
+interface CategoryTilesProps {
+  categories: Category[];
+}
+
+const ICONS: Record<string, React.ReactNode> = {
+  phones: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+      <rect x="6" y="2" width="12" height="20" rx="2.5" />
+      <line x1="12" y1="18" x2="12" y2="18" strokeWidth="2.5" strokeLinecap="round" />
+    </svg>
+  ),
+  laptops: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+      <rect x="3" y="4" width="18" height="12" rx="1.5" />
+      <line x1="2" y1="20" x2="22" y2="20" strokeLinecap="round" />
+    </svg>
+  ),
+  audio: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+      <path d="M3 14v-2a9 9 0 0 1 18 0v2" />
+      <rect x="2" y="14" width="5" height="6" rx="1.5" />
+      <rect x="17" y="14" width="5" height="6" rx="1.5" />
+    </svg>
+  ),
+  accessories: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+      <rect x="2" y="6" width="14" height="10" rx="2" />
+      <path d="M16 12h4l2 2v0l-2 2h-4" />
+    </svg>
+  ),
+  gaming: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+      <path d="M5 7h14a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1l-2-3H8l-2 3H5a3 3 0 0 1-3-3v-4a3 3 0 0 1 3-3z" />
+      <line x1="9" y1="11" x2="9" y2="13" strokeLinecap="round" />
+      <line x1="8" y1="12" x2="10" y2="12" strokeLinecap="round" />
+      <circle cx="15" cy="11" r="0.75" fill="currentColor" />
+      <circle cx="17" cy="13" r="0.75" fill="currentColor" />
+    </svg>
+  ),
+};
+
+export function CategoryTiles({ categories }: CategoryTilesProps) {
+  if (categories.length === 0) return null;
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+      <div className="flex items-end justify-between gap-6 mb-8">
+        <div>
+          <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
+            Shop the catalogue
+          </p>
+          <h2 className="text-[clamp(1.75rem,3vw,2.25rem)] font-bold -tracking-[0.025em]">
+            Pick your category.
+          </h2>
+        </div>
+        <Link
+          href="/shop"
+          className="text-sm font-semibold text-primary hover:underline whitespace-nowrap hidden sm:inline-flex items-center gap-1"
+        >
+          See everything
+          <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+            <path d="M3 6h7m0 0L7 3m3 3L7 9" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </Link>
+      </div>
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
+        {categories.map((c, i) => (
+          <Link
+            key={c.id}
+            href={`/categories/${c.slug}`}
+            className="group relative overflow-hidden rounded-2xl bg-card border border-border p-5 hover:border-primary hover:-translate-y-0.5 transition-all"
+          >
+            <div className="flex items-start justify-between mb-12">
+              <div className="grid place-items-center w-10 h-10 rounded-lg bg-primary/10 text-primary">
+                {ICONS[c.slug] ?? (
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+                    <rect x="3" y="3" width="18" height="18" rx="2" />
+                  </svg>
+                )}
+              </div>
+              <span className="text-[10px] font-mono text-muted-foreground tabular-nums">
+                {String(i + 1).padStart(2, "0")}
+              </span>
+            </div>
+            <p className="text-base font-semibold mb-1 -tracking-[0.015em]">{c.name}</p>
+            {c.product_count != null && (
+              <p className="text-xs text-muted-foreground">
+                {c.product_count} {c.product_count === 1 ? "product" : "products"}
+              </p>
+            )}
+            <span className="absolute right-4 bottom-4 grid place-items-center w-7 h-7 rounded-full bg-foreground text-background opacity-0 group-hover:opacity-100 transition-opacity">
+              <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+                <path d="M3 6h7m0 0L7 3m3 3L7 9" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </span>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-auto/components/collection-strip.tsx

@@ -0,0 +1,45 @@
+import Link from "next/link";
+import type { Collection, Product } from "@cimplify/sdk";
+import { StoreProductCard } from "./store-product-card";
+
+interface CollectionStripProps {
+  collection: Collection;
+  products: Product[];
+  collectionHref?: string;
+}
+
+/**
+ * Horizontal strip of products under a collection title. Cards come from the
+ * SDK so every variant (Food, Bundle, Composite, Service, …) renders
+ * correctly; clicks open the shared URL-driven product modal.
+ */
+export function CollectionStrip({ collection, products, collectionHref }: CollectionStripProps) {
+  if (products.length === 0) return null;
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-12">
+      <header className="grid grid-cols-[1fr_auto] items-end gap-4 mb-5">
+        <h2 className="font-serif text-[28px] font-semibold m-0">{collection.name}</h2>
+        {collectionHref && (
+          <Link
+            href={collectionHref}
+            className="text-[13px] font-semibold text-primary hover:underline"
+          >
+            See all →
+          </Link>
+        )}
+        {collection.description && (
+          <p className="col-span-full m-0 mt-1 text-sm text-muted-foreground">
+            {collection.description}
+          </p>
+        )}
+      </header>
+      <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto snap-x snap-mandatory pb-2">
+        {products.slice(0, 8).map((p) => (
+          <div key={p.id} className="snap-start">
+            <StoreProductCard product={p} />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-auto/components/feature-hero.tsx

@@ -0,0 +1,84 @@
+import Link from "next/link";
+import Image from "next/image";
+
+interface FeatureHeroProps {
+  eyebrow: string;
+  title: React.ReactNode;
+  description: string;
+  primaryCta: { label: string; href: string };
+  secondaryCta?: { label: string; href: string };
+  imageUrl: string;
+  imageAlt: string;
+  badge?: string;
+}
+
+/**
+ * Apple-style split hero. Left: copy + CTAs. Right: large product image.
+ * Stacks to image-on-top on mobile. Strings come from `brand.hero` at the
+ * call site — this component is otherwise design-only.
+ */
+export function FeatureHero({
+  eyebrow,
+  title,
+  description,
+  primaryCta,
+  secondaryCta,
+  imageUrl,
+  imageAlt,
+  badge,
+}: FeatureHeroProps) {
+  return (
+    <section className="relative overflow-hidden bg-foreground text-background">
+      <div className="absolute inset-0 opacity-[0.04] pointer-events-none [background-image:radial-gradient(circle_at_2px_2px,white_1px,transparent_0)] [background-size:40px_40px]" />
+      <div className="relative max-w-7xl mx-auto px-6 sm:px-8 py-16 sm:py-20 lg:py-24 grid grid-cols-1 lg:grid-cols-[1.1fr_1fr] gap-10 lg:gap-16 items-center">
+        <div>
+          {badge && (
+            <span className="inline-flex items-center gap-2 mb-5 px-3 py-1.5 rounded-full bg-primary/15 border border-primary/40 text-primary-foreground/95 text-[11px] font-mono uppercase tracking-[0.16em]">
+              <span className="grid place-items-center w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
+              {badge}
+            </span>
+          )}
+          <p className="text-[12px] font-mono uppercase tracking-[0.2em] text-background/60 mb-3">
+            {eyebrow}
+          </p>
+          <h1 className="text-[clamp(2.5rem,6vw,4.75rem)] font-bold m-0 mb-5 -tracking-[0.035em] leading-[1.02]">
+            {title}
+          </h1>
+          <p className="text-base sm:text-lg text-background/75 leading-relaxed max-w-xl">
+            {description}
+          </p>
+          <div className="flex flex-wrap items-center gap-3 mt-7">
+            <Link
+              href={primaryCta.href}
+              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
+            >
+              {primaryCta.label}
+              <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+                <path d="M3 6h7m0 0L7 3m3 3L7 9" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </Link>
+            {secondaryCta && (
+              <Link
+                href={secondaryCta.href}
+                className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-background/25 text-background hover:bg-background/10 transition-colors text-sm font-medium"
+              >
+                {secondaryCta.label}
+              </Link>
+            )}
+          </div>
+        </div>
+        <div className="relative aspect-[4/3] lg:aspect-square w-full rounded-2xl overflow-hidden bg-background/5 ring-1 ring-background/10">
+          <Image
+            src={imageUrl}
+            alt={imageAlt}
+            fill
+            sizes="(min-width: 1024px) 50vw, 100vw"
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-gradient-to-tr from-foreground/40 via-transparent to-transparent pointer-events-none" />
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-auto/components/fitment-finder.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useMemo, useState } from "react";
+import { brand } from "@/lib/brand";
+
+/**
+ * Vehicle / fitment finder — the signature auto-parts widget.
+ *
+ * UX: customer picks Make → Model → Year (each subsequent select is
+ * filtered by the previous choice). Submit pushes ?fits=<tag>&y=<year>
+ * onto the shop URL; the shop page reads the tag and filters the
+ * catalogue. Universal-fit products always appear regardless.
+ *
+ * Data lives entirely in `brand.fitments` (lib/brand.ts) so a merchant
+ * can rebrand the catalogue without touching this component. Each
+ * fitment entry carries the tag that maps onto product `tags` like
+ * `fits:toyota:corolla`.
+ */
+export function FitmentFinder() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { eyebrow, title, description, ctaLabel, anyMakeLabel, anyModelLabel, anyYearLabel, makes } =
+    brand.fitments;
+
+  const [make, setMake] = useState<string>(searchParams?.get("make") ?? "");
+  const [model, setModel] = useState<string>(searchParams?.get("model") ?? "");
+  const [year, setYear] = useState<string>(searchParams?.get("y") ?? "");
+
+  const selectedMake = useMemo(() => makes.find((m) => m.slug === make), [make, makes]);
+  const models = selectedMake?.models ?? [];
+  const selectedModel = useMemo(() => models.find((m) => m.slug === model), [model, models]);
+  const years = selectedModel?.years ?? [];
+
+  function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!make) return;
+    const params = new URLSearchParams();
+    if (model) {
+      params.set("fits", `fits:${make}:${model}`);
+      params.set("make", make);
+      params.set("model", model);
+    } else {
+      params.set("fits", `fits:${make}`);
+      params.set("make", make);
+    }
+    if (year) params.set("y", year);
+    router.push(`/shop?${params.toString()}`);
+  }
+
+  return (
+    <section id="fitment" className="max-w-7xl mx-auto px-6 sm:px-8 -mt-10 sm:-mt-14 relative z-10 scroll-mt-20">
+      <div className="bg-card border border-border rounded-2xl p-6 sm:p-8 shadow-[0_8px_30px_rgb(0_0_0/0.06)]">
+        <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-6">
+          <div className="max-w-xl">
+            <p className="text-[12px] font-mono uppercase tracking-[0.2em] text-muted-foreground mb-2">
+              {eyebrow}
+            </p>
+            <h2 className="text-[clamp(1.5rem,3vw,2rem)] font-semibold m-0 -tracking-[0.025em] leading-tight">
+              {title}
+            </h2>
+            <p className="text-sm text-muted-foreground mt-2 leading-relaxed">{description}</p>
+          </div>
+          <FitmentBadge />
+        </div>
+
+        <form onSubmit={onSubmit} className="grid grid-cols-1 md:grid-cols-[1.2fr_1.2fr_1fr_auto] gap-3">
+          <Select
+            label="Make"
+            value={make}
+            placeholder={anyMakeLabel}
+            onChange={(v) => {
+              setMake(v);
+              setModel("");
+              setYear("");
+            }}
+            options={makes.map((m) => ({ value: m.slug, label: m.name }))}
+          />
+          <Select
+            label="Model"
+            value={model}
+            placeholder={anyModelLabel}
+            disabled={!make}
+            onChange={(v) => {
+              setModel(v);
+              setYear("");
+            }}
+            options={models.map((m) => ({ value: m.slug, label: m.name }))}
+          />
+          <Select
+            label="Year"
+            value={year}
+            placeholder={anyYearLabel}
+            disabled={!model}
+            onChange={setYear}
+            options={years.map((y) => ({ value: String(y), label: String(y) }))}
+          />
+          <button
+            type="submit"
+            disabled={!make}
+            className="self-end inline-flex items-center justify-center gap-2 px-6 h-11 rounded-xl bg-primary text-primary-foreground text-sm font-semibold hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed transition-colors"
+          >
+            {ctaLabel}
+            <ArrowIcon />
+          </button>
+        </form>
+      </div>
+    </section>
+  );
+}
+
+interface SelectProps {
+  label: string;
+  value: string;
+  placeholder: string;
+  options: { value: string; label: string }[];
+  onChange: (v: string) => void;
+  disabled?: boolean;
+}
+
+function Select({ label, value, placeholder, options, onChange, disabled }: SelectProps) {
+  return (
+    <label className="block">
+      <span className="block text-[11px] font-mono uppercase tracking-[0.16em] text-muted-foreground mb-1.5">
+        {label}
+      </span>
+      <div className="relative">
+        <select
+          value={value}
+          disabled={disabled}
+          onChange={(e) => onChange(e.target.value)}
+          className="block w-full h-11 pl-3.5 pr-10 rounded-xl border border-border bg-background text-sm font-medium appearance-none disabled:opacity-60 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary"
+        >
+          <option value="">{placeholder}</option>
+          {options.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+        <ChevronIcon />
+      </div>
+    </label>
+  );
+}
+
+function FitmentBadge() {
+  return (
+    <div className="hidden lg:flex items-center gap-3 px-4 py-3 rounded-xl bg-accent text-accent-foreground">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-5 h-5" aria-hidden>
+        <path d="M5 13l2-5h10l2 5" strokeLinejoin="round" />
+        <path d="M3 13h18v5a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H7v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5z" strokeLinejoin="round" />
+        <circle cx="7" cy="16" r="1" />
+        <circle cx="17" cy="16" r="1" />
+      </svg>
+      <span className="text-[12px] font-mono uppercase tracking-[0.14em]">
+        Universal parts always shown
+      </span>
+    </div>
+  );
+}
+
+function ChevronIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none"
+      aria-hidden
+    >
+      <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function ArrowIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-3.5 h-3.5" aria-hidden>
+      <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}