@shopify/shop-minis-react 0.0.14 → 0.0.17

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -18,7 +18,6 @@
   "files": [
     "src/**/*.{ts,tsx,css}",
     "dist/**/*",
-    "tailwind.config.js",
     "README.md",
     "LICENSE.txt"
   ],
@@ -29,8 +28,7 @@
       "types": "./src/index.ts"
     },
     "./styles": "./src/index.css",
-    "./tailwind": "./tailwind.config.js",
-    "./tailwind.config": "./tailwind.config.js",
+    "./mocks": "./src/mocks.ts",
     "./src/*": "./src/*"
   },
   "peerDependencies": {
@@ -40,12 +38,14 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
+    "@shopify/shop-minis-platform": "0.0.3",
     "@tailwindcss/vite": "4.1.8",
     "@types/url-parse": "1.4.9",
     "@vitejs/plugin-react": "4.5.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "embla-carousel-react": "8.6.0",
+    "lodash": "4.17.21",
     "lucide-react": "0.513.0",
     "motion": "12.17.3",
     "next-themes": "0.4.6",
@@ -56,13 +56,12 @@
     "tailwindcss": "4.1.8",
     "tw-animate-css": "1.3.4",
     "url-parse": "1.5.10",
-    "vaul": "1.1.2",
-    "lodash": "4.17.21"
+    "vaul": "1.1.2"
   },
   "devDependencies": {
     "@shopify/generate-docs": "^0.16.6",
     "@types/node": "^20.12.1",
-    "@types/react": "^19.1.2",
+    "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -86,7 +85,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/Shopify/shop-client.git",
-    "directory": "packages/shop-minis-react"
+    "directory": "packages/minis/shop-minis-react"
   },
   "scripts": {
     "dev": "vite ./demo",

package/src/components/atoms/button.tsx

@@ -1,71 +1,13 @@
-import * as React from 'react'
+import React from 'react'
 
-import {cva, type VariantProps} from 'class-variance-authority'
-import {Slot as SlotPrimitive} from 'radix-ui'
+import {VariantProps} from 'class-variance-authority'
 
 import {cn} from '../../lib/utils'
+import {BaseButton, buttonVariants} from '../ui/button'
 
 import {Touchable} from './touchable'
 
-const buttonVariants = cva(
-  "flex w-full items-center justify-center gap-3 whitespace-nowrap rounded-xl text-base font-semibold disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5 shrink-0 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        primary:
-          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        secondary: 'bg-slate-900 text-white shadow-xs hover:bg-slate-800',
-        tertiary:
-          'bg-slate-100 text-slate-900 shadow-xs hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700',
-        blurred:
-          'bg-black/20 text-white shadow-xs hover:bg-black/30 backdrop-blur-md border border-white/20',
-        text: 'bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',
-        borderless: 'bg-transparent text-primary hover:text-primary/80',
-        borderlessUnbranded:
-          'bg-transparent text-foreground hover:text-foreground/80',
-        outlined:
-          'border border-border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground',
-        dangerous:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90',
-        'outlined-dangerous':
-          'border border-destructive bg-transparent text-destructive shadow-xs hover:bg-destructive/10',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'primary',
-      size: 'default',
-    },
-  }
-)
-
-function BaseButton({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? SlotPrimitive.Slot : 'button'
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({variant, size, className}))}
-      {...props}
-    />
-  )
-}
-
-function Button({
+export function Button({
   className,
   variant,
   size,
@@ -81,14 +23,18 @@ function Button({
     [onClick]
   )
 
+  const wrapperClassName = cn(
+    variant === 'icon' ? 'flex w-auto' : 'flex w-full'
+  )
+
   return (
     <Touchable
       onClick={handleClick}
       stopPropagation={stopPropagation}
-      className={size === 'icon' ? 'flex w-auto' : 'flex w-full'}
+      className={wrapperClassName}
     >
       <BaseButton
-        className={className}
+        className={cn(className, wrapperClassName)}
         variant={variant}
         size={size}
         {...props}
@@ -96,5 +42,3 @@ function Button({
     </Touchable>
   )
 }
-
-export {Button, buttonVariants}

package/src/components/atoms/favorite-button.tsx

@@ -0,0 +1,22 @@
+import {Heart} from 'lucide-react'
+
+import {IconButton} from './icon-button'
+
+export function FavoriteButton({
+  onClick,
+  filled = false,
+}: {
+  onClick?: () => void
+  filled?: boolean
+}) {
+  return (
+    <IconButton
+      Icon={Heart}
+      filled={filled}
+      onClick={onClick}
+      buttonStyles={
+        filled ? 'bg-primary' : 'bg-button-overlay/30 backdrop-blur-sm'
+      }
+    />
+  )
+}

package/src/components/atoms/icon-button.tsx

@@ -0,0 +1,42 @@
+import {LucideIcon} from 'lucide-react'
+
+import {cn} from '../../lib/utils'
+
+import {Button} from './button'
+
+export function IconButton({
+  onClick,
+  filled = false,
+  size = 'default',
+  Icon,
+  buttonStyles,
+  iconStyles,
+}: {
+  onClick?: () => void
+  filled?: boolean
+  size?: 'default' | 'sm' | 'lg'
+  Icon: LucideIcon
+  buttonStyles?: string
+  iconStyles?: string
+}) {
+  const sizeMap = {
+    sm: 'size-3',
+    default: 'size-4',
+    lg: 'size-6',
+  }
+
+  return (
+    <Button
+      onClick={onClick}
+      variant="icon"
+      size={size}
+      className={cn('bg-primary', buttonStyles)}
+      stopPropagation
+    >
+      <Icon
+        fill={filled ? 'currentColor' : 'none'}
+        className={cn('text-primary-foreground', sizeMap[size], iconStyles)}
+      />
+    </Button>
+  )
+}

package/src/components/atoms/touchable.tsx

@@ -14,6 +14,10 @@ export const Touchable = ({
   const ref = React.useRef<HTMLDivElement>(null)
   const controls = useAnimationControls()
 
+  // Filter out props that shouldn't be passed to motion.div
+  // Any other custom props that get added to the component interface should be filtered here
+  const {ref: _, ...motionProps} = props
+
   const handleClick = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
       if (stopPropagation) event.stopPropagation()
@@ -75,7 +79,7 @@ export const Touchable = ({
       style={{
         touchAction: stopPropagation ? 'manipulation' : undefined,
       }}
-      {...props} // TODO: We may need to filter out some props, as we only need motion props
+      {...motionProps}
     >
       {children}
     </motion.div>

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

@@ -1,12 +1,12 @@
 import * as React 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'
-import {type Shop} from '../../types/minisSDK.generated.d'
 import {Touchable} from '../atoms/touchable'
 
 const merchantCardVariants = cva(
@@ -250,15 +250,4 @@ export const MerchantCardPrimitive = Object.assign(MerchantCardRoot, {
   Rating: MerchantCardRating,
 })
 
-export {
-  // Composed component
-  MerchantCard,
-  // Primitive components for custom composition
-  MerchantCardRoot,
-  MerchantCardImageContainer,
-  MerchantCardImage,
-  MerchantCardLogo,
-  MerchantCardInfo,
-  MerchantCardName,
-  MerchantCardRating,
-}
+export {MerchantCard}

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

@@ -1,5 +1,6 @@
 import * as React from 'react'
 
+import {type Product, type ProductVariant} from '@shopify/shop-minis-platform'
 import {cva, type VariantProps} from 'class-variance-authority'
 import {Heart} from 'lucide-react'
 import {Slot as SlotPrimitive} from 'radix-ui'
@@ -8,13 +9,9 @@ import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
-import {
-  type Product,
-  type ProductVariant,
-} from '../../types/minisSDK.generated.d'
-import {Badge} from '../atoms/badge'
-import {Button} from '../atoms/button'
+import {FavoriteButton} from '../atoms/favorite-button'
 import {Touchable} from '../atoms/touchable'
+import {Badge} from '../ui/badge'
 
 const productCardVariants = cva(
   'relative w-full overflow-hidden rounded-xl border border-gray-200',
@@ -170,21 +167,7 @@ function ProductCardFavoriteButton({
 }) {
   return (
     <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>
-      <Button
-        onClick={onPress}
-        variant="secondary"
-        size="icon"
-        className={cn(
-          'h-8 w-8 rounded-full border-0 shadow-sm',
-          filled ? 'bg-primary' : 'bg-grayscale-l6/60 backdrop-blur-sm'
-        )}
-        stopPropagation
-      >
-        <Heart
-          fill={filled ? 'currentColor' : 'none'}
-          className="h-4 w-4 text-white"
-        />
-      </Button>
+      <FavoriteButton onClick={onPress} filled={filled} />
     </div>
   )
 }
@@ -419,18 +402,4 @@ function ProductCard({
   )
 }
 
-export {
-  // Composed component
-  ProductCard,
-  // Primitive components for custom composition
-  ProductCardRoot,
-  ProductCardImageContainer,
-  ProductCardImage,
-  ProductCardBadge,
-  ProductCardFavoriteButton,
-  ProductCardInfo,
-  ProductCardTitle,
-  ProductCardPrice,
-  ProductCardCurrentPrice,
-  ProductCardOriginalPrice,
-}
+export {ProductCard}

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

@@ -1,17 +1,17 @@
 import * as React from 'react'
 
+import {type Product} from '@shopify/shop-minis-platform'
 import {cva, type VariantProps} from 'class-variance-authority'
-import {Heart, Star} from 'lucide-react'
+import {Star} from 'lucide-react'
 import {Slot as SlotPrimitive} from 'radix-ui'
 
 import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
-import {type Product} from '../../types/minisSDK.generated.d'
-import {Button} from '../atoms/button'
-import {Card, CardContent, CardAction} from '../atoms/card'
+import {FavoriteButton} from '../atoms/favorite-button'
 import {Touchable} from '../atoms/touchable'
+import {Card, CardContent, CardAction} from '../ui/card'
 
 const productLinkVariants = cva('', {
   variants: {
@@ -193,11 +193,11 @@ function ProductLinkRating({className, ...props}: React.ComponentProps<'div'>) {
 
 function ProductLinkActions({
   className,
-  onActionPress,
+  onPress,
   filled = false,
   ...props
 }: React.ComponentProps<typeof CardAction> & {
-  onActionPress?: () => void
+  onPress?: () => void
   filled?: boolean
 }) {
   return (
@@ -207,20 +207,14 @@ function ProductLinkActions({
     >
       <Touchable
         stopPropagation
-        onClick={onActionPress}
+        onClick={onPress}
         whileTap={{opacity: 0.7, scale: 0.95}}
         transition={{
           opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},
           scale: {type: 'tween', duration: 0.08, ease: 'easeInOut'},
         }}
       >
-        <Button
-          variant="borderless"
-          size="icon"
-          className="h-auto w-auto p-0 hover:bg-transparent"
-        >
-          <Heart fill={filled ? 'currentColor' : 'none'} className="h-4 w-4" />
-        </Button>
+        <FavoriteButton filled={filled} onClick={onPress} />
       </Touchable>
     </CardAction>
   )
@@ -368,24 +362,10 @@ function ProductLink({product}: ProductLinkProps) {
 
       <ProductLinkActions
         filled={isFavoritedLocal}
-        onActionPress={handleActionPress}
+        onPress={handleActionPress}
       />
     </ProductLinkRoot>
   )
 }
 
-export {
-  // Composed component
-  ProductLink,
-  // Primitive components for custom composition
-  ProductLinkRoot,
-  ProductLinkImage,
-  ProductLinkInfo,
-  ProductLinkTitle,
-  ProductLinkPrice,
-  ProductLinkCurrentPrice,
-  ProductLinkOriginalPrice,
-  ProductLinkDiscountPrice,
-  ProductLinkRating,
-  ProductLinkActions,
-}
+export {ProductLink}

package/src/components/index.ts

@@ -4,24 +4,26 @@ export * from './commerce/product-card'
 export * from './commerce/product-link'
 export * from './commerce/merchant-card'
 
-export * from './atoms/accordion'
-export * from './atoms/alert'
-export * from './atoms/alert-dialog'
-export * from './atoms/avatar'
-export * from './atoms/badge'
 export * from './atoms/button'
-export * from './atoms/card'
-export * from './atoms/carousel'
-export * from './atoms/checkbox'
-export * from './atoms/dialog'
-export * from './atoms/drawer'
-export * from './atoms/input'
-export * from './atoms/label'
-export * from './atoms/progress'
-export * from './atoms/radio-group'
-export * from './atoms/resizable'
-export * from './atoms/scroll-area'
-export * from './atoms/select'
-export * from './atoms/separator'
-export * from './atoms/sheet'
-export * from './atoms/sonner'
+export * from './atoms/favorite-button'
+export * from './atoms/icon-button'
+export * from './atoms/touchable'
+
+export * from './ui/accordion'
+export * from './ui/alert'
+export * from './ui/alert-dialog'
+export * from './ui/card'
+export * from './ui/carousel'
+export * from './ui/checkbox'
+export * from './ui/dialog'
+export * from './ui/drawer'
+export * from './ui/input'
+export * from './ui/label'
+export * from './ui/progress'
+export * from './ui/radio-group'
+export * from './ui/resizable'
+export * from './ui/scroll-area'
+export * from './ui/select'
+export * from './ui/separator'
+export * from './ui/sheet'
+export * from './ui/sonner'

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react'
+
+import {AlertDialog as AlertDialogPrimitive} from 'radix-ui'
+
+import {cn} from '../../lib/utils'
+
+import {buttonVariants} from './button'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({variant: 'outline'}), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}