create-cartbase 0.1.19 → 0.1.21

package/template/app/src/app/page.tsx

@@ -1,37 +1,37 @@
-import { Suspense } from "react"
-import { StoreTemplate } from "@cartbase/storefront/store/store-template"
-import { SkeletonProductGrid } from "@cartbase/storefront/store/skeleton-product-grid"
-import type { SortOptions } from "@cartbase/storefront/lib/sort-products"
-import { PRICING_CONTEXT, STORE_LOCALE } from "@/lib/config"
-import { storeClient } from "@/lib/store-client"
-
-type ListingQuery = { sortBy?: string; page?: string }
-
-/**
- * Home = the all-products listing (runbook step 5: always pass a pricing
- * context or prices come back undecorated). The sort and the page number
- * are request data, so the listing renders behind a boundary and the shell
- * around it stays prerendered.
- */
-export default function HomePage({ searchParams }: { searchParams: Promise<ListingQuery> }) {
-  return (
-    <Suspense fallback={<SkeletonProductGrid />}>
-      <Listing searchParams={searchParams} />
-    </Suspense>
-  )
-}
-
-async function Listing({ searchParams }: { searchParams: Promise<ListingQuery> }) {
-  const { sortBy, page } = await searchParams
-  return (
-    <StoreTemplate
-      client={storeClient}
-      sortBy={sortBy as SortOptions | undefined}
-      page={page}
-      pricingContext={PRICING_CONTEXT}
-      // Server-rendered: the locale provider cannot reach it, so the pack
-      // comes as a prop, and the prop is required.
-      labels={STORE_LOCALE.store}
-    />
-  )
-}
+import { Suspense } from "react"
+import { StoreTemplate } from "@cartbase/storefront/store/store-template"
+import { SkeletonProductGrid } from "@cartbase/storefront/store/skeleton-product-grid"
+import type { SortOptions } from "@cartbase/storefront/lib/sort-products"
+import { PRICING_CONTEXT, STORE_LOCALE } from "@/lib/config"
+import { storeClient } from "@/lib/store-client"
+
+type ListingQuery = { sortBy?: string; page?: string }
+
+/**
+ * Home = the all-products listing (runbook step 5: always pass a pricing
+ * context or prices come back undecorated). The sort and the page number
+ * are request data, so the listing renders behind a boundary and the shell
+ * around it stays prerendered.
+ */
+export default function HomePage({ searchParams }: { searchParams: Promise<ListingQuery> }) {
+  return (
+    <Suspense fallback={<SkeletonProductGrid />}>
+      <Listing searchParams={searchParams} />
+    </Suspense>
+  )
+}
+
+async function Listing({ searchParams }: { searchParams: Promise<ListingQuery> }) {
+  const { sortBy, page } = await searchParams
+  return (
+    <StoreTemplate
+      client={storeClient}
+      sortBy={sortBy as SortOptions | undefined}
+      page={page}
+      pricingContext={PRICING_CONTEXT}
+      // Server-rendered: the locale provider cannot reach it, so the pack
+      // comes as a prop, and the prop is required.
+      labels={STORE_LOCALE.store}
+    />
+  )
+}

package/template/app/src/app/products/[handle]/page.tsx

@@ -1,89 +1,89 @@
-import { notFound } from "next/navigation"
-import { ProductTemplate } from "@cartbase/storefront/products/product-template"
-import { getProduct, listProductHandles } from "@/lib/catalog"
-import { PRICING_CONTEXT, STORE_LOCALE } from "@/lib/config"
-import { storeClient } from "@/lib/store-client"
-
-/**
- * Every product's page is prerendered at build, so it is a file on the CDN.
- * A product added after the last deploy renders on its first visit and is
- * kept from then on. Without this list the handle would be request data and
- * every product page would render per visit (Cache Components).
- */
-export async function generateStaticParams() {
-  const handles = await listProductHandles()
-  // Cache Components refuses an empty list; a store with no products yet
-  // still builds, and the placeholder answers 404.
-  return handles.length ? handles.map((handle) => ({ handle })) : [{ handle: "__none__" }]
-}
-
-/**
- * PDP (runbook step 5): the product is a cached read by handle WITH the
- * pricing context (lib/catalog.ts), and the template renders it. The buy
- * box re-reads the product live behind its own boundary, so price and stock
- * are this minute's while the rest of the page is prerendered.
- *
- * No `addToCart` is passed: the add goes through the cart drawer mounted in
- * `providers.tsx`, so the drawer opens at the click with the product in it
- * and no page render runs (the product page contract, rule 6). The drawer's
- * `onCartChange` owns the cart cookie.
- */
-export default async function ProductPage({
-  params,
-  searchParams,
-}: {
-  params: Promise<{ handle: string }>
-  searchParams: Promise<{ variant?: string }>
-}) {
-  const { handle } = await params
-  const product = await getProduct(handle)
-  if (!product) notFound()
-
-  return (
-    <ProductTemplate
-      client={storeClient}
-      product={product}
-      pricingContext={PRICING_CONTEXT}
-      // The product page contract: the address names the variant
-      // (`?variant=<digits>`, Shopify's parameter), and the FIRST paint of
-      // the buy box is that variant's price, code and stock. The query is
-      // request data, so it goes in as a promise and the live buy box reads
-      // it behind its boundary. Switching a variant rewrites the address in
-      // the browser without asking the server.
-      initialVariantId={searchParams.then((query) => query.variant)}
-      // NO `promises` here, deliberately. Until 0.13.0 the library carried
-      // delivery, exchange and return promises as label DEFAULTS, so every
-      // store scaffolded from this file told shoppers "your package will
-      // arrive in 3-5 business days" and "we'll refund your money" without
-      // anyone having decided that. Those are YOUR commitments, so you write
-      // them:
-      //
-      //   promises={[
-      //     { icon: "delivery", title: "Fast delivery",
-      //       body: "Your order arrives in 2 working days." },
-      //   ]}
-      //
-      // Pass nothing and the section does not exist, which is the right
-      // default for a store that has not decided yet. The physical-facts
-      // section appears on its own for products that HAVE facts, and is
-      // skipped for those that do not.
-      //
-      // The pack has to be handed over here, not just mounted at the root:
-      // the related-products strip is a server component and cannot read
-      // the locale provider, so its heading would stay English. Required.
-      labels={STORE_LOCALE.products}
-    />
-  )
-}
-
-export async function generateMetadata({ params }: { params: Promise<{ handle: string }> }) {
-  const { handle } = await params
-  // The page's own read: one cache entry answers both.
-  const product = await getProduct(handle).catch(() => null)
-  if (!product) return {}
-  // SEO fields with title/description fallbacks (runbook step 5).
-  return {
-    title: product.seo_title ?? product.title,
-    description: product.seo_description ?? product.description ?? undefined,
-  }
-}
+import { notFound } from "next/navigation"
+import { ProductTemplate } from "@cartbase/storefront/products/product-template"
+import { getProduct, listProductHandles } from "@/lib/catalog"
+import { PRICING_CONTEXT, STORE_LOCALE } from "@/lib/config"
+import { storeClient } from "@/lib/store-client"
+
+/**
+ * Every product's page is prerendered at build, so it is a file on the CDN.
+ * A product added after the last deploy renders on its first visit and is
+ * kept from then on. Without this list the handle would be request data and
+ * every product page would render per visit (Cache Components).
+ */
+export async function generateStaticParams() {
+  const handles = await listProductHandles()
+  // Cache Components refuses an empty list; a store with no products yet
+  // still builds, and the placeholder answers 404.
+  return handles.length ? handles.map((handle) => ({ handle })) : [{ handle: "__none__" }]
+}
+
+/**
+ * PDP (runbook step 5): the product is a cached read by handle WITH the
+ * pricing context (lib/catalog.ts), and the template renders it. The buy
+ * box re-reads the product live behind its own boundary, so price and stock
+ * are this minute's while the rest of the page is prerendered.
+ *
+ * No `addToCart` is passed: the add goes through the cart drawer mounted in
+ * `providers.tsx`, so the drawer opens at the click with the product in it
+ * and no page render runs (the product page contract, rule 6). The drawer's
+ * `onCartChange` owns the cart cookie.
+ */
+export default async function ProductPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ handle: string }>
+  searchParams: Promise<{ variant?: string }>
+}) {
+  const { handle } = await params
+  const product = await getProduct(handle)
+  if (!product) notFound()
+
+  return (
+    <ProductTemplate
+      client={storeClient}
+      product={product}
+      pricingContext={PRICING_CONTEXT}
+      // The product page contract: the address names the variant
+      // (`?variant=<digits>`, Shopify's parameter), and the FIRST paint of
+      // the buy box is that variant's price, code and stock. The query is
+      // request data, so it goes in as a promise and the live buy box reads
+      // it behind its boundary. Switching a variant rewrites the address in
+      // the browser without asking the server.
+      initialVariantId={searchParams.then((query) => query.variant)}
+      // NO `promises` here, deliberately. Until 0.13.0 the library carried
+      // delivery, exchange and return promises as label DEFAULTS, so every
+      // store scaffolded from this file told shoppers "your package will
+      // arrive in 3-5 business days" and "we'll refund your money" without
+      // anyone having decided that. Those are YOUR commitments, so you write
+      // them:
+      //
+      //   promises={[
+      //     { icon: "delivery", title: "Fast delivery",
+      //       body: "Your order arrives in 2 working days." },
+      //   ]}
+      //
+      // Pass nothing and the section does not exist, which is the right
+      // default for a store that has not decided yet. The physical-facts
+      // section appears on its own for products that HAVE facts, and is
+      // skipped for those that do not.
+      //
+      // The pack has to be handed over here, not just mounted at the root:
+      // the related-products strip is a server component and cannot read
+      // the locale provider, so its heading would stay English. Required.
+      labels={STORE_LOCALE.products}
+    />
+  )
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ handle: string }> }) {
+  const { handle } = await params
+  // The page's own read: one cache entry answers both.
+  const product = await getProduct(handle).catch(() => null)
+  if (!product) return {}
+  // SEO fields with title/description fallbacks (runbook step 5).
+  return {
+    title: product.seo_title ?? product.title,
+    description: product.seo_description ?? product.description ?? undefined,
+  }
+}

package/template/app/src/app/search/page.tsx

@@ -1,33 +1,33 @@
-import { Suspense } from "react"
-import { SearchTemplate } from "@cartbase/storefront/store/search-template"
-import { SkeletonProductGrid } from "@cartbase/storefront/store/skeleton-product-grid"
-import { PRICING_CONTEXT, STORE_LOCALE } from "@/lib/config"
-import { storeClient } from "@/lib/store-client"
-
-type Query = Record<string, string | string[] | undefined>
-
-/**
- * Search page (runbook step 5) — fully URL-state driven search-template. The
- * query is request data, so the results render behind a boundary.
- */
-export default function SearchPage({ searchParams }: { searchParams: Promise<Query> }) {
-  return (
-    <Suspense fallback={<SkeletonProductGrid />}>
-      <Results searchParams={searchParams} />
-    </Suspense>
-  )
-}
-
-async function Results({ searchParams }: { searchParams: Promise<Query> }) {
-  const params = await searchParams
-  return (
-    <SearchTemplate
-      client={storeClient}
-      searchParams={params}
-      pricingContext={PRICING_CONTEXT}
-      // Server-rendered: the locale provider cannot reach it, so the pack
-      // comes as a prop, and the prop is required.
-      labels={STORE_LOCALE.store}
-    />
-  )
-}
+import { Suspense } from "react"
+import { SearchTemplate } from "@cartbase/storefront/store/search-template"
+import { SkeletonProductGrid } from "@cartbase/storefront/store/skeleton-product-grid"
+import { PRICING_CONTEXT, STORE_LOCALE } from "@/lib/config"
+import { storeClient } from "@/lib/store-client"
+
+type Query = Record<string, string | string[] | undefined>
+
+/**
+ * Search page (runbook step 5) — fully URL-state driven search-template. The
+ * query is request data, so the results render behind a boundary.
+ */
+export default function SearchPage({ searchParams }: { searchParams: Promise<Query> }) {
+  return (
+    <Suspense fallback={<SkeletonProductGrid />}>
+      <Results searchParams={searchParams} />
+    </Suspense>
+  )
+}
+
+async function Results({ searchParams }: { searchParams: Promise<Query> }) {
+  const params = await searchParams
+  return (
+    <SearchTemplate
+      client={storeClient}
+      searchParams={params}
+      pricingContext={PRICING_CONTEXT}
+      // Server-rendered: the locale provider cannot reach it, so the pack
+      // comes as a prop, and the prop is required.
+      labels={STORE_LOCALE.store}
+    />
+  )
+}

package/template/app/src/lib/browser-client.ts

@@ -1,35 +1,35 @@
-"use client"
-
-import { StorefrontClient } from "@cartbase/storefront/api/http"
-import {
-  BARTER_CLIENT_ID,
-  BARTER_PUBLISHABLE_KEY,
-  BARTER_URL,
-  LOCALE_COOKIE,
-} from "./config"
-
-function readCookie(name: string): string | null {
-  if (typeof document === "undefined") return null
-  const match = document.cookie
-    .split("; ")
-    .find((row) => row.startsWith(`${name}=`))
-  return match ? decodeURIComponent(match.slice(name.length + 1)) : null
-}
-
-/**
- * Browser-scope StorefrontClient (runbook step 2): constructed once per
- * app. Guest-only reference app — no auth token store.
- *
- * baseUrl is the APP origin, not the API origin: the store API ships no
- * CORS headers, so browser calls ride the same-origin `/api/store/*`
- * rewrite (next.config.ts). During SSR of client components no fetches
- * run — the API origin stands in only to satisfy the constructor.
- */
-export const browserClient = new StorefrontClient({
-  baseUrl:
-    typeof window !== "undefined" ? window.location.origin : BARTER_URL,
-  clientId: BARTER_CLIENT_ID,
-  publishableKey: BARTER_PUBLISHABLE_KEY,
-  getAuthToken: () => null,
-  getLocale: () => readCookie(LOCALE_COOKIE),
-})
+"use client"
+
+import { StorefrontClient } from "@cartbase/storefront/api/http"
+import {
+  BARTER_CLIENT_ID,
+  BARTER_PUBLISHABLE_KEY,
+  BARTER_URL,
+  LOCALE_COOKIE,
+} from "./config"
+
+function readCookie(name: string): string | null {
+  if (typeof document === "undefined") return null
+  const match = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith(`${name}=`))
+  return match ? decodeURIComponent(match.slice(name.length + 1)) : null
+}
+
+/**
+ * Browser-scope StorefrontClient (runbook step 2): constructed once per
+ * app. Guest-only reference app — no auth token store.
+ *
+ * baseUrl is the APP origin, not the API origin: the store API ships no
+ * CORS headers, so browser calls ride the same-origin `/api/store/*`
+ * rewrite (next.config.ts). During SSR of client components no fetches
+ * run — the API origin stands in only to satisfy the constructor.
+ */
+export const browserClient = new StorefrontClient({
+  baseUrl:
+    typeof window !== "undefined" ? window.location.origin : BARTER_URL,
+  clientId: BARTER_CLIENT_ID,
+  publishableKey: BARTER_PUBLISHABLE_KEY,
+  getAuthToken: () => null,
+  getLocale: () => readCookie(LOCALE_COOKIE),
+})

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

@@ -1,120 +1,120 @@
-import { cacheLife, cacheTag } from "next/cache"
-import { getConsent, type ConsentConfig } from "@cartbase/storefront/api/consent"
-import { getMenu, type Menu } from "@cartbase/storefront/api/menus"
-import { listProducts, retrieveProduct, type StoreProduct } from "@cartbase/storefront/api/products"
-import { getStore, type StoreIdentity } from "@cartbase/storefront/api/store"
-import { getTrackingConfig } from "@cartbase/storefront/tracking/get-tracking-config"
-import type { TrackingConfig } from "@cartbase/storefront/tracking/types"
-import { BARTER_CLIENT_ID, PRICING_CONTEXT } from "./config"
-import { storeClient } from "./store-client"
-
-/**
- * The store's cached reads (runbook step 3, Cache Components). Each is a
- * `use cache: remote` function on the `catalog` life (next.config.ts): the
- * platform is asked once per window, whichever instance renders, and every
- * page built from these reads is a prerendered file on the CDN.
- *
- * Failure contract: inside the cache a failed read THROWS, so a platform
- * blip is never stored as an empty answer for the whole window; the public
- * function decides what an error reads as. An unknown handle (404) is an
- * answer, null, and is kept.
- */
-
-function isNotFound(error: unknown): boolean {
-  return (error as { status?: number } | null)?.status === 404
-}
-
-const FALLBACK_STORE: StoreIdentity = {
-  id: BARTER_CLIENT_ID ?? "",
-  name: "Store",
-  slug: "",
-  brand: {
-    logo_url: null,
-    logo_square_url: null,
-    color_primary: null,
-    color_secondary: null,
-    slogan: null,
-  },
-}
-
-async function readStore(): Promise<StoreIdentity> {
-  "use cache: remote"
-  cacheLife("catalog")
-  cacheTag("catalog")
-  const { store } = await getStore(storeClient)
-  return store
-}
-
-/**
- * The store's own identity (store.md): name, slug, brand. A storefront never
- * hardcodes its name, and a transient API error never takes the layout down.
- */
-export async function getStoreIdentity(): Promise<StoreIdentity> {
-  return readStore().catch(() => FALLBACK_STORE)
-}
-
-/** The store's consent configuration; the platform always answers a complete one. */
-export async function getConsentSettings(): Promise<ConsentConfig> {
-  "use cache: remote"
-  cacheLife("catalog")
-  cacheTag("catalog")
-  const { consent } = await getConsent(storeClient)
-  return consent
-}
-
-async function readTracking(): Promise<TrackingConfig> {
-  "use cache: remote"
-  cacheLife("catalog")
-  cacheTag("catalog")
-  return getTrackingConfig(storeClient)
-}
-
-/** The store's marketing tags; null when the platform does not answer, so no tag mounts. */
-export async function getTracking(): Promise<TrackingConfig | null> {
-  return readTracking().catch(() => null)
-}
-
-async function readMenu(handle: string): Promise<Menu | null> {
-  "use cache: remote"
-  cacheLife("catalog")
-  cacheTag("catalog")
-  try {
-    const { menu } = await getMenu(storeClient, handle)
-    return menu
-  } catch (error) {
-    if (isNotFound(error)) return null
-    throw error
-  }
-}
-
-/** One menu by handle, or null: a store with no menus 404s every handle (menus.md). */
-export async function getMenuSafe(handle: string): Promise<Menu | null> {
-  return readMenu(handle).catch(() => null)
-}
-
-/** One product by handle, priced; null for a handle the store does not have. */
-export async function getProduct(handle: string): Promise<StoreProduct | null> {
-  "use cache: remote"
-  cacheLife("catalog")
-  cacheTag("catalog")
-  try {
-    const { product } = await retrieveProduct(storeClient, handle, PRICING_CONTEXT)
-    return product
-  } catch (error) {
-    if (isNotFound(error)) return null
-    throw error
-  }
-}
-
-/** The platform's largest page of products. */
-const PAGE = 200
-
-/** Every product handle, for the product pages the build prerenders. */
-export async function listProductHandles(): Promise<string[]> {
-  const handles: string[] = []
-  for (let offset = 0; ; offset += PAGE) {
-    const { products, count } = await listProducts(storeClient, { limit: PAGE, offset })
-    handles.push(...products.map((product) => product.handle).filter(Boolean))
-    if (!products.length || offset + PAGE >= count) return handles
-  }
-}
+import { cacheLife, cacheTag } from "next/cache"
+import { getConsent, type ConsentConfig } from "@cartbase/storefront/api/consent"
+import { getMenu, type Menu } from "@cartbase/storefront/api/menus"
+import { listProducts, retrieveProduct, type StoreProduct } from "@cartbase/storefront/api/products"
+import { getStore, type StoreIdentity } from "@cartbase/storefront/api/store"
+import { getTrackingConfig } from "@cartbase/storefront/tracking/get-tracking-config"
+import type { TrackingConfig } from "@cartbase/storefront/tracking/types"
+import { BARTER_CLIENT_ID, PRICING_CONTEXT } from "./config"
+import { storeClient } from "./store-client"
+
+/**
+ * The store's cached reads (runbook step 3, Cache Components). Each is a
+ * `use cache: remote` function on the `catalog` life (next.config.ts): the
+ * platform is asked once per window, whichever instance renders, and every
+ * page built from these reads is a prerendered file on the CDN.
+ *
+ * Failure contract: inside the cache a failed read THROWS, so a platform
+ * blip is never stored as an empty answer for the whole window; the public
+ * function decides what an error reads as. An unknown handle (404) is an
+ * answer, null, and is kept.
+ */
+
+function isNotFound(error: unknown): boolean {
+  return (error as { status?: number } | null)?.status === 404
+}
+
+const FALLBACK_STORE: StoreIdentity = {
+  id: BARTER_CLIENT_ID ?? "",
+  name: "Store",
+  slug: "",
+  brand: {
+    logo_url: null,
+    logo_square_url: null,
+    color_primary: null,
+    color_secondary: null,
+    slogan: null,
+  },
+}
+
+async function readStore(): Promise<StoreIdentity> {
+  "use cache: remote"
+  cacheLife("catalog")
+  cacheTag("catalog")
+  const { store } = await getStore(storeClient)
+  return store
+}
+
+/**
+ * The store's own identity (store.md): name, slug, brand. A storefront never
+ * hardcodes its name, and a transient API error never takes the layout down.
+ */
+export async function getStoreIdentity(): Promise<StoreIdentity> {
+  return readStore().catch(() => FALLBACK_STORE)
+}
+
+/** The store's consent configuration; the platform always answers a complete one. */
+export async function getConsentSettings(): Promise<ConsentConfig> {
+  "use cache: remote"
+  cacheLife("catalog")
+  cacheTag("catalog")
+  const { consent } = await getConsent(storeClient)
+  return consent
+}
+
+async function readTracking(): Promise<TrackingConfig> {
+  "use cache: remote"
+  cacheLife("catalog")
+  cacheTag("catalog")
+  return getTrackingConfig(storeClient)
+}
+
+/** The store's marketing tags; null when the platform does not answer, so no tag mounts. */
+export async function getTracking(): Promise<TrackingConfig | null> {
+  return readTracking().catch(() => null)
+}
+
+async function readMenu(handle: string): Promise<Menu | null> {
+  "use cache: remote"
+  cacheLife("catalog")
+  cacheTag("catalog")
+  try {
+    const { menu } = await getMenu(storeClient, handle)
+    return menu
+  } catch (error) {
+    if (isNotFound(error)) return null
+    throw error
+  }
+}
+
+/** One menu by handle, or null: a store with no menus 404s every handle (menus.md). */
+export async function getMenuSafe(handle: string): Promise<Menu | null> {
+  return readMenu(handle).catch(() => null)
+}
+
+/** One product by handle, priced; null for a handle the store does not have. */
+export async function getProduct(handle: string): Promise<StoreProduct | null> {
+  "use cache: remote"
+  cacheLife("catalog")
+  cacheTag("catalog")
+  try {
+    const { product } = await retrieveProduct(storeClient, handle, PRICING_CONTEXT)
+    return product
+  } catch (error) {
+    if (isNotFound(error)) return null
+    throw error
+  }
+}
+
+/** The platform's largest page of products. */
+const PAGE = 200
+
+/** Every product handle, for the product pages the build prerenders. */
+export async function listProductHandles(): Promise<string[]> {
+  const handles: string[] = []
+  for (let offset = 0; ; offset += PAGE) {
+    const { products, count } = await listProducts(storeClient, { limit: PAGE, offset })
+    handles.push(...products.map((product) => product.handle).filter(Boolean))
+    if (!products.length || offset + PAGE >= count) return handles
+  }
+}