@shopify/shop-minis-react 0.0.10 → 0.0.12

package/src/dev.tsx

@@ -1,868 +0,0 @@
-import React, {useState} from 'react'
-
-import ReactDOM from 'react-dom/client'
-import {toast} from 'sonner'
-
-import './index.css'
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from './components/atoms/accordion'
-import {Alert, AlertDescription, AlertTitle} from './components/atoms/alert'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from './components/atoms/alert-dialog'
-import {Avatar, AvatarFallback, AvatarImage} from './components/atoms/avatar'
-import {Badge} from './components/atoms/badge'
-import {Button} from './components/atoms/button'
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardAction,
-  CardFooter,
-} from './components/atoms/card'
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from './components/atoms/carousel'
-import {Checkbox} from './components/atoms/checkbox'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from './components/atoms/dialog'
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from './components/atoms/drawer'
-import {Input} from './components/atoms/input'
-import {Label} from './components/atoms/label'
-import {Progress} from './components/atoms/progress'
-import {RadioGroup, RadioGroupItem} from './components/atoms/radio-group'
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from './components/atoms/resizable'
-import {ScrollArea} from './components/atoms/scroll-area'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from './components/atoms/select'
-import {Separator} from './components/atoms/separator'
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from './components/atoms/sheet'
-import {Toaster} from './components/atoms/sonner'
-import {ProductCard} from './components/commerce/product-card'
-import {ProductLink} from './components/commerce/product-link'
-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 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>
-
-          {/* ProductCard Examples */}
-          <div className="space-y-4">
-            <h3 className="text-2xl font-semibold">ProductCard</h3>
-            <div className="space-y-6">
-              {/* Default Variant - Full Size */}
-              <div className="space-y-2">
-                <h4 className="text-lg font-medium">Default</h4>
-
-                <ProductCard
-                  product={{
-                    id: '1',
-                    title: 'The Hero Snowboard',
-                    price: {amount: '702.95', currencyCode: CurrencyCode.USD},
-                    featuredImage: {
-                      url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
-                      altText: 'The Hero Snowboard',
-                    },
-                    shop: {id: 'shop1', name: 'Snow Sports Co.'},
-                    defaultVariantId: 'variant1',
-                    isFavorited: false,
-                    reviewAnalytics: {},
-                  }}
-                  variant="default"
-                />
-              </div>
-
-              {/* Grid Layout for Variants */}
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl">
-                {/* Default with discount */}
-                <div className="space-y-2">
-                  <h4 className="text-sm font-medium">
-                    Default (with discount)
-                  </h4>
-                  <ProductCard
-                    product={{
-                      id: '2',
-                      title: 'The Hero Snowboard',
-                      price: {amount: '605.95', currencyCode: CurrencyCode.USD},
-                      compareAtPrice: {
-                        amount: '702.95',
-                        currencyCode: CurrencyCode.USD,
-                      },
-                      featuredImage: {
-                        url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
-                        altText: 'The Hero Snowboard',
-                      },
-                      shop: {id: 'shop1', name: 'Snow Sports Co.'},
-                      defaultVariantId: 'variant2',
-                      isFavorited: true,
-                      reviewAnalytics: {},
-                    }}
-                    variant="default"
-                  />
-                </div>
-
-                {/* Price Overlay */}
-                <div className="space-y-2">
-                  <h4 className="text-sm font-medium">Price Overlay</h4>
-                  <ProductCard
-                    product={{
-                      id: '3',
-                      title: 'The Hero Snowboard',
-                      price: {amount: '702.95', currencyCode: CurrencyCode.USD},
-                      featuredImage: {
-                        url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
-                        altText: 'The Hero Snowboard',
-                      },
-                      shop: {id: 'shop1', name: 'Snow Sports Co.'},
-                      defaultVariantId: 'variant3',
-                      isFavorited: false,
-                      reviewAnalytics: {},
-                    }}
-                    variant="priceOverlay"
-                  />
-                </div>
-
-                {/* With Badge */}
-                <div className="space-y-2">
-                  <h4 className="text-sm font-medium">With Badge</h4>
-                  <ProductCard
-                    product={{
-                      id: '4',
-                      title: 'The Hero Snowboard',
-                      price: {amount: '702.95', currencyCode: CurrencyCode.USD},
-                      featuredImage: {
-                        url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
-                        altText: 'The Hero Snowboard',
-                      },
-                      shop: {id: 'shop1', name: 'Snow Sports Co.'},
-                      defaultVariantId: 'variant4',
-                      isFavorited: true,
-                      reviewAnalytics: {},
-                    }}
-                    variant="default"
-                    badgeText="Sponsored"
-                    badgeVariant="secondary"
-                  />
-                </div>
-
-                {/* Compact */}
-                <div className="space-y-2">
-                  <h4 className="text-sm font-medium">Compact</h4>
-                  <ProductCard
-                    product={{
-                      id: '5',
-                      title: 'The Hero Snowboard',
-                      price: {amount: '702.95', currencyCode: CurrencyCode.USD},
-                      featuredImage: {
-                        url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
-                        altText: 'The Hero Snowboard',
-                      },
-                      shop: {id: 'shop1', name: 'Snow Sports Co.'},
-                      defaultVariantId: 'variant5',
-                      isFavorited: false,
-                      reviewAnalytics: {},
-                    }}
-                    variant="compact"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* ProductLink Examples */}
-          <div className="space-y-4">
-            <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="outlined">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="space-y-4">
-                {/* Core Variants */}
-                <>
-                  <h4 className="text-lg font-medium mb-2">Core Variants</h4>
-                  <div className="flex flex-wrap gap-2">
-                    <Button
-                      variant="primary"
-                      onClick={() => console.log('primary')}
-                    >
-                      Primary
-                    </Button>
-                    <Button
-                      variant="secondary"
-                      onClick={() => console.log('secondary')}
-                    >
-                      Secondary
-                    </Button>
-                    <Button
-                      variant="tertiary"
-                      onClick={() => console.log('tertiary')}
-                    >
-                      Tertiary
-                    </Button>
-                    <Button
-                      variant="outlined"
-                      onClick={() => console.log('outlined')}
-                    >
-                      Outlined
-                    </Button>
-                    <Button variant="text" onClick={() => console.log('text')}>
-                      Text
-                    </Button>
-                    <Button
-                      variant="borderless"
-                      onClick={() => console.log('borderless')}
-                    >
-                      Borderless
-                    </Button>
-                    <Button
-                      variant="borderlessUnbranded"
-                      onClick={() => console.log('borderlessUnbranded')}
-                    >
-                      Borderless Unbranded
-                    </Button>
-                  </div>
-                </>
-
-                {/* Special Variants */}
-                <>
-                  <h4 className="text-lg font-medium mb-2">Special Variants</h4>
-                  <div className="flex flex-wrap gap-2">
-                    <Button variant="blurred">Blurred</Button>
-                    <Button variant="dangerous">Dangerous</Button>
-                    <Button variant="outlined-dangerous">
-                      Outlined Dangerous
-                    </Button>
-                  </div>
-                </>
-
-                {/* Sizes */}
-                <>
-                  <h4 className="text-lg font-medium mb-2">Sizes</h4>
-                  <div className="flex flex-wrap items-center gap-2">
-                    <Button size="sm">Small</Button>
-                    <Button size="default">Default</Button>
-                    <Button size="lg">Large</Button>
-                    <Button size="icon">
-                      <span role="img" aria-label="Target">
-                        🎯
-                      </span>
-                    </Button>
-                  </div>
-                </>
-              </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="outlined">
-                      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="outlined">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="outlined">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="outlined"
-                          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="outlined"
-                          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="outlined">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>
-
-              {/* Horizontal Layout */}
-              <div className="space-y-2">
-                <h4 className="text-lg font-medium">Horizontal</h4>
-                <ResizablePanelGroup
-                  direction="horizontal"
-                  className="max-w-md rounded-lg border"
-                >
-                  <ResizablePanel defaultSize={50}>
-                    <div className="flex h-[120px] items-center justify-center p-6">
-                      <span className="font-semibold">Left</span>
-                    </div>
-                  </ResizablePanel>
-                  <ResizableHandle />
-                  <ResizablePanel defaultSize={50}>
-                    <div className="flex h-[120px] items-center justify-center p-6">
-                      <span className="font-semibold">Right</span>
-                    </div>
-                  </ResizablePanel>
-                </ResizablePanelGroup>
-              </div>
-
-              {/* Vertical Layout */}
-              <div className="space-y-2">
-                <h4 className="text-lg font-medium">Vertical</h4>
-                <div className="max-w-md h-[200px] rounded-lg border overflow-hidden">
-                  <ResizablePanelGroup
-                    direction="vertical"
-                    className="h-full w-full"
-                  >
-                    <ResizablePanel defaultSize={40} minSize={20}>
-                      <div className="flex h-full items-center justify-center p-6">
-                        <span className="font-semibold">Top</span>
-                      </div>
-                    </ResizablePanel>
-                    <ResizableHandle />
-                    <ResizablePanel defaultSize={60} minSize={20}>
-                      <div className="flex h-full items-center justify-center p-6">
-                        <span className="font-semibold">Bottom</span>
-                      </div>
-                    </ResizablePanel>
-                  </ResizablePanelGroup>
-                </div>
-              </div>
-            </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="outlined">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>
-        </section>
-      </div>
-
-      {/* Toaster component for displaying notifications */}
-      <Toaster />
-    </div>
-  )
-}
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)