@neynar/ui 0.1.1

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

@@ -0,0 +1,519 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  AlertTriangle,
+  Trash2,
+  LogOut,
+  Download,
+  Settings,
+  FileText,
+} from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../alert-dialog";
+import { Button } from "../button";
+
+const meta = {
+  title: "Overlays/AlertDialog",
+  component: AlertDialog,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A specialized modal dialog for critical confirmations and destructive actions. Unlike regular dialogs, alert dialogs cannot be dismissed by clicking outside and focus the action button by default. Built with Radix UI Alert Dialog primitives and styled with Tailwind CSS.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all AlertDialog features
+ *
+ * This story provides controls for testing different configurations and
+ * interaction patterns with the AlertDialog component.
+ */
+export const Interactive: Story = {
+  render: () => (
+    <div className="flex gap-4 flex-wrap">
+      {/* Basic confirmation */}
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline">Basic Dialog</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete your
+              account and remove your data from our servers.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => console.log("Dialog cancelled")}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={() => console.log("Dialog confirmed")}>
+              Continue
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Destructive action */}
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="destructive">
+            <Trash2 className="size-4" />
+            Delete
+          </Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-5 text-red-500" />
+              Delete Account
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete your
+              account, remove your data from our servers, and cancel any active
+              subscriptions.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction className="bg-red-600 hover:bg-red-700 focus:ring-red-600">
+              Delete Account
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Simple confirmation */}
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline">
+            <LogOut className="size-4" />
+            Sign Out
+          </Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Sign Out</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to sign out of your account?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Sign Out</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive examples showing common AlertDialog patterns. Check the Actions panel to see onClick events for the basic dialog.",
+      },
+    },
+  },
+};
+
+/**
+ * Showcase of different AlertDialog variants and styling options
+ *
+ * Demonstrates various visual treatments and content patterns for different
+ * use cases including destructive actions, confirmations, and custom styling.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {/* Standard confirmation */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Standard Confirmation</h3>
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Show Dialog
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Confirm Action</AlertDialogTitle>
+              <AlertDialogDescription>
+                Are you sure you want to proceed with this action?
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction>Continue</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+
+      {/* Destructive action */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Destructive Action</h3>
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button variant="destructive" className="w-full">
+              <Trash2 className="size-4" />
+              Delete
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle className="flex items-center gap-2">
+                <AlertTriangle className="size-5 text-red-500" />
+                Delete Item
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                This action cannot be undone. The item will be permanently
+                removed.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction className="bg-red-600 hover:bg-red-700">
+                Delete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+
+      {/* Without description */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Title Only</h3>
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Quick Confirm
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Quick Confirmation</AlertDialogTitle>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction>Confirm</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+
+      {/* Custom button styling */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Custom Styling</h3>
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Save Changes
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Save Changes?</AlertDialogTitle>
+              <AlertDialogDescription>
+                You have unsaved changes. Save before leaving?
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Don&apos;t Save</AlertDialogCancel>
+              <AlertDialogAction className="bg-blue-600 hover:bg-blue-700">
+                Save Changes
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+
+      {/* Long content */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Detailed Explanation</h3>
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              <Settings className="size-4" />
+              Reset Settings
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Reset All Settings</AlertDialogTitle>
+              <AlertDialogDescription>
+                This will reset all application settings to defaults including:
+                • Theme preferences • Notification settings • Privacy
+                preferences • Display options Your data will not be affected.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction>Reset Settings</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+
+      {/* Information/Download */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Information Action</h3>
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button className="w-full">
+              <Download className="size-4" />
+              Download
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Download Your Data</AlertDialogTitle>
+              <AlertDialogDescription>
+                This will prepare a ZIP file with all your data. You&apos;ll
+                receive an email when it&apos;s ready.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction>Start Download</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Collection of AlertDialog variants showing different styling patterns, content lengths, and use cases for various scenarios.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage example in a realistic application context
+ *
+ * Shows how AlertDialog integrates within a typical application interface
+ * with realistic content and multiple interaction points.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="max-w-2xl mx-auto p-6 space-y-6">
+      {/* Simulated application header */}
+      <div className="border-b pb-4">
+        <h1 className="text-2xl font-bold">Account Settings</h1>
+        <p className="text-muted-foreground">
+          Manage your account preferences and data
+        </p>
+      </div>
+
+      {/* Simulated settings sections */}
+      <div className="space-y-6">
+        {/* Profile section */}
+        <div className="border rounded-lg p-4">
+          <h2 className="text-lg font-semibold mb-3">Profile Information</h2>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium">Export Account Data</p>
+                <p className="text-sm text-muted-foreground">
+                  Download all your account information
+                </p>
+              </div>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button variant="outline">
+                    <Download className="size-4" />
+                    Export Data
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Export Account Data</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      We&apos;ll prepare a comprehensive export of your account
+                      data including profile information, preferences, and
+                      activity history. This may take a few minutes to process.
+                      You&apos;ll receive an email notification when your export
+                      is ready for download.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction>Start Export</AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+          </div>
+        </div>
+
+        {/* Danger zone */}
+        <div className="bg-card text-card-foreground border border-destructive/20 rounded-lg p-4">
+          <h2 className="text-lg font-semibold mb-3 text-destructive">
+            Danger Zone
+          </h2>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium text-destructive">
+                  Reset All Settings
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Return all preferences to default values
+                </p>
+              </div>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    variant="outline"
+                    className="border-destructive/30 text-destructive hover:bg-destructive/10"
+                  >
+                    <Settings className="size-4" />
+                    Reset Settings
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Reset All Settings</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This will reset all your application settings to their
+                      default values, including: • Theme and display preferences
+                      • Notification settings • Privacy and security preferences
+                      • Language and region settings Your account data, saved
+                      content, and personal information will not be affected.
+                      You can reconfigure these settings at any time.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Keep Current Settings</AlertDialogCancel>
+                    <AlertDialogAction className="bg-orange-600 hover:bg-orange-700">
+                      Reset All Settings
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+
+            <div className="flex items-center justify-between pt-4 border-t border-border">
+              <div>
+                <p className="font-medium text-destructive">Delete Account</p>
+                <p className="text-sm text-muted-foreground">
+                  Permanently delete your account and all data
+                </p>
+              </div>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button variant="destructive">
+                    <Trash2 className="size-4" />
+                    Delete Account
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle className="flex items-center gap-2">
+                      <AlertTriangle className="size-5 text-red-500" />
+                      Delete Account Permanently
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This action cannot be undone. This will permanently delete
+                      your account, remove all your data from our servers, and
+                      cancel any active subscriptions. All of your projects,
+                      files, and account information will be permanently lost.
+                      If you&apos;re sure you want to proceed, type
+                      &quot;DELETE&quot; in the confirmation field that will
+                      appear.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Keep My Account</AlertDialogCancel>
+                    <AlertDialogAction className="bg-red-600 hover:bg-red-700 focus:ring-red-600">
+                      Yes, Delete My Account
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+          </div>
+        </div>
+
+        {/* Quick actions */}
+        <div className="border rounded-lg p-4">
+          <h2 className="text-lg font-semibold mb-3">Quick Actions</h2>
+          <div className="flex gap-3 flex-wrap">
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button variant="outline">
+                  <LogOut className="size-4" />
+                  Sign Out
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Sign Out</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    Are you sure you want to sign out of your account?
+                    You&apos;ll need to sign in again to access your data.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Stay Signed In</AlertDialogCancel>
+                  <AlertDialogAction>Sign Out</AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button variant="outline">
+                  <FileText className="size-4" />
+                  Clear Cache
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Clear Application Cache</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    This will clear all cached data and temporary files. You may
+                    need to reload some content, but this can help resolve
+                    performance issues.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction>Clear Cache</AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Realistic application context showing AlertDialog integration within a settings page. Demonstrates proper usage patterns for different types of confirmations including data exports, settings resets, account deletion, and quick actions.",
+      },
+    },
+  },
+};