appos 0.4.3-0 → 0.5.1-0

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

@@ -0,0 +1,263 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+	Button,
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+	Input,
+	Label,
+} from "appos/web";
+import { expect, userEvent, within } from "storybook/test";
+
+const meta = {
+	title: "Base/Dialog",
+	component: Dialog,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+		docs: {
+			description: {
+				component:
+					"A modal dialog component for displaying content that requires user attention. Supports headers, footers, forms, and customizable close behavior.",
+			},
+		},
+	},
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<Dialog>
+			<DialogTrigger render={<Button variant="outline" />}>
+				Edit Profile
+			</DialogTrigger>
+			<DialogContent>
+				<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 grid-cols-4 items-center gap-4">
+						<Label htmlFor="name" className="text-right">
+							Name
+						</Label>
+						<Input id="name" defaultValue="John Doe" className="col-span-3" />
+					</div>
+					<div className="grid grid-cols-4 items-center gap-4">
+						<Label htmlFor="username" className="text-right">
+							Username
+						</Label>
+						<Input
+							id="username"
+							defaultValue="@johndoe"
+							className="col-span-3"
+						/>
+					</div>
+				</div>
+				<DialogFooter>
+					<Button type="submit">Save changes</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Default dialog with a form. Includes header, content area, and footer with actions.",
+			},
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const trigger = canvas.getByRole("button", { name: /edit profile/i });
+		await userEvent.click(trigger);
+		await expect(
+			await within(document.body).findByRole("dialog"),
+		).toBeInTheDocument();
+	},
+};
+
+export const WithCloseButton: Story = {
+	render: () => (
+		<Dialog>
+			<DialogTrigger render={<Button variant="outline" />}>
+				Open Dialog
+			</DialogTrigger>
+			<DialogContent showCloseButton>
+				<DialogHeader>
+					<DialogTitle>Dialog with Close Button</DialogTitle>
+					<DialogDescription>
+						This dialog has a close button in the top-right corner.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="py-4">
+					<p>Click the X button or press Escape to close this dialog.</p>
+				</div>
+			</DialogContent>
+		</Dialog>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Dialog with an explicit close button. Use showCloseButton prop on DialogContent.",
+			},
+		},
+	},
+};
+
+export const WithFooterCloseButton: Story = {
+	render: () => (
+		<Dialog>
+			<DialogTrigger render={<Button variant="outline" />}>
+				View Details
+			</DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Order Details</DialogTitle>
+					<DialogDescription>
+						View the details of your recent order.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="py-4">
+					<dl className="space-y-2 text-sm">
+						<div className="flex justify-between">
+							<dt className="text-muted-foreground">Order ID</dt>
+							<dd>#12345</dd>
+						</div>
+						<div className="flex justify-between">
+							<dt className="text-muted-foreground">Date</dt>
+							<dd>Jan 15, 2025</dd>
+						</div>
+						<div className="flex justify-between">
+							<dt className="text-muted-foreground">Total</dt>
+							<dd>$99.99</dd>
+						</div>
+					</dl>
+				</div>
+				<DialogFooter showCloseButton />
+			</DialogContent>
+		</Dialog>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Dialog with a close button in the footer. Use showCloseButton prop on DialogFooter.",
+			},
+		},
+	},
+};
+
+export const SimpleAlert: Story = {
+	render: () => (
+		<Dialog>
+			<DialogTrigger render={<Button variant="outline" />}>
+				Show Alert
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>Are you sure?</DialogTitle>
+					<DialogDescription>This action cannot be undone.</DialogDescription>
+				</DialogHeader>
+				<DialogFooter className="sm:justify-between">
+					<DialogClose render={<Button variant="outline" />}>
+						Cancel
+					</DialogClose>
+					<Button variant="destructive">Delete</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Simple alert-style dialog for confirmations. Use DialogClose for cancel actions.",
+			},
+		},
+	},
+};
+
+export const CustomWidth: Story = {
+	render: () => (
+		<Dialog>
+			<DialogTrigger render={<Button variant="outline" />}>
+				Wide Dialog
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Wide Dialog</DialogTitle>
+					<DialogDescription>
+						This dialog has a custom max-width for larger content.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="py-4">
+					<p className="text-muted-foreground text-sm">
+						Use Tailwind classes like sm:max-w-2xl to customize the dialog
+						width. The default is sm:max-w-md.
+					</p>
+				</div>
+			</DialogContent>
+		</Dialog>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Dialog with custom width. Override max-width using Tailwind classes.",
+			},
+		},
+	},
+};
+
+export const ScrollableContent: Story = {
+	render: () => (
+		<Dialog>
+			<DialogTrigger render={<Button variant="outline" />}>
+				Terms of Service
+			</DialogTrigger>
+			<DialogContent className="max-h-[80vh] overflow-y-auto">
+				<DialogHeader>
+					<DialogTitle>Terms of Service</DialogTitle>
+					<DialogDescription>
+						Please read and accept our terms of service.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="py-4 text-sm">
+					{Array.from({ length: 10 }).map((_, i) => (
+						<p key={i} className="mb-4">
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+							eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+							enim ad minim veniam, quis nostrud exercitation ullamco laboris
+							nisi ut aliquip ex ea commodo consequat.
+						</p>
+					))}
+				</div>
+				<DialogFooter>
+					<DialogClose render={<Button variant="outline" />}>
+						Decline
+					</DialogClose>
+					<Button>Accept</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Dialog with scrollable content for long text or lists.",
+			},
+		},
+	},
+};

package/src/web/ui/dialog.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { XIcon } from "lucide-react";
+import type * as React from "react";
+import { cn } from "#src/web/lib/utils.ts";
+import { Button } from "#src/web/ui/button.tsx";
+
+/**
+ * A modal window that appears above the page content.
+ *
+ * Use for focused tasks like forms, confirmations, or displaying detailed
+ * information. Traps focus and prevents interaction with the background.
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger render={<Button />}>Open Dialog</DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Edit Profile</DialogTitle>
+ *       <DialogDescription>Make changes to your profile.</DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <Button>Save changes</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+/**
+ * The button that opens the dialog.
+ *
+ * Use the `render` prop to customize the trigger element while maintaining
+ * proper accessibility attributes.
+ *
+ * @example
+ * ```tsx
+ * <DialogTrigger render={<Button />}>Open</DialogTrigger>
+ * ```
+ */
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+/**
+ * Portals the dialog content to the end of the document body.
+ *
+ * Used internally by DialogContent. Ensures the dialog renders above
+ * other content regardless of DOM position.
+ */
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+/**
+ * A button that closes the dialog when clicked.
+ *
+ * Can be placed anywhere within the dialog content.
+ *
+ * @example
+ * ```tsx
+ * <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
+ * ```
+ */
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+/**
+ * The backdrop overlay behind the dialog.
+ *
+ * Dims the background and prevents interaction with the page. Includes
+ * blur effect on supported browsers. Used internally by DialogContent.
+ */
+function DialogOverlay({
+	className,
+	...props
+}: DialogPrimitive.Backdrop.Props) {
+	return (
+		<DialogPrimitive.Backdrop
+			data-slot="dialog-overlay"
+			className={cn(
+				"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+/**
+ * The container for the dialog content.
+ *
+ * Centers the dialog on screen with smooth open/close animations. Includes
+ * the portal and overlay automatically. Optionally shows a close button.
+ *
+ * @example
+ * ```tsx
+ * <DialogContent>
+ *   <DialogHeader>...</DialogHeader>
+ *   <DialogFooter>...</DialogFooter>
+ * </DialogContent>
+ * ```
+ */
+function DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: DialogPrimitive.Popup.Props & {
+	showCloseButton?: boolean;
+}) {
+	return (
+		<DialogPortal>
+			<DialogOverlay />
+			<DialogPrimitive.Popup
+				data-slot="dialog-content"
+				className={cn(
+					"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close"
+						render={
+							<Button
+								variant="ghost"
+								className="absolute top-4 right-4"
+								size="icon-sm"
+							/>
+						}
+					>
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Popup>
+		</DialogPortal>
+	);
+}
+
+/**
+ * The header section containing the dialog title and description.
+ *
+ * Provides consistent spacing and layout for dialog headers.
+ *
+ * @example
+ * ```tsx
+ * <DialogHeader>
+ *   <DialogTitle>Edit Settings</DialogTitle>
+ *   <DialogDescription>Configure your preferences.</DialogDescription>
+ * </DialogHeader>
+ * ```
+ */
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn("gap-2 flex flex-col", className)}
+			{...props}
+		/>
+	);
+}
+
+/**
+ * The footer section containing dialog action buttons.
+ *
+ * Arranges buttons in a responsive layout with proper spacing.
+ * Optionally includes a close button.
+ *
+ * @example
+ * ```tsx
+ * <DialogFooter>
+ *   <Button variant="outline">Cancel</Button>
+ *   <Button>Save</Button>
+ * </DialogFooter>
+ * ```
+ */
+function DialogFooter({
+	className,
+	showCloseButton = false,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	showCloseButton?: boolean;
+}) {
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn(
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{showCloseButton && (
+				<DialogPrimitive.Close render={<Button variant="outline" />}>
+					Close
+				</DialogPrimitive.Close>
+			)}
+		</div>
+	);
+}
+
+/**
+ * The title text for the dialog.
+ *
+ * Displayed prominently and announced by screen readers when the dialog opens.
+ *
+ * @example
+ * ```tsx
+ * <DialogTitle>Confirm Action</DialogTitle>
+ * ```
+ */
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("leading-none font-medium", className)}
+			{...props}
+		/>
+	);
+}
+
+/**
+ * The descriptive text explaining the dialog purpose.
+ *
+ * Provides context about the action or content within the dialog.
+ *
+ * @example
+ * ```tsx
+ * <DialogDescription>
+ *   This action cannot be undone. Please confirm your choice.
+ * </DialogDescription>
+ * ```
+ */
+function DialogDescription({
+	className,
+	...props
+}: DialogPrimitive.Description.Props) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn(
+				"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};