@shopify/shop-minis-react 0.0.32 → 0.0.34

package/src/components/commerce/merchant-card.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
+import {createContext, useCallback, useContext, useMemo} from 'react'
 
 import {type Shop} from '@shopify/shop-minis-platform'
-import {cva, type VariantProps} from 'class-variance-authority'
 import {Star} from 'lucide-react'
-import {Slot as SlotPrimitive} from 'radix-ui'
 
 import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {cn} from '../../lib/utils'
@@ -15,52 +14,62 @@ import {
   normalizeRating,
 } from '../../utils'
 import {isDarkColor} from '../../utils/colors'
-import {ThumbhashImage} from '../atoms/thumbhash-image'
+import {Image} from '../atoms/image'
 import {Touchable} from '../atoms/touchable'
 
-const merchantCardVariants = cva(
-  'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200',
-  {
-    variants: {
-      touchable: {
-        true: 'cursor-pointer',
-        false: '',
-      },
-    },
-    defaultVariants: {
-      touchable: true,
-    },
-  }
+interface MerchantCardContextValue {
+  // Core data
+  shop: Shop
+
+  // Derived data
+  cardTheme: ExtractedBrandTheme
+
+  // UI configuration
+  touchable: boolean
+  featuredImagesLimit: number
+
+  // Actions
+  onClick: () => void
+}
+
+const MerchantCardContext = createContext<MerchantCardContextValue | undefined>(
+  undefined
 )
 
-export interface MerchantCardRootProps
-  extends React.ComponentProps<'div'>,
-    VariantProps<typeof merchantCardVariants> {
-  touchable?: boolean
-  asChild?: boolean
-  onPress?: () => void
+function useMerchantCardContext() {
+  const context = useContext(MerchantCardContext)
+  if (!context) {
+    throw new Error(
+      'useMerchantCardContext must be used within a MerchantCardProvider'
+    )
+  }
+  return context
 }
 
-function MerchantCardRoot({
+function MerchantCardContainer({
   className,
-  touchable = true,
-  asChild = false,
-  onPress,
   ...props
-}: MerchantCardRootProps) {
-  const Comp = asChild ? SlotPrimitive.Slot : 'div'
+}: React.ComponentProps<'div'>) {
+  const {touchable, cardTheme, onClick} = useMerchantCardContext()
 
   const content = (
-    <Comp
-      className={cn(merchantCardVariants({touchable}), className)}
+    <div
+      style={{
+        backgroundColor: cardTheme.backgroundColor,
+      }}
+      className={cn(
+        'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square',
+
+        className
+      )}
       {...props}
     />
   )
 
-  if (touchable && onPress) {
+  if (touchable && onClick) {
     return (
       <Touchable
-        onClick={onPress}
+        onClick={onClick}
         whileTap={{opacity: 0.7}}
         transition={{
           opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},
@@ -74,19 +83,6 @@ function MerchantCardRoot({
   return content
 }
 
-function MerchantCardImageContainer({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="merchant-card-image-container"
-      className={cn('relative overflow-hidden w-full flex-grow', className)}
-      {...props}
-    />
-  )
-}
-
 function MerchantCardImage({
   className,
   src,
@@ -104,12 +100,12 @@ function MerchantCardImage({
 
   if (thumbhash) {
     return (
-      <ThumbhashImage
+      <Image
         data-slot="merchant-card-image"
         src={src}
         alt={alt}
         thumbhash={thumbhash}
-        className={cn('w-full h-full object-cover', className)}
+        className={cn(className)}
         {...props}
       />
     )
@@ -120,23 +116,28 @@ function MerchantCardImage({
       data-slot="merchant-card-image"
       src={src}
       alt={alt}
-      className={cn('w-full h-full object-cover', className)}
+      className={cn('size-full object-cover', className)}
       {...props}
     />
   )
 }
 
-function MerchantCardLogo({
-  className,
-  src,
-  alt,
-  shopName,
-  ...props
-}: React.ComponentProps<'div'> & {
-  src?: string
-  alt?: string
-  shopName?: string
-}) {
+function MerchantCardLogo({className, ...props}: React.ComponentProps<'div'>) {
+  const {shop} = useMerchantCardContext()
+  const {name, visualTheme} = shop
+
+  const logoAverageColor = visualTheme?.brandSettings?.colors?.logoAverage
+  const logoDominantColor = visualTheme?.brandSettings?.colors?.logoDominant
+  const logoColor = logoAverageColor || logoDominantColor
+
+  const logoBackgroundClassName = useMemo(
+    () => (logoColor && isDarkColor(logoColor) ? 'bg-white' : 'bg-gray-800'),
+    [logoColor]
+  )
+
+  const logoUrl = visualTheme?.logoImage?.url
+  const altText = `${name} logo`
+
   return (
     <div
       data-slot="merchant-card-logo"
@@ -144,16 +145,21 @@ function MerchantCardLogo({
         'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10',
         'w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm',
         'flex items-center justify-center overflow-hidden',
+        logoBackgroundClassName,
         className
       )}
       {...props}
     >
-      {src ? (
-        <img src={src} alt={alt} className="w-full h-full object-cover" />
+      {logoUrl ? (
+        <img
+          src={logoUrl}
+          alt={altText}
+          className="w-full h-full object-cover"
+        />
       ) : (
         <div className="w-full h-full bg-gray-200 flex items-center justify-center">
           <span className="text-gray-600 font-semibold text-lg">
-            {shopName?.slice(0, 1)}
+            {name?.slice(0, 1)}
           </span>
         </div>
       )}
@@ -162,11 +168,23 @@ function MerchantCardLogo({
 }
 
 function MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {
+  const {cardTheme} = useMerchantCardContext()
+
+  const isDarkTheme = useMemo(() => {
+    return (
+      cardTheme.backgroundColor !== 'white' &&
+      isDarkColor(cardTheme.backgroundColor)
+    )
+  }, [cardTheme.backgroundColor])
+
+  const textColor = isDarkTheme ? 'text-primary-foreground' : 'text-foreground'
+
   return (
     <div
       data-slot="merchant-card-info"
       className={cn(
-        'p-3 space-y-2 flex-shrink-0 flex items-center justify-between',
+        'p-3 flex-shrink-0 flex flex-col min-w-0',
+        textColor,
         className
       )}
       {...props}
@@ -179,31 +197,36 @@ function MerchantCardName({
   children,
   ...props
 }: React.ComponentProps<'h3'>) {
+  const {shop} = useMerchantCardContext()
+  const {name} = shop
+  const nameContent = children ?? name
+
   return (
     <h3
       data-slot="merchant-card-name"
-      className={cn(
-        'text-sm font-medium text-grayscale-d100',
-        'truncate overflow-hidden whitespace-nowrap text-ellipsis',
-        className
-      )}
+      className={cn('text-sm font-medium truncate', className)}
       {...props}
     >
-      {children}
+      {nameContent}
     </h3>
   )
 }
 
 function MerchantCardRating({
   className,
-  rating,
-  reviewCount,
+
   ...props
 }: React.ComponentProps<'div'> & {
   rating?: number | null
   reviewCount?: number
 }) {
-  if (!rating || !reviewCount) return null
+  const {shop} = useMerchantCardContext()
+
+  const {
+    reviewAnalytics: {averageRating, reviewCount},
+  } = shop
+
+  if (!averageRating || !reviewCount) return null
 
   return (
     <div
@@ -213,21 +236,61 @@ function MerchantCardRating({
     >
       <Star className="h-3 w-3 fill-current" />
       <span className="text-xs">
-        {normalizeRating(rating)} ({formatReviewCount(reviewCount)})
+        {normalizeRating(averageRating)} ({formatReviewCount(reviewCount)})
       </span>
     </div>
   )
 }
 
-function MerchantCardBrandedHeader({
-  shop,
-  cardTheme,
-  logoBackgroundClassName,
-}: {
-  shop: Shop
-  cardTheme: ExtractedBrandTheme
-  logoBackgroundClassName?: string
-}) {
+function MerchantCardDefaultHeader({withLogo = false}: {withLogo?: boolean}) {
+  const {shop, cardTheme, featuredImagesLimit} = useMerchantCardContext()
+  const {visualTheme} = shop
+
+  const featuredImages = useMemo(
+    () => getFeaturedImages(visualTheme, featuredImagesLimit),
+    [visualTheme, featuredImagesLimit]
+  )
+
+  const numberOfFeaturedImages = featuredImages?.length ?? 0
+
+  const displayDefaultCover = () => {
+    if (numberOfFeaturedImages > 0) {
+      const heightClass = numberOfFeaturedImages === 2 ? 'h-full' : 'h-1/2'
+      return featuredImages?.map((image, index) => (
+        <div className={`z-0 w-1/2 ${heightClass}`} key={image.url || index}>
+          <MerchantCardImage
+            src={image.url}
+            alt={image.altText ?? undefined}
+            thumbhash={image.thumbhash ?? undefined}
+            className="aspect-square"
+          />
+        </div>
+      ))
+    } else if (cardTheme.type === 'coverImage') {
+      return (
+        <MerchantCardImage
+          src={cardTheme.coverImageUrl}
+          thumbhash={cardTheme.coverImageThumbhash}
+        />
+      )
+    }
+  }
+
+  return (
+    <div className="w-full h-full bg-muted relative flex flex-wrap overflow-hidden">
+      {withLogo && (
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
+          <MerchantCardLogo />
+        </div>
+      )}
+
+      {displayDefaultCover()}
+    </div>
+  )
+}
+
+function MerchantCardBrandedHeader({withLogo = false}: {withLogo?: boolean}) {
+  const {shop, cardTheme} = useMerchantCardContext()
   const wordmarkImage = shop.visualTheme?.brandSettings?.headerTheme?.wordmark
 
   return (
@@ -238,7 +301,6 @@ function MerchantCardBrandedHeader({
             src={cardTheme.coverImageUrl}
             alt={shop.name}
             thumbhash={cardTheme.coverImageThumbhash ?? undefined}
-            className="size-full"
           />
 
           <div className="absolute inset-0 z-[1] bg-black/20" />
@@ -252,175 +314,112 @@ function MerchantCardBrandedHeader({
         </>
       )}
 
-      <div className="absolute inset-0 z-[1] flex items-center justify-center">
-        {wordmarkImage ? (
-          <img
-            src={wordmarkImage.url}
-            alt={wordmarkImage.altText || shop.name}
-            className="max-h-16 min-h-10 max-w-28 object-contain"
-            data-testid="store-data-wordmark"
-          />
-        ) : (
-          <MerchantCardLogo
-            src={shop.visualTheme?.logoImage?.url}
-            alt={`${shop.name} logo`}
-            shopName={shop.name}
-            className={logoBackgroundClassName}
-          />
-        )}
-      </div>
+      {withLogo && (
+        <div className="absolute inset-0 z-[1] flex items-center justify-center">
+          {wordmarkImage ? (
+            <img
+              src={wordmarkImage.url}
+              alt={wordmarkImage.altText || shop.name}
+              className="max-h-16 min-h-10 max-w-28 object-contain"
+              data-testid="store-data-wordmark"
+            />
+          ) : (
+            <MerchantCardLogo />
+          )}
+        </div>
+      )}
     </div>
   )
 }
+
+interface MerchantCardHeaderProps {
+  isDefault?: boolean
+  withLogo?: boolean
+}
+
+function MerchantCardHeader({
+  isDefault,
+  withLogo,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & MerchantCardHeaderProps) {
+  const {cardTheme} = useMerchantCardContext()
+
+  const isBranded =
+    cardTheme.type === 'coverImage' || cardTheme.type === 'brandColor'
+
+  return (
+    <div
+      className={cn('relative overflow-hidden flex-1 flex-wrap', className)}
+      {...props}
+    >
+      {isBranded && !isDefault ? (
+        <MerchantCardBrandedHeader withLogo={withLogo} />
+      ) : (
+        <MerchantCardDefaultHeader withLogo={withLogo} />
+      )}
+    </div>
+  )
+}
+
 export interface MerchantCardProps {
   shop: Shop
   touchable?: boolean
-  fixedHeight?: boolean
   featuredImagesLimit?: number
+  children?: React.ReactNode
 }
 
 function MerchantCard({
   shop,
   touchable = true,
-  fixedHeight = false,
   featuredImagesLimit = 4,
+  children,
 }: MerchantCardProps) {
   const {navigateToShop} = useShopNavigation()
 
-  const {
-    id,
-    name,
-    reviewAnalytics: {averageRating, reviewCount},
-    visualTheme,
-  } = shop
+  const {id, visualTheme} = shop
 
-  const handlePress = React.useCallback(() => {
+  const handleClick = useCallback(() => {
     if (!touchable) return
     navigateToShop({shopId: id})
   }, [navigateToShop, id, touchable])
 
-  const featuredImages = React.useMemo(
-    () => getFeaturedImages(visualTheme, featuredImagesLimit),
-    [visualTheme, featuredImagesLimit]
-  )
-
-  const numberOfFeaturedImages = featuredImages?.length ?? 0
-
-  const logoAverageColor = visualTheme?.brandSettings?.colors?.logoAverage
-  const logoDominantColor = visualTheme?.brandSettings?.colors?.logoDominant
-  const logoColor = logoAverageColor || logoDominantColor
-
-  const logoBackgroundClassName = React.useMemo(
-    () => (logoColor && isDarkColor(logoColor) ? 'bg-white' : 'bg-gray-800'),
-    [logoColor]
-  )
-
-  const cardTheme = React.useMemo(
+  const cardTheme = useMemo(
     () => extractBrandTheme(visualTheme?.brandSettings),
     [visualTheme?.brandSettings]
   )
 
-  const isDarkTheme = React.useMemo(() => {
-    return (
-      cardTheme.backgroundColor !== 'white' &&
-      isDarkColor(cardTheme.backgroundColor)
-    )
-  }, [cardTheme.backgroundColor])
-
-  const textColor = isDarkTheme ? 'text-primary-foreground' : 'text-foreground'
-
-  const hasBrandedHeader =
-    cardTheme.type === 'coverImage' || cardTheme.type === 'brandColor'
+  const contextValue = useMemo<MerchantCardContextValue>(
+    () => ({
+      shop,
+      cardTheme,
+      touchable,
+      featuredImagesLimit,
+      onClick: handleClick,
+    }),
+    [shop, cardTheme, touchable, featuredImagesLimit, handleClick]
+  )
 
   return (
-    <div className={cn('flex', fixedHeight ? '' : 'aspect-square')}>
-      <MerchantCardRoot
-        touchable={touchable}
-        onPress={handlePress}
-        style={{
-          backgroundColor: cardTheme.backgroundColor,
-        }}
-      >
-        <MerchantCardImageContainer
-          className={cn(
-            'relative overflow-hidden w-full',
-            fixedHeight ? 'h-[120px]' : 'flex-1'
-          )}
-        >
-          {hasBrandedHeader ? (
-            <MerchantCardBrandedHeader
-              shop={shop}
-              cardTheme={cardTheme}
-              logoBackgroundClassName={logoBackgroundClassName}
-            />
-          ) : (
-            <>
-              <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
-                <MerchantCardLogo
-                  src={visualTheme?.logoImage?.url}
-                  alt={`${name} logo`}
-                  shopName={name}
-                  className={logoBackgroundClassName}
-                  data-testid="merchant-logo"
-                />
-              </div>
-
-              {numberOfFeaturedImages > 0 ? (
-                featuredImages?.map((image, index) => (
-                  <div
-                    className="z-0 flex h-full flex-1"
-                    key={image.url || index}
-                  >
-                    <MerchantCardImage
-                      src={image.url}
-                      alt={image.altText || ''}
-                      thumbhash={image.thumbhash ?? undefined}
-                    />
-                  </div>
-                ))
-              ) : (
-                <div
-                  className="h-20 bg-gray-100"
-                  data-testid="image-fallback"
-                />
-              )}
-            </>
-          )}
-        </MerchantCardImageContainer>
-
-        <MerchantCardInfo className="flex items-center justify-between p-3">
-          <div className="flex flex-col items-start gap-2">
-            <div className="flex min-w-0 flex-1 flex-col">
-              <MerchantCardName
-                className={cn(
-                  'line-clamp-1 overflow-hidden text-ellipsis',
-                  textColor
-                )}
-              >
-                {name}
-              </MerchantCardName>
-
-              <MerchantCardRating
-                rating={averageRating}
-                reviewCount={reviewCount}
-                className={textColor}
-              />
-            </div>
-          </div>
-        </MerchantCardInfo>
-      </MerchantCardRoot>
-    </div>
+    <MerchantCardContext.Provider value={contextValue}>
+      {children ?? (
+        <MerchantCardContainer>
+          <MerchantCardHeader withLogo />
+          <MerchantCardInfo>
+            <MerchantCardName />
+            <MerchantCardRating />
+          </MerchantCardInfo>
+        </MerchantCardContainer>
+      )}
+    </MerchantCardContext.Provider>
   )
 }
 
-export const MerchantCardPrimitive = Object.assign(MerchantCardRoot, {
-  ImageContainer: MerchantCardImageContainer,
-  Image: MerchantCardImage,
-  Logo: MerchantCardLogo,
-  Info: MerchantCardInfo,
-  Name: MerchantCardName,
-  Rating: MerchantCardRating,
-  BrandedHeader: MerchantCardBrandedHeader,
-})
-
-export {MerchantCard}
+export {
+  MerchantCard,
+  MerchantCardContainer,
+  MerchantCardHeader,
+  MerchantCardInfo,
+  MerchantCardName,
+  MerchantCardRating,
+}

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

@@ -8,8 +8,8 @@ import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
 import {FavoriteButton} from '../atoms/favorite-button'
+import {Image} from '../atoms/image'
 import {ProductVariantPrice} from '../atoms/product-variant-price'
-import {ThumbhashImage} from '../atoms/thumbhash-image'
 import {Touchable} from '../atoms/touchable'
 import {Badge} from '../ui/badge'
 
@@ -115,7 +115,7 @@ function ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {
   const renderImageElement = useCallback(
     (src: string) => {
       const imageElement = thumbhash ? (
-        <ThumbhashImage
+        <Image
           data-slot="product-card-image"
           src={src}
           alt={alt}

package/src/components/content/image-content-wrapper.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import {ContentWrapper} from '../atoms/content-wrapper'
+import {Image} from '../atoms/image'
 
 type ImageContentWrapperProps = (
   | {publicId: string; externalId?: never}
@@ -26,14 +26,21 @@ export function ImageContentWrapper({
       {({content, loading}) => {
         if (loading) return Loader ? <>{Loader}</> : null
 
+        const aspectRatio =
+          content?.image?.width && content?.image?.height
+            ? content.image.width / content.image.height
+            : undefined
+
         return (
-          <img
+          <Image
             src={content?.image?.url}
+            thumbhash={content?.image?.thumbhash}
             width={width}
             height={height}
             alt={content?.title}
             onLoad={onLoad}
             className={className}
+            aspectRatio={aspectRatio}
           />
         )
       }}

package/src/components/index.ts

@@ -16,7 +16,7 @@ export * from './navigation/transition-link'
 export * from './atoms/button'
 export * from './atoms/favorite-button'
 export * from './atoms/icon-button'
-export * from './atoms/thumbhash-image'
+export * from './atoms/image'
 export * from './atoms/touchable'
 export * from './atoms/long-press-detector'
 export * from './atoms/alert-dialog'

package/src/hooks/content/useCreateImageContent.ts

@@ -8,7 +8,6 @@ import {
 
 import {useHandleAction} from '../../internal/useHandleAction'
 import {useShopActions} from '../../internal/useShopActions'
-import {fileToDataUri} from '../../utils'
 import {useImageUpload} from '../storage/useImageUpload'
 
 interface CreateImageContentParams {
@@ -48,12 +47,7 @@ export const useCreateImageContent = (): UseCreateImageContentReturns => {
         throw new Error('Invalid file type: must be an image')
       }
 
-      const [uploadImageResult] = await uploadImage([
-        {
-          mimeType: image.type,
-          uri: await fileToDataUri(image),
-        },
-      ])
+      const [uploadImageResult] = await uploadImage(image)
       const uploadImageUrl = uploadImageResult.imageUrl
 
       if (!uploadImageUrl) {