@cartbase/storefront 0.16.0 → 0.18.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 Image from "next/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/index.ts

@@ -1,59 +1,68 @@
-/**
- * @cartbase/storefront — products family barrel. Prefer subpath imports
- * (`@cartbase/storefront/products/product-actions`) in apps; the barrel exists
- * for convenience and for the extra pure module (variant-matching).
- */
-export { ProductLabelsProvider, useProductLabels } from "./context"
-export { defaultProductLabels, type ProductLabels } from "./labels"
-
-export {
-  optionsAsKeymap,
-  optionsMatch,
-  findMatchingVariant,
-  type OptionChoices,
-  type VariantOptionLike,
-} from "./variant-matching"
-
-export { Thumbnail, type ThumbnailProps } from "./thumbnail"
-export { PreviewPrice } from "./preview-price"
-export { ProductPrice } from "./product-price"
-export { OptionSelect, type OptionSelectProps } from "./option-select"
-// subscriptions-core step 4 — one-time vs plan purchase options.
-export {
-  PurchaseOptions,
-  previewPlanPrice,
-  cadenceLabel,
-  type PurchaseOptionsLabels,
-} from "./purchase-options"
-export { ImageGallery, type ImageGalleryProps } from "./image-gallery"
-// The product page contract: the address is the state, the default is the
-// merchant's, a switch is a browser event (variant-url + use-product-actions).
-export {
-  VARIANT_PARAM,
-  variantParamValue,
-  findVariantByParam,
-  defaultVariant,
-  variantHref,
-} from "./variant-url"
-export {
-  useProductActions,
-  type UseProductActionsInput,
-  type ProductActionsState,
-} from "./use-product-actions"
-export {
-  ProductActions,
-  type ProductActionsProps,
-  type AddToCartInput,
-} from "./product-actions"
-export { MobileActions, type MobileActionsProps } from "./mobile-actions"
-export { ProductTabs, type ProductSection } from "./product-tabs"
-export { ProductSpecs, hasProductSpecs } from "./product-specs"
-export { ProductPromises, type ProductPromise } from "./product-promises"
-export { ProductInfo, type ProductInfoProps } from "./product-info"
-export { ProductPreview, type ProductPreviewProps } from "./product-preview"
-export { RelatedProducts, type RelatedProductsProps } from "./related-products"
-export {
-  ProductActionsWrapper,
-  type ProductActionsWrapperProps,
-} from "./product-actions-wrapper"
-export { ProductTemplate, type ProductTemplateProps } from "./product-template"
+/**
+ * @cartbase/storefront — products family barrel. Prefer subpath imports
+ * (`@cartbase/storefront/products/product-actions`) in apps; the barrel exists
+ * for convenience and for the extra pure module (variant-matching).
+ */
+export { ProductLabelsProvider, useProductLabels } from "./context"
+export { defaultProductLabels, type ProductLabels } from "./labels"
+
+export {
+  optionsAsKeymap,
+  optionsMatch,
+  findMatchingVariant,
+  type OptionChoices,
+  type VariantOptionLike,
+} from "./variant-matching"
+
+export { Thumbnail, type ThumbnailProps } from "./thumbnail"
+export { PreviewPrice } from "./preview-price"
+export { ProductPrice } from "./product-price"
+export { OptionSelect, type OptionSelectProps } from "./option-select"
+// subscriptions-core step 4 — one-time vs plan purchase options.
+export {
+  PurchaseOptions,
+  previewPlanPrice,
+  cadenceLabel,
+  type PurchaseOptionsLabels,
+} from "./purchase-options"
+export { ImageGallery, type ImageGalleryProps } from "./image-gallery"
+// The product page contract: the address is the state, the default is the
+// merchant's, a switch is a browser event (variant-url + use-product-actions).
+export {
+  VARIANT_PARAM,
+  variantParamValue,
+  findVariantByParam,
+  defaultVariant,
+  variantHref,
+} from "./variant-url"
+// Sets: what a set holds and which sets hold a product (kit links).
+export {
+  SET_FIELDS,
+  linkOwner,
+  setContents,
+  setContentsByVariant,
+  setsContaining,
+  type SetPart,
+} from "./sets"
+export {
+  useProductActions,
+  type UseProductActionsInput,
+  type ProductActionsState,
+} from "./use-product-actions"
+export {
+  ProductActions,
+  type ProductActionsProps,
+  type AddToCartInput,
+} from "./product-actions"
+export { MobileActions, type MobileActionsProps } from "./mobile-actions"
+export { ProductTabs, type ProductSection } from "./product-tabs"
+export { ProductSpecs, hasProductSpecs } from "./product-specs"
+export { ProductPromises, type ProductPromise } from "./product-promises"
+export { ProductInfo, type ProductInfoProps } from "./product-info"
+export { ProductPreview, type ProductPreviewProps } from "./product-preview"
+export { RelatedProducts, type RelatedProductsProps } from "./related-products"
+export {
+  ProductActionsWrapper,
+  type ProductActionsWrapperProps,
+} from "./product-actions-wrapper"
+export { ProductTemplate, type ProductTemplateProps } from "./product-template"

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 }