@shopify/shop-minis-react 0.0.17 → 0.0.19

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

@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+import {cn} from '../../lib/utils'
+import {Skeleton} from '../ui/skeleton'
+
+interface ProductCardSkeletonProps extends React.ComponentProps<'div'> {
+  variant?: 'default' | 'priceOverlay' | 'compact'
+}
+
+function ProductCardSkeleton({
+  className,
+  variant = 'default',
+  ...props
+}: ProductCardSkeletonProps) {
+  return (
+    <div className={cn('relative w-full', className)} {...props}>
+      <div className="aspect-square w-full overflow-hidden rounded-xl border border-gray-100">
+        <Skeleton className="h-full w-full" />
+      </div>
+      {variant === 'default' ? (
+        <div className="mt-3 mb-3">
+          <Skeleton className="mb-2 h-4 w-2/3" />
+          <Skeleton className="mb-2 h-5 w-1/3" />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export {ProductCardSkeleton}

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

@@ -1,8 +1,8 @@
 import * as React from 'react'
+import {useCallback} 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'
 
 import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
@@ -10,6 +10,7 @@ import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
 import {FavoriteButton} from '../atoms/favorite-button'
+import {ThumbhashImage} from '../atoms/thumbhash-image'
 import {Touchable} from '../atoms/touchable'
 import {Badge} from '../ui/badge'
 
@@ -96,7 +97,7 @@ function ProductCardImageContainer({
         // 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',
+        'w-full  aspect-square',
         variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',
         className
       )}
@@ -109,23 +110,50 @@ function ProductCardImage({
   className,
   src,
   alt,
+  aspectRatio,
+  thumbhash,
   ...props
 }: React.ComponentProps<'img'> & {
   src?: string
   alt?: string
+  aspectRatio?: number
+  thumbhash?: string
 }) {
-  return (
-    <div className="bg-gray-100 flex items-center justify-center">
-      {src ? (
+  const renderImageElement = useCallback(
+    (src: string) => {
+      if (thumbhash) {
+        return (
+          <ThumbhashImage
+            data-slot="product-card-image"
+            src={src}
+            alt={alt}
+            aspectRatio={aspectRatio}
+            thumbhash={thumbhash}
+            className={cn('w-full h-full object-cover', className)}
+            {...props}
+          />
+        )
+      }
+
+      return (
         <img
           data-slot="product-card-image"
           src={src}
           alt={alt}
-          className={cn('w-full h-full object-cover', className)}
+          className={cn('w-full h-full', className)}
           {...props}
         />
+      )
+    },
+    [alt, aspectRatio, className, props, thumbhash]
+  )
+
+  return (
+    <div className="bg-gray-100 flex items-center justify-center w-full h-full">
+      {src ? (
+        renderImageElement(src)
       ) : (
-        <div className="text-gray-400 text-sm">No Image</div>
+        <div className="text-gray-400 text-sm w-full text-center">No Image</div>
       )}
     </div>
   )
@@ -249,13 +277,21 @@ function ProductCardOriginalPrice({
 }
 
 export interface ProductCardProps {
+  /** The product to display in the card */
   product: Product
+  /** Optional selected variant of the product to show specific variant data */
   selectedProductVariant?: ProductVariant
+  /** Visual style variant of the card */
   variant?: 'default' | 'priceOverlay' | 'compact'
+  /** Whether the card can be clicked/tapped to navigate to product details */
   touchable?: boolean
+  /** Optional text to display in a badge on the card */
   badgeText?: string
+  /** Visual style variant for the badge */
   badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline'
+  /** Callback fired when the favorite button is toggled */
   onFavoriteToggled?: (isFavorited: boolean) => void
+  /** Optional ID for the section containing this card */
   sectionId?: string
 }
 
@@ -351,7 +387,12 @@ function ProductCard({
       onPress={handlePress}
     >
       <ProductCardImageContainer variant={variant}>
-        <ProductCardImage src={imageUrl} alt={imageAltText} />
+        <ProductCardImage
+          src={imageUrl}
+          alt={imageAltText}
+          aspectRatio={1}
+          thumbhash={featuredImage?.thumbhash ?? undefined}
+        />
 
         {/* Price overlay badge for priceOverlay variant */}
         {variant === 'priceOverlay' && currencyCode && amount && (

package/src/components/index.ts

@@ -3,15 +3,23 @@ export * from './MinisContainer'
 export * from './commerce/product-card'
 export * from './commerce/product-link'
 export * from './commerce/merchant-card'
+export * from './commerce/product-card-skeleton'
+export * from './commerce/merchant-card-skeleton'
+
+export * from './navigation/transition-container'
+export * from './navigation/transition-link'
 
 export * from './atoms/button'
 export * from './atoms/favorite-button'
 export * from './atoms/icon-button'
+export * from './atoms/thumbhash-image'
 export * from './atoms/touchable'
+export * from './atoms/alert-dialog'
 
 export * from './ui/accordion'
 export * from './ui/alert'
 export * from './ui/alert-dialog'
+export * from './ui/avatar'
 export * from './ui/card'
 export * from './ui/carousel'
 export * from './ui/checkbox'
@@ -27,3 +35,4 @@ export * from './ui/select'
 export * from './ui/separator'
 export * from './ui/sheet'
 export * from './ui/sonner'
+export * from './ui/skeleton'

package/src/components/navigation/transition-container.tsx

@@ -0,0 +1,7 @@
+import {useViewTransitions} from '../../hooks/navigation/useViewTransitions'
+
+export function TransitionContainer({children}: {children: React.ReactNode}) {
+  useViewTransitions()
+
+  return children
+}

package/src/components/navigation/transition-link.tsx

@@ -0,0 +1,48 @@
+import {forwardRef, AnchorHTMLAttributes} from 'react'
+
+import {useHref} from 'react-router'
+
+import {useNavigateWithTransition} from '../../hooks/navigation/useNavigateWithTransition'
+
+type TransitionLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  to: string
+}
+
+const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i
+
+export const TransitionLink = forwardRef<
+  HTMLAnchorElement,
+  TransitionLinkProps
+>(({onClick, to, children, ...props}, forwardedRef) => {
+  const transitionNavigate = useNavigateWithTransition()
+
+  const isAbsolute = typeof to === 'string' && ABSOLUTE_URL_REGEX.test(to)
+
+  if (isAbsolute) {
+    console.warn(
+      `TransitionLink: absolute URLs are not supported. Please update to a valid relative path.`
+    )
+  }
+
+  const href = useHref(to)
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (onClick) onClick(event)
+
+    if (!event.defaultPrevented) {
+      event.preventDefault()
+      transitionNavigate(to)
+    }
+  }
+
+  return (
+    <a
+      {...props}
+      onClick={handleClick}
+      href={isAbsolute ? undefined : href}
+      ref={forwardedRef}
+    >
+      {children}
+    </a>
+  )
+})

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import {cn} from '../../lib/utils'
+
+function Skeleton({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
+}
+
+export {Skeleton}

package/src/hooks/index.ts

@@ -31,6 +31,7 @@ export * from './storage/useImageUpload'
 export * from './navigation/useShopNavigation'
 export * from './navigation/useCloseMini'
 export * from './navigation/useDeeplink'
+export * from './navigation/useNavigateWithTransition'
 
 // - Shop Hooks
 export * from './shop/useShop'

package/src/hooks/navigation/useNavigateWithTransition.ts

@@ -0,0 +1,62 @@
+import {useLocation, useNavigate, NavigateOptions} from 'react-router'
+
+import {DATA_NAVIGATION_TYPE_ATTRIBUTE} from '../../types'
+
+export function useNavigateWithTransition() {
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const transitionNavigate = (
+    to: string | number,
+    options?: NavigateOptions
+  ) => {
+    if (typeof to === 'number') {
+      // Delta navigation - no options parameter
+      if (document.startViewTransition) {
+        const transition = document.startViewTransition(() => {
+          navigate(to)
+        })
+
+        transition.finished
+          .then(() => {
+            document.documentElement.removeAttribute(
+              DATA_NAVIGATION_TYPE_ATTRIBUTE
+            )
+          })
+          .catch(error => {
+            console.error('View transition error:', error)
+          })
+      } else {
+        return navigate(to)
+      }
+      return
+    }
+
+    const isSameRoute = to === location.pathname
+
+    // Path navigation - with options
+    if (document.startViewTransition) {
+      const transition = document.startViewTransition(() => {
+        navigate(to, {
+          preventScrollReset: true,
+          replace: isSameRoute,
+          ...options,
+        })
+      })
+
+      transition.finished
+        .then(() => {
+          document.documentElement.removeAttribute(
+            DATA_NAVIGATION_TYPE_ATTRIBUTE
+          )
+        })
+        .catch(error => {
+          console.error('View transition error:', error)
+        })
+    } else {
+      return navigate(to, options)
+    }
+  }
+
+  return transitionNavigate
+}

package/src/hooks/navigation/useViewTransitions.ts

@@ -0,0 +1,79 @@
+import {useEffect} from 'react'
+
+import {useNavigationType, useLocation} from 'react-router'
+
+import {DATA_NAVIGATION_TYPE_ATTRIBUTE, NAVIGATION_TYPES} from '../../types'
+
+export function useViewTransitions() {
+  const location = useLocation()
+  const navType = useNavigationType()
+
+  useEffect(() => {
+    let isAndroidBackPress = false
+
+    const handleAndroidBackPress = () => {
+      isAndroidBackPress = true
+
+      if (document.startViewTransition) {
+        const transition = document.startViewTransition(() => {
+          document.documentElement.setAttribute(
+            DATA_NAVIGATION_TYPE_ATTRIBUTE,
+            NAVIGATION_TYPES.backward
+          )
+        })
+
+        transition.finished
+          .then(() => {
+            document.documentElement.removeAttribute(
+              DATA_NAVIGATION_TYPE_ATTRIBUTE
+            )
+          })
+          .catch(error => {
+            console.error('View transition error:', error)
+          })
+      }
+    }
+
+    const handlePopstate = (event: PopStateEvent) => {
+      // If the ios back gesture is used, we don't want to trigger view transition
+      if (event.hasUAVisualTransition && !isAndroidBackPress) {
+        document.documentElement.setAttribute(
+          DATA_NAVIGATION_TYPE_ATTRIBUTE,
+          NAVIGATION_TYPES.none
+        )
+      }
+    }
+
+    window.addEventListener('androidbackpressed', handleAndroidBackPress)
+    window.addEventListener('popstate', handlePopstate)
+
+    return () => {
+      window.removeEventListener('popstate', handlePopstate)
+      window.removeEventListener('androidbackpressed', handleAndroidBackPress)
+    }
+  }, [location])
+
+  useEffect(() => {
+    const currentNavType = document.documentElement.getAttribute(
+      DATA_NAVIGATION_TYPE_ATTRIBUTE
+    )
+
+    if (!currentNavType) {
+      if (navType === 'PUSH') {
+        document.documentElement.setAttribute(
+          DATA_NAVIGATION_TYPE_ATTRIBUTE,
+          NAVIGATION_TYPES.forward
+        )
+      } else if (navType === 'POP') {
+        document.documentElement.setAttribute(
+          DATA_NAVIGATION_TYPE_ATTRIBUTE,
+          NAVIGATION_TYPES.backward
+        )
+      }
+    }
+
+    return () => {
+      document.documentElement.removeAttribute(DATA_NAVIGATION_TYPE_ATTRIBUTE)
+    }
+  }, [navType, location])
+}

package/src/index.css

@@ -3,6 +3,7 @@
 
 @import './styles/theme.css';
 @import './styles/globals.css';
+@import './styles/animations.css';
 
 /* When consumed as npm package, this path resolves from the consuming app's location */
 @source '../node_modules/@shopify/shop-minis-react/src';

package/src/mocks.ts

@@ -2,7 +2,7 @@ import {Product, Gender} from '@shopify/shop-minis-platform'
 import {ShopActions} from '@shopify/shop-minis-platform/actions'
 
 // Helper functions for common data structures
-const createProduct = (
+export const createProduct = (
   id: string,
   title: string,
   price = '99.99',
@@ -21,7 +21,7 @@ const createProduct = (
   featuredImage: {url: `https://picsum.photos/400/400`, altText: title},
 })
 
-const createShop = (id: string, name: string) => ({
+export const createShop = (id: string, name: string) => ({
   id,
   name,
   isFollowing: false,
@@ -29,6 +29,11 @@ const createShop = (id: string, name: string) => ({
     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},
+  },
 })
 
 const createPagination = (hasNext = false) => ({
@@ -288,6 +293,7 @@ export const injectMocks = () => {
   window.minisParams = {
     handle: 'mock-handle',
     initialUrl: '/mock-initial-url',
+    platform: 'ios',
   }
 }
 

package/src/stories/Accordion.stories.tsx

@@ -0,0 +1,124 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '../components/ui/accordion'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Accordion',
+  component: Accordion,
+  parameters: {},
+  args: {
+    type: 'single',
+    collapsible: false,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Accordion>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const NonCollapsible: Story = {
+  args: {
+    type: 'single',
+    collapsible: false,
+  },
+  render: args => (
+    <Accordion {...args}>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Can i collapse this?</AccordionTrigger>
+        <AccordionContent>
+          No. When you set the collapsible prop to false, the accordion is not
+          collapsible.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const Collapsible: Story = {
+  args: {
+    type: 'single',
+    collapsible: true,
+  },
+  render: args => (
+    <Accordion {...args}>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Can i collapse this?</AccordionTrigger>
+        <AccordionContent>
+          Yes. When you set the collapsible prop to true, you can collapse the
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const Single: Story = {
+  args: {
+    type: 'single',
+  },
+  render: args => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Single item only</AccordionTrigger>
+        <AccordionContent>
+          With the single type, only one item can be open at a time.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Another item</AccordionTrigger>
+        <AccordionContent>
+          Opening this item will close the previous one.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const Multiple: Story = {
+  args: {
+    type: 'multiple',
+  },
+  render: args => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
+        <AccordionContent>
+          Yes, you can open multiple items at the same time with the multiple
+          type.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it customizable?</AccordionTrigger>
+        <AccordionContent>
+          Yes, you can customize the styling and behavior to match your needs.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Long content example</AccordionTrigger>
+        <AccordionContent>
+          <div className="space-y-4">
+            <p>
+              This is a longer content example that demonstrates how the
+              accordion handles substantial amounts of text and content.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <ul className="list-disc list-inside space-y-1">
+              <li>First item in the list</li>
+              <li>Second item in the list</li>
+              <li>Third item in the list</li>
+            </ul>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}

package/src/stories/Alert.stories.tsx

@@ -0,0 +1,38 @@
+import {Alert, AlertTitle, AlertDescription} from '../components/ui/alert'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Alert',
+  render: ({variant}) => (
+    <Alert variant={variant}>
+      <AlertTitle>Alert Title</AlertTitle>
+      <AlertDescription>
+        This is a default alert with a title and description.
+      </AlertDescription>
+    </Alert>
+  ),
+
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['default', 'destructive'],
+    },
+  },
+} satisfies Meta<typeof Alert>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+  },
+}
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+  },
+}

package/src/stories/AlertDialog.stories.tsx

@@ -0,0 +1,48 @@
+import {fn} from 'storybook/test'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+} from '../components'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Ui/AlertDialog',
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Open Alert Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={() => fn()}>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof AlertDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

package/src/stories/Avatar.stories.tsx

@@ -0,0 +1,29 @@
+import {Avatar, AvatarFallback, AvatarImage} from '../components/ui/avatar'
+
+import type {StoryObj} from '@storybook/react-vite'
+
+interface AvatarProps {
+  src: 'https://github.com/shadcn.png'
+  userInitials: string
+}
+
+const meta = {
+  title: 'UI/Avatar',
+  render: ({userInitials}: AvatarProps) => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" />
+      <AvatarFallback>{userInitials}</AvatarFallback>
+    </Avatar>
+  ),
+  args: {
+    className: 'size-12',
+    src: 'https://github.com/shadcn.png',
+    userInitials: 'CN',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}