@shopify/shop-minis-react 0.0.11 → 0.0.12

package/src/hooks/product/useProducts.ts

@@ -0,0 +1,38 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
+import {DataHookOptionsBase, DataHookReturnsBase, Product} from '../../types'
+
+export interface UseProductsParams extends DataHookOptionsBase {
+  /**
+   * The product IDs to fetch.
+   */
+  ids: string[]
+}
+
+interface UseProductsReturns extends DataHookReturnsBase {
+  /**
+   * The products returned from the query.
+   */
+  products: Product[] | null
+}
+
+export const useProducts = (params: UseProductsParams): UseProductsReturns => {
+  const {getProducts} = useShopActions()
+  const {skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsDataFetching(getProducts, restParams, {
+    skip,
+    hook: 'useProducts',
+  })
+
+  const products = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    products,
+  }
+}

package/src/hooks/shop/useShop.doc.ts

@@ -0,0 +1,31 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useShop',
+  category: 'hooks',
+  subCategory: 'shop',
+  isVisualComponent: false,
+  related: [],
+  description: 'The `useShop` hook enables fetching a shop by its ID.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useShop.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseShopGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/shop/useShop.example.tsx

@@ -0,0 +1,7 @@
+import {useShop} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {shop, loading, error} = useShop({id: 'gid://shopify/Shop/1234567890'})
+
+  console.log({shop, loading, error})
+}

package/src/hooks/shop/useShop.ts

@@ -0,0 +1,38 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
+import {DataHookOptionsBase, DataHookReturnsBase, Shop} from '../../types'
+
+export interface UseShopParams extends DataHookOptionsBase {
+  /**
+   * The shop ID to fetch.
+   */
+  id: string
+}
+
+interface UseShopReturns extends DataHookReturnsBase {
+  /**
+   * The shop returned from the query.
+   */
+  shop: Shop | null
+}
+
+export const useShop = (params: UseShopParams): UseShopReturns => {
+  const {getShop} = useShopActions()
+  const {skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsDataFetching(getShop, restParams, {
+    skip,
+    hook: 'useShop',
+  })
+
+  const shop = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    shop,
+  }
+}

package/src/hooks/user/useFollowedShops.ts

@@ -0,0 +1,43 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  Shop,
+} from '../../types'
+
+export interface UseFollowedShopsParams extends PaginatedDataHookOptionsBase {}
+
+interface UseFollowedShopsReturns extends PaginatedDataHookReturnsBase {
+  /**
+   * The followed shops returned from the query.
+   */
+  shops: Shop[] | null
+}
+
+export const useFollowedShops = (
+  params?: UseFollowedShopsParams
+): UseFollowedShopsReturns => {
+  const {getFollowedShops} = useShopActions()
+  const {skip = false, ...restParams} = params ?? {}
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getFollowedShops,
+    restParams,
+    {
+      skip,
+      hook: 'useFollowedShops',
+    }
+  )
+
+  const shops = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    shops,
+  }
+}

package/src/hooks/user/useRecentProducts.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useRecentProducts',
+  category: 'hooks',
+  subCategory: 'user',
+  isVisualComponent: false,
+  related: [],
+  description:
+    "The `useRecentProducts` hook fetches the current user's recently viewed products.",
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useRecentProducts.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseRecentProductsGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/user/useRecentProducts.example.tsx

@@ -0,0 +1,13 @@
+import {useEffect} from 'react'
+
+import {useRecentProducts, Button} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {products, fetchMore} = useRecentProducts({first: 10})
+
+  useEffect(() => {
+    console.log(products)
+  }, [products])
+
+  return <Button onClick={fetchMore}>Fetch more</Button>
+}

package/src/hooks/user/useRecentProducts.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 UseRecentProductsParams extends PaginatedDataHookOptionsBase {
+  includeSensitive?: boolean
+}
+
+export interface UseRecentProductsReturns extends PaginatedDataHookReturnsBase {
+  products: Product[] | null
+}
+
+/**
+ * Hook to fetch recently viewed products.
+ * @param params - Options for the hook.
+ */
+export const useRecentProducts = (
+  params?: UseRecentProductsParams
+): UseRecentProductsReturns => {
+  const {getRecentProducts} = useShopActions()
+  const {skip, ...shopActionParams} = params ?? {}
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getRecentProducts,
+    shopActionParams,
+    {
+      skip,
+      hook: 'useRecentProducts',
+    }
+  )
+
+  const products = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    products,
+  }
+}

package/src/hooks/user/useRecentShops.ts

@@ -0,0 +1,43 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  Shop,
+} from '../../types'
+
+export interface UseRecentShopsParams extends PaginatedDataHookOptionsBase {}
+
+interface UseRecentShopsReturns extends PaginatedDataHookReturnsBase {
+  /**
+   * The recent shops returned from the query.
+   */
+  shops: Shop[] | null
+}
+
+export const useRecentShops = (
+  params?: UseRecentShopsParams
+): UseRecentShopsReturns => {
+  const {getRecentShops} = useShopActions()
+  const {skip = false, ...restParams} = params ?? {}
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getRecentShops,
+    restParams,
+    {
+      skip,
+      hook: 'useRecentShops',
+    }
+  )
+
+  const shops = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    shops,
+  }
+}

package/src/hooks/user/useSavedProducts.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useSavedProducts',
+  category: 'hooks',
+  subCategory: 'user',
+  isVisualComponent: false,
+  related: [],
+  description:
+    "The `useSavedProducts` hook fetches the current user's saved products.",
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useSavedProducts.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseSavedProductsGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/user/useSavedProducts.example.tsx

@@ -0,0 +1,13 @@
+import {useEffect} from 'react'
+
+import {useSavedProducts, Button} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {products, fetchMore} = useSavedProducts({first: 10})
+
+  useEffect(() => {
+    console.log(products)
+  }, [products])
+
+  return <Button onClick={fetchMore}>Fetch more</Button>
+}

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)
       }