@shopify/shop-minis-react 0.0.1 → 0.0.3

package/src/dev.tsx

@@ -1,57 +1,656 @@
-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 {ProductLink} from './components/commerce/product-link'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from './components/ui/accordion'
+import {Alert, AlertDescription, AlertTitle} from './components/ui/alert'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './components/ui/alert-dialog'
+import {Avatar, AvatarFallback, AvatarImage} from './components/ui/avatar'
+import {Badge} from './components/ui/badge'
+import {Button} from './components/ui/button'
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardAction,
+  CardFooter,
+} from './components/ui/card'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from './components/ui/carousel'
+import {Checkbox} from './components/ui/checkbox'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from './components/ui/dialog'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from './components/ui/drawer'
+import {Input} from './components/ui/input'
+import {Label} from './components/ui/label'
+import {Progress} from './components/ui/progress'
+import {RadioGroup, RadioGroupItem} from './components/ui/radio-group'
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from './components/ui/resizable'
+import {ScrollArea} from './components/ui/scroll-area'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './components/ui/select'
+import {Separator} from './components/ui/separator'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from './components/ui/sheet'
+import {Toaster} from './components/ui/sonner'
+import {CurrencyCode} from './types/minisSDK.generated.d'
+import './mockActions'
 
 function App() {
+  const [alertOpen, setAlertOpen] = useState(false)
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [progress, setProgress] = useState(13)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500)
+    return () => clearTimeout(timer)
+  }, [])
+
   return (
-    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-8">
-      <div className="space-y-8">
-        <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="min-h-screen bg-gray-50 p-8">
+      <div className="space-y-12 w-full max-w-6xl mx-auto">
+        {/* Commerce Components Section */}
+        <section className="space-y-8">
+          <div className="border-b pb-4">
+            <h2 className="text-3xl font-bold text-gray-800">
+              Commerce Components
+            </h2>
+            <p className="text-gray-600 mt-2">Shop app specific components</p>
+          </div>
 
+          {/* ProductLink Examples */}
           <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>
-            </>
+            <h3 className="text-2xl font-semibold">ProductLink</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-4xl">
+              {/* Default */}
+              <ProductLink
+                product={{
+                  id: '1',
+                  title: 'The Hero Snowboard',
+                  price: {amount: '702.95', currencyCode: CurrencyCode.USD},
+                  reviewAnalytics: {},
+                  shop: {id: 'shop1', name: 'Snow Sports Co.'},
+                  defaultVariantId: 'variant1',
+                  isFavorited: false,
+                }}
+              />
+
+              {/* With discount and action */}
+              <ProductLink
+                product={{
+                  id: '2',
+                  title: 'Mr. Huebert Hydroxy Snow...',
+                  price: {amount: '605.95', currencyCode: CurrencyCode.USD},
+                  compareAtPrice: {
+                    amount: '702.00',
+                    currencyCode: CurrencyCode.USD,
+                  },
+                  reviewAnalytics: {},
+                  shop: {id: 'shop1', name: 'Snow Sports Co.'},
+                  defaultVariantId: 'variant2',
+                  isFavorited: false,
+                }}
+              />
+
+              {/* With rating and action (liked) */}
+              <ProductLink
+                product={{
+                  id: '3',
+                  title: 'The Hero Snowboard',
+                  price: {amount: '702.95', currencyCode: CurrencyCode.USD},
+                  reviewAnalytics: {averageRating: 4.5, reviewCount: 2},
+                  shop: {id: 'shop1', name: 'Snow Sports Co.'},
+                  defaultVariantId: 'variant3',
+                  isFavorited: true,
+                }}
+              />
+
+              {/* Large discount */}
+              <ProductLink
+                product={{
+                  id: '4',
+                  title: 'Mr. Huebert Hydroxy Snow...',
+                  price: {amount: '16005.95', currencyCode: CurrencyCode.USD},
+                  compareAtPrice: {
+                    amount: '17000.00',
+                    currencyCode: CurrencyCode.USD,
+                  },
+                  reviewAnalytics: {averageRating: 4, reviewCount: 12},
+                  shop: {id: 'shop1', name: 'Snow Sports Co.'},
+                  defaultVariantId: 'variant4',
+                  isFavorited: false,
+                }}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Core UI Components Section */}
+        <section className="space-y-8">
+          <div className="border-b pb-4">
+            <h2 className="text-3xl font-bold text-gray-800">
+              Core UI Components
+            </h2>
+            <p className="text-gray-600 mt-2">
+              Reusable UI components for building interfaces
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            {/* Accordion */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Accordion</h3>
+              <Accordion type="single" collapsible className="w-full max-w-md">
+                <AccordionItem value="item-1">
+                  <AccordionTrigger>Is it accessible?</AccordionTrigger>
+                  <AccordionContent>
+                    Yes. It adheres to the WAI-ARIA design pattern.
+                  </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="item-2">
+                  <AccordionTrigger>Is it styled?</AccordionTrigger>
+                  <AccordionContent>
+                    Yes. It comes with default styles that matches the other
+                    components&apos; aesthetic.
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </div>
+
+            {/* Alert */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Alert</h3>
+              <div className="space-y-4 max-w-md">
+                <Alert>
+                  <AlertTitle>Heads up!</AlertTitle>
+                  <AlertDescription>
+                    You can add components and dependencies to your app using
+                    the cli.
+                  </AlertDescription>
+                </Alert>
+                <Alert variant="destructive">
+                  <AlertTitle>Error</AlertTitle>
+                  <AlertDescription>
+                    Your session has expired. Please log in again.
+                  </AlertDescription>
+                </Alert>
+              </div>
+            </div>
+
+            {/* AlertDialog */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Alert Dialog</h3>
+              <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>
+            </div>
+
+            {/* Avatar */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Avatar</h3>
+              <div className="flex items-center space-x-4">
+                <Avatar>
+                  <AvatarImage
+                    src="https://github.com/shadcn.png"
+                    alt="@shadcn"
+                  />
+                  <AvatarFallback>CN</AvatarFallback>
+                </Avatar>
+                <Avatar>
+                  <AvatarFallback>JD</AvatarFallback>
+                </Avatar>
+              </div>
+            </div>
+
+            {/* Badge */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Badge</h3>
+              <div className="flex flex-wrap gap-2">
+                <Badge>Default</Badge>
+                <Badge variant="secondary">Secondary</Badge>
+                <Badge variant="destructive">Destructive</Badge>
+                <Badge variant="outline">Outline</Badge>
+              </div>
+            </div>
+
+            {/* Button */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Button</h3>
+              <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>
+
+            {/* Card */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Card</h3>
+              <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>
+            </div>
+
+            {/* Carousel */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Carousel</h3>
+              <Carousel className="w-full max-w-xs">
+                <CarouselContent>
+                  {Array.from({length: 5}).map((_, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <CarouselItem key={`carousel-item-${index}`}>
+                      <div className="p-1">
+                        <Card>
+                          <CardContent className="flex aspect-square items-center justify-center p-6">
+                            <span className="text-4xl font-semibold">
+                              {index + 1}
+                            </span>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <CarouselPrevious />
+                <CarouselNext />
+              </Carousel>
+            </div>
+
+            {/* Checkbox */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Checkbox</h3>
+              <div className="flex items-center space-x-2">
+                <Checkbox id="terms" />
+                <Label htmlFor="terms">Accept terms and conditions</Label>
+              </div>
+            </div>
+
+            {/* Dialog */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Dialog</h3>
+              <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogTrigger asChild>
+                  <Button variant="outline">Open Dialog</Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[425px]">
+                  <DialogHeader>
+                    <DialogTitle>Edit profile</DialogTitle>
+                    <DialogDescription>
+                      Make changes to your profile here. Click save when
+                      you&apos;re done.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <div className="grid gap-4 py-4">
+                    <div className="grid grid-cols-4 items-center gap-4">
+                      <Label htmlFor="name" className="text-right">
+                        Name
+                      </Label>
+                      <Input
+                        id="name"
+                        defaultValue="Pedro Duarte"
+                        className="col-span-3"
+                      />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                      <Label htmlFor="username" className="text-right">
+                        Username
+                      </Label>
+                      <Input
+                        id="username"
+                        defaultValue="@peduarte"
+                        className="col-span-3"
+                      />
+                    </div>
+                  </div>
+                  <DialogFooter>
+                    <Button type="submit">Save changes</Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </div>
+
+            {/* Drawer */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Drawer</h3>
+              <Drawer>
+                <DrawerTrigger asChild>
+                  <Button variant="outline">Open Drawer</Button>
+                </DrawerTrigger>
+                <DrawerContent>
+                  <div className="mx-auto w-full max-w-sm">
+                    <DrawerHeader>
+                      <DrawerTitle>Move Goal</DrawerTitle>
+                      <DrawerDescription>
+                        Set your daily activity goal.
+                      </DrawerDescription>
+                    </DrawerHeader>
+                    <div className="p-4 pb-0">
+                      <div className="flex items-center justify-center space-x-2">
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="h-8 w-8 shrink-0 rounded-full"
+                          onClick={() =>
+                            setProgress(Math.max(0, progress - 10))
+                          }
+                        >
+                          -
+                        </Button>
+                        <div className="flex-1 text-center">
+                          <div className="text-7xl font-bold tracking-tighter">
+                            {progress}
+                          </div>
+                          <div className="text-[0.70rem] uppercase text-muted-foreground">
+                            Goals/day
+                          </div>
+                        </div>
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="h-8 w-8 shrink-0 rounded-full"
+                          onClick={() =>
+                            setProgress(Math.min(100, progress + 10))
+                          }
+                        >
+                          +
+                        </Button>
+                      </div>
+                    </div>
+                    <DrawerFooter>
+                      <Button>Submit</Button>
+                      <DrawerClose asChild>
+                        <Button variant="outline">Cancel</Button>
+                      </DrawerClose>
+                    </DrawerFooter>
+                  </div>
+                </DrawerContent>
+              </Drawer>
+            </div>
+
+            {/* Input & Label */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Input & Label</h3>
+              <div className="grid w-full max-w-sm items-center gap-1.5">
+                <Label htmlFor="email">Email</Label>
+                <Input type="email" id="email" placeholder="Email" />
+              </div>
+            </div>
+
+            {/* Progress */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Progress</h3>
+              <Progress value={progress} className="w-[60%]" />
+            </div>
+
+            {/* Radio Group */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Radio Group</h3>
+              <RadioGroup defaultValue="comfortable">
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="default" id="r1" />
+                  <Label htmlFor="r1">Default</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="comfortable" id="r2" />
+                  <Label htmlFor="r2">Comfortable</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="compact" id="r3" />
+                  <Label htmlFor="r3">Compact</Label>
+                </div>
+              </RadioGroup>
+            </div>
+
+            {/* Resizable */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Resizable</h3>
+              <ResizablePanelGroup
+                direction="horizontal"
+                className="max-w-md rounded-lg border"
+              >
+                <ResizablePanel defaultSize={50}>
+                  <div className="flex h-[200px] items-center justify-center p-6">
+                    <span className="font-semibold">One</span>
+                  </div>
+                </ResizablePanel>
+                <ResizableHandle />
+                <ResizablePanel defaultSize={50}>
+                  <ResizablePanelGroup direction="vertical">
+                    <ResizablePanel defaultSize={25}>
+                      <div className="flex h-full items-center justify-center p-6">
+                        <span className="font-semibold">Two</span>
+                      </div>
+                    </ResizablePanel>
+                    <ResizableHandle />
+                    <ResizablePanel defaultSize={75}>
+                      <div className="flex h-full items-center justify-center p-6">
+                        <span className="font-semibold">Three</span>
+                      </div>
+                    </ResizablePanel>
+                  </ResizablePanelGroup>
+                </ResizablePanel>
+              </ResizablePanelGroup>
+            </div>
+
+            {/* Scroll Area */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Scroll Area</h3>
+              <ScrollArea className="h-72 w-48 rounded-md border">
+                <div className="p-4">
+                  <h4 className="mb-4 text-sm font-medium leading-none">
+                    Tags
+                  </h4>
+                  {Array.from({length: 50}).map((_, i) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <div key={`tag-v1.2.0-beta.${i}`} className="text-sm">
+                      v1.2.0-beta.{i}
+                    </div>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
+
+            {/* Select */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Select</h3>
+              <Select>
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue placeholder="Select a fruit" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="apple">Apple</SelectItem>
+                  <SelectItem value="banana">Banana</SelectItem>
+                  <SelectItem value="blueberry">Blueberry</SelectItem>
+                  <SelectItem value="grapes">Grapes</SelectItem>
+                  <SelectItem value="pineapple">Pineapple</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Separator */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Separator</h3>
+              <div className="space-y-1">
+                <div className="text-sm">Above separator</div>
+                <Separator className="my-4" />
+                <div className="text-sm">Below separator</div>
+              </div>
+            </div>
+
+            {/* Sheet */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Sheet</h3>
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="outline">Open Sheet</Button>
+                </SheetTrigger>
+                <SheetContent>
+                  <SheetHeader>
+                    <SheetTitle>Edit profile</SheetTitle>
+                    <SheetDescription>
+                      Make changes to your profile here. Click save when
+                      you&apos;re done.
+                    </SheetDescription>
+                  </SheetHeader>
+                  <div className="grid gap-4 py-4">
+                    <div className="grid grid-cols-4 items-center gap-4">
+                      <Label htmlFor="name" className="text-right">
+                        Name
+                      </Label>
+                      <Input
+                        id="name"
+                        defaultValue="Pedro Duarte"
+                        className="col-span-3"
+                      />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                      <Label htmlFor="username" className="text-right">
+                        Username
+                      </Label>
+                      <Input
+                        id="username"
+                        defaultValue="@peduarte"
+                        className="col-span-3"
+                      />
+                    </div>
+                  </div>
+                  <SheetFooter>
+                    <SheetClose asChild>
+                      <Button type="submit">Save changes</Button>
+                    </SheetClose>
+                  </SheetFooter>
+                </SheetContent>
+              </Sheet>
+            </div>
+
+            {/* Toaster (Sonner) */}
+            <div className="space-y-4">
+              <h3 className="text-2xl font-semibold">Toaster (Sonner)</h3>
+              <div className="flex flex-wrap 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>
+            </div>
           </div>
-        </div>
+        </section>
       </div>
+
+      {/* Toaster component for displaying notifications */}
+      <Toaster />
     </div>
   )
 }