@duro-app/ui 0.18.0 → 0.20.0

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,310 @@
+import {
+  type ReactNode,
+  type RefObject,
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  useId,
+  useRef,
+} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+// --- Types ---
+
+export type DialogSize = 'sm' | 'md' | 'lg'
+
+// --- Context ---
+
+interface DialogContextValue {
+  open: boolean
+  closing: boolean
+  dismissable: boolean
+  requestOpen: () => void
+  requestClose: () => void
+  titleId: string
+  descriptionId: string
+  popupRef: RefObject<HTMLDivElement | null>
+}
+
+const DialogContext = createContext<DialogContextValue | null>(null)
+
+function useDialog() {
+  const ctx = useContext(DialogContext)
+  if (!ctx) throw new Error('Dialog compound components must be used within Dialog.Root')
+  return ctx
+}
+
+// --- Root ---
+
+interface RootProps {
+  children: ReactNode
+  /** Controlled open state */
+  open?: boolean
+  /** Default open state (uncontrolled) */
+  defaultOpen?: boolean
+  /** Called when dialog open state changes */
+  onOpenChange?: (open: boolean) => void
+  /** Whether clicking backdrop closes the dialog. Default: true */
+  dismissable?: boolean
+  /** Duration of the close animation in ms. Default: 140 */
+  closeAnimationDuration?: number
+}
+
+function Root({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  dismissable = true,
+  closeAnimationDuration = 140,
+}: RootProps) {
+  const isControlled = controlledOpen !== undefined
+  const [internalOpen, setInternalOpen] = useState(defaultOpen)
+  const [closing, setClosing] = useState(false)
+  const closingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const popupRef = useRef<HTMLDivElement>(null)
+
+  const isOpen = isControlled ? controlledOpen : internalOpen
+
+  const titleId = useId()
+  const descriptionId = useId()
+
+  const requestOpen = useCallback(() => {
+    if (closingTimerRef.current) {
+      clearTimeout(closingTimerRef.current)
+      closingTimerRef.current = null
+    }
+    setClosing(false)
+    if (!isControlled) setInternalOpen(true)
+    onOpenChange?.(true)
+  }, [isControlled, onOpenChange])
+
+  const requestClose = useCallback(() => {
+    setClosing(true)
+    closingTimerRef.current = setTimeout(() => {
+      setClosing(false)
+      closingTimerRef.current = null
+      if (!isControlled) setInternalOpen(false)
+      onOpenChange?.(false)
+    }, closeAnimationDuration)
+  }, [isControlled, onOpenChange, closeAnimationDuration])
+
+  // If controlled open goes false externally, trigger close animation
+  useEffect(() => {
+    if (isControlled && !controlledOpen && !closing) {
+      // Already closed, nothing to animate
+    }
+  }, [isControlled, controlledOpen, closing])
+
+  // Clean up timer on unmount
+  useEffect(() => {
+    return () => {
+      if (closingTimerRef.current) clearTimeout(closingTimerRef.current)
+    }
+  }, [])
+
+  // Handle Escape key
+  useEffect(() => {
+    if (!isOpen && !closing) return
+    if (!dismissable) return
+
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        requestClose()
+      }
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [isOpen, closing, dismissable, requestClose])
+
+  // Lock body scroll when open
+  useEffect(() => {
+    if (isOpen || closing) {
+      const prev = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+      return () => {
+        document.body.style.overflow = prev
+      }
+    }
+  }, [isOpen, closing])
+
+  return (
+    <DialogContext.Provider
+      value={{
+        open: isOpen || closing,
+        closing,
+        dismissable,
+        requestOpen,
+        requestClose,
+        titleId,
+        descriptionId,
+        popupRef,
+      }}
+    >
+      {children}
+    </DialogContext.Provider>
+  )
+}
+
+// --- Trigger ---
+
+interface TriggerProps {
+  children: ReactNode
+}
+
+function Trigger({children}: TriggerProps) {
+  const {requestOpen} = useDialog()
+
+  return (
+    <html.div onClick={requestOpen} style={styles.inlineWrapper}>
+      {children}
+    </html.div>
+  )
+}
+
+// --- Portal (renders backdrop + viewport + popup) ---
+
+interface PortalProps {
+  children: ReactNode
+  size?: DialogSize
+}
+
+function Portal({children, size = 'md'}: PortalProps) {
+  const {open, closing, dismissable, requestClose, titleId, descriptionId, popupRef} = useDialog()
+
+  const handleBackdropClick = useCallback(() => {
+    if (dismissable) {
+      requestClose()
+    }
+  }, [dismissable, requestClose])
+
+  if (!open) return null
+
+  return (
+    <>
+      {/* Backdrop — click to dismiss */}
+      <html.div
+        style={[
+          styles.backdrop,
+          closing && styles.backdropClosing,
+          !closing && styles.backdropOpen,
+        ]}
+        aria-hidden
+        onClick={handleBackdropClick}
+      />
+
+      {/* Viewport (centering container, pointer-events: none) */}
+      <html.div style={styles.viewport}>
+        <html.div
+          ref={popupRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={titleId}
+          aria-describedby={descriptionId}
+          style={[
+            styles.popup,
+            styles[size],
+            closing && styles.popupClosing,
+            !closing && styles.popupOpen,
+          ]}
+        >
+          {children}
+        </html.div>
+      </html.div>
+    </>
+  )
+}
+
+// --- Header ---
+
+function Header({children}: {children: ReactNode}) {
+  return <html.div style={styles.header}>{children}</html.div>
+}
+
+// --- Title ---
+
+function Title({children}: {children: ReactNode}) {
+  const {titleId} = useDialog()
+  return (
+    <html.h2 id={titleId} style={styles.title}>
+      {children}
+    </html.h2>
+  )
+}
+
+// --- Description ---
+
+function Description({children}: {children: ReactNode}) {
+  const {descriptionId} = useDialog()
+  return (
+    <html.p id={descriptionId} style={styles.description}>
+      {children}
+    </html.p>
+  )
+}
+
+// --- Body ---
+
+function Body({children}: {children: ReactNode}) {
+  return <html.div style={styles.body}>{children}</html.div>
+}
+
+// --- Footer ---
+
+function Footer({children}: {children: ReactNode}) {
+  return <html.div style={styles.footer}>{children}</html.div>
+}
+
+// --- Close ---
+
+interface CloseProps {
+  children?: ReactNode
+  'aria-label'?: string
+}
+
+function Close({children, 'aria-label': ariaLabel = 'Close'}: CloseProps) {
+  const {requestClose} = useDialog()
+
+  if (children) {
+    return (
+      <html.div onClick={requestClose} style={styles.inlineWrapper}>
+        {children}
+      </html.div>
+    )
+  }
+
+  return (
+    <html.button
+      onClick={requestClose}
+      aria-label={ariaLabel}
+      style={styles.closeButton}
+    >
+      <svg width={16} height={16} viewBox="0 0 16 16" fill="none">
+        <path
+          d="M4 4l8 8M12 4l-8 8"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+        />
+      </svg>
+    </html.button>
+  )
+}
+
+// --- Export ---
+
+export const Dialog = {
+  Root,
+  Trigger,
+  Portal,
+  Header,
+  Title,
+  Description,
+  Body,
+  Footer,
+  Close,
+}

package/src/components/Dialog/styles.css.ts

@@ -0,0 +1,197 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+
+export const styles = css.create({
+  // --- Backdrop ---
+  backdrop: {
+    position: 'fixed',
+    inset: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    zIndex: 1000,
+  },
+  backdropOpen: {
+    opacity: {
+      default: 1,
+    },
+    animationName: css.keyframes({
+      from: {opacity: 0},
+      to: {opacity: 1},
+    }),
+    animationDuration: '180ms',
+    animationTimingFunction: 'ease-out',
+    animationFillMode: 'both',
+  },
+  backdropClosing: {
+    opacity: {
+      default: 0,
+    },
+    animationName: css.keyframes({
+      from: {opacity: 1},
+      to: {opacity: 0},
+    }),
+    animationDuration: '140ms',
+    animationTimingFunction: 'ease-in',
+    animationFillMode: 'both',
+  },
+
+  // --- Viewport (centering container) ---
+  viewport: {
+    position: 'fixed',
+    inset: 0,
+    zIndex: 1001,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: spacing.lg,
+    // Allow clicking backdrop through viewport when clicking outside popup
+    pointerEvents: 'none',
+  },
+
+  // --- Popup ---
+  popup: {
+    position: 'relative',
+    backgroundColor: colors.bgCard,
+    borderRadius: radii.lg,
+    boxShadow: shadows.lg,
+    width: '100%',
+    maxHeight: '85vh',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    pointerEvents: 'auto',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+  },
+  popupOpen: {
+    opacity: {
+      default: 1,
+    },
+    animationName: css.keyframes({
+      from: {
+        opacity: 0,
+        transform: 'scale(0.97) translateY(8px)',
+      },
+      to: {
+        opacity: 1,
+        transform: 'scale(1) translateY(0)',
+      },
+    }),
+    animationDuration: '180ms',
+    animationTimingFunction: 'ease-out',
+    animationFillMode: 'both',
+  },
+  popupClosing: {
+    opacity: {
+      default: 0,
+    },
+    animationName: css.keyframes({
+      from: {
+        opacity: 1,
+        transform: 'scale(1) translateY(0)',
+      },
+      to: {
+        opacity: 0,
+        transform: 'scale(0.97) translateY(8px)',
+      },
+    }),
+    animationDuration: '140ms',
+    animationTimingFunction: 'ease-in',
+    animationFillMode: 'both',
+  },
+
+  // --- Sizes ---
+  sm: {maxWidth: 400},
+  md: {maxWidth: 520},
+  lg: {maxWidth: 680},
+
+  // --- Header ---
+  header: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    paddingTop: spacing.lg,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.md,
+    gap: spacing.md,
+  },
+
+  // --- Title ---
+  title: {
+    fontSize: typography.fontSizeLg,
+    fontWeight: typography.fontWeightSemibold,
+    lineHeight: typography.lineHeight,
+    color: colors.text,
+    margin: 0,
+  },
+
+  // --- Description ---
+  description: {
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+    color: colors.textMuted,
+    margin: 0,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.md,
+  },
+
+  // --- Body ---
+  body: {
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.lg,
+    overflowY: 'auto',
+    flex: 1,
+  },
+
+  // --- Footer ---
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: spacing.sm,
+    paddingTop: spacing.md,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.lg,
+    borderTopWidth: 1,
+    borderTopStyle: 'solid',
+    borderTopColor: colors.border,
+  },
+
+  // --- Close button ---
+  closeButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 32,
+    height: 32,
+    borderRadius: radii.sm,
+    borderWidth: 0,
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    color: colors.textMuted,
+    cursor: 'pointer',
+    padding: 0,
+    flexShrink: 0,
+    transitionProperty: 'background-color',
+    transitionDuration: '150ms',
+  },
+
+  // --- Inline wrapper (for Trigger / Close children) ---
+  inlineWrapper: {
+    display: 'inline-flex',
+  },
+
+  // --- Reduced motion ---
+  reducedMotion: {
+    animationDuration: '1ms',
+  },
+})

package/src/components/Drawer/Drawer.meta.ts

@@ -0,0 +1,45 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Modal sliding panel from a screen edge (right, left, or bottom). Slides in with backdrop overlay. Supports swipe-to-dismiss gestures on mobile, backdrop click dismiss, and Escape key. Use for secondary workflows, settings panels, or mobile-friendly detail views.',
+  whenToUse: [
+    'Settings or configuration panels that slide in from the side',
+    'Mobile-friendly detail views (bottom sheet pattern)',
+    'Secondary workflows that need more space than a dialog',
+    'Filters, navigation drawers, or form panels',
+  ],
+  whenNotToUse: [
+    'Centered modal confirmations — use Dialog',
+    'Non-modal side inspection panels — use DetailPanel',
+    'Inline content expansion — use disclosure patterns',
+    'Primary navigation — use SideNav',
+  ],
+  anatomy: {
+    required: ['Root', 'Portal'],
+    optional: ['Trigger', 'Header', 'Title', 'Description', 'Body', 'Footer', 'Close'],
+  },
+  relatedTo: [
+    {component: 'Dialog', relationship: 'Dialog is centered modal; Drawer slides from an edge'},
+    {component: 'DetailPanel', relationship: 'DetailPanel is non-modal and in-flow; Drawer is modal with backdrop'},
+  ],
+  example: `<Drawer.Root anchor="right" open={open} onOpenChange={setOpen}>
+  <Drawer.Trigger>
+    <Button>Open drawer</Button>
+  </Drawer.Trigger>
+  <Drawer.Portal size="md">
+    <Drawer.Header>
+      <Drawer.Title>Settings</Drawer.Title>
+      <Drawer.Close />
+    </Drawer.Header>
+    <Drawer.Body>
+      <Stack gap="md">
+        <Text>Drawer content goes here.</Text>
+      </Stack>
+    </Drawer.Body>
+    <Drawer.Footer>
+      <Button variant="secondary" onClick={() => setOpen(false)}>Done</Button>
+    </Drawer.Footer>
+  </Drawer.Portal>
+</Drawer.Root>`,
+}