@shopify/shop-minis-react 0.0.25 → 0.0.27

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

@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+import {cn} from '../../lib/utils'
+import {Skeleton} from '../ui/skeleton'
+
+function ProductLinkSkeleton({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'relative w-full shadow-sm rounded-lg p-4 items-center',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex flex-row items-center justify-center w-full">
+        <Skeleton className="aspect-square w-15 h-15" />
+        <div className="flex flex-col justify-center items-start ml-2 w-full pt-2">
+          <Skeleton className="mb-3 h-3 w-3/4" />
+          <Skeleton className="mb-2 h-3 w-1/4" />
+          <Skeleton className="mb-2 h-3 w-1/3" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export {ProductLinkSkeleton}

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

@@ -222,10 +222,11 @@ function ProductLinkActions({
 
 export interface ProductLinkProps {
   product: Product
+  hideFavoriteAction?: boolean
 }
 
 // Composed ProductLink component
-function ProductLink({product}: ProductLinkProps) {
+function ProductLink({product, hideFavoriteAction = false}: ProductLinkProps) {
   const {navigateToProduct} = useShopNavigation()
   const {saveProduct, unsaveProduct} = useSavedProductsActions()
 
@@ -247,7 +248,6 @@ function ProductLink({product}: ProductLinkProps) {
 
   const averageRating = reviewAnalytics?.averageRating
   const reviewCount = reviewAnalytics?.reviewCount
-  const currencyCode = price?.currencyCode
   const amount = price?.amount
     ? formatMoney(price?.amount, price?.currencyCode)
     : undefined
@@ -256,7 +256,6 @@ function ProductLink({product}: ProductLinkProps) {
   const compareAtPriceAmount = compareAtPrice?.amount
     ? formatMoney(compareAtPrice?.amount, compareAtPrice?.currencyCode)
     : undefined
-  const compareAtPriceCurrencyCode = compareAtPrice?.currencyCode
   const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount
 
   const handlePress = React.useCallback(() => {
@@ -360,10 +359,12 @@ function ProductLink({product}: ProductLinkProps) {
         </ProductLinkPrice>
       </ProductLinkInfo>
 
-      <ProductLinkActions
-        filled={isFavoritedLocal}
-        onPress={handleActionPress}
-      />
+      {hideFavoriteAction ? null : (
+        <ProductLinkActions
+          filled={isFavoritedLocal}
+          onPress={handleActionPress}
+        />
+      )}
     </ProductLinkRoot>
   )
 }

package/src/components/commerce/search.tsx

@@ -0,0 +1,264 @@
+import * as React from 'react'
+import {createContext, useContext, useState, useCallback} from 'react'
+
+import {SearchIcon, X} from 'lucide-react'
+
+import {useProductSearch} from '../../hooks/product/useProductSearch'
+import {cn} from '../../lib/utils'
+import {type Product} from '../../types'
+import {IconButton} from '../atoms/icon-button'
+import {List} from '../atoms/list'
+import {Input} from '../ui/input'
+
+import {ProductLink} from './product-link'
+import {ProductLinkSkeleton} from './product-link-skeleton'
+
+const ESTIMATED_PRODUCT_LINK_HEIGHT = 100
+
+interface SearchContextValue {
+  query: string
+  setQuery: (query: string) => void
+  products: Product[] | null
+  loading: boolean
+  error: Error | null
+  fetchMore?: () => void
+  hasNextPage: boolean
+  isTyping: boolean
+}
+
+const SearchContext = createContext<SearchContextValue | null>(null)
+
+function useSearchContext() {
+  const context = useContext(SearchContext)
+  if (!context) {
+    throw new Error('useSearchContext must be used within a SearchProvider')
+  }
+  return context
+}
+
+export interface SearchProviderProps {
+  initialQuery?: string
+  children: React.ReactNode
+}
+
+function SearchProvider({initialQuery = '', children}: SearchProviderProps) {
+  const [query, setQueryState] = useState(initialQuery)
+
+  const {products, loading, error, fetchMore, hasNextPage, isTyping} =
+    useProductSearch({
+      query,
+      fetchPolicy: 'network-only',
+    })
+
+  const setQuery = useCallback((newQuery: string) => {
+    setQueryState(newQuery)
+  }, [])
+
+  const contextValue: SearchContextValue = {
+    query,
+    setQuery,
+    products,
+    loading,
+    error,
+    fetchMore,
+    hasNextPage,
+    isTyping,
+  }
+
+  return (
+    <SearchContext.Provider value={contextValue}>
+      {children}
+    </SearchContext.Provider>
+  )
+}
+
+export interface SearchInputProps {
+  placeholder?: string
+  className?: string
+  inputProps?: React.ComponentProps<'input'>
+}
+
+function SearchInput({
+  placeholder = 'Search products...',
+  className,
+  inputProps,
+}: SearchInputProps) {
+  const {query, setQuery} = useSearchContext()
+
+  const handleQueryChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setQuery(event.target.value)
+      inputProps?.onChange?.(event)
+    },
+    [inputProps, setQuery]
+  )
+
+  return (
+    <div className="relative flex flex-1 items-center rounded-full pl-4 pr-2 py-1 bg-gray-100">
+      <div className="relative flex items-center">
+        <SearchIcon
+          size={18}
+          className={cn('text-accent-foreground opacity-60')}
+        />
+      </div>
+      <div className="relative flex-1 flex items-center mx-2">
+        <Input
+          name="search"
+          onChange={handleQueryChange}
+          placeholder={placeholder}
+          type="search"
+          role="searchbox"
+          autoComplete="off"
+          value={query}
+          data-testid="search-input"
+          {...inputProps}
+          className={cn(
+            `w-full flex overflow-hidden rounded-radius-28 border-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60`,
+            className
+          )}
+        />
+      </div>
+      <div className="relative flex items-center">
+        {query === '' ? null : (
+          <IconButton
+            Icon={X}
+            size="sm"
+            filled={false}
+            iconStyles=""
+            onClick={() => setQuery('')}
+            buttonStyles="flex items-center rounded-radius-max bg-[var(--grayscale-l20)]"
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export interface SearchResultsListProps {
+  renderItem?: (product: Product, index: number) => React.ReactNode
+  height?: number
+  itemHeight?: number
+  initialStateComponent?: React.JSX.Element
+  showScrollbar?: boolean
+  overscanCount?: number
+}
+
+function SearchResultsList({
+  height = window.innerHeight,
+  renderItem,
+  itemHeight = ESTIMATED_PRODUCT_LINK_HEIGHT,
+  initialStateComponent,
+  showScrollbar,
+  overscanCount = 5,
+}: SearchResultsListProps) {
+  const {query, products, loading, fetchMore, hasNextPage, isTyping} =
+    useSearchContext()
+
+  const _renderItem = (product: Product, index: number) => {
+    if (renderItem) {
+      return renderItem(product, index)
+    }
+
+    return (
+      <div className="p-2">
+        <ProductLink key={product.id} product={product} hideFavoriteAction />
+      </div>
+    )
+  }
+
+  const shouldShowStartingState = query.trim().length === 0
+  const shouldShowLoading =
+    (!products || products.length === 0) && (loading || isTyping)
+  const shouldShowEmptyState = (!products || products.length === 0) && !loading
+
+  if (shouldShowStartingState) {
+    return (
+      initialStateComponent || (
+        <div className="flex items-center justify-center h-32 text-gray-500">
+          Start typing to search for products
+        </div>
+      )
+    )
+  }
+
+  if (shouldShowLoading) {
+    return (
+      <div className="flex flex-col px-4 py-4">
+        <ProductLinkSkeleton className="mb-4" />
+        <ProductLinkSkeleton className="mb-4" />
+        <ProductLinkSkeleton className="mb-4" />
+        <ProductLinkSkeleton className="mb-4" />
+      </div>
+    )
+  }
+
+  if (shouldShowEmptyState) {
+    return (
+      <div className="flex items-center justify-center h-32 text-gray-500">
+        {`No products found for "${query}"`}
+      </div>
+    )
+  }
+
+  return (
+    <List
+      items={products || []}
+      height={height}
+      renderItem={_renderItem}
+      itemSizeForRow={() => itemHeight}
+      fetchMore={hasNextPage ? fetchMore : undefined}
+      showScrollbar={showScrollbar}
+      overscanCount={overscanCount}
+    />
+  )
+}
+
+interface SearchProviderPropsWithoutChildren
+  extends Omit<SearchProviderProps, 'children'> {}
+export interface SearchResultsProps
+  extends SearchProviderPropsWithoutChildren,
+    SearchInputProps,
+    SearchResultsListProps {
+  showSearchInput?: boolean
+}
+
+function Search({
+  initialQuery,
+  placeholder,
+  inputProps,
+  height,
+  className,
+  renderItem,
+  itemHeight,
+}: SearchResultsProps) {
+  const _renderItem = (product: Product, index: number) => {
+    if (renderItem) {
+      return renderItem(product, index)
+    }
+
+    return (
+      <div className="p-2">
+        <ProductLink key={product.id} product={product} hideFavoriteAction />
+      </div>
+    )
+  }
+
+  return (
+    <SearchProvider initialQuery={initialQuery}>
+      <div className={cn('flex flex-col ', className)}>
+        <div className="fixed top-0 left-0 right-0 p-4 w-full z-20 bg-background">
+          <SearchInput placeholder={placeholder} inputProps={inputProps} />
+        </div>
+        <div className="h-14" />
+        <SearchResultsList
+          height={height}
+          renderItem={_renderItem}
+          itemHeight={itemHeight}
+          showScrollbar
+        />
+      </div>
+    </SearchProvider>
+  )
+}
+
+export {SearchProvider, SearchInput, SearchResultsList, Search}

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

@@ -0,0 +1,23 @@
+// 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>
+  )
+}

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

@@ -0,0 +1,56 @@
+import {useContent} from '../../hooks/content/useContent'
+import {Content} from '../../types'
+
+import {ContentMonitor} from './content-monitor'
+
+interface BaseContentWrapperProps {
+  children: ({
+    content,
+    loading,
+  }: {
+    content?: Content
+    loading: boolean
+  }) => JSX.Element | null
+}
+
+interface PublicIdContentWrapperProps extends BaseContentWrapperProps {
+  publicId: string
+  externalId?: never
+}
+
+interface ExternalIdContentWrapperProps extends BaseContentWrapperProps {
+  externalId: string
+  publicId?: never
+}
+
+type ContentWrapperProps =
+  | PublicIdContentWrapperProps
+  | ExternalIdContentWrapperProps
+
+// It's too messy in the docs to show the complete types here so we show a simplified version
+export interface ContentWrapperPropsForDocs extends BaseContentWrapperProps {
+  publicId?: string
+  externalId?: string
+}
+
+export function ContentWrapper({
+  publicId,
+  externalId,
+  children,
+}: ContentWrapperProps) {
+  const {content, loading} = useContent({
+    identifiers: [{publicId, externalId}],
+  })
+
+  const contentItem = content?.[0]
+
+  if (loading || !contentItem) {
+    return children({loading})
+  }
+
+  return (
+    <ContentMonitor publicId={contentItem.publicId}>
+      {children({content: contentItem, loading})}
+    </ContentMonitor>
+  )
+}

package/src/components/index.ts

@@ -6,6 +6,9 @@ export * from './commerce/merchant-card'
 export * from './commerce/product-card-skeleton'
 export * from './commerce/merchant-card-skeleton'
 export * from './commerce/quantity-selector'
+export * from './commerce/search'
+
+export * from './content/content-wrapper'
 
 export * from './navigation/transition-container'
 export * from './navigation/transition-link'

package/src/components/ui/input.tsx

@@ -9,7 +9,7 @@ function Input({className, type, ...props}: React.ComponentProps<'input'>) {
       data-slot="input"
       className={cn(
         'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:outline-none',
         'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
         className
       )}

package/src/hooks/content/useContent.ts

@@ -0,0 +1,50 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
+import {
+  Content,
+  ContentIdentifierInput,
+  DataHookOptionsBase,
+  DataHookReturnsBase,
+} from '../../types'
+
+export interface UseContentParams extends DataHookOptionsBase {
+  /**
+   * The identifiers of the content to fetch.
+   */
+  identifiers: ContentIdentifierInput | ContentIdentifierInput[]
+}
+
+interface UseContentReturns extends DataHookReturnsBase {
+  /**
+   * The content returned from the query.
+   */
+  content: Content[] | null
+}
+
+export const useContent = (params: UseContentParams): UseContentReturns => {
+  const {getContent} = useShopActions()
+  const {identifiers, skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsDataFetching(
+    getContent,
+    {
+      identifiers,
+      ...restParams,
+    },
+    {
+      skip,
+      hook: 'useContent',
+    }
+  )
+
+  const content = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    content,
+  }
+}

package/src/hooks/content/useCreateImageContent.ts

@@ -1,7 +1,10 @@
-import {useCallback} from 'react'
+import {useCallback, useState} from 'react'
 
-import {ContentVisibility} from '@shopify/shop-minis-platform'
-import {CreateContentResponse} from '@shopify/shop-minis-platform/actions'
+import {
+  ContentVisibility,
+  Content,
+  ContentCreateUserErrors,
+} from '@shopify/shop-minis-platform'
 
 import {useHandleAction} from '../../internal/useHandleAction'
 import {useShopActions} from '../../internal/useShopActions'
@@ -20,15 +23,22 @@ interface UseCreateImageContentReturns {
    */
   createImageContent: (
     params: CreateImageContentParams
-  ) => Promise<CreateContentResponse>
+  ) => Promise<{data: Content; userErrors?: ContentCreateUserErrors[]}>
+  /**
+   * Whether the content is being created.
+   */
+  loading: boolean
 }
 
 export const useCreateImageContent = (): UseCreateImageContentReturns => {
   const {createContent} = useShopActions()
   const {uploadImage} = useImageUpload()
+  const [loading, setLoading] = useState(false)
 
   const createImageContent = useCallback(
     async (params: CreateImageContentParams) => {
+      setLoading(true)
+
       const {image, contentTitle, visibility} = params
 
       if (!image.type) {
@@ -50,16 +60,21 @@ export const useCreateImageContent = (): UseCreateImageContentReturns => {
         throw new Error('Image upload failed')
       }
 
-      return createContent({
+      const createContentResult = await createContent({
         title: contentTitle,
         imageUrl: uploadImageUrl,
         visibility,
       })
+
+      setLoading(false)
+
+      return createContentResult
     },
     [createContent, uploadImage]
   )
 
   return {
     createImageContent: useHandleAction(createImageContent),
+    loading,
   }
 }

package/src/hooks/product/useProductSearch.ts

@@ -36,6 +36,10 @@ interface UseProductSearchReturns extends PaginatedDataHookReturnsBase {
    * The products returned from the query.
    */
   products: Product[] | null
+  /**
+   * Whether the user is typing.
+   */
+  isTyping: boolean
 }
 
 export const useProductSearch = (
@@ -85,11 +89,16 @@ export const useProductSearch = (
   )
 
   const products = useMemo(() => {
+    if (debouncedQuery.trim().length === 0) {
+      return null
+    }
+
     return data ?? null
-  }, [data])
+  }, [data, debouncedQuery])
 
   return {
     ...rest,
     products,
+    isTyping: debouncedQuery !== query,
   }
 }

package/src/mocks.ts

@@ -422,6 +422,21 @@ function makeMockActions(): ShopActions {
         products: null,
       },
     },
+    getContent: {
+      data: [
+        {
+          publicId: 'content-123',
+          image: {
+            id: 'img-123',
+            url: 'https://example.com/content-image.jpg',
+            width: 800,
+            height: 600,
+          },
+          title: 'Mock Content',
+          visibility: ['DISCOVERABLE'],
+        },
+      ],
+    },
   } as const
 
   const mock: Partial<ShopActions> = {}

package/src/stories/ProductVariantPrice.stories.tsx

@@ -0,0 +1,73 @@
+import {ProductVariantPrice} from '../components/atoms/product-variant-price'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+type ProductVariantPriceProps = React.ComponentProps<typeof ProductVariantPrice>
+
+const meta = {
+  title: 'Atoms/ProductVariantPrice',
+  component: ProductVariantPrice,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    amount: {
+      control: 'text',
+    },
+    currencyCode: {
+      control: 'select',
+      options: ['USD', 'CAD', 'EUR', 'GBP', 'JPY'],
+    },
+    compareAtPriceAmount: {
+      control: 'text',
+    },
+    compareAtPriceCurrencyCode: {
+      control: 'select',
+      options: ['USD', 'CAD', 'EUR', 'GBP', 'JPY'],
+    },
+    className: {
+      control: 'text',
+    },
+    currentPriceClassName: {
+      control: 'text',
+    },
+    originalPriceClassName: {
+      control: 'text',
+    },
+    containerClassName: {
+      control: 'text',
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<ProductVariantPriceProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    amount: '29.99',
+    currencyCode: 'USD',
+  },
+}
+
+export const WithDiscount: Story = {
+  name: 'With Discount',
+  args: {
+    amount: '24.99',
+    currencyCode: 'USD',
+    compareAtPriceAmount: '39.99',
+  },
+}
+
+export const CustomStyling: Story = {
+  name: 'Custom Styling',
+  args: {
+    amount: '89.99',
+    currencyCode: 'USD',
+    compareAtPriceAmount: '119.99',
+    currentPriceClassName: 'text-2xl font-bold text-green-600',
+    originalPriceClassName: 'text-lg text-red-500 line-through',
+    containerClassName: 'gap-3 p-4 bg-gray-50 rounded-lg',
+  },
+}

package/src/stories/Toaster.stories.tsx

@@ -26,7 +26,7 @@ type Story = StoryObj<typeof meta>
 
 export const SuccessToast: Story = {
   decorators: [
-    Story => (
+    () => (
       <Button onClick={() => toast.success('Success toast!')}>
         Show success Toast
       </Button>
@@ -37,7 +37,7 @@ export const SuccessToast: Story = {
 
 export const ErrorToast: Story = {
   decorators: [
-    Story => (
+    () => (
       <Button onClick={() => toast.error('Error toast!')}>
         Show error Toast
       </Button>