makersclaw 0.1.0 → 0.3.0

package/registry/blocks/product-detail/price.jsx

@@ -0,0 +1,115 @@
+import { Badge, cx } from "../../ui";
+
+// Money and the cart line, shared by the product page's parts. Prices are
+// numbers in the currency's major unit (19.5 is $19.50) — the same shape
+// the cart block reads, so a line made here drops straight into it.
+
+const formats = new Map();
+
+/** 1290 → "$1,290.00" in the reader's locale. A bad currency code falls
+ *  back to USD rather than throwing mid-render. */
+export function formatPrice(amount, currency = "USD", locale) {
+  const key = `${locale ?? ""}|${currency}`;
+  let f = formats.get(key);
+  if (!f) {
+    try {
+      f = new Intl.NumberFormat(locale, { style: "currency", currency });
+    } catch {
+      f = new Intl.NumberFormat(locale, { style: "currency", currency: "USD" });
+    }
+    formats.set(key, f);
+  }
+  return f.format(Number(amount) || 0);
+}
+
+const num = (v) => (typeof v === "number" && Number.isFinite(v) ? v : null);
+
+/** The price as shown: now, the old price struck through, and how much
+ *  is off. `size` lg on a product page, md on a card. */
+export function Price({ price, compareAt, currency, locale, size = "lg", className }) {
+  const now = num(price);
+  const was = num(compareAt);
+  if (now === null) return null;
+  const off = was !== null && was > now ? Math.round(((was - now) / was) * 100) : 0;
+  return (
+    <p className={cx("flex flex-wrap items-baseline gap-x-2 gap-y-1", className)}>
+      <span data-nums className={cx("font-semibold text-foreground", size === "lg" ? "text-2xl" : "text-base")}>
+        {formatPrice(now, currency, locale)}
+      </span>
+      {off ? (
+        <>
+          <span data-nums className="text-sm text-muted-foreground line-through">
+            <span className="sr-only">was </span>
+            {formatPrice(was, currency, locale)}
+          </span>
+          <Badge tone="success" variant="soft">
+            {off}% off
+          </Badge>
+        </>
+      ) : null}
+    </p>
+  );
+}
+
+// An option's values arrive as strings or objects; objects from here on.
+export const valuesOf = (option) =>
+  (option?.values ?? []).filter((v) => v != null).map((v) => (typeof v === "object" ? v : { value: String(v), label: String(v) }));
+
+export const labelOf = (v) => v?.label ?? String(v?.value ?? "");
+
+/** The first choice per option: `product.selected` where it names a
+ *  value that exists and is not sold out, else the first open value. */
+export function defaultSelection(product) {
+  const out = {};
+  for (const o of product?.options ?? []) {
+    const values = valuesOf(o);
+    const given = product?.selected?.[o.key];
+    const hit = values.find((v) => v.value === given && !v.disabled);
+    out[o.key] = (hit ?? values.find((v) => !v.disabled))?.value ?? null;
+  }
+  return out;
+}
+
+/** What one unit costs with these choices: a chosen value with its own
+ *  `price` (a plan, a larger size) replaces the product's. */
+export function priceFor(product, selected) {
+  let price = product?.price;
+  let compareAt = product?.compareAt;
+  for (const o of product?.options ?? []) {
+    const v = valuesOf(o).find((x) => x.value === selected?.[o.key]);
+    if (v && num(v.price) !== null) {
+      price = v.price;
+      compareAt = v.compareAt;
+    }
+  }
+  return { price, compareAt };
+}
+
+/**
+ * The cart line for a product with these choices — the shape `cart`
+ * takes as an item:
+ *   { id, key, name, price, compareAt?, currency, image, href?, quantity,
+ *     selected: { size: "m" }, variant: "M · Sand" }
+ * `key` is the product id plus its choices, so the same shirt in two
+ * sizes is two lines and the same one added twice is one.
+ */
+export function cartLine(product, selected = {}, quantity = 1, currency = "USD") {
+  const { price, compareAt } = priceFor(product, selected);
+  const chosen = (product?.options ?? [])
+    .map((o) => ({ o, v: valuesOf(o).find((x) => x.value === selected[o.key]) }))
+    .filter((c) => c.v);
+  const first = product?.images?.[0];
+  return {
+    id: product?.id,
+    key: [product?.id, ...chosen.map((c) => `${c.o.key}=${c.v.value}`)].join(":"),
+    name: product?.name,
+    price,
+    ...(num(compareAt) !== null ? { compareAt } : {}),
+    currency: product?.currency ?? currency,
+    image: product?.image ?? (typeof first === "object" ? first?.src : first) ?? null,
+    ...(product?.href ? { href: product.href } : {}),
+    quantity,
+    selected: Object.fromEntries(chosen.map((c) => [c.o.key, c.v.value])),
+    variant: chosen.map((c) => labelOf(c.v)).join(" · "),
+  };
+}

package/registry/blocks/product-detail/product-detail.jsx

@@ -0,0 +1,348 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import {
+  Accordion,
+  Badge,
+  Breadcrumb,
+  Button,
+  Empty,
+  Icon,
+  Image,
+  Kicker,
+  Notice,
+  Rating,
+  Skeleton,
+  TabPanel,
+  Tabs,
+  Toggle,
+  cx,
+} from "../../ui";
+import { Price, cartLine, defaultSelection, priceFor } from "./price";
+import { OptionPicker, QuantityControl } from "./product-options";
+import { ProductMedia, picturesOf } from "./product-media";
+
+// One product: its pictures, name, price, rating, options, quantity, add
+// to cart and save, and the details under them. The add goes out through
+// `onAddToCart(line)`, which may fail; the block shows why.
+
+async function attempt(fn, ...args) {
+  try {
+    const r = await fn(...args);
+    return r && typeof r === "object" ? r : { ok: Boolean(r) };
+  } catch (e) {
+    return { ok: false, error: e?.message };
+  }
+}
+
+function Details({ sections, as }) {
+  const id = useId();
+  const list = (sections ?? []).filter(Boolean).map((s, i) => ({ key: s.key ?? `s${i}`, ...s }));
+  const [tab, setTab] = useState(list[0]?.key);
+  if (list.length === 0) return null;
+  const body = (s) => (typeof s.content === "string" ? <p className="leading-relaxed text-muted-foreground">{s.content}</p> : s.content);
+  if (as === "tabs") {
+    const current = list.some((s) => s.key === tab) ? tab : list[0].key;
+    return (
+      <div className="min-w-0">
+        <Tabs id={id} aria-label="Product details" tabs={list.map((s) => ({ key: s.key, label: s.title }))} value={current} onChange={setTab} />
+        {list.map((s) => (
+          <TabPanel key={s.key} id={id} tab={s.key} value={current} className="text-sm">
+            {body(s)}
+          </TabPanel>
+        ))}
+      </div>
+    );
+  }
+  return (
+    <Accordion
+      aria-label="Product details"
+      defaultValue={list[0].key}
+      items={list.map((s) => ({ key: s.key, title: s.title, content: body(s) }))}
+    />
+  );
+}
+
+function Perks({ perks }) {
+  const list = (perks ?? []).filter(Boolean);
+  if (list.length === 0) return null;
+  return (
+    <ul className="grid gap-2 sm:grid-cols-2">
+      {list.map((p, i) => (
+        <li key={p.label ?? i} className="flex items-center gap-2 rounded-md bg-muted px-3 py-2.5 text-sm text-foreground">
+          {p.icon ? <Icon name={p.icon} size={16} className="shrink-0 text-muted-foreground" /> : null}
+          <span className="min-w-0">{p.label}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Loading({ gallery }) {
+  return (
+    <div aria-busy="true" aria-label="Loading the product" className={cx("grid gap-8", gallery !== "overlay" && "md:grid-cols-2")}>
+      <Skeleton shape="rect" className="aspect-square w-full" />
+      <div className="grid content-start gap-4">
+        <Skeleton className="w-1/4" />
+        <Skeleton className="h-8 w-3/4" />
+        <Skeleton className="h-7 w-1/3" />
+        <Skeleton className="w-full" />
+        <Skeleton className="w-5/6" />
+        <Skeleton shape="rect" className="h-11 w-full" />
+        <Skeleton shape="rect" className="h-11 w-full" />
+      </div>
+    </div>
+  );
+}
+
+export function ProductDetail({
+  product,
+  gallery = "thumbs",
+  details = "accordion",
+  onAddToCart,
+  onBuyNow,
+  onFavorite,
+  favorite = false,
+  onViewCart,
+  breadcrumb,
+  perks,
+  currency = "USD",
+  locale,
+  quantity: showQuantity = true,
+  maxQuantity = 10,
+  imageFit = "cover",
+  loading = false,
+  error,
+  onRetry,
+  addLabel = "Add to cart",
+  buyLabel = "Buy now",
+  headingLevel = 2,
+  className,
+}) {
+  const [selected, setSelected] = useState(() => defaultSelection(product));
+  const [qty, setQty] = useState(1);
+  const [status, setStatus] = useState({ state: "idle" }); // idle · busy · added · failed
+  const [fav, setFav] = useState(favorite);
+  const [favError, setFavError] = useState(null);
+  const shown = useRef(product?.id);
+
+  // A different product: its own first choices, one of it, no old message.
+  useEffect(() => {
+    if (shown.current === product?.id) return;
+    shown.current = product?.id;
+    setSelected(defaultSelection(product));
+    setQty(1);
+    setStatus({ state: "idle" });
+  }, [product]);
+  useEffect(() => setFav(favorite), [favorite]);
+
+  if (loading) return <Loading gallery={gallery} />;
+  if (error) {
+    return (
+      <Notice
+        tone="danger"
+        title="The product did not load"
+        action={onRetry ? <Button size="sm" onClick={onRetry}>Try again</Button> : null}
+        className={className}
+      >
+        {typeof error === "string" ? error : null}
+      </Notice>
+    );
+  }
+  if (!product) {
+    return <Empty icon="package" title="No product here" body="It may have been removed, or the link is out of date." className={className} />;
+  }
+
+  const cur = product.currency ?? currency;
+  const { price, compareAt } = priceFor(product, selected);
+  const soldOut = product.available === false;
+  const max = Math.max(1, Math.min(maxQuantity, typeof product.stock === "number" ? product.stock : maxQuantity));
+  const busy = status.state === "busy";
+  const H = `h${Math.min(6, Math.max(1, headingLevel))}`;
+  const perkList = perks ?? product.perks;
+
+  function choose(key, value) {
+    setSelected((s) => ({ ...s, [key]: value }));
+    if (status.state !== "busy") setStatus({ state: "idle" });
+  }
+
+  async function run(which, fn) {
+    const line = cartLine(product, selected, showQuantity ? qty : 1, cur);
+    setStatus({ state: "busy", which });
+    const r = await attempt(fn, line);
+    if (r.ok) setStatus({ state: which === "cart" ? "added" : "idle", line });
+    else setStatus({ state: "failed", which, error: r.error || (which === "cart" ? "It was not added to your cart." : "The checkout did not open.") });
+  }
+
+  async function toggleFavorite(next) {
+    setFav(next);
+    setFavError(null);
+    if (!onFavorite) return;
+    const r = await attempt(onFavorite, product, next);
+    if (!r.ok) {
+      setFav(!next);
+      setFavError(r.error || (next ? "It was not saved." : "It was not removed."));
+    }
+  }
+
+  const buyBox = (
+    <div className="grid min-w-0 content-start gap-5">
+      <div className="grid gap-2">
+        {product.badge || product.brand ? (
+          <div className="flex flex-wrap items-center gap-2">
+            {product.brand ? <Kicker>{product.brand}</Kicker> : null}
+            {product.badge ? <Badge variant="outline">{product.badge}</Badge> : null}
+          </div>
+        ) : null}
+        <H className="text-2xl font-semibold leading-tight tracking-tight text-foreground sm:text-3xl">{product.name}</H>
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+          <Price price={price} compareAt={compareAt} currency={cur} locale={locale} />
+          {typeof product.rating === "number" ? (
+            <span className="inline-flex items-center gap-2 text-sm text-muted-foreground">
+              <Rating value={product.rating} size="sm" label="Rated" />
+              <span data-nums>
+                {product.rating.toFixed(1)}
+                {typeof product.reviews === "number" ? ` (${product.reviews.toLocaleString(locale)} reviews)` : ""}
+              </span>
+            </span>
+          ) : null}
+        </div>
+        {product.description ? <p className="max-w-prose text-sm leading-relaxed text-muted-foreground">{product.description}</p> : null}
+      </div>
+
+      {product.stats?.length ? (
+        <dl className="flex flex-wrap gap-x-6 gap-y-2 rounded-md bg-muted px-4 py-3 text-sm">
+          {product.stats.map((s) => (
+            <div key={s.label} className="flex flex-row-reverse items-baseline justify-end gap-1.5">
+              <dt className="text-muted-foreground">{s.label}</dt>
+              <dd data-nums className="font-semibold text-foreground">
+                {s.value}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      ) : null}
+
+      {(product.options ?? []).length ? (
+        <div className="grid gap-5">
+          {product.options.map((o) => (
+            <OptionPicker
+              key={o.key}
+              option={o}
+              value={selected[o.key]}
+              onChange={(v) => choose(o.key, v)}
+              currency={cur}
+              locale={locale}
+            />
+          ))}
+        </div>
+      ) : null}
+
+      {showQuantity && !soldOut ? <QuantityControl value={qty} onChange={setQty} max={max} disabled={busy} /> : null}
+
+      <div className="grid gap-2">
+        <div className="flex gap-2">
+          <Button
+            variant="primary"
+            icon={soldOut ? undefined : "shopping-cart"}
+            className="min-w-0 flex-1"
+            disabled={soldOut || !onAddToCart || (busy && status.which !== "cart")}
+            loading={busy && status.which === "cart"}
+            onClick={() => run("cart", onAddToCart)}
+          >
+            {soldOut ? "Sold out" : addLabel}
+          </Button>
+          {onFavorite ? (
+            <Toggle
+              icon="heart"
+              label={fav ? "Saved — remove from favourites" : "Save to favourites"}
+              pressed={fav}
+              onPressedChange={toggleFavorite}
+            />
+          ) : null}
+        </div>
+        {onBuyNow && !soldOut ? (
+          <Button
+            variant="secondary"
+            className="w-full"
+            disabled={busy && status.which !== "buy"}
+            loading={busy && status.which === "buy"}
+            onClick={() => run("buy", onBuyNow)}
+          >
+            {buyLabel}
+          </Button>
+        ) : null}
+        <div aria-live="polite" className="empty:hidden">
+          {status.state === "added" ? (
+            <Notice
+              tone="success"
+              action={onViewCart ? <Button size="sm" onClick={onViewCart}>View cart</Button> : null}
+              onDismiss={() => setStatus({ state: "idle" })}
+            >
+              {status.line.quantity} × {status.line.name}
+              {status.line.variant ? ` (${status.line.variant})` : ""} added to your cart.
+            </Notice>
+          ) : null}
+        </div>
+        {status.state === "failed" ? (
+          <Notice tone="danger" onDismiss={() => setStatus({ state: "idle" })}>
+            {status.error}
+          </Notice>
+        ) : null}
+        {favError ? (
+          <Notice tone="danger" onDismiss={() => setFavError(null)}>
+            {favError}
+          </Notice>
+        ) : null}
+      </div>
+
+      <Perks perks={perkList} />
+      {gallery !== "overlay" ? <Details sections={product.details} as={details} /> : null}
+    </div>
+  );
+
+  const crumbs = breadcrumb?.length ? <Breadcrumb items={breadcrumb} className="mb-6" /> : null;
+
+  if (gallery === "overlay") {
+    const scene = product.scene ?? picturesOf(product)[0];
+    const src = typeof scene === "object" ? scene?.src : scene;
+    return (
+      <section aria-label={product.name} className={cx("min-w-0", className)}>
+        {crumbs}
+        <div className="grid gap-4 lg:relative lg:block">
+          <Image
+            src={src}
+            alt={typeof scene === "object" && scene?.alt ? scene.alt : `${product.name} in a room`}
+            ratio="photo"
+            rounded="lg"
+            loading="eager"
+            className="w-full lg:aspect-auto lg:h-[40rem]"
+          />
+          <div className="rounded-lg border border-border bg-card p-5 text-card-foreground shadow-lg lg:absolute lg:inset-y-6 lg:end-6 lg:w-[26rem] lg:overflow-y-auto">
+            {buyBox}
+          </div>
+        </div>
+        {product.details?.length ? (
+          <div className="mt-8 max-w-3xl">
+            <Details sections={product.details} as={details} />
+          </div>
+        ) : null}
+      </section>
+    );
+  }
+
+  return (
+    <section aria-label={product.name} className={cx("min-w-0", className)}>
+      {crumbs}
+      <div
+        className={cx(
+          "grid items-start gap-8",
+          gallery === "stack" ? "md:grid-cols-[3fr_2fr] lg:gap-12" : "md:grid-cols-2 lg:gap-12",
+        )}
+      >
+        <ProductMedia product={product} layout={gallery} fit={imageFit} />
+        <div className={cx("min-w-0", gallery === "stack" && "md:sticky md:top-6")}>{buyBox}</div>
+      </div>
+    </section>
+  );
+}

package/registry/blocks/product-detail/product-media.jsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { Carousel, Image, cx } from "../../ui";
+
+// The product's pictures, four ways:
+//   thumbs    one large picture, a row of thumbnails under it
+//   rail      the same, the thumbnails in a column beside it from lg up
+//   carousel  one at a time, swipe or arrows, dots under it
+//   stack     every picture shown: the first full width, the rest in pairs
+
+/** product.images (strings or { src, alt }) or product.image → [{ src, alt }]. */
+export function picturesOf(product) {
+  const list = product?.images?.length ? product.images : product?.image ? [product.image] : [];
+  return list
+    .filter(Boolean)
+    .map((p, i) =>
+      typeof p === "object"
+        ? { src: p.src, alt: p.alt ?? `${product?.name ?? "Product"}, picture ${i + 1}` }
+        : { src: p, alt: `${product?.name ?? "Product"}, picture ${i + 1}` },
+    );
+}
+
+function Thumbs({ pictures, index, onPick, vertical }) {
+  if (pictures.length < 2) return null;
+  return (
+    <div
+      role="group"
+      aria-label="Pictures"
+      className={cx(
+        "flex gap-2",
+        vertical ? "flex-wrap lg:max-h-[32rem] lg:flex-col lg:flex-nowrap lg:overflow-y-auto lg:p-0.5" : "flex-wrap",
+      )}
+    >
+      {pictures.map((p, i) => (
+        // raw: a thumbnail picker — the kit's ToggleGroup is a text track
+        // that neither wraps nor scrolls a row of pictures.
+        <button
+          key={`${p.src}-${i}`}
+          type="button"
+          aria-pressed={i === index}
+          aria-label={`Show picture ${i + 1} of ${pictures.length}`}
+          onClick={() => onPick(i)}
+          className={cx(
+            "shrink-0 overflow-hidden rounded-md border-2 outline-none transition-colors",
+            "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            i === index ? "border-foreground" : "border-border hover:border-muted-foreground",
+          )}
+        >
+          <Image src={p.src} alt="" ratio="square" rounded="none" className="size-14 sm:size-16" />
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function ProductMedia({ product, layout = "thumbs", fit = "cover", className }) {
+  const pictures = picturesOf(product);
+  const [index, setIndex] = useState(0);
+  const at = Math.min(index, Math.max(0, pictures.length - 1));
+
+  if (pictures.length === 0) {
+    return <Image src={null} alt={product?.name ?? "No picture"} ratio="square" rounded="lg" className={cx("w-full", className)} />;
+  }
+
+  if (layout === "carousel" && pictures.length > 1) {
+    return (
+      <Carousel label={`${product?.name ?? "Product"} pictures`} className={className}>
+        {pictures.map((p, i) => (
+          <Image key={`${p.src}-${i}`} src={p.src} alt={p.alt} ratio="square" fit={fit} rounded="lg" loading={i === 0 ? "eager" : "lazy"} />
+        ))}
+      </Carousel>
+    );
+  }
+
+  if (layout === "stack") {
+    const [first, ...rest] = pictures;
+    return (
+      <div className={cx("grid gap-3", className)}>
+        <Image src={first.src} alt={first.alt} ratio="square" fit={fit} rounded="lg" loading="eager" />
+        {rest.length ? (
+          <div className="grid grid-cols-2 gap-3">
+            {rest.map((p, i) => (
+              <Image key={`${p.src}-${i}`} src={p.src} alt={p.alt} ratio="portrait" fit={fit} rounded="lg" />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  const rail = layout === "rail";
+  const main = pictures[at];
+  return (
+    <div className={cx("flex min-w-0 flex-col gap-3", rail && "lg:flex-row-reverse", className)}>
+      <div className="min-w-0 flex-1">
+        <Image src={main.src} alt={main.alt} ratio="square" fit={fit} rounded="lg" loading="eager" />
+      </div>
+      <Thumbs pictures={pictures} index={at} onPick={setIndex} vertical={rail} />
+    </div>
+  );
+}