@shopify/shop-minis-react 0.1.4 → 0.1.6

package/src/internal/usePullToRefresh.ts

@@ -0,0 +1,286 @@
+import {useCallback, useEffect, useRef, useState} from 'react'
+
+const DEFAULT_REFRESH_PULL_THRESHOLD = 200
+const ANIMATION_DURATION = 400
+
+export interface UsePullToRefreshOptions {
+  onRefresh?: () => Promise<void>
+  threshold?: number
+  indicatorThreshold?: number
+  enabled?: boolean
+}
+
+export interface PullToRefreshState {
+  isPulling: boolean
+  pullDistance: number
+  canRefresh: boolean
+}
+
+export function usePullToRefresh({
+  onRefresh,
+  threshold = DEFAULT_REFRESH_PULL_THRESHOLD,
+  indicatorThreshold = 0,
+  enabled = false,
+}: UsePullToRefreshOptions) {
+  const [state, setState] = useState<PullToRefreshState>({
+    isPulling: false,
+    pullDistance: 0,
+    canRefresh: false,
+  })
+
+  const startY = useRef(0)
+  const currentY = useRef(0)
+  const containerRef = useRef<HTMLElement | null>(null)
+  const animationRef = useRef<number | null>(null)
+  const isRefreshingRef = useRef(false)
+
+  const handleTouchStart = useCallback(
+    (event: TouchEvent) => {
+      if (!enabled || !containerRef.current || isRefreshingRef.current) return
+
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+        animationRef.current = null
+      }
+
+      setState(prev => {
+        const container = containerRef.current
+        if (!container) return prev
+
+        const isAtTop = container.scrollTop <= 0
+
+        if (isAtTop) {
+          const touch = event.touches[0]
+          startY.current = touch.clientY
+        } else {
+          startY.current = 0
+          return {
+            ...prev,
+            isPulling: false,
+            pullDistance: 0,
+            canRefresh: false,
+          }
+        }
+
+        return prev
+      })
+    },
+    [enabled]
+  )
+
+  const handleMove = useCallback(
+    (clientY: number, preventDefault?: () => void) => {
+      if (!enabled || !containerRef.current || startY.current === 0) {
+        return
+      }
+
+      setState(prev => {
+        if (isRefreshingRef.current) {
+          return prev
+        }
+
+        const container = containerRef.current
+        if (!container) return prev
+
+        const isAtTop = container.scrollTop <= 0
+        currentY.current = clientY
+        const deltaY = currentY.current - startY.current
+        const isValidPull = isAtTop && deltaY > 0
+
+        if (isValidPull) {
+          const pullDistance = deltaY
+          const shouldShowIndicator = pullDistance >= indicatorThreshold
+
+          if (shouldShowIndicator && preventDefault) {
+            preventDefault()
+          }
+
+          if (shouldShowIndicator || prev.isPulling) {
+            const elasticDistance =
+              pullDistance > threshold
+                ? threshold + (pullDistance - threshold) * 0.5
+                : pullDistance
+
+            return {
+              ...prev,
+              isPulling: shouldShowIndicator,
+              pullDistance: elasticDistance,
+              canRefresh: pullDistance >= threshold,
+            }
+          }
+
+          return prev
+        } else if (prev.isPulling) {
+          return {
+            ...prev,
+            isPulling: false,
+            pullDistance: 0,
+            canRefresh: false,
+          }
+        }
+
+        return prev
+      })
+    },
+    [threshold, indicatorThreshold, enabled]
+  )
+
+  const handleTouchMove = useCallback(
+    (event: TouchEvent) => {
+      if (isRefreshingRef.current) return
+
+      const touch = event.touches[0]
+      if (!touch) return
+
+      if (startY.current !== 0) {
+        handleMove(touch.clientY, () => event.preventDefault())
+      }
+    },
+    [handleMove]
+  )
+
+  const resetRefreshingState = useCallback(() => {
+    isRefreshingRef.current = false
+  }, [])
+
+  const animatePullDistanceToZero = useCallback((fromDistance?: number) => {
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current)
+      animationRef.current = null
+    }
+
+    let startDistance = fromDistance
+    if (startDistance === undefined) {
+      setState(prev => {
+        startDistance = prev.pullDistance
+        return prev
+      })
+    }
+
+    if (!startDistance || startDistance <= 0) {
+      setState(prev => ({
+        ...prev,
+        pullDistance: 0,
+        canRefresh: false,
+        isPulling: false,
+      }))
+      return
+    }
+
+    const duration = ANIMATION_DURATION
+    const startTime = Date.now()
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime
+      const progress = Math.min(elapsed / duration, 1)
+
+      const easeOut = 1 - (1 - progress) ** 3
+      const currentDistance = startDistance! * (1 - easeOut)
+
+      setState(prev => ({
+        ...prev,
+        pullDistance: currentDistance,
+        canRefresh: progress < 1 ? prev.canRefresh : false,
+      }))
+
+      if (progress < 1) {
+        animationRef.current = requestAnimationFrame(animate)
+      } else {
+        animationRef.current = null
+        setState(prev => ({
+          ...prev,
+          pullDistance: 0,
+          canRefresh: false,
+          isPulling: false,
+        }))
+      }
+    }
+
+    animationRef.current = requestAnimationFrame(animate)
+  }, [])
+
+  const handleEnd = useCallback(async () => {
+    if (isRefreshingRef.current) {
+      startY.current = 0
+      return
+    }
+
+    startY.current = 0
+
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current)
+      animationRef.current = null
+    }
+
+    let shouldRefresh = false
+    let currentPullDistance = 0
+    const wasRefreshing = isRefreshingRef.current
+
+    setState(prev => {
+      shouldRefresh = prev.canRefresh && !wasRefreshing
+      currentPullDistance = prev.pullDistance
+
+      return {
+        ...prev,
+        isPulling: false,
+      }
+    })
+
+    if (currentPullDistance <= 0) {
+      setState(prev => ({
+        ...prev,
+        pullDistance: 0,
+        canRefresh: false,
+      }))
+      return
+    }
+
+    if (shouldRefresh && onRefresh) {
+      isRefreshingRef.current = true
+      try {
+        await onRefresh()
+      } catch (error) {
+        console.error('Pull to refresh failed:', error)
+      }
+      resetRefreshingState()
+    }
+
+    animatePullDistanceToZero(currentPullDistance)
+  }, [onRefresh, animatePullDistanceToZero, resetRefreshingState])
+
+  const bindToElement = useCallback(
+    (element: HTMLElement | null) => {
+      if (!element) return
+
+      containerRef.current = element
+
+      element.addEventListener('touchstart', handleTouchStart, {passive: false})
+      element.addEventListener('touchmove', handleTouchMove, {passive: false})
+      element.addEventListener('touchend', handleEnd)
+      element.addEventListener('touchcancel', handleEnd)
+
+      return () => {
+        element.removeEventListener('touchstart', handleTouchStart)
+        element.removeEventListener('touchmove', handleTouchMove)
+        element.removeEventListener('touchend', handleEnd)
+        element.removeEventListener('touchcancel', handleEnd)
+      }
+    },
+    [handleTouchStart, handleTouchMove, handleEnd]
+  )
+
+  useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+        animationRef.current = null
+      }
+    }
+  }, [])
+
+  return {
+    state,
+    bindToElement,
+    containerRef,
+  }
+}

package/src/internal/utils/virtuoso-dom.ts

@@ -0,0 +1,26 @@
+// For finding the scrollable element within a container for pull-to-refresh functionality.
+
+export const findVirtuosoScrollableElement = (
+  container: HTMLElement
+): HTMLElement => {
+  const selector = '[data-virtuoso-scroller]'
+
+  let scrollableElement: HTMLElement | null = null
+
+  scrollableElement = container.querySelector(selector) as HTMLElement
+
+  if (scrollableElement) return scrollableElement
+
+  if (!scrollableElement) {
+    const allDivs = Array.from(container.querySelectorAll('div'))
+    for (const div of allDivs) {
+      const style = window.getComputedStyle(div)
+      if (style.overflowY === 'auto' || style.overflowY === 'scroll') {
+        scrollableElement = div as HTMLElement
+        break
+      }
+    }
+  }
+
+  return scrollableElement || container
+}

package/src/stories/AddToCart.stories.tsx

@@ -0,0 +1,186 @@
+import {AddToCartButton} from '../components/commerce/add-to-cart'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Commerce/AddToCartButton',
+  component: AddToCartButton,
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['sm', 'default', 'lg'],
+      description: 'Button size',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+    productId: {
+      control: 'text',
+      description: 'The GID of the product (e.g. gid://shopify/Product/123)',
+    },
+    productVariantId: {
+      control: 'text',
+      description:
+        'The GID of the product variant (e.g. gid://shopify/ProductVariant/456)',
+    },
+    discountCodes: {
+      control: 'object',
+      description: 'Array of discount codes to apply',
+    },
+  },
+  args: {
+    disabled: false,
+    size: 'default',
+    productId: 'gid://shopify/Product/123',
+    productVariantId: 'gid://shopify/ProductVariant/456',
+  },
+} satisfies Meta<typeof AddToCartButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: args => {
+    return <AddToCartButton {...args} />
+  },
+}
+
+export const SmallSize: Story = {
+  args: {
+    size: 'sm',
+  },
+  render: args => {
+    return <AddToCartButton {...args} />
+  },
+}
+
+export const LargeSize: Story = {
+  args: {
+    size: 'lg',
+  },
+  render: args => {
+    return <AddToCartButton {...args} />
+  },
+}
+
+export const WithDiscountCodes: Story = {
+  args: {
+    discountCodes: ['SUMMER20', 'FREESHIP'],
+  },
+  render: args => {
+    return (
+      <div className="space-y-2">
+        <p className="text-sm text-gray-600">
+          This button will apply discount codes:{' '}
+          {args.discountCodes?.join(', ')}
+        </p>
+        <AddToCartButton {...args} />
+      </div>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: args => {
+    return <AddToCartButton {...args} />
+  },
+}
+
+export const CustomStyling: Story = {
+  args: {
+    className: 'bg-purple-600 hover:bg-purple-700 text-white rounded-full px-8',
+  },
+  render: args => {
+    return (
+      <div className="space-y-2">
+        <p className="text-sm text-gray-600">
+          Custom styled button with additional classes
+        </p>
+        <AddToCartButton {...args} />
+      </div>
+    )
+  },
+}
+
+export const AllSizes: Story = {
+  render: () => {
+    return (
+      <div className="flex flex-col items-center space-y-4">
+        <h3 className="text-lg font-semibold">Button Sizes</h3>
+        <div className="flex gap-4 items-center">
+          <AddToCartButton
+            productId="gid://shopify/Product/123"
+            productVariantId="gid://shopify/ProductVariant/456"
+            size="sm"
+          />
+          <AddToCartButton
+            productId="gid://shopify/Product/123"
+            productVariantId="gid://shopify/ProductVariant/456"
+            size="default"
+          />
+          <AddToCartButton
+            productId="gid://shopify/Product/123"
+            productVariantId="gid://shopify/ProductVariant/456"
+            size="lg"
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const InteractiveExample: Story = {
+  render: () => {
+    return (
+      <div className="flex flex-col items-center space-y-6 p-8">
+        <div className="text-center">
+          <h3 className="text-lg font-semibold">Interactive Demo</h3>
+          <p className="text-sm text-gray-600 mt-2">
+            Click the buttons below to see the add to cart animation
+          </p>
+        </div>
+
+        <div className="grid gap-4">
+          <div className="text-center">
+            <p className="text-xs text-gray-500 mb-2">Product A</p>
+            <AddToCartButton
+              productId="gid://shopify/Product/111"
+              productVariantId="gid://shopify/ProductVariant/111"
+            />
+          </div>
+
+          <div className="text-center">
+            <p className="text-xs text-gray-500 mb-2">
+              Product B (with discount)
+            </p>
+            <AddToCartButton
+              productId="gid://shopify/Product/222"
+              productVariantId="gid://shopify/ProductVariant/222"
+              discountCodes={['SAVE10']}
+            />
+          </div>
+
+          <div className="text-center">
+            <p className="text-xs text-gray-500 mb-2">Product C (small size)</p>
+            <AddToCartButton
+              productId="gid://shopify/Product/333"
+              productVariantId="gid://shopify/ProductVariant/333"
+              size="sm"
+            />
+          </div>
+        </div>
+      </div>
+    )
+  },
+}

package/src/stories/FavoriteButton.stories.tsx

@@ -1,11 +1,11 @@
 import {fn} from 'storybook/test'
 
-import {FavoriteButton} from '../components/atoms/favorite-button'
+import {FavoriteButton} from '../components/commerce/favorite-button'
 
 import type {Meta, StoryObj} from '@storybook/react-vite'
 
 const meta = {
-  title: 'Atoms/FavoriteButton',
+  title: 'Commerce/FavoriteButton',
   component: FavoriteButton,
   parameters: {},
   tags: ['autodocs'],

package/src/stories/List.stories.tsx

@@ -19,10 +19,6 @@ const meta = {
       control: 'number',
       description: 'Height of the virtualized list container',
     },
-    itemSizeForRow: {
-      control: 'number',
-      description: 'Height of each item in the list',
-    },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof List>

package/src/stories/PullToRefreshList.stories.tsx

@@ -0,0 +1,122 @@
+import {useState, useCallback} from 'react'
+
+import {fn} from 'storybook/test'
+
+import {List} from '../components/atoms/list'
+import {ProductCard} from '../components/commerce/product-card'
+import {ProductLink} from '../components/commerce/product-link'
+import {createProduct, injectMocks} from '../mocks'
+
+import type {Product} from '@shopify/shop-minis-platform'
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Atoms/PullToRefreshList',
+  component: List as any,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    height: {
+      control: 'number',
+      description: 'Height of the virtualized list container',
+    },
+    enablePullToRefresh: {
+      control: 'boolean',
+      description: 'Enable pull-to-refresh functionality',
+      defaultValue: true,
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof List>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+injectMocks()
+
+const createProductList = (count: number) => {
+  return Array.from({length: count}, (_, index) =>
+    createProduct(`product-${index + 1}`, `Product ${index + 1}`, '9.99')
+  )
+}
+
+const PullToRefreshListWrapper = ({
+  initialItems,
+  renderItem,
+  ...props
+}: any) => {
+  const [items, setItems] = useState(initialItems)
+  const [refreshing, setRefreshing] = useState(false)
+
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true)
+
+    await new Promise(resolve => setTimeout(resolve, 2000))
+
+    const newItems = Array.from({length: 5}, (_, index) =>
+      createProduct(
+        `fresh-${Date.now()}-${index}`,
+        `Fresh Product ${index + 1}`,
+        '12.99'
+      )
+    )
+
+    setItems([...newItems, ...initialItems])
+    setRefreshing(false)
+  }, [initialItems])
+
+  return (
+    <List
+      {...props}
+      items={items}
+      renderItem={renderItem}
+      onRefresh={handleRefresh}
+      refreshing={refreshing}
+      enablePullToRefresh
+    />
+  )
+}
+
+const ProductLinkWithRefreshComponent = (args: any) => (
+  <PullToRefreshListWrapper
+    {...args}
+    initialItems={createProductList(20)}
+    renderItem={(product: Product) => (
+      <div className="p-4">
+        <ProductLink product={product} />
+      </div>
+    )}
+  />
+)
+
+export const ProductLinkWithRefresh: Story = {
+  render: ProductLinkWithRefreshComponent,
+  args: {
+    height: 600,
+    itemSizeForRow: () => 100,
+    showScrollbar: true,
+  },
+}
+
+const ProductGridWithRefreshComponent = (args: any) => (
+  <PullToRefreshListWrapper
+    {...args}
+    initialItems={createProductList(15)}
+    renderItem={(product: Product) => (
+      <div className="grid grid-cols-2 gap-4">
+        <ProductCard product={product} onFavoriteToggled={fn()} />
+        <ProductCard product={product} onFavoriteToggled={fn()} />
+      </div>
+    )}
+  />
+)
+
+export const ProductGridWithRefresh: Story = {
+  render: ProductGridWithRefreshComponent,
+  args: {
+    height: 600,
+    itemSizeForRow: () => 220,
+    showScrollbar: true,
+  },
+}

package/src/styles/animations.css

@@ -48,6 +48,60 @@
   }
 }
 
+@keyframes bump {
+  0% {
+    transform: scale(1);
+  }
+  16.7% {
+    transform: scale(1.16);
+  }
+  38.9% {
+    transform: scale(1.16);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes shop-spin {
+  from {
+    stroke-dashoffset: 136;
+  }
+  to {
+    stroke-dashoffset: -272;
+  }
+}
+
+@keyframes shop-continuous-fill {
+  0% {
+    stroke-dashoffset: 204;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@media not (prefers-reduced-motion: reduce) {
+  .animate-bump {
+    animation: bump 360ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  }
+
+  .animate-shop-spin {
+    animation: shop-continuous-fill 1.5s linear infinite;
+    stroke-dasharray: 68 136 !important;
+  }
+}
+
+.shop-spinner-path {
+  stroke-dasharray: 136;
+  stroke-dashoffset: 0;
+}
+
+.shop-spinner-progress {
+  stroke-dashoffset: calc(136 - (136 * var(--spinner-progress, 0.54)));
+  transition: stroke-dashoffset 0.1s ease-out;
+}
+
 /* --- View Transition Animations --- */
 @media not (prefers-reduced-motion: reduce) {
   /* FORWARD navigation animation */