@shopify/shop-minis-react 0.4.0 → 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/utils/resizeImage.test.ts

@@ -0,0 +1,314 @@
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+
+import {resizeImage} from './resizeImage'
+
+describe('resizeImage', () => {
+  let mockCanvas: any
+  let mockContext: any
+  let mockImage: any
+
+  beforeEach(() => {
+    // Mock canvas context
+    mockContext = {
+      drawImage: vi.fn(),
+    }
+
+    // Mock canvas
+    mockCanvas = {
+      width: 0,
+      height: 0,
+      getContext: vi.fn(() => mockContext),
+      toBlob: vi.fn(),
+    }
+
+    // Mock document.createElement
+    const originalCreateElement = document.createElement
+    document.createElement = vi.fn((tag: string) => {
+      if (tag === 'canvas') {
+        return mockCanvas as any
+      }
+      return originalCreateElement(tag)
+    })
+
+    // Mock URL methods
+    global.URL.createObjectURL = vi.fn(() => 'blob:mock-url')
+    global.URL.revokeObjectURL = vi.fn()
+
+    // Mock Image constructor
+    mockImage = {
+      width: 3000,
+      height: 4000,
+      onload: null as any,
+      onerror: null as any,
+      src: '',
+    }
+
+    global.Image = vi.fn(() => mockImage) as any
+  })
+
+  describe('Quality settings', () => {
+    it('returns original file for "original" quality', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      const result = await resizeImage({
+        file: originalFile,
+        quality: 'original',
+      })
+
+      expect(result).toBe(originalFile)
+      expect(global.Image).not.toHaveBeenCalled()
+      expect(document.createElement).not.toHaveBeenCalled()
+    })
+
+    it('resizes to 1080px for low quality', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      // Set up canvas toBlob to call callback
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      // Trigger image load after src is set
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      const resultPromise = resizeImage({
+        file: originalFile,
+        quality: 'low',
+      })
+
+      await new Promise(resolve => setTimeout(resolve, 10))
+
+      const result = await resultPromise
+
+      expect(result).toBeInstanceOf(File)
+      expect(result.type).toBe('image/jpeg')
+      expect(result.name).toBe('test.jpg')
+
+      // Check canvas dimensions were set correctly (maintaining aspect ratio)
+      expect(mockCanvas.width).toBe(810) // 1080 * (3000/4000)
+      expect(mockCanvas.height).toBe(1080)
+    })
+
+    it('resizes to 1600px for medium quality', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      const result = await resizeImage({
+        file: originalFile,
+        quality: 'medium',
+      })
+
+      expect(result).toBeInstanceOf(File)
+      expect(mockCanvas.width).toBe(1200) // 1600 * (3000/4000)
+      expect(mockCanvas.height).toBe(1600)
+    })
+
+    it('resizes to 2048px for high quality', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      const result = await resizeImage({
+        file: originalFile,
+        quality: 'high',
+      })
+
+      expect(result).toBeInstanceOf(File)
+      expect(mockCanvas.width).toBe(1536) // 2048 * (3000/4000)
+      expect(mockCanvas.height).toBe(2048)
+    })
+  })
+
+  describe('Custom quality', () => {
+    it('uses custom size when provided', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      const result = await resizeImage({
+        file: originalFile,
+        quality: 'low',
+        customQuality: {size: 500, compression: 0.6},
+      })
+
+      expect(result).toBeInstanceOf(File)
+      expect(mockCanvas.width).toBe(375) // 500 * (3000/4000)
+      expect(mockCanvas.height).toBe(500)
+    })
+  })
+
+  describe('Aspect ratio handling', () => {
+    it('maintains aspect ratio for landscape images', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      // Set landscape dimensions
+      mockImage.width = 4000
+      mockImage.height = 3000
+
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      await resizeImage({
+        file: originalFile,
+        quality: 'low',
+      })
+
+      expect(mockCanvas.width).toBe(1080)
+      expect(mockCanvas.height).toBe(810) // 1080 * (3000/4000)
+    })
+
+    it('does not resize if image is smaller than target size', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      // Set small dimensions
+      mockImage.width = 800
+      mockImage.height = 600
+
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      await resizeImage({
+        file: originalFile,
+        quality: 'high',
+      })
+
+      // Should maintain original dimensions
+      expect(mockCanvas.width).toBe(800)
+      expect(mockCanvas.height).toBe(600)
+    })
+  })
+
+  describe('Error handling', () => {
+    it('rejects when image fails to load', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onerror) img.onerror()
+        }, 0)
+        return img
+      }) as any
+
+      await expect(
+        resizeImage({
+          file: originalFile,
+          quality: 'medium',
+        })
+      ).rejects.toThrow('Failed to load image')
+
+      expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock-url')
+    })
+  })
+
+  describe('Resource cleanup', () => {
+    it('revokes object URL after successful resize', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      await resizeImage({
+        file: originalFile,
+        quality: 'medium',
+      })
+
+      expect(URL.createObjectURL).toHaveBeenCalledWith(originalFile)
+      expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock-url')
+    })
+
+    it('revokes object URL even when error occurs', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onerror) img.onerror()
+        }, 0)
+        return img
+      }) as any
+
+      try {
+        await resizeImage({
+          file: originalFile,
+          quality: 'medium',
+        })
+      } catch {
+        // Expected to throw
+      }
+
+      expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock-url')
+    })
+  })
+})

package/src/internal/utils/resizeImage.ts

@@ -0,0 +1,108 @@
+import type {
+  ImageQuality,
+  CustomImageQuality,
+} from '../../providers/ImagePickerProvider'
+
+interface ResizeSettings {
+  size: number
+  compression: number
+}
+
+export interface ResizeImageParams {
+  file: File
+  quality: ImageQuality
+  customQuality?: CustomImageQuality
+}
+
+const QUALITY_SETTINGS: {
+  [key in Exclude<ImageQuality, 'original'>]: ResizeSettings
+} = {
+  low: {
+    size: 1080,
+    compression: 0.7,
+  },
+  medium: {
+    size: 1600,
+    compression: 0.85,
+  },
+  high: {
+    size: 2048,
+    compression: 0.92,
+  },
+} as const
+
+export function resizeImage({
+  file,
+  quality,
+  customQuality,
+}: ResizeImageParams): Promise<File> {
+  if (quality === 'original') {
+    return Promise.resolve(file)
+  }
+
+  const defaultSettings = QUALITY_SETTINGS[quality]
+  const settings: ResizeSettings = customQuality
+    ? {
+        size: customQuality.size ?? defaultSettings.size,
+        compression: customQuality.compression ?? defaultSettings.compression,
+      }
+    : defaultSettings
+  const maxSize = settings.size
+
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    const url = URL.createObjectURL(file)
+
+    img.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error('Failed to load image'))
+    }
+
+    img.onload = () => {
+      URL.revokeObjectURL(url)
+
+      const canvas = document.createElement('canvas')
+      let width = img.width
+      let height = img.height
+
+      // Resize image dimensions maintaining aspect ratio
+      if (width > height) {
+        if (width > maxSize) {
+          height *= maxSize / width
+          width = maxSize
+        }
+      } else if (height > maxSize) {
+        width *= maxSize / height
+        height = maxSize
+      }
+
+      canvas.width = width
+      canvas.height = height
+
+      const ctx = canvas.getContext('2d')
+      if (!ctx) {
+        reject(new Error('Failed to get canvas context'))
+        return
+      }
+      ctx.drawImage(img, 0, 0, width, height)
+
+      canvas.toBlob(
+        blob => {
+          if (!blob) {
+            reject(new Error('Failed to create blob'))
+            return
+          }
+          const resizedFile = new File([blob], file.name, {
+            type: 'image/jpeg',
+            lastModified: Date.now(),
+          })
+          resolve(resizedFile)
+        },
+        'image/jpeg',
+        settings.compression
+      )
+    }
+
+    img.src = url
+  })
+}

package/src/providers/ImagePickerProvider.test.tsx

@@ -34,6 +34,37 @@ describe('ImagePickerProvider', () => {
     mockRequestPermission.mockResolvedValue({granted: true})
     // Clear interaction reporting mock
     mockReportInteraction.mockClear()
+
+    // Mock URL.createObjectURL and URL.revokeObjectURL for jsdom
+    global.URL.createObjectURL = vi.fn(() => 'blob:mock-url')
+    global.URL.revokeObjectURL = vi.fn()
+
+    // Mock Image constructor for resizing
+    global.Image = class MockImage {
+      width = 1920
+      height = 1080
+      onload = null as any
+      onerror = null as any
+      src = ''
+
+      constructor() {
+        setTimeout(() => {
+          if (this.onload) {
+            this.onload()
+          }
+        }, 0)
+      }
+    } as any
+
+    // Mock canvas methods
+    HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
+      drawImage: vi.fn(),
+    })) as any
+
+    HTMLCanvasElement.prototype.toBlob = vi.fn(callback => {
+      const blob = new Blob(['mock'], {type: 'image/jpeg'})
+      callback(blob)
+    }) as any
   })
 
   afterEach(() => {
@@ -334,7 +365,7 @@ describe('ImagePickerProvider', () => {
           <button
             type="button"
             onClick={() =>
-              openCamera('front').catch(() => {
+              openCamera({cameraFacing: 'front'}).catch(() => {
                 // Ignore errors from cleanup
               })
             }