npm - @shopify/shop-minis-react - Versions diffs - 0.4.0 → 0.4.2 - Mend

@shopify/shop-minis-react 0.4.0 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/providers/ImagePickerProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImagePickerProvider.js","sources":["../../src/providers/ImagePickerProvider.tsx"],"sourcesContent":["import React, {\n createContext,\n useContext,\n useRef,\n useCallback,\n useEffect,\n useMemo,\n} from 'react'\n\nimport {useRequestPermissions} from '../hooks/util/useRequestPermissions'\nimport {useReportInteraction} from '../internal/useReportInteraction'\n\nexport type CameraFacing = 'front' \| 'back'\n\ninterface ImagePickerContextValue {\n openCamera: (cameraFacing?: CameraFacing) => Promise<File>\n openGallery: () => Promise<File>\n}\n\nconst ImagePickerContext = createContext<ImagePickerContextValue \| null>(null)\n\nexport function useImagePickerContext() {\n const context = useContext(ImagePickerContext)\n if (!context) {\n throw new Error(\n 'useImagePickerContext must be used within an ImagePickerProvider'\n )\n }\n return context\n}\n\ninterface ImagePickerProviderProps {\n children: React.ReactNode\n}\n\nexport function ImagePickerProvider({children}: ImagePickerProviderProps) {\n const galleryInputRef = useRef<HTMLInputElement>(null)\n const frontCameraInputRef = useRef<HTMLInputElement>(null)\n const backCameraInputRef = useRef<HTMLInputElement>(null)\n const resolveRef = useRef<((file: File) => void) \| null>(null)\n const rejectRef = useRef<((reason: Error) => void) \| null>(null)\n const activeCancelHandlerRef = useRef<{\n input: HTMLInputElement\n handler: () => void\n } \| null>(null)\n const activeOperationRef = useRef<'gallery' \| 'camera' \| null>(null)\n\n const {requestPermission} = useRequestPermissions()\n const {reportInteraction} = useReportInteraction()\n\n const cleanupCancelHandler = useCallback(() => {\n if (activeCancelHandlerRef.current) {\n const {input, handler} = activeCancelHandlerRef.current\n input.removeEventListener('cancel', handler)\n activeCancelHandlerRef.current = null\n }\n }, [])\n\n const rejectPendingPromise = useCallback(() => {\n if (rejectRef.current) {\n const error = new Error(\n 'New file picker opened before previous completed'\n )\n if (activeOperationRef.current === 'gallery') {\n reportInteraction({\n interactionType: 'image_picker_error',\n interactionValue: error.message,\n })\n } else if (activeOperationRef.current === 'camera') {\n reportInteraction({\n interactionType: 'camera_error',\n interactionValue: error.message,\n })\n }\n\n rejectRef.current(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n }\n }, [reportInteraction])\n\n const handleFileChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const file = event.target.files?.[0]\n\n if (file && resolveRef.current) {\n // Report success based on the active operation\n if (activeOperationRef.current === 'gallery') {\n reportInteraction({\n interactionType: 'image_picker_success',\n })\n } else if (activeOperationRef.current === 'camera') {\n reportInteraction({\n interactionType: 'camera_success',\n })\n }\n\n resolveRef.current(file)\n\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n\n cleanupCancelHandler()\n }\n\n event.target.value = ''\n },\n [cleanupCancelHandler, reportInteraction]\n )\n\n const openGallery = useCallback(() => {\n return new Promise<File>((resolve, reject) => {\n rejectPendingPromise()\n cleanupCancelHandler()\n\n resolveRef.current = resolve\n rejectRef.current = reject\n activeOperationRef.current = 'gallery'\n\n const input = galleryInputRef.current\n\n if (!input) {\n const error = new Error('Gallery input not found')\n reportInteraction({\n interactionType: 'image_picker_error',\n interactionValue: error.message,\n })\n reject(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n return\n }\n\n const handleCancel = () => {\n if (rejectRef.current) {\n const error = new Error('User cancelled file selection')\n reportInteraction({\n interactionType: 'image_picker_error',\n interactionValue: error.message,\n })\n rejectRef.current(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n }\n cleanupCancelHandler()\n }\n\n input.addEventListener('cancel', handleCancel)\n activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n reportInteraction({\n interactionType: 'image_picker_open',\n })\n\n requestPermission({permission: 'CAMERA'})\n .then(() => {\n // This will show both Camera and Gallery\n input.click()\n })\n .catch(() => {\n // Show only Gallery\n input.click()\n })\n })\n }, [\n rejectPendingPromise,\n cleanupCancelHandler,\n requestPermission,\n reportInteraction,\n ])\n\n const openCamera = useCallback(\n (cameraFacing: CameraFacing = 'back') => {\n return new Promise<File>((resolve, reject) => {\n rejectPendingPromise()\n cleanupCancelHandler()\n\n resolveRef.current = resolve\n rejectRef.current = reject\n activeOperationRef.current = 'camera'\n\n const input =\n cameraFacing === 'front'\n ? frontCameraInputRef.current\n : backCameraInputRef.current\n\n if (!input) {\n const error = new Error('Camera input not found')\n reportInteraction({\n interactionType: 'camera_error',\n interactionValue: error.message,\n })\n reject(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n return\n }\n\n const handleCancel = () => {\n if (rejectRef.current) {\n const error = new Error('User cancelled camera')\n reportInteraction({\n interactionType: 'camera_error',\n interactionValue: error.message,\n })\n rejectRef.current(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n }\n cleanupCancelHandler()\n }\n\n input.addEventListener('cancel', handleCancel)\n activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n reportInteraction({\n interactionType: 'camera_open',\n })\n\n requestPermission({permission: 'CAMERA'})\n .then(({granted}) => {\n if (granted) {\n input.click()\n } else {\n const error = new Error('Camera permission not granted')\n reportInteraction({\n interactionType: 'camera_error',\n interactionValue: error.message,\n })\n reject(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n }\n })\n .catch(() => {\n const error = new Error('Camera permission not granted')\n reject(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n })\n })\n },\n [\n rejectPendingPromise,\n cleanupCancelHandler,\n requestPermission,\n reportInteraction,\n ]\n )\n\n useEffect(() => {\n return () => {\n rejectPendingPromise()\n cleanupCancelHandler()\n }\n }, [rejectPendingPromise, cleanupCancelHandler])\n\n const contextValue: ImagePickerContextValue = useMemo(\n () => ({\n openCamera,\n openGallery,\n }),\n [openCamera, openGallery]\n )\n\n return (\n <ImagePickerContext.Provider value={contextValue}>\n {children}\n <input\n ref={galleryInputRef}\n type=\"file\"\n accept=\"image/\"\n onChange={handleFileChange}\n style={{display: 'none'}}\n aria-hidden=\"true\"\n />\n <input\n ref={frontCameraInputRef}\n type=\"file\"\n accept=\"image/\"\n capture=\"user\"\n onChange={handleFileChange}\n style={{display: 'none'}}\n aria-hidden=\"true\"\n />\n <input\n ref={backCameraInputRef}\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n onChange={handleFileChange}\n style={{display: 'none'}}\n aria-hidden=\"true\"\n />\n </ImagePickerContext.Provider>\n )\n}\n"],"names":["ImagePickerContext","createContext","useImagePickerContext","context","useContext","ImagePickerProvider","children","galleryInputRef","useRef","frontCameraInputRef","backCameraInputRef","resolveRef","rejectRef","activeCancelHandlerRef","activeOperationRef","requestPermission","useRequestPermissions","reportInteraction","useReportInteraction","cleanupCancelHandler","useCallback","input","handler","rejectPendingPromise","error","handleFileChange","event","file","openGallery","resolve","reject","handleCancel","openCamera","cameraFacing","granted","useEffect","contextValue","useMemo","jsxs","jsx"],"mappings":";;;;AAmBA,MAAMA,IAAqBC,EAA8C,IAAI;AAEtE,SAASC,IAAwB;AAChC,QAAAC,IAAUC,EAAWJ,CAAkB;AAC7C,MAAI,CAACG;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAEK,SAAAA;AACT;AAMgB,SAAAE,EAAoB,EAAC,UAAAC,KAAqC;AAClE,QAAAC,IAAkBC,EAAyB,IAAI,GAC/CC,IAAsBD,EAAyB,IAAI,GACnDE,IAAqBF,EAAyB,IAAI,GAClDG,IAAaH,EAAsC,IAAI,GACvDI,IAAYJ,EAAyC,IAAI,GACzDK,IAAyBL,EAGrB,IAAI,GACRM,IAAqBN,EAAoC,IAAI,GAE7D,EAAC,mBAAAO,EAAiB,IAAIC,EAAsB,GAC5C,EAAC,mBAAAC,EAAiB,IAAIC,EAAqB,GAE3CC,IAAuBC,EAAY,MAAM;AAC7C,QAAIP,EAAuB,SAAS;AAClC,YAAM,EAAC,OAAAQ,GAAO,SAAAC,EAAO,IAAIT,EAAuB;AAC1C,MAAAQ,EAAA,oBAAoB,UAAUC,CAAO,GAC3CT,EAAuB,UAAU;AAAA,IAAA;AAAA,EAErC,GAAG,EAAE,GAECU,IAAuBH,EAAY,MAAM;AAC7C,QAAIR,EAAU,SAAS;AACrB,YAAMY,IAAQ,IAAI;AAAA,QAChB;AAAA,MACF;AACI,MAAAV,EAAmB,YAAY,YACfG,EAAA;AAAA,QAChB,iBAAiB;AAAA,QACjB,kBAAkBO,EAAM;AAAA,MAAA,CACzB,IACQV,EAAmB,YAAY,YACtBG,EAAA;AAAA,QAChB,iBAAiB;AAAA,QACjB,kBAAkBO,EAAM;AAAA,MAAA,CACzB,GAGHZ,EAAU,QAAQY,CAAK,GACvBb,EAAW,UAAU,MACrBC,EAAU,UAAU,MACpBE,EAAmB,UAAU;AAAA,IAAA;AAAA,EAC/B,GACC,CAACG,CAAiB,CAAC,GAEhBQ,IAAmBL;AAAA,IACvB,CAACM,MAA+C;AAC9C,YAAMC,IAAOD,EAAM,OAAO,QAAQ,CAAC;AAE/B,MAAAC,KAAQhB,EAAW,YAEjBG,EAAmB,YAAY,YACfG,EAAA;AAAA,QAChB,iBAAiB;AAAA,MAAA,CAClB,IACQH,EAAmB,YAAY,YACtBG,EAAA;AAAA,QAChB,iBAAiB;AAAA,MAAA,CAClB,GAGHN,EAAW,QAAQgB,CAAI,GAEvBhB,EAAW,UAAU,MACrBC,EAAU,UAAU,MACpBE,EAAmB,UAAU,MAERK,EAAA,IAGvBO,EAAM,OAAO,QAAQ;AAAA,IACvB;AAAA,IACA,CAACP,GAAsBF,CAAiB;AAAA,EAC1C,GAEMW,IAAcR,EAAY,MACvB,IAAI,QAAc,CAACS,GAASC,MAAW;AACvB,IAAAP,EAAA,GACAJ,EAAA,GAErBR,EAAW,UAAUkB,GACrBjB,EAAU,UAAUkB,GACpBhB,EAAmB,UAAU;AAE7B,UAAMO,IAAQd,EAAgB;AAE9B,QAAI,CAACc,GAAO;AACJ,YAAAG,IAAQ,IAAI,MAAM,yBAAyB;AAC/B,MAAAP,EAAA;AAAA,QAChB,iBAAiB;AAAA,QACjB,kBAAkBO,EAAM;AAAA,MAAA,CACzB,GACDM,EAAON,CAAK,GACZb,EAAW,UAAU,MACrBC,EAAU,UAAU,MACpBE,EAAmB,UAAU;AAC7B;AAAA,IAAA;AAGF,UAAMiB,IAAe,MAAM;AACzB,UAAInB,EAAU,SAAS;AACf,cAAAY,IAAQ,IAAI,MAAM,+BAA+B;AACrC,QAAAP,EAAA;AAAA,UAChB,iBAAiB;AAAA,UACjB,kBAAkBO,EAAM;AAAA,QAAA,CACzB,GACDZ,EAAU,QAAQY,CAAK,GACvBb,EAAW,UAAU,MACrBC,EAAU,UAAU,MACpBE,EAAmB,UAAU;AAAA,MAAA;AAEV,MAAAK,EAAA;AAAA,IACvB;AAEM,IAAAE,EAAA,iBAAiB,UAAUU,CAAY,GAC7ClB,EAAuB,UAAU,EAAC,OAAAQ,GAAO,SAASU,EAAY,GAE5Cd,EAAA;AAAA,MAChB,iBAAiB;AAAA,IAAA,CAClB,GAEDF,EAAkB,EAAC,YAAY,SAAA,CAAS,EACrC,KAAK,MAAM;AAEV,MAAAM,EAAM,MAAM;AAAA,IAAA,CACb,EACA,MAAM,MAAM;AAEX,MAAAA,EAAM,MAAM;AAAA,IAAA,CACb;AAAA,EAAA,CACJ,GACA;AAAA,IACDE;AAAA,IACAJ;AAAA,IACAJ;AAAA,IACAE;AAAA,EAAA,CACD,GAEKe,IAAaZ;AAAA,IACjB,CAACa,IAA6B,WACrB,IAAI,QAAc,CAACJ,GAASC,MAAW;AACvB,MAAAP,EAAA,GACAJ,EAAA,GAErBR,EAAW,UAAUkB,GACrBjB,EAAU,UAAUkB,GACpBhB,EAAmB,UAAU;AAE7B,YAAMO,IACJY,MAAiB,UACbxB,EAAoB,UACpBC,EAAmB;AAEzB,UAAI,CAACW,GAAO;AACJ,cAAAG,IAAQ,IAAI,MAAM,wBAAwB;AAC9B,QAAAP,EAAA;AAAA,UAChB,iBAAiB;AAAA,UACjB,kBAAkBO,EAAM;AAAA,QAAA,CACzB,GACDM,EAAON,CAAK,GACZb,EAAW,UAAU,MACrBC,EAAU,UAAU,MACpBE,EAAmB,UAAU;AAC7B;AAAA,MAAA;AAGF,YAAMiB,IAAe,MAAM;AACzB,YAAInB,EAAU,SAAS;AACf,gBAAAY,IAAQ,IAAI,MAAM,uBAAuB;AAC7B,UAAAP,EAAA;AAAA,YAChB,iBAAiB;AAAA,YACjB,kBAAkBO,EAAM;AAAA,UAAA,CACzB,GACDZ,EAAU,QAAQY,CAAK,GACvBb,EAAW,UAAU,MACrBC,EAAU,UAAU,MACpBE,EAAmB,UAAU;AAAA,QAAA;AAEV,QAAAK,EAAA;AAAA,MACvB;AAEM,MAAAE,EAAA,iBAAiB,UAAUU,CAAY,GAC7ClB,EAAuB,UAAU,EAAC,OAAAQ,GAAO,SAASU,EAAY,GAE5Cd,EAAA;AAAA,QAChB,iBAAiB;AAAA,MAAA,CAClB,GAEiBF,EAAA,EAAC,YAAY,SAAQ,CAAC,EACrC,KAAK,CAAC,EAAC,SAAAmB,QAAa;AACnB,YAAIA;AACF,UAAAb,EAAM,MAAM;AAAA,aACP;AACC,gBAAAG,IAAQ,IAAI,MAAM,+BAA+B;AACrC,UAAAP,EAAA;AAAA,YAChB,iBAAiB;AAAA,YACjB,kBAAkBO,EAAM;AAAA,UAAA,CACzB,GACDM,EAAON,CAAK,GACZb,EAAW,UAAU,MACrBC,EAAU,UAAU,MACpBE,EAAmB,UAAU;AAAA,QAAA;AAAA,MAC/B,CACD,EACA,MAAM,MAAM;AACL,cAAAU,IAAQ,IAAI,MAAM,+BAA+B;AACvD,QAAAM,EAAON,CAAK,GACZb,EAAW,UAAU,MACrBC,EAAU,UAAU,MACpBE,EAAmB,UAAU;AAAA,MAAA,CAC9B;AAAA,IAAA,CACJ;AAAA,IAEH;AAAA,MACES;AAAA,MACAJ;AAAA,MACAJ;AAAA,MACAE;AAAA,IAAA;AAAA,EAEJ;AAEA,EAAAkB,EAAU,MACD,MAAM;AACU,IAAAZ,EAAA,GACAJ,EAAA;AAAA,EACvB,GACC,CAACI,GAAsBJ,CAAoB,CAAC;AAE/C,QAAMiB,IAAwCC;AAAA,IAC5C,OAAO;AAAA,MACL,YAAAL;AAAA,MACA,aAAAJ;AAAA,IAAA;AAAA,IAEF,CAACI,GAAYJ,CAAW;AAAA,EAC1B;AAEA,SACG,gBAAAU,EAAAtC,EAAmB,UAAnB,EAA4B,OAAOoC,GACjC,UAAA;AAAA,IAAA9B;AAAA,IACD,gBAAAiC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKhC;AAAA,QACL,MAAK;AAAA,QACL,QAAO;AAAA,QACP,UAAUkB;AAAA,QACV,OAAO,EAAC,SAAS,OAAM;AAAA,QACvB,eAAY;AAAA,MAAA;AAAA,IACd;AAAA,IACA,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK9B;AAAA,QACL,MAAK;AAAA,QACL,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,UAAUgB;AAAA,QACV,OAAO,EAAC,SAAS,OAAM;AAAA,QACvB,eAAY;AAAA,MAAA;AAAA,IACd;AAAA,IACA,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK7B;AAAA,QACL,MAAK;AAAA,QACL,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,UAAUe;AAAA,QACV,OAAO,EAAC,SAAS,OAAM;AAAA,QACvB,eAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EACd,GACF;AAEJ;"}
1	+ {"version":3,"file":"ImagePickerProvider.js","sources":["../../src/providers/ImagePickerProvider.tsx"],"sourcesContent":["import React, {\n createContext,\n useContext,\n useRef,\n useCallback,\n useEffect,\n useMemo,\n} from 'react'\n\nimport {useRequestPermissions} from '../hooks/util/useRequestPermissions'\nimport {useReportInteraction} from '../internal/useReportInteraction'\nimport {resizeImage} from '../internal/utils/resizeImage'\n\nexport type ImageQuality = 'low' \| 'medium' \| 'high' \| 'original'\nexport type CameraFacing = 'front' \| 'back'\nexport interface CustomImageQuality {\n size?: number\n compression?: number\n}\n\nexport interface OpenCameraParams {\n cameraFacing?: CameraFacing\n quality?: ImageQuality\n customQuality?: CustomImageQuality\n}\n\nexport interface OpenGalleryParams {\n quality?: ImageQuality\n customQuality?: CustomImageQuality\n}\n\ninterface ImagePickerContextValue {\n openCamera: (params?: OpenCameraParams) => Promise<File>\n openGallery: (params?: OpenGalleryParams) => Promise<File>\n}\n\nconst ImagePickerContext = createContext<ImagePickerContextValue \| null>(null)\n\nexport function useImagePickerContext() {\n const context = useContext(ImagePickerContext)\n if (!context) {\n throw new Error(\n 'useImagePickerContext must be used within an ImagePickerProvider'\n )\n }\n return context\n}\n\ninterface ImagePickerProviderProps {\n children: React.ReactNode\n}\n\nexport function ImagePickerProvider({children}: ImagePickerProviderProps) {\n const galleryInputRef = useRef<HTMLInputElement>(null)\n const frontCameraInputRef = useRef<HTMLInputElement>(null)\n const backCameraInputRef = useRef<HTMLInputElement>(null)\n const resolveRef = useRef<((file: File) => void) \| null>(null)\n const rejectRef = useRef<((reason: Error) => void) \| null>(null)\n const activeCancelHandlerRef = useRef<{\n input: HTMLInputElement\n handler: () => void\n } \| null>(null)\n const activeOperationRef = useRef<'gallery' \| 'camera' \| null>(null)\n const qualityRef = useRef<ImageQuality>('medium')\n const customQualityRef = useRef<CustomImageQuality>(undefined)\n const {requestPermission} = useRequestPermissions()\n const {reportInteraction} = useReportInteraction()\n\n const cleanupCancelHandler = useCallback(() => {\n if (activeCancelHandlerRef.current) {\n const {input, handler} = activeCancelHandlerRef.current\n input.removeEventListener('cancel', handler)\n activeCancelHandlerRef.current = null\n }\n }, [])\n\n const rejectPendingPromise = useCallback(() => {\n if (rejectRef.current) {\n const error = new Error(\n 'New file picker opened before previous completed'\n )\n if (activeOperationRef.current === 'gallery') {\n reportInteraction({\n interactionType: 'image_picker_error',\n interactionValue: error.message,\n })\n } else if (activeOperationRef.current === 'camera') {\n reportInteraction({\n interactionType: 'camera_error',\n interactionValue: error.message,\n })\n }\n\n rejectRef.current(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n qualityRef.current = 'medium'\n customQualityRef.current = undefined\n }\n }, [reportInteraction])\n\n const handleFileChange = useCallback(\n async (event: React.ChangeEvent<HTMLInputElement>) => {\n const {target} = event\n const file = target.files?.[0]\n\n if (file && resolveRef.current) {\n try {\n const resizedFile = await resizeImage({\n file,\n quality: qualityRef.current,\n customQuality: customQualityRef.current,\n })\n\n if (activeOperationRef.current === 'gallery') {\n reportInteraction({\n interactionType: 'image_picker_success',\n })\n } else if (activeOperationRef.current === 'camera') {\n reportInteraction({\n interactionType: 'camera_success',\n })\n }\n\n resolveRef.current(resizedFile)\n } catch (error) {\n console.warn('Image resize failed, using original:', error)\n if (resolveRef.current) {\n resolveRef.current(file)\n }\n }\n\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n\n cleanupCancelHandler()\n }\n\n target.value = ''\n },\n [cleanupCancelHandler, reportInteraction]\n )\n\n const openGallery = useCallback(\n ({quality = 'medium', customQuality}: OpenGalleryParams = {}) => {\n return new Promise<File>((resolve, reject) => {\n rejectPendingPromise()\n cleanupCancelHandler()\n\n qualityRef.current = quality\n customQualityRef.current = customQuality\n resolveRef.current = resolve\n rejectRef.current = reject\n activeOperationRef.current = 'gallery'\n const input = galleryInputRef.current\n\n if (!input) {\n const error = new Error('Gallery input not found')\n reportInteraction({\n interactionType: 'image_picker_error',\n interactionValue: error.message,\n })\n reject(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n return\n }\n\n const handleCancel = () => {\n if (rejectRef.current) {\n const error = new Error('User cancelled file selection')\n reportInteraction({\n interactionType: 'image_picker_error',\n interactionValue: error.message,\n })\n rejectRef.current(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n }\n cleanupCancelHandler()\n }\n\n input.addEventListener('cancel', handleCancel)\n activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n reportInteraction({\n interactionType: 'image_picker_open',\n })\n\n requestPermission({permission: 'CAMERA'})\n .then(() => {\n // This will show both Camera and Gallery\n input.click()\n })\n .catch(() => {\n // Show only Gallery\n input.click()\n })\n })\n },\n [\n rejectPendingPromise,\n cleanupCancelHandler,\n requestPermission,\n reportInteraction,\n ]\n )\n\n const openCamera = useCallback(\n ({\n cameraFacing = 'back',\n quality = 'medium',\n customQuality,\n }: OpenCameraParams = {}) => {\n return new Promise<File>((resolve, reject) => {\n rejectPendingPromise()\n cleanupCancelHandler()\n\n qualityRef.current = quality\n customQualityRef.current = customQuality\n resolveRef.current = resolve\n rejectRef.current = reject\n activeOperationRef.current = 'camera'\n\n const input =\n cameraFacing === 'front'\n ? frontCameraInputRef.current\n : backCameraInputRef.current\n\n if (!input) {\n const error = new Error('Camera input not found')\n reportInteraction({\n interactionType: 'camera_error',\n interactionValue: error.message,\n })\n reject(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n return\n }\n\n const handleCancel = () => {\n if (rejectRef.current) {\n const error = new Error('User cancelled camera')\n reportInteraction({\n interactionType: 'camera_error',\n interactionValue: error.message,\n })\n rejectRef.current(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n }\n cleanupCancelHandler()\n }\n\n input.addEventListener('cancel', handleCancel)\n activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n reportInteraction({\n interactionType: 'camera_open',\n })\n\n requestPermission({permission: 'CAMERA'})\n .then(({granted}) => {\n if (granted) {\n input.click()\n } else {\n const error = new Error('Camera permission not granted')\n reportInteraction({\n interactionType: 'camera_error',\n interactionValue: error.message,\n })\n reject(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n }\n })\n .catch(() => {\n const error = new Error('Camera permission not granted')\n reject(error)\n resolveRef.current = null\n rejectRef.current = null\n activeOperationRef.current = null\n })\n })\n },\n [\n rejectPendingPromise,\n cleanupCancelHandler,\n requestPermission,\n reportInteraction,\n ]\n )\n\n useEffect(() => {\n return () => {\n rejectPendingPromise()\n cleanupCancelHandler()\n }\n }, [rejectPendingPromise, cleanupCancelHandler])\n\n const contextValue: ImagePickerContextValue = useMemo(\n () => ({\n openCamera,\n openGallery,\n }),\n [openCamera, openGallery]\n )\n\n return (\n <ImagePickerContext.Provider value={contextValue}>\n {children}\n <input\n ref={galleryInputRef}\n type=\"file\"\n accept=\"image/\"\n onChange={handleFileChange}\n style={{display: 'none'}}\n aria-hidden=\"true\"\n />\n <input\n ref={frontCameraInputRef}\n type=\"file\"\n accept=\"image/\"\n capture=\"user\"\n onChange={handleFileChange}\n style={{display: 'none'}}\n aria-hidden=\"true\"\n />\n <input\n ref={backCameraInputRef}\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n onChange={handleFileChange}\n style={{display: 'none'}}\n aria-hidden=\"true\"\n />\n </ImagePickerContext.Provider>\n )\n}\n"],"names":["ImagePickerContext","createContext","useImagePickerContext","context","useContext","ImagePickerProvider","children","galleryInputRef","useRef","frontCameraInputRef","backCameraInputRef","resolveRef","rejectRef","activeCancelHandlerRef","activeOperationRef","qualityRef","customQualityRef","requestPermission","useRequestPermissions","reportInteraction","useReportInteraction","cleanupCancelHandler","useCallback","input","handler","rejectPendingPromise","error","handleFileChange","event","target","file","resizedFile","resizeImage","openGallery","quality","customQuality","resolve","reject","handleCancel","openCamera","cameraFacing","granted","useEffect","contextValue","useMemo","jsxs","jsx"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "sideEffects": false,
   "type": "module",
   "engines": {

package/src/components/atoms/list.tsx CHANGED Viewed

@@ -7,8 +7,7 @@ import {usePullToRefresh} from '../../internal/usePullToRefresh'
 import {findVirtuosoScrollableElement} from '../../internal/utils/virtuoso-dom'
 import {cn} from '../../lib/utils'
 import '../../styles/utilities.css'
-import {Pagination} from './pagination'
+import {Skeleton} from '../ui/skeleton'
 const DEFAULT_REFRESH_PULL_THRESHOLD = 200
 const ELEMENT_BIND_DELAY = 100
@@ -24,7 +23,6 @@ interface Props<T = any>
   header?: React.ReactNode
   fetchMore?: () => Promise<void>
   loadingComponent?: React.ReactNode
-  isFetchingMore?: boolean
   onRefresh?: () => Promise<void>
   refreshing?: boolean
   enablePullToRefresh?: boolean
@@ -39,7 +37,6 @@ export function List<T = any>({
   header,
   fetchMore,
   loadingComponent,
-  isFetchingMore,
   onRefresh,
   refreshing,
   enablePullToRefresh = true,
@@ -77,14 +74,8 @@ export function List<T = any>({
   const Footer = useCallback(() => {
     if (!fetchMore) return null
-    return (
-      <Pagination
-        fetchMore={_fetchMore}
-        loadingComponent={loadingComponent}
-        isFetchingMore={isFetchingMore}
-      />
-    )
-  }, [_fetchMore, fetchMore, loadingComponent, isFetchingMore])
+    return loadingComponent ?? <Skeleton className="h-10 w-full p-8" />
+  }, [loadingComponent, fetchMore])
   const classNames = cn(showScrollbar ? undefined : 'no-scrollbars', className)

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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')
+    })
+  })
+})