@neynar/ui 0.1.1

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

@@ -0,0 +1,535 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Copy, Share2, Mail, MessageSquare } from "lucide-react";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../dialog";
+import { Button } from "../button";
+import { Input } from "../input";
+import { Label } from "../label";
+import { Textarea } from "../textarea";
+
+const meta = {
+  title: "Overlays/Dialog",
+  component: Dialog,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A modal dialog component built on Radix UI Dialog. Displays content in a layer above the main content, with customizable animations and focus management. Used for critical interactions, confirmations, or detailed information that requires focus.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    // Dialog root props
+    open: {
+      control: "boolean",
+      description: "The controlled open state of the dialog",
+    },
+    onOpenChange: {
+      action: "onOpenChange",
+      description: "Event handler called when the open state changes",
+    },
+    modal: {
+      control: "boolean",
+      description: "The modality of the dialog",
+      defaultValue: true,
+    },
+    // DialogContent props for Interactive story
+  },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground story with all dialog props and controls
+ * Allows testing all dialog features and customization options
+ */
+export const Interactive: Story = {
+  render: ({ modal, ...args }) => {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <Dialog open={open} onOpenChange={setOpen} modal={modal} {...args}>
+        <DialogTrigger asChild>
+          <Button>Open Interactive Dialog</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Interactive Dialog</DialogTitle>
+            <DialogDescription>
+              This dialog showcases all available customization options. Use the
+              controls panel to modify its behavior and appearance.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="example-input">Example Input</Label>
+              <Input id="example-input" placeholder="Try typing here..." />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="example-textarea">Example Textarea</Label>
+              <Textarea
+                id="example-textarea"
+                placeholder="Enter some text..."
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button onClick={() => setOpen(false)}>Save Changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+  args: {
+    modal: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground allowing you to test all dialog props and customization options. Use the controls to modify behavior and see real-time changes.",
+      },
+    },
+  },
+};
+
+/**
+ * Showcase of all dialog variants and common patterns
+ * Displays multiple dialog types side by side for comparison
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {/* Basic Confirmation Dialog */}
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="outline" className="w-full">
+            Basic Confirmation
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently delete your
+              account and remove your data from our servers.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button variant="destructive">Delete Account</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Form Dialog */}
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button className="w-full">Form Dialog</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Edit Profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you&apos;re
+              done.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="username">Username</Label>
+              <Input id="username" defaultValue="@peduarte" />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit">Save Changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Custom Close Button */}
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="secondary" className="w-full">
+            Custom Close
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-md" showCloseButton={false}>
+          <DialogHeader>
+            <DialogTitle>Share Link</DialogTitle>
+            <DialogDescription>
+              Anyone who has this link will be able to view this.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex items-center space-x-2">
+            <Input
+              defaultValue="https://ui.shadcn.com/docs/installation"
+              readOnly
+            />
+            <Button size="sm" className="px-3">
+              <Copy className="h-4 w-4" />
+            </Button>
+          </div>
+          <DialogFooter className="sm:justify-start">
+            <DialogClose asChild>
+              <Button variant="secondary">Close</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Long Content Dialog */}
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="outline" className="w-full">
+            Long Content
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Terms of Service</DialogTitle>
+            <DialogDescription>Last updated: January 1, 2024</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 text-sm">
+            <p>
+              Welcome to our service. By using our service, you agree to these
+              terms.
+            </p>
+            <h3 className="font-medium">1. Terms</h3>
+            <p>
+              By accessing this website, you are agreeing to be bound by these
+              terms.
+            </p>
+            <h3 className="font-medium">2. Use License</h3>
+            <p>
+              Permission is granted for personal, non-commercial viewing only.
+            </p>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Decline</Button>
+            </DialogClose>
+            <Button>Accept</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Controlled Dialog */}
+      <ControlledDialogVariant />
+
+      {/* Custom Styled Dialog */}
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="outline" className="w-full">
+            Custom Styled
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="bg-gradient-to-br from-primary/5 to-primary/10 border-primary/20">
+          <DialogHeader>
+            <DialogTitle className="text-primary">Custom Styling</DialogTitle>
+            <DialogDescription>
+              This dialog demonstrates custom styling with gradients.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <p className="text-center text-sm">
+              Customize appearance using className props.
+            </p>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Close</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Comprehensive showcase of all dialog variants and common patterns. Demonstrates different use cases including confirmation dialogs, forms, custom close buttons, long content handling, controlled state, and custom styling.",
+      },
+    },
+  },
+};
+
+/**
+ * Helper component for controlled dialog variant
+ */
+function ControlledDialogVariant() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div className="space-y-2">
+      <Button
+        variant="outline"
+        className="w-full"
+        onClick={() => setOpen(true)}
+      >
+        Controlled Dialog
+      </Button>
+      <p className="text-xs text-muted-foreground text-center">
+        State: {open ? "open" : "closed"}
+      </p>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Controlled Dialog</DialogTitle>
+            <DialogDescription>
+              This dialog&apos;s state is controlled externally.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button onClick={() => setOpen(false)}>Close</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+/**
+ * Real-world context showing dialog in a typical application scenario
+ * Demonstrates practical usage for designers and business teams
+ */
+export const InContext: Story = {
+  render: () => {
+    const [contactOpen, setContactOpen] = React.useState(false);
+    const [deleteOpen, setDeleteOpen] = React.useState(false);
+    const [shareOpen, setShareOpen] = React.useState(false);
+
+    return (
+      <div className="max-w-4xl mx-auto p-6 space-y-8">
+        {/* Application Header */}
+        <div className="border-b pb-4">
+          <h1 className="text-2xl font-bold">Dashboard</h1>
+          <p className="text-muted-foreground">
+            Manage your account and settings
+          </p>
+        </div>
+
+        {/* Action Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {/* Contact Support Card */}
+          <div className="border rounded-lg p-6 space-y-4">
+            <div className="flex items-center gap-3">
+              <Mail className="h-5 w-5 text-blue-500" />
+              <h3 className="font-semibold">Contact Support</h3>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Need help? Our support team is here to assist you with any
+              questions.
+            </p>
+            <Dialog open={contactOpen} onOpenChange={setContactOpen}>
+              <DialogTrigger asChild>
+                <Button className="w-full">
+                  <Mail className="mr-2 h-4 w-4" />
+                  Contact Us
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="sm:max-w-[525px]">
+                <DialogHeader>
+                  <DialogTitle>Contact Support</DialogTitle>
+                  <DialogDescription>
+                    Send us a message and we&apos;ll get back to you as soon as
+                    possible.
+                  </DialogDescription>
+                </DialogHeader>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    setContactOpen(false);
+                  }}
+                >
+                  <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                      <Label htmlFor="email">Email</Label>
+                      <Input
+                        id="email"
+                        type="email"
+                        placeholder="you@example.com"
+                        required
+                      />
+                    </div>
+                    <div className="grid gap-2">
+                      <Label htmlFor="subject">Subject</Label>
+                      <Input
+                        id="subject"
+                        placeholder="How can we help?"
+                        required
+                      />
+                    </div>
+                    <div className="grid gap-2">
+                      <Label htmlFor="message">Message</Label>
+                      <Textarea
+                        id="message"
+                        placeholder="Tell us more..."
+                        rows={4}
+                        required
+                      />
+                    </div>
+                  </div>
+                  <DialogFooter>
+                    <DialogClose asChild>
+                      <Button type="button" variant="outline">
+                        Cancel
+                      </Button>
+                    </DialogClose>
+                    <Button type="submit">Send Message</Button>
+                  </DialogFooter>
+                </form>
+              </DialogContent>
+            </Dialog>
+          </div>
+
+          {/* Share Profile Card */}
+          <div className="border rounded-lg p-6 space-y-4">
+            <div className="flex items-center gap-3">
+              <Share2 className="h-5 w-5 text-green-500" />
+              <h3 className="font-semibold">Share Profile</h3>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Share your profile with colleagues and collaborators.
+            </p>
+            <Dialog open={shareOpen} onOpenChange={setShareOpen}>
+              <DialogTrigger asChild>
+                <Button variant="outline" className="w-full">
+                  <Share2 className="mr-2 h-4 w-4" />
+                  Share Profile
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                  <DialogTitle>Share Your Profile</DialogTitle>
+                  <DialogDescription>
+                    Share your profile with friends and colleagues.
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4">
+                  <div className="flex items-center space-x-2">
+                    <Input
+                      defaultValue="https://example.com/profile/johndoe"
+                      readOnly
+                      className="flex-1"
+                    />
+                    <Button size="sm" className="px-3">
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="justify-start"
+                    >
+                      <Mail className="mr-2 h-4 w-4" />
+                      Email
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="justify-start"
+                    >
+                      <MessageSquare className="mr-2 h-4 w-4" />
+                      Message
+                    </Button>
+                  </div>
+                </div>
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button variant="outline" className="w-full">
+                      Close
+                    </Button>
+                  </DialogClose>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+
+          {/* Danger Zone Card */}
+          <div className="border border-red-200 rounded-lg p-6 space-y-4">
+            <div className="flex items-center gap-3">
+              <div className="h-5 w-5 bg-red-500 rounded-full" />
+              <h3 className="font-semibold text-red-700">Danger Zone</h3>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Permanently delete your account and all associated data.
+            </p>
+            <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+              <DialogTrigger asChild>
+                <Button variant="destructive" className="w-full">
+                  Delete Account
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Are you absolutely sure?</DialogTitle>
+                  <DialogDescription>
+                    This action cannot be undone. This will permanently delete
+                    your account and remove your data from our servers.
+                  </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button variant="outline">Cancel</Button>
+                  </DialogClose>
+                  <Button
+                    variant="destructive"
+                    onClick={() => setDeleteOpen(false)}
+                  >
+                    Delete Account
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </div>
+
+        {/* Additional Context */}
+        <div className="border-t pt-4">
+          <p className="text-sm text-muted-foreground">
+            This example shows dialogs in a realistic application context,
+            demonstrating how they integrate with typical UI patterns and
+            workflows.
+          </p>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real-world application scenario showing dialogs integrated into a typical dashboard interface. Demonstrates practical usage patterns including contact forms, sharing functionality, and confirmation dialogs for destructive actions. Perfect for showing designers and business teams how dialogs fit into complete user workflows.",
+      },
+    },
+  },
+};