@cartbase/storefront 0.20.0 → 0.21.0

package/src/products/product-promises.tsx

@@ -1,61 +1,61 @@
-"use client"
-
-import { RefreshCw, Truck, Undo2 } from "lucide-react"
-
-/**
- * ONE PROMISE THE STORE MAKES: a delivery time, an exchange, a return.
- *
- * A PROMISE IS NOT A LABEL. A label names a piece of the interface, so the
- * library owns it and translates it. A promise states a fact about the
- * merchant's business, which the library cannot know and must never assert
- * for them. Until 2026-09-13 it did: this section shipped "Your package
- * will arrive in 3-5 business days" and "we'll refund your money" as label
- * DEFAULTS, translated into three languages, on behalf of every merchant on
- * earth. Alexander found it on evoo's product page.
- *
- * So there is no default here and none is not an error: a store that says
- * nothing shows nothing.
- */
-export type ProductPromise = {
-  /** A built-in mark, or none. */
-  icon?: "delivery" | "exchange" | "return"
-  title: string
-  body?: string
-}
-
-const ICONS = {
-  delivery: Truck,
-  exchange: RefreshCw,
-  return: Undo2,
-} as const
-
-/**
- * The store's promises, in the order the store gave them. Any number: three
- * is a convention, not a shape. Returns nothing for an empty list.
- */
-export function ProductPromises({ promises }: { promises: ProductPromise[] }) {
-  if (!promises.length) return null
-
-  return (
-    <div className="text-sm py-8">
-      <div className="grid grid-cols-1 gap-y-8">
-        {promises.map((promise, i) => {
-          const Icon = promise.icon ? ICONS[promise.icon] : null
-          return (
-            <div key={`${promise.title}-${i}`} className="flex items-start gap-x-2">
-              {Icon && (
-                <Icon className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
-              )}
-              <div>
-                <span className="font-semibold text-foreground">{promise.title}</span>
-                {promise.body && (
-                  <p className="max-w-sm text-muted-foreground">{promise.body}</p>
-                )}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
+"use client"
+
+import { RefreshCw, Truck, Undo2 } from "lucide-react"
+
+/**
+ * ONE PROMISE THE STORE MAKES: a delivery time, an exchange, a return.
+ *
+ * A PROMISE IS NOT A LABEL. A label names a piece of the interface, so the
+ * library owns it and translates it. A promise states a fact about the
+ * merchant's business, which the library cannot know and must never assert
+ * for them. Until 2026-09-13 it did: this section shipped "Your package
+ * will arrive in 3-5 business days" and "we'll refund your money" as label
+ * DEFAULTS, translated into three languages, on behalf of every merchant on
+ * earth. Alexander found it on evoo's product page.
+ *
+ * So there is no default here and none is not an error: a store that says
+ * nothing shows nothing.
+ */
+export type ProductPromise = {
+  /** A built-in mark, or none. */
+  icon?: "delivery" | "exchange" | "return"
+  title: string
+  body?: string
+}
+
+const ICONS = {
+  delivery: Truck,
+  exchange: RefreshCw,
+  return: Undo2,
+} as const
+
+/**
+ * The store's promises, in the order the store gave them. Any number: three
+ * is a convention, not a shape. Returns nothing for an empty list.
+ */
+export function ProductPromises({ promises }: { promises: ProductPromise[] }) {
+  if (!promises.length) return null
+
+  return (
+    <div className="text-sm py-8">
+      <div className="grid grid-cols-1 gap-y-8">
+        {promises.map((promise, i) => {
+          const Icon = promise.icon ? ICONS[promise.icon] : null
+          return (
+            <div key={`${promise.title}-${i}`} className="flex items-start gap-x-2">
+              {Icon && (
+                <Icon className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
+              )}
+              <div>
+                <span className="font-semibold text-foreground">{promise.title}</span>
+                {promise.body && (
+                  <p className="max-w-sm text-muted-foreground">{promise.body}</p>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/products/product-specs.tsx

@@ -1,65 +1,65 @@
-"use client"
-
-import type { StoreProduct } from "../api/products"
-import { useProductLabels } from "./context"
-
-/**
- * The product's physical facts: material, origin, type, weight, dimensions.
- *
- * IT RENDERS ONLY WHAT THE PRODUCT HAS, and nothing at all when it has
- * none. That is the whole point of this file (2026-09-13). It used to be a
- * fixed two-column grid of all five fields with "-" in every empty one, so
- * a store selling food showed a table reading Material "-", Origin "-",
- * Weight "-", Dimensions "-". Alexander found it on evoo. The admin has had
- * an empty-cell law since 2026-08 for exactly this reason: a fact the
- * merchant never entered is not a fact worth a row.
- *
- * A store mounts it if it wants it. `ProductTabs` offers it as a section
- * and skips the section when this returns nothing.
- */
-export function ProductSpecs({ product }: { product: StoreProduct }) {
-  const labels = useProductLabels()
-
-  const rows: Array<{ label: string; value: string }> = []
-  const add = (label: string, value: string | null | undefined) => {
-    const v = typeof value === "string" ? value.trim() : value
-    if (v) rows.push({ label, value: String(v) })
-  }
-
-  add(labels.material, product.material)
-  add(labels.countryOfOrigin, product.origin_country)
-  add(labels.type, product.type?.value)
-  add(labels.weight, product.weight ? `${product.weight} ${labels.weightUnit}` : null)
-  add(
-    labels.dimensions,
-    product.length && product.width && product.height
-      ? `${product.length}L x ${product.width}W x ${product.height}H`
-      : null
-  )
-
-  if (rows.length === 0) return null
-
-  return (
-    <div className="text-sm py-8">
-      <div className="grid grid-cols-2 gap-x-8 gap-y-4">
-        {rows.map((row) => (
-          <div key={row.label}>
-            <span className="font-semibold text-foreground">{row.label}</span>
-            <p className="text-muted-foreground">{row.value}</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-/** True when this product has at least one physical fact to show. */
-export function hasProductSpecs(product: StoreProduct): boolean {
-  return !!(
-    product.material?.trim() ||
-    product.origin_country?.trim() ||
-    product.type?.value?.trim() ||
-    product.weight ||
-    (product.length && product.width && product.height)
-  )
-}
+"use client"
+
+import type { StoreProduct } from "../api/products"
+import { useProductLabels } from "./context"
+
+/**
+ * The product's physical facts: material, origin, type, weight, dimensions.
+ *
+ * IT RENDERS ONLY WHAT THE PRODUCT HAS, and nothing at all when it has
+ * none. That is the whole point of this file (2026-09-13). It used to be a
+ * fixed two-column grid of all five fields with "-" in every empty one, so
+ * a store selling food showed a table reading Material "-", Origin "-",
+ * Weight "-", Dimensions "-". Alexander found it on evoo. The admin has had
+ * an empty-cell law since 2026-08 for exactly this reason: a fact the
+ * merchant never entered is not a fact worth a row.
+ *
+ * A store mounts it if it wants it. `ProductTabs` offers it as a section
+ * and skips the section when this returns nothing.
+ */
+export function ProductSpecs({ product }: { product: StoreProduct }) {
+  const labels = useProductLabels()
+
+  const rows: Array<{ label: string; value: string }> = []
+  const add = (label: string, value: string | null | undefined) => {
+    const v = typeof value === "string" ? value.trim() : value
+    if (v) rows.push({ label, value: String(v) })
+  }
+
+  add(labels.material, product.material)
+  add(labels.countryOfOrigin, product.origin_country)
+  add(labels.type, product.type?.value)
+  add(labels.weight, product.weight ? `${product.weight} ${labels.weightUnit}` : null)
+  add(
+    labels.dimensions,
+    product.length && product.width && product.height
+      ? `${product.length}L x ${product.width}W x ${product.height}H`
+      : null
+  )
+
+  if (rows.length === 0) return null
+
+  return (
+    <div className="text-sm py-8">
+      <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+        {rows.map((row) => (
+          <div key={row.label}>
+            <span className="font-semibold text-foreground">{row.label}</span>
+            <p className="text-muted-foreground">{row.value}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/** True when this product has at least one physical fact to show. */
+export function hasProductSpecs(product: StoreProduct): boolean {
+  return !!(
+    product.material?.trim() ||
+    product.origin_country?.trim() ||
+    product.type?.value?.trim() ||
+    product.weight ||
+    (product.length && product.width && product.height)
+  )
+}

package/src/products/product-tabs.tsx

@@ -1,123 +1,123 @@
-"use client"
-
-/**
- * The PDP accordion: ONE structure, and the sections are the store's.
- *
- * Rewritten 2026-09-13, on Alexander's reading of it: *"Why do we have the
- * same component twice, one for product information and one for shipping
- * and delivery? This is useless and redundant for a package that is for
- * global use."* He is right, twice over.
- *
- * What was here: two bespoke tabs, always both, for one visual pattern. The
- * first was a fixed grid of five physical fields with "-" in every empty
- * one, so a store selling food rendered a table of dashes. The second
- * asserted delivery, exchange and refund PROMISES out of label defaults,
- * which the library cannot know for any merchant.
- *
- * What is here now: an accordion that renders the sections it is given, and
- * NOTHING when it has none. The package still ships the two pieces stores
- * usually want, `ProductSpecs` (only the facts the product has) and
- * `ProductPromises` (only what the store says), both importable on their
- * own, both skipped when they would be empty. Structure is ours; what a
- * page says is the store's.
- *
- * Ported from `@1click/ui/src/products/product-tabs.tsx` (v2.3.1); the
- * morphing +/− trigger is unchanged.
- */
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import type { ReactNode } from "react"
-
-import type { StoreProduct } from "../api/products"
-import { useProductLabels } from "./context"
-import { ProductPromises, type ProductPromise } from "./product-promises"
-import { ProductSpecs, hasProductSpecs } from "./product-specs"
-
-export type ProductSection = {
-  title: string
-  content: ReactNode
-}
-
-type ProductTabsProps = {
-  product: StoreProduct
-  /**
-   * The store's delivery, exchange and return promises. No default: with
-   * none, the section does not exist, because an absent section is better
-   * than a promise the store never made.
-   */
-  promises?: ProductPromise[]
-  /**
-   * Drop the physical-facts section even when the product has facts. It is
-   * offered by default because most catalogues want it; it is already
-   * skipped when the product has nothing to put in it.
-   */
-  hideSpecs?: boolean
-  /** Anything else the store wants in the accordion, appended in order. */
-  sections?: ProductSection[]
-}
-
-export function ProductTabs({
-  product,
-  promises,
-  hideSpecs,
-  sections,
-}: ProductTabsProps) {
-  const labels = useProductLabels()
-
-  const items: ProductSection[] = []
-
-  if (!hideSpecs && hasProductSpecs(product)) {
-    items.push({
-      title: labels.productInformation,
-      content: <ProductSpecs product={product} />,
-    })
-  }
-  if (promises?.length) {
-    items.push({
-      title: labels.shippingAndReturns,
-      content: <ProductPromises promises={promises} />,
-    })
-  }
-  if (sections?.length) items.push(...sections)
-
-  // Nothing to say, nothing drawn: no stray borders, no empty accordion.
-  if (items.length === 0) return null
-
-  return (
-    <div className="w-full">
-      <AccordionPrimitive.Root type="multiple">
-        {items.map((item, i) => (
-          <AccordionPrimitive.Item
-            key={`${item.title}-${i}`}
-            value={`${item.title}-${i}`}
-            className="border-t border-border py-3 last:border-b"
-          >
-            <AccordionPrimitive.Header className="px-1">
-              <div className="flex w-full items-center justify-between">
-                <span className="text-muted-foreground text-sm">{item.title}</span>
-                <AccordionPrimitive.Trigger>
-                  <MorphingTrigger />
-                </AccordionPrimitive.Trigger>
-              </div>
-            </AccordionPrimitive.Header>
-            <AccordionPrimitive.Content className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down px-1">
-              <div className="w-full">{item.content}</div>
-            </AccordionPrimitive.Content>
-          </AccordionPrimitive.Item>
-        ))}
-      </AccordionPrimitive.Root>
-    </div>
-  )
-}
-
-function MorphingTrigger() {
-  return (
-    <div className="text-muted-foreground hover:bg-muted rounded-lg relative p-1.5">
-      <div className="h-5 w-5">
-        <span className="bg-muted-foreground rounded-full absolute inset-y-[31.75%] left-[48%] right-1/2 w-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90" />
-        <span className="bg-muted-foreground rounded-full absolute inset-x-[31.75%] top-[48%] bottom-1/2 h-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90 group-data-[state=open]:left-1/2 group-data-[state=open]:right-1/2" />
-      </div>
-    </div>
-  )
-}
-
-export { type ProductTabsProps, type ProductPromise }
+"use client"
+
+/**
+ * The PDP accordion: ONE structure, and the sections are the store's.
+ *
+ * Rewritten 2026-09-13, on Alexander's reading of it: *"Why do we have the
+ * same component twice, one for product information and one for shipping
+ * and delivery? This is useless and redundant for a package that is for
+ * global use."* He is right, twice over.
+ *
+ * What was here: two bespoke tabs, always both, for one visual pattern. The
+ * first was a fixed grid of five physical fields with "-" in every empty
+ * one, so a store selling food rendered a table of dashes. The second
+ * asserted delivery, exchange and refund PROMISES out of label defaults,
+ * which the library cannot know for any merchant.
+ *
+ * What is here now: an accordion that renders the sections it is given, and
+ * NOTHING when it has none. The package still ships the two pieces stores
+ * usually want, `ProductSpecs` (only the facts the product has) and
+ * `ProductPromises` (only what the store says), both importable on their
+ * own, both skipped when they would be empty. Structure is ours; what a
+ * page says is the store's.
+ *
+ * Ported from `@1click/ui/src/products/product-tabs.tsx` (v2.3.1); the
+ * morphing +/− trigger is unchanged.
+ */
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import type { ReactNode } from "react"
+
+import type { StoreProduct } from "../api/products"
+import { useProductLabels } from "./context"
+import { ProductPromises, type ProductPromise } from "./product-promises"
+import { ProductSpecs, hasProductSpecs } from "./product-specs"
+
+export type ProductSection = {
+  title: string
+  content: ReactNode
+}
+
+type ProductTabsProps = {
+  product: StoreProduct
+  /**
+   * The store's delivery, exchange and return promises. No default: with
+   * none, the section does not exist, because an absent section is better
+   * than a promise the store never made.
+   */
+  promises?: ProductPromise[]
+  /**
+   * Drop the physical-facts section even when the product has facts. It is
+   * offered by default because most catalogues want it; it is already
+   * skipped when the product has nothing to put in it.
+   */
+  hideSpecs?: boolean
+  /** Anything else the store wants in the accordion, appended in order. */
+  sections?: ProductSection[]
+}
+
+export function ProductTabs({
+  product,
+  promises,
+  hideSpecs,
+  sections,
+}: ProductTabsProps) {
+  const labels = useProductLabels()
+
+  const items: ProductSection[] = []
+
+  if (!hideSpecs && hasProductSpecs(product)) {
+    items.push({
+      title: labels.productInformation,
+      content: <ProductSpecs product={product} />,
+    })
+  }
+  if (promises?.length) {
+    items.push({
+      title: labels.shippingAndReturns,
+      content: <ProductPromises promises={promises} />,
+    })
+  }
+  if (sections?.length) items.push(...sections)
+
+  // Nothing to say, nothing drawn: no stray borders, no empty accordion.
+  if (items.length === 0) return null
+
+  return (
+    <div className="w-full">
+      <AccordionPrimitive.Root type="multiple">
+        {items.map((item, i) => (
+          <AccordionPrimitive.Item
+            key={`${item.title}-${i}`}
+            value={`${item.title}-${i}`}
+            className="border-t border-border py-3 last:border-b"
+          >
+            <AccordionPrimitive.Header className="px-1">
+              <div className="flex w-full items-center justify-between">
+                <span className="text-muted-foreground text-sm">{item.title}</span>
+                <AccordionPrimitive.Trigger>
+                  <MorphingTrigger />
+                </AccordionPrimitive.Trigger>
+              </div>
+            </AccordionPrimitive.Header>
+            <AccordionPrimitive.Content className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down px-1">
+              <div className="w-full">{item.content}</div>
+            </AccordionPrimitive.Content>
+          </AccordionPrimitive.Item>
+        ))}
+      </AccordionPrimitive.Root>
+    </div>
+  )
+}
+
+function MorphingTrigger() {
+  return (
+    <div className="text-muted-foreground hover:bg-muted rounded-lg relative p-1.5">
+      <div className="h-5 w-5">
+        <span className="bg-muted-foreground rounded-full absolute inset-y-[31.75%] left-[48%] right-1/2 w-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90" />
+        <span className="bg-muted-foreground rounded-full absolute inset-x-[31.75%] top-[48%] bottom-1/2 h-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90 group-data-[state=open]:left-1/2 group-data-[state=open]:right-1/2" />
+      </div>
+    </div>
+  )
+}
+
+export { type ProductTabsProps, type ProductPromise }