@shopify/shop-minis-react 0.0.21 → 0.0.22

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

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

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

@@ -1,32 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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/useProductSearch.doc.ts

@@ -1,32 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'useProductSearch',
-  category: 'hooks',
-  subCategory: 'product',
-  isVisualComponent: false,
-  related: [],
-  description:
-    'The `useProductSearch` hook fetches products based on a search query.',
-  type: 'hook',
-  defaultExample: {
-    codeblock: {
-      tabs: [
-        {
-          code: './useProductSearch.example.tsx',
-          language: 'tsx',
-        },
-      ],
-      title: 'Example code',
-    },
-  },
-  definitions: [
-    {
-      title: '',
-      type: 'UseProductSearchGeneratedType',
-      description: '',
-    },
-  ],
-}
-
-export default data

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

@@ -1,13 +0,0 @@
-import {useProductSearch} from '@shopify/shop-minis-react'
-
-export default function MyComponent() {
-  const {products, loading} = useProductSearch({
-    query: 'shirt',
-    first: 10,
-    filters: {
-      color: ['RED'],
-    },
-  })
-
-  console.log({products, loading})
-}

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

@@ -1,32 +0,0 @@
-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

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

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

@@ -1,32 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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/useShop.doc.ts

@@ -1,31 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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/useShopCartActions.doc.ts

@@ -1,32 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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 onClick={handleAddToCart}>Add to cart</Button>
-      <Button onClick={handleBuyNow}>Buy now</Button>
-    </>
-  )
-}

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

@@ -1,32 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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/useImageUpload.doc.ts

@@ -1,32 +0,0 @@
-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

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

@@ -1,20 +0,0 @@
-import {useCallback} from 'react'
-
-import {useImageUpload, Button} from '@shopify/shop-minis-react'
-
-export default function MyComponent() {
-  const {uploadImage} = useImageUpload()
-
-  const handleUpload = useCallback(async () => {
-    const result = await uploadImage([
-      {
-        mimeType: 'image/jpeg',
-        fileSize: 1024 * 1024, // 1MB
-        uri: 'file://path/to/image.jpg',
-      },
-    ])
-    console.log('Uploaded image:', result[0])
-  }, [uploadImage])
-
-  return <Button onClick={handleUpload}>Upload image</Button>
-}

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

@@ -1,32 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'useSecureStorage',
-  category: 'hooks',
-  subCategory: 'storage',
-  isVisualComponent: false,
-  related: [],
-  description:
-    'The `useSecureStorage` hook provides functions to interact with secure storage. It allows you to store, retrieve, and manage sensitive data that requires encryption and secure handling. You can currently only set one secret per Mini.',
-  type: 'hook',
-  defaultExample: {
-    codeblock: {
-      tabs: [
-        {
-          code: './useSecureStorage.example.tsx',
-          language: 'tsx',
-        },
-      ],
-      title: 'Example code',
-    },
-  },
-  definitions: [
-    {
-      title: '',
-      type: 'UseSecureStorageGeneratedType',
-      description: '',
-    },
-  ],
-}
-
-export default data

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

@@ -1,23 +0,0 @@
-import {useEffect} from 'react'
-
-import {useSecureStorage} from '@shopify/shop-minis-react'
-
-export default function MyComponent() {
-  const {getSecret, setSecret, removeSecret} = useSecureStorage()
-
-  useEffect(() => {
-    async function handleSecureStorageOperations() {
-      // Get a secret from secure storage
-      const secret = await getSecret()
-      console.log({secret})
-
-      // Set a secret in secure storage
-      await setSecret({value: 'Sensitive Data'})
-
-      // Remove a secret from secure storage
-      await removeSecret()
-    }
-
-    handleSecureStorageOperations()
-  }, [getSecret, setSecret, removeSecret])
-}

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

@@ -1,32 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'useBuyerAttributes',
-  category: 'hooks',
-  subCategory: 'user',
-  isVisualComponent: false,
-  related: [],
-  description:
-    'The `useBuyerAttributes` hook fetches the current buyer attributes, such as gender affinity and category affinities.',
-  type: 'hook',
-  defaultExample: {
-    codeblock: {
-      tabs: [
-        {
-          code: './useBuyerAttributes.example.tsx',
-          language: 'tsx',
-        },
-      ],
-      title: 'Example code',
-    },
-  },
-  definitions: [
-    {
-      title: 'Props',
-      type: 'UseBuyerAttributesGeneratedType',
-      description: '',
-    },
-  ],
-}
-
-export default data

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

@@ -1,14 +0,0 @@
-import {useEffect} from 'react'
-
-import {useBuyerAttributes} from '@shopify/shop-minis-react'
-
-export default function MyComponent() {
-  const {buyerAttributes} = useBuyerAttributes()
-
-  useEffect(() => {
-    if (buyerAttributes) {
-      const {genderAffinity, categoryAffinities} = buyerAttributes
-      console.log({genderAffinity, categoryAffinities})
-    }
-  }, [buyerAttributes])
-}

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

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

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

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

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

@@ -1,32 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'useFollowedShopsActions',
-  category: 'hooks',
-  subCategory: 'user',
-  isVisualComponent: false,
-  related: [],
-  description:
-    'The `useFollowedShopsActions` hook allows following and unfollowing shops for the current user.',
-  type: 'hook',
-  defaultExample: {
-    codeblock: {
-      tabs: [
-        {
-          code: './useFollowedShopsActions.example.tsx',
-          language: 'tsx',
-        },
-      ],
-      title: 'Example code',
-    },
-  },
-  definitions: [
-    {
-      title: '',
-      type: 'UseUpdateFollowedShopsGeneratedType',
-      description: '',
-    },
-  ],
-}
-
-export default data

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

@@ -1,16 +0,0 @@
-import {useFollowedShopsActions, Button} from '@shopify/shop-minis-react'
-
-export default function MyComponent() {
-  const {followShop, unfollowShop} = useFollowedShopsActions()
-
-  return (
-    <>
-      <Button onClick={() => followShop({shopId: 'gid://shopify/Shop/123'})}>
-        Follow shop
-      </Button>
-      <Button onClick={() => unfollowShop({shopId: 'gid://shopify/Shop/123'})}>
-        Unfollow shop
-      </Button>
-    </>
-  )
-}