@shopify/shop-minis-react 0.0.3 → 0.0.4

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

@@ -0,0 +1,427 @@
+import * as React from 'react'
+
+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'
+import {formatMoney} from '../../lib/formatMoney'
+import {cn} from '../../lib/utils'
+import {
+  type Product,
+  type ProductVariant,
+} from '../../types/minisSDK.generated.d'
+import {Badge} from '../ui/badge'
+import {Button} from '../ui/button'
+import {Icon, type LucideIconName} from '../ui/icon'
+import {Touchable} from '../ui/touchable'
+
+const productCardVariants = cva(
+  'relative overflow-hidden rounded-xl border border-gray-200',
+  {
+    variants: {
+      variant: {
+        default: '',
+        priceOverlay: '',
+        compact: '',
+      },
+      touchable: {
+        true: 'cursor-pointer',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      touchable: true,
+    },
+  }
+)
+
+// Primitive components (building blocks)
+export interface ProductCardRootProps
+  extends React.ComponentProps<'div'>,
+    VariantProps<typeof productCardVariants> {
+  variant?: 'default' | 'priceOverlay' | 'compact'
+  touchable?: boolean
+  asChild?: boolean
+  onPress?: () => void
+}
+
+function ProductCardRoot({
+  className,
+  variant,
+  touchable = true,
+  asChild = false,
+  onPress,
+  ...props
+}: ProductCardRootProps) {
+  const Comp = asChild ? SlotPrimitive.Slot : 'div'
+
+  const content = (
+    <Comp
+      className={cn(
+        productCardVariants({variant, touchable}),
+        'border-0',
+        className
+      )}
+      {...props}
+    />
+  )
+
+  if (touchable && onPress) {
+    return (
+      <Touchable onPress={onPress} asChild>
+        {content}
+      </Touchable>
+    )
+  }
+
+  return content
+}
+
+function ProductCardImageContainer({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & {
+  variant?: 'default' | 'priceOverlay' | 'compact'
+}) {
+  return (
+    <div
+      data-slot="product-card-image-container"
+      className={cn(
+        'relative overflow-hidden rounded-xl border border-gray-200',
+        'w-full aspect-square',
+        variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ProductCardImage({
+  className,
+  src,
+  alt,
+  ...props
+}: React.ComponentProps<'img'> & {
+  src?: string
+  alt?: string
+}) {
+  return (
+    <div className="w-full h-full bg-gray-100 flex items-center justify-center">
+      {src ? (
+        <img
+          data-slot="product-card-image"
+          src={src}
+          alt={alt}
+          className={cn('w-full h-full object-cover', className)}
+          {...props}
+        />
+      ) : (
+        <div className="text-gray-400 text-sm">No Image</div>
+      )}
+    </div>
+  )
+}
+
+function ProductCardBadge({
+  className,
+  position = 'bottom-left',
+  children,
+  ...props
+}: React.ComponentProps<typeof Badge> & {
+  position?: 'top-left' | 'bottom-left'
+}) {
+  return (
+    <div
+      className={cn(
+        'absolute z-10',
+        position === 'top-left' ? 'top-3 left-3' : 'bottom-2 left-2'
+      )}
+    >
+      <Badge
+        className={cn('bg-black/50 text-white rounded', className)}
+        {...props}
+      >
+        {children}
+      </Badge>
+    </div>
+  )
+}
+
+function ProductCardFavoriteButton({
+  className,
+  onPress,
+  filled = false,
+  icon = 'Heart',
+  ...props
+}: React.ComponentProps<'div'> & {
+  onPress?: () => void
+  filled?: boolean
+  icon?: LucideIconName
+}) {
+  return (
+    <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>
+      <Touchable onPress={onPress} asChild>
+        <Button
+          variant="secondary"
+          size="icon"
+          className={cn(
+            'h-8 w-8 rounded-full border-0 shadow-sm',
+            filled ? 'bg-primary' : 'bg-grayscale-l6/60 backdrop-blur-sm'
+          )}
+        >
+          <Icon name={icon} filled={filled} className="h-4 w-4 text-white" />
+        </Button>
+      </Touchable>
+    </div>
+  )
+}
+
+function ProductCardInfo({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & {
+  variant?: 'default' | 'priceOverlay' | 'compact'
+}) {
+  if (variant !== 'default') {
+    return null
+  }
+
+  return (
+    <div
+      data-slot="product-card-info"
+      className={cn('px-1 pt-2 pb-0 space-y-1', className)}
+      {...props}
+    />
+  )
+}
+
+function ProductCardTitle({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'h3'>) {
+  return (
+    <h3
+      data-slot="product-card-title"
+      className={cn(
+        'text-sm font-medium leading-tight text-gray-900',
+        'truncate overflow-hidden whitespace-nowrap text-ellipsis',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h3>
+  )
+}
+
+function ProductCardPrice({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="product-card-price"
+      className={cn('flex items-center gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function ProductCardCurrentPrice({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="product-card-current-price"
+      className={cn('text-sm font-semibold text-gray-900', className)}
+      {...props}
+    />
+  )
+}
+
+function ProductCardOriginalPrice({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="product-card-original-price"
+      className={cn('text-sm text-gray-500 line-through', className)}
+      {...props}
+    />
+  )
+}
+
+export interface ProductCardProps {
+  product: Product
+  selectedProductVariant?: ProductVariant
+  variant?: 'default' | 'priceOverlay' | 'compact'
+  touchable?: boolean
+  badgeText?: string
+  badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline'
+  onFavoriteToggled?: (isFavorited: boolean) => void
+  sectionId?: string
+}
+
+// Composed ProductCard component
+function ProductCard({
+  product,
+  selectedProductVariant,
+  variant = 'default',
+  touchable = true,
+  badgeText,
+  badgeVariant = 'secondary',
+  onFavoriteToggled,
+}: 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 hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount
+
+  const handlePress = React.useCallback(() => {
+    if (!touchable) return
+
+    navigateToProduct({
+      productId: id,
+    })
+  }, [navigateToProduct, id, touchable])
+
+  const handleFavoritePress = React.useCallback(async () => {
+    const previousState = isFavoritedLocal
+
+    // Optimistic update
+    setIsFavoritedLocal(!previousState)
+    onFavoriteToggled?.(!previousState)
+
+    try {
+      if (previousState) {
+        await unsaveProduct({
+          productId: id,
+          shopId: shop.id,
+          productVariantId: selectedProductVariant?.id || defaultVariantId,
+        })
+      } else {
+        await saveProduct({
+          productId: id,
+          shopId: shop.id,
+          productVariantId: selectedProductVariant?.id || defaultVariantId,
+        })
+      }
+    } catch (error) {
+      // Revert optimistic update on error
+      setIsFavoritedLocal(previousState)
+      onFavoriteToggled?.(previousState)
+    }
+  }, [
+    isFavoritedLocal,
+    id,
+    shop.id,
+    selectedProductVariant?.id,
+    defaultVariantId,
+    saveProduct,
+    unsaveProduct,
+    onFavoriteToggled,
+  ])
+
+  return (
+    <ProductCardRoot
+      variant={variant}
+      touchable={touchable}
+      onPress={handlePress}
+    >
+      <ProductCardImageContainer variant={variant}>
+        <ProductCardImage src={imageUrl} alt={imageAltText} />
+
+        {/* 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>
+
+        <ProductCardPrice>
+          {hasDiscount ? (
+            <>
+              <ProductCardCurrentPrice>
+                {formatMoney(amount, currencyCode)}
+              </ProductCardCurrentPrice>
+              <ProductCardOriginalPrice>
+                {formatMoney(
+                  compareAtPriceAmount,
+                  displayCompareAtPrice?.currencyCode || currencyCode
+                )}
+              </ProductCardOriginalPrice>
+            </>
+          ) : (
+            <ProductCardCurrentPrice>
+              {formatMoney(amount, currencyCode)}
+            </ProductCardCurrentPrice>
+          )}
+        </ProductCardPrice>
+      </ProductCardInfo>
+    </ProductCardRoot>
+  )
+}
+
+export {
+  // Composed component
+  ProductCard,
+  // Primitive components for custom composition
+  ProductCardRoot,
+  ProductCardImageContainer,
+  ProductCardImage,
+  ProductCardBadge,
+  ProductCardFavoriteButton,
+  ProductCardInfo,
+  ProductCardTitle,
+  ProductCardPrice,
+  ProductCardCurrentPrice,
+  ProductCardOriginalPrice,
+}

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

@@ -202,7 +202,7 @@ function ProductLinkActions({
     >
       <Touchable onPress={onActionPress} asChild>
         <Button
-          variant="ghost"
+          variant="borderless"
           size="icon"
           className="h-auto w-auto p-0 hover:bg-transparent"
         >
@@ -327,7 +327,7 @@ function ProductLink({product}: ProductLinkProps) {
                   className={cn(
                     'h-3 w-3',
                     i < Math.floor(averageRating!)
-                      ? 'text-gray-900'
+                      ? 'text-primary'
                       : 'text-gray-300'
                   )}
                 />

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './commerce/product-card'
 export * from './commerce/product-link'
 
 export * from './ui/accordion'

package/src/components/ui/alert-dialog.tsx

@@ -130,7 +130,7 @@ function AlertDialogCancel({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
   return (
     <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({variant: 'outline'}), className)}
+      className={cn(buttonVariants({variant: 'outlined'}), className)}
       {...props}
     />
   )

package/src/components/ui/button.tsx

@@ -10,17 +10,23 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
+        primary:
           'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
+        secondary: 'bg-slate-900 text-white shadow-xs hover:bg-slate-800',
+        tertiary:
+          'bg-slate-100 text-slate-900 shadow-xs hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700',
+        blurred:
+          'bg-black/20 text-white shadow-xs hover:bg-black/30 backdrop-blur-md border border-white/20',
+        text: 'bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',
+        borderless: 'bg-transparent text-primary hover:text-primary/80',
+        borderlessUnbranded:
+          'bg-transparent text-foreground hover:text-foreground/80',
+        outlined:
+          'border border-border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground',
+        dangerous:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90',
+        'outlined-dangerous':
+          'border border-destructive bg-transparent text-destructive shadow-xs hover:bg-destructive/10',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
@@ -30,7 +36,7 @@ const buttonVariants = cva(
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: 'primary',
       size: 'default',
     },
   }

package/src/components/ui/carousel.tsx

@@ -173,7 +173,7 @@ function CarouselItem({className, ...props}: React.ComponentProps<'div'>) {
 
 function CarouselPrevious({
   className,
-  variant = 'outline',
+  variant = 'outlined',
   size = 'icon',
   ...props
 }: React.ComponentProps<typeof Button>) {
@@ -203,7 +203,7 @@ function CarouselPrevious({
 
 function CarouselNext({
   className,
-  variant = 'outline',
+  variant = 'outlined',
   size = 'icon',
   ...props
 }: React.ComponentProps<typeof Button>) {