@neynar/ui 0.1.1

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

@@ -0,0 +1,266 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ArrowRight, Download, Plus, Settings, Trash2, ExternalLink } from "lucide-react";
+import { Button } from "../button";
+
+/**
+ * Button component stories for design system documentation
+ * 
+ * This story file demonstrates the Button component's capabilities through three focused stories:
+ * - Interactive: Playground for testing all props and variants
+ * - Variants: Systematic showcase of all available style and size combinations
+ * - InContext: Real-world usage examples for business and design teams
+ */
+const meta = {
+  title: "Form & Input/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A versatile button component built on Radix UI primitives with multiple variants, sizes, and composition support. Perfect for actions, navigation, and form submissions.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: [
+        "default",
+        "destructive",
+        "outline",
+        "secondary",
+        "ghost",
+        "link",
+      ],
+      description: "Visual style variant - each serves different interaction purposes",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["default", "sm", "lg", "icon"],
+      description: "Button size - affects height, padding, and typography scale",
+    },
+    asChild: {
+      control: { type: "boolean" },
+      description:
+        "Composition prop - renders child element instead of button (useful for links)",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disables the button and applies disabled styling",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Button content - can include text, icons, or other elements",
+    },
+    type: {
+      control: { type: "select" },
+      options: ["button", "submit", "reset"],
+      description: "HTML button type for form interactions",
+    },
+  },
+  args: {
+    onClick: () => console.log("Button clicked"),
+    children: "Button",
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive Playground Story
+ * 
+ * Use this story to test all button props and variants through Storybook controls.
+ * Perfect for designers and developers to experiment with different combinations.
+ */
+export const Interactive: Story = {
+  args: {
+    children: "Interactive Button",
+    variant: "default",
+    size: "default",
+    disabled: false,
+    asChild: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground for testing all button properties. Use the controls panel to experiment with different variants, sizes, and states. The onClick event logs to the Actions panel.",
+      },
+    },
+  },
+};
+
+/**
+ * Variants Showcase Story
+ * 
+ * Systematic display of all available button variants and sizes.
+ * Helps design teams understand the full range of available options.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Visual Variants */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Visual Variants</h3>
+        <div className="flex flex-wrap gap-3">
+          <Button variant="default">Default</Button>
+          <Button variant="destructive">Destructive</Button>
+          <Button variant="outline">Outline</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="ghost">Ghost</Button>
+          <Button variant="link">Link</Button>
+        </div>
+      </div>
+
+      {/* Size Variants */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Size Variants</h3>
+        <div className="flex items-center gap-3">
+          <Button size="sm">Small</Button>
+          <Button size="default">Default</Button>
+          <Button size="lg">Large</Button>
+          <Button size="icon" aria-label="Settings">
+            <Settings className="size-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Icon Integration */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Icon Integration</h3>
+        <div className="flex flex-wrap gap-3">
+          <Button>
+            <Download className="size-4" />
+            Download
+          </Button>
+          <Button variant="outline">
+            Continue
+            <ArrowRight className="size-4" />
+          </Button>
+          <Button size="icon" variant="ghost" aria-label="Add item">
+            <Plus className="size-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* States */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">States</h3>
+        <div className="flex flex-wrap gap-3">
+          <Button disabled>Disabled</Button>
+          <Button disabled variant="outline">
+            <div className="animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent mr-2" />
+            Loading...
+          </Button>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Complete showcase of all button variants, sizes, icon integrations, and states. Use this as a reference for what's available in the design system.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world Context Story
+ * 
+ * Demonstrates the button component in realistic UI scenarios.
+ * Helps business teams and designers understand practical usage patterns.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-8 max-w-md">
+      {/* Form Actions */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Form Actions</h3>
+        <div className="p-6 border rounded-lg space-y-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Email</label>
+            <input 
+              type="email" 
+              placeholder="Enter your email" 
+              className="w-full px-3 py-2 border rounded-md"
+            />
+          </div>
+          <div className="flex gap-2">
+            <Button type="submit" className="flex-1">
+              Sign Up
+            </Button>
+            <Button variant="outline" type="button">
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Action Bar */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Action Bar</h3>
+        <div className="flex items-center justify-between p-4 border rounded-lg">
+          <div>
+            <h4 className="font-medium">Delete Account</h4>
+            <p className="text-sm text-muted-foreground">This action cannot be undone.</p>
+          </div>
+          <Button variant="destructive" size="sm">
+            <Trash2 className="size-4" />
+            Delete
+          </Button>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Navigation & Links</h3>
+        <div className="space-y-3">
+          <div className="flex gap-2">
+            <Button variant="ghost" size="sm">
+              <Settings className="size-4" />
+              Settings
+            </Button>
+            <Button variant="ghost" size="sm">
+              Profile
+            </Button>
+          </div>
+          <Button variant="link" asChild>
+            <a href="https://example.com" target="_blank" rel="noopener noreferrer">
+              External Link
+              <ExternalLink className="size-4" />
+            </a>
+          </Button>
+        </div>
+      </div>
+
+      {/* Loading State */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Loading States</h3>
+        <div className="flex gap-2">
+          <Button disabled>
+            <div className="animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent" />
+            Processing...
+          </Button>
+          <Button variant="outline" disabled>
+            Saving...
+          </Button>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world usage examples showing how buttons work in common UI patterns like forms, action bars, navigation, and loading states. Use these patterns as inspiration for your own implementations.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,375 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import type { DateRange as DateRangeType } from "react-day-picker";
+import { Calendar } from "../calendar";
+
+const meta = {
+  title: "Form & Input/Calendar",
+  component: Calendar,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A comprehensive date selection calendar component built on react-day-picker. Supports single dates, date ranges, multiple dates, and flexible validation rules with full accessibility features.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    mode: {
+      control: { type: "select" },
+      options: ["single", "multiple", "range"],
+      description: "The selection mode of the calendar",
+    },
+    showOutsideDays: {
+      control: { type: "boolean" },
+      description: "Whether to show days outside the current month",
+    },
+    captionLayout: {
+      control: { type: "select" },
+      options: ["label", "dropdown-buttons", "dropdown"],
+      description: "Layout mode for the month/year caption",
+    },
+    buttonVariant: {
+      control: { type: "select" },
+      options: [
+        "default",
+        "destructive",
+        "outline",
+        "secondary",
+        "ghost",
+        "link",
+      ],
+      description: "Variant for the navigation buttons",
+    },
+    numberOfMonths: {
+      control: { type: "number", min: 1, max: 12 },
+      description: "Number of months to display simultaneously",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the calendar is disabled",
+    },
+    fromYear: {
+      control: { type: "number" },
+      description: "Earliest year for dropdown selection",
+    },
+    toYear: {
+      control: { type: "number" },
+      description: "Latest year for dropdown selection",
+    },
+  },
+  args: {
+    showOutsideDays: true,
+    captionLayout: "label",
+    buttonVariant: "ghost",
+    numberOfMonths: 1,
+  },
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all calendar features and configurations.
+ * Use the controls panel to experiment with different props and see real-time changes.
+ */
+export const Interactive: Story = {
+  render: (args) => {
+    const [date, setDate] = useState<Date | undefined>();
+    const [dateRange, setDateRange] = useState<DateRangeType | undefined>();
+    const [multipleDates, setMultipleDates] = useState<Date[] | undefined>([]);
+
+    // Handle different selection modes
+    const getSelected = () => {
+      switch (args.mode) {
+        case "range":
+          return dateRange;
+        case "multiple":
+          return multipleDates;
+        default:
+          return date;
+      }
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleSelect = (selected: any) => {
+      switch (args.mode) {
+        case "range":
+          setDateRange(selected);
+          break;
+        case "multiple":
+          setMultipleDates(selected);
+          break;
+        default:
+          setDate(selected);
+          break;
+      }
+    };
+
+    const getSelectedText = () => {
+      switch (args.mode) {
+        case "range":
+          if (dateRange?.from && dateRange?.to) {
+            return `${dateRange.from.toLocaleDateString()} - ${dateRange.to.toLocaleDateString()}`;
+          }
+          if (dateRange?.from) {
+            return `From: ${dateRange.from.toLocaleDateString()}`;
+          }
+          return "No range selected";
+        case "multiple":
+          return multipleDates?.length
+            ? `${multipleDates.length} dates selected: ${multipleDates
+                .slice(0, 3)
+                .map((d) => d.toLocaleDateString())
+                .join(", ")}${multipleDates.length > 3 ? "..." : ""}`
+            : "No dates selected";
+        default:
+          return date
+            ? `Selected: ${date.toLocaleDateString()}`
+            : "No date selected";
+      }
+    };
+
+    return (
+      <div className="space-y-4">
+        <Calendar
+          {...args}
+          // @ts-expect-error - selected is not typed correctly
+          selected={getSelected()}
+          onSelect={handleSelect}
+          className="rounded-md border"
+        />
+        <div className="text-sm text-muted-foreground max-w-md">
+          <strong>Current Selection:</strong> {getSelectedText()}
+        </div>
+      </div>
+    );
+  },
+  args: {
+    mode: "single",
+  },
+};
+
+/**
+ * Comprehensive showcase of all calendar variants and configurations.
+ * Demonstrates different selection modes, layouts, and styling options.
+ */
+export const Variants: Story = {
+  render: () => {
+    const [singleDate, setSingleDate] = useState<Date | undefined>(new Date());
+    const [dateRange, setDateRange] = useState<DateRangeType | undefined>();
+    const [multipleDates, setMultipleDates] = useState<Date[] | undefined>([]);
+
+    return (
+      <div className="space-y-8 max-w-6xl">
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Selection Modes</h3>
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium">Single Date</h4>
+              <Calendar
+                mode="single"
+                selected={singleDate}
+                onSelect={setSingleDate}
+                className="rounded-md border"
+              />
+            </div>
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium">Date Range</h4>
+              <Calendar
+                mode="range"
+                selected={dateRange}
+                onSelect={setDateRange}
+                className="rounded-md border"
+              />
+            </div>
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium">Multiple Dates</h4>
+              <Calendar
+                mode="multiple"
+                selected={multipleDates}
+                onSelect={setMultipleDates}
+                className="rounded-md border"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Caption Layouts</h3>
+          <div className="grid gap-6 md:grid-cols-2">
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium">Dropdown Navigation</h4>
+              <Calendar
+                mode="single"
+                captionLayout="dropdown"
+                fromYear={2020}
+                toYear={2030}
+                className="rounded-md border"
+              />
+            </div>
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium">Two Months</h4>
+              <Calendar
+                mode="range"
+                numberOfMonths={2}
+                className="rounded-md border"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Button Variants</h3>
+          <div className="grid gap-6 md:grid-cols-3">
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium">Outline Buttons</h4>
+              <Calendar
+                mode="single"
+                buttonVariant="outline"
+                className="rounded-md border"
+              />
+            </div>
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium">Secondary Buttons</h4>
+              <Calendar
+                mode="single"
+                buttonVariant="secondary"
+                className="rounded-md border"
+              />
+            </div>
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium">Default Buttons</h4>
+              <Calendar
+                mode="single"
+                buttonVariant="default"
+                className="rounded-md border"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Real-world usage example showing the calendar in a typical application context.
+ * Demonstrates integration with forms, validation, and user workflows.
+ */
+export const InContext: Story = {
+  render: () => {
+    const [checkIn, setCheckIn] = useState<Date | undefined>();
+    const [checkOut, setCheckOut] = useState<Date | undefined>();
+    const [eventDates, setEventDates] = useState<Date[] | undefined>([]);
+    const [birthdayDate, setBirthdayDate] = useState<Date | undefined>();
+
+    const today = new Date();
+    const maxCheckoutDate = new Date();
+    maxCheckoutDate.setMonth(today.getMonth() + 6);
+
+    return (
+      <div className="space-y-8 max-w-4xl">
+        <div className="rounded-lg border p-6 bg-card">
+          <h3 className="text-lg font-semibold mb-4">Hotel Booking System</h3>
+          <div className="grid gap-6 md:grid-cols-2">
+            <div className="space-y-3">
+              <label className="text-sm font-medium">Check-in Date</label>
+              <Calendar
+                mode="single"
+                selected={checkIn}
+                onSelect={setCheckIn}
+                disabled={(date) => date < today}
+                className="rounded-md border"
+              />
+              <p className="text-xs text-muted-foreground">
+                {checkIn
+                  ? `Check-in: ${checkIn.toLocaleDateString()}`
+                  : "Select check-in date"}
+              </p>
+            </div>
+            <div className="space-y-3">
+              <label className="text-sm font-medium">Check-out Date</label>
+              <Calendar
+                mode="single"
+                selected={checkOut}
+                onSelect={setCheckOut}
+                disabled={(date: Date) => {
+                  return Boolean(
+                    date < (checkIn || today) ||
+                      date > maxCheckoutDate ||
+                      (checkIn && date <= checkIn),
+                  );
+                }}
+                className="rounded-md border"
+              />
+              <p className="text-xs text-muted-foreground">
+                {checkOut
+                  ? `Check-out: ${checkOut.toLocaleDateString()}`
+                  : "Select check-out date"}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-lg border p-6 bg-card">
+          <h3 className="text-lg font-semibold mb-4">
+            Event Planning Dashboard
+          </h3>
+          <div className="grid gap-6 md:grid-cols-2">
+            <div className="space-y-3">
+              <label className="text-sm font-medium">Meeting Dates</label>
+              <Calendar
+                mode="multiple"
+                selected={eventDates}
+                onSelect={setEventDates}
+                disabled={(date) =>
+                  date < today || date.getDay() === 0 || date.getDay() === 6
+                }
+                className="rounded-md border"
+              />
+              <p className="text-xs text-muted-foreground">
+                {eventDates?.length
+                  ? `${eventDates.length} meeting dates selected`
+                  : "Select weekdays for meetings"}
+              </p>
+            </div>
+            <div className="space-y-3">
+              <label className="text-sm font-medium">
+                Team Member Birthday
+              </label>
+              <Calendar
+                mode="single"
+                selected={birthdayDate}
+                onSelect={setBirthdayDate}
+                captionLayout="dropdown"
+                fromYear={1950}
+                toYear={new Date().getFullYear()}
+                className="rounded-md border"
+              />
+              <p className="text-xs text-muted-foreground">
+                {birthdayDate
+                  ? `Birthday: ${birthdayDate.toLocaleDateString()}`
+                  : "Select birthday date"}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-lg border p-6 bg-card">
+          <h3 className="text-lg font-semibold mb-4">Features Demonstrated</h3>
+          <ul className="text-sm text-muted-foreground space-y-1">
+            <li>• Date validation and restrictions</li>
+            <li>• Weekend/business day filtering</li>
+            <li>• Multiple selection modes</li>
+            <li>• Dropdown navigation for large date ranges</li>
+            <li>• Real-time feedback and state management</li>
+            <li>• Accessible form integration</li>
+          </ul>
+        </div>
+      </div>
+    );
+  },
+};