@xyhp915/slack-base-ui 0.0.2 → 0.0.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@xyhp915/slack-base-ui",
   "main": "libs/index.js",
   "types": "libs/index.d.ts",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/Dialog.tsx

@@ -1,7 +1,14 @@
 import clsx from 'clsx'
 import { Dialog as BaseDialog } from '@base-ui/react'
-import React from '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';
 
@@ -127,3 +134,238 @@ 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
+}
+

package/src/components/Popover.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'
 import { Popover as BasePopover } from '@base-ui/react'
 import clsx from 'clsx'
 
@@ -194,6 +194,174 @@ export const PopoverFooter: React.FC<{ children: React.ReactNode; className?: st
   )
 }
 
+// ─── Imperative Popover API ───────────────────────────────────────────────────
+
+export interface ImperativePopoverOptions {
+  /** Content rendered inside the popover */
+  content: React.ReactNode
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  sideOffset?: number
+  alignOffset?: number
+  className?: string
+}
+
+export interface UseImperativePopoverReturn {
+  /**
+   * Show the popover anchored to the given element.
+   * If already open on the same anchor, calling `show` again replaces the content.
+   */
+  show: (anchor: HTMLElement | null, options: ImperativePopoverOptions) => void
+  /** Hide the currently open popover. */
+  hide: () => void
+  /**
+   * Toggle the popover for the given anchor.
+   * Closes it if the same anchor is already open; otherwise opens on the new anchor.
+   */
+  toggle: (anchor: HTMLElement | null, options: ImperativePopoverOptions) => void
+  /** Whether the imperative popover is currently open. */
+  isOpen: boolean
+}
+
+interface ImperativePopoverState {
+  open: boolean
+  anchor: HTMLElement | null
+  options: ImperativePopoverOptions
+}
+
+const ImperativePopoverContext = createContext<UseImperativePopoverReturn | null>(null)
+
+/**
+ * Provides the imperative popover API to all descendant components.
+ * Only one popover is shown at a time (singleton).
+ * Must wrap any component that calls `useImperativePopover()`.
+ *
+ * @example
+ * ```tsx
+ * // main.tsx
+ * <ImperativePopoverProvider>
+ *   <App />
+ * </ImperativePopoverProvider>
+ *
+ * // Any component
+ * const popover = useImperativePopover()
+ *
+ * <button onClick={e => popover.show(e.currentTarget, { content: <MyPanel /> })}>
+ *   Open
+ * </button>
+ * ```
+ */
+export const ImperativePopoverProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [state, setState] = useState<ImperativePopoverState>({
+    open: false,
+    anchor: null,
+    options: { content: null },
+  })
+
+  const show = useCallback(
+    (anchor: HTMLElement | null, options: ImperativePopoverOptions) => {
+      setState({ open: true, anchor, options })
+    },
+    [],
+  )
+
+  const hide = useCallback(() => {
+    setState(prev => ({ ...prev, open: false }))
+  }, [])
+
+  const toggle = useCallback(
+    (anchor: HTMLElement | null, options: ImperativePopoverOptions) => {
+      setState(prev => {
+        if (prev.open && prev.anchor === anchor) {
+          return { ...prev, open: false }
+        }
+        return { open: true, anchor, options }
+      })
+    },
+    [],
+  )
+
+  const value = useMemo<UseImperativePopoverReturn>(
+    () => ({ show, hide, toggle, isOpen: state.open }),
+    [show, hide, toggle, state.open],
+  )
+
+  return (
+    <ImperativePopoverContext.Provider value={value}>
+      {children}
+      <ImperativePopoverPortal state={state} onClose={hide} />
+    </ImperativePopoverContext.Provider>
+  )
+}
+
+ImperativePopoverProvider.displayName = 'ImperativePopoverProvider'
+
+function ImperativePopoverPortal({
+  state,
+  onClose,
+}: {
+  state: ImperativePopoverState
+  onClose: () => void
+}) {
+  if (!state.open || !state.anchor) return null
+
+  const { options } = state
+
+  return (
+    <BasePopover.Root open={state.open} onOpenChange={open => !open && onClose()}>
+      <BasePopover.Portal>
+        <BasePopover.Positioner
+          anchor={state.anchor}
+          side={options.side ?? 'bottom'}
+          align={options.align ?? 'center'}
+          sideOffset={options.sideOffset ?? 8}
+          alignOffset={options.alignOffset ?? 0}
+          className={'z-50'}
+        >
+          <BasePopover.Popup
+            className={clsx(
+              'z-50 min-w-50 max-w-90 rounded-lg border border-(--border-light) bg-(--bg-primary) shadow-lg',
+              options.className,
+            )}
+          >
+            {options.content}
+            <BasePopover.Arrow className="fill-(--bg-primary) stroke-(--border-light)" />
+          </BasePopover.Popup>
+        </BasePopover.Positioner>
+      </BasePopover.Portal>
+    </BasePopover.Root>
+  )
+}
+
+/**
+ * Returns imperative methods for showing a popover anchored to any element.
+ *
+ * Must be used inside `<ImperativePopoverProvider>`.
+ *
+ * @example
+ * ```tsx
+ * const popover = useImperativePopover()
+ *
+ * // Show on button click
+ * <button onClick={e => popover.show(e.currentTarget, { content: <ProfileCard />, side: 'bottom' })}>
+ *   Profile
+ * </button>
+ *
+ * // Toggle
+ * <button onClick={e => popover.toggle(e.currentTarget, { content: <Settings /> })}>
+ *   Settings
+ * </button>
+ * ```
+ */
+export function useImperativePopover(): UseImperativePopoverReturn {
+  const ctx = useContext(ImperativePopoverContext)
+  if (!ctx) throw new Error('useImperativePopover must be used within <ImperativePopoverProvider>')
+  return ctx
+}
+
+
 
 
 

package/src/components/index.ts

@@ -28,13 +28,17 @@ export {
   PopoverClose,
   PopoverHeader,
   PopoverBody,
-  PopoverFooter
+  PopoverFooter,
+  ImperativePopoverProvider,
+  useImperativePopover,
 } from './Popover'
 export type {
   PopoverProps,
   PopoverTriggerProps,
   PopoverContentProps,
-  PopoverCloseProps
+  PopoverCloseProps,
+  ImperativePopoverOptions,
+  UseImperativePopoverReturn,
 } from './Popover'
 
 // Menu Components
@@ -100,8 +104,25 @@ export type {
 } from './ContextMenu'
 
 // Dialog Components
-export { Dialog, DialogHeader, DialogBody, DialogFooter, DialogTrigger, DialogClose } from './Dialog'
-export type { DialogProps, DialogTriggerProps } from './Dialog'
+export {
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  DialogTrigger,
+  DialogClose,
+  DialogProvider,
+  useDialog,
+} from './Dialog'
+export type {
+  DialogProps,
+  DialogTriggerProps,
+  DialogSize,
+  ShowDialogOptions,
+  ConfirmDialogOptions,
+  AlertDialogOptions,
+  UseDialogReturn,
+} from './Dialog'
 
 export { AlertDialog, AlertDialogTrigger } from './AlertDialog'
 export type { AlertDialogProps, AlertDialogTriggerProps } from './AlertDialog'

package/src/main.tsx

@@ -3,13 +3,19 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 import { ThemeProvider } from './context/ThemeContext'
-import { ToastProvider } from './components/Toast'
+import { ToastProvider } from './components'
+import { DialogProvider } from './components'
+import { ImperativePopoverProvider } from './components'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <ThemeProvider>
       <ToastProvider>
-        <App />
+        <DialogProvider>
+          <ImperativePopoverProvider>
+            <App />
+          </ImperativePopoverProvider>
+        </DialogProvider>
       </ToastProvider>
     </ThemeProvider>
   </StrictMode>,