@shopify/shop-minis-react 0.0.11 → 0.0.12

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

@@ -0,0 +1,262 @@
+import * as React from 'react'
+
+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'
+import {type Shop} from '../../types/minisSDK.generated.d'
+import {Touchable} from '../atoms/touchable'
+
+const merchantCardVariants = cva(
+  'relative w-full aspect-square overflow-hidden rounded-xl border border-grayscale-l20 bg-grayscale-l0 flex flex-col',
+  {
+    variants: {
+      touchable: {
+        true: 'cursor-pointer',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      touchable: true,
+    },
+  }
+)
+
+function formatReviewCount(count: number): string {
+  if (count >= 1000000) {
+    return `${Math.floor(count / 100000) / 10}M`
+  }
+  if (count >= 1000) {
+    return `${Math.floor(count / 1000)}K`
+  }
+  return count.toString()
+}
+
+function normalizeRating(rating: number): number {
+  return Math.round(rating * 10) / 10
+}
+
+export interface MerchantCardRootProps
+  extends React.ComponentProps<'div'>,
+    VariantProps<typeof merchantCardVariants> {
+  touchable?: boolean
+  asChild?: boolean
+  onPress?: () => void
+}
+
+function MerchantCardRoot({
+  className,
+  touchable = true,
+  asChild = false,
+  onPress,
+  ...props
+}: MerchantCardRootProps) {
+  const Comp = asChild ? SlotPrimitive.Slot : 'div'
+
+  const content = (
+    <Comp
+      className={cn(merchantCardVariants({touchable}), className)}
+      {...props}
+    />
+  )
+
+  if (touchable && onPress) {
+    return (
+      <Touchable
+        onClick={onPress}
+        whileTap={{opacity: 0.7}}
+        transition={{
+          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},
+        }}
+      >
+        {content}
+      </Touchable>
+    )
+  }
+
+  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,
+  alt,
+  ...props
+}: React.ComponentProps<'img'> & {
+  src?: string
+  alt?: string
+}) {
+  return src ? (
+    <img
+      data-slot="merchant-card-image"
+      src={src}
+      alt={alt}
+      className={cn('w-full h-full object-cover', className)}
+      {...props}
+    />
+  ) : (
+    <div className="w-full h-full bg-grayscale-l10" />
+  )
+}
+
+function MerchantCardLogo({
+  className,
+  src,
+  alt,
+  ...props
+}: React.ComponentProps<'div'> & {
+  src?: string
+  alt?: string
+}) {
+  return (
+    <div
+      data-slot="merchant-card-logo"
+      className={cn(
+        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
+        'w-14 h-14 rounded-xl',
+        'flex items-center justify-center overflow-hidden',
+        className
+      )}
+      {...props}
+    >
+      {src ? (
+        <img src={src} alt={alt} className="w-full h-full object-cover" />
+      ) : (
+        <div className="w-full h-full bg-grayscale-l20" />
+      )}
+    </div>
+  )
+}
+
+function MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="merchant-card-info"
+      className={cn('p-3 space-y-1 flex-shrink-0', className)}
+      {...props}
+    />
+  )
+}
+
+function MerchantCardName({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'h3'>) {
+  return (
+    <h3
+      data-slot="merchant-card-name"
+      className={cn(
+        'text-sm font-medium text-grayscale-d100',
+        'truncate overflow-hidden whitespace-nowrap text-ellipsis',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h3>
+  )
+}
+
+function MerchantCardRating({
+  className,
+  rating,
+  reviewCount,
+  ...props
+}: React.ComponentProps<'div'> & {
+  rating?: number | null
+  reviewCount?: number
+}) {
+  if (!rating || !reviewCount) return null
+
+  return (
+    <div
+      data-slot="merchant-card-rating"
+      className={cn(
+        'flex items-center gap-1 text-sm text-grayscale-d100',
+        className
+      )}
+      {...props}
+    >
+      <Star className="h-3.5 w-3.5 fill-current" />
+      <>
+        {normalizeRating(rating)} ({formatReviewCount(reviewCount)})
+      </>
+    </div>
+  )
+}
+
+export interface MerchantCardProps {
+  shop: Shop
+  touchable?: boolean
+}
+
+// Composed MerchantCard component
+function MerchantCard({shop, touchable = true}: MerchantCardProps) {
+  const {navigateToShop} = useShopNavigation()
+
+  const {
+    id,
+    name,
+    logoImage,
+    reviewAnalytics: {averageRating, reviewCount},
+  } = shop
+
+  const handlePress = React.useCallback(() => {
+    if (!touchable) return
+    navigateToShop({shopId: id})
+  }, [navigateToShop, id, touchable])
+
+  return (
+    <MerchantCardRoot touchable={touchable} onPress={handlePress}>
+      <MerchantCardImageContainer>
+        {/* TODO: Add featured image */}
+        <MerchantCardImage src={undefined} alt={`${name} featured image`} />
+        <MerchantCardLogo src={logoImage?.url} alt={`${name} logo`} />
+      </MerchantCardImageContainer>
+
+      <MerchantCardInfo>
+        <MerchantCardName>{name}</MerchantCardName>
+        <MerchantCardRating rating={averageRating} reviewCount={reviewCount} />
+      </MerchantCardInfo>
+    </MerchantCardRoot>
+  )
+}
+
+// Export with Object.assign pattern
+export const MerchantCardPrimitive = Object.assign(MerchantCardRoot, {
+  ImageContainer: MerchantCardImageContainer,
+  Image: MerchantCardImage,
+  Logo: MerchantCardLogo,
+  Info: MerchantCardInfo,
+  Name: MerchantCardName,
+  Rating: MerchantCardRating,
+})
+
+export {
+  // Composed component
+  MerchantCard,
+  // Primitive components for custom composition
+  MerchantCardRoot,
+  MerchantCardImageContainer,
+  MerchantCardImage,
+  MerchantCardLogo,
+  MerchantCardInfo,
+  MerchantCardName,
+  MerchantCardRating,
+}

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

@@ -96,6 +96,8 @@ function ProductCardImageContainer({
     <div
       data-slot="product-card-image-container"
       className={cn(
+        // Ensure the product image is stretched to the full size of the container (can't use width/height: 100% because of flex)
+        'flex justify-stretch items-stretch',
         'relative overflow-hidden rounded-xl border border-gray-200',
         'w-full aspect-square',
         variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',
@@ -116,7 +118,7 @@ function ProductCardImage({
   alt?: string
 }) {
   return (
-    <div className="w-full h-full bg-gray-100 flex items-center justify-center">
+    <div className="bg-gray-100 flex items-center justify-center">
       {src ? (
         <img
           data-slot="product-card-image"

package/src/components/index.ts

@@ -2,6 +2,7 @@ export * from './MinisContainer'
 
 export * from './commerce/product-card'
 export * from './commerce/product-link'
+export * from './commerce/merchant-card'
 
 export * from './atoms/accordion'
 export * from './atoms/alert'

package/src/hooks/index.ts

@@ -1,5 +1,9 @@
 // - User Hooks
+export * from './user/useRecentProducts'
+export * from './user/useRecentShops'
+export * from './user/useSavedProducts'
 export * from './user/useSavedProductsActions'
+export * from './user/useFollowedShops'
 export * from './user/useFollowedShopsActions'
 export * from './user/useCurrentUser'
 export * from './user/useOrders'
@@ -9,8 +13,14 @@ export * from './user/useBuyerAttributes'
 export * from './product/useProductListActions'
 export * from './product/useProductLists'
 export * from './product/useProductList'
+export * from './product/useProduct'
+export * from './product/useProducts'
+export * from './product/useProductVariants'
+export * from './product/useProductMedia'
+export * from './product/useProductSearch'
 export * from './product/useRecommendedProducts'
 export * from './product/usePopularProducts'
+export * from './product/useCuratedProducts'
 
 // - Storage Hooks
 export * from './storage/useAsyncStorage'
@@ -23,6 +33,7 @@ export * from './navigation/useCloseMini'
 export * from './navigation/useDeeplink'
 
 // - Shop Hooks
+export * from './shop/useShop'
 export * from './shop/useShopCartActions'
 export * from './shop/useRecommendedShops'
 

package/src/hooks/product/useCuratedProducts.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useCuratedProducts',
+  category: 'hooks',
+  subCategory: 'product',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useCuratedProducts` hook enables fetching lists of products curated by the Shop team.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useCuratedProducts.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseCuratedProductsGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/product/useCuratedProducts.example.tsx

@@ -0,0 +1,10 @@
+import {useCuratedProducts} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {products, loading, error} = useCuratedProducts({
+    handle: 'ar-models',
+    requiredTags: ['furniture'],
+  })
+
+  console.log({products, loading, error})
+}

package/src/hooks/product/useCuratedProducts.ts

@@ -0,0 +1,41 @@
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  Product,
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+} from '../../types'
+
+interface UseCuratedProductsParams extends PaginatedDataHookOptionsBase {
+  handle: string
+  requiredTags?: string[]
+  anyOfTags?: string[]
+}
+
+interface UseCuratedProductsReturns extends PaginatedDataHookReturnsBase {
+  products: Product[] | null
+}
+
+/**
+ * @param options - The options for the query
+ */
+export const useCuratedProducts = (
+  params: UseCuratedProductsParams
+): UseCuratedProductsReturns => {
+  const {getCuratedProducts} = useShopActions()
+  const {skip, ...shopActionParams} = params ?? {}
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getCuratedProducts,
+    shopActionParams,
+    {
+      skip,
+      hook: 'useCuratedProducts',
+    }
+  )
+
+  return {
+    ...rest,
+    products: data,
+  }
+}

package/src/hooks/product/useProduct.ts

@@ -0,0 +1,45 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
+import {DataHookOptionsBase, DataHookReturnsBase, Product} from '../../types'
+
+export interface UseProductParams extends DataHookOptionsBase {
+  /**
+   * The product ID to fetch.
+   */
+  id: string
+}
+
+interface UseProductReturns extends DataHookReturnsBase {
+  /**
+   * The product returned from the query.
+   */
+  product: Product | null
+}
+
+export const useProduct = (params: UseProductParams): UseProductReturns => {
+  const {getProduct} = useShopActions()
+  const {id, skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsDataFetching(
+    getProduct,
+    {
+      id,
+      ...restParams,
+    },
+    {
+      skip,
+      hook: 'useProduct',
+    }
+  )
+
+  const product = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    product,
+  }
+}

package/src/hooks/product/useProductMedia.ts

@@ -0,0 +1,51 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  ProductMedia,
+} from '../../types'
+
+export interface UseProductMediaParams extends PaginatedDataHookOptionsBase {
+  /**
+   * The product ID to fetch media for.
+   */
+  id: string
+}
+
+interface UseProductMediaReturns extends PaginatedDataHookReturnsBase {
+  /**
+   * The product media returned from the query.
+   */
+  media: ProductMedia[] | null
+}
+
+export const useProductMedia = (
+  params: UseProductMediaParams
+): UseProductMediaReturns => {
+  const {getProductMedia} = useShopActions()
+  const {id, skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getProductMedia,
+    {
+      id,
+      ...restParams,
+    },
+    {
+      skip,
+      hook: 'useProductMedia',
+    }
+  )
+
+  const media = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    media,
+  }
+}

package/src/hooks/product/useProductSearch.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useProductSearch',
+  category: 'hooks',
+  subCategory: 'product',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useProductSearch` hook fetches products based on a search query.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useProductSearch.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseProductSearchGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/product/useProductSearch.example.tsx

@@ -0,0 +1,13 @@
+import {useProductSearch} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {products, loading} = useProductSearch({
+    query: 'shirt',
+    first: 10,
+    filters: {
+      color: ['RED'],
+    },
+  })
+
+  console.log({products, loading})
+}

package/src/hooks/product/useProductSearch.ts

@@ -0,0 +1,95 @@
+import {useCallback, useEffect, useMemo, useState} from 'react'
+
+import debounce from 'lodash/debounce'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  Product,
+  ProductFilters,
+  ProductSearchSortBy,
+} from '../../types'
+
+export interface UseProductSearchParams extends PaginatedDataHookOptionsBase {
+  /**
+   * The search query.
+   */
+  query: string
+  /**
+   * The filters to apply to the search.
+   */
+  filters?: ProductFilters
+  /**
+   * The sort order of the results.
+   */
+  sortBy?: ProductSearchSortBy
+  /**
+   * Whether to include sensitive products.
+   */
+  includeSensitive?: boolean
+}
+
+interface UseProductSearchReturns extends PaginatedDataHookReturnsBase {
+  /**
+   * The products returned from the query.
+   */
+  products: Product[] | null
+}
+
+export const useProductSearch = (
+  params: UseProductSearchParams
+): UseProductSearchReturns => {
+  const {getProductSearch} = useShopActions()
+  const {
+    query,
+    filters,
+    sortBy,
+    includeSensitive = false,
+    skip = false,
+    ...restParams
+  } = params ?? {}
+
+  const [debouncedQuery, setDebouncedQuery] = useState<string>(query)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedSetQuery = useCallback(
+    debounce((newQuery: string) => {
+      setDebouncedQuery(newQuery)
+    }, 300),
+    []
+  )
+
+  useEffect(() => {
+    debouncedSetQuery(query)
+
+    return () => {
+      debouncedSetQuery.cancel()
+    }
+  }, [query, debouncedSetQuery])
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getProductSearch,
+    {
+      query: debouncedQuery,
+      filters,
+      sortBy,
+      includeSensitive,
+      ...restParams,
+    },
+    {
+      skip,
+      hook: 'useProductSearch',
+    }
+  )
+
+  const products = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    products,
+  }
+}

package/src/hooks/product/useProductVariants.ts

@@ -0,0 +1,48 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  ProductVariant,
+} from '../../types'
+
+export interface UseProductVariantsParams extends PaginatedDataHookOptionsBase {
+  /**
+   * The product ID to fetch variants for.
+   */
+  id: string
+}
+
+interface UseProductVariantsReturns extends PaginatedDataHookReturnsBase {
+  /**
+   * The product variants returned from the query.
+   */
+  variants: ProductVariant[] | null
+}
+
+export const useProductVariants = (
+  params: UseProductVariantsParams
+): UseProductVariantsReturns => {
+  const {getProductVariants} = useShopActions()
+  const {skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getProductVariants,
+    restParams,
+    {
+      skip,
+      hook: 'useProductVariants',
+    }
+  )
+
+  const variants = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    variants,
+  }
+}