npm - @cimplify/cli - Versions diffs - 0.2.0 - Mend

@cimplify/cli 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (457) hide show

package/templates/storefront-grocery/app/globals.css ADDED Viewed

@@ -0,0 +1,45 @@
+@import "tailwindcss";
+@source "../node_modules/@cimplify/sdk/dist";
+/* FreshMart — fresh green + warm cream. Trader Joe's / Whole Foods feel.
+   Friendly, abundant, slightly retro. */
+@theme {
+  --color-background: oklch(0.99 0.014 90);
+  --color-foreground: oklch(0.2 0.04 145);
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.2 0.04 145);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.2 0.04 145);
+  --color-primary: oklch(0.55 0.16 145);
+  --color-primary-foreground: oklch(0.99 0 0);
+  --color-secondary: oklch(0.95 0.025 90);
+  --color-secondary-foreground: oklch(0.25 0.05 140);
+  --color-muted: oklch(0.95 0.018 90);
+  --color-muted-foreground: oklch(0.45 0.03 140);
+  --color-accent: oklch(0.88 0.06 80);
+  --color-accent-foreground: oklch(0.25 0.06 140);
+  --color-destructive: oklch(0.58 0.24 27);
+  --color-destructive-foreground: oklch(0.99 0 0);
+  --color-border: oklch(0.91 0.018 85);
+  --color-input: oklch(0.93 0.018 85);
+  --color-ring: oklch(0.55 0.16 145);
+  --radius: 0.875rem;
+}
+@layer base {
+  html, body {
+    margin: 0;
+    padding: 0;
+    background: var(--color-background);
+    color: var(--color-foreground);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  a { color: inherit; text-decoration: none; }
+  h1, h2, h3, h4 {
+    font-family: var(--font-sans);
+    letter-spacing: -0.025em;
+    font-weight: 700;
+  }
+}

package/templates/storefront-grocery/app/layout.tsx ADDED Viewed

@@ -0,0 +1,77 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { Providers } from "@/components/providers";
+import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
+import { ProductModal } from "@/components/product-modal";
+import { CartDrawer } from "@/components/cart-drawer";
+import { Suspense } from "react";
+import { brand } from "@/lib/brand";
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+  display: "swap",
+});
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+export const metadata: Metadata = {
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: brand.name,
+    template: `%s — ${brand.name}`,
+  },
+  description: brand.description,
+  openGraph: {
+    type: "website",
+    siteName: brand.name,
+    locale: brand.locale,
+  },
+  twitter: { card: "summary_large_image" },
+};
+const ORGANIZATION_LD = {
+  "@context": "https://schema.org",
+  "@type": brand.schemaType,
+  name: brand.name,
+  url: SITE_URL,
+  description: brand.description,
+  email: brand.contact.email,
+  telephone: brand.contact.phoneTel,
+  address: {
+    "@type": "PostalAddress",
+    streetAddress: brand.contact.streetAddress,
+    addressLocality: brand.contact.city,
+    addressCountry: brand.contact.countryCode,
+  },
+  sameAs: brand.socials.map((s) => s.href),
+};
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning className={inter.variable}>
+      <body
+        suppressHydrationWarning
+        className="min-h-screen flex flex-col bg-background text-foreground font-sans"
+      >
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(ORGANIZATION_LD) }}
+        />
+        <Providers>
+          <Header />
+          <main className="flex-1 pb-12 w-full">{children}</main>
+          <Footer />
+          <Suspense fallback={null}>
+            <ProductModal />
+          </Suspense>
+          <CartDrawer />
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/templates/storefront-grocery/app/llms.txt/route.ts ADDED Viewed

@@ -0,0 +1,94 @@
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
+import { brand } from "@/lib/brand";
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+async function buildLlmsTxt(): Promise<string> {
+  "use cache";
+  cacheTag(tags.products(), tags.categories(), tags.collections());
+  cacheLife("hours");
+  const client = getServerClient();
+  const [productsRes, categoriesRes, collectionsRes] = await Promise.all([
+    client.catalogue.getProducts({ limit: 500 }),
+    client.catalogue.getCategories(),
+    client.catalogue.getCollections(),
+  ]);
+  const products: Product[] = productsRes.ok ? productsRes.value.items : [];
+  const categories = categoriesRes.ok ? categoriesRes.value : [];
+  const collections = collectionsRes.ok ? collectionsRes.value : [];
+  const lines: string[] = [];
+  lines.push(`# ${brand.name}`);
+  lines.push("");
+  lines.push(`> ${brand.llms.summary}`);
+  lines.push("");
+  lines.push("## Browse");
+  lines.push(`- [Home](${SITE_URL}/)`);
+  lines.push(`- [Shop](${SITE_URL}/shop): Full menu with filter and sort.`);
+  if (categories.length > 0) {
+    lines.push("");
+    lines.push("## Categories");
+    for (const c of categories) {
+      lines.push(
+        `- [${c.name}](${SITE_URL}/categories/${c.slug})${c.description ? `: ${c.description}` : ""}`,
+      );
+    }
+  }
+  if (collections.length > 0) {
+    lines.push("");
+    lines.push("## Collections");
+    for (const c of collections) {
+      lines.push(
+        `- [${c.name}](${SITE_URL}/collections/${c.slug})${c.description ? `: ${c.description}` : ""}`,
+      );
+    }
+  }
+  if (products.length > 0) {
+    lines.push("");
+    lines.push("## Products");
+    for (const p of products) {
+      const slug = p.slug ?? p.id;
+      const price = `${brand.currency} ${p.default_price}`;
+      const desc = p.description ? ` — ${p.description.replace(/\s+/g, " ").slice(0, 200)}` : "";
+      lines.push(`- [${p.name}](${SITE_URL}/shop?product=${slug}) (${price})${desc}`);
+    }
+  }
+  lines.push("");
+  lines.push("## Information");
+  lines.push(`- [About](${SITE_URL}/about)`);
+  lines.push(`- [FAQ](${SITE_URL}/faq)`);
+  lines.push(`- [Terms of Service](${SITE_URL}/terms)`);
+  lines.push(`- [Privacy Policy](${SITE_URL}/privacy)`);
+  lines.push(`- [Sitemap (XML)](${SITE_URL}/sitemap.xml)`);
+  lines.push("");
+  lines.push("## Contact");
+  lines.push(`- Email: ${brand.contact.email}`);
+  lines.push(`- Phone: ${brand.contact.phone}`);
+  lines.push(`- Address: ${brand.contact.address}`);
+  return lines.join("\n") + "\n";
+}
+/**
+ * `/llms.txt` — machine-readable site index for LLMs (per llmstxt.org).
+ * Lets coding agents and chat assistants find products, categories, and
+ * support pages without scraping HTML. Plain Markdown so it streams cheaply
+ * into context windows.
+ */
+export async function GET(): Promise<Response> {
+  const body = await buildLlmsTxt();
+  return new Response(body, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control": "public, max-age=0, s-maxage=3600, stale-while-revalidate=86400",
+    },
+  });
+}

package/templates/storefront-grocery/app/login/page.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { brand } from "@/lib/brand";
+export const metadata: Metadata = {
+  title: `Sign in — ${brand.name}`,
+  description: brand.account.loginSubtitle,
+};
+/**
+ * Cimplify Link (the iframe in `<CimplifyAccount>`) handles sign-in
+ * automatically when no session exists. We just bounce /login to /account
+ * so consumers landing here get the right UI without a duplicate form.
+ */
+export default function LoginPage(): never {
+  redirect("/account");
+}

package/templates/storefront-grocery/app/not-found.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+export const metadata: Metadata = {
+  title: `Page not found — ${brand.name}`,
+  description: "We couldn't find that page.",
+};
+export default function NotFound() {
+  return (
+    <section className="max-w-2xl mx-auto px-8 py-20 text-center">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-3">
+        404
+      </p>
+      <h1 className="font-serif text-[clamp(2.5rem,5vw,3.5rem)] font-semibold mb-4">
+        Page not found.
+      </h1>
+      <p className="text-muted-foreground leading-relaxed mb-8">
+        The URL you followed might be old, a typo, or pointing at a product
+        that&apos;s sold out for the day. Try the menu or head back home.
+      </p>
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <Link
+          href="/shop"
+          className="inline-block px-6 py-3 rounded-full bg-primary text-primary-foreground font-semibold text-sm transition-colors hover:bg-primary/90"
+        >
+          Browse the menu
+        </Link>
+        <Link
+          href="/"
+          className="inline-block px-6 py-3 rounded-full border border-border hover:bg-muted transition-colors text-sm font-medium"
+        >
+          Back home
+        </Link>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-grocery/app/opensearch.xml/route.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import { brand } from "@/lib/brand";
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+/**
+ * OpenSearch description document — lets browsers add this site to the
+ * address bar's search engine list. When users press Tab after typing the
+ * domain, they get an inline search box that hits /search?q=...
+ */
+export async function GET(): Promise<Response> {
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
+  <ShortName>${escapeXml(brand.shortName)}</ShortName>
+  <Description>Search ${escapeXml(brand.name)}</Description>
+  <InputEncoding>UTF-8</InputEncoding>
+  <Url type="text/html" method="get" template="${SITE_URL}/search?q={searchTerms}" />
+  <Url type="application/opensearchdescription+xml" rel="self" template="${SITE_URL}/opensearch.xml" />
+  <moz:SearchForm>${SITE_URL}/search</moz:SearchForm>
+</OpenSearchDescription>
+`;
+  return new Response(xml, {
+    headers: {
+      "Content-Type": "application/opensearchdescription+xml; charset=utf-8",
+      "Cache-Control": "public, max-age=86400",
+    },
+  });
+}
+function escapeXml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}

package/templates/storefront-grocery/app/orders/[id]/page.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import Link from "next/link";
+export default async function OrderPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return (
+    <section className="max-w-2xl mx-auto px-8 py-20 text-center">
+      <h1 className="font-serif text-3xl mt-0 mb-3">Thanks — your order is confirmed</h1>
+      <p className="text-muted-foreground">
+        Order <code className="font-mono text-foreground">{id}</code>
+      </p>
+      <p className="mt-6">
+        <Link
+          href="/"
+          className="inline-block px-6 py-3 rounded-full bg-primary text-primary-foreground font-semibold text-sm transition-colors hover:bg-primary/90"
+        >
+          Continue shopping
+        </Link>
+      </p>
+    </section>
+  );
+}

package/templates/storefront-grocery/app/page.tsx ADDED Viewed

@@ -0,0 +1,97 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
+import { Hero } from "@/components/hero";
+import { CollectionStrip } from "@/components/collection-strip";
+import { CategoryGrid } from "@/components/category-grid";
+import { brand } from "@/lib/brand";
+export const metadata: Metadata = {
+  title: `${brand.name} — ${brand.hero.title}`,
+  description: brand.description,
+};
+async function getHomeData() {
+  "use cache";
+  cacheTag(tags.collections(), tags.categories(), tags.products());
+  cacheLife("hours");
+  const client = getServerClient();
+  const [colRes, catRes] = await Promise.all([
+    client.catalogue.getCollections(),
+    client.catalogue.getCategories(),
+  ]);
+  const collections = colRes.ok ? colRes.value : [];
+  const categories = catRes.ok ? catRes.value : [];
+  const collectionsWithProducts = await Promise.all(
+    collections.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 };
+    }),
+  );
+  return {
+    collections: collectionsWithProducts.filter((x) => x.products.length > 0),
+    categories,
+  };
+}
+export default async function HomePage() {
+  const { collections, categories } = await getHomeData();
+  return (
+    <>
+      <Hero
+        badge={brand.hero.badge}
+        title={brand.hero.title}
+        subtitle={brand.hero.subtitle}
+      />
+      {collections.map(({ collection, products }) => (
+        <Suspense
+          key={collection.id}
+          fallback={<StripSkeleton title={collection.name} />}
+        >
+          <CollectionStrip
+            collection={collection}
+            products={products}
+            collectionHref={`/collections/${collection.slug}`}
+          />
+        </Suspense>
+      ))}
+      <Suspense fallback={<CategoryGridSkeleton />}>
+        <CategoryGrid categories={categories} />
+      </Suspense>
+    </>
+  );
+}
+function StripSkeleton({ title }: { title: string }) {
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-12">
+      <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">{title}</h2>
+      <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto pb-2">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="aspect-square bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </section>
+  );
+}
+function CategoryGridSkeleton() {
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-14">
+      <div className="h-8 w-48 bg-muted rounded mb-5 animate-pulse" />
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-32 bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-grocery/app/privacy/page.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+export const metadata: Metadata = {
+  title: `Privacy Policy — ${brand.name}`,
+  description: `How ${brand.name} collects, uses, and protects your personal data.`,
+};
+export default function PrivacyPage() {
+  const p = brand.privacy;
+  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">
+        {p.eyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
+        {p.title}
+      </h1>
+      <p className="text-sm text-muted-foreground not-prose mb-10">
+        Last updated: {p.lastUpdated}
+      </p>
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        {p.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="font-serif 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/app/returns/page.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+export const metadata: Metadata = {
+  title: `${brand.returns.title} — ${brand.name}`,
+};
+export default function ReturnsPage() {
+  return <PolicyPage policy={brand.returns} />;
+}

package/templates/storefront-grocery/app/robots.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import type { MetadataRoute } from "next";
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: "/",
+        disallow: ["/cart", "/checkout", "/orders/", "/api/"],
+      },
+    ],
+    sitemap: `${SITE_URL}/sitemap.xml`,
+    host: SITE_URL,
+  };
+}

package/templates/storefront-grocery/app/search/page.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { SearchClient } from "./search-client";
+import { brand } from "@/lib/brand";
+export const metadata: Metadata = {
+  title: `Search — ${brand.name}`,
+  description: `Search ${brand.name} — products, collections, categories.`,
+};
+export default function SearchPage() {
+  return (
+    <article className="max-w-7xl mx-auto px-6 sm:px-8 py-10">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Search
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Find anything.
+      </h1>
+      <Suspense fallback={<SearchSkeleton />}>
+        <SearchClient />
+      </Suspense>
+    </article>
+  );
+}
+function SearchSkeleton() {
+  return (
+    <div>
+      <div className="h-12 w-full max-w-xl bg-muted rounded animate-pulse mb-8" />
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+        {Array.from({ length: 8 }).map((_, i) => (
+          <div key={i} className="aspect-[4/3] bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-grocery/app/search/search-client.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+"use client";
+import { SearchPage } from "@cimplify/sdk/react";
+export function SearchClient() {
+  return <SearchPage />;
+}

package/templates/storefront-grocery/app/shipping/page.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+export const metadata: Metadata = {
+  title: `${brand.shipping.title} — ${brand.name}`,
+  description: brand.shipping.sections[0]?.body
+    ? typeof brand.shipping.sections[0].body === "string"
+      ? brand.shipping.sections[0].body
+      : brand.shipping.sections[0].body.intro
+    : undefined,
+};
+export default function ShippingPage() {
+  return <PolicyPage policy={brand.shipping} />;
+}

package/templates/storefront-grocery/app/shop/page.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags } from "@cimplify/sdk/server";
+import { ShopClient } from "./shop-client";
+import { brand } from "@/lib/brand";
+export const metadata: Metadata = {
+  title: `Shop — ${brand.name}`,
+  description: brand.description,
+};
+async function getShopData() {
+  "use cache";
+  cacheTag(tags.products(), tags.categories());
+  cacheLife("hours");
+  const client = getServerClient();
+  const [p, c] = await Promise.all([
+    client.catalogue.getProducts({ limit: 50 }),
+    client.catalogue.getCategories(),
+  ]);
+  return {
+    products: p.ok ? p.value.items : [],
+    categories: c.ok ? c.value : [],
+  };
+}
+export default async function ShopPage() {
+  const { products, categories } = await getShopData();
+  return <ShopClient products={products} categories={categories} />;
+}

package/templates/storefront-grocery/app/shop/shop-client.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+"use client";
+import { CataloguePage } from "@cimplify/sdk/react";
+import type { Category, Product } from "@cimplify/sdk";
+import { StoreProductCard } from "@/components/store-product-card";
+/**
+ * Client island for the shop page. Server-side fetches all products and
+ * categories (cached via `'use cache'` in `app/shop/page.tsx`), then hands
+ * them to `<CataloguePage>` which owns the interactive filter / sort state.
+ */
+export function ShopClient({
+  products,
+  categories,
+}: {
+  products: Product[];
+  categories: Category[];
+}) {
+  return (
+    <CataloguePage
+      title="The Menu"
+      products={products}
+      categories={categories}
+      renderCard={(p) => <StoreProductCard product={p} />}
+    />
+  );
+}

package/templates/storefront-grocery/app/signup/page.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { brand } from "@/lib/brand";
+export const metadata: Metadata = {
+  title: `Create an account — ${brand.name}`,
+  description: brand.account.signupSubtitle,
+};
+/**
+ * Cimplify Link handles sign-up inside the `<CimplifyAccount>` iframe.
+ * We bounce /signup to /account; the iframe shows the create-account UI
+ * for visitors with no session.
+ */
+export default function SignupPage(): never {
+  redirect("/account");
+}