@shopify/shop-minis-react 0.0.21 → 0.0.23

package/src/components/commerce/quantity-selector.tsx

@@ -0,0 +1,92 @@
+import {useCallback, useEffect, useState} from 'react'
+
+import {Minus, Plus} from 'lucide-react'
+
+import {cn} from '../../lib/utils'
+import {IconButton} from '../atoms/icon-button'
+
+interface QuantitySelectorProps {
+  quantity: number
+  onQuantityChange: (quantity: number) => void
+  maxQuantity: number
+  minQuantity?: number
+  disabled?: boolean
+}
+
+export const QuantitySelector = ({
+  quantity: _quantity,
+  onQuantityChange,
+  maxQuantity,
+  minQuantity = 1,
+  disabled = false,
+}: QuantitySelectorProps) => {
+  const [quantity, setQuantity] = useState(_quantity)
+
+  useEffect(() => {
+    setQuantity(_quantity)
+  }, [_quantity])
+
+  useEffect(() => {
+    onQuantityChange(quantity)
+  }, [quantity, onQuantityChange])
+
+  const incrementDisabled = disabled || quantity >= maxQuantity
+  const decrementDisabled = disabled || quantity <= minQuantity
+
+  const incrementQuantity = useCallback(() => {
+    if (incrementDisabled) return
+    const newQuantity = quantity + 1 > maxQuantity ? quantity : quantity + 1
+    setQuantity(newQuantity)
+  }, [incrementDisabled, quantity, maxQuantity])
+
+  const decrementQuantity = useCallback(() => {
+    if (decrementDisabled) return
+    const newQuantity = quantity - 1 < minQuantity ? quantity : quantity - 1
+    setQuantity(newQuantity)
+  }, [decrementDisabled, quantity, minQuantity])
+
+  return (
+    <>
+      <div
+        data-testid="QuantitySelector"
+        className={cn('inline-flex w-auto bg-tertiary rounded-[8px]')}
+      >
+        <div
+          className={cn(
+            'flex h-space-32 items-center self-center overflow-hidden rounded-radius-8 bg-bg-fill-secondary',
+            `p-space-8`
+          )}
+        >
+          <IconButton
+            Icon={Minus}
+            onClick={decrementQuantity}
+            buttonStyles="transition bg-transparent"
+            filled={false}
+            size="sm"
+            iconStyles={cn(
+              decrementDisabled ? 'text-background' : 'text-foreground',
+              'stroke-3'
+            )}
+          />
+
+          <div className={cn('grow', `w-[20px]`)}>
+            <span className="flex items-center justify-center w-full h-full font-medium text-[10px]">
+              {quantity}
+            </span>
+          </div>
+          <IconButton
+            Icon={Plus}
+            onClick={incrementQuantity}
+            buttonStyles="transition bg-transparent"
+            filled={false}
+            size="sm"
+            iconStyles={cn(
+              incrementDisabled ? 'text-background' : 'text-secondary',
+              'stroke-3'
+            )}
+          />
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './commerce/product-link'
 export * from './commerce/merchant-card'
 export * from './commerce/product-card-skeleton'
 export * from './commerce/merchant-card-skeleton'
+export * from './commerce/quantity-selector'
 
 export * from './navigation/transition-container'
 export * from './navigation/transition-link'
@@ -16,6 +17,7 @@ export * from './atoms/thumbhash-image'
 export * from './atoms/touchable'
 export * from './atoms/alert-dialog'
 export * from './atoms/list'
+export * from './atoms/video-player'
 
 export * from './ui/accordion'
 export * from './ui/alert'

package/src/mocks.ts

@@ -15,27 +15,145 @@ export const createProduct = (
     compareAtPrice: {amount: compareAtPrice, currencyCode: 'USD'},
   }),
   reviewAnalytics: {averageRating: 4.5, reviewCount: 10},
-  shop: {id: 'shop1', name: 'Mock Shop'},
+  shop: createShop('shop1', 'Mock Shop'),
   defaultVariantId: `variant-${id}`,
   isFavorited: false,
-  featuredImage: {url: `https://picsum.photos/400/400`, altText: title},
-})
-
-export const createShop = (id: string, name: string) => ({
-  id,
-  name,
-  isFollowing: false,
-  primaryDomain: {
-    url: `https://${name.toLowerCase().replace(/\s+/g, '-')}.com`,
-  },
-  reviewAnalytics: {averageRating: 4.3, reviewCount: 50},
-  visualTheme: {
-    id: 'visual-theme-1',
-    featuredImages: [{url: `https://picsum.photos/400/400`, sensitive: false}],
-    logoImage: {url: `https://picsum.photos/100/400`, sensitive: 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`,
+    altText: title,
   },
 })
 
+export const createShop = (
+  id: string,
+  name: string,
+  options?: {
+    themeType?: 'coverImage' | 'brandColor' | 'logoColor' | 'none'
+    withBrandSettings?: boolean
+    primaryColor?: string
+    logoDominantColor?: string
+    logoAverageColor?: string
+    coverDominantColor?: string
+    wordmarkUrl?: string
+    coverImageUrl?: string
+    featuredImagesLimit?: number
+  }
+) => {
+  // Determine theme configuration
+  const themeType = options?.themeType || 'none'
+  const shouldHaveBrandSettings =
+    options?.withBrandSettings || themeType !== 'none'
+
+  // Generate featured images
+  const featuredImagesCount = options?.featuredImagesLimit || 3
+  const featuredImages = Array.from({length: featuredImagesCount}, (_, i) => ({
+    url: `https://picsum.photos/400/400?random=${id}-${i}`,
+    sensitive: false,
+    altText: `${name} featured image ${i + 1}`,
+  }))
+
+  // Configure colors based on theme type
+  const getThemeColors = () => {
+    switch (themeType) {
+      case 'coverImage':
+        return {
+          primary: options?.primaryColor,
+          logoDominant: options?.logoDominantColor,
+          logoAverage: options?.logoAverageColor,
+          coverDominant: options?.coverDominantColor || '#FF6B35',
+        }
+      case 'brandColor':
+        return {
+          primary: options?.primaryColor || '#27AE60',
+          logoDominant: options?.logoDominantColor,
+          logoAverage: options?.logoAverageColor,
+          coverDominant: options?.coverDominantColor,
+        }
+      case 'logoColor':
+        return {
+          primary: options?.primaryColor,
+          logoDominant: options?.logoDominantColor || '#E74C3C',
+          logoAverage: options?.logoAverageColor,
+          coverDominant: options?.coverDominantColor,
+        }
+      default:
+        return {
+          primary: options?.primaryColor,
+          logoDominant: options?.logoDominantColor,
+          logoAverage: options?.logoAverageColor,
+          coverDominant: options?.coverDominantColor,
+        }
+    }
+  }
+
+  // Configure header theme
+  const createHeaderTheme = () => {
+    if (themeType === 'coverImage' || options?.coverImageUrl) {
+      return {
+        id: `header-theme-${id}`,
+        coverImage: {
+          url:
+            options?.coverImageUrl ||
+            'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&h=400&fit=crop',
+          altText: `${name} cover image`,
+          sensitive: false,
+          thumbhash: 'k9oGHQRnh493V4dIeHeXh4h3iIeI',
+        },
+        wordmark:
+          options?.wordmarkUrl || themeType === 'coverImage'
+            ? {
+                url:
+                  options?.wordmarkUrl ||
+                  'https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024',
+                altText: `${name} wordmark`,
+                sensitive: false,
+              }
+            : undefined,
+      }
+    }
+
+    if (options?.wordmarkUrl) {
+      return {
+        id: `header-theme-${id}`,
+        wordmark: {
+          url: options.wordmarkUrl,
+          altText: `${name} wordmark`,
+          sensitive: false,
+        },
+      }
+    }
+
+    return undefined
+  }
+
+  return {
+    id,
+    name,
+    primaryDomain: {
+      url: `https://${name.toLowerCase().replace(/\s+/g, '-')}.com`,
+    },
+    reviewAnalytics: {averageRating: 4.3, reviewCount: 50},
+    visualTheme: {
+      id: `visual-theme-${id}`,
+      featuredImages,
+      logoImage: {
+        url: `https://picsum.photos/100/100?random=${id}`,
+        sensitive: false,
+      },
+      brandSettings: shouldHaveBrandSettings
+        ? {
+            id: `brand-settings-${id}`,
+            colors: {
+              id: `colors-${id}`,
+              ...getThemeColors(),
+            },
+            headerTheme: createHeaderTheme(),
+          }
+        : undefined,
+    },
+  }
+}
+
 const createPagination = (hasNext = false) => ({
   hasNextPage: hasNext,
   endCursor: hasNext ? 'cursor123' : null,
@@ -162,6 +280,13 @@ function makeMockActions(): ShopActions {
       data: [
         createProduct('rec-1', 'Recommended Product 1', '79.99'),
         createProduct('rec-2', 'Recommended Product 2', '129.99'),
+        createProduct('rec-3', 'Recommended Product 3', '129.99'),
+        createProduct('rec-4', 'Recommended Product 4', '29.99'),
+        createProduct('rec-5', 'Recommended Product 5', '39.99'),
+        createProduct('rec-6', 'Recommended Product 6', '49.99'),
+        createProduct('rec-7', 'Recommended Product 7', '59.99'),
+        createProduct('rec-8', 'Recommended Product 8', '69.99'),
+        createProduct('rec-9', 'Recommended Product 9', '129.99'),
       ],
       pageInfo: createPagination(),
     },
@@ -212,6 +337,13 @@ function makeMockActions(): ShopActions {
         createProduct('pop-1', 'The Hero Snowboard', '702.95'),
         createProduct('pop-2', 'Snow Jacket', '605.95', '702.00'),
         createProduct('pop-3', 'Winter Gloves', '89.95'),
+        createProduct('pop-4', 'Summer Gloves', '89.95'),
+        createProduct('pop-5', 'Spring Gloves', '89.95'),
+        createProduct('pop-6', 'Playstation 5', '499.95'),
+        createProduct('pop-7', 'Xbox Series X', '499.95'),
+        createProduct('pop-8', 'Nintendo Switch', '299.95'),
+        createProduct('pop-9', 'Playstation 4', '299.95'),
+        createProduct('pop-10', 'Nintendo 3DS', '89.95'),
       ],
       pageInfo: createPagination(),
     },

package/src/stories/MerchantCard.stories.tsx

@@ -15,9 +15,11 @@ const meta = {
     touchable: {
       control: 'boolean',
     },
-    variant: {
-      control: 'radio',
-      options: ['default', 'compact'],
+    fixedHeight: {
+      control: 'boolean',
+    },
+    featuredImagesLimit: {
+      control: 'number',
     },
   },
   tags: ['autodocs'],
@@ -34,18 +36,70 @@ export const Default: Story = {
       ...createShop('shop1', 'Amazing Store'),
       reviewAnalytics: {averageRating: 4.8, reviewCount: 1250},
     },
-    variant: 'default',
+  },
+}
+
+export const CoverImageDark: Story = {
+  name: 'Cover Image',
+  args: {
+    shop: createShop('cover3', 'Midnight Store', {
+      themeType: 'coverImage',
+      coverDominantColor: '#2C3E50',
+    }),
+  },
+}
+
+export const BrandColorWordmark: Story = {
+  name: 'Brand Color + Wordmark',
+  args: {
+    shop: createShop('brand2', 'Amazing Store', {
+      themeType: 'brandColor',
+      wordmarkUrl:
+        'https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024',
+      primaryColor: '#E3F2FD',
+    }),
   },
 }
 
 export const Grid: Story = {
   decorators: [
-    Story => (
+    () => (
       <div className="grid grid-cols-2 gap-4">
-        <Story />
-        <Story />
-        <Story />
-        <Story />
+        {/* Default */}
+        <MerchantCard
+          shop={{
+            ...createShop('shop1', 'Amazing Store'),
+            reviewAnalytics: {averageRating: 4.8, reviewCount: 1250},
+          }}
+        />
+
+        {/* Cover Image (Dark) */}
+        <MerchantCard
+          shop={createShop('cover3', 'Amazing Store', {
+            themeType: 'coverImage',
+            coverDominantColor: '#2C3E50',
+          })}
+        />
+
+        {/* Brand Color + Wordmark (Light) */}
+        <MerchantCard
+          shop={createShop('brand2', 'Amazing Store', {
+            themeType: 'brandColor',
+            wordmarkUrl:
+              'https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024',
+            primaryColor: '#E3F2FD',
+          })}
+        />
+
+        {/* Brand Color + Wordmark (Dark) */}
+        <MerchantCard
+          shop={createShop('brand4', 'Amazing Store', {
+            themeType: 'brandColor',
+            wordmarkUrl:
+              'https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024',
+            primaryColor: '#808080',
+          })}
+        />
       </div>
     ),
   ],

package/src/utils/colors.ts

@@ -0,0 +1,5 @@
+import Color from 'color'
+
+export const isDarkColor = (color: string): boolean => {
+  return Color(color).darken(0.2).isDark()
+}

package/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './errors'
+export * from './merchant-card'
 export * from './parseUrl'

package/src/utils/merchant-card.ts

@@ -0,0 +1,99 @@
+import {type Shop, type BrandSettings} from '@shopify/shop-minis-platform'
+
+export type ExtractedBrandTheme =
+  | {
+      type: 'coverImage'
+      coverImageUrl: string
+      coverImageThumbhash?: string
+      backgroundColor: string
+    }
+  | {
+      type: 'brandColor'
+      backgroundColor: string
+    }
+  | {
+      type: 'logoColor'
+      backgroundColor: string
+    }
+  | {
+      type: 'default'
+      backgroundColor: string
+    }
+
+export 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()
+}
+
+export function normalizeRating(rating: number): number {
+  return Math.round(rating * 10) / 10
+}
+
+export function extractBrandTheme(
+  brandSettings?: BrandSettings | null
+): ExtractedBrandTheme {
+  if (!brandSettings) {
+    return {
+      type: 'default',
+      backgroundColor: 'white',
+    }
+  }
+
+  if (brandSettings.headerTheme) {
+    const coverImageUrl =
+      brandSettings.headerTheme.coverImage?.url ??
+      brandSettings.headerTheme.thumbnailImage?.url
+    const coverImageThumbhash =
+      brandSettings.headerTheme.coverImage?.thumbhash ??
+      brandSettings.headerTheme.thumbnailImage?.thumbhash ??
+      undefined
+    const coverImageColor = brandSettings.colors?.coverDominant
+
+    if (coverImageUrl && coverImageColor) {
+      return {
+        type: 'coverImage',
+        coverImageUrl,
+        coverImageThumbhash,
+        backgroundColor: coverImageColor,
+      }
+    }
+  }
+
+  if (brandSettings.colors?.primary) {
+    return {
+      type: 'brandColor',
+      backgroundColor: brandSettings.colors.primary,
+    }
+  }
+
+  if (brandSettings.colors?.logoDominant) {
+    return {
+      type: 'logoColor',
+      backgroundColor: brandSettings.colors.logoDominant,
+    }
+  }
+
+  return {
+    type: 'default',
+    backgroundColor: 'white',
+  }
+}
+
+export function getFeaturedImages(visualTheme: Shop['visualTheme'], limit = 4) {
+  const images = visualTheme?.featuredImages.slice(0, limit)
+
+  if (!images) {
+    return []
+  }
+
+  if (images.length === 3) {
+    return visualTheme?.featuredImages.slice(0, 2)
+  }
+
+  return images
+}

package/src/hooks/navigation/useCloseMini.doc.ts

@@ -1,32 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'useCloseMini',
-  category: 'hooks',
-  subCategory: 'navigation',
-  isVisualComponent: false,
-  related: [],
-  description:
-    'The `useCloseMini` hook returns a function to close the Mini viewer.',
-  type: 'hook',
-  defaultExample: {
-    codeblock: {
-      tabs: [
-        {
-          code: './useCloseMini.example.tsx',
-          language: 'tsx',
-        },
-      ],
-      title: 'Example code',
-    },
-  },
-  definitions: [
-    {
-      title: '',
-      type: 'UseCloseMiniGeneratedType',
-      description: '',
-    },
-  ],
-}
-
-export default data

package/src/hooks/navigation/useCloseMini.example.tsx

@@ -1,7 +0,0 @@
-import {useCloseMini, Button} from '@shopify/shop-minis-react'
-
-export function Example() {
-  const {closeMini} = useCloseMini()
-
-  return <Button onClick={closeMini}>Close Mini</Button>
-}

package/src/hooks/navigation/useDeeplink.doc.ts

@@ -1,32 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'useDeeplink',
-  category: 'hooks',
-  subCategory: 'navigation',
-  isVisualComponent: false,
-  related: [],
-  description:
-    'The `useDeeplink` hook returns the path, query parameters, and hash parameters of the deep link URL that opened the Mini.',
-  type: 'hook',
-  defaultExample: {
-    codeblock: {
-      tabs: [
-        {
-          code: './useDeeplink.example.tsx',
-          language: 'tsx',
-        },
-      ],
-      title: 'Example code',
-    },
-  },
-  definitions: [
-    {
-      title: '',
-      type: 'UseDeeplinkGeneratedType',
-      description: '',
-    },
-  ],
-}
-
-export default data

package/src/hooks/navigation/useDeeplink.example.tsx

@@ -1,7 +0,0 @@
-import {useDeeplink} from '@shopify/shop-minis-react'
-
-export default function MyComponent() {
-  const {path, queryParams, hash} = useDeeplink()
-
-  console.log({path, queryParams, hash})
-}

package/src/hooks/navigation/useShopNavigation.doc.ts

@@ -1,32 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'useShopNavigation',
-  category: 'hooks',
-  subCategory: 'navigation',
-  isVisualComponent: false,
-  related: [],
-  description:
-    'The `useShopNavigation` hook provides functions to navigate to different parts of the Shop app.',
-  type: 'hook',
-  defaultExample: {
-    codeblock: {
-      tabs: [
-        {
-          code: './useShopNavigation.example.tsx',
-          language: 'tsx',
-        },
-      ],
-      title: 'Example code',
-    },
-  },
-  definitions: [
-    {
-      title: '',
-      type: 'UseShopNavigationGeneratedType',
-      description: '',
-    },
-  ],
-}
-
-export default data

package/src/hooks/navigation/useShopNavigation.example.tsx

@@ -1,32 +0,0 @@
-import {useShopNavigation, Button} from '@shopify/shop-minis-react'
-
-export default function MyComponent() {
-  const {navigateToProduct, navigateToShop, navigateToOrder} =
-    useShopNavigation()
-
-  return (
-    <>
-      <Button
-        onClick={() =>
-          navigateToProduct({productId: 'gid://shopify/Product/123'})
-        }
-      >
-        View Product
-      </Button>
-      <Button
-        onClick={() =>
-          navigateToShop({
-            shopId: 'gid://shopify/Shop/123',
-          })
-        }
-      >
-        Go to Shop
-      </Button>
-      <Button
-        onClick={() => navigateToOrder({orderId: 'gid://shopify/Order/123'})}
-      >
-        View Order
-      </Button>
-    </>
-  )
-}

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

@@ -1,32 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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})
-}