@shopify/shop-minis-react 0.1.5 → 0.1.6

package/src/components/atoms/list.tsx

@@ -1,12 +1,18 @@
-import {useCallback, useRef} from 'react'
+import {useCallback, useEffect, useRef} from 'react'
 
 import {Virtuoso, VirtuosoProps} from 'react-virtuoso'
 
+import {RefreshIndicator} from '../../internal/components/refresh-indicator'
+import {usePullToRefresh} from '../../internal/usePullToRefresh'
+import {findVirtuosoScrollableElement} from '../../internal/utils/virtuoso-dom'
 import {cn} from '../../lib/utils'
 import '../../styles/utilities.css'
 
 import {Pagination} from './pagination'
 
+const DEFAULT_REFRESH_PULL_THRESHOLD = 200
+const ELEMENT_BIND_DELAY = 100
+
 interface Props<T = any>
   extends Omit<
     VirtuosoProps<T, unknown>,
@@ -19,6 +25,9 @@ interface Props<T = any>
   fetchMore?: () => Promise<void>
   loadingComponent?: React.ReactNode
   isFetchingMore?: boolean
+  onRefresh?: () => Promise<void>
+  refreshing?: boolean
+  enablePullToRefresh?: boolean
 }
 
 export function List<T = any>({
@@ -31,9 +40,20 @@ export function List<T = any>({
   fetchMore,
   loadingComponent,
   isFetchingMore,
+  onRefresh,
+  refreshing,
+  enablePullToRefresh = true,
   ...virtuosoProps
 }: Props<T>) {
   const inFlightFetchMoreRef = useRef<Promise<void> | null>(null)
+  const virtuosoRef = useRef<any>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const {state: pullToRefreshState, bindToElement} = usePullToRefresh({
+    onRefresh,
+    threshold: DEFAULT_REFRESH_PULL_THRESHOLD,
+    enabled: enablePullToRefresh && Boolean(onRefresh),
+  })
 
   const _fetchMore = useCallback(() => {
     // Dedupe concurrent calls by returning the same in-flight promise
@@ -68,18 +88,83 @@ export function List<T = any>({
 
   const classNames = cn(showScrollbar ? undefined : 'no-scrollbars', className)
 
+  useEffect(() => {
+    if (containerRef.current && enablePullToRefresh && onRefresh) {
+      let cleanup: (() => void) | undefined
+
+      const findAndBind = () => {
+        if (!containerRef.current) return
+
+        const scrollableElement = findVirtuosoScrollableElement(
+          containerRef.current
+        )
+        cleanup = bindToElement(scrollableElement)
+      }
+
+      const timeoutId = setTimeout(findAndBind, ELEMENT_BIND_DELAY)
+
+      return () => {
+        clearTimeout(timeoutId)
+        if (cleanup) cleanup()
+      }
+    }
+    return undefined
+  }, [bindToElement, enablePullToRefresh, onRefresh])
+
+  const EnhancedHeader = useCallback(() => {
+    const effectivePullDistance = refreshing
+      ? Math.max(pullToRefreshState.pullDistance, 140)
+      : pullToRefreshState.pullDistance
+
+    const refreshHeaderHeight = Math.min(
+      Math.max(effectivePullDistance, 0),
+      140
+    )
+
+    return (
+      <>
+        {enablePullToRefresh && onRefresh && (
+          <div
+            className="flex items-center justify-center"
+            style={{
+              height: refreshHeaderHeight,
+              overflow: 'hidden',
+            }}
+          >
+            <RefreshIndicator
+              pullDistance={pullToRefreshState.pullDistance}
+              threshold={DEFAULT_REFRESH_PULL_THRESHOLD}
+              isRefreshing={refreshing ?? false}
+              canRefresh={pullToRefreshState.canRefresh}
+              className="relative top-0 inset-x-auto"
+            />
+          </div>
+        )}
+        {header && <div>{header}</div>}
+      </>
+    )
+  }, [header, enablePullToRefresh, onRefresh, pullToRefreshState, refreshing])
+
   return (
-    <Virtuoso
-      className={classNames}
-      style={{height}}
-      data={items}
-      itemContent={itemContent}
-      components={{
-        Header: header ? () => <div>{header}</div> : undefined,
-        Footer,
+    <div
+      ref={containerRef}
+      className={cn('relative transition-all duration-200', classNames)}
+      style={{
+        height,
       }}
-      endReached={fetchMore ? _fetchMore : undefined}
-      {...virtuosoProps}
-    />
+    >
+      <Virtuoso
+        ref={virtuosoRef}
+        className="h-full w-full"
+        data={items}
+        itemContent={itemContent}
+        components={{
+          Header: EnhancedHeader,
+          Footer,
+        }}
+        endReached={fetchMore ? _fetchMore : undefined}
+        {...virtuosoProps}
+      />
+    </div>
   )
 }

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

@@ -0,0 +1,73 @@
+import {describe, expect, it, vi} from 'vitest'
+
+import {render, screen, mockMinisSDK, resetAllMocks} from '../../test-utils'
+
+import {AddToCartButton} from './add-to-cart'
+
+// Mock hooks
+vi.mock('../../hooks/shop/useShopCartActions', () => ({
+  useShopCartActions: () => ({
+    addToCart: mockMinisSDK.addToCart,
+    buyProduct: mockMinisSDK.buyProduct,
+  }),
+}))
+
+describe('AddToCartButton', () => {
+  const defaultProps = {
+    productId: 'gid://shopify/Product/123',
+    productVariantId: 'gid://shopify/ProductVariant/456',
+  }
+
+  // eslint-disable-next-line jest/require-top-level-describe
+  beforeEach(() => {
+    resetAllMocks()
+  })
+
+  it('renders with default text', () => {
+    render(<AddToCartButton {...defaultProps} />)
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+    expect(screen.getByText('Add to cart')).toBeInTheDocument()
+  })
+
+  it('renders with required props', () => {
+    render(<AddToCartButton {...defaultProps} />)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+  })
+
+  it('respects disabled prop', () => {
+    render(<AddToCartButton {...defaultProps} disabled />)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+  })
+
+  it('applies custom className', () => {
+    render(<AddToCartButton {...defaultProps} className="custom-class" />)
+
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass('custom-class')
+  })
+
+  it('renders with different sizes', () => {
+    const {rerender} = render(<AddToCartButton {...defaultProps} size="sm" />)
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+
+    rerender(<AddToCartButton {...defaultProps} size="default" />)
+    expect(screen.getByRole('button')).toBeInTheDocument()
+
+    rerender(<AddToCartButton {...defaultProps} size="lg" />)
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('renders with discount codes prop', () => {
+    const discountCodes = ['SUMMER20', 'FREESHIP']
+
+    render(<AddToCartButton {...defaultProps} discountCodes={discountCodes} />)
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,132 @@
+import * as React from 'react'
+import {useState, useCallback} from 'react'
+
+import {CheckIcon} from 'lucide-react'
+import {motion, AnimatePresence} from 'motion/react'
+
+import {useErrorToast, useShopCartActions} from '../../hooks'
+import {cn} from '../../lib/utils'
+import {Button} from '../atoms/button'
+
+interface AddToCartButtonProps {
+  disabled?: boolean
+  className?: string
+  size?: 'default' | 'sm' | 'lg'
+  /**
+   * The discount codes to apply to the cart.
+   */
+  discountCodes?: string[]
+  /**
+   * The GID of the product. E.g. `gid://shopify/Product/123`.
+   */
+  productId: string
+  /**
+   * The GID of the product variant. E.g. `gid://shopify/ProductVariant/456`.
+   */
+  productVariantId: string
+}
+
+export function AddToCartButton({
+  disabled = false,
+  className,
+  size = 'default',
+  productId,
+  productVariantId,
+  discountCodes,
+}: AddToCartButtonProps) {
+  const {addToCart} = useShopCartActions()
+  const [isAdded, setIsAdded] = useState(false)
+  const timeoutRef = React.useRef<number | undefined>(undefined)
+
+  const {showErrorToast} = useErrorToast()
+
+  const handleClick = useCallback(async () => {
+    if (isAdded || disabled) return
+
+    try {
+      // Call the callback if provided
+      if (productId && productVariantId) {
+        // Optimistic update with error toast
+        addToCart({
+          productId,
+          productVariantId,
+          quantity: 1,
+          discountCodes,
+        })
+          .then(() => {})
+          .catch(() => {
+            showErrorToast({message: 'Failed to add to cart'})
+          })
+      }
+
+      // Show success state
+      setIsAdded(true)
+
+      // Clear any existing timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+
+      // Reset to initial state after delay
+      timeoutRef.current = window.setTimeout(() => {
+        setIsAdded(false)
+      }, 2000)
+    } catch (error) {
+      // Handle error - reset to initial state
+      setIsAdded(false)
+      console.error('Failed to add to cart:', error)
+    }
+  }, [
+    isAdded,
+    disabled,
+    addToCart,
+    productId,
+    productVariantId,
+    discountCodes,
+    showErrorToast,
+  ])
+
+  // Cleanup timeout on unmount
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <Button
+      onClick={handleClick}
+      disabled={disabled}
+      className={cn(
+        'relative overflow-hidden transition-all duration-300',
+        className
+      )}
+      size={size}
+    >
+      <div className="relative flex items-center justify-center">
+        <AnimatePresence>
+          {isAdded && (
+            <motion.div
+              initial={{scale: 0, rotate: -180}}
+              animate={{scale: 1, rotate: 0}}
+              exit={{scale: 0, rotate: 180}}
+              transition={{
+                duration: 0.4,
+                ease: [0.175, 0.885, 0.32, 1.275], // bounce effect
+              }}
+              className="absolute left-0"
+              style={{x: -8}}
+            >
+              <CheckIcon className="size-4" />
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <span className={cn(isAdded && 'pl-5', 'transition-all duration-300')}>
+          {isAdded ? 'Added to cart' : 'Add to cart'}
+        </span>
+      </div>
+    </Button>
+  )
+}

package/src/components/{atoms → commerce}/favorite-button.tsx

@@ -1,6 +1,6 @@
 import {Heart} from 'lucide-react'
 
-import {IconButton} from './icon-button'
+import {IconButton} from '../atoms/icon-button'
 
 export function FavoriteButton({
   onClick,

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

@@ -7,12 +7,13 @@ import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
-import {FavoriteButton} from '../atoms/favorite-button'
 import {Image} from '../atoms/image'
 import {ProductVariantPrice} from '../atoms/product-variant-price'
 import {Touchable} from '../atoms/touchable'
 import {Badge} from '../ui/badge'
 
+import {FavoriteButton} from './favorite-button'
+
 // Context definition
 interface ProductCardContextValue {
   // Core data

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

@@ -9,10 +9,11 @@ import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
-import {FavoriteButton} from '../atoms/favorite-button'
 import {Touchable} from '../atoms/touchable'
 import {Card, CardContent, CardAction} from '../ui/card'
 
+import {FavoriteButton} from './favorite-button'
+
 const productLinkVariants = cva('', {
   variants: {
     layout: {

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './MinisContainer'
 
+export * from './commerce/add-to-cart'
 export * from './commerce/product-card'
 export * from './commerce/product-link'
 export * from './commerce/merchant-card'
@@ -7,6 +8,7 @@ export * from './commerce/product-card-skeleton'
 export * from './commerce/merchant-card-skeleton'
 export * from './commerce/quantity-selector'
 export * from './commerce/search'
+export * from './commerce/favorite-button'
 
 export * from './content/image-content-wrapper'
 
@@ -14,7 +16,6 @@ export * from './navigation/minis-router'
 export * from './navigation/transition-link'
 
 export * from './atoms/button'
-export * from './atoms/favorite-button'
 export * from './atoms/icon-button'
 export * from './atoms/image'
 export * from './atoms/touchable'

package/src/internal/components/refresh-indicator.tsx

@@ -0,0 +1,103 @@
+import {forwardRef, useEffect, useState} from 'react'
+
+import {cn} from '../../lib/utils'
+
+export interface PullToRefreshIndicatorProps {
+  pullDistance: number
+  threshold: number
+  isRefreshing: boolean
+  canRefresh: boolean
+  className?: string
+}
+
+export const RefreshIndicator = forwardRef<
+  HTMLDivElement,
+  PullToRefreshIndicatorProps
+>(({pullDistance, threshold, isRefreshing, canRefresh, className}, ref) => {
+  const [showBumpAnimation, setShowBumpAnimation] = useState(false)
+
+  const progress = Math.min(pullDistance / threshold, 1)
+
+  const spinnerProgress = 0.54 + progress * (1 - 0.54)
+
+  const scale = isRefreshing ? 1 : 0.5 + progress * 0.5
+
+  const opacity = isRefreshing ? 1 : Math.min(progress * 1.5, 1)
+
+  const translateY = isRefreshing ? 0 : progress * 3
+
+  useEffect(() => {
+    if (isRefreshing && !showBumpAnimation) {
+      setShowBumpAnimation(true)
+      const timer = setTimeout(() => setShowBumpAnimation(false), 360)
+      return () => clearTimeout(timer)
+    }
+    return undefined
+  }, [isRefreshing, showBumpAnimation])
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex items-center justify-center w-full h-full',
+        'transition-all duration-200 ease-out',
+        className
+      )}
+      style={{
+        transform: `translateY(${translateY}px)`,
+      }}
+    >
+      <div
+        className={cn(
+          'flex flex-col items-center space-y-2 rounded-full px-4 py-2 backdrop-blur-sm transition-all duration-200',
+          canRefresh || isRefreshing
+            ? 'bg-primary/20 border-2 border-primary/40'
+            : 'bg-background/90'
+        )}
+        style={{
+          opacity,
+          transform: `scale(${scale})`,
+        }}
+      >
+        <div
+          className={cn(
+            'h-8 w-8 transition-all duration-200',
+            showBumpAnimation && 'animate-bump'
+          )}
+        >
+          <svg
+            viewBox="0 0 52 58"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={cn(
+              'h-full w-full transition-colors duration-200',
+              canRefresh || isRefreshing
+                ? 'text-primary'
+                : 'text-muted-foreground'
+            )}
+          >
+            <path
+              className={cn(
+                'shop-spinner-path',
+                !isRefreshing && 'shop-spinner-progress',
+                isRefreshing && 'animate-shop-spin'
+              )}
+              d="M3 13C5 11.75 10.4968 6.92307 21.5 6.4999C34.5 5.99993 42 13 45 23C48.3 34 42.9211 48.1335 30.5 51C17.5 54 6.6 46 6 37C5.46667 29 10.5 25 14 23"
+              stroke="currentColor"
+              strokeWidth="8"
+              strokeLinecap="square"
+              strokeLinejoin="miter"
+              style={
+                {
+                  '--spinner-progress': isRefreshing ? '1' : spinnerProgress,
+                } as React.CSSProperties
+              }
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+RefreshIndicator.displayName = 'RefreshIndicator'