@yuno-payments/dashboard-design-system 0.0.1

package/src/components/organisms/dialog/index.tsx

@@ -0,0 +1,233 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X, ArrowLeft } from "lucide-react"
+import { cn } from "../../../lib/utils"
+import { Button } from "../../atoms/button"
+
+const dialogVariants = cva(
+  "fixed inset-0 z-50 flex items-center justify-center p-4",
+  {
+    variants: {
+      verticalAlign: {
+        start: "items-start pt-20",
+        center: "items-center",
+        end: "items-end pb-20",
+      },
+    },
+    defaultVariants: {
+      verticalAlign: "center",
+    },
+  }
+)
+
+const dialogContentVariants = cva(
+  "relative bg-background rounded-lg shadow-lg border max-h-[90vh] overflow-hidden flex flex-col",
+  {
+    variants: {
+      size: {
+        default: "w-full max-w-md",
+        sm: "w-full max-w-sm",
+        lg: "w-full max-w-lg",
+        xl: "w-full max-w-xl",
+        fullscreen: "w-full h-full max-w-none max-h-none rounded-none",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+export type VerticalAlign = 'start' | 'center' | 'end'
+export type VariantButtonType = 'primary' | 'secondary' | 'tertiary' | 'text' | 'outlined' | 'contained'
+export type SizeButtonType = 'small' | 'large' | 'medium'
+
+export interface IDialogButton {
+  key?: string
+  variant?: VariantButtonType
+  label: string | React.ReactElement
+  event: () => void
+  size?: SizeButtonType
+  loading?: boolean
+  disabled?: boolean
+  testId?: string
+  type?: 'button' | 'reset' | 'submit'
+}
+
+export interface DialogProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
+    VariantProps<typeof dialogVariants> {
+  title?: React.ReactElement | string
+  open: boolean
+  closeIcon: () => void
+  buttons?: IDialogButton[]
+  widthContainer?: number | string
+  heightContainer?: number | string
+  backButtonAction?: () => void
+  showActions?: boolean
+  otherActions?: React.ReactNode
+  withHeader?: boolean
+  children: React.ReactNode
+}
+
+const Dialog = React.forwardRef<HTMLDivElement, DialogProps>(
+  (
+    {
+      className,
+      verticalAlign,
+      title,
+      open,
+      closeIcon,
+      buttons = [],
+      widthContainer,
+      heightContainer,
+      backButtonAction,
+      showActions = true,
+      otherActions,
+      withHeader = true,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [isMobile, setIsMobile] = React.useState(false)
+
+    React.useEffect(() => {
+      const checkMobile = () => {
+        setIsMobile(window.innerWidth <= 599)
+      }
+      
+      checkMobile()
+      window.addEventListener('resize', checkMobile)
+      return () => window.removeEventListener('resize', checkMobile)
+    }, [])
+
+    React.useEffect(() => {
+      if (open) {
+        document.body.style.overflow = 'hidden'
+      } else {
+        document.body.style.overflow = 'unset'
+      }
+      
+      return () => {
+        document.body.style.overflow = 'unset'
+      }
+    }, [open])
+
+    const getButtonVariant = (variant?: VariantButtonType) => {
+      switch (variant) {
+        case 'primary':
+          return 'default'
+        case 'secondary':
+          return 'outline'
+        case 'tertiary':
+          return 'ghost'
+        default:
+          return variant as 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary' | 'link'
+      }
+    }
+
+    const getButtonSize = (size?: SizeButtonType) => {
+      switch (size) {
+        case 'small':
+          return 'sm'
+        case 'large':
+          return 'lg'
+        case 'medium':
+        default:
+          return 'default'
+      }
+    }
+
+    if (!open) return null
+
+    const dialogStyle = {
+      width: widthContainer && !isMobile ? widthContainer : undefined,
+      height: heightContainer && !isMobile ? heightContainer : undefined,
+    }
+
+    return (
+      <>
+        <div 
+          className="fixed inset-0 z-40 bg-black/25" 
+          onClick={closeIcon}
+          aria-hidden="true"
+        />
+        
+        <div className={cn(dialogVariants({ verticalAlign }))}>
+          <div
+            ref={ref}
+            className={cn(
+              dialogContentVariants({ 
+                size: isMobile ? "fullscreen" : "default" 
+              }),
+              className
+            )}
+            style={dialogStyle}
+            role="dialog"
+            aria-modal="true"
+            {...props}
+          >
+            {withHeader && (
+              <div className="flex items-center justify-between p-6 border-b">
+                <div className="flex items-center gap-4 flex-1">
+                  {backButtonAction && (
+                    <button
+                      onClick={backButtonAction}
+                      className="inline-flex items-center justify-center size-6 rounded-sm opacity-70 hover:opacity-100 transition-opacity"
+                      aria-label="Go back"
+                      data-testid="back-button"
+                    >
+                      <ArrowLeft className="size-4" />
+                    </button>
+                  )}
+                  <div className="text-lg font-semibold leading-none tracking-tight">
+                    {title}
+                  </div>
+                </div>
+                
+                <div className="flex items-center gap-4">
+                  {otherActions}
+                  <button
+                    onClick={closeIcon}
+                    className="inline-flex items-center justify-center size-6 rounded-sm opacity-70 hover:opacity-100 transition-opacity"
+                    aria-label="Close dialog"
+                    data-testid="close-button"
+                  >
+                    <X className="size-4" />
+                  </button>
+                </div>
+              </div>
+            )}
+            
+            <div className="flex-1 overflow-auto p-6">
+              {children}
+            </div>
+            
+            {buttons.length > 0 && showActions && (
+              <div className="flex items-center justify-end gap-3 p-6 border-t">
+                {buttons.map((button, index) => (
+                  <Button
+                    key={button.key || index}
+                    variant={getButtonVariant(button.variant)}
+                    size={getButtonSize(button.size)}
+                    onClick={button.event}
+                    disabled={button.disabled || button.loading}
+                    data-testid={button.testId}
+                    type={button.type}
+                  >
+                    {button.loading ? "Loading..." : button.label}
+                  </Button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </>
+    )
+  }
+)
+
+Dialog.displayName = "Dialog"
+
+export { Dialog }