@neynar/ui 0.1.1

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

@@ -0,0 +1,228 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "../alert";
+import { Button } from "../button";
+
+const meta = {
+  title: "Data Display/Alert",
+  component: Alert,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A flexible alert component for displaying important messages, notifications, and status updates. Supports two built-in variants with icon-aware CSS Grid layout and semantic ARIA attributes.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "destructive"],
+      description: "Visual style variant determining colors and emphasis",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to merge with default styles",
+    },
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing Alert component with all available props and variants.
+ * Use the controls below to experiment with different configurations.
+ */
+export const Interactive: Story = {
+  args: {
+    variant: "default",
+    className: "w-96",
+  },
+  render: (args) => (
+    <Alert {...args}>
+      <Info className="size-4" />
+      <AlertTitle>Alert Title</AlertTitle>
+      <AlertDescription>
+        This is an interactive alert where you can test different variants and styling options using the controls below.
+      </AlertDescription>
+    </Alert>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground showing the Alert component with all configurable props. Use the controls panel to experiment with different variants and styling options.",
+      },
+    },
+  },
+};
+
+/**
+ * Comprehensive showcase of all alert variants and styling patterns.
+ * Demonstrates built-in variants, custom styling, and composition patterns.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-4 w-full max-w-2xl">
+      {/* Built-in variants */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">Built-in Variants</h3>
+        <Alert>
+          <Info className="size-4" />
+          <AlertTitle>Default Alert</AlertTitle>
+          <AlertDescription>
+            Default variant with subtle styling for general information.
+          </AlertDescription>
+        </Alert>
+
+        <Alert variant="destructive">
+          <AlertCircle className="size-4" />
+          <AlertTitle>Destructive Alert</AlertTitle>
+          <AlertDescription>
+            Destructive variant for errors and critical warnings.
+          </AlertDescription>
+        </Alert>
+      </div>
+
+      {/* Custom styled variants */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">Custom Styled Variants</h3>
+        <Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200">
+          <CheckCircle className="size-4" />
+          <AlertTitle>Success Alert</AlertTitle>
+          <AlertDescription>
+            Custom success styling with green color scheme.
+          </AlertDescription>
+        </Alert>
+
+        <Alert className="border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-200">
+          <AlertTriangle className="size-4" />
+          <AlertTitle>Warning Alert</AlertTitle>
+          <AlertDescription>
+            Custom warning styling with yellow color scheme.
+          </AlertDescription>
+        </Alert>
+      </div>
+
+      {/* Composition patterns */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">Composition Patterns</h3>
+        <Alert>
+          <Info className="size-4" />
+          <AlertDescription>
+            Alert with description only, no title.
+          </AlertDescription>
+        </Alert>
+
+        <Alert>
+          <AlertTitle>Title Only Alert</AlertTitle>
+        </Alert>
+
+        <Alert>
+          <AlertTitle>No Icon Alert</AlertTitle>
+          <AlertDescription>
+            Alert without icon showing CSS Grid adaptation.
+          </AlertDescription>
+        </Alert>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Comprehensive showcase of all alert variants including built-in variants (default, destructive), custom styled variants (success, warning), and different composition patterns (title-only, description-only, no-icon).",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world context showing alerts in typical application scenarios.
+ * Demonstrates practical usage patterns for designers and business teams.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-6 w-full max-w-2xl">
+      {/* Form validation context */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">Form Validation</h3>
+        <Alert variant="destructive">
+          <AlertCircle className="size-4" />
+          <AlertTitle>Validation Error</AlertTitle>
+          <AlertDescription>
+            Please correct the following errors before submitting:
+            <ul className="list-disc list-inside mt-2 space-y-1">
+              <li>Email address is required</li>
+              <li>Password must be at least 8 characters</li>
+            </ul>
+          </AlertDescription>
+        </Alert>
+      </div>
+
+      {/* System notifications */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">System Notifications</h3>
+        <Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200">
+          <CheckCircle className="size-4" />
+          <AlertTitle>Changes Saved</AlertTitle>
+          <AlertDescription>
+            Your profile has been updated successfully. Changes may take a few minutes to appear across all devices.
+          </AlertDescription>
+        </Alert>
+      </div>
+
+      {/* Interactive alerts with actions */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">Interactive Alerts</h3>
+        <Alert className="relative">
+          <Info className="size-4" />
+          <AlertTitle>Software Update Available</AlertTitle>
+          <AlertDescription className="mb-4">
+            Version 2.1.0 is now available with improved performance and new features.
+          </AlertDescription>
+          <div className="flex gap-2">
+            <Button size="sm">Update Now</Button>
+            <Button size="sm" variant="outline">
+              Remind Me Later
+            </Button>
+          </div>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="absolute top-2 right-2 size-6"
+            onClick={() => console.log("Alert dismissed")}
+          >
+            <X className="size-3" />
+            <span className="sr-only">Dismiss</span>
+          </Button>
+        </Alert>
+      </div>
+
+      {/* Maintenance notice */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">Maintenance Notice</h3>
+        <Alert className="border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-200">
+          <AlertTriangle className="size-4" />
+          <AlertTitle>Scheduled Maintenance</AlertTitle>
+          <AlertDescription>
+            We will be performing scheduled maintenance on Sunday, December 15th from 2:00 AM to 4:00 AM EST. 
+            Some services may be temporarily unavailable during this time. We apologize for any inconvenience.
+          </AlertDescription>
+        </Alert>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world application scenarios showing alerts in typical UI contexts: form validation errors, system notifications, interactive alerts with actions, and maintenance notices. This demonstrates practical usage patterns for designers and business teams.",
+      },
+    },
+  },
+};

package/src/components/ui/stories/aspect-ratio.stories.tsx

@@ -0,0 +1,200 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AspectRatio } from "../aspect-ratio";
+
+const meta = {
+  title: "Layout and Structure/AspectRatio",
+  component: AspectRatio,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A layout component that maintains consistent aspect ratios for responsive media content. Built with Radix UI primitives and zero JavaScript overhead.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ratio: {
+      control: { type: "number", min: 0.1, max: 5, step: 0.1 },
+      description: "The desired aspect ratio (width / height)",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+  args: {
+    ratio: 16 / 9,
+  },
+} satisfies Meta<typeof AspectRatio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground to test all AspectRatio props and configurations.
+ * Use the controls panel to experiment with different aspect ratios and styling.
+ */
+export const Interactive: Story = {
+  render: (args) => (
+    <div className="w-[450px]">
+      <AspectRatio {...args}>
+        <img
+          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+          alt="Photo by Drew Beamer"
+          className="rounded-md object-cover w-full h-full"
+        />
+      </AspectRatio>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use the controls to experiment with different aspect ratios. Common ratios include 16:9 (1.78), 4:3 (1.33), 3:2 (1.5), and 1:1 (square).",
+      },
+    },
+  },
+};
+
+/**
+ * Showcase of common aspect ratio variants used in modern web design.
+ * Demonstrates square, portrait, landscape, and widescreen orientations.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6 w-[800px]">
+      <div>
+        <h4 className="text-sm font-medium mb-2">Square (1:1)</h4>
+        <AspectRatio ratio={1}>
+          <div className="bg-gradient-to-br from-blue-400 to-purple-600 rounded-md flex items-center justify-center text-white font-medium w-full h-full">
+            Profile Images
+          </div>
+        </AspectRatio>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium mb-2">Portrait (3:4)</h4>
+        <AspectRatio ratio={3 / 4}>
+          <div className="bg-gradient-to-br from-green-400 to-blue-600 rounded-md flex items-center justify-center text-white font-medium w-full h-full">
+            Mobile Photos
+          </div>
+        </AspectRatio>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium mb-2">Landscape (16:9)</h4>
+        <AspectRatio ratio={16 / 9}>
+          <div className="bg-gradient-to-br from-orange-400 to-red-600 rounded-md flex items-center justify-center text-white font-medium w-full h-full">
+            Video Content
+          </div>
+        </AspectRatio>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium mb-2">Widescreen (21:9)</h4>
+        <AspectRatio ratio={21 / 9}>
+          <div className="bg-gradient-to-br from-purple-400 to-pink-600 rounded-md flex items-center justify-center text-white font-medium w-full h-full">
+            Cinematic Content
+          </div>
+        </AspectRatio>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Common aspect ratios: Square (1:1) for avatars, Portrait (3:4) for mobile photos, Landscape (16:9) for videos, and Widescreen (21:9) for cinematic content.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage example showing AspectRatio in a responsive image gallery
+ * context that designers and business teams would encounter in production.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="max-w-4xl space-y-6">
+      {/* Hero Section */}
+      <div>
+        <h3 className="text-lg font-semibold mb-3">Featured Article</h3>
+        <div className="w-full max-w-2xl">
+          <AspectRatio ratio={16 / 9}>
+            <img
+              src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&dpr=2&q=80"
+              alt="Mountain landscape hero image"
+              className="rounded-lg object-cover w-full h-full"
+            />
+          </AspectRatio>
+        </div>
+      </div>
+
+      {/* Image Gallery Grid */}
+      <div>
+        <h3 className="text-lg font-semibold mb-3">Related Images</h3>
+        <div className="grid grid-cols-3 gap-4">
+          {[
+            {
+              src: "https://images.unsplash.com/photo-1576075796033-848c2a5a3e3b?w=400&dpr=2&q=80",
+              alt: "Portrait photo",
+            },
+            {
+              src: "https://images.unsplash.com/photo-1492693429561-11c25e90df39?w=400&dpr=2&q=80",
+              alt: "Architecture photo",
+            },
+            {
+              src: "https://images.unsplash.com/photo-1516681100942-77d8e7f9dd97?w=400&dpr=2&q=80",
+              alt: "Urban landscape",
+            },
+          ].map((image, index) => (
+            <AspectRatio key={index} ratio={4 / 3}>
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="rounded-md object-cover w-full h-full hover:scale-105 transition-transform duration-200"
+              />
+            </AspectRatio>
+          ))}
+        </div>
+      </div>
+
+      {/* Video Player Section */}
+      <div>
+        <h3 className="text-lg font-semibold mb-3">Video Content</h3>
+        <div className="w-full max-w-xl">
+          <AspectRatio ratio={16 / 9}>
+            <div className="flex items-center justify-center bg-muted rounded-lg w-full h-full border">
+              <div className="text-center">
+                <div className="size-16 mx-auto mb-4 bg-primary rounded-full flex items-center justify-center">
+                  <svg
+                    className="size-6 text-primary-foreground"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M8 5v14l11-7z" />
+                  </svg>
+                </div>
+                <p className="text-sm font-medium">Video Player</p>
+                <p className="text-xs text-muted-foreground">
+                  16:9 Aspect Ratio
+                </p>
+              </div>
+            </div>
+          </AspectRatio>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Real-world example showing AspectRatio in a content layout with hero image, image gallery, and video player - maintaining consistent proportions across different media types.",
+      },
+    },
+  },
+};