@shopify/shop-minis-react 0.0.28 → 0.0.29

package/package.json

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

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/index.ts

@@ -10,7 +10,7 @@ export * from './commerce/search'
 
 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'

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 */