@shopify/shop-minis-react 0.0.19 → 0.0.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -38,7 +38,7 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.0.6",
+    "@shopify/shop-minis-platform": "0.0.7",
     "@tailwindcss/vite": "4.1.8",
     "@types/url-parse": "1.4.9",
     "@vitejs/plugin-react": "4.5.1",
@@ -51,8 +51,10 @@
     "motion": "12.17.3",
     "next-themes": "0.4.6",
     "radix-ui": "1.4.2",
+    "react-intersection-observer": "^9.13.1",
     "react-resizable-panels": "3.0.2",
     "react-router": "^7.7.0",
+    "react-window": "^1.8.11",
     "sonner": "2.0.5",
     "tailwind-merge": "2.6.0",
     "tailwindcss": "4.1.8",
@@ -68,7 +70,8 @@
     "@types/node": "^20.12.1",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.2",
-    "eslint": "^9.31.0",
+    "@types/react-window": "^1.8.8",
+    "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^9.0.16",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -102,6 +105,8 @@
     "type-check": "tsc --noEmit",
     "clean": "rm -rf dist",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "lint": "eslint . --format codeframe --cache",
+    "lint:fix": "eslint . --format codeframe --cache --fix"
   }
 }

package/src/components/MinisContainer.tsx

@@ -1,7 +1,10 @@
 import React, {useEffect, useState} from 'react'
 
+import {injectMocks} from '../mocks'
 import {ImagePickerProvider} from '../providers/ImagePickerProvider'
 
+injectMocks()
+
 export function MinisContainer({children}: {children: React.ReactNode}) {
   const [isSDKReady, setIsSDKReady] = useState(false)
 
@@ -42,7 +45,7 @@ export function MinisContainer({children}: {children: React.ReactNode}) {
 
     // Cleanup
     return () => {
-      // clearInterval(pollInterval);
+      clearInterval(pollInterval)
       window.removeEventListener('message', handleSDKReady)
       document.removeEventListener('message', handleSDKReady)
     }

package/src/components/atoms/list.tsx

@@ -0,0 +1,101 @@
+import {ComponentType, useCallback} from 'react'
+
+import {
+  VariableSizeList as _VariableSizeList,
+  VariableSizeListProps,
+} from 'react-window'
+
+import {cn} from '../../lib/utils'
+import '../../styles/utilities.css'
+
+import {Pagination} from './pagination'
+
+const VariableSizeList =
+  _VariableSizeList as unknown as ComponentType<VariableSizeListProps>
+
+interface Props<T = any>
+  extends Omit<
+    VariableSizeListProps<T>,
+    'children' | 'itemCount' | 'width' | 'itemSize' | 'direction'
+  > {
+  items: T[]
+  renderItem: (item: T, index: number) => React.ReactNode
+  itemSizeForRow: (index: number) => number
+  showScrollbar?: boolean
+  header?: React.ReactNode
+  headerHeight?: number
+  fetchMore?: () => void
+}
+
+export function List<T = any>({
+  items,
+  height,
+  renderItem,
+  className,
+  showScrollbar = false,
+  header,
+  headerHeight,
+  itemSizeForRow,
+  fetchMore,
+  overscanCount,
+  ...listProps
+}: Props<T>) {
+  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>
+        )
+      }
+
+      // 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>
+        )
+      }
+
+      return <div style={style}>{renderItem(items[index], index)}</div>
+    },
+    [items, renderItem, header, fetchMore, headerHeight]
+  )
+
+  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)
+      }
+
+      return itemSizeForRow(index)
+    },
+    [itemSizeForRow, header, headerHeight]
+  )
+
+  const classNames = cn(showScrollbar ? undefined : 'no-scrollbars', className)
+
+  return (
+    <VariableSizeList
+      className={classNames}
+      height={height}
+      direction="vertical"
+      width="100%"
+      itemCount={items.length}
+      overscanCount={overscanCount}
+      itemSize={getItemSize}
+      {...listProps}
+    >
+      {rowRenderer}
+    </VariableSizeList>
+  )
+}

package/src/components/atoms/pagination.tsx

@@ -0,0 +1,19 @@
+import {Skeleton} from '../ui/skeleton'
+
+import {TrackingPixel} from './tracking-pixel'
+
+interface Props {
+  loadingComponent?: React.ReactNode
+  isFetchingMore?: boolean
+  fetchMore: () => void
+}
+
+export function Pagination({loadingComponent, fetchMore}: Props) {
+  const loadingPlaceholder = loadingComponent ?? (
+    <Skeleton className="h-10 w-full p-8" />
+  )
+
+  return (
+    <TrackingPixel onImpression={fetchMore}>{loadingPlaceholder}</TrackingPixel>
+  )
+}

package/src/components/atoms/tracking-pixel.tsx

@@ -0,0 +1,40 @@
+import {useCallback} from 'react'
+
+import {InView} from 'react-intersection-observer'
+
+interface Props {
+  children: React.ReactNode
+  onImpression?: () => void
+  triggerOnce?: boolean
+  threshold?: number
+  className?: string
+}
+
+export const TrackingPixel = ({
+  children,
+  onImpression,
+  triggerOnce = false,
+  threshold,
+  className,
+}: Props) => {
+  const onChange = useCallback(
+    (inView: boolean) => {
+      if (inView) {
+        onImpression?.()
+      }
+    },
+    [onImpression]
+  )
+
+  return (
+    <InView
+      as="div"
+      onChange={onChange}
+      triggerOnce={triggerOnce}
+      className={className}
+      threshold={threshold}
+    >
+      {children}
+    </InView>
+  )
+}

package/src/components/index.ts

@@ -15,11 +15,13 @@ export * from './atoms/icon-button'
 export * from './atoms/thumbhash-image'
 export * from './atoms/touchable'
 export * from './atoms/alert-dialog'
+export * from './atoms/list'
 
 export * from './ui/accordion'
 export * from './ui/alert'
 export * from './ui/alert-dialog'
 export * from './ui/avatar'
+export * from './ui/badge'
 export * from './ui/card'
 export * from './ui/carousel'
 export * from './ui/checkbox'

package/src/hooks/navigation/useCloseMini.example.tsx

@@ -3,5 +3,5 @@ import {useCloseMini, Button} from '@shopify/shop-minis-react'
 export function Example() {
   const {closeMini} = useCloseMini()
 
-  return <Button onPress={closeMini} text="Close Mini" />
+  return <Button onClick={closeMini}>Close Mini</Button>
 }

package/src/hooks/navigation/useShopNavigation.example.tsx

@@ -7,23 +7,26 @@ export default function MyComponent() {
   return (
     <>
       <Button
-        onPress={() =>
+        onClick={() =>
           navigateToProduct({productId: 'gid://shopify/Product/123'})
         }
-        text="View Product"
-      />
+      >
+        View Product
+      </Button>
       <Button
-        onPress={() =>
+        onClick={() =>
           navigateToShop({
             shopId: 'gid://shopify/Shop/123',
           })
         }
-        text="Go to Shop"
-      />
+      >
+        Go to Shop
+      </Button>
       <Button
-        onPress={() => navigateToOrder({orderId: 'gid://shopify/Order/123'})}
-        text="View Order"
-      />
+        onClick={() => navigateToOrder({orderId: 'gid://shopify/Order/123'})}
+      >
+        View Order
+      </Button>
     </>
   )
 }

package/src/hooks/product/useProductListActions.example.tsx

@@ -11,25 +11,26 @@ export default function MyComponent() {
 
   return (
     <>
+      <Button onClick={() => addProductList({name: 'My product list'})}>
+        Add product list
+      </Button>
       <Button
-        onPress={() => addProductList({name: 'My product list'})}
-        text="Add product list"
-      />
+        onClick={() => removeProductList({id: 'gid://shopapp/ProductList/123'})}
+      >
+        Remove product list
+      </Button>
       <Button
-        onPress={() => removeProductList({id: 'gid://shopapp/ProductList/123'})}
-        text="Remove product list"
-      />
-      <Button
-        onPress={() =>
+        onClick={() =>
           renameProductList({
             id: 'gid://shopapp/ProductList/123',
             name: 'My renamed product list',
           })
         }
-        text="Rename product list"
-      />
+      >
+        Rename product list
+      </Button>
       <Button
-        onPress={() =>
+        onClick={() =>
           addProductListItem({
             shopId: 'gid://shopify/Shop/42',
             productId: 'gid://shopify/Product/123',
@@ -38,10 +39,11 @@ export default function MyComponent() {
             publicListId: 'abc123',
           })
         }
-        text="Add product to list"
-      />
+      >
+        Add product to list
+      </Button>
       <Button
-        onPress={() =>
+        onClick={() =>
           removeProductListItem({
             shopId: 'gid://shopify/Shop/42',
             productId: 'gid://shopify/Product/123',
@@ -50,8 +52,9 @@ export default function MyComponent() {
             publicListId: 'abc123',
           })
         }
-        text="Remove product from list"
-      />
+      >
+        Remove product from list
+      </Button>
     </>
   )
 }

package/src/hooks/shop/useShopCartActions.example.tsx

@@ -21,8 +21,8 @@ export default function MyComponent() {
 
   return (
     <>
-      <Button text="Add to cart" onPress={handleAddToCart} />
-      <Button text="Buy now" onPress={handleBuyNow} />
+      <Button onClick={handleAddToCart}>Add to cart</Button>
+      <Button onClick={handleBuyNow}>Buy now</Button>
     </>
   )
 }

package/src/hooks/storage/useImageUpload.example.tsx

@@ -16,5 +16,5 @@ export default function MyComponent() {
     console.log('Uploaded image:', result[0])
   }, [uploadImage])
 
-  return <Button onPress={handleUpload} text="Upload image" />
+  return <Button onClick={handleUpload}>Upload image</Button>
 }

package/src/hooks/storage/useImageUpload.ts

@@ -1,7 +1,8 @@
 import {useCallback} from 'react'
 
 import {useShopActions} from '../../internal/useShopActions'
-import {UploadTarget} from '../../types'
+
+import type {UploadTarget} from '@shopify/shop-minis-platform/actions'
 
 export interface UploadImageParams {
   /**
@@ -45,7 +46,7 @@ const uploadFileToGCS = async (
   target: UploadTarget
 ) => {
   const formData = new FormData()
-  target.parameters.forEach(({name, value}) => {
+  target.parameters.forEach(({name, value}: {name: string; value: string}) => {
     formData.append(name, value)
   })
   // Append the actual file data last

package/src/hooks/user/useFollowedShopsActions.example.tsx

@@ -5,14 +5,12 @@ export default function MyComponent() {
 
   return (
     <>
-      <Button
-        onPress={() => followShop({shopId: 'gid://shopify/Shop/123'})}
-        text="Follow shop"
-      />
-      <Button
-        onPress={() => unfollowShop({shopId: 'gid://shopify/Shop/123'})}
-        text="Unfollow shop"
-      />
+      <Button onClick={() => followShop({shopId: 'gid://shopify/Shop/123'})}>
+        Follow shop
+      </Button>
+      <Button onClick={() => unfollowShop({shopId: 'gid://shopify/Shop/123'})}>
+        Unfollow shop
+      </Button>
     </>
   )
 }

package/src/hooks/user/useSavedProductsActions.example.tsx

@@ -6,25 +6,27 @@ export default function MyComponent() {
   return (
     <>
       <Button
-        onPress={() =>
+        onClick={() =>
           saveProduct({
             productId: 'gid://shopify/Product/123',
             productVariantId: 'gid://shopify/ProductVariant/456',
             shopId: 'gid://shopify/Shop/42',
           })
         }
-        text="Save product"
-      />
+      >
+        Save product
+      </Button>
       <Button
-        onPress={() =>
+        onClick={() =>
           unsaveProduct({
             productId: 'gid://shopify/Product/123',
             productVariantId: 'gid://shopify/ProductVariant/456',
             shopId: 'gid://shopify/Shop/42',
           })
         }
-        text="Unsave product"
-      />
+      >
+        Unsave product
+      </Button>
     </>
   )
 }

package/src/hooks/util/useErrorScreen.example.tsx

@@ -8,9 +8,8 @@ export default function MyComponent() {
   const handleError = useCallback(() => {
     showErrorScreen({
       message: 'Something went wrong',
-      title: 'Error',
     })
   }, [showErrorScreen])
 
-  return <Button onPress={handleError} text="Show error screen" />
+  return <Button onClick={handleError}>Show error screen</Button>
 }

package/src/hooks/util/useErrorScreen.ts

@@ -1,5 +1,6 @@
+import {ShopActions} from '@shopify/shop-minis-platform/actions'
+
 import {useShopActions} from '../../internal/useShopActions'
-import {ShopActions} from '../../types'
 
 interface UseErrorScreenReturns {
   /**

package/src/hooks/util/useErrorToast.example.tsx

@@ -11,5 +11,5 @@ export default function MyComponent() {
     })
   }, [showErrorToast])
 
-  return <Button onPress={handleError} text="Show error toast" />
+  return <Button onClick={handleError}>Show error toast</Button>
 }

package/src/hooks/util/useErrorToast.ts

@@ -1,5 +1,6 @@
+import {ShopActions} from '@shopify/shop-minis-platform/actions'
+
 import {useShopActions} from '../../internal/useShopActions'
-import {ShopActions} from '../../types'
 
 interface UseErrorToastReturns {
   /**

package/src/hooks/util/useImagePicker.example.tsx

@@ -1,9 +1,7 @@
 import React, {useState} from 'react'
 
-import {Camera, Image} from 'lucide-react'
-
+import {Button} from '../../components/atoms/button'
 import {Alert, AlertDescription, AlertTitle} from '../../components/ui/alert'
-import {Button} from '../../components/ui/button'
 import {
   Card,
   CardContent,
@@ -16,14 +14,12 @@ import {useImagePicker} from './useImagePicker'
 export const UseImagePickerExample = () => {
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
-  const {openCamera, openGallery, ImagePickerInputs} = useImagePicker({
-    cameraFacing: 'user',
-  })
+  const {openCamera, openGallery} = useImagePicker()
 
   const handleCameraCapture = async () => {
     try {
       setError(null)
-      const file = await openCamera()
+      const file = await openCamera('front')
       const url = URL.createObjectURL(file)
       setSelectedImage(url)
     } catch (err) {
@@ -48,16 +44,12 @@ export const UseImagePickerExample = () => {
         <CardTitle>Image Picker Example</CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
-        <ImagePickerInputs />
-
         <div className="flex gap-2">
-          <Button onClick={handleCameraCapture} variant="primary">
-            <Camera className="mr-2 h-4 w-4" />
+          <Button onClick={handleCameraCapture} variant="default">
             Open Camera
           </Button>
 
           <Button onClick={handleGallerySelect} variant="secondary">
-            <Image className="mr-2 h-4 w-4" />
             Open Gallery
           </Button>
         </div>

package/src/index.css

@@ -4,6 +4,7 @@
 @import './styles/theme.css';
 @import './styles/globals.css';
 @import './styles/animations.css';
+@import './styles/utilities.css';
 
 /* When consumed as npm package, this path resolves from the consuming app's location */
 @source '../node_modules/@shopify/shop-minis-react/src';

package/src/internal/useShopActions.ts

@@ -1,4 +1,4 @@
-import {ShopActions} from '../types'
+import {ShopActions} from '@shopify/shop-minis-platform/actions'
 
 export function useShopActions(): ShopActions {
   return window.minisSDK

package/src/internal/useShopActionsDataFetching.ts

@@ -41,13 +41,12 @@ export const useShopActionsDataFetching = <
         validator?.(dataToValidate)
         return null
       } catch (err) {
-        return (
-          err ??
-          new MiniError({
-            hook,
-            message: 'Validation failed',
-          })
-        )
+        if (err instanceof Error) return err
+
+        return new MiniError({
+          hook,
+          message: 'Validation failed',
+        })
       }
     },
     [validator, hook]

package/src/internal/useShopActionsPaginatedDataFetching.ts

@@ -1,11 +1,8 @@
 import {useCallback, useEffect, useMemo, useState} from 'react'
 
-import {
-  DataHookFetchPolicy,
-  PaginatedDataHookReturnsBase,
-  PaginationInfo,
-  ShopAction,
-} from '../types'
+import {ShopAction, PaginationInfo} from '@shopify/shop-minis-platform/actions'
+
+import {DataHookFetchPolicy, PaginatedDataHookReturnsBase} from '../types'
 import {formatError, MiniError} from '../utils/errors'
 
 export interface ShopActionsDataFetchingResult<S>

package/src/mocks.ts

@@ -288,15 +288,27 @@ function makeMockActions(): ShopActions {
   return mock as ShopActions
 }
 
+// Detect if running on a mobile device
+const isMobile = (): boolean => {
+  const userAgent = navigator.userAgent.toLowerCase()
+  const isIOS = /iphone|ipad|ipod/.test(userAgent)
+  const isAndroid = /android/.test(userAgent)
+
+  return isIOS || isAndroid
+}
+
 export const injectMocks = () => {
-  window.minisSDK = makeMockActions()
-  window.minisParams = {
-    handle: 'mock-handle',
-    initialUrl: '/mock-initial-url',
-    platform: 'ios',
+  // Only inject mocks if we aren't on a mobile device
+  if (isMobile()) {
+    return
   }
-}
 
-if (!window.minisSDK) {
-  injectMocks()
+  if (!window.minisSDK) {
+    window.minisSDK = makeMockActions()
+    window.minisParams = {
+      handle: 'mock-handle',
+      initialUrl: '/mock-initial-url',
+      platform: 'web',
+    }
+  }
 }