@cartbase/storefront 0.20.0 → 0.21.0

package/src/primitives/select-field.tsx

@@ -1,93 +1,93 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "../lib/utils"
-
-/**
- * SelectField — floating-label native select primitive.
- *
- * Matches `Field`'s visual treatment — the label floats into the top-left
- * when a value is selected. Uses a plain native `<select>` for simplicity
- * and native mobile keyboard support. If a fancier dropdown is needed
- * (searchable, multi-select, rich options), use the shadcn `Select`
- * primitives directly from `@cartbase/storefront/primitives/ui/select`.
- *
- * Extracted from mindpages-storefront
- * src/modules/checkout/templates/checkout-client/index.tsx lines 207-270.
- *
- * @example
- *   <SelectField label="Country" name="country" value={country} onChange={...}>
- *     <option value="bg">Bulgaria</option>
- *     <option value="de">Germany</option>
- *   </SelectField>
- */
-
-export type SelectFieldProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
-  label: string
-  children: React.ReactNode
-  className?: string
-  /**
-   * A mark shown inside the control, before the value: a flag, a currency
-   * symbol. Decorative and click-through, so the whole field still opens the
-   * select. The value and the floating label make room for it.
-   */
-  leading?: React.ReactNode
-}
-
-export const SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(
-  function SelectField(
-    { label, required, disabled, children, className, value, leading, ...props },
-    ref
-  ) {
-    const hasValue = value !== undefined && value !== null && value !== ""
-
-    return (
-      <div className={cn("relative", className)}>
-        <select
-          ref={ref}
-          required={required}
-          disabled={disabled}
-          value={value}
-          className={cn(
-            "w-full h-[44px] pt-[14px] pb-[2px] pr-9 text-sm rounded-lg border transition-colors duration-150 appearance-none outline-none",
-            leading ? "pl-10" : "px-3",
-            "focus:border-primary focus:bg-primary/5",
-            disabled
-              ? "bg-muted border-border text-muted-foreground cursor-not-allowed"
-              : "bg-card border-border text-foreground hover:border-muted-foreground"
-          )}
-          {...props}
-        >
-          {children}
-        </select>
-        {leading && (
-          <span className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none flex items-center">
-            {leading}
-          </span>
-        )}
-        <span
-          className={cn(
-            "absolute pointer-events-none top-[14px] text-sm leading-4 origin-top-left",
-            leading ? "left-10" : "left-3",
-            "transition-transform transition-colors duration-150 ease-out",
-            hasValue ? "text-muted-foreground" : "text-muted-foreground",
-            hasValue ? "-translate-y-2 scale-[0.77]" : "translate-y-0 scale-100"
-          )}
-        >
-          {label}
-        </span>
-        <svg
-          className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={1.5}
-          aria-hidden="true"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-        </svg>
-      </div>
-    )
-  }
-)
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+/**
+ * SelectField — floating-label native select primitive.
+ *
+ * Matches `Field`'s visual treatment — the label floats into the top-left
+ * when a value is selected. Uses a plain native `<select>` for simplicity
+ * and native mobile keyboard support. If a fancier dropdown is needed
+ * (searchable, multi-select, rich options), use the shadcn `Select`
+ * primitives directly from `@cartbase/storefront/primitives/ui/select`.
+ *
+ * Extracted from mindpages-storefront
+ * src/modules/checkout/templates/checkout-client/index.tsx lines 207-270.
+ *
+ * @example
+ *   <SelectField label="Country" name="country" value={country} onChange={...}>
+ *     <option value="bg">Bulgaria</option>
+ *     <option value="de">Germany</option>
+ *   </SelectField>
+ */
+
+export type SelectFieldProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
+  label: string
+  children: React.ReactNode
+  className?: string
+  /**
+   * A mark shown inside the control, before the value: a flag, a currency
+   * symbol. Decorative and click-through, so the whole field still opens the
+   * select. The value and the floating label make room for it.
+   */
+  leading?: React.ReactNode
+}
+
+export const SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(
+  function SelectField(
+    { label, required, disabled, children, className, value, leading, ...props },
+    ref
+  ) {
+    const hasValue = value !== undefined && value !== null && value !== ""
+
+    return (
+      <div className={cn("relative", className)}>
+        <select
+          ref={ref}
+          required={required}
+          disabled={disabled}
+          value={value}
+          className={cn(
+            "w-full h-[44px] pt-[14px] pb-[2px] pr-9 text-sm rounded-lg border transition-colors duration-150 appearance-none outline-none",
+            leading ? "pl-10" : "px-3",
+            "focus:border-primary focus:bg-primary/5",
+            disabled
+              ? "bg-muted border-border text-muted-foreground cursor-not-allowed"
+              : "bg-card border-border text-foreground hover:border-muted-foreground"
+          )}
+          {...props}
+        >
+          {children}
+        </select>
+        {leading && (
+          <span className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none flex items-center">
+            {leading}
+          </span>
+        )}
+        <span
+          className={cn(
+            "absolute pointer-events-none top-[14px] text-sm leading-4 origin-top-left",
+            leading ? "left-10" : "left-3",
+            "transition-transform transition-colors duration-150 ease-out",
+            hasValue ? "text-muted-foreground" : "text-muted-foreground",
+            hasValue ? "-translate-y-2 scale-[0.77]" : "translate-y-0 scale-100"
+          )}
+        >
+          {label}
+        </span>
+        <svg
+          className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          aria-hidden="true"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+        </svg>
+      </div>
+    )
+  }
+)

package/src/products/image-gallery.tsx

@@ -1,43 +1,43 @@
-/**
- * PDP image gallery — ported from
- * `@1click/ui/src/products/image-gallery.tsx` (v2.3.1). Data seam:
- * `HttpTypes.StoreProductImage[]` → Cartbase `StoreProductImage[]`
- * (`@cartbase/storefront/api/products`; images arrive rank-ordered from the
- * API). Server-safe.
- */
-import { StoreImage as Image } from "../lib/media-image"
-import type { StoreProductImage } from "../api/products"
-
-type ImageGalleryProps = {
-  images: StoreProductImage[]
-}
-
-const ImageGallery = ({ images }: ImageGalleryProps) => {
-  return (
-    <div className="flex items-start relative">
-      <div className="flex flex-col flex-1 sm:mx-16 gap-y-4">
-        {images.map((image, index) => (
-          <div
-            key={image.id}
-            className="relative aspect-[29/34] w-full overflow-hidden bg-muted rounded-lg"
-            id={image.id}
-          >
-            {!!image.url && (
-              <Image
-                src={image.url}
-                priority={index <= 2}
-                className="absolute inset-0 rounded-lg"
-                alt={`Product image ${index + 1}`}
-                fill
-                sizes="(max-width: 576px) 280px, (max-width: 768px) 360px, (max-width: 992px) 480px, 800px"
-                style={{ objectFit: "cover" }}
-              />
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export { ImageGallery, type ImageGalleryProps }
+/**
+ * PDP image gallery — ported from
+ * `@1click/ui/src/products/image-gallery.tsx` (v2.3.1). Data seam:
+ * `HttpTypes.StoreProductImage[]` → Cartbase `StoreProductImage[]`
+ * (`@cartbase/storefront/api/products`; images arrive rank-ordered from the
+ * API). Server-safe.
+ */
+import { StoreImage as Image } from "../lib/media-image"
+import type { StoreProductImage } from "../api/products"
+
+type ImageGalleryProps = {
+  images: StoreProductImage[]
+}
+
+const ImageGallery = ({ images }: ImageGalleryProps) => {
+  return (
+    <div className="flex items-start relative">
+      <div className="flex flex-col flex-1 sm:mx-16 gap-y-4">
+        {images.map((image, index) => (
+          <div
+            key={image.id}
+            className="relative aspect-[29/34] w-full overflow-hidden bg-muted rounded-lg"
+            id={image.id}
+          >
+            {!!image.url && (
+              <Image
+                src={image.url}
+                priority={index <= 2}
+                className="absolute inset-0 rounded-lg"
+                alt={`Product image ${index + 1}`}
+                fill
+                sizes="(max-width: 576px) 280px, (max-width: 768px) 360px, (max-width: 992px) 480px, 800px"
+                style={{ objectFit: "cover" }}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export { ImageGallery, type ImageGalleryProps }

package/src/products/option-select.tsx

@@ -1,67 +1,67 @@
-"use client"
-
-/**
- * Option selector — ported from
- * `@1click/ui/src/products/option-select.tsx` (v2.3.1). Data seam:
- * `HttpTypes.StoreProductOption` → Cartbase `StoreProductOption`
- * (`@cartbase/storefront/api/products`; `values` is present on
- * `product.options[]`, which is what this component receives).
- */
-import React from "react"
-import type { StoreProductOption } from "../api/products"
-import { cn } from "../lib/utils"
-import { useProductLabels } from "./context"
-
-type OptionSelectProps = {
-  option: StoreProductOption
-  current: string | undefined
-  updateOption: (optionId: string, value: string) => void
-  title: string
-  disabled: boolean
-  "data-testid"?: string
-}
-
-const OptionSelect: React.FC<OptionSelectProps> = ({
-  option,
-  current,
-  updateOption,
-  title,
-  "data-testid": dataTestId,
-  disabled,
-}) => {
-  const labels = useProductLabels()
-  const filteredOptions = (option.values ?? []).map((v) => v.value)
-
-  return (
-    <div className="flex flex-col gap-y-3">
-      <span className="text-sm text-foreground">
-        {labels.selectOption} {title}
-      </span>
-      <div
-        className="flex flex-wrap justify-between gap-2"
-        data-testid={dataTestId}
-      >
-        {filteredOptions.map((v) => (
-          <button
-            onClick={() => updateOption(option.id, v!)}
-            key={v}
-            className={cn(
-              "border border-border bg-muted text-sm h-10 rounded-lg p-2 flex-1",
-              {
-                "border-primary": v === current,
-                "hover:shadow-sm transition-shadow ease-in-out duration-150":
-                  v !== current,
-              }
-            )}
-            disabled={disabled}
-            data-testid="option-button"
-          >
-            {v}
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export { OptionSelect, type OptionSelectProps }
+"use client"
+
+/**
+ * Option selector — ported from
+ * `@1click/ui/src/products/option-select.tsx` (v2.3.1). Data seam:
+ * `HttpTypes.StoreProductOption` → Cartbase `StoreProductOption`
+ * (`@cartbase/storefront/api/products`; `values` is present on
+ * `product.options[]`, which is what this component receives).
+ */
+import React from "react"
+import type { StoreProductOption } from "../api/products"
+import { cn } from "../lib/utils"
+import { useProductLabels } from "./context"
+
+type OptionSelectProps = {
+  option: StoreProductOption
+  current: string | undefined
+  updateOption: (optionId: string, value: string) => void
+  title: string
+  disabled: boolean
+  "data-testid"?: string
+}
+
+const OptionSelect: React.FC<OptionSelectProps> = ({
+  option,
+  current,
+  updateOption,
+  title,
+  "data-testid": dataTestId,
+  disabled,
+}) => {
+  const labels = useProductLabels()
+  const filteredOptions = (option.values ?? []).map((v) => v.value)
+
+  return (
+    <div className="flex flex-col gap-y-3">
+      <span className="text-sm text-foreground">
+        {labels.selectOption} {title}
+      </span>
+      <div
+        className="flex flex-wrap justify-between gap-2"
+        data-testid={dataTestId}
+      >
+        {filteredOptions.map((v) => (
+          <button
+            onClick={() => updateOption(option.id, v!)}
+            key={v}
+            className={cn(
+              "border border-border bg-muted text-sm h-10 rounded-lg p-2 flex-1",
+              {
+                "border-primary": v === current,
+                "hover:shadow-sm transition-shadow ease-in-out duration-150":
+                  v !== current,
+              }
+            )}
+            disabled={disabled}
+            data-testid="option-button"
+          >
+            {v}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export { OptionSelect, type OptionSelectProps }

package/src/products/product-info.tsx

@@ -1,10 +1,10 @@
 /**
  * PDP title/collection/description block — ported from
- * `@1click/ui/src/products/product-info.tsx` (v2.3.1). Data seam:
- * `HttpTypes.StoreProduct` → Cartbase `StoreProduct`. The product carries
- * EVERY collection it belongs to since 2026-09-15 (the membership join is
- * the one store); the line above the title names the first of them, which is
- * what the single `collection` object used to be. Server-safe.
+ * `@1click/ui/src/products/product-info.tsx` (v2.3.1). Data seam: Cartbase's
+ * own `StoreProduct` stands in for `HttpTypes.StoreProduct`. The product
+ * carries EVERY collection it belongs to since 2026-09-15 (the membership
+ * join is the one store); the line above the title names the first of them,
+ * which is what the single `collection` object used to be. Server-safe.
  */
 import Link from "next/link"
 import type { StoreProduct } from "../api/products"

package/src/products/product-price.tsx

@@ -1,69 +1,69 @@
-"use client"
-
-/**
- * PDP price display — ported from
- * `@1click/ui/src/products/product-price.tsx` (v2.3.1). Data seam:
- * `@medusajs/types` `HttpTypes.StoreProduct/StoreProductVariant` are
- * replaced by the Cartbase SDK DTOs (`@cartbase/storefront/api/products`).
- * Pricing stays SERVER truth — `lib/get-product-price` only selects and
- * formats `variant.calculated_price` (Cartbase's flat `price_list_type`).
- */
-import type { StoreProduct, StoreProductVariant } from "../api/products"
-import { cn } from "../lib/utils"
-import { getProductPrice } from "../lib/get-product-price"
-import { useProductLabels } from "./context"
-
-export function ProductPrice({
-  product,
-  variant,
-}: {
-  product: StoreProduct
-  variant?: StoreProductVariant
-}) {
-  const labels = useProductLabels()
-  const { cheapestPrice, variantPrice } = getProductPrice({
-    product,
-    variantId: variant?.id,
-  })
-
-  const selectedPrice = variant ? variantPrice : cheapestPrice
-
-  if (!selectedPrice) {
-    return <div className="block w-32 h-9 bg-muted animate-pulse rounded" />
-  }
-
-  return (
-    <div className="flex flex-col text-foreground">
-      <span
-        className={cn("text-xl font-semibold", {
-          "text-primary": selectedPrice.price_type === "sale",
-        })}
-      >
-        {!variant && `${labels.from} `}
-        <span
-          data-testid="product-price"
-          data-value={selectedPrice.calculated_price_number}
-        >
-          {selectedPrice.calculated_price}
-        </span>
-      </span>
-      {selectedPrice.price_type === "sale" && (
-        <>
-          <p>
-            <span className="text-muted-foreground">{labels.original} </span>
-            <span
-              className="line-through"
-              data-testid="original-product-price"
-              data-value={selectedPrice.original_price_number}
-            >
-              {selectedPrice.original_price}
-            </span>
-          </p>
-          <span className="text-primary">
-            -{selectedPrice.percentage_diff}%
-          </span>
-        </>
-      )}
-    </div>
-  )
-}
+"use client"
+
+/**
+ * PDP price display — ported from
+ * `@1click/ui/src/products/product-price.tsx` (v2.3.1). Data seam:
+ * `@medusajs/types` `HttpTypes.StoreProduct/StoreProductVariant` are
+ * replaced by the Cartbase SDK DTOs (`@cartbase/storefront/api/products`).
+ * Pricing stays SERVER truth — `lib/get-product-price` only selects and
+ * formats `variant.calculated_price` (Cartbase's flat `price_list_type`).
+ */
+import type { StoreProduct, StoreProductVariant } from "../api/products"
+import { cn } from "../lib/utils"
+import { getProductPrice } from "../lib/get-product-price"
+import { useProductLabels } from "./context"
+
+export function ProductPrice({
+  product,
+  variant,
+}: {
+  product: StoreProduct
+  variant?: StoreProductVariant
+}) {
+  const labels = useProductLabels()
+  const { cheapestPrice, variantPrice } = getProductPrice({
+    product,
+    variantId: variant?.id,
+  })
+
+  const selectedPrice = variant ? variantPrice : cheapestPrice
+
+  if (!selectedPrice) {
+    return <div className="block w-32 h-9 bg-muted animate-pulse rounded" />
+  }
+
+  return (
+    <div className="flex flex-col text-foreground">
+      <span
+        className={cn("text-xl font-semibold", {
+          "text-primary": selectedPrice.price_type === "sale",
+        })}
+      >
+        {!variant && `${labels.from} `}
+        <span
+          data-testid="product-price"
+          data-value={selectedPrice.calculated_price_number}
+        >
+          {selectedPrice.calculated_price}
+        </span>
+      </span>
+      {selectedPrice.price_type === "sale" && (
+        <>
+          <p>
+            <span className="text-muted-foreground">{labels.original} </span>
+            <span
+              className="line-through"
+              data-testid="original-product-price"
+              data-value={selectedPrice.original_price_number}
+            >
+              {selectedPrice.original_price}
+            </span>
+          </p>
+          <span className="text-primary">
+            -{selectedPrice.percentage_diff}%
+          </span>
+        </>
+      )}
+    </div>
+  )
+}