create-cartbase 0.1.5 → 0.1.7

package/template/app/src/app/gallery/_components/specimens.tsx

@@ -1,254 +0,0 @@
-/**
- * What each component looks like — split into the two things that are NOT
- * the same, and that this file previously collapsed into one row.
- *
- * **VARIANTS are chosen.** They are deliberate design options that ship as
- * part of the component's public surface. `variant="outline"` is a string a
- * theme writes and a merchant's agent reads, so each one needs a stable id
- * that we can never rename without breaking every storefront using it. A
- * variant is a promise.
- *
- * **STATES are received.** The same component, the same options, different
- * data: a long title, a missing image, a sold-out product, a reduced price.
- * Nobody picks these — the catalogue produces them. They ship as nothing at
- * all. They exist here because a component that only survives tidy data is
- * not finished, and the only way to know is to see the untidy data next to
- * the tidy data.
- *
- * The rule that follows: **adding a variant is an API decision, adding a
- * state is a test.** One is expensive and permanent, the other is free.
- */
-import type { ReactNode } from "react"
-import { Thumbnail } from "@cartbase/storefront/products/thumbnail"
-import { ProductPreview } from "@cartbase/storefront/products/product-preview"
-import { PreviewPrice } from "@cartbase/storefront/products/preview-price"
-import { ImageGallery } from "@cartbase/storefront/products/image-gallery"
-import { getProductPrice } from "@cartbase/storefront/lib/get-product-price"
-import { Button } from "@cartbase/storefront/primitives/ui/button"
-import { Input } from "@cartbase/storefront/primitives/ui/input"
-import { Label } from "@cartbase/storefront/primitives/ui/label"
-import type { StoreProduct } from "@cartbase/storefront/api/products"
-import type { Catalog } from "../_lib/catalog"
-
-export type SpecimenContext = { catalog: Catalog }
-
-/** A deliberate option. `id` is the value that ships in the component's API. */
-export type Variant = {
-  id: string
-  label: string
-  note?: string
-  wide?: boolean
-  render: ReactNode
-}
-
-/** A data condition the component must survive. Ships as nothing. */
-export type StateCase = {
-  label: string
-  note?: string
-  wide?: boolean
-  render: ReactNode
-}
-
-export type Specimen = {
-  /** How a merchant or theme selects a variant, e.g. `variant="outline"`. */
-  api?: string
-  variants?: Variant[]
-  states?: StateCase[]
-}
-
-export type SpecimenFn = (ctx: SpecimenContext) => Specimen
-
-function Absent({ what }: { what: string }) {
-  return (
-    <p className="text-xs text-muted-foreground italic">
-      This store has no product for the “{what}” case.
-    </p>
-  )
-}
-
-function Price({ product }: { product: StoreProduct }) {
-  const { cheapestPrice } = getProductPrice({ product })
-  if (!cheapestPrice) return <span className="text-xs text-muted-foreground">No price</span>
-  return <PreviewPrice price={cheapestPrice} />
-}
-
-export const SPECIMENS: Record<string, SpecimenFn | undefined> = {
-  "product-card": ({ catalog: { specimens } }) => ({
-    api: 'isFeatured',
-    variants: [
-      {
-        id: "default",
-        label: "Default",
-        note: "What every grid renders unless told otherwise.",
-        render: specimens.typical ? <ProductPreview product={specimens.typical} /> : <Absent what="typical" />,
-      },
-      {
-        id: "featured",
-        label: "Featured",
-        note: "A wider thumbnail ratio, for a hand-picked position.",
-        render: specimens.typical ? (
-          <ProductPreview product={specimens.typical} isFeatured />
-        ) : (
-          <Absent what="typical" />
-        ),
-      },
-    ],
-    states: [
-      {
-        label: "Long title",
-        note: "78 characters. Where card layouts usually break.",
-        render: specimens.longTitle ? (
-          <ProductPreview product={specimens.longTitle} />
-        ) : (
-          <Absent what="long title" />
-        ),
-      },
-      {
-        label: "No image",
-        note: "The fallback has to look deliberate, not broken.",
-        render: specimens.noImage ? <ProductPreview product={specimens.noImage} /> : <Absent what="no image" />,
-      },
-      {
-        label: "Reduced price",
-        note: "Coming from a real sale price list, not a decorative field.",
-        render: specimens.onSale ? <ProductPreview product={specimens.onSale} /> : <Absent what="reduced" />,
-      },
-      {
-        label: "Sold out",
-        note: "Nothing in the card says so today. That is a finding, not a state.",
-        render: specimens.soldOut ? <ProductPreview product={specimens.soldOut} /> : <Absent what="sold out" />,
-      },
-    ],
-  }),
-
-  "product-grid": ({ catalog: { all } }) => ({
-    states: [
-      {
-        label: "Eight products together",
-        note: "The real test of the card is its neighbours: different title lengths and image ratios in one row.",
-        wide: true,
-        render: (
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
-            {all.slice(0, 8).map((p) => (
-              <ProductPreview key={p.id} product={p} />
-            ))}
-          </div>
-        ),
-      },
-    ],
-  }),
-
-  thumbnail: ({ catalog: { specimens } }) => {
-    const p = specimens.typical
-    return {
-      api: 'size="square" | "full" | "small"',
-      variants: [
-        { id: "square", label: "Square", render: <Thumbnail thumbnail={p?.thumbnail ?? null} images={p?.images} size="square" /> },
-        { id: "full", label: "Full", render: <Thumbnail thumbnail={p?.thumbnail ?? null} images={p?.images} size="full" /> },
-        { id: "small", label: "Small", render: <Thumbnail thumbnail={p?.thumbnail ?? null} images={p?.images} size="small" /> },
-      ],
-      states: [
-        {
-          label: "No image at all",
-          note: "Falls through to the placeholder.",
-          render: <Thumbnail thumbnail={null} images={[]} size="square" />,
-        },
-      ],
-    }
-  },
-
-  "preview-price": ({ catalog: { specimens } }) => ({
-    states: [
-      {
-        label: "Plain",
-        render: specimens.typical ? <Price product={specimens.typical} /> : <Absent what="typical" />,
-      },
-      {
-        label: "Reduced",
-        note: "Server computed the sale price below the original.",
-        render: specimens.onSale ? <Price product={specimens.onSale} /> : <Absent what="reduced" />,
-      },
-    ],
-  }),
-
-  "image-gallery": ({ catalog: { specimens } }) => ({
-    states: [
-      {
-        label: "Four images",
-        wide: true,
-        render: specimens.gallery ? (
-          <ImageGallery images={specimens.gallery.images ?? []} />
-        ) : (
-          <Absent what="deep gallery" />
-        ),
-      },
-      {
-        label: "One image",
-        wide: true,
-        render: specimens.typical ? (
-          <ImageGallery images={(specimens.typical.images ?? []).slice(0, 1)} />
-        ) : (
-          <Absent what="typical" />
-        ),
-      },
-      { label: "No images", wide: true, render: <ImageGallery images={[]} /> },
-    ],
-  }),
-
-  button: () => ({
-    api: 'variant="…" size="…"',
-    variants: [
-      { id: "default", label: "Default", note: "Add to cart is this one.", render: <Button>Add to cart</Button> },
-      { id: "secondary", label: "Secondary", render: <Button variant="secondary">Secondary</Button> },
-      { id: "outline", label: "Outline", render: <Button variant="outline">Outline</Button> },
-      { id: "ghost", label: "Ghost", render: <Button variant="ghost">Ghost</Button> },
-      { id: "destructive", label: "Destructive", render: <Button variant="destructive">Remove</Button> },
-      { id: "sm", label: "Small", render: <Button size="sm">Small</Button> },
-      { id: "lg", label: "Large", render: <Button size="lg">Large</Button> },
-    ],
-    states: [
-      {
-        label: "Disabled",
-        note: "What a sold-out add-to-cart looks like.",
-        render: <Button disabled>Add to cart</Button>,
-      },
-      {
-        label: "Full width",
-        note: "How it sits on a product page.",
-        render: <Button className="w-full">Add to cart</Button>,
-      },
-    ],
-  }),
-
-  input: () => ({
-    states: [
-      {
-        label: "Empty",
-        render: (
-          <div className="space-y-2">
-            <Label htmlFor="g-email">Email</Label>
-            <Input id="g-email" placeholder="you@example.com" />
-          </div>
-        ),
-      },
-      {
-        label: "Filled",
-        render: (
-          <div className="space-y-2">
-            <Label htmlFor="g-name">Full name</Label>
-            <Input id="g-name" defaultValue="Maria Petrova" />
-          </div>
-        ),
-      },
-      {
-        label: "Disabled",
-        render: (
-          <div className="space-y-2">
-            <Label htmlFor="g-locked">Country</Label>
-            <Input id="g-locked" defaultValue="Bulgaria" disabled />
-          </div>
-        ),
-      },
-    ],
-  }),
-}

package/template/app/src/app/gallery/_components/status.tsx

@@ -1,47 +0,0 @@
-/**
- * Status, shown the same way everywhere: a dot in the nav, a word on the page.
- *
- * Three states and no fourth, so the board can never be ambiguous about what
- * is finished. `missing` is deliberately loud — an empty slot with a name is
- * the roadmap, and hiding it would make the library look more complete than
- * it is.
- */
-import type { Status } from "../_lib/registry"
-
-const COLOUR: Record<Status, string> = {
-  done: "bg-emerald-500",
-  built: "bg-amber-400",
-  missing: "bg-border",
-}
-
-const WORD: Record<Status, string> = {
-  done: "Agreed",
-  built: "Not reviewed",
-  missing: "Not built",
-}
-
-const EXPLAIN: Record<Status, string> = {
-  done: "We looked at it together, agreed it, and its styling values are tokens.",
-  built: "The code exists and renders, but we have never reviewed it.",
-  missing: "It does not exist. Building it is the work.",
-}
-
-export function StatusDot({ status }: { status: Status }) {
-  return (
-    <span
-      className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${COLOUR[status]}`}
-      title={WORD[status]}
-    />
-  )
-}
-
-export function StatusLabel({ status }: { status: Status }) {
-  return (
-    <span className="inline-flex items-center gap-2" title={EXPLAIN[status]}>
-      <StatusDot status={status} />
-      <span className="text-xs uppercase tracking-wide text-muted-foreground">
-        {WORD[status]}
-      </span>
-    </span>
-  )
-}

package/template/app/src/app/gallery/_lib/catalog.ts

@@ -1,59 +0,0 @@
-/**
- * The gallery's data. Real products from the live store, selected by handle so
- * each specimen is a KNOWN state rather than whatever happened to be first.
- *
- * The handles below are seeded by scripts/seed-demo-catalog.ts, which marks
- * each one with the state it exists to prove. If a handle goes missing the
- * gallery degrades to "not in this store" rather than crashing, because the
- * app must render against ANY store — that is the whole point of pointing it
- * at a store through env instead of bundling fixtures.
- */
-import { listProducts, type StoreProduct } from "@cartbase/storefront/api/products"
-import { PRICING_CONTEXT } from "@/lib/config"
-import { getServerClient } from "@/lib/server-client"
-
-/** Handles whose state we deliberately review. */
-export const SPECIMEN_HANDLES = {
-  /** Ordinary case: short title, image, a few variants. */
-  typical: "merino-crew",
-  /** A merchandising title long enough to break a card's layout. */
-  longTitle: "brushed-overshirt",
-  /** No thumbnail and no gallery — the fallback has to be deliberate. */
-  noImage: "lightweight-parka",
-  /** Zero stock at every variant. */
-  soldOut: "fisherman-sweater",
-  /** Carries a real `sale` price list, so calculated < original. */
-  onSale: "chambray-work-shirt",
-  /** Four colours by three sizes: the option matrix that breaks pickers. */
-  manyVariants: "oxford-shirt",
-  /** A single expensive item with a deep gallery. */
-  gallery: "leather-weekend-bag",
-} as const
-
-export type SpecimenKey = keyof typeof SPECIMEN_HANDLES
-
-export type Catalog = {
-  /** Everything the key's sales channel exposes, newest first. */
-  all: StoreProduct[]
-  /** The named states above, resolved. Missing handles map to null. */
-  specimens: Record<SpecimenKey, StoreProduct | null>
-  /** True when the store answered but has nothing to show. */
-  empty: boolean
-}
-
-/**
- * One fetch for the whole gallery. Products come back with
- * `variant.calculated_price` decorated because we always pass a pricing
- * context — without it prices render undecided and every price specimen lies.
- */
-export async function loadCatalog(): Promise<Catalog> {
-  const client = await getServerClient()
-  const { products } = await listProducts(client, { limit: 100, ...PRICING_CONTEXT })
-
-  const byHandle = new Map(products.map((p) => [p.handle, p]))
-  const specimens = Object.fromEntries(
-    Object.entries(SPECIMEN_HANDLES).map(([key, handle]) => [key, byHandle.get(handle) ?? null])
-  ) as Record<SpecimenKey, StoreProduct | null>
-
-  return { all: products, specimens, empty: products.length === 0 }
-}