@shopify/shop-minis-react 0.0.1 → 0.0.2

package/src/hooks/product/useProductList.ts

@@ -0,0 +1,56 @@
+import {useCallback} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  ProductList,
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+} from '../../types'
+import {MiniEntityNotFoundError} from '../../utils/errors'
+
+interface UseProductListParams extends PaginatedDataHookOptionsBase {
+  /**
+   * The GID of the product list. E.g. `gid://shopapp/ProductList/123`.
+   */
+  id?: string
+  /**
+   * The public ID of the product list.
+   */
+  publicId?: string
+}
+
+interface UseProductListResult extends PaginatedDataHookReturnsBase {
+  productList: ProductList | null
+}
+
+export const useProductList = (
+  params?: UseProductListParams
+): UseProductListResult => {
+  const {getProductList} = useShopActions()
+  const {skip, ...shopActionParams} = params ?? {}
+
+  const validator = useCallback((data: ProductList | null) => {
+    if (data === null) {
+      throw new MiniEntityNotFoundError({
+        hook: 'useProductList',
+        message: 'Product list not found',
+      })
+    }
+  }, [])
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getProductList,
+    shopActionParams,
+    {
+      skip,
+      hook: 'useProductList',
+      validator,
+    }
+  )
+
+  return {
+    ...rest,
+    productList: data,
+  }
+}

package/src/hooks/product/useProductListActions.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useProductListActions',
+  category: 'hooks',
+  subCategory: 'product',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useProductListActions` returns a set of actions for managing product lists.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useProductListActions.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseProductListActionsGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/product/useProductListActions.example.tsx

@@ -0,0 +1,57 @@
+import {useProductListActions, Button} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {
+    addProductList,
+    removeProductList,
+    renameProductList,
+    addProductListItem,
+    removeProductListItem,
+  } = useProductListActions()
+
+  return (
+    <>
+      <Button
+        onPress={() => addProductList({name: 'My product list'})}
+        text="Add product list"
+      />
+      <Button
+        onPress={() => removeProductList({id: 'gid://shopapp/ProductList/123'})}
+        text="Remove product list"
+      />
+      <Button
+        onPress={() =>
+          renameProductList({
+            id: 'gid://shopapp/ProductList/123',
+            name: 'My renamed product list',
+          })
+        }
+        text="Rename product list"
+      />
+      <Button
+        onPress={() =>
+          addProductListItem({
+            shopId: 'gid://shopify/Shop/42',
+            productId: 'gid://shopify/Product/123',
+            productVariantId: 'gid://shopify/ProductVariant/101',
+            listId: 'gid://shopapp/ProductList/99',
+            publicListId: 'abc123',
+          })
+        }
+        text="Add product to list"
+      />
+      <Button
+        onPress={() =>
+          removeProductListItem({
+            shopId: 'gid://shopify/Shop/42',
+            productId: 'gid://shopify/Product/123',
+            productVariantId: 'gid://shopify/ProductVariant/101',
+            listId: 'gid://shopapp/ProductList/99',
+            publicListId: 'abc123',
+          })
+        }
+        text="Remove product from list"
+      />
+    </>
+  )
+}

package/src/hooks/product/useProductListActions.ts

@@ -0,0 +1,51 @@
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+import {
+  AddProductListParams,
+  RemoveProductListParams,
+  RenameProductListParams,
+  AddProductListItemParams,
+  RemoveProductListItemParams,
+  ProductList,
+} from '../../types'
+
+interface UseProductListActionsReturns {
+  /**
+   * Add a product list
+   */
+  addProductList: (params: AddProductListParams) => Promise<ProductList>
+  /**
+   * Remove a product list
+   */
+  removeProductList: (params: RemoveProductListParams) => Promise<void>
+  /**
+   * Rename a product list
+   */
+  renameProductList: (params: RenameProductListParams) => Promise<ProductList>
+  /**
+   * Add a product to a product list
+   */
+  addProductListItem: (params: AddProductListItemParams) => Promise<void>
+  /**
+   * Remove a product from a product list
+   */
+  removeProductListItem: (params: RemoveProductListItemParams) => Promise<void>
+}
+
+export const useProductListActions = (): UseProductListActionsReturns => {
+  const {
+    addProductList,
+    removeProductList,
+    renameProductList,
+    addProductListItem,
+    removeProductListItem,
+  } = useShopActions()
+
+  return {
+    addProductList: useHandleAction(addProductList),
+    removeProductList: useHandleAction(removeProductList),
+    renameProductList: useHandleAction(renameProductList),
+    addProductListItem: useHandleAction(addProductListItem),
+    removeProductListItem: useHandleAction(removeProductListItem),
+  }
+}

package/src/hooks/product/useProductLists.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useProductLists',
+  category: 'hooks',
+  subCategory: 'product',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useProductLists` hook fetches all the users product lists.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useProductLists.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseProductListsGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/product/useProductLists.example.tsx

@@ -0,0 +1,9 @@
+import {useProductLists} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {productLists, loading, error} = useProductLists({
+    first: 10,
+  })
+
+  console.log({productLists, loading, error})
+}

package/src/hooks/product/useProductLists.ts

@@ -0,0 +1,39 @@
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  ProductList,
+} from '../../types'
+
+interface UseProductListsParams extends PaginatedDataHookOptionsBase {
+  /**
+   * The number of products to fetch per product list.
+   */
+  itemsFirst?: number
+}
+
+interface UseProductListsResult extends PaginatedDataHookReturnsBase {
+  productLists: ProductList[] | null
+}
+
+export const useProductLists = (
+  params?: UseProductListsParams
+): UseProductListsResult => {
+  const {getProductLists} = useShopActions()
+  const {skip, ...shopActionParams} = params ?? {}
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getProductLists,
+    shopActionParams,
+    {
+      skip,
+      hook: 'useProductLists',
+    }
+  )
+
+  return {
+    ...rest,
+    productLists: data,
+  }
+}

package/src/hooks/product/useRecommendedProducts.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useRecommendedProducts',
+  category: 'hooks',
+  subCategory: 'product',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useRecommendedProducts` hook enables fetching a list of recommended products for the user. The list may be empty if the user has no recommended products.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useRecommendedProducts.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseRecommendedProductsGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/product/useRecommendedProducts.example.tsx

@@ -0,0 +1,7 @@
+import {useRecommendedProducts} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {products, loading, error} = useRecommendedProducts()
+
+  console.log({products, loading, error})
+}

package/src/hooks/product/useRecommendedProducts.ts

@@ -0,0 +1,37 @@
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  Product,
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+} from '../../types'
+
+interface UseRecommendedProductsParams extends PaginatedDataHookOptionsBase {}
+
+interface UseRecommendedProductsReturns extends PaginatedDataHookReturnsBase {
+  products: Product[] | null
+}
+
+/**
+ * @param options - The options for the query
+ */
+export const useRecommendedProducts = (
+  params?: UseRecommendedProductsParams
+): UseRecommendedProductsReturns => {
+  const {getRecommendedProducts} = useShopActions()
+  const {skip, ...shopActionParams} = params ?? {}
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getRecommendedProducts,
+    shopActionParams,
+    {
+      skip,
+      hook: 'useRecommendedProducts',
+    }
+  )
+
+  return {
+    ...rest,
+    products: data,
+  }
+}

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

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useRecommendedShops',
+  category: 'hooks',
+  subCategory: 'shop',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useRecommendedShops` hook enables fetching a list of recommended shops for the user. The list may be empty if the user has no recommended shops.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useRecommendedShops.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseRecommendedShopsGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

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

@@ -0,0 +1,7 @@
+import {useRecommendedShops} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {shops, loading, error} = useRecommendedShops()
+
+  console.log({shops, loading, error})
+}

package/src/hooks/shop/useRecommendedShops.ts

@@ -0,0 +1,43 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  Shop,
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+} from '../../types'
+
+interface UseRecommendedShopsParams extends PaginatedDataHookOptionsBase {}
+
+interface UseRecommendedShopsReturns extends PaginatedDataHookReturnsBase {
+  shops: Shop[] | null
+}
+
+export const useRecommendedShops = (
+  params?: UseRecommendedShopsParams
+): UseRecommendedShopsReturns => {
+  const {getRecommendedShops} = useShopActions()
+
+  const {skip, ...shopActionParamsToPass} = params || {}
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getRecommendedShops,
+    shopActionParamsToPass,
+    {
+      skip,
+      hook: 'useRecommendedShops',
+    }
+  )
+
+  const shops = useMemo(() => {
+    if (!data) return null
+
+    return Array.from(new Map(data.map(shop => [shop.id, shop])).values())
+  }, [data])
+
+  return {
+    ...rest,
+    shops,
+  }
+}

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

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useShopCartActions',
+  category: 'hooks',
+  subCategory: 'shop',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useShopCartActions` hook provides functions for managing the shopping cart. It includes operations for adding products to the cart and buying products directly.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useShopCartActions.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseShopCartActionsGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

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

@@ -0,0 +1,28 @@
+import {Button, useShopCartActions} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {addToCart, buyProduct} = useShopCartActions()
+
+  const handleAddToCart = async () => {
+    await addToCart({
+      productId: 'gid://shopify/Product/123',
+      productVariantId: 'gid://shopify/ProductVariant/456',
+      quantity: 1,
+    })
+  }
+
+  const handleBuyNow = async () => {
+    await buyProduct({
+      productId: 'gid://shopify/Product/123',
+      productVariantId: 'gid://shopify/ProductVariant/456',
+      quantity: 1,
+    })
+  }
+
+  return (
+    <>
+      <Button text="Add to cart" onPress={handleAddToCart} />
+      <Button text="Buy now" onPress={handleBuyNow} />
+    </>
+  )
+}

package/src/hooks/shop/useShopCartActions.ts

@@ -0,0 +1,23 @@
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+import {AddToCartParams, BuyProductParams} from '../../types'
+
+interface UseShopCartActionsReturns {
+  /**
+   * Add a product to the cart
+   */
+  addToCart: (params: AddToCartParams) => Promise<void>
+  /**
+   * Buy a product directly
+   */
+  buyProduct: (params: BuyProductParams) => Promise<void>
+}
+
+export const useShopCartActions = (): UseShopCartActionsReturns => {
+  const {addToCart, buyProduct} = useShopActions()
+
+  return {
+    addToCart: useHandleAction(addToCart),
+    buyProduct: useHandleAction(buyProduct),
+  }
+}

package/src/hooks/storage/useAsyncStorage.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useAsyncStorage',
+  category: 'hooks',
+  subCategory: 'storage',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useAsyncStorage` hook provides functions to interact with persistent storage. It allows you to store, retrieve, and manage data that persists between app sessions.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useAsyncStorage.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseAsyncStorageGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/storage/useAsyncStorage.example.tsx

@@ -0,0 +1,30 @@
+import {useEffect} from 'react'
+
+import {useAsyncStorage} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {getItem, setItem, removeItem, getAllKeys, clear} = useAsyncStorage()
+
+  useEffect(() => {
+    async function handleStorageOperations() {
+      // Get an item from storage
+      const value = await getItem({key: 'myKey'})
+      console.log({value})
+
+      // Set an item in storage
+      await setItem({key: 'myKey', value: 'Hello, World!'})
+
+      // Remove an item from storage
+      await removeItem({key: 'myKey'})
+
+      // Get all keys in storage
+      const keys = await getAllKeys()
+      console.log({keys})
+
+      // Clear all items from storage
+      await clear()
+    }
+
+    handleStorageOperations()
+  }, [getItem, removeItem, setItem, getAllKeys, clear])
+}

package/src/hooks/storage/useAsyncStorage.ts

@@ -0,0 +1,48 @@
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+import {
+  GetAsyncStorageItemParams,
+  SetAsyncStorageItemParams,
+  RemoveAsyncStorageItemParams,
+} from '../../types'
+
+interface UseAsyncStorageReturns {
+  /**
+   * Get an item from the async storage.
+   */
+  getItem: (params: GetAsyncStorageItemParams) => Promise<string | null>
+  /**
+   * Set an item in the async storage.
+   */
+  setItem: (params: SetAsyncStorageItemParams) => Promise<void>
+  /**
+   * Remove an item from the async storage.
+   */
+  removeItem: (params: RemoveAsyncStorageItemParams) => Promise<void>
+  /**
+   * Get all keys in the async storage.
+   */
+  getAllKeys: () => Promise<string[]>
+  /**
+   * Clear all items from the async storage.
+   */
+  clear: () => Promise<void>
+}
+
+export function useAsyncStorage(): UseAsyncStorageReturns {
+  const {
+    getPersistedItem,
+    setPersistedItem,
+    removePersistedItem,
+    getAllPersistedKeys,
+    clearPersistedItems,
+  } = useShopActions()
+
+  return {
+    getItem: useHandleAction(getPersistedItem),
+    setItem: useHandleAction(setPersistedItem),
+    removeItem: useHandleAction(removePersistedItem),
+    getAllKeys: useHandleAction(getAllPersistedKeys),
+    clear: useHandleAction(clearPersistedItems),
+  }
+}

package/src/hooks/storage/useImageUpload.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useImageUpload',
+  category: 'hooks',
+  subCategory: 'storage',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useImageUpload` hook provides functionality for uploading images attached to the current user. It handles the upload process, including getting upload links, uploading to storage, and polling for completion.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useImageUpload.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseImageUploadGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data