@cimplify/sdk 0.38.2 → 0.38.3

package/templates/storefront/app/page.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useCimplifyClient } from "@cimplify/sdk/react";
+import type { Category, Collection, Product } from "@cimplify/sdk";
+import { Hero } from "@/components/hero";
+import { CollectionStrip } from "@/components/collection-strip";
+import { CategoryGrid } from "@/components/category-grid";
+
+interface CollectionWithProducts {
+  collection: Collection;
+  products: Product[];
+}
+
+export default function HomePage() {
+  const { client } = useCimplifyClient();
+  const [collections, setCollections] = useState<CollectionWithProducts[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      const [colRes, catRes] = await Promise.all([
+        client.catalogue.getCollections(),
+        client.catalogue.getCategories(),
+      ]);
+      if (cancelled) return;
+      if (catRes.ok) setCategories(catRes.value);
+      if (colRes.ok) {
+        const withProducts = await Promise.all(
+          colRes.value.map(async (col) => {
+            const r = await client.catalogue.getCollectionProducts(col.id);
+            const items = r.ok
+              ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
+              : [];
+            return { collection: col, products: items };
+          }),
+        );
+        if (!cancelled) setCollections(withProducts.filter((x) => x.products.length > 0));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client]);
+
+  return (
+    <>
+      <Hero
+        badge="BAKERY · PÂTISSERIE · COFFEE"
+        title="Fresh from the oven, every day."
+        subtitle="Sourdough, croissants, cakes, and more — handcrafted in East Legon, delivered across Accra."
+      />
+      {collections.map(({ collection, products }) => (
+        <CollectionStrip
+          key={collection.id}
+          collection={collection}
+          products={products}
+          collectionHref={`/collections/${collection.slug}`}
+        />
+      ))}
+      <CategoryGrid categories={categories} />
+    </>
+  );
+}

package/templates/storefront/app/shop/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { CataloguePage, useCimplifyClient } from "@cimplify/sdk/react";
+import type { Category, Product } from "@cimplify/sdk";
+import { StoreProductCard } from "@/components/store-product-card";
+
+/** Full catalogue page — every product, with the SDK's filterable layout. */
+export default function ShopPage() {
+  const { client } = useCimplifyClient();
+  const [products, setProducts] = useState<Product[]>();
+  const [categories, setCategories] = useState<Category[]>();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const [p, c] = await Promise.all([
+          client.catalogue.getProducts({ limit: 50 }),
+          client.catalogue.getCategories(),
+        ]);
+        if (cancelled) return;
+        if (p.ok) setProducts(p.value.items);
+        if (c.ok) setCategories(c.value);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client]);
+
+  if (loading) {
+    return <p className="text-center py-20 text-muted-foreground">Loading shop…</p>;
+  }
+  return (
+    <CataloguePage
+      title="The Menu"
+      products={products}
+      categories={categories}
+      renderCard={(p) => <StoreProductCard product={p} />}
+    />
+  );
+}

package/templates/storefront/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/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} aspectRatio="square" />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront/components/footer.tsx

@@ -0,0 +1,19 @@
+export function Footer() {
+  return (
+    <footer className="mt-12 px-8 py-10 text-center text-xs text-muted-foreground border-t border-border bg-card">
+      <p className="m-0 font-serif text-base text-foreground">Akua's Bakery</p>
+      <p className="mt-1 mb-3">12 Independence Ave, Accra · +233 244 000 000</p>
+      <p className="m-0">
+        Built with{" "}
+        <a
+          href="https://www.npmjs.com/package/@cimplify/sdk"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-semibold text-primary hover:underline"
+        >
+          @cimplify/sdk
+        </a>
+      </p>
+    </footer>
+  );
+}

package/templates/storefront/components/header.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useCartCount } from "@/lib/cart";
+
+const TAGLINE = "ACCRA · SINCE 2018";
+
+function navLinkClass(active: boolean) {
+  return [
+    "text-[13px] font-medium tracking-wide transition-colors",
+    active ? "text-primary" : "text-muted-foreground hover:text-foreground",
+  ].join(" ");
+}
+
+export function Header() {
+  const pathname = usePathname();
+  const { count } = useCartCount();
+  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]">
+          Akua's Bakery
+        </span>
+        <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
+          {TAGLINE}
+        </span>
+      </Link>
+      <nav className="flex items-center gap-6">
+        <Link href="/" className={navLinkClass(pathname === "/")}>Home</Link>
+        <Link href="/shop" className={navLinkClass(pathname === "/shop")}>Shop</Link>
+        <Link
+          href="/cart"
+          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"
+        >
+          Cart · {count}
+        </Link>
+      </nav>
+    </header>
+  );
+}

package/templates/storefront/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/components/product-modal.tsx

@@ -0,0 +1,105 @@
+"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 { addToCart } = 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 addToCart(p.id, qty, options);
+              close();
+              router.push("/cart");
+            }}
+            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/components/providers.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useMemo, type ReactNode } from "react";
+import { createCimplifyClient } from "@cimplify/sdk";
+import { CimplifyProvider } 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}>{children}</CimplifyProvider>;
+}

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

@@ -0,0 +1,48 @@
+"use client";
+
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { ProductCard } from "@cimplify/sdk/react";
+import type { ProductCardProps } from "@cimplify/sdk/react";
+import type { Product } from "@cimplify/sdk";
+
+type Props = Omit<ProductCardProps, "displayMode" | "renderLink"> & {
+  product: Product;
+};
+
+/**
+ * Wraps the SDK `<ProductCard>` so a click sets `?product=<slug>` instead of
+ * opening the SDK's own modal. All variant card styling (Food, Bundle,
+ * Composite, …) is preserved — we only intercept navigation so a single
+ * deep-linkable `<ProductModal>` instance handles every product surface.
+ */
+export function StoreProductCard(props: Props) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const open = (slug: string) => {
+    const next = new URLSearchParams(searchParams?.toString() ?? "");
+    next.set("product", slug);
+    router.push(`${pathname}?${next.toString()}`, { scroll: false });
+  };
+
+  return (
+    <ProductCard
+      {...props}
+      displayMode="page"
+      href={`?product=${props.product.slug || props.product.id}`}
+      renderLink={({ href, className, children }) => (
+        <a
+          href={href}
+          className={className}
+          onClick={(e) => {
+            e.preventDefault();
+            open(props.product.slug || props.product.id);
+          }}
+        >
+          {children}
+        </a>
+      )}
+    />
+  );
+}

package/templates/storefront/lib/cart.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useCimplifyClient } from "@cimplify/sdk/react";
+
+/**
+ * Tiny hook for the live cart-count pill in the header. Re-fetches on
+ * mount and exposes a refresh callback. The SDK's `useCart` hook is
+ * fine-grained but heavier — this is enough for a header badge.
+ */
+export function useCartCount(): { count: number; refresh: () => void } {
+  const { client } = useCimplifyClient();
+  const [count, setCount] = useState(0);
+
+  const refresh = () => {
+    void client.cart.getCount().then((r) => {
+      if (r.ok) setCount(r.value);
+    });
+  };
+
+  useEffect(() => {
+    refresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [client]);
+
+  return { count, refresh };
+}

package/templates/storefront/next.config.ts

@@ -0,0 +1,36 @@
+import type { NextConfig } from "next";
+
+const MOCK_URL = process.env.NEXT_PUBLIC_CIMPLIFY_API_URL?.trim() || "http://127.0.0.1:8787";
+
+/**
+ * Same-origin proxy to the Cimplify mock so the browser never makes a
+ * cross-origin request in dev (no CORS preflights, no flaky `Origin`
+ * mismatches). The SDK's base URL stays empty/relative — requests go to
+ * `/api/v1/...` on the Next origin, then this rewrite forwards them to
+ * the mock at `127.0.0.1:8787`.
+ *
+ * In production, point `NEXT_PUBLIC_CIMPLIFY_API_URL` at your Cimplify
+ * host and the rewrite continues to work the same way (or remove it and
+ * pass the absolute URL through `<CimplifyProvider/>`).
+ */
+const nextConfig: NextConfig = {
+  async rewrites() {
+    return [
+      { source: "/api/v1/:path*", destination: `${MOCK_URL}/api/v1/:path*` },
+      { source: "/img/:path*", destination: `${MOCK_URL}/img/:path*` },
+      { source: "/elements/:path*", destination: `${MOCK_URL}/elements/:path*` },
+      { source: "/_mock/:path*", destination: `${MOCK_URL}/_mock/:path*` },
+    ];
+  },
+  images: {
+    remotePatterns: [
+      { protocol: "http", hostname: "127.0.0.1", port: "8787", pathname: "/img/**" },
+      { protocol: "http", hostname: "localhost", port: "8787", pathname: "/img/**" },
+      { protocol: "http", hostname: "localhost", port: "3000", pathname: "/img/**" },
+      { protocol: "https", hostname: "loremflickr.com", pathname: "/**" },
+      { protocol: "https", hostname: "images.unsplash.com", pathname: "/**" },
+    ],
+  },
+};
+
+export default nextConfig;

package/templates/storefront/package.json

@@ -2,28 +2,27 @@
   "name": "__STOREFRONT_NAME__",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
-    "dev": "concurrently -k -n mock,vite -c blue,magenta \"bunx @cimplify/sdk --quiet\" \"vite\"",
-    "dev:storefront": "vite",
+    "dev": "concurrently -k -n mock,next -c blue,magenta \"bunx @cimplify/sdk --quiet\" \"next dev\"",
+    "dev:storefront": "next dev",
     "dev:mock": "bunx @cimplify/sdk",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
     "@cimplify/sdk": "^0.38.1",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-router-dom": "^7.9.0"
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.2.4",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.0.0",
+    "@tailwindcss/postcss": "^4.2.4",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "concurrently": "^9.0.0",
     "tailwindcss": "^4.2.4",
-    "typescript": "^5.9.3",
-    "vite": "^7.0.0"
+    "typescript": "^5.9.3"
   }
 }

package/templates/storefront/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/templates/storefront/tsconfig.json

@@ -1,19 +1,23 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
     "skipLibCheck": true,
-    "moduleResolution": "Bundler",
-    "allowImportingTsExtensions": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
-  "include": ["src"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

package/templates/storefront/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>__STOREFRONT_NAME__</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>