@shopify/shop-minis-react 0.0.1 → 0.0.2

package/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+
+import {Slot} from '@radix-ui/react-slot'
+import {cva, type VariantProps} from 'class-variance-authority'
+
+import {cn} from '../../lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({variant, size, className}))}
+      {...props}
+    />
+  )
+}
+
+export {Button, buttonVariants}

package/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import {cn} from '../../lib/utils'
+
+function Card({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import {useTheme} from 'next-themes'
+import {Toaster as Sonner, ToasterProps} from 'sonner'
+
+const Toaster = ({...props}: ToasterProps) => {
+  const {theme = 'system'} = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export {Toaster}

package/src/dev.tsx

@@ -1,57 +1,135 @@
-import React from 'react'
+import React, {useState} from 'react'
 
 import ReactDOM from 'react-dom/client'
+import {toast} from 'sonner'
 
-import {HelloWorld} from './components'
 import './index.css'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './components/ui/alert-dialog'
+import {Button} from './components/ui/button'
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardAction,
+  CardFooter,
+} from './components/ui/card'
+import {Toaster} from './components/ui/sonner'
 
 function App() {
+  const [alertOpen, setAlertOpen] = useState(false)
+
   return (
     <div className="min-h-screen bg-gray-50 flex items-center justify-center p-8">
-      <div className="space-y-8">
+      <div className="space-y-8 w-full max-w-4xl">
         <div className="text-center">
           <h1 className="text-3xl font-bold text-gray-900 mb-8">
             Shop Minis React Components
           </h1>
         </div>
 
-        <div className="space-y-4">
-          <h2 className="text-xl font-semibold text-gray-800">
-            HelloWorld Component
-          </h2>
-
-          <div className="space-y-4">
-            <>
-              <p className="text-sm text-gray-600 mb-2">Default:</p>
-              <HelloWorld />
-            </>
-
-            <>
-              <p className="text-sm text-gray-600 mb-2">With custom name:</p>
-              <HelloWorld name="Shop Minis" />
-            </>
-
-            <>
-              <p className="text-sm text-gray-600 mb-2">Different sizes:</p>
-              <div className="space-x-4">
-                <HelloWorld name="Small" size="sm" />
-                <HelloWorld name="Medium" size="md" />
-                <HelloWorld name="Large" size="lg" />
-              </div>
-            </>
-
-            <>
-              <p className="text-sm text-gray-600 mb-2">With custom content:</p>
-              <HelloWorld>
-                <span role="img" aria-label="Party Popper">
-                  🎉
-                </span>{' '}
-                Custom Content!
-              </HelloWorld>
-            </>
+        {/* Button Examples */}
+        <section className="space-y-4">
+          <h2 className="text-2xl font-semibold">Button</h2>
+          <div className="flex flex-wrap gap-4">
+            <Button>Default Button</Button>
+            <Button variant="destructive">Destructive</Button>
+            <Button variant="outline">Outline</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="link">Link</Button>
+            <Button size="sm">Small</Button>
+            <Button size="lg">Large</Button>
           </div>
-        </div>
+        </section>
+
+        {/* Card Example */}
+        <section className="space-y-4">
+          <h2 className="text-2xl font-semibold">Card</h2>
+          <Card className="w-full max-w-md">
+            <CardHeader>
+              <CardTitle>Card Title</CardTitle>
+              <CardDescription>
+                This is a card description that explains what the card contains.
+              </CardDescription>
+              <CardAction>
+                <Button size="sm" variant="outline">
+                  Action
+                </Button>
+              </CardAction>
+            </CardHeader>
+            <CardContent>
+              <p>
+                This is the main content of the card. You can put any content
+                here.
+              </p>
+            </CardContent>
+            <CardFooter>
+              <Button className="w-full">Footer Button</Button>
+            </CardFooter>
+          </Card>
+        </section>
+
+        {/* AlertDialog Example */}
+        <section className="space-y-4">
+          <h2 className="text-2xl font-semibold">Alert Dialog</h2>
+          <AlertDialog open={alertOpen} onOpenChange={setAlertOpen}>
+            <AlertDialogTrigger asChild>
+              <Button variant="outline">Show Alert Dialog</Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This action cannot be undone. This will permanently delete
+                  your account and remove your data from our servers.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={() => toast.success('Action confirmed!')}
+                >
+                  Continue
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </section>
+
+        {/* Toaster Example */}
+        <section className="space-y-4">
+          <h2 className="text-2xl font-semibold">Toaster (Sonner)</h2>
+          <div className="flex gap-4">
+            <Button onClick={() => toast.success('Success toast!')}>
+              Success Toast
+            </Button>
+            <Button onClick={() => toast.error('Error toast!')}>
+              Error Toast
+            </Button>
+            <Button onClick={() => toast('Default toast!')}>
+              Default Toast
+            </Button>
+            <Button onClick={() => toast.info('Info toast!')}>
+              Info Toast
+            </Button>
+          </div>
+        </section>
       </div>
+
+      {/* Toaster component for displaying notifications */}
+      <Toaster />
     </div>
   )
 }

package/src/hooks/index.ts

@@ -1,6 +1,32 @@
-// Export all hooks here
-// Example: export { useShopMini } from './useShopMini';
-// Example: export { useTheme } from './useTheme';
+// - User Hooks
+export * from './user/useSavedProductsActions'
+export * from './user/useFollowedShopsActions'
+export * from './user/useCurrentUser'
+export * from './user/useOrders'
+export * from './user/useBuyerAttributes'
 
-// This file will be populated as hooks are added
-export {}
+// - Product Hooks
+export * from './product/useProductListActions'
+export * from './product/useProductLists'
+export * from './product/useProductList'
+export * from './product/useRecommendedProducts'
+export * from './product/usePopularProducts'
+
+// - Storage Hooks
+export * from './storage/useAsyncStorage'
+export * from './storage/useSecureStorage'
+export * from './storage/useImageUpload'
+
+// - Navigation Hooks
+export * from './navigation/useShopNavigation'
+export * from './navigation/useCloseMini'
+
+// - Shop Hooks
+export * from './shop/useShopCartActions'
+export * from './shop/useRecommendedShops'
+
+// - Content Hooks
+
+// - Utility Hooks
+export * from './util/useErrorToast'
+export * from './util/useErrorScreen'

package/src/hooks/navigation/useCloseMini.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useCloseMini',
+  category: 'hooks',
+  subCategory: 'navigation',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useCloseMini` hook returns a function to close the Mini viewer.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useCloseMini.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseCloseMiniGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/navigation/useCloseMini.example.tsx

@@ -0,0 +1,7 @@
+import {useCloseMini, Button} from '@shopify/shop-minis-react'
+
+export function Example() {
+  const {closeMini} = useCloseMini()
+
+  return <Button onPress={closeMini} text="Close Mini" />
+}

package/src/hooks/navigation/useCloseMini.ts

@@ -0,0 +1,17 @@
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+
+interface UseCloseMiniReturns {
+  /**
+   * Closes the Mini viewer.
+   */
+  closeMini: () => void
+}
+
+export const useCloseMini = (): UseCloseMiniReturns => {
+  const {closeMini} = useShopActions()
+
+  return {
+    closeMini: useHandleAction(closeMini),
+  }
+}

package/src/hooks/navigation/useShopNavigation.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useShopNavigation',
+  category: 'hooks',
+  subCategory: 'navigation',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useShopNavigation` hook provides functions to navigate to different parts of the Shop app.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useShopNavigation.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseShopNavigationGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/navigation/useShopNavigation.example.tsx

@@ -0,0 +1,29 @@
+import {useShopNavigation, Button} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {navigateToProduct, navigateToShop, navigateToOrder} =
+    useShopNavigation()
+
+  return (
+    <>
+      <Button
+        onPress={() =>
+          navigateToProduct({productId: 'gid://shopify/Product/123'})
+        }
+        text="View Product"
+      />
+      <Button
+        onPress={() =>
+          navigateToShop({
+            shopId: 'gid://shopify/Shop/123',
+          })
+        }
+        text="Go to Shop"
+      />
+      <Button
+        onPress={() => navigateToOrder({orderId: 'gid://shopify/Order/123'})}
+        text="View Order"
+      />
+    </>
+  )
+}

package/src/hooks/navigation/useShopNavigation.ts

@@ -0,0 +1,41 @@
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+import {
+  NavigateToCheckoutParams,
+  NavigateToOrderParams,
+  NavigateToProductParams,
+  NavigateToShopParams,
+} from '../../types'
+
+interface UseShopNavigationReturns {
+  /**
+   * Navigates to a product.
+   */
+  navigateToProduct: (params: NavigateToProductParams) => Promise<void>
+  /**
+   * Navigates to a shop.
+   */
+  navigateToShop: (params: NavigateToShopParams) => Promise<void>
+  /**
+   * Navigates to an order.
+   */
+  navigateToOrder: (params: NavigateToOrderParams) => Promise<void>
+
+  navigateToCheckout: (params: NavigateToCheckoutParams) => Promise<void>
+}
+
+export const useShopNavigation = (): UseShopNavigationReturns => {
+  const {
+    navigateToProduct,
+    navigateToShop,
+    navigateToOrder,
+    navigateToCheckout,
+  } = useShopActions()
+
+  return {
+    navigateToProduct: useHandleAction(navigateToProduct),
+    navigateToShop: useHandleAction(navigateToShop),
+    navigateToOrder: useHandleAction(navigateToOrder),
+    navigateToCheckout: useHandleAction(navigateToCheckout),
+  }
+}

package/src/hooks/product/usePopularProducts.ts

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

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

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

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

@@ -0,0 +1,9 @@
+import {useProductList} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {productList, loading, error} = useProductList({
+    id: 'gid://shopapp/ProductList/123',
+  })
+
+  console.log({productList, loading, error})
+}