create-cartbase 0.1.5 → 0.1.7

package/template/app/src/lib/config.ts

@@ -1,21 +1,30 @@
-/** Shared storefront configuration (BUILD-A-STOREFRONT.md — inputs table). */
-
-export const BARTER_URL = process.env.NEXT_PUBLIC_CARTBASE_URL ?? ""
-export const BARTER_CLIENT_ID = process.env.NEXT_PUBLIC_CARTBASE_CLIENT_ID ?? ""
-export const BARTER_PUBLISHABLE_KEY =
-  process.env.NEXT_PUBLIC_CARTBASE_PUBLISHABLE_KEY || undefined
-
-/**
- * Cart-id cookie — owned by the app (the SDK never persists the cart);
- * the NAME is owned by the library so every consumer emits the same wire
- * fingerprint (platform-fingerprints card). `readCartCookie` is the
- * backward-compat reader for the legacy `_barter_cart_id` name.
- */
-export { CART_COOKIE, readCartCookie } from "@cartbase/storefront/lib/cookie-names"
-export const CART_COOKIE_MAX_AGE = 60 * 60 * 24 * 30 // 30 days
-
-/** Locale cookie read by the clients' `getLocale`. */
-export const LOCALE_COOKIE = "_barter_locale"
-
-/** Pricing context for every catalog surface (runbook step 5). EUR only. */
-export const PRICING_CONTEXT = { currency_code: "eur" } as const
+/** Shared storefront configuration (BUILD-A-STOREFRONT.md — the one input). */
+
+import { cartbaseApiOrigin } from "@cartbase/storefront/lib/platform"
+
+/**
+ * The store's publishable key names the store and scopes its catalog: the
+ * ONE value a storefront needs (one key, 2026-09-07). The origin is the
+ * platform's, overridable for a local or staging platform; the client id is
+ * the platform's own door (hosted builds carry it) and never something to
+ * copy by hand.
+ */
+export const BARTER_PUBLISHABLE_KEY =
+  process.env.NEXT_PUBLIC_CARTBASE_PUBLISHABLE_KEY || undefined
+export const BARTER_URL = cartbaseApiOrigin(process.env.NEXT_PUBLIC_CARTBASE_URL)
+export const BARTER_CLIENT_ID = process.env.NEXT_PUBLIC_CARTBASE_CLIENT_ID || undefined
+
+/**
+ * Cart-id cookie — owned by the app (the SDK never persists the cart);
+ * the NAME is owned by the library so every consumer emits the same wire
+ * fingerprint (platform-fingerprints card). `readCartCookie` is the
+ * backward-compat reader for the legacy `_barter_cart_id` name.
+ */
+export { CART_COOKIE, readCartCookie } from "@cartbase/storefront/lib/cookie-names"
+export const CART_COOKIE_MAX_AGE = 60 * 60 * 24 * 30 // 30 days
+
+/** Locale cookie read by the clients' `getLocale`. */
+export const LOCALE_COOKIE = "_barter_locale"
+
+/** Pricing context for every catalog surface (runbook step 5). EUR only. */
+export const PRICING_CONTEXT = { currency_code: "eur" } as const

package/template/app/next-env.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/template/app/smoke.mjs

@@ -1,158 +0,0 @@
-/**
- * Adoption-proof smoke: drives the REAL example-storefront UI from home to
- * a completed pp_manual checkout against the barter backend.
- *
- * Prereqs: backend on :4777, example app on :4778 (see examples/storefront
- * package.json). Run: `node examples/storefront/smoke.mjs` from the repo
- * root (Playwright is a root devDependency). Exits 0 only when the
- * confirmation page shows an order number and totals.
- */
-import { chromium } from "@playwright/test"
-
-const BASE = process.env.SMOKE_BASE_URL ?? "http://127.0.0.1:4778"
-const trail = []
-const step = (msg) => {
-  trail.push(msg)
-  console.log(`[smoke] ${msg}`)
-}
-
-const browser = await chromium.launch()
-const page = await browser.newPage()
-page.setDefaultTimeout(30_000)
-
-try {
-  // ── Home ────────────────────────────────────────────────────────────
-  await page.goto(`${BASE}/`, { waitUntil: "domcontentloaded" })
-  step("home loaded")
-
-  // Consent banner (builtin modal is the server default) — accept.
-  const acceptButton = page.getByRole("button", { name: "Accept", exact: true })
-  try {
-    await acceptButton.waitFor({ state: "visible", timeout: 10_000 })
-    await acceptButton.click()
-    step("consent banner accepted")
-  } catch {
-    step("no consent banner rendered (disabled or external mode)")
-  }
-
-  await page.locator('a[href^="/products/"]').first().waitFor()
-  step("home renders product cards")
-
-  // ── PDP (seeded handle) ─────────────────────────────────────────────
-  await page.goto(`${BASE}/products/linen-shirt`, {
-    waitUntil: "domcontentloaded",
-  })
-  await page.getByTestId("product-container").waitFor()
-  step("PDP linen-shirt rendered")
-
-  // Pick the REAL Size option's "M" (the shared dev tenant accretes junk
-  // options; variant match needs exactly the Size choice). Dev-mode
-  // hydration can lag the SSR paint — retry until the selection sticks.
-  const sizeRow = page
-    .locator('div.flex.flex-col:has(> span:text-is("Select Size"))')
-    .first()
-  const mButton = sizeRow.getByRole("button", { name: "M", exact: true })
-  let selected = false
-  for (let i = 0; i < 30 && !selected; i++) {
-    await mButton.click()
-    await page.waitForTimeout(700)
-    selected = ((await mButton.getAttribute("class")) ?? "").includes(
-      "border-primary"
-    )
-  }
-  if (!selected) throw new Error("Size M never became selected")
-  step("selected Size M")
-
-  const addButton = page.getByTestId("add-product-button").first()
-  await addButton.click()
-  step("clicked Add to cart")
-
-  // ── Cart drawer → checkout ──────────────────────────────────────────
-  // The drawer auto-opens only on a rise from a nonzero base (first add
-  // never auto-opens — components.md); open it via the header cart
-  // button once the badge confirms the server-side add landed.
-  await page
-    .getByTestId("nav-cart-link")
-    .locator("span")
-    .filter({ hasText: /^\d+$/ })
-    .waitFor({ timeout: 20_000 })
-  step("header cart badge shows the added item")
-  await page.getByTestId("nav-cart-link").click()
-  const checkoutLink = page.getByRole("link", { name: "Checkout" })
-  await checkoutLink.click()
-  step("cart drawer opened via header cart button")
-  await page.waitForURL("**/checkout")
-  step("navigated to /checkout")
-
-  // ── Address form ────────────────────────────────────────────────────
-  const fill = async (name, value) => {
-    await page.locator(`[name="${name}"]`).fill(value)
-  }
-  await fill("email", "smoke-adoption@example.test")
-  await fill("shipping_address.first_name", "Ivan")
-  await fill("shipping_address.last_name", "Petrov")
-  await fill("shipping_address.address_1", "ul. Vitosha 15")
-  await fill("shipping_address.postal_code", "1000")
-  await fill("shipping_address.city", "Sofia")
-  await fill("shipping_address.phone", "+359888123456")
-  await page.locator('[name="shipping_address.phone"]').blur()
-  step("address form filled (BG address, EUR cart)")
-
-  // ── Shipping method ─────────────────────────────────────────────────
-  await page.getByText("Flat Rate (Bulgaria)", { exact: false }).first().click()
-  step('selected shipping "Flat Rate (Bulgaria)"')
-
-  // ── Payment: manual/offline tab (no Stripe env) ─────────────────────
-  const codTab = page.getByRole("button", { name: "Cash on delivery" })
-  await codTab.waitFor({ state: "visible" })
-  await codTab.click()
-  step("selected the merchant method (offline tab)")
-
-  // ── Place order ─────────────────────────────────────────────────────
-  const submit = page.getByTestId("submit-order-button")
-  await submit.waitFor({ state: "visible" })
-  // The Buy button enables once the debounced address autosave lands.
-  await page.waitForFunction(
-    () =>
-      !document.querySelector('[data-testid="submit-order-button"]')?.disabled,
-    undefined,
-    { timeout: 20_000 }
-  )
-  await submit.click()
-  step("clicked Place order")
-
-  // ── Confirmation ────────────────────────────────────────────────────
-  await page.waitForURL("**/order/**/confirmed", { timeout: 60_000 })
-  step(`confirmation URL: ${new URL(page.url()).pathname}`)
-
-  const orderNumberText = await page
-    .getByText(/#\d+/)
-    .first()
-    .innerText({ timeout: 30_000 })
-  const displayNumber = orderNumberText.match(/#(\d+)/)?.[1]
-  if (!displayNumber) throw new Error("no order display number rendered")
-  step(`order number rendered: #${displayNumber}`)
-
-  // Totals: the order family renders a Total row with a EUR amount.
-  const totalRow = page
-    .locator("div,li")
-    .filter({ hasText: /^Total/ })
-    .filter({ hasText: "€" })
-    .first()
-  const totalText = (await totalRow.innerText()).replace(/\s+/g, " ").trim()
-  if (!/€\s?\d/.test(totalText)) throw new Error("no EUR total rendered")
-  step(`totals rendered: ${totalText}`)
-
-  console.log("\n[smoke] PASS — completed checkout, order #" + displayNumber)
-  await browser.close()
-  process.exit(0)
-} catch (err) {
-  console.error("\n[smoke] FAIL after steps:\n - " + trail.join("\n - "))
-  console.error(err)
-  try {
-    await page.screenshot({ path: "examples/storefront/smoke-failure.png" })
-    console.error("[smoke] screenshot: examples/storefront/smoke-failure.png")
-  } catch {}
-  await browser.close()
-  process.exit(1)
-}

package/template/app/src/app/checkout/mypos-demo-tab.tsx

@@ -1,101 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState } from "react"
-
-/**
- * DEMO ONLY (2026-08-04, provider research): mounts the myPOS Embedded
- * sandbox (their public docs demo store) inside the real checkout's
- * payment section, so the visual seam of a third-party embedded provider
- * can be judged against our own tabs. Enabled by
- * NEXT_PUBLIC_MYPOS_DEMO=1; never ship this to a real store.
- */
-
-const SDK_SRC = "https://developers.mypos.com/repository/mypos-embedded-sdk.js"
-const CONTAINER_ID = "mypos-demo-container"
-
-declare global {
-  interface Window {
-    MyPOSEmbedded?: {
-      createPayment: (
-        containerId: string,
-        params: Record<string, unknown>,
-        callbacks: Record<string, unknown>
-      ) => void
-    }
-  }
-}
-
-export function MyposDemoTab({ amount, currency }: { amount: number; currency: string }) {
-  const mounted = useRef(false)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (mounted.current) return
-    mounted.current = true
-
-    const mount = () => {
-      const sdk = window.MyPOSEmbedded
-      if (!sdk || typeof sdk.createPayment !== "function") {
-        setError("myPOS SDK loaded but its global was not found (check the console).")
-        return
-      }
-      sdk.createPayment(
-        CONTAINER_ID,
-        {
-          // Public sandbox store from the myPOS docs sample.
-          sid: "000000000000010",
-          ipcLanguage: "en",
-          walletNumber: "61938166610",
-          amount,
-          currency: currency.toUpperCase(),
-          orderID: `demo_${Math.random().toString(36).slice(2, 11)}`,
-          urlNotify: "https://example.com/payment-notify",
-          urlOk: window.location.href,
-          urlCancel: window.location.href,
-          keyIndex: 1,
-          cartItems: [{ article: "Cartbase demo order", quantity: 1, price: amount, currency: currency.toUpperCase() }],
-        },
-        {
-          isSandbox: true,
-          onSuccess: (data: unknown) => {
-            // Real integration: this is where complete-cart would run,
-            // AFTER server-side verification via urlNotify.
-            // eslint-disable-next-line no-console
-            console.log("[mypos-demo] sandbox success", data)
-            window.alert("myPOS sandbox reported success (demo only, no order is placed).")
-          },
-          onError: () => {
-            // eslint-disable-next-line no-console
-            console.log("[mypos-demo] sandbox payment failed")
-          },
-        }
-      )
-    }
-
-    const existing = document.querySelector(`script[src="${SDK_SRC}"]`)
-    if (existing && window.MyPOSEmbedded) {
-      mount()
-      return
-    }
-    const script = document.createElement("script")
-    script.src = SDK_SRC
-    script.async = true
-    script.onload = mount
-    script.onerror = () => setError("Could not load the myPOS SDK script.")
-    document.head.appendChild(script)
-  }, [amount, currency])
-
-  return (
-    <div>
-      {error ? (
-        <p className="text-sm text-red-600">{error}</p>
-      ) : (
-        <div id={CONTAINER_ID} className="min-h-[620px]" />
-      )}
-      <p className="mt-2 text-xs text-muted-foreground">
-        myPOS sandbox demo. The frame above is myPOS's embedded form with its
-        own pay button; everything around it is the Cartbase checkout.
-      </p>
-    </div>
-  )
-}

package/template/app/src/app/gallery/[slug]/page.tsx

@@ -1,172 +0,0 @@
-/**
- * One component, at its own permanent address.
- *
- * This is the page we sit on together: you say "let's do the hero", we open
- * /gallery/hero, and everything about that one thing is here.
- *
- * Variants and states are shown as two separate blocks on purpose. They look
- * similar and they are not: a variant is a permanent option in the
- * component's API with an id a theme writes, a state is data the component
- * has to survive and ships as nothing. Putting them in one row, which this
- * page used to do, teaches the wrong thing.
- */
-import Link from "next/link"
-import { notFound } from "next/navigation"
-import { findEntry, GROUPS } from "../_lib/registry"
-import { loadCatalog } from "../_lib/catalog"
-import { SPECIMENS, type StateCase, type Variant } from "../_components/specimens"
-import { StatusLabel } from "../_components/status"
-
-export const dynamic = "force-dynamic"
-
-export function generateStaticParams() {
-  return GROUPS.flatMap((g) => g.entries.map((e) => ({ slug: e.slug })))
-}
-
-export default async function ComponentPage({
-  params,
-}: {
-  params: Promise<{ slug: string }>
-}) {
-  const { slug } = await params
-  const entry = findEntry(slug)
-  if (!entry) notFound()
-
-  const build = SPECIMENS[slug]
-  const specimen = build ? build({ catalog: await loadCatalog() }) : null
-
-  return (
-    <article>
-      <header className="mb-10">
-        <Link
-          href="/gallery"
-          className="text-xs uppercase tracking-widest text-muted-foreground hover:text-foreground"
-        >
-          {entry.group.name}
-        </Link>
-        <div className="flex flex-wrap items-baseline gap-4 mt-2">
-          <h1 className="text-3xl font-semibold">{entry.name}</h1>
-          <StatusLabel status={entry.status} />
-        </div>
-        <p className="text-muted-foreground mt-3 max-w-2xl">{entry.summary}</p>
-      </header>
-
-      {specimen ? (
-        <div className="space-y-14">
-          {specimen.variants?.length ? (
-            <Block
-              title="Variants"
-              blurb="Deliberate options. Each id below ships in the component's API, so a theme can select it and we can never rename it without breaking every storefront using it."
-              api={specimen.api}
-            >
-              {specimen.variants.map((v) => (
-                <Cell key={v.id} label={v.label} note={v.note} wide={v.wide} id={v.id}>
-                  {v.render}
-                </Cell>
-              ))}
-            </Block>
-          ) : (
-            <Block
-              title="Variants"
-              blurb="This component has none. It renders one way, and everything below is data it has to survive."
-            >
-              <p className="col-span-full text-sm text-muted-foreground">
-                No options to choose from.
-              </p>
-            </Block>
-          )}
-
-          {specimen.states?.length ? (
-            <Block
-              title="States"
-              blurb="Not choices. The same component receiving different data, which the catalogue produces whether we plan for it or not. These ship as nothing; they exist so we can see what breaks."
-            >
-              {specimen.states.map((s: StateCase) => (
-                <Cell key={s.label} label={s.label} note={s.note} wide={s.wide}>
-                  {s.render}
-                </Cell>
-              ))}
-            </Block>
-          ) : null}
-        </div>
-      ) : entry.status === "missing" ? (
-        <Empty
-          title={`${entry.name} does not exist yet`}
-          body="Nothing in the library renders this. Say the word and we design it here first, then it gets built into the package."
-        />
-      ) : (
-        <Empty
-          title={`${entry.name} exists but has never been reviewed`}
-          body="The code renders in the shop today. It has no specimen here yet, which means we have never put its variants and states side by side and decided whether it is right."
-        />
-      )}
-    </article>
-  )
-}
-
-function Block({
-  title,
-  blurb,
-  api,
-  children,
-}: {
-  title: string
-  blurb: string
-  api?: string
-  children: React.ReactNode
-}) {
-  return (
-    <section>
-      <div className="mb-6">
-        <h2 className="text-lg font-semibold">{title}</h2>
-        <p className="text-sm text-muted-foreground mt-1 max-w-2xl">{blurb}</p>
-        {api ? (
-          <code className="inline-block mt-3 text-xs bg-muted px-2 py-1 rounded font-mono">
-            {api}
-          </code>
-        ) : null}
-      </div>
-      <div className="grid gap-8 md:grid-cols-2">{children}</div>
-    </section>
-  )
-}
-
-function Cell({
-  label,
-  note,
-  id,
-  wide,
-  children,
-}: {
-  label: string
-  note?: string
-  id?: string
-  wide?: boolean
-  children: React.ReactNode
-}) {
-  return (
-    <div className={wide ? "col-span-full min-w-0" : "min-w-0"}>
-      <div className="mb-3 flex items-baseline gap-2 flex-wrap">
-        <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-          {label}
-        </span>
-        {id ? (
-          <code className="text-[11px] font-mono text-muted-foreground/70">{id}</code>
-        ) : null}
-      </div>
-      {note ? <p className="text-xs text-muted-foreground/80 -mt-2 mb-3">{note}</p> : null}
-      <div className="rounded-lg border border-border p-4 bg-background">{children}</div>
-    </div>
-  )
-}
-
-function Empty({ title, body }: { title: string; body: string }) {
-  return (
-    <div className="rounded-lg border border-dashed border-border p-10 text-center">
-      <p className="font-medium">{title}</p>
-      <p className="text-sm text-muted-foreground mt-2 max-w-md mx-auto">{body}</p>
-    </div>
-  )
-}
-
-export type { Variant }