@neynar/ui 0.1.1

package/src/components/ui/stories/date-picker.stories.tsx

@@ -0,0 +1,378 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { DatePicker } from "../date-picker";
+import { Button } from "../button";
+import { cn } from "@/lib/utils";
+
+const meta = {
+  title: "Form & Input/DatePicker",
+  component: DatePicker,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A comprehensive date selection component that combines an accessible button trigger with a full-featured calendar popover. Built on shadcn/ui design principles with proper accessibility, keyboard navigation, and visual feedback.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    date: {
+      control: { type: "date" },
+      description: "The currently selected date value. When undefined, no date is selected.",
+    },
+    onDateChange: {
+      action: "onDateChange",
+      description: "Callback function invoked when the user selects or clears a date.",
+    },
+    placeholder: {
+      control: { type: "text" },
+      description: "Placeholder text displayed when no date is selected.",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "When true, disables the date picker preventing user interaction.",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply to the trigger button.",
+    },
+  },
+  args: {
+    placeholder: "Pick a date",
+    disabled: false,
+  },
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all DatePicker props and behaviors.
+ * Use the controls panel to experiment with different configurations.
+ */
+export const Interactive: Story = {
+  render: (args) => {
+    const [date, setDate] = useState<Date | undefined>(args.date);
+    
+    const handleClearDate = () => setDate(undefined);
+    const handleSetToday = () => setDate(new Date());
+    const handleSetRandomDate = () => {
+      const randomDate = new Date();
+      randomDate.setDate(randomDate.getDate() + Math.floor(Math.random() * 365) - 180);
+      setDate(randomDate);
+    };
+    
+    return (
+      <div className="space-y-4">
+        <DatePicker
+          {...args}
+          date={date}
+          onDateChange={setDate}
+        />
+        
+        <div className="flex gap-2 flex-wrap">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleSetToday}
+          >
+            Set Today
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleSetRandomDate}
+          >
+            Random Date
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleClearDate}
+          >
+            Clear
+          </Button>
+        </div>
+        
+        <div className="text-sm text-muted-foreground space-y-1">
+          <div><strong>Selected:</strong> {date?.toDateString() || "No date selected"}</div>
+          <div><strong>ISO String:</strong> {date?.toISOString() || "N/A"}</div>
+          <div><strong>Locale String:</strong> {date?.toLocaleDateString() || "N/A"}</div>
+        </div>
+      </div>
+    );
+  },
+  args: {
+    placeholder: "Choose a date",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive example with controls for testing all component props and helper buttons for common operations. Use the controls panel to modify props in real-time.",
+      },
+    },
+  },
+};
+
+/**
+ * Comprehensive showcase of all DatePicker variants and configurations.
+ * Displays different states, sizes, and styling options side by side.
+ */
+export const Variants: Story = {
+  render: () => {
+    const [basicDate, setBasicDate] = useState<Date | undefined>();
+    const [preselectedDate, setPreselectedDate] = useState<Date | undefined>(new Date());
+    const [customDate, setCustomDate] = useState<Date | undefined>();
+    
+    return (
+      <div className="space-y-6">
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold">Basic States</h3>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Default (no date selected)</label>
+              <DatePicker
+                date={basicDate}
+                onDateChange={setBasicDate}
+                placeholder="Pick a date"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <label className="text-sm font-medium">With preselected date</label>
+              <DatePicker
+                date={preselectedDate}
+                onDateChange={setPreselectedDate}
+                placeholder="Pick a date"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Disabled state</label>
+              <DatePicker
+                date={new Date()}
+                disabled={true}
+                placeholder="Date picker disabled"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Custom placeholder</label>
+              <DatePicker
+                date={customDate}
+                onDateChange={setCustomDate}
+                placeholder="Select your birthday"
+              />
+            </div>
+          </div>
+        </div>
+        
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold">Width Variants</h3>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Default width (240px)</label>
+              <DatePicker placeholder="Default width" />
+            </div>
+            
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Custom width (300px)</label>
+              <DatePicker
+                placeholder="Custom width"
+                className="w-[300px]"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Compact width (180px)</label>
+              <DatePicker
+                placeholder="Compact"
+                className="w-[180px]"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Full width</label>
+              <DatePicker
+                placeholder="Full width date picker"
+                className="w-full"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Comprehensive display of all DatePicker variants including different states (default, preselected, disabled), custom placeholders, and width configurations.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage examples showing DatePicker in typical application contexts.
+ * Demonstrates common patterns like date ranges, form integration, and validation.
+ */
+export const InContext: Story = {
+  render: () => {
+    const [startDate, setStartDate] = useState<Date | undefined>();
+    const [endDate, setEndDate] = useState<Date | undefined>();
+    const [birthDate, setBirthDate] = useState<Date | undefined>();
+    const [appointmentDate, setAppointmentDate] = useState<Date | undefined>();
+    
+    // Validation for birth date (must be in the past)
+    const today = new Date();
+    const isBirthDateInFuture = birthDate && birthDate > today;
+    
+    // Validation for appointment (must be in the future)
+    const isAppointmentInPast = appointmentDate && appointmentDate < today;
+    
+    return (
+      <div className="max-w-2xl space-y-8">
+        {/* Date Range Selection */}
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold">Event Date Range</h3>
+          <p className="text-sm text-muted-foreground">
+            Select start and end dates for your event or booking.
+          </p>
+          <div className="flex gap-3 items-center flex-wrap">
+            <DatePicker
+              date={startDate}
+              onDateChange={setStartDate}
+              placeholder="Start date"
+              className="w-[180px]"
+            />
+            <span className="text-muted-foreground">to</span>
+            <DatePicker
+              date={endDate}
+              onDateChange={setEndDate}
+              placeholder="End date"
+              className="w-[180px]"
+            />
+          </div>
+          {startDate && endDate && (
+            <div className="text-sm text-muted-foreground bg-muted p-3 rounded-md">
+              <strong>Duration:</strong> {Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24))} days
+            </div>
+          )}
+        </div>
+        
+        {/* Form with Validation */}
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold">Profile Information</h3>
+          <p className="text-sm text-muted-foreground">
+            Date picker with validation in a form context.
+          </p>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Birth Date</label>
+              <DatePicker
+                date={birthDate}
+                onDateChange={setBirthDate}
+                placeholder="Select your birth date"
+                className={cn(
+                  "w-full",
+                  isBirthDateInFuture && "border-destructive"
+                )}
+              />
+              {isBirthDateInFuture && (
+                <p className="text-sm text-destructive">
+                  Birth date cannot be in the future.
+                </p>
+              )}
+            </div>
+            
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Appointment Date</label>
+              <DatePicker
+                date={appointmentDate}
+                onDateChange={setAppointmentDate}
+                placeholder="Schedule your appointment"
+                className={cn(
+                  "w-full",
+                  isAppointmentInPast && "border-destructive"
+                )}
+              />
+              {isAppointmentInPast && (
+                <p className="text-sm text-destructive">
+                  Appointment must be scheduled for a future date.
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+        
+        {/* Dashboard Context */}
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold">Analytics Dashboard</h3>
+          <p className="text-sm text-muted-foreground">
+            Date pickers in a dashboard context with preset actions.
+          </p>
+          <div className="border rounded-lg p-4 space-y-4">
+            <div className="flex gap-3 items-center flex-wrap">
+              <DatePicker
+                date={startDate}
+                onDateChange={setStartDate}
+                placeholder="From"
+                className="w-[140px]"
+              />
+              <DatePicker
+                date={endDate}
+                onDateChange={setEndDate}
+                placeholder="To"
+                className="w-[140px]"
+              />
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    const today = new Date();
+                    const lastWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+                    setStartDate(lastWeek);
+                    setEndDate(today);
+                  }}
+                >
+                  Last 7 days
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    const today = new Date();
+                    const lastMonth = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
+                    setStartDate(lastMonth);
+                    setEndDate(today);
+                  }}
+                >
+                  Last 30 days
+                </Button>
+              </div>
+            </div>
+            
+            <div className="bg-muted/50 p-3 rounded text-sm">
+              <strong>Selected Period:</strong>{" "}
+              {startDate && endDate 
+                ? `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`
+                : "No date range selected"
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story: "Real-world examples showing DatePicker in common application scenarios: date ranges for events, form validation, and dashboard analytics with preset date ranges.",
+      },
+    },
+  },
+};