@neynar/ui 0.1.1

package/src/components/ui/stories/card.stories.tsx

@@ -0,0 +1,308 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Heart, MoreHorizontal, Settings } from "lucide-react";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../card";
+
+const meta = {
+  title: "Layout and Structure/Card",
+  component: Card,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A flexible container component for grouping related content with header, content, and footer sections. Supports composition through sub-components and can include actions in the header.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply to the card",
+    },
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+  args: {
+    className: "w-80",
+  },
+  argTypes: {
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+  render: (args) => (
+    <Card {...args}>
+      <CardHeader>
+        <CardTitle>Interactive Card</CardTitle>
+        <CardDescription>
+          Use the controls to modify the card appearance and test different
+          configurations.
+        </CardDescription>
+        <CardAction>
+          <Button size="icon" variant="ghost">
+            <MoreHorizontal className="size-4" />
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <p>
+          This card demonstrates all the available sub-components and their
+          composition patterns.
+        </p>
+      </CardContent>
+      <CardFooter className="gap-2">
+        <Button variant="outline">Cancel</Button>
+        <Button>Save</Button>
+      </CardFooter>
+    </Card>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground to test different card configurations and styling options.",
+      },
+    },
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl">
+      {/* Basic card with all sections */}
+      <Card className="w-80">
+        <CardHeader>
+          <CardTitle>Complete Card</CardTitle>
+          <CardDescription>
+            Card with header, content, and footer
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>This card includes all available sections.</p>
+        </CardContent>
+        <CardFooter>
+          <Button size="sm">Action</Button>
+        </CardFooter>
+      </Card>
+
+      {/* Card with header action */}
+      <Card className="w-80">
+        <CardHeader>
+          <CardTitle>With Header Action</CardTitle>
+          <CardDescription>Card with action button in header</CardDescription>
+          <CardAction>
+            <Badge variant="secondary">New</Badge>
+          </CardAction>
+        </CardHeader>
+        <CardContent>
+          <p>Header action positioned in top-right corner.</p>
+        </CardContent>
+      </Card>
+
+      {/* Minimal card */}
+      <Card className="w-80">
+        <CardContent>
+          <p>Minimal card with only content section.</p>
+        </CardContent>
+      </Card>
+
+      {/* Stats card */}
+      <Card className="w-80">
+        <CardHeader>
+          <CardTitle className="text-sm font-medium">Revenue</CardTitle>
+          <CardAction>
+            <Badge variant="outline" className="text-green-600">
+              +12%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">$45,231</div>
+          <p className="text-xs text-muted-foreground">+20% from last month</p>
+        </CardContent>
+      </Card>
+
+      {/* Card with custom styling */}
+      <Card className="w-80 border-2 border-primary">
+        <CardHeader>
+          <CardTitle>Highlighted Card</CardTitle>
+          <CardDescription>Custom border styling</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>Card with emphasis border.</p>
+        </CardContent>
+      </Card>
+
+      {/* Card with footer actions */}
+      <Card className="w-80">
+        <CardHeader>
+          <CardTitle>Multiple Actions</CardTitle>
+          <CardDescription>Card with multiple footer buttons</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>Content with action buttons in footer.</p>
+        </CardContent>
+        <CardFooter className="gap-2">
+          <Button className="flex-1" variant="outline">
+            Cancel
+          </Button>
+          <Button className="flex-1">Confirm</Button>
+        </CardFooter>
+      </Card>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Showcase of all card variants and composition patterns available in the component system.",
+      },
+    },
+  },
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div className="max-w-4xl mx-auto p-6 space-y-6">
+      {/* Dashboard header */}
+      <div className="space-y-2">
+        <h1 className="text-3xl font-bold">Dashboard</h1>
+        <p className="text-muted-foreground">
+          Welcome back! Here&apos;s your latest activity.
+        </p>
+      </div>
+
+      {/* Stats grid */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm font-medium">Total Users</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">2,847</div>
+            <p className="text-xs text-muted-foreground">
+              +12% from last month
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm font-medium">Revenue</CardTitle>
+            <CardAction>
+              <Badge variant="outline" className="text-green-600">
+                +8.2%
+              </Badge>
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">$54,239</div>
+            <p className="text-xs text-muted-foreground">
+              +8.2% from last month
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm font-medium">
+              Active Sessions
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">1,247</div>
+            <p className="text-xs text-muted-foreground">
+              +2.1% from last hour
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Feature cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Account Settings</CardTitle>
+            <CardDescription>
+              Manage your account preferences and security
+            </CardDescription>
+            <CardAction>
+              <Button size="icon" variant="ghost">
+                <Settings className="size-4" />
+              </Button>
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <div className="flex justify-between">
+                <span className="text-sm">Two-factor authentication</span>
+                <Badge variant="secondary">Enabled</Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-sm">Email notifications</span>
+                <Badge variant="outline">On</Badge>
+              </div>
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button variant="outline" className="w-full">
+              Manage Settings
+            </Button>
+          </CardFooter>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <div className="aspect-video bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg mb-4"></div>
+            <CardTitle>Premium Features</CardTitle>
+            <CardDescription>
+              Unlock advanced functionality with our premium plan
+            </CardDescription>
+            <CardAction>
+              <Badge>Pro</Badge>
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <ul className="text-sm space-y-1">
+              <li>• Advanced analytics</li>
+              <li>• Priority support</li>
+              <li>• Custom integrations</li>
+            </ul>
+          </CardContent>
+          <CardFooter className="gap-2">
+            <Button className="flex-1">Upgrade Now</Button>
+            <Button size="icon" variant="outline">
+              <Heart className="size-4" />
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real-world dashboard example showing how cards work together to create cohesive user interfaces. Demonstrates various card patterns including stats cards, feature cards, and content cards with actions.",
+      },
+    },
+  },
+};

package/src/components/ui/stories/carousel.stories.tsx

@@ -0,0 +1,328 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../button";
+import { Card, CardContent } from "../card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "../carousel";
+
+const meta = {
+  title: "Charts & Visualization/Carousel",
+  component: Carousel,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A responsive carousel component built on Embla Carousel with navigation controls, keyboard support, touch/swipe gestures, and customizable orientation. Supports autoplay, looping, and multiple items per view.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    orientation: {
+      control: { type: "select" },
+      options: ["horizontal", "vertical"],
+      description: "Layout direction of the carousel",
+    },
+    opts: {
+      control: { type: "object" },
+      description: "Embla carousel configuration options (align, loop, etc.)",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+} satisfies Meta<typeof Carousel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Interactive playground with all controls
+export const Interactive: Story = {
+  args: {
+    orientation: "horizontal",
+    opts: {
+      align: "start",
+      loop: false,
+    },
+    className: "w-full max-w-sm",
+  },
+  render: (args) => (
+    <div className="w-full max-w-sm">
+      <Carousel {...args}>
+        <CarouselContent>
+          {Array.from({ length: 5 }, (_, index) => (
+            <CarouselItem key={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>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground to test all carousel props and configurations. Use the controls panel to experiment with different settings.",
+      },
+    },
+  },
+};
+
+// Showcase of all variants and configurations
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Basic horizontal carousel */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Basic Horizontal</h3>
+        <div className="w-full max-w-xs">
+          <Carousel>
+            <CarouselContent>
+              {Array.from({ length: 3 }, (_, index) => (
+                <CarouselItem key={index}>
+                  <div className="p-1">
+                    <Card>
+                      <CardContent className="flex aspect-square items-center justify-center p-6">
+                        <span className="text-2xl font-semibold">
+                          {index + 1}
+                        </span>
+                      </CardContent>
+                    </Card>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+          </Carousel>
+        </div>
+      </div>
+
+      {/* Vertical orientation */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Vertical Orientation</h3>
+        <div className="w-full max-w-xs">
+          <Carousel orientation="vertical" className="h-64">
+            <CarouselContent className="h-full">
+              {Array.from({ length: 3 }, (_, index) => (
+                <CarouselItem key={index} className="basis-1/3">
+                  <div className="p-1">
+                    <Card>
+                      <CardContent className="flex items-center justify-center p-6">
+                        <span className="text-2xl font-semibold">
+                          {index + 1}
+                        </span>
+                      </CardContent>
+                    </Card>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+          </Carousel>
+        </div>
+      </div>
+
+      {/* Multiple items visible */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Multiple Items (basis-1/3)</h3>
+        <div className="w-full max-w-sm">
+          <Carousel>
+            <CarouselContent>
+              {Array.from({ length: 6 }, (_, index) => (
+                <CarouselItem key={index} className="basis-1/3">
+                  <div className="p-1">
+                    <Card>
+                      <CardContent className="flex aspect-square items-center justify-center p-3">
+                        <span className="text-lg font-semibold">
+                          {index + 1}
+                        </span>
+                      </CardContent>
+                    </Card>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+          </Carousel>
+        </div>
+      </div>
+
+      {/* Without navigation */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">
+          Without Navigation (swipe/drag only)
+        </h3>
+        <div className="w-full max-w-xs">
+          <Carousel>
+            <CarouselContent>
+              {Array.from({ length: 3 }, (_, index) => (
+                <CarouselItem key={index}>
+                  <div className="p-1">
+                    <Card>
+                      <CardContent className="flex aspect-square items-center justify-center p-6">
+                        <span className="text-2xl font-semibold">
+                          {index + 1}
+                        </span>
+                      </CardContent>
+                    </Card>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Comprehensive showcase of all carousel variants: horizontal, vertical, multiple items, and navigation options.",
+      },
+    },
+  },
+};
+
+// Real-world usage example
+export const InContext: Story = {
+  render: () => (
+    <div className="max-w-4xl mx-auto p-6 space-y-8">
+      {/* Product showcase section */}
+      <section className="space-y-4">
+        <div className="text-center space-y-2">
+          <h2 className="text-3xl font-bold">Featured Products</h2>
+          <p className="text-muted-foreground">
+            Discover our latest collection
+          </p>
+        </div>
+        <Carousel
+          opts={{
+            align: "start",
+            loop: true,
+          }}
+          className="w-full"
+        >
+          <CarouselContent className="-ml-2 md:-ml-4">
+            {Array.from({ length: 8 }, (_, index) => (
+              <CarouselItem
+                key={index}
+                className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3"
+              >
+                <Card className="h-full">
+                  <CardContent className="p-4">
+                    <div className="aspect-square bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg mb-3 flex items-center justify-center">
+                      <span className="text-white text-xl font-bold">
+                        #{index + 1}
+                      </span>
+                    </div>
+                    <h3 className="font-semibold mb-2">
+                      Premium Product {index + 1}
+                    </h3>
+                    <p className="text-sm text-muted-foreground mb-3">
+                      High-quality product with amazing features and benefits.
+                    </p>
+                    <div className="flex items-center justify-between">
+                      <span className="text-lg font-bold">$99.99</span>
+                      <Button size="sm">Add to Cart</Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </section>
+
+      {/* Testimonials section */}
+      <section className="space-y-4">
+        <div className="text-center space-y-2">
+          <h2 className="text-2xl font-bold">What Our Customers Say</h2>
+          <p className="text-muted-foreground">
+            Real feedback from real people
+          </p>
+        </div>
+        <Carousel className="w-full max-w-2xl mx-auto">
+          <CarouselContent>
+            {[
+              {
+                name: "Sarah Johnson",
+                role: "Product Manager",
+                company: "TechCorp",
+                quote:
+                  "This product has revolutionized our workflow. The team loves it!",
+              },
+              {
+                name: "Michael Chen",
+                role: "Designer",
+                company: "Creative Studio",
+                quote:
+                  "Beautiful design and incredible functionality. Highly recommended!",
+              },
+              {
+                name: "Emily Rodriguez",
+                role: "Developer",
+                company: "StartupXYZ",
+                quote:
+                  "Easy to integrate and customize. Perfect for our needs.",
+              },
+            ].map((testimonial, index) => (
+              <CarouselItem key={index}>
+                <div className="p-4">
+                  <Card>
+                    <CardContent className="p-8 text-center">
+                      <blockquote className="text-lg italic mb-6">
+                        &quot;{testimonial.quote}&quot;
+                      </blockquote>
+                      <div className="flex flex-col items-center space-y-2">
+                        <div className="size-12 bg-gradient-to-r from-orange-400 to-pink-500 rounded-full"></div>
+                        <div>
+                          <p className="font-semibold">{testimonial.name}</p>
+                          <p className="text-sm text-muted-foreground">
+                            {testimonial.role}, {testimonial.company}
+                          </p>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </section>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real-world example showing carousel usage in a product showcase page with featured items and customer testimonials. Demonstrates responsive design and practical implementation.",
+      },
+    },
+  },
+};