@shopify/shop-minis-react 0.0.31 → 0.0.33

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

@@ -1,9 +1,7 @@
 import * as React from 'react'
-import {useCallback} from 'react'
+import {useCallback, useContext, useMemo, useState} from 'react'
 
 import {type Product, type ProductVariant} from '@shopify/shop-minis-platform'
-import {cva, type VariantProps} from 'class-variance-authority'
-import {Slot as SlotPrimitive} from 'radix-ui'
 
 import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
@@ -15,62 +13,61 @@ import {ThumbhashImage} from '../atoms/thumbhash-image'
 import {Touchable} from '../atoms/touchable'
 import {Badge} from '../ui/badge'
 
-const productCardVariants = cva(
-  'relative w-full overflow-hidden rounded-xl border border-gray-200',
-  {
-    variants: {
-      variant: {
-        default: '',
-        priceOverlay: '',
-        compact: '',
-      },
-      touchable: {
-        true: 'cursor-pointer',
-        false: '',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      touchable: true,
-    },
-  }
-)
+// Context definition
+interface ProductCardContextValue {
+  // Core data
+  product: Product
+  selectedProductVariant?: ProductVariant
 
-// Primitive components (building blocks)
-export interface ProductCardRootProps
-  extends React.ComponentProps<'div'>,
-    VariantProps<typeof productCardVariants> {
-  variant?: 'default' | 'priceOverlay' | 'compact'
-  touchable?: boolean
-  asChild?: boolean
-  onPress?: () => void
+  // UI configuration
+  variant: 'default' | 'priceOverlay' | 'compact'
+  touchable: boolean
+  badgeText?: string
+  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'
+
+  // State
+  isFavorited: boolean
+
+  // Actions
+  onClick: () => void
+  onFavoriteToggle: () => void
 }
 
-function ProductCardRoot({
+const ProductCardContext = React.createContext<
+  ProductCardContextValue | undefined
+>(undefined)
+
+function useProductCardContext() {
+  const context = useContext(ProductCardContext)
+  if (!context) {
+    throw new Error(
+      'ProductCard components must be used within a ProductCard provider'
+    )
+  }
+  return context
+}
+
+// Primitive components (building blocks)
+function ProductCardContainer({
   className,
-  variant,
-  touchable = true,
-  asChild = false,
-  onPress,
   ...props
-}: ProductCardRootProps) {
-  const Comp = asChild ? SlotPrimitive.Slot : 'div'
+}: React.ComponentProps<'div'>) {
+  const {touchable, onClick} = useProductCardContext()
 
   const content = (
-    <Comp
+    <div
       className={cn(
-        productCardVariants({variant, touchable}),
-        'border-0',
+        'relative w-full overflow-hidden rounded-xl border-0',
         className
       )}
       {...props}
     />
   )
 
-  if (touchable && onPress) {
+  if (touchable && onClick) {
     return (
       <Touchable
-        onClick={onPress}
+        onClick={onClick}
         whileTap={{opacity: 0.7}}
         transition={{
           opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},
@@ -86,11 +83,10 @@ function ProductCardRoot({
 
 function ProductCardImageContainer({
   className,
-  variant = 'default',
   ...props
-}: React.ComponentProps<'div'> & {
-  variant?: 'default' | 'priceOverlay' | 'compact'
-}) {
+}: React.ComponentProps<'div'>) {
+  const {variant} = useProductCardContext()
+
   return (
     <div
       data-slot="product-card-image-container"
@@ -107,36 +103,28 @@ function ProductCardImageContainer({
   )
 }
 
-function ProductCardImage({
-  className,
-  src,
-  alt,
-  aspectRatio,
-  thumbhash,
-  ...props
-}: React.ComponentProps<'img'> & {
-  src?: string
-  alt?: string
-  aspectRatio?: number
-  thumbhash?: string
-}) {
+function ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {
+  const {product, selectedProductVariant} = useProductCardContext()
+
+  // Derive display image locally
+  const displayImage = selectedProductVariant?.image || product.featuredImage
+  const src = displayImage?.url
+  const alt = displayImage?.altText || product.title
+  const thumbhash = product.featuredImage?.thumbhash
+
   const renderImageElement = useCallback(
     (src: string) => {
-      if (thumbhash) {
-        return (
-          <ThumbhashImage
-            data-slot="product-card-image"
-            src={src}
-            alt={alt}
-            aspectRatio={aspectRatio}
-            thumbhash={thumbhash}
-            className={cn('w-full h-full object-cover', className)}
-            {...props}
-          />
-        )
-      }
-
-      return (
+      const imageElement = thumbhash ? (
+        <ThumbhashImage
+          data-slot="product-card-image"
+          src={src}
+          alt={alt}
+          aspectRatio={1}
+          thumbhash={thumbhash}
+          className={cn('w-full h-full object-cover', className)}
+          {...props}
+        />
+      ) : (
         <img
           data-slot="product-card-image"
           src={src}
@@ -145,8 +133,10 @@ function ProductCardImage({
           {...props}
         />
       )
+
+      return imageElement
     },
-    [alt, aspectRatio, className, props, thumbhash]
+    [alt, className, props, thumbhash]
   )
 
   return (
@@ -163,11 +153,18 @@ function ProductCardImage({
 function ProductCardBadge({
   className,
   position = 'bottom-left',
+  variant,
   children,
   ...props
 }: React.ComponentProps<typeof Badge> & {
   position?: 'top-left' | 'bottom-left'
 }) {
+  const {badgeText, badgeVariant} = useProductCardContext()
+  // If no children provided, use badgeText from context
+  const content = children || badgeText
+
+  if (!content) return null
+
   return (
     <div
       className={cn(
@@ -176,10 +173,17 @@ function ProductCardBadge({
       )}
     >
       <Badge
-        className={cn('bg-black/50 text-white rounded', className)}
+        variant={variant ?? badgeVariant ?? 'none'}
+        className={cn(
+          !badgeVariant &&
+            !variant &&
+            'bg-black/50 text-white border-transparent',
+          'rounded',
+          className
+        )}
         {...props}
       >
-        {children}
+        {content}
       </Badge>
     </div>
   )
@@ -187,27 +191,18 @@ function ProductCardBadge({
 
 function ProductCardFavoriteButton({
   className,
-  onPress,
-  filled = false,
   ...props
-}: React.ComponentProps<'div'> & {
-  onPress?: () => void
-  filled?: boolean
-}) {
+}: React.ComponentProps<'div'>) {
+  const {isFavorited, onFavoriteToggle} = useProductCardContext()
   return (
     <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>
-      <FavoriteButton onClick={onPress} filled={filled} />
+      <FavoriteButton onClick={onFavoriteToggle} filled={isFavorited} />
     </div>
   )
 }
 
-function ProductCardInfo({
-  className,
-  variant = 'default',
-  ...props
-}: React.ComponentProps<'div'> & {
-  variant?: 'default' | 'priceOverlay' | 'compact'
-}) {
+function ProductCardInfo({className, ...props}: React.ComponentProps<'div'>) {
+  const {variant} = useProductCardContext()
   if (variant !== 'default') {
     return null
   }
@@ -226,6 +221,7 @@ function ProductCardTitle({
   children,
   ...props
 }: React.ComponentProps<'h3'>) {
+  const {product} = useProductCardContext()
   return (
     <h3
       data-slot="product-card-title"
@@ -236,11 +232,46 @@ function ProductCardTitle({
       )}
       {...props}
     >
-      {children}
+      {children || product.title}
     </h3>
   )
 }
 
+function ProductCardPrice({className}: {className?: string}) {
+  const {product, selectedProductVariant} = useProductCardContext()
+
+  // Derive price data locally
+  const displayPrice = selectedProductVariant?.price || product?.price
+  const displayCompareAtPrice =
+    selectedProductVariant?.compareAtPrice || product?.compareAtPrice
+
+  return (
+    <ProductVariantPrice
+      amount={displayPrice?.amount || ''}
+      currencyCode={displayPrice?.currencyCode || ''}
+      compareAtPriceAmount={displayCompareAtPrice?.amount}
+      compareAtPriceCurrencyCode={displayCompareAtPrice?.currencyCode}
+      className={className}
+    />
+  )
+}
+
+// Special PriceOverlayBadge for price overlay variant
+function ProductCardPriceOverlayBadge() {
+  const {product, selectedProductVariant, variant} = useProductCardContext()
+  if (variant !== 'priceOverlay') return null
+  const displayPrice = selectedProductVariant?.price || product.price
+  const currencyCode = displayPrice?.currencyCode
+  const amount = displayPrice?.amount
+
+  if (!currencyCode || !amount) return null
+  return (
+    <ProductCardBadge position="top-left">
+      {formatMoney(amount, currencyCode)}
+    </ProductCardBadge>
+  )
+}
+
 export interface ProductCardProps {
   /** The product to display in the card */
   product: Product
@@ -253,61 +284,43 @@ export interface ProductCardProps {
   /** Optional text to display in a badge on the card */
   badgeText?: string
   /** Visual style variant for the badge */
-  badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline'
+  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'
+  /** Callback fired when the product is clicked */
+  onProductClick?: () => void
   /** Callback fired when the favorite button is toggled */
   onFavoriteToggled?: (isFavorited: boolean) => void
-  /** Optional ID for the section containing this card */
-  sectionId?: string
+  /** Custom layout via children */
+  children?: React.ReactNode
 }
 
-// Composed ProductCard component
 function ProductCard({
   product,
   selectedProductVariant,
   variant = 'default',
   touchable = true,
   badgeText,
-  badgeVariant = 'secondary',
+  badgeVariant,
+  onProductClick,
   onFavoriteToggled,
+  children,
 }: ProductCardProps) {
   const {navigateToProduct} = useShopNavigation()
   const {saveProduct, unsaveProduct} = useSavedProductsActions()
 
-  const {
-    id,
-    title,
-    featuredImage,
-    price,
-    compareAtPrice,
-    isFavorited,
-    defaultVariantId,
-    shop,
-  } = product
-
-  // Use selected variant data if available
-  const displayImage = selectedProductVariant?.image || featuredImage
-  const displayPrice = selectedProductVariant?.price || price
-  const displayCompareAtPrice =
-    selectedProductVariant?.compareAtPrice || compareAtPrice
-
   // Local state for optimistic UI updates
-  const [isFavoritedLocal, setIsFavoritedLocal] = React.useState(isFavorited)
-
-  const currencyCode = displayPrice?.currencyCode
-  const amount = displayPrice?.amount
-  const imageUrl = displayImage?.url
-  const imageAltText = displayImage?.altText || title
-  const compareAtPriceAmount = displayCompareAtPrice?.amount
+  const [isFavoritedLocal, setIsFavoritedLocal] = useState(product.isFavorited)
 
-  const handlePress = React.useCallback(() => {
+  const handleClick = useCallback(() => {
     if (!touchable) return
 
+    onProductClick?.()
+
     navigateToProduct({
-      productId: id,
+      productId: product.id,
     })
-  }, [navigateToProduct, id, touchable])
+  }, [navigateToProduct, product.id, touchable, onProductClick])
 
-  const handleFavoritePress = React.useCallback(async () => {
+  const handleFavoriteClick = useCallback(async () => {
     const previousState = isFavoritedLocal
 
     // Optimistic update
@@ -317,15 +330,17 @@ function ProductCard({
     try {
       if (previousState) {
         await unsaveProduct({
-          productId: id,
-          shopId: shop.id,
-          productVariantId: selectedProductVariant?.id || defaultVariantId,
+          productId: product.id,
+          shopId: product.shop.id,
+          productVariantId:
+            selectedProductVariant?.id || product.defaultVariantId,
         })
       } else {
         await saveProduct({
-          productId: id,
-          shopId: shop.id,
-          productVariantId: selectedProductVariant?.id || defaultVariantId,
+          productId: product.id,
+          shopId: product.shop.id,
+          productVariantId:
+            selectedProductVariant?.id || product.defaultVariantId,
         })
       }
     } catch (error) {
@@ -335,63 +350,77 @@ function ProductCard({
     }
   }, [
     isFavoritedLocal,
-    id,
-    shop.id,
+    product.id,
+    product.shop.id,
+    product.defaultVariantId,
     selectedProductVariant?.id,
-    defaultVariantId,
     saveProduct,
     unsaveProduct,
     onFavoriteToggled,
   ])
 
-  return (
-    <ProductCardRoot
-      variant={variant}
-      touchable={touchable}
-      onPress={handlePress}
-    >
-      <ProductCardImageContainer variant={variant}>
-        <ProductCardImage
-          src={imageUrl}
-          alt={imageAltText}
-          aspectRatio={1}
-          thumbhash={featuredImage?.thumbhash ?? undefined}
-        />
-
-        {/* Price overlay badge for priceOverlay variant */}
-        {variant === 'priceOverlay' && currencyCode && amount && (
-          <ProductCardBadge position="top-left">
-            {formatMoney(amount, currencyCode)}
-          </ProductCardBadge>
-        )}
-
-        {/* Custom badge */}
-        {badgeText && (
-          <ProductCardBadge position="bottom-left" variant={badgeVariant}>
-            {badgeText}
-          </ProductCardBadge>
-        )}
-
-        {/* Favorite button */}
-        <ProductCardFavoriteButton
-          filled={isFavoritedLocal}
-          onPress={handleFavoritePress}
-        />
-      </ProductCardImageContainer>
-
-      {/* Product info for default variant */}
-      <ProductCardInfo variant={variant}>
-        <ProductCardTitle>{title}</ProductCardTitle>
+  const contextValue = useMemo<ProductCardContextValue>(
+    () => ({
+      // Core data
+      product,
+      selectedProductVariant,
+
+      // UI configuration
+      variant,
+      touchable,
+      badgeText,
+      badgeVariant,
+
+      // State
+      isFavorited: isFavoritedLocal,
+
+      // Actions
+      onClick: handleClick,
+      onFavoriteToggle: handleFavoriteClick,
+    }),
+    [
+      product,
+      selectedProductVariant,
+      variant,
+      touchable,
+      badgeText,
+      badgeVariant,
+      isFavoritedLocal,
+      handleClick,
+      handleFavoriteClick,
+    ]
+  )
 
-        <ProductVariantPrice
-          amount={amount}
-          currencyCode={currencyCode}
-          compareAtPriceAmount={compareAtPriceAmount}
-          compareAtPriceCurrencyCode={displayCompareAtPrice?.currencyCode}
-        />
-      </ProductCardInfo>
-    </ProductCardRoot>
+  return (
+    <ProductCardContext.Provider value={contextValue}>
+      {children ?? (
+        <ProductCardContainer>
+          <ProductCardImageContainer>
+            <ProductCardImage />
+            {variant === 'priceOverlay' && <ProductCardPriceOverlayBadge />}
+            <ProductCardBadge />
+            <ProductCardFavoriteButton />
+          </ProductCardImageContainer>
+          {variant === 'default' && (
+            <ProductCardInfo>
+              <ProductCardTitle />
+              <ProductCardPrice />
+            </ProductCardInfo>
+          )}
+        </ProductCardContainer>
+      )}
+    </ProductCardContext.Provider>
   )
 }
 
-export {ProductCard}
+export {
+  ProductCard,
+  ProductCardContainer,
+  ProductCardImageContainer,
+  ProductCardImage,
+  ProductCardBadge,
+  ProductCardFavoriteButton,
+  ProductCardInfo,
+  ProductCardTitle,
+  ProductCardPrice,
+}

package/src/components/ui/badge.tsx

@@ -6,22 +6,20 @@ import {Slot as SlotPrimitive} from 'radix-ui'
 import {cn} from '../../lib/utils'
 
 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 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  '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',
   {
     variants: {
       variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        primary: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
         destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+          'border-transparent bg-destructive text-white dark:bg-destructive/60',
+        outline: 'bg-white text-foreground',
+        none: '', // Allows custom classes
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: 'primary',
     },
   }
 )

package/src/mocks.ts

@@ -468,9 +468,9 @@ const isMobile = (): boolean => {
   return isIOS || isAndroid
 }
 
-export const injectMocks = () => {
-  // Only inject mocks if we aren't on a mobile device
-  if (isMobile()) {
+export const injectMocks = ({force}: {force?: boolean} = {}) => {
+  // Only inject mocks if we aren't on a mobile device or we force it
+  if (isMobile() && !force) {
     return
   }
 

package/src/stories/MerchantCard.stories.tsx

@@ -15,9 +15,6 @@ const meta = {
     touchable: {
       control: 'boolean',
     },
-    fixedHeight: {
-      control: 'boolean',
-    },
     featuredImagesLimit: {
       control: 'number',
     },