@shopify/shop-minis-react 0.0.18 → 0.0.20

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,11 +3,19 @@ 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 './atoms/list'
 
 export * from './ui/accordion'
 export * from './ui/alert'
@@ -28,3 +36,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,8 @@
 
 @import './styles/theme.css';
 @import './styles/globals.css';
+@import './styles/animations.css';
+@import './styles/utilities.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/internal/useShopActions.ts

@@ -1,4 +1,4 @@
-import {ShopActions} from '../types'
+import {ShopActions} from '@shopify/shop-minis-platform/actions'
 
 export function useShopActions(): ShopActions {
   return window.minisSDK

package/src/internal/useShopActionsDataFetching.ts

@@ -41,13 +41,12 @@ export const useShopActionsDataFetching = <
         validator?.(dataToValidate)
         return null
       } catch (err) {
-        return (
-          err ??
-          new MiniError({
-            hook,
-            message: 'Validation failed',
-          })
-        )
+        if (err instanceof Error) return err
+
+        return new MiniError({
+          hook,
+          message: 'Validation failed',
+        })
       }
     },
     [validator, hook]

package/src/internal/useShopActionsPaginatedDataFetching.ts

@@ -1,11 +1,8 @@
 import {useCallback, useEffect, useMemo, useState} from 'react'
 
-import {
-  DataHookFetchPolicy,
-  PaginatedDataHookReturnsBase,
-  PaginationInfo,
-  ShopAction,
-} from '../types'
+import {ShopAction, PaginationInfo} from '@shopify/shop-minis-platform/actions'
+
+import {DataHookFetchPolicy, PaginatedDataHookReturnsBase} from '../types'
 import {formatError, MiniError} from '../utils/errors'
 
 export interface ShopActionsDataFetchingResult<S>

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) => ({
@@ -283,14 +288,27 @@ function makeMockActions(): ShopActions {
   return mock as ShopActions
 }
 
+// Detect if running on a mobile device
+const isMobile = (): boolean => {
+  const userAgent = navigator.userAgent.toLowerCase()
+  const isIOS = /iphone|ipad|ipod/.test(userAgent)
+  const isAndroid = /android/.test(userAgent)
+
+  return isIOS || isAndroid
+}
+
 export const injectMocks = () => {
-  window.minisSDK = makeMockActions()
-  window.minisParams = {
-    handle: 'mock-handle',
-    initialUrl: '/mock-initial-url',
+  // Only inject mocks if we aren't on a mobile device
+  if (isMobile()) {
+    return
   }
-}
 
-if (!window.minisSDK) {
-  injectMocks()
+  if (!window.minisSDK) {
+    window.minisSDK = makeMockActions()
+    window.minisParams = {
+      handle: 'mock-handle',
+      initialUrl: '/mock-initial-url',
+      platform: 'web',
+    }
+  }
 }

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