@shopify/shop-minis-react 0.1.4 → 0.1.6

package/src/components/atoms/list.tsx

@@ -1,30 +1,33 @@
-import {ComponentType, useCallback, useRef} from 'react'
+import {useCallback, useEffect, useRef} from 'react'
 
-import {
-  VariableSizeList as _VariableSizeList,
-  VariableSizeListProps,
-} from 'react-window'
+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 VariableSizeList =
-  _VariableSizeList as unknown as ComponentType<VariableSizeListProps>
+const DEFAULT_REFRESH_PULL_THRESHOLD = 200
+const ELEMENT_BIND_DELAY = 100
 
 interface Props<T = any>
   extends Omit<
-    VariableSizeListProps<T>,
-    'children' | 'itemCount' | 'width' | 'itemSize' | 'direction'
+    VirtuosoProps<T, unknown>,
+    'data' | 'itemContent' | 'endReached'
   > {
   items: T[]
   renderItem: (item: T, index: number) => React.ReactNode
-  itemSizeForRow: (index: number) => number
   showScrollbar?: boolean
   header?: React.ReactNode
-  headerHeight?: number
   fetchMore?: () => Promise<void>
+  loadingComponent?: React.ReactNode
+  isFetchingMore?: boolean
+  onRefresh?: () => Promise<void>
+  refreshing?: boolean
+  enablePullToRefresh?: boolean
 }
 
 export function List<T = any>({
@@ -34,17 +37,23 @@ export function List<T = any>({
   className,
   showScrollbar = false,
   header,
-  headerHeight,
-  itemSizeForRow,
   fetchMore,
-  overscanCount,
-  ...listProps
+  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)
 
-  // This is workaround to prevent multiple calls to fetchMore
-  // react-window re-renders the rows while scrolling,
-  // and the TrackingPixel could be triggered multiple times
+  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
@@ -60,62 +69,102 @@ export function List<T = any>({
     inFlightFetchMoreRef.current = current
   }, [fetchMore])
 
-  const rowRenderer = useCallback(
-    ({index, style}: {index: number; style: React.CSSProperties}) => {
-      // prepend the header to the first row if it exists
-      if (header && index === 0) {
-        return (
-          <div style={style}>
-            {header}
-            <div style={{top: headerHeight}}>{renderItem(items[0], 0)}</div>
-          </div>
-        )
-      }
+  const itemContent = useCallback(
+    (index: number, item: T) => <>{renderItem(item, index)}</>,
+    [renderItem]
+  )
 
-      // append the pagination spinner to the last row if fetchMore exists
-      if (fetchMore && index === items.length - 1) {
-        return (
-          <div style={style}>
-            {renderItem(items[index], index)}
-            <div style={{bottom: 0}}>
-              <Pagination fetchMore={_fetchMore} />
-            </div>
-          </div>
-        )
-      }
+  const Footer = useCallback(() => {
+    if (!fetchMore) return null
 
-      return <div style={style}>{renderItem(items[index], index)}</div>
-    },
-    [items, renderItem, header, headerHeight, _fetchMore, fetchMore]
-  )
+    return (
+      <Pagination
+        fetchMore={_fetchMore}
+        loadingComponent={loadingComponent}
+        isFetchingMore={isFetchingMore}
+      />
+    )
+  }, [_fetchMore, fetchMore, loadingComponent, isFetchingMore])
 
-  const getItemSize = useCallback(
-    (index: number) => {
-      // include the header height in the first row height
-      if (header && index === 0) {
-        const _headerHeight = headerHeight || 0
-        return _headerHeight + itemSizeForRow(index)
+  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)
       }
 
-      return itemSizeForRow(index)
-    },
-    [itemSizeForRow, header, headerHeight]
-  )
+      const timeoutId = setTimeout(findAndBind, ELEMENT_BIND_DELAY)
 
-  const classNames = cn(showScrollbar ? undefined : 'no-scrollbars', className)
+      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 (
-    <VariableSizeList
-      className={classNames}
-      height={height}
-      direction="vertical"
-      width="100%"
-      itemCount={items.length}
-      overscanCount={overscanCount}
-      itemSize={getItemSize}
-      {...listProps}
+    <div
+      ref={containerRef}
+      className={cn('relative transition-all duration-200', classNames)}
+      style={{
+        height,
+      }}
     >
-      {rowRenderer}
-    </VariableSizeList>
+      <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/commerce/search.tsx

@@ -13,8 +13,6 @@ import {Input} from '../ui/input'
 import {ProductLink} from './product-link'
 import {ProductLinkSkeleton} from './product-link-skeleton'
 
-const ESTIMATED_PRODUCT_LINK_HEIGHT = 100
-
 interface SearchContextValue {
   query: string
   setQuery: (query: string) => void
@@ -146,10 +144,8 @@ export interface SearchResultsListProps {
 function SearchResultsList({
   height = window.innerHeight,
   renderItem,
-  itemHeight = ESTIMATED_PRODUCT_LINK_HEIGHT,
   initialStateComponent,
   showScrollbar,
-  overscanCount = 5,
 }: SearchResultsListProps) {
   const {query, products, loading, fetchMore, hasNextPage, isTyping} =
     useSearchContext()
@@ -205,10 +201,8 @@ function SearchResultsList({
       items={products || []}
       height={height}
       renderItem={_renderItem}
-      itemSizeForRow={() => itemHeight}
       fetchMore={hasNextPage ? fetchMore : undefined}
       showScrollbar={showScrollbar}
-      overscanCount={overscanCount}
     />
   )
 }

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'