@shopify/shop-minis-react 0.4.15 → 0.4.17

package/src/components/commerce/add-to-cart.tsx

@@ -10,22 +10,18 @@ import {useShopCartActions} from '../../internal/useShopCartActions'
 import {cn} from '../../lib/utils'
 import {Button} from '../atoms/button'
 
-interface AddToCartButtonProps {
+export interface AddToCartButtonProps {
+  /** Whether the button is disabled */
   disabled?: boolean
+  /** CSS class name */
   className?: string
+  /** Button size variant */
   size?: 'default' | 'sm' | 'lg'
-  /**
-   * The discount codes to apply to the cart.
-   */
+  /** The discount codes to apply to the cart */
   discountCodes?: string[]
-  /**
-   * The GID of the product variant. E.g. `gid://shopify/ProductVariant/456`.
-   */
+  /** The GID of the product variant. E.g. `gid://shopify/ProductVariant/456` */
   productVariantId: string
-
-  /**
-   * The product to add to the cart.
-   */
+  /** The product to add to the cart */
   product?: Product
 }
 

package/src/components/commerce/buy-now.tsx

@@ -8,21 +8,18 @@ import {useShopCartActions} from '../../internal/useShopCartActions'
 import {cn} from '../../lib/utils'
 import {Button} from '../atoms/button'
 
-interface BuyNowButtonProps {
+export interface BuyNowButtonProps {
+  /** Whether the button is disabled */
   disabled?: boolean
+  /** CSS class name */
   className?: string
+  /** Button size variant */
   size?: 'default' | 'sm' | 'lg'
-  /**
-   * The discount code to apply to the purchase.
-   */
+  /** The discount code to apply to the purchase */
   discountCode?: string
-  /**
-   * The GID of the product variant. E.g. `gid://shopify/ProductVariant/456`.
-   */
+  /** The GID of the product variant. E.g. `gid://shopify/ProductVariant/456` */
   productVariantId: string
-  /**
-   * The product to buy now.
-   */
+  /** The product to buy now */
   product?: Product
 }
 

package/src/components/commerce/favorite-button.tsx

@@ -2,13 +2,14 @@ import {Heart} from 'lucide-react'
 
 import {IconButton} from '../atoms/icon-button'
 
-export function FavoriteButton({
-  onClick,
-  filled = false,
-}: {
+export interface FavoriteButtonProps {
+  /** Click handler for toggling favorite state */
   onClick?: () => void
+  /** Whether the product is currently favorited */
   filled?: boolean
-}) {
+}
+
+export function FavoriteButton({onClick, filled = false}: FavoriteButtonProps) {
   return (
     <IconButton
       Icon={Heart}

package/src/components/commerce/merchant-card.tsx

@@ -365,9 +365,13 @@ function MerchantCardHeader({
 }
 
 export interface MerchantCardProps {
+  /** The shop/merchant to display */
   shop: Shop
+  /** Whether the card is tappable to navigate to shop (default: true) */
   touchable?: boolean
+  /** Maximum number of featured product images to show (default: 4) */
   featuredImagesLimit?: number
+  /** Custom content to render inside the card */
   children?: React.ReactNode
 }
 

package/src/components/commerce/product-link.tsx

@@ -226,6 +226,21 @@ function ProductLinkActions({
   )
 }
 
+export interface ProductLinkDocProps {
+  /** The product to display */
+  product: Product
+  /** Hide the favorite/save button */
+  hideFavoriteAction?: boolean
+  /** Callback when the product link is clicked */
+  onClick?: (product: Product) => void
+  /** Hide the review stars */
+  reviewsDisabled?: boolean
+  /** Custom action element to replace the favorite button. Must be provided with `onCustomActionClick`. */
+  customAction?: React.ReactNode
+  /** Callback when the custom action is clicked. Must be provided with `customAction`. */
+  onCustomActionClick?: () => void
+}
+
 export type ProductLinkProps = {
   product: Product
   hideFavoriteAction?: boolean

package/src/components/commerce/quantity-selector.tsx

@@ -5,11 +5,16 @@ import {Minus, Plus} from 'lucide-react'
 import {cn} from '../../lib/utils'
 import {IconButton} from '../atoms/icon-button'
 
-interface QuantitySelectorProps {
+export interface QuantitySelectorProps {
+  /** Current quantity value */
   quantity: number
+  /** Callback when quantity changes */
   onQuantityChange: (quantity: number) => void
+  /** Maximum allowed quantity */
   maxQuantity: number
+  /** Minimum allowed quantity (default: 1) */
   minQuantity?: number
+  /** Whether the selector is disabled */
   disabled?: boolean
 }
 

package/src/components/content/image-content-wrapper.tsx

@@ -1,7 +1,22 @@
 import {ContentWrapper} from '../atoms/content-wrapper'
 import {Image} from '../atoms/image'
 
-type ImageContentWrapperProps = (
+export interface ImageContentWrapperDocProps {
+  /** The public ID of the uploaded image (use this OR externalId) */
+  publicId?: string
+  /** The external ID of the uploaded image (use this OR publicId) */
+  externalId?: string
+  /** Callback when the image loads */
+  onLoad?: () => void
+  /** Image width */
+  width?: number
+  /** Image height */
+  height?: number
+  /** Loading placeholder */
+  Loader?: React.ReactNode | string
+}
+
+export type ImageContentWrapperProps = (
   | {publicId: string; externalId?: never}
   | {externalId: string; publicId?: never}
 ) & {

package/src/components/navigation/minis-router.tsx

@@ -2,7 +2,7 @@ import {BrowserRouter, BrowserRouterProps} from 'react-router'
 
 import {TransitionContainer} from './transition-container'
 
-type ShopMinisRouterProps = BrowserRouterProps & {
+export interface MinisRouterProps extends BrowserRouterProps {
   viewTransitions?: boolean
 }
 
@@ -10,7 +10,7 @@ export function MinisRouter({
   children,
   viewTransitions = false,
   ...props
-}: ShopMinisRouterProps) {
+}: MinisRouterProps) {
   if (viewTransitions) {
     return (
       <BrowserRouter {...props}>

package/src/components/navigation/transition-link.tsx

@@ -4,7 +4,17 @@ import {useHref} from 'react-router'
 
 import {useNavigateWithTransition} from '../../hooks/navigation/useNavigateWithTransition'
 
-type TransitionLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+export interface TransitionLinkDocProps {
+  /** The target path to navigate to */
+  to: string
+  /** Click handler called before navigation */
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>
+  /** Content to render inside the link */
+  children?: React.ReactNode
+}
+
+export interface TransitionLinkProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
   to: string
 }
 

package/src/components/ui/alert.tsx

@@ -4,6 +4,13 @@ import {cva, type VariantProps} from 'class-variance-authority'
 
 import {cn} from '../../lib/utils'
 
+export interface AlertDocProps {
+  /** Visual style variant */
+  variant?: 'default' | 'destructive'
+  /** Content to render inside */
+  children?: React.ReactNode
+}
+
 const alertVariants = cva(
   'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
   {

package/src/components/ui/badge.tsx

@@ -5,6 +5,15 @@ import {Slot as SlotPrimitive} from 'radix-ui'
 
 import {cn} from '../../lib/utils'
 
+export interface BadgeDocProps {
+  /** Visual style variant */
+  variant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'
+  /** Render as child element instead of span */
+  asChild?: boolean
+  /** Content to render inside */
+  children?: React.ReactNode
+}
+
 const badgeVariants = cva(
   'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none transition-[color,box-shadow] overflow-hidden',
   {

package/src/components/ui/input.tsx

@@ -2,6 +2,21 @@ import * as React from 'react'
 
 import {cn} from '../../lib/utils'
 
+export interface InputDocProps {
+  /** Ref to the input element (use instead of ref) */
+  innerRef?: React.Ref<HTMLInputElement>
+  /** Input type (text, email, password, etc.) */
+  type?: string
+  /** Placeholder text */
+  placeholder?: string
+  /** Current value */
+  value?: string
+  /** Change handler */
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  /** Whether the input is disabled */
+  disabled?: boolean
+}
+
 // using the default ref doesn't seem to set the parent's ref object when mounted
 // Since this is a shadCN component, we need to make sure to add back the innerRef prop,
 // whenever the component is updated.

package/src/utils/image.ts

@@ -18,6 +18,44 @@ export function getThumbhashDataURL(thumbhash?: string): string | undefined {
   }
 }
 
+/**
+ * Converts a data URL to a Blob
+ * @param dataURL The data URL to convert
+ * @returns A Blob object
+ */
+export function dataURLToBlob(dataURL: string): Blob {
+  const [header, base64Data] = dataURL.split(',')
+  const mimeMatch = header.match(/:(.*?);/)
+  const mime = mimeMatch ? mimeMatch[1] : 'image/png'
+  const binary = atob(base64Data)
+  const array = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) {
+    array[i] = binary.charCodeAt(i)
+  }
+  return new Blob([array], {type: mime})
+}
+
+/**
+ * Converts a thumbhash string to a blob URL for use as an image placeholder
+ * This is useful when CSP restrictions prevent data URLs
+ * @param thumbhash Base64 encoded thumbhash string
+ * @returns Blob URL that can be used as image source or undefined if conversion fails
+ */
+export function getThumbhashBlobURL(thumbhash?: string): string | undefined {
+  if (!thumbhash) return
+
+  try {
+    const dataURL = getThumbhashDataURL(thumbhash)
+    if (!dataURL) return
+
+    const blob = dataURLToBlob(dataURL)
+    return URL.createObjectURL(blob)
+  } catch (error) {
+    console.warn('Failed to create thumbhash blob URL', error)
+    return undefined
+  }
+}
+
 /** Converts a file to a data URI
  * @param file The file to convert
  * @returns A promise that resolves to the data URI string