@shopify/shop-minis-react 0.3.2 → 0.3.4

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

@@ -0,0 +1,113 @@
+import * as React from 'react'
+
+import {Star, StarHalf} from 'lucide-react'
+
+import {cn} from '../../lib/utils'
+import {formatReviewCount, normalizeRating} from '../../utils/merchant-card'
+
+const starSizeClasses = {
+  sm: 'h-3 w-3',
+  md: 'h-4 w-4',
+  lg: 'h-5 w-5',
+} as const
+
+const textSizeClasses = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+} as const
+
+export interface ProductReviewStarsProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Average rating value (0-5)
+   */
+  averageRating: number
+  /**
+   * Total number of reviews
+   */
+  reviewCount?: number | null
+  /**
+   * Custom color for filled star
+   * @default 'var(--grayscale-d100)' (black)
+   */
+  filledStarColor?: string
+  /**
+   * Custom color for empty star
+   * @default 'var(--grayscale-l20)' (light gray)
+   */
+  emptyStarColor?: string
+  /**
+   * Size of the stars
+   * @default 'sm'
+   */
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export const ProductReviewStars = React.forwardRef<
+  HTMLDivElement,
+  ProductReviewStarsProps
+>(
+  (
+    {
+      averageRating,
+      reviewCount,
+      size = 'sm',
+      filledStarColor = 'var(--grayscale-d100)',
+      emptyStarColor = 'var(--grayscale-l20)',
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const normalizedRating = Math.min(5, normalizeRating(averageRating))
+    const filledStars = Math.floor(normalizedRating)
+    const remainder = normalizedRating % 1
+
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center', className)}
+        data-slot="product-review-stars"
+        {...props}
+      >
+        <div className="relative">
+          <div className="flex">
+            {Array.from({length: 5}, (_, i) => (
+              <Star
+                key={i}
+                className={cn(starSizeClasses[size])}
+                style={{fill: emptyStarColor}}
+                strokeWidth={0}
+              />
+            ))}
+          </div>
+          <div className="flex absolute top-0 left-0">
+            {Array.from({length: filledStars}, (_, i) => (
+              <Star
+                key={i}
+                className={cn(starSizeClasses[size])}
+                style={{fill: filledStarColor}}
+                strokeWidth={0}
+              />
+            ))}
+            {remainder >= 0.5 && (
+              <StarHalf
+                className={cn(starSizeClasses[size])}
+                style={{fill: filledStarColor}}
+                strokeWidth={0}
+              />
+            )}
+          </div>
+        </div>
+        {reviewCount && (
+          <span className={cn(textSizeClasses[size], 'ml-1')}>
+            ({formatReviewCount(reviewCount)})
+          </span>
+        )}
+      </div>
+    )
+  }
+)
+
+ProductReviewStars.displayName = 'ProductReviewStars'

package/src/mocks.ts

@@ -378,7 +378,13 @@ export function makeMockActions(): ShopActions {
       pageInfo: createPagination(),
     },
     getProductSearch: {
-      data: [createProduct('search-3', 'Search Product 3', '39.99')],
+      data: [
+        createProduct('search-1', 'Search Product 1', '39.99'),
+        createProduct('search-2', 'Search Product 2', '19.99'),
+        createProduct('search-3', 'Search Product 3', '29.99'),
+        createProduct('search-4', 'Search Product 4', '49.99'),
+        createProduct('search-5', 'Search Product 5', '9.99'),
+      ],
       pageInfo: createPagination(),
     },
     getProducts: {data: [createProduct('prod-2', 'Product 2', '19.99')]},
@@ -407,7 +413,9 @@ export function makeMockActions(): ShopActions {
       ],
       pageInfo: createPagination(),
     },
-    getShop: {data: createShop('shop-1', 'Sample Shop')},
+    getShop: {
+      data: createShop('shop-1', 'Sample Shop', {featuredImagesLimit: 4}),
+    },
     getRecentShops: {
       data: [createShop('recent-shop-1', 'Recent Shop 1')],
       pageInfo: createPagination(),

package/src/providers/ImagePickerProvider.test.tsx

@@ -160,9 +160,7 @@ describe('ImagePickerProvider', () => {
         configurable: true,
       })
 
-      await act(async () => {
-        fireEvent.change(galleryInput)
-      })
+      fireEvent.change(galleryInput)
 
       // Check that the promise resolved with the file
       await vi.waitFor(() => {
@@ -427,9 +425,7 @@ describe('ImagePickerProvider', () => {
         configurable: true,
       })
 
-      await act(async () => {
-        fireEvent.change(cameraInput)
-      })
+      fireEvent.change(cameraInput)
 
       await vi.waitFor(() => {
         const cameraFile = document.querySelector('[data-testid="camera-file"]')
@@ -718,9 +714,7 @@ describe('ImagePickerProvider', () => {
         configurable: true,
       })
 
-      await act(async () => {
-        fireEvent.change(galleryInput)
-      })
+      fireEvent.change(galleryInput)
 
       // Check that input value was cleared
       expect(galleryInput.value).toBe('')