@a2v2ai/uikit 0.0.37 → 0.0.38

package/Card/Card.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Button } from "../Button/Button"
+import { Input } from "../Input/Input"
+import { Label } from "../Label/Label"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from "./Card"
+
+const meta: Meta<typeof Card> = {
+  title: "Components/Card",
+  component: Card,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "outline"],
+      description: "The visual variant of the card",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card Description</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card Content</p>
+      </CardContent>
+      <CardFooter>
+        <p>Card Footer</p>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const Outline: Story = {
+  render: () => (
+    <Card variant="outline" className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Outline Card</CardTitle>
+        <CardDescription>This card has no shadow</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card content goes here.</p>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Create project</CardTitle>
+        <CardDescription>Deploy your new project in one-click.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <Flex gap={4}>
+            <Flex gap={2}>
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" placeholder="Name of your project" />
+            </Flex>
+            <Flex gap={2}>
+              <Label htmlFor="framework">Framework</Label>
+              <Input id="framework" placeholder="Select a framework" />
+            </Flex>
+          </Flex>
+        </form>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Deploy</Button>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const SimpleCard: Story = {
+  render: () => (
+    <Card className="w-[350px] p-6">
+      <Flex gap={2}>
+        <Typography variant="h4">Notifications</Typography>
+        <Typography variant="body2" color="grey-500">
+          You have 3 unread messages.
+        </Typography>
+      </Flex>
+    </Card>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex gap={6}>
+      <Typography variant="h4" className="text-white">Card Variants</Typography>
+
+      <Flex direction="row" gap={4} wrap="wrap">
+        <Card className="w-[300px]">
+          <CardHeader>
+            <CardTitle>Default Card</CardTitle>
+            <CardDescription>With shadow</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>This is the default card style with a subtle shadow.</p>
+          </CardContent>
+          <CardFooter>
+            <Button size="small">Action</Button>
+          </CardFooter>
+        </Card>
+
+        <Card variant="outline" className="w-[300px]">
+          <CardHeader>
+            <CardTitle>Outline Card</CardTitle>
+            <CardDescription>Without shadow</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>This card has an outline border but no shadow.</p>
+          </CardContent>
+          <CardFooter>
+            <Button size="small" variant="outline">Action</Button>
+          </CardFooter>
+        </Card>
+      </Flex>
+    </Flex>
+  ),
+}

package/Card/Card.tsx

@@ -0,0 +1,96 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type CardVariant = "default" | "outline"
+
+const cardVariants = cva(
+  "rounded-xl border bg-white text-main-950 shadow-sm",
+  {
+    variants: {
+      variant: {
+        default: "border-grey-200",
+        outline: "border-grey-300 shadow-none",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: CardVariant
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(cardVariants({ variant }), className)}
+      {...props}
+    />
+  )
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-grey-500", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, cardVariants }
+export type { CardVariant }

package/Carousel/Carousel.stories.tsx

@@ -0,0 +1,256 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Flex } from "../Flex/Flex"
+import { Card, CardContent } from "../Card/Card"
+import { Typography } from "../Typography/Typography"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "./Carousel"
+
+const meta: Meta<typeof Carousel> = {
+  title: "Components/Carousel",
+  component: Carousel,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "The orientation of the carousel",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Carousel>
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-full max-w-xs">
+      <Carousel className="w-full max-w-xs">
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <Typography variant="h3">{index + 1}</Typography>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="w-full max-w-sm">
+      <Carousel
+        opts={{
+          align: "start",
+        }}
+        className="w-full max-w-sm"
+      >
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <Typography variant="h3">{index + 1}</Typography>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  ),
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <Carousel
+      opts={{
+        align: "start",
+      }}
+      orientation="vertical"
+      className="w-full max-w-xs"
+    >
+      <CarouselContent className="-mt-1 h-[200px]">
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="pt-1 md:basis-1/2">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex items-center justify-center p-6">
+                  <Typography variant="h3">{index + 1}</Typography>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  ),
+}
+
+export const Loop: Story = {
+  render: () => (
+    <div className="w-full max-w-xs">
+      <Carousel
+        opts={{
+          loop: true,
+        }}
+        className="w-full max-w-xs"
+      >
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <Typography variant="h3">{index + 1}</Typography>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  ),
+}
+
+export const WithoutNavigation: Story = {
+  render: () => (
+    <div className="w-full max-w-xs">
+      <Carousel className="w-full max-w-xs">
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <Typography variant="h3">{index + 1}</Typography>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+    </div>
+  ),
+}
+
+export const AllVariants: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => (
+    <Flex gap={12} className="p-8">
+      <Flex gap={4}>
+        <Typography variant="subtitle1" color="main-700">
+          Default Carousel
+        </Typography>
+        <div className="w-full max-w-xs">
+          <Carousel className="w-full max-w-xs">
+            <CarouselContent>
+              {Array.from({ length: 5 }).map((_, index) => (
+                <CarouselItem key={index}>
+                  <div className="p-1">
+                    <Card>
+                      <CardContent className="flex aspect-square items-center justify-center p-6">
+                        <Typography variant="h3">{index + 1}</Typography>
+                      </CardContent>
+                    </Card>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+          </Carousel>
+        </div>
+      </Flex>
+
+      <Flex gap={4}>
+        <Typography variant="subtitle1" color="main-700">
+          Multiple Items Per View
+        </Typography>
+        <div className="w-full max-w-lg">
+          <Carousel
+            opts={{
+              align: "start",
+            }}
+            className="w-full"
+          >
+            <CarouselContent>
+              {Array.from({ length: 8 }).map((_, index) => (
+                <CarouselItem key={index} className="basis-1/3">
+                  <div className="p-1">
+                    <Card>
+                      <CardContent className="flex aspect-square items-center justify-center p-6">
+                        <Typography variant="h4">{index + 1}</Typography>
+                      </CardContent>
+                    </Card>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+          </Carousel>
+        </div>
+      </Flex>
+
+      <Flex gap={4}>
+        <Typography variant="subtitle1" color="main-700">
+          With Loop Enabled
+        </Typography>
+        <div className="w-full max-w-xs">
+          <Carousel
+            opts={{
+              loop: true,
+            }}
+            className="w-full max-w-xs"
+          >
+            <CarouselContent>
+              {Array.from({ length: 5 }).map((_, index) => (
+                <CarouselItem key={index}>
+                  <div className="p-1">
+                    <Card variant="secondary">
+                      <CardContent className="flex aspect-square items-center justify-center p-6">
+                        <Typography variant="h3">{index + 1}</Typography>
+                      </CardContent>
+                    </Card>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+          </Carousel>
+        </div>
+      </Flex>
+    </Flex>
+  ),
+}