@neynar/ui 0.3.1 → 0.5.0

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

@@ -1,104 +1,252 @@
-import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react";
+import { StarIcon, TrendingUpIcon, UsersIcon, ZapIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "../badge";
 import { Button } from "../button";
-import { Card, CardContent } from "../card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../card";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
+  type CarouselApi,
 } from "../carousel";
 
-const meta = {
-  title: "Charts & Visualization/Carousel",
+const meta: Meta<typeof Carousel> = {
+  title: "Components/Advanced & Specialized/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.",
-      },
-    },
   },
   argTypes: {
     orientation: {
-      control: { type: "select" },
+      control: "select",
       options: ["horizontal", "vertical"],
-      description: "Layout direction of the carousel",
+      description: "Carousel scroll direction",
     },
     opts: {
-      control: { type: "object" },
-      description: "Embla carousel configuration options (align, loop, etc.)",
+      control: "object",
+      description: "Embla carousel options (loop, align, etc.)",
     },
-    className: {
-      control: { type: "text" },
-      description: "Additional CSS classes",
+    setApi: {
+      table: { disable: true },
     },
   },
-} satisfies Meta<typeof Carousel>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Carousel>;
 
-// 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>
-  ),
+/**
+ * Featured Apps Showcase - Realistic scenario showing a carousel in the context
+ * of browsing featured Neynar Frame apps in the dashboard.
+ */
+export const InContext: Story = {
   parameters: {
-    docs: {
-      description: {
-        story:
-          "Interactive playground to test all carousel props and configurations. Use the controls panel to experiment with different settings.",
-      },
-    },
+    layout: "padded",
+  },
+  render: () => {
+    function FeaturedAppsShowcase() {
+      const [api, setApi] = useState<CarouselApi>();
+      const [current, setCurrent] = useState(0);
+      const [count, setCount] = useState(0);
+
+      const featuredApps = [
+        {
+          name: "FrameCast",
+          description:
+            "Interactive polling and voting frames for your community",
+          category: "Engagement",
+          stats: { users: "12.4K", rating: 4.9, trend: "+24%" },
+          color: "from-purple-500 to-pink-500",
+          icon: <UsersIcon className="size-6" />,
+        },
+        {
+          name: "TokenGate",
+          description: "Token-gated content and exclusive access management",
+          category: "Monetization",
+          stats: { users: "8.2K", rating: 4.8, trend: "+18%" },
+          color: "from-blue-500 to-cyan-500",
+          icon: <ZapIcon className="size-6" />,
+        },
+        {
+          name: "CastAnalytics",
+          description: "Real-time analytics and insights for your casts",
+          category: "Analytics",
+          stats: { users: "15.7K", rating: 4.7, trend: "+32%" },
+          color: "from-green-500 to-emerald-500",
+          icon: <TrendingUpIcon className="size-6" />,
+        },
+        {
+          name: "FrameBuilder",
+          description: "No-code frame builder with drag-and-drop interface",
+          category: "Developer Tools",
+          stats: { users: "9.8K", rating: 4.9, trend: "+28%" },
+          color: "from-orange-500 to-red-500",
+          icon: <StarIcon className="size-6" />,
+        },
+      ];
+
+      // Track current slide
+      useState(() => {
+        if (!api) return;
+
+        setCount(api.scrollSnapList().length);
+        setCurrent(api.selectedScrollSnap());
+
+        api.on("select", () => {
+          setCurrent(api.selectedScrollSnap());
+        });
+      });
+
+      return (
+        <div className="w-full max-w-5xl space-y-6">
+          {/* Header */}
+          <div className="space-y-2">
+            <h2 className="text-2xl font-semibold">Featured Frame Apps</h2>
+            <p className="text-muted-foreground">
+              Discover the most popular apps built on Neynar's Frame platform
+            </p>
+          </div>
+
+          {/* Carousel */}
+          <div className="px-12">
+            <Carousel
+              opts={{
+                align: "start",
+                loop: true,
+              }}
+              className="w-full"
+              setApi={setApi}
+            >
+              <CarouselContent>
+                {featuredApps.map((app, index) => (
+                  <CarouselItem
+                    key={index}
+                    className="md:basis-1/2 lg:basis-1/3"
+                  >
+                    <Card className="h-full">
+                      <CardHeader>
+                        <div
+                          className={`bg-gradient-to-br ${app.color} mb-3 flex size-12 items-center justify-center rounded-lg text-white`}
+                        >
+                          {app.icon}
+                        </div>
+                        <CardTitle>{app.name}</CardTitle>
+                        <CardDescription>{app.description}</CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="space-y-3">
+                          <Badge variant="outline">{app.category}</Badge>
+                          <div className="grid grid-cols-3 gap-2 text-center">
+                            <div>
+                              <p className="text-muted-foreground text-xs">
+                                Users
+                              </p>
+                              <p className="font-semibold text-sm">
+                                {app.stats.users}
+                              </p>
+                            </div>
+                            <div>
+                              <p className="text-muted-foreground text-xs">
+                                Rating
+                              </p>
+                              <p className="font-semibold text-sm">
+                                {app.stats.rating}
+                              </p>
+                            </div>
+                            <div>
+                              <p className="text-muted-foreground text-xs">
+                                Growth
+                              </p>
+                              <p className="text-green-500 font-semibold text-sm">
+                                {app.stats.trend}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      </CardContent>
+                      <CardFooter className="border-border border-t">
+                        <Button variant="outline" className="w-full">
+                          Learn More
+                        </Button>
+                      </CardFooter>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          </div>
+
+          {/* Indicators */}
+          <div className="flex justify-center gap-2">
+            {Array.from({ length: count }).map((_, index) => (
+              <button
+                key={index}
+                className={`size-2 rounded-full transition-all ${
+                  index === current
+                    ? "bg-primary w-8"
+                    : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
+                }`}
+                onClick={() => api?.scrollTo(index)}
+                aria-label={`Go to slide ${index + 1}`}
+              />
+            ))}
+          </div>
+
+          {/* Action Bar */}
+          <div className="flex items-center justify-between border-t pt-6">
+            <p className="text-muted-foreground text-sm">
+              Showing {current + 1} of {count} featured apps
+            </p>
+            <Button>View All Apps</Button>
+          </div>
+        </div>
+      );
+    }
+
+    return <FeaturedAppsShowcase />;
   },
 };
 
-// Showcase of all variants and configurations
+/**
+ * Complete design system reference showing all carousel variants, orientations,
+ * and configuration options.
+ */
 export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
   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>
+    <div className="w-full max-w-5xl space-y-12">
+      {/* Basic Horizontal */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Basic Horizontal Carousel</h3>
+          <p className="text-muted-foreground text-sm">
+            Default horizontal scrolling with navigation buttons
+          </p>
+        </div>
+        <div className="px-12">
+          <Carousel className="w-full max-w-sm">
             <CarouselContent>
-              {Array.from({ length: 3 }, (_, index) => (
+              {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">
-                        <span className="text-2xl font-semibold">
+                        <span className="text-3xl font-semibold">
                           {index + 1}
                         </span>
                       </CardContent>
@@ -111,21 +259,26 @@ export const Variants: Story = {
             <CarouselNext />
           </Carousel>
         </div>
-      </div>
+      </section>
 
-      {/* 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">
+      {/* Vertical Orientation */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Vertical Orientation</h3>
+          <p className="text-muted-foreground text-sm">
+            Vertical scrolling for timeline-style layouts
+          </p>
+        </div>
+        <div className="py-14 px-12">
+          <Carousel orientation="vertical" className="w-full max-w-xs">
+            <CarouselContent className="h-[300px]">
+              {Array.from({ length: 5 }).map((_, index) => (
+                <CarouselItem key={index} className="pt-4 md:basis-1/2">
                   <div className="p-1">
                     <Card>
                       <CardContent className="flex items-center justify-center p-6">
                         <span className="text-2xl font-semibold">
-                          {index + 1}
+                          Slide {index + 1}
                         </span>
                       </CardContent>
                     </Card>
@@ -137,20 +290,30 @@ export const Variants: Story = {
             <CarouselNext />
           </Carousel>
         </div>
-      </div>
+      </section>
 
-      {/* 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>
+      {/* Multiple Items Per View */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Multiple Items Per View</h3>
+          <p className="text-muted-foreground text-sm">
+            Show multiple slides at once with responsive breakpoints
+          </p>
+        </div>
+        <div className="px-12">
+          <Carousel
+            opts={{
+              align: "start",
+            }}
+            className="w-full"
+          >
             <CarouselContent>
-              {Array.from({ length: 6 }, (_, index) => (
-                <CarouselItem key={index} className="basis-1/3">
+              {Array.from({ length: 10 }).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-3">
-                        <span className="text-lg font-semibold">
+                      <CardContent className="flex aspect-square items-center justify-center p-6">
+                        <span className="text-2xl font-semibold">
                           {index + 1}
                         </span>
                       </CardContent>
@@ -163,165 +326,223 @@ export const Variants: Story = {
             <CarouselNext />
           </Carousel>
         </div>
-      </div>
+      </section>
 
-      {/* 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>
+      {/* Loop Mode */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Loop Mode</h3>
+          <p className="text-muted-foreground text-sm">
+            Infinite looping for seamless browsing
+          </p>
+        </div>
+        <div className="px-12">
+          <Carousel
+            opts={{
+              align: "start",
+              loop: true,
+            }}
+            className="w-full max-w-sm"
+          >
             <CarouselContent>
-              {Array.from({ length: 3 }, (_, index) => (
+              {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">
-                        <span className="text-2xl font-semibold">
-                          {index + 1}
-                        </span>
+                        <div className="text-center">
+                          <div className="text-3xl font-semibold">
+                            {index + 1}
+                          </div>
+                          <div className="text-muted-foreground text-sm">
+                            Loop enabled
+                          </div>
+                        </div>
                       </CardContent>
                     </Card>
                   </div>
                 </CarouselItem>
               ))}
             </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
           </Carousel>
         </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Comprehensive showcase of all carousel variants: horizontal, vertical, multiple items, and navigation options.",
-      },
-    },
-  },
-};
+      </section>
 
-// Real-world usage example
-export const InContext: Story = {
-  render: () => (
-    <div className="max-w-4xl mx-auto p-6 space-y-8">
-      {/* Product showcase section */}
+      {/* API Control with Indicators */}
       <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
+        <div>
+          <h3 className="text-lg font-semibold">API Control with Indicators</h3>
+          <p className="text-muted-foreground text-sm">
+            Programmatic control and custom indicator dots
           </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>
+        <CarouselWithIndicators />
       </section>
 
-      {/* Testimonials section */}
+      {/* Alignment Options */}
       <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
+        <div>
+          <h3 className="text-lg font-semibold">Alignment Options</h3>
+          <p className="text-muted-foreground text-sm">
+            Different alignment modes: start, center, end
           </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>
+        <div className="space-y-6 px-12">
+          <div>
+            <p className="text-muted-foreground mb-2 text-sm">Align: Start</p>
+            <Carousel opts={{ align: "start" }} className="w-full max-w-sm">
+              <CarouselContent>
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <CarouselItem key={index} className="basis-1/3">
+                    <Card>
+                      <CardContent className="flex aspect-square items-center justify-center p-4">
+                        <span className="font-semibold">{index + 1}</span>
+                      </CardContent>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          </div>
+
+          <div>
+            <p className="text-muted-foreground mb-2 text-sm">Align: Center</p>
+            <Carousel opts={{ align: "center" }} className="w-full max-w-sm">
+              <CarouselContent>
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <CarouselItem key={index} className="basis-1/3">
+                    <Card>
+                      <CardContent className="flex aspect-square items-center justify-center p-4">
+                        <span className="font-semibold">{index + 1}</span>
+                      </CardContent>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          </div>
+
+          <div>
+            <p className="text-muted-foreground mb-2 text-sm">Align: End</p>
+            <Carousel opts={{ align: "end" }} className="w-full max-w-sm">
+              <CarouselContent>
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <CarouselItem key={index} className="basis-1/3">
+                    <Card>
+                      <CardContent className="flex aspect-square items-center justify-center p-4">
+                        <span className="font-semibold">{index + 1}</span>
+                      </CardContent>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          </div>
+        </div>
       </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.",
-      },
+};
+
+/**
+ * Interactive playground for testing carousel props.
+ */
+export const Interactive: Story = {
+  render: (args) => (
+    <div className="px-12">
+      <Carousel className="w-full max-w-xs" {...args}>
+        <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">
+                    <span className="text-4xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  ),
+  args: {
+    orientation: "horizontal",
+    opts: {
+      align: "start",
+      loop: false,
     },
   },
 };
+
+// Helper component for API control demonstration
+function CarouselWithIndicators() {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+
+  useState(() => {
+    if (!api) return;
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap());
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  });
+
+  return (
+    <div className="space-y-4 px-12">
+      <Carousel setApi={setApi} className="w-full max-w-sm">
+        <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">
+                    <span className="text-3xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+
+      {/* Custom Indicators */}
+      <div className="flex justify-center gap-2">
+        {Array.from({ length: count }).map((_, index) => (
+          <button
+            key={index}
+            className={`size-2 rounded-full transition-all ${
+              index === current
+                ? "bg-primary w-6"
+                : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
+            }`}
+            onClick={() => api?.scrollTo(index)}
+            aria-label={`Go to slide ${index + 1}`}
+          />
+        ))}
+      </div>
+
+      {/* Status Text */}
+      <p className="text-muted-foreground text-center text-sm">
+        Slide {current + 1} of {count}
+      </p>
+    </div>
+  );
+}