@shopify/shop-minis-react 0.0.11 → 0.0.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -56,7 +56,8 @@
     "tailwindcss": "4.1.8",
     "tw-animate-css": "1.3.4",
     "url-parse": "1.5.10",
-    "vaul": "1.1.2"
+    "vaul": "1.1.2",
+    "lodash": "4.17.21"
   },
   "devDependencies": {
     "@shopify/generate-docs": "^0.16.6",
@@ -88,7 +89,7 @@
     "directory": "packages/shop-minis-react"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite ./demo",
     "build": "vite build --mode lib",
     "build:watch": "vite build --mode lib --watch",
     "type-check": "tsc --noEmit",

package/src/base.css

@@ -0,0 +1,273 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Palette colors for Tailwind */
+  --color-purple-d80: var(--purple-d80);
+  --color-purple-d60: var(--purple-d60);
+  --color-purple-d50: var(--purple-d50);
+  --color-purple-p40: var(--purple-p40);
+  --color-purple-l30: var(--purple-l30);
+  --color-purple-l20: var(--purple-l20);
+  --color-purple-l10: var(--purple-l10);
+  --color-purple-l5: var(--purple-l5);
+  --color-purple-l2: var(--purple-l2);
+
+  --color-grayscale-d100: var(--grayscale-d100);
+  --color-grayscale-d93: var(--grayscale-d93);
+  --color-grayscale-d90: var(--grayscale-d90);
+  --color-grayscale-d80: var(--grayscale-d80);
+  --color-grayscale-d70: var(--grayscale-d70);
+  --color-grayscale-d60: var(--grayscale-d60);
+  --color-grayscale-d50: var(--grayscale-d50);
+  --color-grayscale-l40: var(--grayscale-l40);
+  --color-grayscale-l20: var(--grayscale-l20);
+  --color-grayscale-l10: var(--grayscale-l10);
+  --color-grayscale-l6: var(--grayscale-l6);
+  --color-grayscale-l5: var(--grayscale-l5);
+  --color-grayscale-l0: var(--grayscale-l0);
+
+  --color-green-d90: var(--green-d90);
+  --color-green-d80: var(--green-d80);
+  --color-green-d70: var(--green-d70);
+  --color-green-l30: var(--green-l30);
+  --color-green-l20: var(--green-l20);
+  --color-green-l10: var(--green-l10);
+  --color-green-l5: var(--green-l5);
+
+  --color-poppy-d80: var(--poppy-d80);
+  --color-poppy-d70: var(--poppy-d70);
+  --color-poppy-d50: var(--poppy-d50);
+  --color-poppy-l40: var(--poppy-l40);
+  --color-poppy-l20: var(--poppy-l20);
+  --color-poppy-l10: var(--poppy-l10);
+  --color-poppy-l4: var(--poppy-l4);
+
+  --color-ochre-d90: var(--ochre-d90);
+  --color-ochre-d70: var(--ochre-d70);
+  --color-ochre-d60: var(--ochre-d60);
+  --color-ochre-l50: var(--ochre-l50);
+  --color-ochre-l30: var(--ochre-l30);
+  --color-ochre-l20: var(--ochre-l20);
+  --color-ochre-l10: var(--ochre-l10);
+  --color-ochre-l6: var(--ochre-l6);
+
+  --color-brand-aqua: var(--brand-aqua);
+  --color-brand-violet: var(--brand-violet);
+  --color-brand-magenta: var(--brand-magenta);
+  --color-brand-olive: var(--brand-olive);
+  --color-brand-lime: var(--brand-lime);
+  --color-brand-sage: var(--brand-sage);
+  --color-brand-sand: var(--brand-sand);
+}
+
+:root {
+  --radius: 0.65rem;
+
+  /* Palette Colors - Purple */
+  --purple-d80: #1b163b;
+  --purple-d60: #322c7d;
+  --purple-d50: #4524db;
+  --purple-p40: #5433eb;
+  --purple-l30: #6445ed;
+  --purple-l20: #9c83f8;
+  --purple-l10: #dbd1ff;
+  --purple-l5: #eeeaff;
+  --purple-l2: #f7f5ff;
+
+  /* Palette Colors - Grayscale */
+  --grayscale-d100: #000000;
+  --grayscale-d93: #121212;
+  --grayscale-d90: #1a1a1a;
+  --grayscale-d80: #2a2a2a;
+  --grayscale-d70: #404040;
+  --grayscale-d60: #656667;
+  --grayscale-d50: #6f7071;
+  --grayscale-l40: #a6a8a9;
+  --grayscale-l20: #c9cbcc;
+  --grayscale-l10: #e1e4e5;
+  --grayscale-l6: #eef0f1;
+  --grayscale-l5: #f2f4f5;
+  --grayscale-l0: #ffffff;
+
+  /* Palette Colors - Green */
+  --green-d90: #002e24;
+  --green-d80: #004839;
+  --green-d70: #008552;
+  --green-l30: #92d08d;
+  --green-l20: #baebcb;
+  --green-l10: #d2f2de;
+  --green-l5: #e4f6eb;
+
+  /* Palette Colors - Poppy */
+  --poppy-d80: #481609;
+  --poppy-d70: #832711;
+  --poppy-d50: #d92a0f;
+  --poppy-l40: #f05d38;
+  --poppy-l20: #ff967d;
+  --poppy-l10: #ffd2c2;
+  --poppy-l4: #ffece9;
+
+  /* Palette Colors - Ochre */
+  --ochre-d90: #443600;
+  --ochre-d70: #8c6e01;
+  --ochre-d60: #c29d05;
+  --ochre-l50: #e3be2b;
+  --ochre-l30: #f8db67;
+  --ochre-l20: #ffec9f;
+  --ochre-l10: #fff4cb;
+  --ochre-l6: #fff9e2;
+
+  /* Palette Colors - Brand */
+  --brand-aqua: #8dc0c6;
+  --brand-violet: #a327c2;
+  --brand-magenta: #d354ff;
+  --brand-olive: #8b8f01;
+  --brand-lime: #c7de00;
+  --brand-sage: #d8e59d;
+  --brand-sand: #f4f4ed;
+
+  /* Semantic Colors */
+  --background: var(--grayscale-l0);
+  --foreground: var(--grayscale-d100);
+  --card: var(--grayscale-l0);
+  --card-foreground: var(--grayscale-d100);
+  --popover: var(--grayscale-l0);
+  --popover-foreground: var(--grayscale-d100);
+  --primary: var(--purple-p40);
+  --primary-foreground: var(--grayscale-l0);
+  --secondary: var(--grayscale-l5);
+  --secondary-foreground: var(--grayscale-d70);
+  --muted: var(--grayscale-l5);
+  --muted-foreground: var(--grayscale-d70);
+  --accent: var(--grayscale-l5);
+  --accent-foreground: var(--grayscale-d70);
+  --destructive: var(--poppy-d50);
+  --border: rgba(0, 0, 0, 0.1);
+  --input: var(--grayscale-l20);
+  --ring: var(--purple-p40);
+  --chart-1: var(--ochre-d90);
+  --chart-2: var(--green-d70);
+  --chart-3: var(--green-l30);
+  --chart-4: var(--grayscale-d50);
+  --chart-5: var(--green-l20);
+  --sidebar: var(--grayscale-l5);
+  --sidebar-foreground: var(--grayscale-d100);
+  --sidebar-primary: var(--purple-p40);
+  --sidebar-primary-foreground: var(--purple-l20);
+  --sidebar-accent: var(--grayscale-l5);
+  --sidebar-accent-foreground: var(--grayscale-d70);
+  --sidebar-border: rgba(0, 0, 0, 0.1);
+  --sidebar-ring: var(--purple-p40);
+}
+
+.dark {
+  /* Dark mode semantic colors */
+  --background: var(--grayscale-d93);
+  --foreground: var(--grayscale-l0);
+  --card: var(--grayscale-d93);
+  --card-foreground: var(--grayscale-l0);
+  --popover: var(--grayscale-d93);
+  --popover-foreground: var(--grayscale-l0);
+  --primary: var(--purple-l20);
+  --primary-foreground: var(--grayscale-d100);
+  --secondary: var(--grayscale-d80);
+  --secondary-foreground: var(--grayscale-l0);
+  --muted: var(--grayscale-d80);
+  --muted-foreground: var(--grayscale-l20);
+  --accent: var(--grayscale-d80);
+  --accent-foreground: var(--grayscale-l0);
+  --destructive: var(--poppy-l40);
+  --border: rgba(255, 255, 255, 0.2);
+  --input: var(--grayscale-l40);
+  --ring: var(--purple-l20);
+  --chart-1: var(--green-l30);
+  --chart-2: var(--grayscale-d60);
+  --chart-3: var(--green-l20);
+  --chart-4: var(--grayscale-d60);
+  --chart-5: var(--ochre-l30);
+  --sidebar: var(--grayscale-d80);
+  --sidebar-foreground: var(--grayscale-l0);
+  --sidebar-primary: var(--purple-l20);
+  --sidebar-primary-foreground: var(--purple-l10);
+  --sidebar-accent: var(--grayscale-d80);
+  --sidebar-accent-foreground: var(--grayscale-l0);
+  --sidebar-border: rgba(255, 255, 255, 0.2);
+  --sidebar-ring: var(--purple-l20);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+html,
+body {
+  touch-action: manipulation;
+}
+
+/* Disable text selection */
+body {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Re-enable text selection for input fields */
+input,
+textarea {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+/* Disable image drag */
+img,
+.no-drag {
+  -webkit-user-drag: none;
+  user-drag: none;
+}

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,
+  }
+}