@shopify/shop-minis-react 0.3.4 → 0.4.1

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

@@ -0,0 +1,193 @@
+import React from 'react'
+
+import {renderHook} from '@testing-library/react'
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+
+import {useImagePicker} from './useImagePicker'
+
+import type {
+  OpenCameraParams,
+  OpenGalleryParams,
+} from '../../providers/ImagePickerProvider'
+
+// Mock the ImagePickerProvider context
+const mockOpenCamera = vi.fn()
+const mockOpenGallery = vi.fn()
+
+vi.mock('../../providers/ImagePickerProvider', () => ({
+  useImagePickerContext: () => ({
+    openCamera: mockOpenCamera,
+    openGallery: mockOpenGallery,
+  }),
+  ImagePickerProvider: ({children}: {children: React.ReactNode}) => children,
+}))
+
+describe('useImagePicker', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('openCamera', () => {
+    it('calls context openCamera with provided params', async () => {
+      const mockFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      mockOpenCamera.mockResolvedValue(mockFile)
+
+      const {result} = renderHook(() => useImagePicker())
+
+      const params: OpenCameraParams = {
+        cameraFacing: 'front',
+        quality: 'high',
+        customQuality: {size: 2000, compression: 0.9},
+      }
+
+      const file = await result.current.openCamera(params)
+
+      expect(mockOpenCamera).toHaveBeenCalledWith(params)
+      expect(file).toBe(mockFile)
+    })
+
+    it('calls context openCamera with default params when none provided', async () => {
+      const mockFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      mockOpenCamera.mockResolvedValue(mockFile)
+
+      const {result} = renderHook(() => useImagePicker())
+
+      const file = await result.current.openCamera()
+
+      expect(mockOpenCamera).toHaveBeenCalledWith({
+        cameraFacing: undefined,
+        quality: undefined,
+        customQuality: undefined,
+      })
+      expect(file).toBe(mockFile)
+    })
+
+    it('supports partial params', async () => {
+      const mockFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      mockOpenCamera.mockResolvedValue(mockFile)
+
+      const {result} = renderHook(() => useImagePicker())
+
+      const file = await result.current.openCamera({quality: 'low'})
+
+      expect(mockOpenCamera).toHaveBeenCalledWith({
+        cameraFacing: undefined,
+        quality: 'low',
+        customQuality: undefined,
+      })
+      expect(file).toBe(mockFile)
+    })
+  })
+
+  describe('openGallery', () => {
+    it('calls context openGallery with provided params', async () => {
+      const mockFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      mockOpenGallery.mockResolvedValue(mockFile)
+
+      const {result} = renderHook(() => useImagePicker())
+
+      const params: OpenGalleryParams = {
+        quality: 'medium',
+        customQuality: {size: 1500, compression: 0.8},
+      }
+
+      const file = await result.current.openGallery(params)
+
+      expect(mockOpenGallery).toHaveBeenCalledWith(params)
+      expect(file).toBe(mockFile)
+    })
+
+    it('calls context openGallery with default params when none provided', async () => {
+      const mockFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      mockOpenGallery.mockResolvedValue(mockFile)
+
+      const {result} = renderHook(() => useImagePicker())
+
+      const file = await result.current.openGallery()
+
+      expect(mockOpenGallery).toHaveBeenCalledWith({
+        quality: undefined,
+        customQuality: undefined,
+      })
+      expect(file).toBe(mockFile)
+    })
+
+    it('supports partial params', async () => {
+      const mockFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      mockOpenGallery.mockResolvedValue(mockFile)
+
+      const {result} = renderHook(() => useImagePicker())
+
+      const file = await result.current.openGallery({quality: 'original'})
+
+      expect(mockOpenGallery).toHaveBeenCalledWith({
+        quality: 'original',
+        customQuality: undefined,
+      })
+      expect(file).toBe(mockFile)
+    })
+  })
+
+  describe('Error handling', () => {
+    it('propagates errors from openCamera', async () => {
+      const error = new Error('Camera permission denied')
+      mockOpenCamera.mockRejectedValue(error)
+
+      const {result} = renderHook(() => useImagePicker())
+
+      await expect(result.current.openCamera()).rejects.toThrow(
+        'Camera permission denied'
+      )
+    })
+
+    it('propagates errors from openGallery', async () => {
+      const error = new Error('Gallery access denied')
+      mockOpenGallery.mockRejectedValue(error)
+
+      const {result} = renderHook(() => useImagePicker())
+
+      await expect(result.current.openGallery()).rejects.toThrow(
+        'Gallery access denied'
+      )
+    })
+  })
+
+  describe('Quality settings', () => {
+    it('passes through all quality options for camera', async () => {
+      const mockFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      mockOpenCamera.mockResolvedValue(mockFile)
+
+      const {result} = renderHook(() => useImagePicker())
+
+      // Test each quality setting
+      const qualities = ['low', 'medium', 'high', 'original'] as const
+
+      for (const quality of qualities) {
+        await result.current.openCamera({quality})
+        expect(mockOpenCamera).toHaveBeenLastCalledWith({
+          cameraFacing: undefined,
+          quality,
+          customQuality: undefined,
+        })
+      }
+    })
+
+    it('passes through all quality options for gallery', async () => {
+      const mockFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      mockOpenGallery.mockResolvedValue(mockFile)
+
+      const {result} = renderHook(() => useImagePicker())
+
+      // Test each quality setting
+      const qualities = ['low', 'medium', 'high', 'original'] as const
+
+      for (const quality of qualities) {
+        await result.current.openGallery({quality})
+        expect(mockOpenGallery).toHaveBeenLastCalledWith({
+          quality,
+          customQuality: undefined,
+        })
+      }
+    })
+  })
+})

package/src/hooks/util/useImagePicker.ts

@@ -1,24 +1,43 @@
+import {useCallback} from 'react'
+
 import {
-  CameraFacing,
   useImagePickerContext,
+  OpenCameraParams,
+  OpenGalleryParams,
 } from '../../providers/ImagePickerProvider'
 
 interface UseImagePickerReturns {
   /**
    * Opens the camera to take a photo.
    */
-  openCamera: (cameraFacing?: CameraFacing) => Promise<File>
+  openCamera: (params?: OpenCameraParams) => Promise<File>
   /**
    * Opens the gallery to select an image.
    */
-  openGallery: () => Promise<File>
+  openGallery: (params?: OpenGalleryParams) => Promise<File>
 }
 
 export function useImagePicker(): UseImagePickerReturns {
   const {openCamera, openGallery} = useImagePickerContext()
 
+  const openCameraWithQuality = useCallback(
+    async ({cameraFacing, quality, customQuality}: OpenCameraParams = {}) => {
+      const file = await openCamera({cameraFacing, quality, customQuality})
+      return file
+    },
+    [openCamera]
+  )
+
+  const openGalleryWithQuality = useCallback(
+    async ({quality, customQuality}: OpenGalleryParams = {}) => {
+      const file = await openGallery({quality, customQuality})
+      return file
+    },
+    [openGallery]
+  )
+
   return {
-    openCamera,
-    openGallery,
+    openCamera: openCameraWithQuality,
+    openGallery: openGalleryWithQuality,
   }
 }

package/src/internal/reactQuery/MinisQueryProvider.test.tsx

@@ -0,0 +1,38 @@
+import {QueryClient} from '@tanstack/react-query'
+import {renderHook} from '@testing-library/react'
+import {describe, expect, it} from 'vitest'
+
+import {MinisQueryProvider} from './MinisQueryProvider'
+import {useShopMinisQueryClient} from './queryClient'
+
+describe('MinisQueryProvider', () => {
+  it('provides QueryClient to children', () => {
+    const {result} = renderHook(() => useShopMinisQueryClient(), {
+      wrapper: MinisQueryProvider,
+    })
+
+    expect(result.current).toBeInstanceOf(QueryClient)
+  })
+
+  it('allows hooks to work within provider', () => {
+    const {result} = renderHook(() => useShopMinisQueryClient(), {
+      wrapper: MinisQueryProvider,
+    })
+
+    // Should not throw
+    expect(() => result.current).not.toThrow()
+  })
+
+  it('provides consistent QueryClient across renders', () => {
+    const {result, rerender} = renderHook(() => useShopMinisQueryClient(), {
+      wrapper: MinisQueryProvider,
+    })
+
+    const firstClient = result.current
+    rerender()
+    const secondClient = result.current
+
+    // Same instance across re-renders
+    expect(firstClient).toBe(secondClient)
+  })
+})

package/src/internal/reactQuery/MinisQueryProvider.tsx

@@ -0,0 +1,16 @@
+import React, {useMemo} from 'react'
+
+import {
+  createShopMinisQueryClient,
+  ShopMinisQueryClientContext,
+} from './queryClient'
+
+export function MinisQueryProvider({children}: {children: React.ReactNode}) {
+  const queryClient = useMemo(() => createShopMinisQueryClient(), [])
+
+  return (
+    <ShopMinisQueryClientContext.Provider value={queryClient}>
+      {children}
+    </ShopMinisQueryClientContext.Provider>
+  )
+}

package/src/internal/reactQuery/index.ts

@@ -0,0 +1,8 @@
+export {
+  ShopMinisQueryClientContext,
+  useShopMinisQueryClient,
+  createShopMinisQueryClient,
+} from './queryClient'
+export {MinisQueryProvider} from './MinisQueryProvider'
+export {useShopActionQuery} from './useShopActionQuery'
+export {useShopActionInfiniteQuery} from './useShopActionInfiniteQuery'

package/src/internal/reactQuery/queryClient.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+
+import {QueryClient} from '@tanstack/react-query'
+import {renderHook} from '@testing-library/react'
+import {describe, expect, it} from 'vitest'
+
+import {
+  createShopMinisQueryClient,
+  ShopMinisQueryClientContext,
+  useShopMinisQueryClient,
+} from './queryClient'
+
+describe('queryClient', () => {
+  describe('createShopMinisQueryClient', () => {
+    it('creates a QueryClient instance', () => {
+      const client = createShopMinisQueryClient()
+
+      expect(client).toBeInstanceOf(QueryClient)
+    })
+
+    it('creates isolated QueryClient instances', () => {
+      const client1 = createShopMinisQueryClient()
+      const client2 = createShopMinisQueryClient()
+
+      // Each call creates a new instance
+      expect(client1).not.toBe(client2)
+    })
+
+    it('has caching disabled by default', () => {
+      const client = createShopMinisQueryClient()
+
+      const defaults = client.getDefaultOptions()
+
+      expect(defaults.queries?.staleTime).toBe(0)
+      expect(defaults.queries?.gcTime).toBe(0)
+    })
+
+    it('has retry and refetchOnWindowFocus configured', () => {
+      const client = createShopMinisQueryClient()
+
+      const defaults = client.getDefaultOptions()
+
+      expect(defaults.queries?.retry).toBe(1)
+      expect(defaults.queries?.refetchOnWindowFocus).toBe(false)
+    })
+  })
+
+  describe('useShopMinisQueryClient', () => {
+    it('throws error when used outside provider', () => {
+      expect(() => {
+        renderHook(() => useShopMinisQueryClient())
+      }).toThrow(
+        'Shop Minis hooks must be used within <MinisContainer> or <MinisQueryProvider>. ' +
+          'Wrap your component tree with one of these providers.'
+      )
+    })
+
+    it('returns QueryClient when used within provider', () => {
+      const client = createShopMinisQueryClient()
+      const wrapper = ({children}: {children: React.ReactNode}) => (
+        <ShopMinisQueryClientContext.Provider value={client}>
+          {children}
+        </ShopMinisQueryClientContext.Provider>
+      )
+
+      const {result} = renderHook(() => useShopMinisQueryClient(), {wrapper})
+
+      expect(result.current).toBe(client)
+      expect(result.current).toBeInstanceOf(QueryClient)
+    })
+
+    it('returns the same client instance across re-renders', () => {
+      const client = createShopMinisQueryClient()
+      const wrapper = ({children}: {children: React.ReactNode}) => (
+        <ShopMinisQueryClientContext.Provider value={client}>
+          {children}
+        </ShopMinisQueryClientContext.Provider>
+      )
+
+      const {result, rerender} = renderHook(() => useShopMinisQueryClient(), {
+        wrapper,
+      })
+
+      const firstClient = result.current
+      rerender()
+      const secondClient = result.current
+
+      expect(firstClient).toBe(secondClient)
+    })
+  })
+})

package/src/internal/reactQuery/queryClient.ts

@@ -0,0 +1,43 @@
+import {createContext, useContext} from 'react'
+
+import {QueryClient} from '@tanstack/react-query'
+
+/**
+ * Custom QueryClient context for Shop Minis SDK
+ * This ensures our SDK always uses its own QueryClient,
+ * even if the parent app has their own QueryClientProvider
+ */
+export const ShopMinisQueryClientContext = createContext<QueryClient | null>(
+  null
+)
+
+export function useShopMinisQueryClient(): QueryClient {
+  const client = useContext(ShopMinisQueryClientContext)
+  if (!client) {
+    throw new Error(
+      'Shop Minis hooks must be used within <MinisContainer> or <MinisQueryProvider>. ' +
+        'Wrap your component tree with one of these providers.'
+    )
+  }
+  return client
+}
+
+/**
+ * Create a QueryClient instance for Shop Minis SDK
+ * Isolated from any parent app's QueryClient
+ *
+ * Caching is disabled by default since Apollo provides the cache layer.
+ * React Query only provides request deduplication and state management.
+ */
+export function createShopMinisQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 0, // Data is immediately stale
+        gcTime: 0, // Don't keep in cache after component unmounts
+        retry: 1,
+        refetchOnWindowFocus: false,
+      },
+    },
+  })
+}