@shopify/shop-minis-react 0.0.7 → 0.0.9

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

@@ -12,12 +12,12 @@ import {
   type Product,
   type ProductVariant,
 } from '../../types/minisSDK.generated.d'
-import {Badge} from '../ui/badge'
-import {Button} from '../ui/button'
-import {Touchable} from '../ui/touchable'
+import {Badge} from '../atoms/badge'
+import {Button} from '../atoms/button'
+import {Touchable} from '../atoms/touchable'
 
 const productCardVariants = cva(
-  'relative overflow-hidden rounded-xl border border-gray-200',
+  'relative w-full overflow-hidden rounded-xl border border-gray-200',
   {
     variants: {
       variant: {
@@ -70,7 +70,13 @@ function ProductCardRoot({
 
   if (touchable && onPress) {
     return (
-      <Touchable onPress={onPress} asChild>
+      <Touchable
+        onClick={onPress}
+        whileTap={{opacity: 0.7}}
+        transition={{
+          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},
+        }}
+      >
         {content}
       </Touchable>
     )
@@ -162,18 +168,21 @@ function ProductCardFavoriteButton({
 }) {
   return (
     <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>
-      <Touchable onPress={onPress} asChild>
-        <Button
-          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'
-          )}
-        >
-          <Heart filled={filled} className="h-4 w-4 text-white" />
-        </Button>
-      </Touchable>
+      <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>
     </div>
   )
 }

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

@@ -8,14 +8,14 @@ import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {cn} from '../../lib/utils'
 import {type Product} from '../../types/minisSDK.generated.d'
-import {Button} from '../ui/button'
-import {Card, CardContent, CardAction} from '../ui/card'
-import {Touchable} from '../ui/touchable'
+import {Button} from '../atoms/button'
+import {Card, CardContent, CardAction} from '../atoms/card'
+import {Touchable} from '../atoms/touchable'
 
 const productLinkVariants = cva('', {
   variants: {
     layout: {
-      horizontal: '!flex-row items-center gap-3 px-4 py-3',
+      horizontal: 'w-full !flex-row items-center gap-3 px-4 py-3',
       vertical: 'flex-col',
     },
     discount: {
@@ -50,7 +50,13 @@ function ProductLinkRoot({
   const Comp = asChild ? SlotPrimitive.Root : Card
 
   return (
-    <Touchable onPress={onPress} asChild>
+    <Touchable
+      onClick={onPress}
+      whileTap={{opacity: 0.7}}
+      transition={{
+        opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},
+      }}
+    >
       <Comp
         className={cn(
           productLinkVariants({layout, discount}),
@@ -198,13 +204,21 @@ function ProductLinkActions({
       className={cn('flex-shrink-0 self-center px-0 py-0', className)}
       {...props}
     >
-      <Touchable onPress={onActionPress} asChild>
+      <Touchable
+        stopPropagation
+        onClick={onActionPress}
+        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 filled={filled} withBackground className="h-4 w-4" />
+          <Heart fill={filled ? 'currentColor' : 'none'} className="h-4 w-4" />
         </Button>
       </Touchable>
     </CardAction>
@@ -315,7 +329,9 @@ function ProductLink({product}: ProductLinkProps) {
               {Array.from({length: 5}, (_, i) => (
                 <Star
                   key={i}
-                  filled={i < Math.floor(averageRating!)}
+                  fill={
+                    i < Math.floor(averageRating!) ? 'currentColor' : 'none'
+                  }
                   className={cn(
                     'h-3 w-3',
                     i < Math.floor(averageRating!)

package/src/components/index.ts

@@ -3,25 +3,24 @@ export * from './MinisContainer'
 export * from './commerce/product-card'
 export * from './commerce/product-link'
 
-export * from './ui/accordion'
-export * from './ui/alert'
-export * from './ui/alert-dialog'
-export * from './ui/avatar'
-export * from './ui/badge'
-export * from './ui/button'
-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'
-export * from './ui/touchable'
+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'

package/src/dev.tsx

@@ -4,15 +4,13 @@ import ReactDOM from 'react-dom/client'
 import {toast} from 'sonner'
 
 import './index.css'
-import {ProductCard} from './components/commerce/product-card'
-import {ProductLink} from './components/commerce/product-link'
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from './components/ui/accordion'
-import {Alert, AlertDescription, AlertTitle} from './components/ui/alert'
+} from './components/atoms/accordion'
+import {Alert, AlertDescription, AlertTitle} from './components/atoms/alert'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -23,10 +21,10 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from './components/ui/alert-dialog'
-import {Avatar, AvatarFallback, AvatarImage} from './components/ui/avatar'
-import {Badge} from './components/ui/badge'
-import {Button} from './components/ui/button'
+} from './components/atoms/alert-dialog'
+import {Avatar, AvatarFallback, AvatarImage} from './components/atoms/avatar'
+import {Badge} from './components/atoms/badge'
+import {Button} from './components/atoms/button'
 import {
   Card,
   CardHeader,
@@ -35,15 +33,15 @@ import {
   CardContent,
   CardAction,
   CardFooter,
-} from './components/ui/card'
+} from './components/atoms/card'
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from './components/ui/carousel'
-import {Checkbox} from './components/ui/checkbox'
+} from './components/atoms/carousel'
+import {Checkbox} from './components/atoms/checkbox'
 import {
   Dialog,
   DialogContent,
@@ -52,7 +50,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from './components/ui/dialog'
+} from './components/atoms/dialog'
 import {
   Drawer,
   DrawerClose,
@@ -62,25 +60,25 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from './components/ui/drawer'
-import {Input} from './components/ui/input'
-import {Label} from './components/ui/label'
-import {Progress} from './components/ui/progress'
-import {RadioGroup, RadioGroupItem} from './components/ui/radio-group'
+} from './components/atoms/drawer'
+import {Input} from './components/atoms/input'
+import {Label} from './components/atoms/label'
+import {Progress} from './components/atoms/progress'
+import {RadioGroup, RadioGroupItem} from './components/atoms/radio-group'
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-} from './components/ui/resizable'
-import {ScrollArea} from './components/ui/scroll-area'
+} from './components/atoms/resizable'
+import {ScrollArea} from './components/atoms/scroll-area'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from './components/ui/select'
-import {Separator} from './components/ui/separator'
+} from './components/atoms/select'
+import {Separator} from './components/atoms/separator'
 import {
   Sheet,
   SheetClose,
@@ -90,8 +88,10 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from './components/ui/sheet'
-import {Toaster} from './components/ui/sonner'
+} from './components/atoms/sheet'
+import {Toaster} from './components/atoms/sonner'
+import {ProductCard} from './components/commerce/product-card'
+import {ProductLink} from './components/commerce/product-link'
 import {CurrencyCode} from './types/minisSDK.generated.d'
 import './mockActions'
 
@@ -424,13 +424,43 @@ function App() {
                 <>
                   <h4 className="text-lg font-medium mb-2">Core Variants</h4>
                   <div className="flex flex-wrap gap-2">
-                    <Button variant="primary">Primary</Button>
-                    <Button variant="secondary">Secondary</Button>
-                    <Button variant="tertiary">Tertiary</Button>
-                    <Button variant="outlined">Outlined</Button>
-                    <Button variant="text">Text</Button>
-                    <Button variant="borderless">Borderless</Button>
-                    <Button variant="borderlessUnbranded">
+                    <Button
+                      variant="primary"
+                      onClick={() => console.log('primary')}
+                    >
+                      Primary
+                    </Button>
+                    <Button
+                      variant="secondary"
+                      onClick={() => console.log('secondary')}
+                    >
+                      Secondary
+                    </Button>
+                    <Button
+                      variant="tertiary"
+                      onClick={() => console.log('tertiary')}
+                    >
+                      Tertiary
+                    </Button>
+                    <Button
+                      variant="outlined"
+                      onClick={() => console.log('outlined')}
+                    >
+                      Outlined
+                    </Button>
+                    <Button variant="text" onClick={() => console.log('text')}>
+                      Text
+                    </Button>
+                    <Button
+                      variant="borderless"
+                      onClick={() => console.log('borderless')}
+                    >
+                      Borderless
+                    </Button>
+                    <Button
+                      variant="borderlessUnbranded"
+                      onClick={() => console.log('borderlessUnbranded')}
+                    >
                       Borderless Unbranded
                     </Button>
                   </div>
@@ -666,32 +696,50 @@ function App() {
             {/* Resizable */}
             <div className="space-y-4">
               <h3 className="text-2xl font-semibold">Resizable</h3>
-              <ResizablePanelGroup
-                direction="horizontal"
-                className="max-w-md rounded-lg border"
-              >
-                <ResizablePanel defaultSize={50}>
-                  <div className="flex h-[200px] items-center justify-center p-6">
-                    <span className="font-semibold">One</span>
-                  </div>
-                </ResizablePanel>
-                <ResizableHandle />
-                <ResizablePanel defaultSize={50}>
-                  <ResizablePanelGroup direction="vertical">
-                    <ResizablePanel defaultSize={25}>
+
+              {/* Horizontal Layout */}
+              <div className="space-y-2">
+                <h4 className="text-lg font-medium">Horizontal</h4>
+                <ResizablePanelGroup
+                  direction="horizontal"
+                  className="max-w-md rounded-lg border"
+                >
+                  <ResizablePanel defaultSize={50}>
+                    <div className="flex h-[120px] items-center justify-center p-6">
+                      <span className="font-semibold">Left</span>
+                    </div>
+                  </ResizablePanel>
+                  <ResizableHandle />
+                  <ResizablePanel defaultSize={50}>
+                    <div className="flex h-[120px] items-center justify-center p-6">
+                      <span className="font-semibold">Right</span>
+                    </div>
+                  </ResizablePanel>
+                </ResizablePanelGroup>
+              </div>
+
+              {/* Vertical Layout */}
+              <div className="space-y-2">
+                <h4 className="text-lg font-medium">Vertical</h4>
+                <div className="max-w-md h-[200px] rounded-lg border overflow-hidden">
+                  <ResizablePanelGroup
+                    direction="vertical"
+                    className="h-full w-full"
+                  >
+                    <ResizablePanel defaultSize={40} minSize={20}>
                       <div className="flex h-full items-center justify-center p-6">
-                        <span className="font-semibold">Two</span>
+                        <span className="font-semibold">Top</span>
                       </div>
                     </ResizablePanel>
                     <ResizableHandle />
-                    <ResizablePanel defaultSize={75}>
+                    <ResizablePanel defaultSize={60} minSize={20}>
                       <div className="flex h-full items-center justify-center p-6">
-                        <span className="font-semibold">Three</span>
+                        <span className="font-semibold">Bottom</span>
                       </div>
                     </ResizablePanel>
                   </ResizablePanelGroup>
-                </ResizablePanel>
-              </ResizablePanelGroup>
+                </div>
+              </div>
             </div>
 
             {/* Scroll Area */}

package/src/hooks/index.ts

@@ -20,6 +20,7 @@ export * from './storage/useImageUpload'
 // - Navigation Hooks
 export * from './navigation/useShopNavigation'
 export * from './navigation/useCloseMini'
+export * from './navigation/useDeeplink'
 
 // - Shop Hooks
 export * from './shop/useShopCartActions'
@@ -30,3 +31,4 @@ export * from './shop/useRecommendedShops'
 // - Utility Hooks
 export * from './util/useErrorToast'
 export * from './util/useErrorScreen'
+export * from './util/useShare'

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

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

@@ -0,0 +1,7 @@
+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/useDeeplink.ts

@@ -0,0 +1,40 @@
+import {useMemo} from 'react'
+
+import {parseUrl} from '../../utils/parseUrl'
+
+interface UseDeeplinkReturnType {
+  /**
+   * The path of the deeplink.
+   */
+  path?: string
+  /**
+   * The query parameters of the deeplink.
+   */
+  queryParams?: {[key: string]: string | undefined}
+  /**
+   * The hash of the deeplink.
+   */
+  hash?: string
+}
+
+export const useDeeplink = (): UseDeeplinkReturnType => {
+  const {initialUrl} = window.minisParams
+
+  return useMemo(() => {
+    if (!initialUrl) {
+      return {
+        path: undefined,
+        queryParams: undefined,
+        hash: undefined,
+      }
+    }
+
+    const parsedUrl = parseUrl(initialUrl)
+
+    return {
+      path: parsedUrl.pathname,
+      queryParams: parsedUrl.query,
+      hash: parsedUrl.hash,
+    }
+  }, [initialUrl])
+}

package/src/hooks/util/useShare.ts

@@ -0,0 +1,18 @@
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+import {ShareParams} from '../../types'
+
+interface UseShareReturns {
+  /**
+   * Closes the Mini viewer.
+   */
+  share: (params: ShareParams) => void
+}
+
+export const useShare = (): UseShareReturns => {
+  const {share} = useShopActions()
+
+  return {
+    share: useHandleAction(share),
+  }
+}

package/src/index.css

@@ -201,6 +201,11 @@
   }
 }
 
+html,
+body {
+  touch-action: manipulation;
+}
+
 /* Disable text selection */
 body {
   -webkit-user-select: none;

package/src/mockActions.ts

@@ -233,4 +233,5 @@ window.minisSDK = window.minisSDK || {
       ],
     },
   }),
+  share: logAction('share'),
 }