@shopify/shop-minis-react 0.0.1 → 0.0.3

package/src/internal/useShopActionsPaginatedDataFetching.ts

@@ -0,0 +1,193 @@
+import {useCallback, useEffect, useMemo, useState} from 'react'
+
+import {
+  DataHookFetchPolicy,
+  PaginatedDataHookReturnsBase,
+  PaginationInfo,
+  ShopActionResult,
+} from '../types'
+import {formatError, MiniError} from '../utils/errors'
+
+export interface ShopActionsDataFetchingResult<S>
+  extends PaginatedDataHookReturnsBase {
+  data: S | null
+}
+
+export const useShopActionsPaginatedDataFetching = <
+  S = unknown,
+  P extends {after?: string; fetchPolicy?: DataHookFetchPolicy} = {
+    after?: undefined
+    fetchPolicy?: DataHookFetchPolicy
+  },
+>(
+  action: (
+    params: P
+  ) => Promise<ShopActionResult<{data: S; pageInfo: PaginationInfo}>>,
+  params: P,
+  options: {
+    skip?: boolean
+    hook?: string
+    validator?: (data: S) => void
+  }
+): ShopActionsDataFetchingResult<S> => {
+  const [state, setState] = useState<{
+    data: S | null
+    pageInfo: PaginationInfo
+    loading: boolean
+    error: Error | null
+  }>({
+    data: null,
+    pageInfo: {hasNextPage: false, endCursor: null},
+    loading: false,
+    error: null,
+  })
+
+  const skip = options?.skip === true
+  const {validator, hook} = options
+  const runValidator = useCallback(
+    (dataToValidate: S) => {
+      try {
+        validator?.(dataToValidate)
+        return null
+      } catch (err) {
+        return (
+          err ??
+          new MiniError({
+            hook,
+            message: 'Validation failed',
+          })
+        )
+      }
+    },
+    [validator, hook]
+  )
+
+  // Params object is recreated on every render, so we need to memoize it.
+  // We don't know what's inside the params object, but we can stringify it.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stableParams = useMemo(() => params, [JSON.stringify(params)])
+
+  // There's a lot of complexity here because each type of fetch has different side effects if we are trying to
+  // stay close to how Apollo client works. eg:
+  // - Initial fetch: set loading, set error, set data, reset on error (don't throw)
+  // - change params fetch: set loading, set error, set data, reset on error (don't throw)
+  // - refetch fetch: don't set loading, set error, update data, leave data as is was on error (also throw)
+  // - fetchMore fetch: don't set loading, don't set error, update data, leave data as is was on error (also throw)
+  const fetch = useCallback(
+    async (
+      extraParams?: Partial<P>,
+      {
+        setLoading = true,
+        setError = true,
+        resetOnError = true,
+        throwOnError = true,
+        appendData = false,
+      }: {
+        setLoading?: boolean
+        setError?: boolean
+        resetOnError?: boolean
+        throwOnError?: boolean
+        appendData?: boolean
+      } = {}
+    ) => {
+      let queryError: Error | null = null
+      let validationError: Error | null = null
+
+      setState(curState => ({
+        ...curState,
+        loading: setLoading ? true : curState.loading,
+      }))
+
+      try {
+        const result = await action({...stableParams, ...extraParams})
+
+        if (result.ok) {
+          validationError = runValidator(result.data.data)
+
+          setState(curState => {
+            let newData = result.data.data
+
+            if (
+              appendData &&
+              curState.data &&
+              Array.isArray(curState.data) &&
+              Array.isArray(result.data.data)
+            ) {
+              newData = [...curState.data, ...result.data.data] as S
+            }
+
+            return {
+              ...curState,
+              data: newData,
+              pageInfo: result.data.pageInfo,
+              loading: false,
+              error: validationError ?? null,
+            }
+          })
+        } else {
+          throw result.error
+        }
+      } catch (err) {
+        queryError = formatError({hook}, err)
+      }
+
+      const error = validationError || queryError
+
+      if (error && (setError || resetOnError)) {
+        setState(curState => ({
+          data: resetOnError ? null : curState.data,
+          pageInfo: resetOnError
+            ? {hasNextPage: false, endCursor: null}
+            : curState.pageInfo,
+          loading: false,
+          error,
+        }))
+      }
+
+      if (error && throwOnError) {
+        throw error
+      }
+    },
+    [action, stableParams, hook, runValidator]
+  )
+
+  const refetch = useCallback(async () => {
+    await fetch({fetchPolicy: 'network-only'} as Partial<P>, {
+      setLoading: false,
+      resetOnError: false,
+      throwOnError: true,
+    })
+  }, [fetch])
+
+  const fetchMore = useCallback(async () => {
+    if (!state.pageInfo.hasNextPage || !state.pageInfo.endCursor) return
+
+    await fetch({after: state.pageInfo.endCursor} as Partial<P>, {
+      setLoading: false,
+      setError: false,
+      resetOnError: false,
+      throwOnError: true,
+      appendData: true,
+    })
+  }, [state.pageInfo.hasNextPage, state.pageInfo.endCursor, fetch])
+
+  useEffect(() => {
+    if (skip) return
+
+    fetch(
+      {},
+      {
+        throwOnError: false,
+      }
+    )
+  }, [fetch, skip])
+
+  return {
+    data: state.data,
+    loading: state.loading,
+    error: state.error,
+    hasNextPage: state.pageInfo.hasNextPage,
+    refetch,
+    fetchMore,
+  }
+}

package/src/lib/utils.ts

@@ -0,0 +1,9 @@
+import {type ClassValue, clsx} from 'clsx'
+import {twMerge} from 'tailwind-merge'
+
+/**
+ * Utility function to merge Tailwind CSS classes with proper conflict resolution
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/mockActions.ts

@@ -0,0 +1,236 @@
+import {CurrencyCode, Gender} from './types/minisSDK.generated.d'
+
+const logAction =
+  (action: string, data?: any) =>
+  (...args: any[]) => {
+    console.log(`[Mock Action] ${action}`, ...args)
+    return Promise.resolve({ok: true, data})
+  }
+
+// Helper functions for common data structures
+const createProduct = (
+  id: string,
+  title: string,
+  price = '99.99',
+  compareAtPrice?: string
+) => ({
+  id,
+  title,
+  price: {amount: price, currencyCode: CurrencyCode.USD},
+  ...(compareAtPrice && {
+    compareAtPrice: {amount: compareAtPrice, currencyCode: CurrencyCode.USD},
+  }),
+  reviewAnalytics: {averageRating: 4.5, reviewCount: 10},
+  shop: {id: 'shop1', name: 'Mock Shop'},
+  defaultVariantId: `variant-${id}`,
+  isFavorited: false,
+  featuredImage: {url: `https://example.com/${id}.jpg`, altText: title},
+})
+
+const createShop = (id: string, name: string) => ({
+  id,
+  name,
+  isFollowing: false,
+  primaryDomain: {
+    url: `https://${name.toLowerCase().replace(/\s+/g, '-')}.com`,
+  },
+  reviewAnalytics: {averageRating: 4.3, reviewCount: 50},
+})
+
+const createPagination = (hasNext = false) => ({
+  hasNextPage: hasNext,
+  endCursor: hasNext ? 'cursor123' : null,
+})
+
+const createProductList = (id: string, name: string, products: any[] = []) => ({
+  id,
+  publicId: `public-${id}`,
+  name,
+  products,
+})
+
+window.minisSDK = window.minisSDK || {
+  // App & User
+  getShopAppInformation: logAction('getShopAppInformation', {
+    appVersion: '1.0.0',
+    buildNumber: '12345',
+    buildId: 'dev-build-123',
+  }),
+  getAccountInformation: logAction('getAccountInformation', {
+    status: 'available',
+    value: 'user@example.com',
+  }),
+  getCurrentUser: logAction('getCurrentUser', {
+    data: {
+      displayName: 'John Doe',
+      avatarImage: {url: 'https://example.com/avatar.jpg'},
+    },
+  }),
+
+  // Navigation
+  navigateToDeeplink: logAction('navigateToDeeplink'),
+  navigateToShop: logAction('navigateToShop'),
+  navigateToProduct: logAction('navigateToProduct'),
+  navigateToOrder: logAction('navigateToOrder'),
+  navigateToCheckout: logAction('navigateToCheckout'),
+  getDeeplinkPaths: logAction('getDeeplinkPaths', {
+    matchers: ['/products', '/collections', '/cart'],
+  }),
+
+  // Product Actions
+  addToCart: logAction('addToCart'),
+  buyProduct: logAction('buyProduct'),
+  buyProducts: logAction('buyProducts'),
+  favorite: logAction('favorite'),
+  unfavorite: logAction('unfavorite'),
+  createOrderAttribution: logAction('createOrderAttribution'),
+
+  // Tracking
+  productRecommendationImpression: logAction('productRecommendationImpression'),
+  productRecommendationClick: logAction('productRecommendationClick'),
+  reportInteraction: logAction('reportInteraction'),
+  reportImpression: logAction('reportImpression'),
+  reportContentImpression: logAction('reportContentImpression'),
+
+  // App Control
+  hideEntryPoint: logAction('hideEntryPoint'),
+  closeMini: logAction('closeMini'),
+  showErrorScreen: logAction('showErrorScreen'),
+  showErrorToast: logAction('showErrorToast'),
+  showFeedbackSheet: logAction('showFeedbackSheet'),
+
+  // Social
+  followShop: logAction('followShop', true),
+  unfollowShop: logAction('unfollowShop', false),
+
+  // Storage
+  getPersistedItem: logAction('getPersistedItem', 'stored-value'),
+  setPersistedItem: logAction('setPersistedItem'),
+  removePersistedItem: logAction('removePersistedItem'),
+  getAllPersistedKeys: logAction('getAllPersistedKeys', [
+    'key1',
+    'key2',
+    'key3',
+  ]),
+  clearPersistedItems: logAction('clearPersistedItems'),
+  getInternalPersistedItem: logAction(
+    'getInternalPersistedItem',
+    'internal-value'
+  ),
+  setInternalPersistedItem: logAction('setInternalPersistedItem'),
+  removeInternalPersistedItem: logAction('removeInternalPersistedItem'),
+  getAllInternalPersistedKeys: logAction('getAllInternalPersistedKeys', [
+    'internal-key1',
+    'internal-key2',
+  ]),
+  clearInternalPersistedItems: logAction('clearInternalPersistedItems'),
+  getSecret: logAction('getSecret', 'secret-value'),
+  setSecret: logAction('setSecret'),
+  removeSecret: logAction('removeSecret'),
+
+  // File Upload
+  createImageUploadLink: logAction('createImageUploadLink', {
+    targets: [
+      {
+        url: 'https://example.com/upload',
+        resourceUrl: 'https://example.com/resource',
+        parameters: [{name: 'key', value: 'upload-123'}],
+      },
+    ],
+  }),
+  completeImageUpload: logAction('completeImageUpload', {
+    files: [
+      {
+        id: 'file-123',
+        fileStatus: 'READY',
+        image: {url: 'https://example.com/image.jpg'},
+      },
+    ],
+  }),
+
+  // Product Lists
+  getProductLists: logAction('getProductLists', {
+    data: [
+      createProductList('list-1', 'Wishlist'),
+      createProductList('list-2', 'Favorites'),
+    ],
+    pageInfo: createPagination(),
+  }),
+  getProductList: logAction('getProductList', {
+    data: createProductList('list-1', 'Wishlist', [
+      createProduct('prod-1', 'Sample Product'),
+    ]),
+    pageInfo: createPagination(),
+  }),
+  addProductList: logAction(
+    'addProductList',
+    createProductList('list-3', 'New List')
+  ),
+  removeProductList: logAction('removeProductList'),
+  renameProductList: logAction(
+    'renameProductList',
+    createProductList('list-1', 'Updated Wishlist')
+  ),
+  addProductListItem: logAction('addProductListItem'),
+  removeProductListItem: logAction('removeProductListItem'),
+
+  // Recommendations & Search
+  getRecommendedProducts: logAction('getRecommendedProducts', {
+    data: [
+      createProduct('rec-1', 'Recommended Product 1', '79.99'),
+      createProduct('rec-2', 'Recommended Product 2', '129.99'),
+    ],
+    pageInfo: createPagination(),
+  }),
+  getRecommendedShops: logAction('getRecommendedShops', {
+    data: [
+      createShop('shop-1', 'Amazing Store'),
+      createShop('shop-2', 'Best Deals Shop'),
+    ],
+    pageInfo: createPagination(),
+  }),
+  searchProductsByShop: logAction('searchProductsByShop', {
+    data: [
+      createProduct('search-1', 'Search Result 1', '59.99'),
+      createProduct('search-2', 'Search Result 2', '89.99'),
+    ],
+    pageInfo: createPagination(),
+  }),
+  getPopularProducts: logAction('getPopularProducts', {
+    data: [
+      createProduct('pop-1', 'The Hero Snowboard', '702.95'),
+      createProduct('pop-2', 'Snow Jacket', '605.95', '702.00'),
+      createProduct('pop-3', 'Winter Gloves', '89.95'),
+    ],
+    pageInfo: createPagination(),
+  }),
+
+  // Orders & User Data
+  getOrders: logAction('getOrders', {
+    data: [
+      {
+        id: 'order-1',
+        name: '#1001',
+        lineItems: [
+          {
+            productTitle: 'Sample Product',
+            variantTitle: 'Medium',
+            quantity: 2,
+            product: null,
+          },
+        ],
+        shop: createShop('shop-1', 'Sample Shop'),
+      },
+    ],
+    pageInfo: createPagination(),
+  }),
+  getBuyerAttributes: logAction('getBuyerAttributes', {
+    data: {
+      genderAffinity: Gender.Neutral,
+      categoryAffinities: [
+        {id: 'cat1', name: 'Electronics'},
+        {id: 'cat2', name: 'Clothing'},
+      ],
+    },
+  }),
+}

package/src/types/index.ts

@@ -1,4 +1,6 @@
 // Common types for the component library
+export * from './minisSDK.generated.d'
+
 export interface BaseComponentProps {
   className?: string
   children?: React.ReactNode

package/src/types/minisSDK.generated.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @shopify/typescript/prefer-pascal-case-enums */
 // Auto-generated type definitions for MinisSDK
-// Generated on: 2025-06-05T16:20:27.728Z
+// Generated on: 2025-06-06T15:17:55.440Z
 // Do not edit this file manually - run the generation script instead
 // Source: useShopActionsImplementationV3.ts + shopActionsV3Definitions.ts + shopActionsV3Types.ts
 // Generated using TypeScript compiler API for reliable AST parsing
@@ -1114,81 +1114,9 @@ export interface PaginatedDataHookPageInfo {
   endCursor: string | null
 }
 
-// ============================================================================
-// MinisSDK Interface
-// ============================================================================
-
-interface MinisSDK {
-  getRecommendedProducts(): Promise<
-    ShopActionResult<GetRecommendedProductsResponse>
-  >
-  getRecommendedShops(): Promise<ShopActionResult<GetRecommendedShopsResponse>>
-  searchProductsByShop(): Promise<
-    ShopActionResult<SearchProductsByShopResponse>
-  >
-  getShopAppInformation(): Promise<ShopActionResult<void>>
-  getOrders(): Promise<ShopActionResult<GetOrdersResponse>>
-  getBuyerAttributes(): Promise<ShopActionResult<GetBuyerAttributesResponse>>
-  getCurrentUser(): Promise<ShopActionResult<GetCurrentUserResponse>>
-  getProductLists(): Promise<ShopActionResult<GetProductListsResponse>>
-  getDeeplinkPaths(): Promise<ShopActionResult<GetDeeplinkPathsResponse>>
-  getAllPersistedKeys(): Promise<ShopActionResult<string[]>>
-  getSecret(): Promise<ShopActionResult<string | null>>
-  closeMini(): Promise<ShopActionResult<void>>
-  getAllInternalPersistedKeys(): Promise<ShopActionResult<string[]>>
-  clearInternalPersistedItems(): Promise<ShopActionResult<void>>
-  getPopularProducts(): Promise<ShopActionResult<GetPopularProductsResponse>>
-  getProductList(params: any): Promise<ShopActionResult<GetProductListResponse>>
-  getPersistedItem(params: any): Promise<ShopActionResult<string | null>>
-  getAccountInformation(
-    params: any
-  ): Promise<ShopActionResult<GetAccountInformationResponse>>
-  navigateToProduct(params: any): Promise<ShopActionResult<void>>
-  navigateToCheckout(params: any): Promise<ShopActionResult<void>>
-  createOrderAttribution(params: any): Promise<ShopActionResult<void>>
-  addToCart(params: any): Promise<ShopActionResult<void>>
-  buyProduct(params: any): Promise<ShopActionResult<void>>
-  buyProducts(params: any): Promise<ShopActionResult<void>>
-  navigateToShop(params: any): Promise<ShopActionResult<void>>
-  showErrorScreen(params: any): Promise<ShopActionResult<void>>
-  showErrorToast(params: any): Promise<ShopActionResult<void>>
-  productRecommendationImpression(params: any): Promise<ShopActionResult<void>>
-  productRecommendationClick(params: any): Promise<ShopActionResult<void>>
-  followShop(params: any): Promise<ShopActionResult<boolean>>
-  unfollowShop(params: any): Promise<ShopActionResult<boolean>>
-  hideEntryPoint(params: any): Promise<ShopActionResult<void>>
-  navigateToOrder(params: any): Promise<ShopActionResult<void>>
-  navigateToDeeplink(params: any): Promise<ShopActionResult<void>>
-  createImageUploadLink(
-    params: any
-  ): Promise<ShopActionResult<CreateImageUploadLinkResponse>>
-  completeImageUpload(
-    params: any
-  ): Promise<ShopActionResult<CompleteImageUploadResponse>>
-  setPersistedItem(params: any): Promise<ShopActionResult<void>>
-  removePersistedItem(params: any): Promise<ShopActionResult<void>>
-  clearPersistedItems(params: any): Promise<ShopActionResult<void>>
-  setSecret(params: any): Promise<ShopActionResult<void>>
-  removeSecret(params: any): Promise<ShopActionResult<void>>
-  reportInteraction(params: any): Promise<ShopActionResult<void>>
-  reportImpression(params: any): Promise<ShopActionResult<void>>
-  reportContentImpression(params: any): Promise<ShopActionResult<void>>
-  addProductList(params: any): Promise<ShopActionResult<ProductList>>
-  removeProductList(params: any): Promise<ShopActionResult<void>>
-  renameProductList(params: any): Promise<ShopActionResult<ProductList>>
-  addProductListItem(params: any): Promise<ShopActionResult<void>>
-  removeProductListItem(params: any): Promise<ShopActionResult<void>>
-  showFeedbackSheet(params: any): Promise<ShopActionResult<void>>
-  getInternalPersistedItem(
-    params: any
-  ): Promise<ShopActionResult<string | null>>
-  setInternalPersistedItem(params: any): Promise<ShopActionResult<void>>
-  removeInternalPersistedItem(params: any): Promise<ShopActionResult<void>>
-}
-
 declare global {
   interface Window {
-    minisSDK: MinisSDK
+    minisSDK: ShopActions
   }
 }
 

package/src/utils/errors.ts

@@ -0,0 +1,86 @@
+interface MiniErrorSource {
+  component?: string
+  hook?: string
+  func?: string
+  callback?: string
+}
+
+interface MiniErrorParams extends MiniErrorSource {
+  message: string
+}
+
+// Base class for all Mini errors
+// We can give richer error messages by using this throughout the SDK
+// In future we could add instrumentation to track these errors too
+export class MiniError extends Error {
+  constructor({
+    component,
+    hook,
+    func,
+    callback,
+    message = 'Unknown Error',
+  }: MiniErrorParams) {
+    let formattedMessage = message
+
+    if (component || hook || func) {
+      if (component) {
+        formattedMessage = `<${component} />`
+      } else if (hook) {
+        formattedMessage = hook
+      } else if (func) {
+        formattedMessage = `${func}()`
+      }
+
+      if (callback) {
+        formattedMessage = `${formattedMessage} ${callback}()`
+      }
+
+      formattedMessage = `${formattedMessage}: ${message}`
+    }
+
+    super(formattedMessage)
+    this.name = 'MiniError'
+  }
+}
+
+export class MiniNetworkError extends MiniError {
+  constructor(params: Partial<MiniErrorParams>) {
+    super({message: 'Network Error', ...params})
+    this.name = 'MiniNetworkError'
+  }
+}
+
+export class MiniEntityNotFoundError extends MiniError {
+  constructor(params: Partial<MiniErrorParams>) {
+    super({message: 'Entity Not Found', ...params})
+    this.name = 'MiniEntityNotFoundError'
+  }
+}
+
+export const formatError = (
+  source: MiniErrorSource,
+  error: any
+): MiniError | MiniNetworkError | null => {
+  if (!error) {
+    return null
+  }
+
+  if (error.networkError) {
+    return new MiniNetworkError({
+      ...source,
+      message: error.networkError?.message,
+    })
+  }
+
+  if (error.code) {
+    return new MiniError({
+      ...source,
+      message: `${error.code}${error.message ? `: ${error.message}` : ''}`,
+    })
+  }
+
+  return new MiniError({
+    ...source,
+    message: error?.message,
+  })
+}

package/src/utils/index.ts

@@ -1,11 +1,2 @@
-import {type ClassValue, clsx} from 'clsx'
-import {twMerge} from 'tailwind-merge'
-
-/**
- * Utility function to merge Tailwind CSS classes with proper conflict resolution
- */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-// Export other utility functions here as needed
+export * from './errors'
+export * from './parseUrl'

package/src/utils/parseUrl.ts

@@ -0,0 +1,5 @@
+import urlParse from 'url-parse'
+
+export function parseUrl(url: string) {
+  return urlParse(url, true)
+}

package/tailwind.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+}

package/src/components/HelloWorld/HelloWorld.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-
-import {cn} from '../../utils'
-
-import type {BaseComponentProps} from '../../types'
-
-export interface HelloWorldProps extends BaseComponentProps {
-  /**
-   * The name to greet
-   */
-  name?: string
-  /**
-   * The size variant of the component
-   */
-  size?: 'sm' | 'md' | 'lg'
-}
-
-export const HelloWorld: React.FC<HelloWorldProps> = ({
-  name = 'World',
-  size = 'md',
-  className,
-  children,
-  ...props
-}) => {
-  const sizeClasses = {
-    sm: 'text-sm px-2 py-1',
-    md: 'text-base px-4 py-2',
-    lg: 'text-lg px-6 py-3',
-  }
-
-  return (
-    <div
-      className={cn(
-        'inline-flex items-center justify-center rounded-lg bg-primary-500 text-white font-medium shadow-sm hover:bg-primary-600 transition-colors',
-        sizeClasses[size],
-        className
-      )}
-      {...props}
-    >
-      {children || `Hello, ${name}!`}
-    </div>
-  )
-}

package/src/components/HelloWorld/index.ts

@@ -1,2 +0,0 @@
-export {HelloWorld} from './HelloWorld'
-export type {HelloWorldProps} from './HelloWorld'