@shopify/shop-minis-react 0.0.32 → 0.0.34

package/src/hooks/storage/useImageUpload.ts

@@ -1,10 +1,18 @@
 import {useCallback} from 'react'
 
 import {useShopActions} from '../../internal/useShopActions'
+import {fileToDataUri} from '../../utils'
 
 import type {UploadTarget} from '@shopify/shop-minis-platform/actions'
 
 export interface UploadImageParams {
+  /**
+   * The file to upload.
+   */
+  image: File
+}
+
+interface ProcessedImage {
   /**
    * The MIME type of the image.
    */
@@ -12,11 +20,11 @@ export interface UploadImageParams {
   /**
    * The size of the image in bytes.
    */
-  fileSize?: number
+  fileSize: number
   /**
-   * The URI of the image to upload.
+   * The file blob of the image.
    */
-  uri: string
+  fileBlob: Blob
 }
 
 export interface UploadedImage {
@@ -36,28 +44,27 @@ export interface UploadedImage {
 
 interface UseImageUploadReturns {
   /**
-   * Upload an image attached to the current user.
+   * Upload an image which will be attached to the current user.
    */
-  uploadImage: (params: UploadImageParams[]) => Promise<UploadedImage[]>
+  uploadImage: (image: File) => Promise<UploadedImage[]>
 }
 
 // Fetch file data and detect file sizes if not provided
 // Works with file://, data:, and http(s):// URIs
-const processFileData = async (image: UploadImageParams) => {
-  const response = await fetch(image.uri)
+const processFileData = async (image: File): Promise<ProcessedImage> => {
+  const uri = await fileToDataUri(image)
+
+  const response = await fetch(uri)
   const blob = await response.blob()
 
   return {
-    ...image,
-    fileSize: image.fileSize ?? blob.size,
+    mimeType: image.type,
+    fileSize: image.size ?? blob.size,
     fileBlob: blob,
   }
 }
 
-const uploadFileToGCS = async (
-  image: UploadImageParams & {fileSize: number; fileBlob: Blob},
-  target: UploadTarget
-) => {
+const uploadFileToGCS = async (image: ProcessedImage, target: UploadTarget) => {
   const formData = new FormData()
   target.parameters.forEach(({name, value}: {name: string; value: string}) => {
     formData.append(name, value)
@@ -84,13 +91,8 @@ export const useImageUpload = (): UseImageUploadReturns => {
   const {createImageUploadLink, completeImageUpload} = useShopActions()
 
   const uploadImage = useCallback(
-    async (params: UploadImageParams[]) => {
-      if (params.length > 1) {
-        throw new Error('Multiple image upload is not supported yet')
-      }
-
-      const imageParams = params[0]
-      const processedImageParams = await processFileData(imageParams)
+    async (image: File) => {
+      const processedImageParams = await processFileData(image)
 
       const links = await createImageUploadLink({
         input: [

package/src/stories/MerchantCard.stories.tsx

@@ -15,9 +15,6 @@ const meta = {
     touchable: {
       control: 'boolean',
     },
-    fixedHeight: {
-      control: 'boolean',
-    },
     featuredImagesLimit: {
       control: 'number',
     },

package/src/utils/image.ts

@@ -16,3 +16,75 @@ export function getThumbhashDataURL(thumbhash?: string): string | undefined {
     console.warn('Failed to decode thumbhash to data URL', error)
   }
 }
+
+/** Converts a file to a data URI
+ * @param file The file to convert
+ * @returns A promise that resolves to the data URI string
+ */
+export function fileToDataUri(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onloadend = () => resolve(reader.result as string)
+    reader.onerror = reject
+    reader.readAsDataURL(file)
+  })
+}
+
+const ImageSizes = {
+  xxsUrl: 32,
+  xsUrl: 64,
+  sUrl: 128,
+  xxsmUrl: 256,
+  xsmUrl: 384,
+  smUrl: 512,
+  mUrl: 640,
+  lUrl: 1080,
+  xlUrl: 2048,
+} as const
+
+type Key = keyof typeof ImageSizes
+
+/**
+ * Acceptable offset for image sizes. An image could use the size that is within this offset.
+ */
+const offsetPercentage = 0.05
+
+const sortedImageSizes = Object.entries(ImageSizes).sort(
+  ([, firstSize], [, secondSize]) => firstSize - secondSize
+)
+
+const getImageSizeKeyWithSize = (size: number): Key => {
+  for (const [key, imgSize] of sortedImageSizes) {
+    const upperBoundSize = imgSize + imgSize * offsetPercentage
+    if (size <= upperBoundSize) return key as Key
+  }
+
+  return 'xlUrl'
+}
+
+const resizeImage = (imageUrl: string, width: number) => {
+  const pattern = new RegExp(/\?+/g)
+  const delimiter = pattern.test(imageUrl) ? '&' : '?'
+  return `${imageUrl}${delimiter}width=${width}`
+}
+
+/**
+ * Optimizes Shopify CDN image URLs by adding a width parameter based on screen size
+ * @param url The image URL to optimize
+ * @returns The optimized URL with width parameter if it's a Shopify CDN image, otherwise returns the original URL
+ */
+
+export const getResizedImageUrl = (url?: string): string => {
+  if (!url) return ''
+
+  // Only process Shopify CDN images
+  if (!url.startsWith('https://cdn.shopify.com')) {
+    return url
+  }
+
+  const width = window.innerWidth ?? screen.width
+
+  const key = getImageSizeKeyWithSize(width)
+
+  return resizeImage(url, ImageSizes[key])
+}

package/src/utils/index.ts

@@ -1,4 +1,4 @@
 export * from './errors'
 export * from './merchant-card'
 export * from './parseUrl'
-export * from './imageToDataUri'
+export * from './image'

package/dist/components/atoms/thumbhash-image.js

@@ -1,54 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { memo as p, useState as g, useMemo as L, useCallback as v } from "react";
-import { cn as s } from "../../lib/utils.js";
-import { getThumbhashDataURL as k } from "../../utils/image.js";
-const j = p(function(r) {
-  const {
-    src: c,
-    alt: m,
-    thumbhash: o,
-    onLoad: a,
-    className: l,
-    style: i,
-    aspectRatio: n = "auto",
-    ...u
-  } = r, [d, h] = g(!1), e = L(
-    () => k(o ?? void 0),
-    [o]
-  ), b = v(
-    (f) => {
-      h(!0), a?.(f);
-    },
-    [a]
-  );
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      className: s("relative w-full ", l),
-      style: {
-        ...i,
-        aspectRatio: n,
-        backgroundImage: e ? `url(${e})` : void 0,
-        backgroundSize: "cover",
-        backgroundPosition: "center"
-      },
-      children: /* @__PURE__ */ t(
-        "img",
-        {
-          className: s(
-            "absolute inset-0 w-full h-full opacity-0 object-cover",
-            d && "opacity-100"
-          ),
-          src: c,
-          alt: m,
-          onLoad: b,
-          ...u
-        }
-      )
-    }
-  );
-});
-export {
-  j as ThumbhashImage
-};
-//# sourceMappingURL=thumbhash-image.js.map

package/dist/components/atoms/thumbhash-image.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"thumbhash-image.js","sources":["../../../src/components/atoms/thumbhash-image.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport {ImgHTMLAttributes, useCallback, useMemo, memo, useState} from 'react'\n\nimport {cn} from '../../lib/utils'\nimport {getThumbhashDataURL} from '../../utils/image'\n\ntype ThumbhashImageProps = ImgHTMLAttributes<HTMLImageElement> & {\n  src: string\n  thumbhash: string\n  alt?: string | null\n  aspectRatio?: number | string\n}\n\nexport const ThumbhashImage = memo(function ThumbhashImage(\n  props: ThumbhashImageProps\n) {\n  const {\n    src,\n    alt,\n    thumbhash,\n    onLoad,\n    className,\n    style,\n    aspectRatio = 'auto',\n    ...restProps\n  } = props\n\n  const [isLoaded, setIsLoaded] = useState(false)\n\n  const dataURL = useMemo(\n    () => getThumbhashDataURL(thumbhash ?? undefined),\n    [thumbhash]\n  )\n\n  const handleLoad = useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setIsLoaded(true)\n      onLoad?.(event)\n    },\n    [onLoad]\n  )\n\n  return (\n    <div\n      className={cn('relative w-full ', className)}\n      style={{\n        ...style,\n        aspectRatio,\n        backgroundImage: dataURL ? `url(${dataURL})` : undefined,\n        backgroundSize: 'cover',\n        backgroundPosition: 'center',\n      }}\n    >\n      <img\n        className={cn(\n          'absolute inset-0 w-full h-full opacity-0 object-cover',\n          isLoaded && 'opacity-100'\n        )}\n        src={src}\n        alt={alt}\n        onLoad={handleLoad}\n        {...restProps}\n      />\n    </div>\n  )\n})\n"],"names":["ThumbhashImage","memo","props","src","alt","thumbhash","onLoad","className","style","aspectRatio","restProps","isLoaded","setIsLoaded","useState","dataURL","useMemo","getThumbhashDataURL","handleLoad","useCallback","event","jsx","cn"],"mappings":";;;;AAaO,MAAMA,IAAiBC,EAAK,SACjCC,GACA;AACM,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,GAAGC;AAAA,EAAA,IACDR,GAEE,CAACS,GAAUC,CAAW,IAAIC,EAAS,EAAK,GAExCC,IAAUC;AAAA,IACd,MAAMC,EAAoBX,KAAa,MAAS;AAAA,IAChD,CAACA,CAAS;AAAA,EACZ,GAEMY,IAAaC;AAAA,IACjB,CAACC,MAAyD;AACxD,MAAAP,EAAY,EAAI,GAChBN,IAASa,CAAK;AAAA,IAChB;AAAA,IACA,CAACb,CAAM;AAAA,EACT;AAGE,SAAA,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,oBAAoBd,CAAS;AAAA,MAC3C,OAAO;AAAA,QACL,GAAGC;AAAA,QACH,aAAAC;AAAA,QACA,iBAAiBK,IAAU,OAAOA,CAAO,MAAM;AAAA,QAC/C,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,MACtB;AAAA,MAEA,UAAA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACT;AAAA,YACAV,KAAY;AAAA,UACd;AAAA,UACA,KAAAR;AAAA,UACA,KAAAC;AAAA,UACA,QAAQa;AAAA,UACP,GAAGP;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;"}

package/dist/utils/imageToDataUri.js

@@ -1,10 +0,0 @@
-function a(r) {
-  return new Promise((n, o) => {
-    const e = new FileReader();
-    e.onloadend = () => n(e.result), e.onerror = o, e.readAsDataURL(r);
-  });
-}
-export {
-  a as fileToDataUri
-};
-//# sourceMappingURL=imageToDataUri.js.map

package/dist/utils/imageToDataUri.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"imageToDataUri.js","sources":["../../src/utils/imageToDataUri.ts"],"sourcesContent":["export function fileToDataUri(file: File): Promise<string> {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader()\n    reader.onloadend = () => resolve(reader.result as string)\n    reader.onerror = reject\n    reader.readAsDataURL(file)\n  })\n}\n"],"names":["fileToDataUri","file","resolve","reject","reader"],"mappings":"AAAO,SAASA,EAAcC,GAA6B;AACzD,SAAO,IAAI,QAAQ,CAACC,GAASC,MAAW;AAChC,UAAAC,IAAS,IAAI,WAAW;AAC9B,IAAAA,EAAO,YAAY,MAAMF,EAAQE,EAAO,MAAgB,GACxDA,EAAO,UAAUD,GACjBC,EAAO,cAAcH,CAAI;AAAA,EAAA,CAC1B;AACH;"}

package/src/utils/imageToDataUri.ts

@@ -1,8 +0,0 @@
-export function fileToDataUri(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onloadend = () => resolve(reader.result as string)
-    reader.onerror = reject
-    reader.readAsDataURL(file)
-  })
-}