@shopify/shop-minis-react 0.0.10 → 0.0.12

package/src/hooks/user/useSavedProducts.ts

@@ -0,0 +1,46 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  Product,
+} from '../../types'
+
+export interface UseSavedProductsParams extends PaginatedDataHookOptionsBase {
+  includeSensitive?: boolean
+}
+
+export interface UseSavedProductsReturns extends PaginatedDataHookReturnsBase {
+  products: Product[] | null
+}
+
+/**
+ * Hook to fetch saved (favorited) products.
+ * @param params - Options for the hook.
+ */
+export const useSavedProducts = (
+  params?: UseSavedProductsParams
+): UseSavedProductsReturns => {
+  const {getSavedProducts} = useShopActions()
+  const {skip, ...shopActionParams} = params ?? {}
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getSavedProducts,
+    shopActionParams,
+    {
+      skip,
+      hook: 'useSavedProducts',
+    }
+  )
+
+  const products = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    products,
+  }
+}

package/src/index.css

@@ -1,222 +1,2 @@
-@import 'tailwindcss';
-@import 'tw-animate-css';
+@import './base.css';
 @source '../node_modules/@shopify/shop-minis-react/src/**/*.{js,ts,jsx,tsx}';
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Grayscale palette colors for Tailwind */
-  --color-grayscale-d100: var(--grayscale-d100);
-  --color-grayscale-d93: var(--grayscale-d93);
-  --color-grayscale-d90: var(--grayscale-d90);
-  --color-grayscale-d80: var(--grayscale-d80);
-  --color-grayscale-d70: var(--grayscale-d70);
-  --color-grayscale-d60: var(--grayscale-d60);
-  --color-grayscale-d50: var(--grayscale-d50);
-  --color-grayscale-l40: var(--grayscale-l40);
-  --color-grayscale-l20: var(--grayscale-l20);
-  --color-grayscale-l10: var(--grayscale-l10);
-  --color-grayscale-l6: var(--grayscale-l6);
-  --color-grayscale-l5: var(--grayscale-l5);
-  --color-grayscale-l0: var(--grayscale-l0);
-}
-
-:root {
-  --radius: 0.65rem;
-
-  /* Palette Colors - Purple */
-  --purple-d80: #1b163b;
-  --purple-d60: #322c7d;
-  --purple-d50: #4524db;
-  --purple-p40: #5433eb;
-  --purple-l30: #6445ed;
-  --purple-l20: #9c83f8;
-  --purple-l10: #dbd1ff;
-  --purple-l5: #eeeaff;
-  --purple-l2: #f7f5ff;
-
-  /* Palette Colors - Grayscale */
-  --grayscale-d100: #000000;
-  --grayscale-d93: #121212;
-  --grayscale-d90: #1a1a1a;
-  --grayscale-d80: #2a2a2a;
-  --grayscale-d70: #404040;
-  --grayscale-d60: #656667;
-  --grayscale-d50: #6f7071;
-  --grayscale-l40: #a6a8a9;
-  --grayscale-l20: #c9cbcc;
-  --grayscale-l10: #e1e4e5;
-  --grayscale-l6: #eef0f1;
-  --grayscale-l5: #f2f4f5;
-  --grayscale-l0: #ffffff;
-
-  /* Palette Colors - Green */
-  --green-d90: #002e24;
-  --green-d80: #004839;
-  --green-d70: #008552;
-  --green-l30: #92d08d;
-  --green-l20: #baebcb;
-  --green-l10: #d2f2de;
-  --green-l5: #e4f6eb;
-
-  /* Palette Colors - Poppy */
-  --poppy-d80: #481609;
-  --poppy-d70: #832711;
-  --poppy-d50: #d92a0f;
-  --poppy-l40: #f05d38;
-  --poppy-l20: #ff967d;
-  --poppy-l10: #ffd2c2;
-  --poppy-l4: #ffece9;
-
-  /* Palette Colors - Ochre */
-  --ochre-d90: #443600;
-  --ochre-d70: #8c6e01;
-  --ochre-d60: #c29d05;
-  --ochre-l50: #e3be2b;
-  --ochre-l30: #f8db67;
-  --ochre-l20: #ffec9f;
-  --ochre-l10: #fff4cb;
-  --ochre-l6: #fff9e2;
-
-  /* Palette Colors - Brand */
-  --brand-aqua: #8dc0c6;
-  --brand-violet: #a327c2;
-  --brand-magenta: #d354ff;
-  --brand-olive: #8b8f01;
-  --brand-lime: #c7de00;
-  --brand-sage: #d8e59d;
-  --brand-sand: #f4f4ed;
-
-  /* Semantic Colors */
-  --background: var(--grayscale-l0);
-  --foreground: var(--grayscale-d100);
-  --card: var(--grayscale-l0);
-  --card-foreground: var(--grayscale-d100);
-  --popover: var(--grayscale-l0);
-  --popover-foreground: var(--grayscale-d100);
-  --primary: var(--purple-p40);
-  --primary-foreground: var(--grayscale-l0);
-  --secondary: var(--grayscale-l5);
-  --secondary-foreground: var(--grayscale-d70);
-  --muted: var(--grayscale-l5);
-  --muted-foreground: var(--grayscale-d70);
-  --accent: var(--grayscale-l5);
-  --accent-foreground: var(--grayscale-d70);
-  --destructive: var(--poppy-d50);
-  --border: rgba(0, 0, 0, 0.1);
-  --input: var(--grayscale-l20);
-  --ring: var(--purple-p40);
-  --chart-1: var(--ochre-d90);
-  --chart-2: var(--green-d70);
-  --chart-3: var(--green-l30);
-  --chart-4: var(--grayscale-d50);
-  --chart-5: var(--green-l20);
-  --sidebar: var(--grayscale-l5);
-  --sidebar-foreground: var(--grayscale-d100);
-  --sidebar-primary: var(--purple-p40);
-  --sidebar-primary-foreground: var(--purple-l20);
-  --sidebar-accent: var(--grayscale-l5);
-  --sidebar-accent-foreground: var(--grayscale-d70);
-  --sidebar-border: rgba(0, 0, 0, 0.1);
-  --sidebar-ring: var(--purple-p40);
-}
-
-.dark {
-  /* Dark mode semantic colors */
-  --background: var(--grayscale-d93);
-  --foreground: var(--grayscale-l0);
-  --card: var(--grayscale-d93);
-  --card-foreground: var(--grayscale-l0);
-  --popover: var(--grayscale-d93);
-  --popover-foreground: var(--grayscale-l0);
-  --primary: var(--purple-l20);
-  --primary-foreground: var(--grayscale-d100);
-  --secondary: var(--grayscale-d80);
-  --secondary-foreground: var(--grayscale-l0);
-  --muted: var(--grayscale-d80);
-  --muted-foreground: var(--grayscale-l20);
-  --accent: var(--grayscale-d80);
-  --accent-foreground: var(--grayscale-l0);
-  --destructive: var(--poppy-l40);
-  --border: rgba(255, 255, 255, 0.2);
-  --input: var(--grayscale-l40);
-  --ring: var(--purple-l20);
-  --chart-1: var(--green-l30);
-  --chart-2: var(--grayscale-d60);
-  --chart-3: var(--green-l20);
-  --chart-4: var(--grayscale-d60);
-  --chart-5: var(--ochre-l30);
-  --sidebar: var(--grayscale-d80);
-  --sidebar-foreground: var(--grayscale-l0);
-  --sidebar-primary: var(--purple-l20);
-  --sidebar-primary-foreground: var(--purple-l10);
-  --sidebar-accent: var(--grayscale-d80);
-  --sidebar-accent-foreground: var(--grayscale-l0);
-  --sidebar-border: rgba(255, 255, 255, 0.2);
-  --sidebar-ring: var(--purple-l20);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-html,
-body {
-  touch-action: manipulation;
-}
-
-/* Disable text selection */
-body {
-  -webkit-user-select: none;
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-/* Disable image drag */
-img,
-.no-drag {
-  -webkit-user-drag: none;
-  user-drag: none;
-}

package/src/internal/useShopActionsPaginatedDataFetching.ts

@@ -45,18 +45,17 @@ export const useShopActionsPaginatedDataFetching = <
   const skip = options?.skip === true
   const {validator, hook} = options
   const runValidator = useCallback(
-    (dataToValidate: S) => {
+    (dataToValidate: S): Error | null => {
       try {
         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]
@@ -128,6 +127,7 @@ export const useShopActionsPaginatedDataFetching = <
           throw result.error
         }
       } catch (err) {
+        console.log('caught 1', err)
         queryError = formatError({hook}, err)
       }
 

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-18T10:56:57.588Z
+// Generated on: 2025-06-18T21:41:30.210Z
 // 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
@@ -173,6 +173,48 @@ export interface ShopActions {
   ): Promise<ShopActionResult<GetPopularProductsResponse>>
 
   share(params: ShareParams): Promise<ShopActionResult>
+
+  getCuratedProducts(
+    params: GetCuratedProductsParams
+  ): Promise<ShopActionResult<GetCuratedProductsResponse>>
+
+  getSavedProducts(
+    params?: GetSavedProductsParams
+  ): Promise<ShopActionResult<GetSavedProductsResponse>>
+
+  getRecentProducts(
+    params?: GetRecentProductsParams
+  ): Promise<ShopActionResult<GetRecentProductsResponse>>
+
+  getProductSearch(
+    params: GetProductSearchParams
+  ): Promise<ShopActionResult<GetProductSearchResponse>>
+
+  getProducts(
+    params: GetProductsParams
+  ): Promise<ShopActionResult<GetProductsResponse>>
+
+  getProduct(
+    params: GetProductParams
+  ): Promise<ShopActionResult<GetProductResponse>>
+
+  getProductVariants(
+    params: GetProductVariantsParams
+  ): Promise<ShopActionResult<GetProductVariantsResponse>>
+
+  getProductMedia(
+    params: GetProductMediaParams
+  ): Promise<ShopActionResult<GetProductMediaResponse>>
+
+  getShop(params: GetShopParams): Promise<ShopActionResult<GetShopResponse>>
+
+  getRecentShops(
+    params?: GetRecentShopsParams
+  ): Promise<ShopActionResult<GetRecentShopsResponse>>
+
+  getFollowedShops(
+    params?: GetFollowedShopsParams
+  ): Promise<ShopActionResult<GetFollowedShopsResponse>>
 }
 
 export interface AuthShopActions {
@@ -677,8 +719,8 @@ export interface PreviewProductInARParams {
 
 export interface GetCuratedProductsParams {
   handle: string
-  requiredTags: string[]
-  anyOfTags: string[]
+  requiredTags?: string[]
+  anyOfTags?: string[]
   first?: number
   after?: string
   fetchPolicy?: DataHookFetchPolicy
@@ -701,8 +743,39 @@ export interface GetProductMediaResponse {
   pageInfo: PaginationInfo
 }
 
+export interface GetShopParams {
+  id: string
+  fetchPolicy?: DataHookFetchPolicy
+}
+
+export interface GetShopResponse {
+  data: Shop
+}
+
+export interface GetRecentShopsParams {
+  first?: number
+  after?: string
+  fetchPolicy?: DataHookFetchPolicy
+}
+
+export interface GetRecentShopsResponse {
+  data: Shop[]
+  pageInfo: PaginationInfo
+}
+
+export interface GetFollowedShopsParams {
+  first?: number
+  after?: string
+  fetchPolicy?: DataHookFetchPolicy
+}
+
+export interface GetFollowedShopsResponse {
+  data: Shop[]
+  pageInfo: PaginationInfo
+}
+
 export interface GetProductsParams {
-  productIds: string[]
+  ids: string[]
   fetchPolicy?: DataHookFetchPolicy
 }
 
@@ -728,6 +801,57 @@ export interface ShareParams {
   failOnCancel?: boolean
 }
 
+export interface GetSavedProductsParams {
+  includeSensitive?: boolean
+  first?: number
+  after?: string
+  fetchPolicy?: DataHookFetchPolicy
+}
+
+export interface GetSavedProductsResponse {
+  data: Product[]
+  pageInfo: PaginationInfo
+}
+
+export interface GetRecentProductsParams {
+  includeSensitive?: boolean
+  first?: number
+  after?: string
+  fetchPolicy?: DataHookFetchPolicy
+}
+
+export interface GetRecentProductsResponse {
+  data: Product[]
+  pageInfo: PaginationInfo
+}
+
+export interface GetProductSearchParams {
+  query: string
+  filters?: ProductFilters
+  sortBy?: ProductSearchSortBy
+  includeSensitive?: boolean
+  first?: number
+  after?: string
+  fetchPolicy?: DataHookFetchPolicy
+}
+
+export interface GetProductSearchResponse {
+  data: Product[]
+  pageInfo: PaginationInfo
+}
+
+export interface GetProductVariantsParams {
+  id: string
+  first?: number
+  after?: string
+  fetchPolicy?: DataHookFetchPolicy
+}
+
+export interface GetProductVariantsResponse {
+  data: ProductVariant[]
+  pageInfo: PaginationInfo
+}
+
 export interface MinisParams {
   /** The handle/identifier of the Mini application */
   handle: string
@@ -1204,6 +1328,117 @@ export interface PaginatedDataHookPageInfo {
   endCursor: string | null
 }
 
+export type ProductColorFilter =
+  | 'BEIGE'
+  | 'BLACK'
+  | 'BLUE'
+  | 'BROWN'
+  | 'GOLD'
+  | 'GREEN'
+  | 'GREY'
+  | 'NAVY'
+  | 'ORANGE'
+  | 'PINK'
+  | 'PURPLE'
+  | 'RED'
+  | 'SILVER'
+  | 'WHITE'
+  | 'YELLOW'
+
+export type ProductApparelSizeFilter =
+  | 'SIZE_3XL'
+  | 'SIZE_4XL'
+  | 'SIZE_5XL'
+  | 'SIZE_L'
+  | 'SIZE_M'
+  | 'SIZE_S'
+  | 'SIZE_XL'
+  | 'SIZE_XS'
+  | 'SIZE_XXL'
+  | 'SIZE_XXS'
+
+export interface ProductFilters {
+  /**
+   * The apparel sizes to filter by.
+   */
+  apparelSize?: ProductApparelSizeFilter[]
+  /**
+   * Whether the product is in stock or not.
+   */
+  available?: boolean
+  /**
+   * The category IDs to filter by.
+   */
+  category?: string[]
+  /**
+   * The colors to filter by.
+   */
+  color?: ProductColorFilter[]
+  /**
+   * The gender to filter by.
+   */
+  gender?: 'MALE' | 'FEMALE' | 'NEUTRAL'
+  /**
+   * The shop IDs to include in the search.
+   */
+  includeShopIds?: string[]
+  /**
+   * The minimum rating to filter by.
+   */
+  minimumRating?: number
+  /**
+   * The price range to filter by.
+   */
+  price?: {
+    min?: number
+    max?: number
+  }
+  /**
+   * The shoe sizes to filter by.
+   */
+  shoeSize?: ProductShoeSizeFilter[]
+}
+
+export type ProductShoeSizeFilter =
+  | 'SIZE_4'
+  | 'SIZE_4_5'
+  | 'SIZE_5'
+  | 'SIZE_5_5'
+  | 'SIZE_6'
+  | 'SIZE_6_5'
+  | 'SIZE_7'
+  | 'SIZE_7_5'
+  | 'SIZE_8'
+  | 'SIZE_8_5'
+  | 'SIZE_9'
+  | 'SIZE_9_5'
+  | 'SIZE_10'
+  | 'SIZE_10_5'
+  | 'SIZE_11'
+  | 'SIZE_11_5'
+  | 'SIZE_12'
+  | 'SIZE_12_5'
+  | 'SIZE_13'
+  | 'SIZE_13_5'
+  | 'SIZE_14'
+  | 'SIZE_14_5'
+  | 'SIZE_15'
+
+export type ProductSizeFilter =
+  | 'SIZE_XS'
+  | 'SIZE_S'
+  | 'SIZE_M'
+  | 'SIZE_L'
+  | 'SIZE_XL'
+  | 'SIZE_XXL'
+  | 'SIZE_XXS'
+
+export type ProductSearchSortBy =
+  | 'MOST_RECENT'
+  | 'PRICE_HIGH_TO_LOW'
+  | 'PRICE_LOW_TO_HIGH'
+  | 'RELEVANCE'
+
 declare global {
   interface Window {
     minisSDK: ShopActions