@shopify/shop-minis-react 0.0.28 → 0.0.30

package/dist/shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js

@@ -1,4 +1,4 @@
-import { __module as r } from "../../../../../../../_virtual/index10.js";
+import { __module as r } from "../../../../../../../_virtual/index9.js";
 import { __require as o } from "../cjs/use-sync-external-store-shim.production.js";
 import { __require as i } from "../cjs/use-sync-external-store-shim.development.js";
 var e;

package/dist/shop-minis-react/node_modules/.pnpm/video.js@8.23.3/node_modules/video.js/dist/video.es.js

@@ -1,6 +1,6 @@
 import S from "../../../../../../../_virtual/window.js";
 import B from "../../../../../../../_virtual/document.js";
-import il from "../../../../../../../_virtual/index2.js";
+import il from "../../../../../../../_virtual/index3.js";
 import ao from "../../../../../../../_virtual/browser-index.js";
 import xe from "../../../../@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/extends.js";
 import Kc from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/resolve-url.js";

package/dist/utils/colors.js

@@ -1,4 +1,4 @@
-import o from "../_virtual/index3.js";
+import o from "../_virtual/index2.js";
 const a = (r) => o(r).darken(0.2).isDark();
 export {
   a as isDarkColor

package/package.json

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

package/src/components/atoms/list.tsx

@@ -1,4 +1,4 @@
-import {ComponentType, useCallback} from 'react'
+import {ComponentType, useCallback, useRef} from 'react'
 
 import {
   VariableSizeList as _VariableSizeList,
@@ -24,7 +24,7 @@ interface Props<T = any>
   showScrollbar?: boolean
   header?: React.ReactNode
   headerHeight?: number
-  fetchMore?: () => void
+  fetchMore?: () => Promise<void>
 }
 
 export function List<T = any>({
@@ -40,6 +40,26 @@ export function List<T = any>({
   overscanCount,
   ...listProps
 }: Props<T>) {
+  const inFlightFetchMoreRef = useRef<Promise<void> | null>(null)
+
+  // This is workaround to prevent multiple calls to fetchMore
+  // react-window re-renders the rows while scrolling,
+  // and the TrackingPixel could be triggered multiple times
+
+  const _fetchMore = useCallback(() => {
+    // Dedupe concurrent calls by returning the same in-flight promise
+    if (inFlightFetchMoreRef.current) return
+
+    const current = Promise.resolve(fetchMore?.()).finally(() => {
+      // Only clear if this is still the most recent promise
+      if (inFlightFetchMoreRef.current === current) {
+        inFlightFetchMoreRef.current = null
+      }
+    })
+
+    inFlightFetchMoreRef.current = current
+  }, [fetchMore])
+
   const rowRenderer = useCallback(
     ({index, style}: {index: number; style: React.CSSProperties}) => {
       // prepend the header to the first row if it exists
@@ -58,7 +78,7 @@ export function List<T = any>({
           <div style={style}>
             {renderItem(items[index], index)}
             <div style={{bottom: 0}}>
-              <Pagination fetchMore={fetchMore} />
+              <Pagination fetchMore={_fetchMore} />
             </div>
           </div>
         )
@@ -66,7 +86,7 @@ export function List<T = any>({
 
       return <div style={style}>{renderItem(items[index], index)}</div>
     },
-    [items, renderItem, header, fetchMore, headerHeight]
+    [items, renderItem, header, headerHeight, _fetchMore, fetchMore]
   )
 
   const getItemSize = useCallback(

package/src/components/commerce/product-link.tsx

@@ -223,10 +223,15 @@ function ProductLinkActions({
 export interface ProductLinkProps {
   product: Product
   hideFavoriteAction?: boolean
+  onClick?: (product: Product) => void
 }
 
 // Composed ProductLink component
-function ProductLink({product, hideFavoriteAction = false}: ProductLinkProps) {
+function ProductLink({
+  product,
+  hideFavoriteAction = false,
+  onClick,
+}: ProductLinkProps) {
   const {navigateToProduct} = useShopNavigation()
   const {saveProduct, unsaveProduct} = useSavedProductsActions()
 
@@ -262,7 +267,8 @@ function ProductLink({product, hideFavoriteAction = false}: ProductLinkProps) {
     navigateToProduct({
       productId: id,
     })
-  }, [navigateToProduct, id])
+    onClick?.(product)
+  }, [navigateToProduct, id, onClick, product])
 
   const handleActionPress = React.useCallback(async () => {
     const previousState = isFavoritedLocal
@@ -321,7 +327,7 @@ function ProductLink({product, hideFavoriteAction = false}: ProductLinkProps) {
       <ProductLinkInfo layout="horizontal">
         <ProductLinkTitle>{title}</ProductLinkTitle>
 
-        {reviewCount && averageRating && (
+        {reviewCount && averageRating ? (
           <ProductLinkRating>
             <div className="flex items-center gap-1">
               {Array.from({length: 5}, (_, i) => (
@@ -343,7 +349,7 @@ function ProductLink({product, hideFavoriteAction = false}: ProductLinkProps) {
               </span>
             </div>
           </ProductLinkRating>
-        )}
+        ) : null}
 
         <ProductLinkPrice>
           {hasDiscount ? (

package/src/components/commerce/search.tsx

@@ -21,7 +21,7 @@ interface SearchContextValue {
   products: Product[] | null
   loading: boolean
   error: Error | null
-  fetchMore?: () => void
+  fetchMore?: () => Promise<void>
   hasNextPage: boolean
   isTyping: boolean
 }
@@ -220,6 +220,7 @@ export interface SearchResultsProps
     SearchInputProps,
     SearchResultsListProps {
   showSearchInput?: boolean
+  onProductClick?: (product: Product) => void
 }
 
 function Search({
@@ -230,6 +231,7 @@ function Search({
   className,
   renderItem,
   itemHeight,
+  onProductClick,
 }: SearchResultsProps) {
   const _renderItem = (product: Product, index: number) => {
     if (renderItem) {
@@ -238,7 +240,12 @@ function Search({
 
     return (
       <div className="p-2">
-        <ProductLink key={product.id} product={product} hideFavoriteAction />
+        <ProductLink
+          key={product.id}
+          product={product}
+          hideFavoriteAction
+          onClick={onProductClick}
+        />
       </div>
     )
   }

package/src/components/index.ts

@@ -10,7 +10,7 @@ export * from './commerce/search'
 
 export * from './content/image-content-wrapper'
 
-export * from './navigation/transition-container'
+export * from './navigation/minis-router'
 export * from './navigation/transition-link'
 
 export * from './atoms/button'

package/src/components/navigation/minis-router.tsx

@@ -0,0 +1,23 @@
+import {BrowserRouter, BrowserRouterProps} from 'react-router'
+
+import {TransitionContainer} from './transition-container'
+
+type ShopMinisRouterProps = BrowserRouterProps & {
+  viewTransitions?: boolean
+}
+
+export function MinisRouter({
+  children,
+  viewTransitions = false,
+  ...props
+}: ShopMinisRouterProps) {
+  if (viewTransitions) {
+    return (
+      <BrowserRouter {...props}>
+        <TransitionContainer>{children}</TransitionContainer>
+      </BrowserRouter>
+    )
+  }
+
+  return <BrowserRouter {...props}>{children}</BrowserRouter>
+}

package/src/hooks/navigation/useNavigateWithTransition.ts

@@ -2,7 +2,12 @@ import {useLocation, useNavigate, NavigateOptions} from 'react-router'
 
 import {DATA_NAVIGATION_TYPE_ATTRIBUTE} from '../../types'
 
-export function useNavigateWithTransition() {
+type UseNavigateWithTransitionReturns = (
+  to: string | number,
+  options?: NavigateOptions
+) => void | Promise<void>
+
+export function useNavigateWithTransition(): UseNavigateWithTransitionReturns {
   const navigate = useNavigate()
   const location = useLocation()
 

package/src/hooks/navigation/useShopNavigation.ts

@@ -21,7 +21,9 @@ interface UseShopNavigationReturns {
    * Navigates to an order.
    */
   navigateToOrder: (params: NavigateToOrderParams) => Promise<void>
-
+  /**
+   * Navigates to a checkout.
+   */
   navigateToCheckout: (params: NavigateToCheckoutParams) => Promise<void>
 }
 

package/src/hooks/user/useCurrentUser.ts

@@ -9,6 +9,9 @@ import {
 export interface UseCurrentUserParams extends DataHookOptionsBase {}
 
 export interface UseCurrentUserReturns extends DataHookReturnsBase {
+  /**
+   * The current user logged into Shop.
+   */
   currentUser: UserProfile | null
 }
 

package/src/hooks/user/useFollowedShopsActions.ts

@@ -8,11 +8,11 @@ import {useShopActions} from '../../internal/useShopActions'
 
 interface UseFollowedShopsActionsReturns {
   /**
-   * Follow a shop.
+   * Follows a shop.
    */
   followShop: (params: FollowShopParams) => Promise<boolean>
   /**
-   * Unfollow a shop.
+   * Unfollows a shop.
    */
   unfollowShop: (params: UnfollowShopParams) => Promise<boolean>
 }

package/src/hooks/util/{useImagePicker.tsx → useImagePicker.ts}

@@ -3,12 +3,18 @@ import {
   useImagePickerContext,
 } from '../../providers/ImagePickerProvider'
 
-interface UseImagePickerReturn {
+interface UseImagePickerReturns {
+  /**
+   * Opens the camera to take a photo.
+   */
   openCamera: (cameraFacing?: CameraFacing) => Promise<File>
+  /**
+   * Opens the gallery to select an image.
+   */
   openGallery: () => Promise<File>
 }
 
-export function useImagePicker(): UseImagePickerReturn {
+export function useImagePicker(): UseImagePickerReturns {
   const {openCamera, openGallery} = useImagePickerContext()
 
   return {

package/src/index.css

@@ -1,6 +1,7 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
+@import './styles/fonts.css';
 @import './styles/theme.css';
 @import './styles/globals.css';
 @import './styles/animations.css';

package/src/mocks.ts

@@ -19,7 +19,7 @@ export const createProduct = (
   defaultVariantId: `variant-${id}`,
   isFavorited: false,
   featuredImage: {
-    url: `https://cdn.shopify.com/s/files/1/0621/0463/3599/files/61ChhrRjK9L._AC_SL1000_1639abe8-4cd3-4bee-9867-73f26b0acf0a.jpg?v=1702559955`,
+    url: `https://cdn.shopify.com/static/sample-images/teapot.jpg`,
     altText: title,
   },
 })
@@ -411,7 +411,7 @@ function makeMockActions(): ShopActions {
         externalId: null,
         image: {
           id: 'img-123',
-          url: 'https://example.com/content-image.jpg',
+          url: 'https://cdn.shopify.com/s/files/1/0633/6574/2742/files/Namnlosdesign-47.png?v=1740438079',
           width: 800,
           height: 600,
         },
@@ -428,7 +428,7 @@ function makeMockActions(): ShopActions {
           publicId: 'content-123',
           image: {
             id: 'img-123',
-            url: 'https://example.com/content-image.jpg',
+            url: 'https://cdn.shopify.com/s/files/1/0633/6574/2742/files/Namnlosdesign-47.png?v=1740438079',
             width: 800,
             height: 600,
           },

package/src/stories/ImageContentWrapper.stories.tsx

@@ -0,0 +1,68 @@
+import {fn} from 'storybook/test'
+
+import {ImageContentWrapper} from '../components/content/image-content-wrapper'
+import {injectMocks} from '../mocks'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Content/ImageContentWrapper',
+  component: ImageContentWrapper,
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    onLoad: fn(),
+  },
+  argTypes: {
+    publicId: {
+      control: 'text',
+    },
+    externalId: {
+      control: 'text',
+    },
+    width: {
+      control: 'number',
+    },
+    height: {
+      control: 'number',
+    },
+    className: {
+      control: 'text',
+    },
+    Loader: {
+      control: 'text',
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ImageContentWrapper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+injectMocks()
+
+export const WithPublicId: Story = {
+  args: {
+    publicId: 'content-123',
+    width: 400,
+    height: 300,
+  },
+}
+
+export const WithExternalId: Story = {
+  args: {
+    externalId: 'external-123',
+    width: 400,
+    height: 300,
+  },
+}
+
+export const WithCustomLoader: Story = {
+  args: {
+    publicId: 'content-123',
+    width: 400,
+    height: 300,
+    Loader: 'Loading image...',
+  },
+}

package/src/stories/MerchantCard.stories.tsx

@@ -31,6 +31,13 @@ type Story = StoryObj<typeof meta>
 injectMocks()
 
 export const Default: Story = {
+  decorators: [
+    Story => (
+      <div style={{maxWidth: 200}}>
+        <Story />
+      </div>
+    ),
+  ],
   args: {
     shop: {
       ...createShop('shop1', 'Amazing Store'),
@@ -40,6 +47,13 @@ export const Default: Story = {
 }
 
 export const CoverImageDark: Story = {
+  decorators: [
+    Story => (
+      <div style={{maxWidth: 200}}>
+        <Story />
+      </div>
+    ),
+  ],
   name: 'Cover Image',
   args: {
     shop: createShop('cover3', 'Midnight Store', {
@@ -50,6 +64,13 @@ export const CoverImageDark: Story = {
 }
 
 export const BrandColorWordmark: Story = {
+  decorators: [
+    Story => (
+      <div style={{maxWidth: 200}}>
+        <Story />
+      </div>
+    ),
+  ],
   name: 'Brand Color + Wordmark',
   args: {
     shop: createShop('brand2', 'Amazing Store', {

package/src/stories/ProductCard.stories.tsx

@@ -34,10 +34,17 @@ type Story = StoryObj<typeof meta>
 injectMocks()
 
 export const Single: Story = {
+  decorators: [
+    Story => (
+      <div style={{maxWidth: 200}}>
+        <Story />
+      </div>
+    ),
+  ],
   args: {
     product: {
       id: '1',
-      title: 'Product 1',
+      title: 'Teapot',
 
       price: {
         amount: '100',
@@ -61,7 +68,7 @@ export const Single: Story = {
       isFavorited: true,
 
       featuredImage: {
-        url: 'https://picsum.photos/400/400',
+        url: 'https://cdn.shopify.com/static/sample-images/teapot.jpg',
         altText: 'Product 1',
       },
     },
@@ -80,6 +87,6 @@ export const Grid: Story = {
     ),
   ],
   args: {
-    product: createProduct('1', 'Product 1', '100', '120'),
+    product: createProduct('1', 'Teapot', '100', '120'),
   },
 }

package/src/stories/ProductLink.stories.tsx

@@ -20,13 +20,13 @@ injectMocks()
 
 export const Default: Story = {
   args: {
-    product: createProduct('1', 'Product 1', '100', '120'),
+    product: createProduct('1', 'Teapot', '100', '120'),
   },
 }
 
 export const WithDiscount: Story = {
   args: {
-    product: createProduct('2', 'Product with Discount', '80', '120'),
+    product: createProduct('2', 'Discounted Teapot', '80', '120'),
   },
 }
 
@@ -41,6 +41,6 @@ export const List: Story = {
     ),
   ],
   args: {
-    product: createProduct('1', 'Product 1', '100', '120'),
+    product: createProduct('1', 'Teapot', '100', '120'),
   },
 }

package/src/stories/QuantitySelector.stories.tsx

@@ -0,0 +1,78 @@
+import {fn} from 'storybook/test'
+
+import {QuantitySelector} from '../components/commerce/quantity-selector'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+type QuantitySelectorProps = React.ComponentProps<typeof QuantitySelector>
+
+const meta: Meta<QuantitySelectorProps> = {
+  title: 'Commerce/QuantitySelector',
+  component: QuantitySelector,
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    quantity: {
+      control: 'number',
+      description: 'Current quantity value',
+    },
+    onQuantityChange: {
+      action: 'quantity changed',
+      description: 'Callback fired when quantity changes',
+    },
+    maxQuantity: {
+      control: 'number',
+      description: 'Maximum allowed quantity',
+    },
+    minQuantity: {
+      control: 'number',
+      description: 'Minimum allowed quantity',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the selector is disabled',
+    },
+  },
+  args: {
+    onQuantityChange: fn(),
+  },
+} satisfies Meta<QuantitySelectorProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    quantity: 2,
+    maxQuantity: 10,
+    minQuantity: 1,
+    disabled: false,
+  },
+}
+
+export const AtMinimum: Story = {
+  args: {
+    quantity: 1,
+    maxQuantity: 10,
+    minQuantity: 1,
+    disabled: false,
+  },
+}
+
+export const AtMaximum: Story = {
+  args: {
+    quantity: 10,
+    maxQuantity: 10,
+    minQuantity: 1,
+    disabled: false,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    quantity: 3,
+    maxQuantity: 10,
+    minQuantity: 1,
+    disabled: true,
+  },
+}

package/src/stories/Search.stories.tsx

@@ -0,0 +1,37 @@
+import {fn} from 'storybook/test'
+
+import {
+  Search,
+  SearchInput,
+  SearchProvider,
+  SearchResultsList,
+} from '../components'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Commerce/Search',
+  component: Search,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Search>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    onProductClick: fn(),
+  },
+}
+
+export const Composite: Story = {
+  render: args => (
+    <SearchProvider {...args}>
+      <SearchInput placeholder="Search..." />
+      <SearchResultsList />
+    </SearchProvider>
+  ),
+}