@shopify/shop-minis-react 0.3.2 → 0.4.0

package/src/hooks/product/useProduct.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
 import {DataHookOptionsBase, DataHookReturnsBase, Product} from '../../types'
 
 export interface UseProductParams extends DataHookOptionsBase {
@@ -22,24 +20,15 @@ export const useProduct = (params: UseProductParams): UseProductReturns => {
   const {getProduct} = useShopActions()
   const {id, skip = false, ...restParams} = params
 
-  const {data, ...rest} = useShopActionsDataFetching(
+  const {data, ...rest} = useShopActionQuery(
+    ['product', id, restParams],
     getProduct,
-    {
-      id,
-      ...restParams,
-    },
-    {
-      skip,
-      hook: 'useProduct',
-    }
+    {id, ...restParams},
+    {skip}
   )
 
-  const product = useMemo(() => {
-    return data ?? null
-  }, [data])
-
   return {
     ...rest,
-    product,
+    product: data,
   }
 }

package/src/hooks/product/useProductList.ts

@@ -1,13 +1,10 @@
-import {useCallback} from 'react'
-
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   ProductList,
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
 } from '../../types'
-import {MiniEntityNotFoundError} from '../../utils/errors'
 
 interface UseProductListParams extends PaginatedDataHookOptionsBase {
   /**
@@ -30,23 +27,11 @@ export const useProductList = (
   const {getProductList} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const validator = useCallback((data: ProductList | null) => {
-    if (data === null) {
-      throw new MiniEntityNotFoundError({
-        hook: 'useProductList',
-        message: 'Product list not found',
-      })
-    }
-  }, [])
-
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['productList', shopActionParams],
     getProductList,
     shopActionParams,
-    {
-      skip,
-      hook: 'useProductList',
-      validator,
-    }
+    {skip}
   )
 
   return {

package/src/hooks/product/useProductLists.ts

@@ -1,5 +1,5 @@
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -23,13 +23,11 @@ export const useProductLists = (
   const {getProductLists} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['productLists', shopActionParams],
     getProductLists,
     shopActionParams,
-    {
-      skip,
-      hook: 'useProductLists',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/product/useProductMedia.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -28,24 +26,15 @@ export const useProductMedia = (
   const {getProductMedia} = useShopActions()
   const {id, skip = false, ...restParams} = params
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['productMedia', id, restParams],
     getProductMedia,
-    {
-      id,
-      ...restParams,
-    },
-    {
-      skip,
-      hook: 'useProductMedia',
-    }
+    {id, ...restParams},
+    {skip}
   )
 
-  const media = useMemo(() => {
-    return data ?? null
-  }, [data])
-
   return {
     ...rest,
-    media,
+    media: data,
   }
 }

package/src/hooks/product/useProductSearch.ts

@@ -1,9 +1,9 @@
-import {useCallback, useEffect, useMemo, useState} from 'react'
+import {useCallback, useEffect, useState} from 'react'
 
 import debounce from 'lodash/debounce'
 
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -60,7 +60,11 @@ export const useProductSearch = (
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedSetQuery = useCallback(
     debounce((newQuery: string) => {
-      setDebouncedQuery(newQuery)
+      setDebouncedQuery(prev => {
+        // Only update if the query actually changed
+        if (prev === newQuery) return prev
+        return newQuery
+      })
     }, 300),
     []
   )
@@ -73,7 +77,16 @@ export const useProductSearch = (
     }
   }, [query, debouncedSetQuery])
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  // Use our Shop Action infinite query helper
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    [
+      'productSearch',
+      debouncedQuery,
+      filters,
+      sortBy,
+      includeSensitive,
+      restParams,
+    ],
     getProductSearch,
     {
       query: debouncedQuery,
@@ -83,22 +96,13 @@ export const useProductSearch = (
       ...restParams,
     },
     {
-      skip,
-      hook: 'useProductSearch',
+      skip: skip || debouncedQuery.trim().length === 0,
     }
   )
 
-  const products = useMemo(() => {
-    if (debouncedQuery.trim().length === 0) {
-      return null
-    }
-
-    return data ?? null
-  }, [data, debouncedQuery])
-
   return {
     ...rest,
-    products,
+    products: data,
     isTyping: debouncedQuery !== query,
   }
 }

package/src/hooks/product/useProductVariants.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -28,21 +26,15 @@ export const useProductVariants = (
   const {getProductVariants} = useShopActions()
   const {skip = false, ...restParams} = params
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['productVariants', restParams],
     getProductVariants,
     restParams,
-    {
-      skip,
-      hook: 'useProductVariants',
-    }
+    {skip}
   )
 
-  const variants = useMemo(() => {
-    return data ?? null
-  }, [data])
-
   return {
     ...rest,
-    variants,
+    variants: data,
   }
 }

package/src/hooks/product/useProducts.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
 import {DataHookOptionsBase, DataHookReturnsBase, Product} from '../../types'
 
 export interface UseProductsParams extends DataHookOptionsBase {
@@ -22,17 +20,15 @@ export const useProducts = (params: UseProductsParams): UseProductsReturns => {
   const {getProducts} = useShopActions()
   const {skip = false, ...restParams} = params
 
-  const {data, ...rest} = useShopActionsDataFetching(getProducts, restParams, {
-    skip,
-    hook: 'useProducts',
-  })
-
-  const products = useMemo(() => {
-    return data ?? null
-  }, [data])
+  const {data, ...rest} = useShopActionQuery(
+    ['products', restParams],
+    getProducts,
+    restParams,
+    {skip}
+  )
 
   return {
     ...rest,
-    products,
+    products: data,
   }
 }

package/src/hooks/product/useRecommendedProducts.ts

@@ -1,5 +1,5 @@
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   Product,
   PaginatedDataHookOptionsBase,
@@ -21,13 +21,11 @@ export const useRecommendedProducts = (
   const {getRecommendedProducts} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['recommendedProducts', shopActionParams],
     getRecommendedProducts,
     shopActionParams,
-    {
-      skip,
-      hook: 'useRecommendedProducts',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/shop/useRecommendedShops.ts

@@ -1,7 +1,7 @@
 import {useMemo} from 'react'
 
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   Shop,
   PaginatedDataHookOptionsBase,
@@ -21,13 +21,11 @@ export const useRecommendedShops = (
 
   const {skip, ...shopActionParamsToPass} = params || {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['recommendedShops', shopActionParamsToPass],
     getRecommendedShops,
     shopActionParamsToPass,
-    {
-      skip,
-      hook: 'useRecommendedShops',
-    }
+    {skip}
   )
 
   const shops = useMemo(() => {

package/src/hooks/shop/useShop.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
 import {DataHookOptionsBase, DataHookReturnsBase, Shop} from '../../types'
 
 export interface UseShopParams extends DataHookOptionsBase {
@@ -22,17 +20,15 @@ export const useShop = (params: UseShopParams): UseShopReturns => {
   const {getShop} = useShopActions()
   const {skip = false, ...restParams} = params
 
-  const {data, ...rest} = useShopActionsDataFetching(getShop, restParams, {
-    skip,
-    hook: 'useShop',
-  })
-
-  const shop = useMemo(() => {
-    return data ?? null
-  }, [data])
+  const {data, ...rest} = useShopActionQuery(
+    ['shop', restParams],
+    getShop,
+    restParams,
+    {skip}
+  )
 
   return {
     ...rest,
-    shop,
+    shop: data,
   }
 }

package/src/hooks/user/useBuyerAttributes.ts

@@ -1,5 +1,5 @@
+import {useShopActionQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
 import {
   DataHookOptionsBase,
   DataHookReturnsBase,
@@ -18,13 +18,11 @@ export const useBuyerAttributes = (
   const {skip, ...shopActionParams} = params || {}
   const {getBuyerAttributes} = useShopActions()
 
-  const {data, ...rest} = useShopActionsDataFetching(
+  const {data, ...rest} = useShopActionQuery(
+    ['buyerAttributes', shopActionParams],
     getBuyerAttributes,
     shopActionParams,
-    {
-      skip,
-      hook: 'useBuyerAttributes',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/user/useCurrentUser.ts

@@ -1,5 +1,5 @@
+import {useShopActionQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
 import {
   DataHookOptionsBase,
   DataHookReturnsBase,
@@ -24,13 +24,11 @@ export const useCurrentUser = (
   const {skip, ...shopActionParams} = params || {}
   const {getCurrentUser} = useShopActions()
 
-  const {data, ...rest} = useShopActionsDataFetching(
+  const {data, ...rest} = useShopActionQuery(
+    ['currentUser', shopActionParams],
     getCurrentUser,
     shopActionParams,
-    {
-      skip,
-      hook: 'useCurrentUser',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/user/useFollowedShops.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -23,21 +21,15 @@ export const useFollowedShops = (
   const {getFollowedShops} = useShopActions()
   const {skip = false, ...restParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['followedShops', restParams],
     getFollowedShops,
     restParams,
-    {
-      skip,
-      hook: 'useFollowedShops',
-    }
+    {skip}
   )
 
-  const shops = useMemo(() => {
-    return data ?? null
-  }, [data])
-
   return {
     ...rest,
-    shops,
+    shops: data,
   }
 }

package/src/hooks/user/useOrders.ts

@@ -1,5 +1,5 @@
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -16,13 +16,11 @@ export const useOrders = (params?: UseOrdersParams): UseOrdersReturns => {
   const {skip, ...shopActionParams} = params || {}
   const {getOrders} = useShopActions()
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['orders', shopActionParams],
     getOrders,
     shopActionParams,
-    {
-      skip,
-      hook: 'useOrders',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/user/useRecentProducts.ts

@@ -1,7 +1,7 @@
 import {useMemo} from 'react'
 
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -26,13 +26,11 @@ export const useRecentProducts = (
   const {getRecentProducts} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['recentProducts', shopActionParams],
     getRecentProducts,
     shopActionParams,
-    {
-      skip,
-      hook: 'useRecentProducts',
-    }
+    {skip}
   )
 
   const products = useMemo(() => {

package/src/hooks/user/useRecentShops.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -23,21 +21,15 @@ export const useRecentShops = (
   const {getRecentShops} = useShopActions()
   const {skip = false, ...restParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['recentShops', restParams],
     getRecentShops,
     restParams,
-    {
-      skip,
-      hook: 'useRecentShops',
-    }
+    {skip}
   )
 
-  const shops = useMemo(() => {
-    return data ?? null
-  }, [data])
-
   return {
     ...rest,
-    shops,
+    shops: data,
   }
 }

package/src/hooks/user/useSavedProducts.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -26,21 +24,15 @@ export const useSavedProducts = (
   const {getSavedProducts} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['savedProducts', shopActionParams],
     getSavedProducts,
     shopActionParams,
-    {
-      skip,
-      hook: 'useSavedProducts',
-    }
+    {skip}
   )
 
-  const products = useMemo(() => {
-    return data ?? null
-  }, [data])
-
   return {
     ...rest,
-    products,
+    products: data,
   }
 }

package/src/internal/components/product-review-stars.test.tsx

@@ -0,0 +1,90 @@
+import {createRef} from 'react'
+
+import {describe, expect, it} from 'vitest'
+
+import {render, screen} from '../../test-utils'
+
+import {ProductReviewStars} from './product-review-stars'
+
+describe('ProductReviewStars', () => {
+  it('renders without crashing', () => {
+    const {container} = render(
+      <ProductReviewStars averageRating={3.5} reviewCount={100} />
+    )
+
+    // Component should render something
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  describe('review count display', () => {
+    it('displays review count', () => {
+      render(<ProductReviewStars averageRating={4} reviewCount={42} />)
+      expect(screen.getByText('(42)')).toBeInTheDocument()
+    })
+
+    it('formats large numbers as K', () => {
+      render(<ProductReviewStars averageRating={4} reviewCount={1500} />)
+      expect(screen.getByText('(1K)')).toBeInTheDocument()
+    })
+
+    it('formats millions as M', () => {
+      render(<ProductReviewStars averageRating={4} reviewCount={1500000} />)
+      expect(screen.getByText('(1.5M)')).toBeInTheDocument()
+    })
+
+    it('does not display review count when zero', () => {
+      render(<ProductReviewStars averageRating={4} reviewCount={0} />)
+      expect(screen.queryByText('(0)')).not.toBeInTheDocument()
+    })
+
+    it('does not display review count when null', () => {
+      render(<ProductReviewStars averageRating={4} reviewCount={null} />)
+      expect(screen.queryByText(/\(\d+\)/)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('forwards ref to container element', () => {
+      const ref = createRef<HTMLDivElement>()
+      render(
+        <ProductReviewStars ref={ref} averageRating={4} reviewCount={100} />
+      )
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('accepts aria-label for accessibility', () => {
+      render(
+        <ProductReviewStars
+          averageRating={4.5}
+          reviewCount={100}
+          aria-label="4.5 out of 5 stars, 100 reviews"
+          data-testid="rating-stars"
+        />
+      )
+
+      const element = screen.getByTestId('rating-stars')
+      expect(element).toHaveAttribute(
+        'aria-label',
+        '4.5 out of 5 stars, 100 reviews'
+      )
+    })
+  })
+
+  describe('edge cases', () => {
+    it('handles negative ratings gracefully', () => {
+      // Should not crash with invalid input
+      const {container} = render(
+        <ProductReviewStars averageRating={-1} reviewCount={10} />
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('handles very large ratings gracefully', () => {
+      // Should not crash with invalid input
+      const {container} = render(
+        <ProductReviewStars averageRating={10} reviewCount={10} />
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+})