feat: add component alert-dialog

Author: Ohh-889

packages/ui-variants/src/index.ts

@@ -4,10 +4,12 @@ export * from './types';
 
 export * from './variants/accordion';
 export * from './variants/alert';
+export * from './variants/alert-dialog';
 export * from './variants/badge';
 export * from './variants/button';
 export * from './variants/button-group';
 export * from './variants/card';
 export * from './variants/divider';
 export * from './variants/scroll-area';
+
 export * from './variants/tabs';

packages/ui-variants/src/variants/alert-dialog.ts

@@ -0,0 +1,78 @@
+import { tv } from 'tailwind-variants';
+
+export const dialogVariants = tv({
+  defaultVariants: {
+    size: 'md'
+  },
+  slots: {
+    closeIcon: `absolute`,
+    content: [
+      `fixed left-[50%] top-[50%] z-50 flex flex-col w-full border bg-background shadow-lg translate-x-[-50%] translate-y-[-50%] md:w-full duration-200 sm:rounded-lg`,
+      `data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]`,
+      `data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]`
+    ],
+    description: `text-muted-foreground`,
+    footer: `flex flex-col-reverse sm:flex-row sm:justify-end`,
+    header: `flex flex-col text-center sm:text-left`,
+    overlay: [
+      `fixed inset-0 z-50 bg-black/80`,
+      `data-[state=open]:animate-in data-[state=open]:fade-in-0`,
+      `data-[state=closed]:animate-out data-[state=closed]:fade-out-0`
+    ],
+    title: `flex items-center font-semibold leading-none tracking-tight`
+  },
+  variants: {
+    size: {
+      '2xl': {
+        closeIcon: 'right-6 top-6',
+        content: `gap-y-6 max-w-3xl px-7 py-6 text-xl`,
+        description: 'text-xl',
+        footer: 'gap-6',
+        header: 'gap-y-6',
+        title: 'gap-x-3.5 text-2xl'
+      },
+      lg: {
+        closeIcon: 'right-4 top-4',
+        content: `gap-y-4 max-w-xl px-5 py-4 text-base`,
+        description: 'text-base',
+        footer: 'gap-4',
+        header: 'gap-y-4',
+        title: 'gap-x-2.5 text-lg'
+      },
+      md: {
+        closeIcon: 'right-3 top-3',
+        content: `gap-y-3 max-w-lg px-4 py-3 text-sm`,
+        description: 'text-sm',
+        footer: 'gap-3',
+        header: 'gap-y-3',
+        title: 'gap-x-2 text-base'
+      },
+      sm: {
+        closeIcon: 'right-2 top-2',
+        content: `gap-y-2 max-w-md px-3 py-2 text-xs`,
+        description: 'text-xs',
+        footer: 'gap-2',
+        header: 'gap-y-2',
+        title: 'gap-x-1.75 text-sm'
+      },
+      xl: {
+        closeIcon: 'right-5 top-5',
+        content: `gap-y-5 max-w-2xl px-6 py-5 text-lg`,
+        description: 'text-lg',
+        footer: 'gap-5',
+        header: 'gap-y-5',
+        title: 'gap-x-3 text-xl'
+      },
+      xs: {
+        closeIcon: 'right-1.5 top-1.5',
+        content: `gap-y-1.5 max-w-md px-2 py-1.5 text-2xs`,
+        description: 'text-2xs',
+        footer: 'gap-1.5',
+        header: 'gap-y-1.5',
+        title: 'gap-x-1.5 text-xs'
+      }
+    }
+  }
+});
+
+export type DialogSlots = keyof typeof dialogVariants.slots;

packages/ui/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-compose-refs": "1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-separator": "^1.1.7",

packages/ui/src/components/alert-dialog/index.ts

@@ -0,0 +1,11 @@
+export { default as AlertDialog } from './source/AlertDialog';
+export { default as AlertDialogAction } from './source/AlertDialogAction';
+export { default as AlertDialogCancel } from './source/AlertDialogCancel';
+export { default as AlertDialogContent } from './source/AlertDialogContent';
+export { default as AlertDialogDescription } from './source/AlertDialogDescription';
+export { default as AlertDialogFooter } from './source/AlertDialogFooter';
+export { default as AlertDialogHeader } from './source/AlertDialogHeader';
+export { default as AlertDialogOverlay } from './source/AlertDialogOverlay';
+export { default as AlertDialogTitle } from './source/AlertDialogTitle';
+
+export * from './types';

packages/ui/src/components/alert-dialog/source/AlertDialog.tsx

@@ -0,0 +1,96 @@
+import type { Content } from '@radix-ui/react-alert-dialog';
+import { AlertDialog as AlertDialogRoot, Portal, Trigger } from '@radix-ui/react-alert-dialog';
+import { Slot } from '@radix-ui/react-slot';
+import { CircleAlert, CircleCheck, CircleX, Info } from 'lucide-react';
+import { forwardRef } from 'react';
+
+import type { AlertDialogProps, AlertType } from '../types';
+
+import AlertDialogContent from './AlertDialogContent';
+import AlertDialogDescription from './AlertDialogDescription';
+import AlertDialogFooter from './AlertDialogFooter';
+import AlertDialogHeader from './AlertDialogHeader';
+import AlertDialogOverlay from './AlertDialogOverlay';
+import AlertDialogTitle from './AlertDialogTitle';
+
+const iconRecord: Record<AlertType, React.ReactNode> = {
+  destructive: <CircleX className="text-destructive" />,
+  info: <Info className="text-info" />,
+  success: <CircleCheck className="text-success" />,
+  warning: <CircleAlert className="text-warning" />
+};
+
+const AlertDialog = forwardRef<React.ElementRef<typeof Content>, AlertDialogProps>((props, ref) => {
+  const {
+    children,
+    className,
+    classNames,
+    description,
+    footer,
+    forceMountOverlay,
+    forceMountPortal,
+    icon,
+    size,
+    title,
+    trigger,
+    type,
+    ...rest
+  } = props;
+
+  return (
+    <AlertDialogRoot {...props}>
+      <Trigger asChild>{trigger}</Trigger>
+
+      <Portal forceMount={forceMountPortal}>
+        <AlertDialogOverlay
+          className={classNames?.overlay}
+          forceMount={forceMountOverlay}
+        />
+
+        <AlertDialogContent
+          {...rest}
+          className={className || classNames?.content}
+          ref={ref}
+          size={size}
+        >
+          <AlertDialogHeader
+            className={classNames?.header}
+            size={size}
+          >
+            <AlertDialogTitle
+              className={classNames?.title}
+              size={size}
+            >
+              {icon || (type && <Slot className={classNames?.icon || ''}>{iconRecord[type]}</Slot>)}
+              {title}
+            </AlertDialogTitle>
+
+            {description && (
+              <AlertDialogDescription
+                className={classNames?.description}
+                size={size}
+              >
+                {description}
+              </AlertDialogDescription>
+            )}
+          </AlertDialogHeader>
+
+          {children}
+
+          {footer && (
+            <AlertDialogFooter
+              className={classNames?.footer}
+              size={size}
+            >
+              {footer}
+            </AlertDialogFooter>
+          )}
+        </AlertDialogContent>
+      </Portal>
+    </AlertDialogRoot>
+  );
+});
+
+AlertDialog.displayName = 'AlertDialog';
+
+export default AlertDialog;

packages/ui/src/components/alert-dialog/source/AlertDialogAction.tsx

@@ -0,0 +1,19 @@
+import { Action } from '@radix-ui/react-alert-dialog';
+import { forwardRef } from 'react';
+
+import { Button, type ButtonProps } from '../../button';
+
+const AlertDialogAction = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  return (
+    <Action asChild>
+      <Button
+        {...props}
+        ref={ref}
+      />
+    </Action>
+  );
+});
+
+AlertDialogAction.displayName = 'AlertDialogAction';
+
+export default AlertDialogAction;

packages/ui/src/components/alert-dialog/source/AlertDialogCancel.tsx

@@ -0,0 +1,22 @@
+import { Cancel } from '@radix-ui/react-alert-dialog';
+import { forwardRef } from 'react';
+
+import { Button, type ButtonProps } from '../../button';
+
+const AlertDialogCancel = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { variant = 'plain', ...rest } = props;
+
+  return (
+    <Cancel asChild>
+      <Button
+        {...rest}
+        ref={ref}
+        variant={variant}
+      />
+    </Cancel>
+  );
+});
+
+AlertDialogCancel.displayName = 'AlertDialogCancel';
+
+export default AlertDialogCancel;

packages/ui/src/components/alert-dialog/source/AlertDialogContent.tsx

@@ -0,0 +1,24 @@
+import { Content } from '@radix-ui/react-alert-dialog';
+import { cn, dialogVariants } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { AlertDialogContentProps } from '../types';
+
+const AlertDialogContent = forwardRef<React.ElementRef<typeof Content>, AlertDialogContentProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { content } = dialogVariants({ size });
+
+  const mergedClass = cn(content(), className);
+  return (
+    <Content
+      {...rest}
+      className={mergedClass}
+      ref={ref}
+    />
+  );
+});
+
+AlertDialogContent.displayName = 'AlertDialogContent';
+
+export default AlertDialogContent;

packages/ui/src/components/alert-dialog/source/AlertDialogDescription.tsx

@@ -0,0 +1,26 @@
+import { Description } from '@radix-ui/react-alert-dialog';
+import { cn, dialogVariants } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { AlertDialogDescriptionProps } from '../types';
+
+const AlertDialogDescription = forwardRef<React.ElementRef<typeof Description>, AlertDialogDescriptionProps>(
+  (props, ref) => {
+    const { className, size, ...rest } = props;
+
+    const { description } = dialogVariants({ size });
+
+    const mergedClass = cn(description(), className);
+    return (
+      <Description
+        {...rest}
+        className={mergedClass}
+        ref={ref}
+      />
+    );
+  }
+);
+
+AlertDialogDescription.displayName = 'AlertDialogDescription';
+
+export default AlertDialogDescription;

packages/ui/src/components/alert-dialog/source/AlertDialogFooter.tsx

@@ -0,0 +1,23 @@
+import { cn, dialogVariants } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { AlertDialogFooterProps } from '../types';
+
+const AlertDialogFooter = forwardRef<HTMLDivElement, AlertDialogFooterProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { footer } = dialogVariants({ size });
+
+  const mergedClass = cn(footer(), className);
+  return (
+    <div
+      {...rest}
+      className={mergedClass}
+      ref={ref}
+    />
+  );
+});
+
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+export default AlertDialogFooter;