@shopify/shop-minis-react 0.0.20 → 0.0.22

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

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

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

@@ -1,32 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'useOrders',
-  category: 'hooks',
-  subCategory: 'user',
-  isVisualComponent: false,
-  related: [],
-  description:
-    'The `useOrders` hook returns a set of recent Shopify orders for the current user.',
-  type: 'hook',
-  defaultExample: {
-    codeblock: {
-      tabs: [
-        {
-          code: './useOrders.example.tsx',
-          language: 'tsx',
-        },
-      ],
-      title: 'Example code',
-    },
-  },
-  definitions: [
-    {
-      title: '',
-      type: 'UseOrdersGeneratedType',
-      description: '',
-    },
-  ],
-}
-
-export default data

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

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

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

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

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

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

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

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

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

@@ -1,30 +0,0 @@
-import {useSavedProductsActions, Button} from '@shopify/shop-minis-react'
-
-export default function MyComponent() {
-  const {saveProduct, unsaveProduct} = useSavedProductsActions()
-
-  return (
-    <>
-      <Button
-        onPress={() =>
-          saveProduct({
-            productId: 'gid://shopify/Product/123',
-            productVariantId: 'gid://shopify/ProductVariant/456',
-            shopId: 'gid://shopify/Shop/42',
-          })
-        }
-        text="Save product"
-      />
-      <Button
-        onPress={() =>
-          unsaveProduct({
-            productId: 'gid://shopify/Product/123',
-            productVariantId: 'gid://shopify/ProductVariant/456',
-            shopId: 'gid://shopify/Shop/42',
-          })
-        }
-        text="Unsave product"
-      />
-    </>
-  )
-}

package/src/hooks/util/useErrorScreen.doc.ts

@@ -1,32 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'useErrorScreen',
-  category: 'hooks',
-  subCategory: 'util',
-  isVisualComponent: false,
-  related: [],
-  description:
-    'The `useErrorScreen` hook provides functionality for showing error screens. It returns a function that can be used to display an error screen with a given error message.',
-  type: 'hook',
-  defaultExample: {
-    codeblock: {
-      tabs: [
-        {
-          code: './useErrorScreen.example.tsx',
-          language: 'tsx',
-        },
-      ],
-      title: 'Example code',
-    },
-  },
-  definitions: [
-    {
-      title: '',
-      type: 'UseErrorScreenGeneratedType',
-      description: 'A hook that returns a function to show an error screen.',
-    },
-  ],
-}
-
-export default data

package/src/hooks/util/useErrorScreen.example.tsx

@@ -1,16 +0,0 @@
-import {useCallback} from 'react'
-
-import {useErrorScreen, Button} from '@shopify/shop-minis-react'
-
-export default function MyComponent() {
-  const {showErrorScreen} = useErrorScreen()
-
-  const handleError = useCallback(() => {
-    showErrorScreen({
-      message: 'Something went wrong',
-      title: 'Error',
-    })
-  }, [showErrorScreen])
-
-  return <Button onPress={handleError} text="Show error screen" />
-}

package/src/hooks/util/useErrorToast.doc.ts

@@ -1,32 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'useErrorToast',
-  category: 'hooks',
-  subCategory: 'util',
-  isVisualComponent: false,
-  related: [],
-  description:
-    'The `useErrorToast` hook provides functionality for showing error toasts. It returns a function that can be used to display an error toast with a given error message.',
-  type: 'hook',
-  defaultExample: {
-    codeblock: {
-      tabs: [
-        {
-          code: './useErrorToast.example.tsx',
-          language: 'tsx',
-        },
-      ],
-      title: 'Example code',
-    },
-  },
-  definitions: [
-    {
-      title: '',
-      type: 'UseErrorToastGeneratedType',
-      description: 'A hook that returns a function to show an error toast.',
-    },
-  ],
-}
-
-export default data

package/src/hooks/util/useErrorToast.example.tsx

@@ -1,15 +0,0 @@
-import {useCallback} from 'react'
-
-import {useErrorToast, Button} from '@shopify/shop-minis-react'
-
-export default function MyComponent() {
-  const {showErrorToast} = useErrorToast()
-
-  const handleError = useCallback(() => {
-    showErrorToast({
-      message: 'Something went wrong',
-    })
-  }, [showErrorToast])
-
-  return <Button onPress={handleError} text="Show error toast" />
-}

package/src/hooks/util/useImagePicker.example.tsx

@@ -1,85 +0,0 @@
-import React, {useState} from 'react'
-
-import {Camera, Image} from 'lucide-react'
-
-import {Alert, AlertDescription, AlertTitle} from '../../components/ui/alert'
-import {Button} from '../../components/ui/button'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '../../components/ui/card'
-
-import {useImagePicker} from './useImagePicker'
-
-export const UseImagePickerExample = () => {
-  const [selectedImage, setSelectedImage] = useState<string | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const {openCamera, openGallery, ImagePickerInputs} = useImagePicker({
-    cameraFacing: 'user',
-  })
-
-  const handleCameraCapture = async () => {
-    try {
-      setError(null)
-      const file = await openCamera()
-      const url = URL.createObjectURL(file)
-      setSelectedImage(url)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to capture image')
-    }
-  }
-
-  const handleGallerySelect = async () => {
-    try {
-      setError(null)
-      const file = await openGallery()
-      const url = URL.createObjectURL(file)
-      setSelectedImage(url)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to select image')
-    }
-  }
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Image Picker Example</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <ImagePickerInputs />
-
-        <div className="flex gap-2">
-          <Button onClick={handleCameraCapture} variant="primary">
-            <Camera className="mr-2 h-4 w-4" />
-            Open Camera
-          </Button>
-
-          <Button onClick={handleGallerySelect} variant="secondary">
-            <Image className="mr-2 h-4 w-4" />
-            Open Gallery
-          </Button>
-        </div>
-
-        {error && (
-          <Alert variant="destructive">
-            <AlertTitle>Error</AlertTitle>
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        )}
-
-        {selectedImage && (
-          <div className="space-y-2">
-            <h3 className="text-sm font-medium">Selected Image:</h3>
-            <img
-              src={selectedImage}
-              alt="Selected"
-              className="w-full rounded-md border"
-            />
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  )
-}