@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

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

@@ -1,3 +1,4 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
 	AlertDialog,
@@ -12,32 +13,225 @@ import {
 } from "#shadcn/components/ui/alert-dialog";
 import { Button } from "#shadcn/components/ui/button";
 
-const meta = {
-	title: "Component/Alert dialog",
-} satisfies Meta;
-export default meta;
+interface AlertDialogWrapperProps {
+	variant?: "default" | "danger";
+	buttons?: 1 | 2;
+	scrollableContent?: boolean;
+}
 
-type Story = StoryObj<typeof meta>;
+function AlertDialogWrapper({
+	variant = "default",
+	buttons = 1,
+	scrollableContent = false,
+}: AlertDialogWrapperProps) {
+	const actionProps = variant === "danger" ? { danger: true } : {};
 
-export const Demo = {
-	render: () => (
-		<AlertDialog>
+	const longContent = (
+		<>
+			{Array.from({ length: 20 }, (_, i) => (
+				// biome-ignore lint/suspicious/noArrayIndexKey: static content
+				<p key={i}>
+					{i + 1}. 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. Duis aute irure dolor in
+					reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+					pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+					culpa qui officia deserunt mollit anim id est laborum.
+				</p>
+			))}
+		</>
+	);
+
+	return (
+		<AlertDialog defaultOpen>
 			<AlertDialogTrigger asChild>
 				<Button variant="secondary">Show Dialog</Button>
 			</AlertDialogTrigger>
-			<AlertDialogContent>
+			<AlertDialogContent
+				className={
+					scrollableContent ? "h-[calc(100vh-44px)] flex flex-col" : undefined
+				}
+			>
 				<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>
+					<AlertDialogTitle>Dialog Title</AlertDialogTitle>
 				</AlertDialogHeader>
+				<AlertDialogDescription
+					className={scrollableContent ? "flex-1 overflow-y-auto" : undefined}
+				>
+					{scrollableContent ? (
+						<div className="space-y-4">{longContent}</div>
+					) : (
+						"This is a dialog description. It provides context about the action."
+					)}
+				</AlertDialogDescription>
 				<AlertDialogFooter>
 					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction>Continue</AlertDialogAction>
+					<div className="flex gap-3">
+						{buttons === 2 && (
+							<AlertDialogAction variant="secondary" {...actionProps}>
+								Secondary
+							</AlertDialogAction>
+						)}
+						<AlertDialogAction {...actionProps}>
+							{variant === "danger" ? "Delete" : "Confirm"}
+						</AlertDialogAction>
+					</div>
 				</AlertDialogFooter>
 			</AlertDialogContent>
 		</AlertDialog>
+	);
+}
+
+const meta = {
+	title: "Component/Alert dialog",
+	component: AlertDialogWrapper,
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		variant: {
+			control: "select",
+			options: ["default", "danger"],
+		},
+		buttons: {
+			control: "select",
+			options: [1, 2],
+		},
+		scrollableContent: {
+			control: "boolean",
+		},
+	},
+	args: {
+		variant: "default",
+		buttons: 1,
+		scrollableContent: false,
+	},
+} satisfies Meta<typeof AlertDialogWrapper>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+	tags: ["!dev"],
+	render: ({ variant = "default", buttons = 1, scrollableContent = false }) => (
+		<AlertDialogWrapper
+			variant={variant}
+			buttons={buttons}
+			scrollableContent={scrollableContent}
+		/>
+	),
+} satisfies Story;
+
+export const Demo = {
+	tags: ["!autodocs"],
+	render: () => (
+		<div className="flex flex-wrap gap-4">
+			<AlertDialog>
+				<AlertDialogTrigger asChild>
+					<Button variant="secondary">Default</Button>
+				</AlertDialogTrigger>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Confirm Action</AlertDialogTitle>
+					</AlertDialogHeader>
+					<AlertDialogDescription>
+						Are you sure you want to continue?
+					</AlertDialogDescription>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<div className="flex gap-3">
+							<AlertDialogAction>Confirm</AlertDialogAction>
+						</div>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+
+			<AlertDialog>
+				<AlertDialogTrigger asChild>
+					<Button variant="secondary">Default (2 buttons)</Button>
+				</AlertDialogTrigger>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Unsaved Changes</AlertDialogTitle>
+					</AlertDialogHeader>
+					<AlertDialogDescription>
+						You have unsaved changes. Do you want to save before leaving?
+					</AlertDialogDescription>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<div className="flex gap-3">
+							<AlertDialogAction variant="secondary">
+								Don&apos;t Save
+							</AlertDialogAction>
+							<AlertDialogAction>Save</AlertDialogAction>
+						</div>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+
+			<AlertDialog>
+				<AlertDialogTrigger asChild>
+					<Button variant="secondary">Danger</Button>
+				</AlertDialogTrigger>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete Account</AlertDialogTitle>
+					</AlertDialogHeader>
+					<AlertDialogDescription>
+						This action cannot be undone. All your data will be permanently
+						deleted.
+					</AlertDialogDescription>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<div className="flex gap-3">
+							<AlertDialogAction danger>Delete</AlertDialogAction>
+						</div>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+
+			<AlertDialog>
+				<AlertDialogTrigger asChild>
+					<Button variant="secondary">Scrollable Content</Button>
+				</AlertDialogTrigger>
+				<AlertDialogContent className="h-[calc(100vh-44px)] flex flex-col">
+					<AlertDialogHeader>
+						<AlertDialogTitle>Terms and Conditions</AlertDialogTitle>
+					</AlertDialogHeader>
+					<AlertDialogDescription className="flex-1 overflow-y-auto">
+						<div className="space-y-4">
+							{Array.from({ length: 20 }, (_, i) => (
+								// biome-ignore lint/suspicious/noArrayIndexKey: static content
+								<p key={i}>
+									{i + 1}. 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. Duis aute irure dolor in reprehenderit in voluptate
+									velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+									sint occaecat cupidatat non proident, sunt in culpa qui
+									officia deserunt mollit anim id est laborum.
+								</p>
+							))}
+						</div>
+					</AlertDialogDescription>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<div className="flex gap-3">
+							<AlertDialogAction>Accept</AlertDialogAction>
+						</div>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</div>
 	),
 } satisfies Story;

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

@@ -1,6 +1,9 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import type * as React from "react";
-import { buttonVariants } from "#shadcn/components/ui/button";
+import type { VariantProps } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import * as React from "react";
+import type { buttonVariants } from "#shadcn/components/ui/button";
+import { Button } from "#shadcn/components/ui/button";
 import { cn } from "#shadcn/lib/utils";
 
 function AlertDialog({
@@ -25,6 +28,22 @@ function AlertDialogPortal({
 	);
 }
 
+// AlertDialog overlay styles
+const alertDialogOverlayStyles = cn(
+	// Layout
+	"fixed",
+	"inset-0",
+	"z-50",
+	// Background
+	"bg-black/50",
+	// Animations - open
+	"data-[state=open]:animate-in",
+	"data-[state=open]:fade-in-0",
+	// Animations - closed
+	"data-[state=closed]:animate-out",
+	"data-[state=closed]:fade-out-0",
+);
+
 function AlertDialogOverlay({
 	className,
 	...props
@@ -32,30 +51,139 @@ function AlertDialogOverlay({
 	return (
 		<AlertDialogPrimitive.Overlay
 			data-slot="alert-dialog-overlay"
-			className={cn(
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-				className,
-			)}
+			className={cn(alertDialogOverlayStyles, className)}
 			{...props}
 		/>
 	);
 }
 
+// AlertDialog content styles
+const alertDialogContentStyles = cn(
+	// Layout
+	"fixed",
+	"top-[50%]",
+	"left-[50%]",
+	"z-50",
+	"flex",
+	"flex-col",
+	"w-full",
+	"max-w-[calc(100%-2rem)]",
+	"translate-x-[-50%]",
+	"translate-y-[-50%]",
+	// Shape
+	"rounded-lg",
+	// Borders
+	"border",
+	"border-border-primary",
+	// Background & Colors
+	"bg-bg-primary",
+	// Shadow
+	"dropdown-menu-shadow",
+	// Animation duration
+	"duration-200",
+	// Responsive
+	"sm:max-w-lg",
+	// Animations - open
+	"data-[state=open]:animate-in",
+	"data-[state=open]:fade-in-0",
+	"data-[state=open]:zoom-in-95",
+	// Animations - closed
+	"data-[state=closed]:animate-out",
+	"data-[state=closed]:fade-out-0",
+	"data-[state=closed]:zoom-out-95",
+);
+
+// AlertDialog close button styles
+const alertDialogCloseButtonStyles = cn(
+	// Layout
+	"absolute",
+	"top-4",
+	"right-4",
+	// Shape
+	"rounded-xs",
+	// Opacity
+	"opacity-70",
+	"hover:opacity-100",
+	// Transitions
+	"transition-opacity",
+	// Cursor
+	"cursor-pointer",
+	// Focus
+	"focus:ring-2",
+	"focus:ring-utility-blue/70",
+	"focus:ring-offset-2",
+	"focus:outline-hidden",
+	// Disabled
+	"disabled:pointer-events-none",
+	// SVG styles
+	"[&_svg]:pointer-events-none",
+	"[&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-4",
+	// States
+	"data-[state=open]:bg-bg-secondary",
+	"data-[state=open]:text-text-secondary",
+);
+
 function AlertDialogContent({
 	className,
+	children,
+	showCloseButton = true,
+	onOpenAutoFocus,
 	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+	showCloseButton?: boolean;
+}) {
+	const contentRef = React.useRef<HTMLDivElement>(null);
+
+	const handleOpenAutoFocus = React.useCallback(
+		(event: Event) => {
+			// Prevent default focus behavior
+			event.preventDefault();
+
+			// Find first focusable element (usually a button in footer)
+			if (contentRef.current) {
+				const firstFocusable = contentRef.current.querySelector<HTMLElement>(
+					'button:not([tabindex="-1"]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+				);
+
+				// Focus on first focusable element, or fallback to content itself
+				if (firstFocusable) {
+					firstFocusable.focus();
+				} else {
+					contentRef.current.focus();
+				}
+			}
+
+			// Call user-provided handler if exists
+			if (onOpenAutoFocus) {
+				onOpenAutoFocus(event);
+			}
+		},
+		[onOpenAutoFocus],
+	);
+
 	return (
 		<AlertDialogPortal>
 			<AlertDialogOverlay />
 			<AlertDialogPrimitive.Content
+				ref={contentRef}
 				data-slot="alert-dialog-content"
-				className={cn(
-					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-					className,
-				)}
+				className={cn(alertDialogContentStyles, className)}
+				onOpenAutoFocus={handleOpenAutoFocus}
 				{...props}
-			/>
+			>
+				{children}
+				{showCloseButton && (
+					<AlertDialogPrimitive.Cancel
+						data-slot="alert-dialog-close"
+						className={alertDialogCloseButtonStyles}
+						tabIndex={-1}
+					>
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</AlertDialogPrimitive.Cancel>
+				)}
+			</AlertDialogPrimitive.Content>
 		</AlertDialogPortal>
 	);
 }
@@ -67,7 +195,19 @@ function AlertDialogHeader({
 	return (
 		<div
 			data-slot="alert-dialog-header"
-			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			className={cn(
+				// Layout
+				"flex",
+				"items-center",
+				"justify-between",
+				"h-[60px]",
+				// Spacing
+				"px-6",
+				// Borders
+				"border-b",
+				"border-border-separator",
+				className,
+			)}
 			{...props}
 		/>
 	);
@@ -81,7 +221,17 @@ function AlertDialogFooter({
 		<div
 			data-slot="alert-dialog-footer"
 			className={cn(
-				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				// Layout
+				"flex",
+				"items-center",
+				"justify-between",
+				"h-[60px]",
+				// Spacing
+				"px-4",
+				"py-3",
+				// Borders
+				"border-t",
+				"border-border-separator",
 				className,
 			)}
 			{...props}
@@ -96,7 +246,7 @@ function AlertDialogTitle({
 	return (
 		<AlertDialogPrimitive.Title
 			data-slot="alert-dialog-title"
-			className={cn("text-lg font-semibold", className)}
+			className={cn("typo-page-header", className)}
 			{...props}
 		/>
 	);
@@ -109,7 +259,16 @@ function AlertDialogDescription({
 	return (
 		<AlertDialogPrimitive.Description
 			data-slot="alert-dialog-description"
-			className={cn("text-muted-foreground text-sm", className)}
+			className={cn(
+				// Typography
+				"body14",
+				"text-text-secondary_hover",
+				// Spacing
+				"px-6",
+				"pt-3",
+				"pb-4",
+				className,
+			)}
 			{...props}
 		/>
 	);
@@ -117,25 +276,76 @@ function AlertDialogDescription({
 
 function AlertDialogAction({
 	className,
+	variant,
+	danger,
+	asChild = false,
+	children,
 	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+}: Omit<React.ComponentProps<typeof AlertDialogPrimitive.Action>, "asChild"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	if (asChild) {
+		return (
+			<AlertDialogPrimitive.Action asChild className={className} {...props}>
+				{children}
+			</AlertDialogPrimitive.Action>
+		);
+	}
+	// Extract asChild from props to avoid type conflicts
+	const { asChild: _asChild, ...restProps } = props as typeof props & {
+		asChild?: boolean | null | undefined;
+	};
+	type ButtonProps = Omit<
+		React.ComponentProps<typeof Button>,
+		"asChild" | "variant" | "danger" | "className"
+	>;
+	const buttonProps: React.ComponentProps<typeof Button> = {
+		variant,
+		className,
+		...(danger !== undefined && danger !== null ? { danger } : {}),
+		...(restProps as ButtonProps),
+	};
 	return (
-		<AlertDialogPrimitive.Action
-			className={cn(buttonVariants(), className)}
-			{...props}
-		/>
+		<AlertDialogPrimitive.Action asChild>
+			<Button {...buttonProps}>{children}</Button>
+		</AlertDialogPrimitive.Action>
 	);
 }
 
 function AlertDialogCancel({
 	className,
+	asChild = false,
+	children,
 	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+}: Omit<React.ComponentProps<typeof AlertDialogPrimitive.Cancel>, "asChild"> & {
+	asChild?: boolean;
+}) {
+	if (asChild) {
+		return (
+			<AlertDialogPrimitive.Cancel asChild className={className} {...props}>
+				{children}
+			</AlertDialogPrimitive.Cancel>
+		);
+	}
+	// Extract asChild from props to avoid type conflicts
+	const { asChild: _asChild, ...restProps } = props as typeof props & {
+		asChild?: boolean | null | undefined;
+	};
+	type ButtonProps = Omit<
+		React.ComponentProps<typeof Button>,
+		"asChild" | "variant" | "className"
+	>;
 	return (
-		<AlertDialogPrimitive.Cancel
-			className={cn(buttonVariants({ variant: "secondary" }), className)}
-			{...props}
-		/>
+		<AlertDialogPrimitive.Cancel asChild>
+			<Button
+				variant="secondary"
+				className={className}
+				{...(restProps as ButtonProps)}
+			>
+				{children}
+			</Button>
+		</AlertDialogPrimitive.Cancel>
 	);
 }