@shopify/shop-minis-react 0.1.7 → 0.2.0

package/generated-hook-maps/hook-actions-map.json

@@ -0,0 +1,130 @@
+{
+  "useAsyncStorage": [
+    "GET_PERSISTED_ITEM",
+    "SET_PERSISTED_ITEM",
+    "REMOVE_PERSISTED_ITEM",
+    "GET_ALL_PERSISTED_KEYS",
+    "CLEAR_PERSISTED_ITEMS"
+  ],
+  "useBuyerAttributes": [
+    "GET_BUYER_ATTRIBUTES"
+  ],
+  "useCloseMini": [
+    "CLOSE_MINI"
+  ],
+  "useContent": [
+    "GET_CONTENT"
+  ],
+  "useCreateImageContent": [
+    "CREATE_CONTENT"
+  ],
+  "useCuratedProducts": [
+    "GET_CURATED_PRODUCTS"
+  ],
+  "useCurrentUser": [
+    "GET_CURRENT_USER"
+  ],
+  "useErrorScreen": [
+    "SHOW_ERROR_SCREEN"
+  ],
+  "useErrorToast": [
+    "SHOW_ERROR_TOAST"
+  ],
+  "useFollowedShops": [
+    "GET_FOLLOWED_SHOPS"
+  ],
+  "useFollowedShopsActions": [
+    "FOLLOW_SHOP",
+    "UNFOLLOW_SHOP"
+  ],
+  "useGenerateUserToken": [
+    "GENERATE_USER_TOKEN"
+  ],
+  "useImageUpload": [
+    "CREATE_IMAGE_UPLOAD_LINK",
+    "COMPLETE_IMAGE_UPLOAD"
+  ],
+  "useKeyboardAvoidingView": [
+    "TRANSLATE_CONTENT_UP",
+    "TRANSLATE_CONTENT_DOWN"
+  ],
+  "useOrders": [
+    "GET_ORDERS"
+  ],
+  "usePopularProducts": [
+    "GET_POPULAR_PRODUCTS"
+  ],
+  "useProduct": [
+    "GET_PRODUCT"
+  ],
+  "useProductList": [
+    "GET_PRODUCT_LIST"
+  ],
+  "useProductListActions": [
+    "ADD_PRODUCT_LIST",
+    "REMOVE_PRODUCT_LIST",
+    "RENAME_PRODUCT_LIST",
+    "ADD_PRODUCT_LIST_ITEM",
+    "REMOVE_PRODUCT_LIST_ITEM"
+  ],
+  "useProductLists": [
+    "GET_PRODUCT_LISTS"
+  ],
+  "useProductMedia": [
+    "GET_PRODUCT_MEDIA"
+  ],
+  "useProductSearch": [
+    "GET_PRODUCT_SEARCH"
+  ],
+  "useProductVariants": [
+    "GET_PRODUCT_VARIANTS"
+  ],
+  "useProducts": [
+    "GET_PRODUCTS"
+  ],
+  "useRecentProducts": [
+    "GET_RECENT_PRODUCTS"
+  ],
+  "useRecentShops": [
+    "GET_RECENT_SHOPS"
+  ],
+  "useRecommendedProducts": [
+    "GET_RECOMMENDED_PRODUCTS"
+  ],
+  "useRecommendedShops": [
+    "GET_RECOMMENDED_SHOPS"
+  ],
+  "useRequestPermissions": [
+    "REQUEST_PERMISSION"
+  ],
+  "useSavedProducts": [
+    "GET_SAVED_PRODUCTS"
+  ],
+  "useSavedProductsActions": [
+    "FAVORITE",
+    "UNFAVORITE"
+  ],
+  "useSecureStorage": [
+    "GET_SECRET",
+    "SET_SECRET",
+    "REMOVE_SECRET"
+  ],
+  "useShare": [
+    "SHARE",
+    "SHARE_SINGLE"
+  ],
+  "useShop": [
+    "GET_SHOP"
+  ],
+  "useShopCartActions": [
+    "ADD_TO_CART",
+    "BUY_PRODUCT"
+  ],
+  "useShopNavigation": [
+    "NAVIGATE_TO_PRODUCT",
+    "NAVIGATE_TO_SHOP",
+    "NAVIGATE_TO_ORDER",
+    "NAVIGATE_TO_CHECKOUT",
+    "NAVIGATE_TO_CART"
+  ]
+}

package/generated-hook-maps/hook-scopes-map.json

@@ -0,0 +1,48 @@
+{
+  "useBuyerAttributes": [
+    "profile"
+  ],
+  "useCurrentUser": [
+    "user_settings:read"
+  ],
+  "useFollowedShops": [
+    "shops:follows:read"
+  ],
+  "useFollowedShopsActions": [
+    "shops:follows:write"
+  ],
+  "useGenerateUserToken": [
+    "openid"
+  ],
+  "useOrders": [
+    "orders"
+  ],
+  "useProductList": [
+    "product_list:read"
+  ],
+  "useProductListActions": [
+    "product_list:write",
+    "product_list_item:write"
+  ],
+  "useProductLists": [
+    "product_list:read"
+  ],
+  "useRecentProducts": [
+    "products:recent:read"
+  ],
+  "useRecentShops": [
+    "shops:recent:read"
+  ],
+  "useRecommendedProducts": [
+    "products:recommendations:read"
+  ],
+  "useRecommendedShops": [
+    "shops:recommendations:read"
+  ],
+  "useSavedProducts": [
+    "product_list:read"
+  ],
+  "useSavedProductsActions": [
+    "product_list:write"
+  ]
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -18,6 +18,9 @@
   "files": [
     "src/**/*.{ts,tsx,css}",
     "dist/**/*",
+    "eslint/**/*.cjs",
+    "eslint/**/*.md",
+    "generated-hook-maps/**/*.json",
     "README.md",
     "LICENSE.txt"
   ],
@@ -29,7 +32,9 @@
     },
     "./styles": "./src/index.css",
     "./mocks": "./src/mocks.ts",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    "./eslint": "./eslint/index.cjs",
+    "./eslint/config": "./eslint/config.cjs"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
@@ -38,7 +43,7 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.5.0",
+    "@shopify/shop-minis-platform": "0.6.0",
     "@tailwindcss/vite": "4.1.8",
     "@types/color": "3.0.6",
     "@types/lodash": "4.17.20",
@@ -56,6 +61,8 @@
     "motion": "12.17.3",
     "next-themes": "0.4.6",
     "radix-ui": "1.4.2",
+    "eslint": "^8.57.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "react-intersection-observer": "9.13.1",
     "react-resizable-panels": "3.0.2",
     "react-router": "7.7.0",
@@ -83,7 +90,6 @@
     "@types/react-dom": "^19.1.2",
     "@vitest/coverage-v8": "^2.1.8",
     "@vitest/ui": "^2.1.8",
-    "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^9.0.16",
     "jsdom": "^25.0.1",
     "react": "^19.1.0",

package/src/components/atoms/image.test.tsx

@@ -76,12 +76,13 @@ describe('Image', () => {
     expect(wrapper.style.aspectRatio).toBe('16/9')
   })
 
-  it('uses thumbhash as background when provided', () => {
+  it('uses thumbhash as background when provided with fixed aspect ratio', () => {
     const {container} = render(
       <Image
         src="https://example.com/image.jpg"
         alt="Test image"
         thumbhash="testThumbhash"
+        aspectRatio="1"
       />
     )
 
@@ -91,6 +92,45 @@ describe('Image', () => {
     )
   })
 
+  it('renders with natural sizing when aspectRatio is auto', () => {
+    const {container} = render(
+      <Image
+        src="https://example.com/image.jpg"
+        alt="Test image"
+        aspectRatio="auto"
+        className="custom-class"
+      />
+    )
+
+    const wrapper = container.firstChild as HTMLElement
+    const img = screen.getByRole('img')
+
+    expect(wrapper.tagName).toBe('DIV')
+    expect(wrapper).toHaveClass('custom-class')
+    expect(wrapper.style.aspectRatio).toBe('')
+    expect(img).toHaveClass('w-full', 'h-auto')
+    expect(img).toHaveAttribute('src', 'https://example.com/image.jpg')
+  })
+
+  it('preserves thumbhash with natural sizing', () => {
+    const {container} = render(
+      <Image
+        src="https://example.com/image.jpg"
+        alt="Test image"
+        aspectRatio="auto"
+        thumbhash="testThumbhash"
+      />
+    )
+
+    const wrapper = container.firstChild as HTMLElement
+    const img = screen.getByRole('img')
+
+    expect(wrapper.style.backgroundImage).toContain(
+      'data:image/png;base64,testThumbhash'
+    )
+    expect(img).toHaveClass('w-full', 'h-auto')
+  })
+
   it('passes additional props to img element', () => {
     render(
       <Image

package/src/components/atoms/image.tsx

@@ -17,6 +17,7 @@ type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
   file?: File
   thumbhash?: string | null
   aspectRatio?: number | string
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'
 }
 
 export const Image = memo(function Image(props: ImageProps) {
@@ -28,6 +29,7 @@ export const Image = memo(function Image(props: ImageProps) {
     className,
     style,
     aspectRatio = 'auto',
+    objectFit = 'contain',
     ...restProps
   } = props
 
@@ -71,10 +73,10 @@ export const Image = memo(function Image(props: ImageProps) {
 
   return (
     <div
-      className={cn('relative w-full ', className)}
+      className={cn('relative w-full', className)}
       style={{
         ...style,
-        aspectRatio,
+        ...(aspectRatio !== 'auto' && {aspectRatio}),
         backgroundImage: thumbhashDataURL
           ? `url(${thumbhashDataURL})`
           : undefined,
@@ -84,7 +86,10 @@ export const Image = memo(function Image(props: ImageProps) {
     >
       <img
         className={cn(
-          'absolute inset-0 opacity-0 size-full object-cover',
+          aspectRatio === 'auto'
+            ? 'opacity-0 w-full h-auto'
+            : 'absolute inset-0 opacity-0 size-full',
+          `object-${objectFit}`,
           isLoaded && 'opacity-100'
         )}
         src={imageSrc}