@xyhp915/slack-base-ui 0.0.1 → 0.0.3

package/src/components/Dialog.tsx

@@ -0,0 +1,371 @@
+import clsx from 'clsx'
+import { Dialog as BaseDialog } from '@base-ui/react'
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+import { X } from 'lucide-react'
+import { Button } from './Button'
+
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+  size?: DialogSize;
+  showCloseButton?: boolean;
+  className?: string;
+}
+
+export const Dialog = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  size = 'md',
+  showCloseButton = true,
+  className,
+}: DialogProps) => {
+  const sizeClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+  }
+
+  return (
+      <BaseDialog.Root open={open} onOpenChange={onOpenChange}>
+        <BaseDialog.Portal>
+          {/* Backdrop */}
+          <BaseDialog.Backdrop
+              className="fixed inset-0 bg-black/50 z-40 transition-opacity duration-200"
+          />
+
+          {/* Dialog Content */}
+          <BaseDialog.Popup
+              className={clsx(
+                  'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',
+                  'w-full',
+                  sizeClasses[size],
+                  'bg-(--bg-primary) rounded-xl border border-(--border-gray)',
+                  'transition-all duration-200',
+                  'outline-none focus-visible:outline-none',
+                  className,
+              )}
+          >
+            {/* Header */}
+            {(title || showCloseButton) && (
+                <div className="flex items-start justify-between p-6 border-b border-(--border-light)">
+                  <div className="flex-1">
+                    {title && (
+                        <BaseDialog.Title className="text-2xl font-black text-(--text-primary) leading-tight">
+                          {title}
+                        </BaseDialog.Title>
+                    )}
+                    {description && (
+                        <BaseDialog.Description className="text-(--text-secondary) mt-2 text-sm">
+                          {description}
+                        </BaseDialog.Description>
+                    )}
+                  </div>
+                  {showCloseButton && (
+                      <BaseDialog.Close
+                          className="ml-4 p-2 rounded hover:bg-(--bg-hover) text-(--text-secondary) hover:text-(--text-primary) transition-colors focus-visible:ring-2 focus-visible:ring-(--slack-blue) focus-visible:ring-offset-2 outline-none"
+                          aria-label="Close dialog"
+                      >
+                        <X className="w-5 h-5"/>
+                      </BaseDialog.Close>
+                  )}
+                </div>
+            )}
+
+            {/* Body */}
+            <div className="p-6">{children}</div>
+          </BaseDialog.Popup>
+        </BaseDialog.Portal>
+      </BaseDialog.Root>
+  )
+}
+
+Dialog.displayName = 'Dialog'
+
+// Sub-components for custom layouts
+export const DialogHeader = ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div className={clsx('mb-4', className)}>{children}</div>
+)
+
+export const DialogBody = ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div className={clsx('text-(--text-primary)', className)}>{children}</div>
+)
+
+export const DialogFooter = ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div className={clsx('flex items-center justify-end gap-3 mt-6 pt-4 border-t border-(--border-light)', className)}>
+      {children}
+    </div>
+)
+
+// Trigger component for opening dialogs
+export interface DialogTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
+  asChild?: boolean;
+}
+
+export const DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(
+    ({ children, asChild, ...props }, ref) => {
+      if (asChild) {
+        return <BaseDialog.Trigger ref={ref}>{children}</BaseDialog.Trigger>
+      }
+
+      return (
+          <BaseDialog.Trigger ref={ref} {...props}>
+            {children}
+          </BaseDialog.Trigger>
+      )
+    },
+)
+
+DialogTrigger.displayName = 'DialogTrigger'
+
+// Re-export Close for custom usage
+export const DialogClose = BaseDialog.Close
+
+// ─── Imperative Dialog API ────────────────────────────────────────────────────
+
+export interface ShowDialogOptions {
+  title?: string
+  description?: string
+  /** Custom content rendered inside the dialog body */
+  content?: React.ReactNode
+  size?: DialogSize
+  showCloseButton?: boolean
+  className?: string
+}
+
+export interface ConfirmDialogOptions {
+  title?: string
+  description?: string
+  content?: React.ReactNode
+  size?: DialogSize
+  confirmLabel?: string
+  cancelLabel?: string
+  confirmVariant?: 'primary' | 'danger' | 'secondary'
+}
+
+export interface AlertDialogOptions {
+  title?: string
+  description?: string
+  content?: React.ReactNode
+  size?: DialogSize
+  confirmLabel?: string
+}
+
+export interface UseDialogReturn {
+  /** Show a generic dialog. Resolves when the dialog is closed. */
+  show: (options: ShowDialogOptions) => Promise<void>
+  /** Show a confirm dialog. Resolves `true` when confirmed, `false` when cancelled. */
+  confirm: (options: ConfirmDialogOptions) => Promise<boolean>
+  /** Show an alert dialog with a single OK button. Resolves when dismissed. */
+  alert: (options: AlertDialogOptions) => Promise<void>
+}
+
+interface DialogEntry {
+  id: string
+  type: 'show' | 'confirm' | 'alert'
+  title?: string
+  description?: string
+  content?: React.ReactNode
+  size?: DialogSize
+  showCloseButton?: boolean
+  confirmLabel?: string
+  cancelLabel?: string
+  confirmVariant?: 'primary' | 'danger' | 'secondary'
+  className?: string
+  resolve: (value: boolean) => void
+}
+
+const DialogImperativeContext = createContext<UseDialogReturn | null>(null)
+
+/**
+ * Provides the imperative dialog API to all descendant components.
+ * Must wrap any component that calls `useDialog()`.
+ *
+ * @example
+ * ```tsx
+ * // main.tsx
+ * <DialogProvider>
+ *   <App />
+ * </DialogProvider>
+ *
+ * // Any component
+ * const { show, confirm, alert } = useDialog()
+ * await confirm({ title: 'Delete?', confirmLabel: 'Delete', confirmVariant: 'danger' })
+ * ```
+ */
+export const DialogProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [dialogs, setDialogs] = useState<DialogEntry[]>([])
+
+  const removeDialog = useCallback((id: string) => {
+    setDialogs(prev => prev.filter(d => d.id !== id))
+  }, [])
+
+  const show = useCallback((options: ShowDialogOptions): Promise<void> => {
+    return new Promise(resolve => {
+      const id = Math.random().toString(36).slice(2, 9)
+      setDialogs(prev => [
+        ...prev,
+        { ...options, id, type: 'show', resolve: () => resolve() },
+      ])
+    })
+  }, [])
+
+  const confirm = useCallback((options: ConfirmDialogOptions): Promise<boolean> => {
+    return new Promise(resolve => {
+      const id = Math.random().toString(36).slice(2, 9)
+      setDialogs(prev => [...prev, { ...options, id, type: 'confirm', resolve }])
+    })
+  }, [])
+
+  const alert = useCallback((options: AlertDialogOptions): Promise<void> => {
+    return new Promise(resolve => {
+      const id = Math.random().toString(36).slice(2, 9)
+      setDialogs(prev => [
+        ...prev,
+        { ...options, id, type: 'alert', resolve: () => resolve() },
+      ])
+    })
+  }, [])
+
+  const value = useMemo<UseDialogReturn>(
+    () => ({ show, confirm, alert }),
+    [show, confirm, alert],
+  )
+
+  return (
+    <DialogImperativeContext.Provider value={value}>
+      {children}
+      {dialogs.map(dialog => (
+        <ImperativeDialogItem
+          key={dialog.id}
+          dialog={dialog}
+          onRemove={() => removeDialog(dialog.id)}
+        />
+      ))}
+    </DialogImperativeContext.Provider>
+  )
+}
+
+DialogProvider.displayName = 'DialogProvider'
+
+function ImperativeDialogItem({
+  dialog,
+  onRemove,
+}: {
+  dialog: DialogEntry
+  onRemove: () => void
+}) {
+  const [open, setOpen] = useState(true)
+
+  const handleClose = useCallback(
+    (result: boolean) => {
+      setOpen(false)
+      dialog.resolve(result)
+      // Allow close animation to finish before unmounting
+      setTimeout(onRemove, 300)
+    },
+    [dialog, onRemove],
+  )
+
+  const commonProps = {
+    open,
+    title: dialog.title,
+    description: dialog.description,
+    size: dialog.size,
+    className: dialog.className,
+  }
+
+  if (dialog.type === 'show') {
+    return (
+      <Dialog
+        {...commonProps}
+        showCloseButton={dialog.showCloseButton ?? true}
+        onOpenChange={o => !o && handleClose(false)}
+      >
+        {dialog.content}
+      </Dialog>
+    )
+  }
+
+  if (dialog.type === 'confirm') {
+    return (
+      <Dialog
+        {...commonProps}
+        size={dialog.size ?? 'sm'}
+        showCloseButton={false}
+        onOpenChange={o => !o && handleClose(false)}
+      >
+        {dialog.content}
+        <DialogFooter>
+          <Button variant="secondary" onClick={() => handleClose(false)}>
+            {dialog.cancelLabel ?? 'Cancel'}
+          </Button>
+          <Button
+            variant={dialog.confirmVariant ?? 'primary'}
+            onClick={() => handleClose(true)}
+          >
+            {dialog.confirmLabel ?? 'Confirm'}
+          </Button>
+        </DialogFooter>
+      </Dialog>
+    )
+  }
+
+  // alert
+  return (
+    <Dialog
+      {...commonProps}
+      size={dialog.size ?? 'sm'}
+      showCloseButton={false}
+      onOpenChange={o => !o && handleClose(true)}
+    >
+      {dialog.content}
+      <DialogFooter>
+        <Button variant="primary" onClick={() => handleClose(true)}>
+          {dialog.confirmLabel ?? 'OK'}
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  )
+}
+
+/**
+ * Returns imperative methods for showing dialogs from anywhere in the component tree.
+ *
+ * Must be used inside `<DialogProvider>`.
+ *
+ * @example
+ * ```tsx
+ * const { show, confirm, alert } = useDialog()
+ *
+ * // Generic dialog
+ * await show({ title: 'Welcome', content: <p>Hello world</p> })
+ *
+ * // Confirm
+ * const ok = await confirm({ title: 'Delete item?', confirmLabel: 'Delete', confirmVariant: 'danger' })
+ * if (ok) deleteItem()
+ *
+ * // Alert
+ * await alert({ title: 'Error', description: 'Something went wrong.' })
+ * ```
+ */
+export function useDialog(): UseDialogReturn {
+  const ctx = useContext(DialogImperativeContext)
+  if (!ctx) throw new Error('useDialog must be used within <DialogProvider>')
+  return ctx
+}
+