@shopify/shop-minis-react 0.0.27 → 0.0.29

package/dist/shop-minis-react/node_modules/.pnpm/video.js@8.23.3/node_modules/video.js/dist/video.es.js

@@ -1,6 +1,6 @@
 import S from "../../../../../../../_virtual/window.js";
 import B from "../../../../../../../_virtual/document.js";
-import il from "../../../../../../../_virtual/index3.js";
+import il from "../../../../../../../_virtual/index2.js";
 import ao from "../../../../../../../_virtual/browser-index.js";
 import xe from "../../../../@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/extends.js";
 import Kc from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/resolve-url.js";

package/dist/utils/colors.js

@@ -1,4 +1,4 @@
-import o from "../_virtual/index2.js";
+import o from "../_virtual/index3.js";
 const a = (r) => o(r).darken(0.2).isDark();
 export {
   a as isDarkColor

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "sideEffects": false,
   "type": "module",
   "engines": {

package/src/components/atoms/content-monitor.tsx

@@ -0,0 +1,25 @@
+import {useShopActions} from '../../internal/useShopActions'
+
+import {LongPressDetector} from './long-press-detector'
+
+export function ContentMonitor({
+  publicId,
+  children,
+}: {
+  publicId?: string
+  children: React.ReactNode
+}) {
+  const {showFeedbackSheet} = useShopActions()
+
+  return (
+    <LongPressDetector
+      onLongPress={() => {
+        if (!publicId) return
+
+        showFeedbackSheet({publicId})
+      }}
+    >
+      {children}
+    </LongPressDetector>
+  )
+}

package/src/components/{content → atoms}/content-wrapper.tsx

@@ -40,6 +40,7 @@ export function ContentWrapper({
 }: ContentWrapperProps) {
   const {content, loading} = useContent({
     identifiers: [{publicId, externalId}],
+    skip: !publicId && !externalId,
   })
 
   const contentItem = content?.[0]

package/src/components/atoms/long-press-detector.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+
+import {motion, HTMLMotionProps} from 'motion/react'
+
+interface LongPressDetectorProps extends HTMLMotionProps<'div'> {
+  onLongPress: () => void
+  delay?: number
+  children: React.ReactNode
+}
+
+export const LongPressDetector = ({
+  onLongPress,
+  delay = 500,
+  children,
+  ...motionProps
+}: LongPressDetectorProps) => {
+  const longPressTimeoutRef = React.useRef<number | undefined>(undefined)
+
+  const handleTapStart = React.useCallback(() => {
+    longPressTimeoutRef.current = window.setTimeout(() => {
+      onLongPress()
+      longPressTimeoutRef.current = undefined
+    }, delay)
+  }, [onLongPress, delay])
+
+  const handleTapEnd = React.useCallback(() => {
+    if (longPressTimeoutRef.current) {
+      clearTimeout(longPressTimeoutRef.current)
+      longPressTimeoutRef.current = undefined
+    }
+  }, [])
+
+  // Cleanup timer on unmount
+  React.useEffect(() => {
+    return () => {
+      if (longPressTimeoutRef.current) {
+        clearTimeout(longPressTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <motion.div
+      onTapStart={handleTapStart}
+      onTap={handleTapEnd}
+      onTapCancel={handleTapEnd}
+      {...motionProps}
+    >
+      {children}
+    </motion.div>
+  )
+}

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

@@ -223,10 +223,15 @@ function ProductLinkActions({
 export interface ProductLinkProps {
   product: Product
   hideFavoriteAction?: boolean
+  onClick?: (product: Product) => void
 }
 
 // Composed ProductLink component
-function ProductLink({product, hideFavoriteAction = false}: ProductLinkProps) {
+function ProductLink({
+  product,
+  hideFavoriteAction = false,
+  onClick,
+}: ProductLinkProps) {
   const {navigateToProduct} = useShopNavigation()
   const {saveProduct, unsaveProduct} = useSavedProductsActions()
 
@@ -262,7 +267,8 @@ function ProductLink({product, hideFavoriteAction = false}: ProductLinkProps) {
     navigateToProduct({
       productId: id,
     })
-  }, [navigateToProduct, id])
+    onClick?.(product)
+  }, [navigateToProduct, id, onClick, product])
 
   const handleActionPress = React.useCallback(async () => {
     const previousState = isFavoritedLocal
@@ -321,7 +327,7 @@ function ProductLink({product, hideFavoriteAction = false}: ProductLinkProps) {
       <ProductLinkInfo layout="horizontal">
         <ProductLinkTitle>{title}</ProductLinkTitle>
 
-        {reviewCount && averageRating && (
+        {reviewCount && averageRating ? (
           <ProductLinkRating>
             <div className="flex items-center gap-1">
               {Array.from({length: 5}, (_, i) => (
@@ -343,7 +349,7 @@ function ProductLink({product, hideFavoriteAction = false}: ProductLinkProps) {
               </span>
             </div>
           </ProductLinkRating>
-        )}
+        ) : null}
 
         <ProductLinkPrice>
           {hasDiscount ? (

package/src/components/commerce/search.tsx

@@ -220,6 +220,7 @@ export interface SearchResultsProps
     SearchInputProps,
     SearchResultsListProps {
   showSearchInput?: boolean
+  onProductClick?: (product: Product) => void
 }
 
 function Search({
@@ -230,6 +231,7 @@ function Search({
   className,
   renderItem,
   itemHeight,
+  onProductClick,
 }: SearchResultsProps) {
   const _renderItem = (product: Product, index: number) => {
     if (renderItem) {
@@ -238,7 +240,12 @@ function Search({
 
     return (
       <div className="p-2">
-        <ProductLink key={product.id} product={product} hideFavoriteAction />
+        <ProductLink
+          key={product.id}
+          product={product}
+          hideFavoriteAction
+          onClick={onProductClick}
+        />
       </div>
     )
   }

package/src/components/content/image-content-wrapper.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import {ContentWrapper} from '../atoms/content-wrapper'
+
+type ImageContentWrapperProps = (
+  | {publicId: string; externalId?: never}
+  | {externalId: string; publicId?: never}
+) & {
+  onLoad?: () => void
+  width?: number
+  height?: number
+  className?: string
+  Loader?: React.ReactNode | string
+}
+
+export function ImageContentWrapper({
+  onLoad,
+  width,
+  height,
+  className,
+  publicId,
+  externalId,
+  Loader,
+}: ImageContentWrapperProps) {
+  return (
+    <ContentWrapper {...(externalId ? {externalId} : {publicId: publicId!})}>
+      {({content, loading}) => {
+        if (loading) return Loader ? <>{Loader}</> : null
+
+        return (
+          <img
+            src={content?.image?.url}
+            width={width}
+            height={height}
+            alt={content?.title}
+            onLoad={onLoad}
+            className={className}
+          />
+        )
+      }}
+    </ContentWrapper>
+  )
+}

package/src/components/index.ts

@@ -8,9 +8,9 @@ export * from './commerce/merchant-card-skeleton'
 export * from './commerce/quantity-selector'
 export * from './commerce/search'
 
-export * from './content/content-wrapper'
+export * from './content/image-content-wrapper'
 
-export * from './navigation/transition-container'
+export * from './navigation/minis-router'
 export * from './navigation/transition-link'
 
 export * from './atoms/button'
@@ -18,6 +18,7 @@ export * from './atoms/favorite-button'
 export * from './atoms/icon-button'
 export * from './atoms/thumbhash-image'
 export * from './atoms/touchable'
+export * from './atoms/long-press-detector'
 export * from './atoms/alert-dialog'
 export * from './atoms/list'
 export * from './atoms/video-player'

package/src/components/navigation/minis-router.tsx

@@ -0,0 +1,23 @@
+import {BrowserRouter, BrowserRouterProps} from 'react-router'
+
+import {TransitionContainer} from './transition-container'
+
+type ShopMinisRouterProps = BrowserRouterProps & {
+  viewTransitions?: boolean
+}
+
+export function MinisRouter({
+  children,
+  viewTransitions = false,
+  ...props
+}: ShopMinisRouterProps) {
+  if (viewTransitions) {
+    return (
+      <BrowserRouter {...props}>
+        <TransitionContainer>{children}</TransitionContainer>
+      </BrowserRouter>
+    )
+  }
+
+  return <BrowserRouter {...props}>{children}</BrowserRouter>
+}

package/src/index.css

@@ -1,6 +1,7 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
+@import './styles/fonts.css';
 @import './styles/theme.css';
 @import './styles/globals.css';
 @import './styles/animations.css';

package/src/stories/Search.stories.tsx

@@ -0,0 +1,37 @@
+import {fn} from 'storybook/test'
+
+import {
+  Search,
+  SearchInput,
+  SearchProvider,
+  SearchResultsList,
+} from '../components'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Commerce/Search',
+  component: Search,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Search>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    onProductClick: fn(),
+  },
+}
+
+export const Composite: Story = {
+  render: args => (
+    <SearchProvider {...args}>
+      <SearchInput placeholder="Search..." />
+      <SearchResultsList />
+    </SearchProvider>
+  ),
+}

package/src/styles/fonts.css

@@ -0,0 +1,26 @@
+@font-face {
+  font-family: 'Suisse Intl';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://cdn.shopify.com/shop-assets/static_uploads/shoplift/SuisseIntl-Book.woff2')
+    format('woff2');
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://cdn.shopify.com/shop-assets/static_uploads/shoplift/SuisseIntl-Medium.woff2')
+    format('woff2');
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  font-style: normal;
+  font-weight: 600 700;
+  font-display: swap;
+  src: url('https://cdn.shopify.com/shop-assets/static_uploads/shoplift/SuisseIntl-SemiBold.woff2')
+    format('woff2');
+}

package/src/styles/theme.css

@@ -94,6 +94,32 @@
 
   /* Button theme colors */
   --color-button-overlay: var(--grayscale-d70);
+
+  /* Default fonts */
+  --font-sans: 'Suisse Intl', ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+
+  /* Default Tailwind spacing scale (0.25rem = 4px base) */
+  --spacing: 0.25rem;
+
+  /* Semantic spacing aliases */
+  --spacing-shop-screen-margin: 20px;
+  --spacing--shop-screen-margin: -20px;
+  --spacing-shop-section-gap: 36px;
+  --spacing--shop-section-gap: -36px;
+  --spacing-shop-card-row-gutter: 8px;
+  --spacing--shop-card-row-gutter: -8px;
+  --spacing-shop-card-padding: 16px;
+  --spacing--shop-card-padding: -16px;
+
+  /* Shop shadow values */
+  --shadow-shop-xs: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
+  --shadow-shop-xs-surface: 0px -1px 4px 0px rgba(0, 0, 0, 0.06);
+  --shadow-shop-s: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+  --shadow-shop-m: 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
+  --shadow-shop-l: 0px 8px 24px 0px rgba(0, 0, 0, 0.24);
 }
 
 /* Dark mode overrides - only the palette colors that change */

package/dist/components/content/content-monitor.js

@@ -1,17 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Touchable as t } from "../atoms/touchable.js";
-function i({
-  // publicId,
-  children: o
-}) {
-  return /* @__PURE__ */ r(
-    t,
-    {
-      children: o
-    }
-  );
-}
-export {
-  i as ContentMonitor
-};
-//# sourceMappingURL=content-monitor.js.map

package/dist/components/content/content-monitor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"content-monitor.js","sources":["../../../src/components/content/content-monitor.tsx"],"sourcesContent":["// import {useShopActions} from '../../internal/useShopActions'\nimport {Touchable} from '../atoms/touchable'\n\nexport function ContentMonitor({\n  // publicId,\n  children,\n}: {\n  publicId: string\n  children: React.ReactNode\n}) {\n  // const {showFeedbackSheet} = useShopActions()\n\n  return (\n    <Touchable\n    // TODO: Add long press support to Touchable\n    // onLongPress={() => {\n    //   showFeedbackSheet({publicId})\n    // }}\n    >\n      {children}\n    </Touchable>\n  )\n}\n"],"names":["ContentMonitor","children","jsx","Touchable"],"mappings":";;AAGO,SAASA,EAAe;AAAA;AAAA,EAE7B,UAAAC;AACF,GAGG;AAIC,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MAME,UAAAF;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/content/content-wrapper.js

@@ -1,17 +0,0 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useContent as p } from "../../hooks/content/useContent.js";
-import { ContentMonitor as m } from "./content-monitor.js";
-function d({
-  publicId: r,
-  externalId: e,
-  children: o
-}) {
-  const { content: i, loading: t } = p({
-    identifiers: [{ publicId: r, externalId: e }]
-  }), n = i?.[0];
-  return t || !n ? o({ loading: t }) : /* @__PURE__ */ c(m, { publicId: n.publicId, children: o({ content: n, loading: t }) });
-}
-export {
-  d as ContentWrapper
-};
-//# sourceMappingURL=content-wrapper.js.map

package/dist/components/content/content-wrapper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"content-wrapper.js","sources":["../../../src/components/content/content-wrapper.tsx"],"sourcesContent":["import {useContent} from '../../hooks/content/useContent'\nimport {Content} from '../../types'\n\nimport {ContentMonitor} from './content-monitor'\n\ninterface BaseContentWrapperProps {\n  children: ({\n    content,\n    loading,\n  }: {\n    content?: Content\n    loading: boolean\n  }) => JSX.Element | null\n}\n\ninterface PublicIdContentWrapperProps extends BaseContentWrapperProps {\n  publicId: string\n  externalId?: never\n}\n\ninterface ExternalIdContentWrapperProps extends BaseContentWrapperProps {\n  externalId: string\n  publicId?: never\n}\n\ntype ContentWrapperProps =\n  | PublicIdContentWrapperProps\n  | ExternalIdContentWrapperProps\n\n// It's too messy in the docs to show the complete types here so we show a simplified version\nexport interface ContentWrapperPropsForDocs extends BaseContentWrapperProps {\n  publicId?: string\n  externalId?: string\n}\n\nexport function ContentWrapper({\n  publicId,\n  externalId,\n  children,\n}: ContentWrapperProps) {\n  const {content, loading} = useContent({\n    identifiers: [{publicId, externalId}],\n  })\n\n  const contentItem = content?.[0]\n\n  if (loading || !contentItem) {\n    return children({loading})\n  }\n\n  return (\n    <ContentMonitor publicId={contentItem.publicId}>\n      {children({content: contentItem, loading})}\n    </ContentMonitor>\n  )\n}\n"],"names":["ContentWrapper","publicId","externalId","children","content","loading","useContent","contentItem","jsx","ContentMonitor"],"mappings":";;;AAmCO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,GAAwB;AACtB,QAAM,EAAC,SAAAC,GAAS,SAAAC,EAAO,IAAIC,EAAW;AAAA,IACpC,aAAa,CAAC,EAAC,UAAAL,GAAU,YAAAC,EAAW,CAAA;AAAA,EAAA,CACrC,GAEKK,IAAcH,IAAU,CAAC;AAE3B,SAAAC,KAAW,CAACE,IACPJ,EAAS,EAAC,SAAAE,GAAQ,IAIzB,gBAAAG,EAACC,GAAe,EAAA,UAAUF,EAAY,UACnC,UAASJ,EAAA,EAAC,SAASI,GAAa,SAAAF,EAAO,CAAC,EAC3C,CAAA;AAEJ;"}

package/src/components/content/content-monitor.tsx

@@ -1,23 +0,0 @@
-// import {useShopActions} from '../../internal/useShopActions'
-import {Touchable} from '../atoms/touchable'
-
-export function ContentMonitor({
-  // publicId,
-  children,
-}: {
-  publicId: string
-  children: React.ReactNode
-}) {
-  // const {showFeedbackSheet} = useShopActions()
-
-  return (
-    <Touchable
-    // TODO: Add long press support to Touchable
-    // onLongPress={() => {
-    //   showFeedbackSheet({publicId})
-    // }}
-    >
-      {children}
-    </Touchable>
-  )
-}