@hadoku/task-ui-components 0.0.0-stage → 4.20.3

package/src/components/ThemeIcons.tsx

@@ -0,0 +1,127 @@
+/**
+ * Component icons - Simple monochrome SVG icons for theme picker
+ * All icons use currentColor so they can be styled with CSS
+ */
+
+import React from 'react'
+
+const iconProps = {
+  width: 20,
+  height: 20,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round' as const,
+  strokeLinejoin: 'round' as const
+}
+
+export const SettingsIcon = () => (
+  <svg {...iconProps}>
+    {/* Gear teeth as rectangles */}
+    <rect x="11" y="1" width="2" height="3" fill="currentColor" />
+    <rect x="16.5" y="3.5" width="3" height="2" fill="currentColor" transform="rotate(45 18 4.5)" />
+    <rect x="19" y="11" width="3" height="2" fill="currentColor" />
+    <rect
+      x="16.5"
+      y="18.5"
+      width="3"
+      height="2"
+      fill="currentColor"
+      transform="rotate(-45 18 19.5)"
+    />
+    <rect x="11" y="20" width="2" height="3" fill="currentColor" />
+    <rect x="4.5" y="18.5" width="3" height="2" fill="currentColor" transform="rotate(45 6 19.5)" />
+    <rect x="2" y="11" width="3" height="2" fill="currentColor" />
+    <rect x="4.5" y="3.5" width="3" height="2" fill="currentColor" transform="rotate(-45 6 4.5)" />
+
+    {/* Outer ring */}
+    <circle cx="12" cy="12" r="7" fill="currentColor" />
+
+    {/* Center hole */}
+    <circle cx="12" cy="12" r="4" fill="var(--color-bg-card)" />
+  </svg>
+)
+
+export const TagIcon = () => (
+  <svg {...iconProps} width={16} height={16} viewBox="0 0 20 20">
+    {/* Tag body - rectangular shape pointing right */}
+    <path d="M2 4 L12 4 L16 10 L12 16 L2 16 Z" fill="currentColor" />
+    {/* Hole in tag */}
+    <circle cx="6" cy="10" r="1.5" fill="white" />
+  </svg>
+)
+
+export const CircleIcon = () => (
+  <svg {...iconProps}>
+    <circle cx="12" cy="12" r="8" />
+  </svg>
+)
+
+export const SquareIcon = () => (
+  <svg {...iconProps}>
+    <rect x="5" y="5" width="14" height="14" rx="2" />
+  </svg>
+)
+
+export const TriangleIcon = () => (
+  <svg {...iconProps}>
+    <path d="M12 5 L21 19 L3 19 Z" />
+  </svg>
+)
+
+export const DiamondIcon = () => (
+  <svg {...iconProps}>
+    <path d="M12 2 L22 12 L12 22 L2 12 Z" />
+  </svg>
+)
+
+export const StarIcon = () => (
+  <svg {...iconProps}>
+    <polygon points="12,2 15,10 23,10 17,15 19,23 12,18 5,23 7,15 1,10 9,10" />
+  </svg>
+)
+
+export const HexagonIcon = () => (
+  <svg {...iconProps}>
+    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+  </svg>
+)
+
+export const PentagonIcon = () => (
+  <svg {...iconProps}>
+    <path d="M12 2 L22 9 L18 20 L6 20 L2 9 Z" />
+  </svg>
+)
+
+export const OctagonIcon = () => (
+  <svg {...iconProps}>
+    <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86" />
+  </svg>
+)
+
+/**
+ * Fallback icon sets for themes - provides 8 distinct shapes
+ * Use these when you don't have specific icons for your themes
+ */
+
+export const FALLBACK_ICONS = [
+  CircleIcon,
+  SquareIcon,
+  TriangleIcon,
+  DiamondIcon,
+  StarIcon,
+  HexagonIcon,
+  PentagonIcon,
+  OctagonIcon
+] as const
+
+/**
+ * Get a fallback icon for a theme by index
+ * Icons repeat after 8 themes to provide consistent differentiation
+ */
+
+export function getFallbackIcon(index: number) {
+  const Icon = FALLBACK_ICONS[index % FALLBACK_ICONS.length]
+  return <Icon />
+}

package/src/components/ThemePicker.tsx

@@ -0,0 +1,149 @@
+/**
+ * ThemePicker component
+ * A beautiful theme picker with light/dark variants for each theme family
+ * Designed to work with any theme system via configuration
+ */
+
+import React, { useRef, useLayoutEffect, useState } from 'react'
+import { Tooltip } from './Tooltip'
+import type { ThemePickerProps } from '../types'
+import { SettingsIcon, getFallbackIcon } from './ThemeIcons'
+// MoonIcon is a theme-family icon and lives with the theme model now.
+import { MoonIcon } from '@wolffm/themes'
+import '../theme-picker.css'
+
+/**
+ * ThemePicker - Dropdown theme selector with optional settings button
+ *
+ * @example
+ * ```tsx
+ * import { ThemePicker } from '@wolffm/task-ui-components'
+ * import '@wolffm/task-ui-components/theme-picker.css'
+ *
+ * <ThemePicker
+ *   currentTheme="dark"
+ *   isOpen={showPicker}
+ *   themeFamilies={MY_THEME_FAMILIES}
+ *   onThemeChange={setTheme}
+ *   onToggle={() => setShowPicker(!showPicker)}
+ *   onSettingsClick={() => openSettings()}
+ * />
+ * ```
+ */
+export function ThemePicker({
+  currentTheme,
+  isOpen,
+  themeFamilies,
+  onThemeChange,
+  onToggle,
+  onSettingsClick,
+  getThemeIcon,
+  className = '',
+  dropdownPlacement = 'auto'
+}: ThemePickerProps) {
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const [resolvedPlacement, setResolvedPlacement] = useState<'left' | 'right'>('right')
+
+  // Edge detection: when 'auto', measure the dropdown after render and flip if it overflows
+  useLayoutEffect(() => {
+    if (!isOpen) return
+
+    if (dropdownPlacement !== 'auto') {
+      setResolvedPlacement(dropdownPlacement)
+      return
+    }
+
+    // Start with right (default), then check if it overflows
+    setResolvedPlacement('right')
+
+    // Use rAF to measure after the browser has laid out the dropdown
+    const frameId = requestAnimationFrame(() => {
+      const el = dropdownRef.current
+      if (!el) return
+      const rect = el.getBoundingClientRect()
+      if (rect.right > window.innerWidth) {
+        setResolvedPlacement('left')
+      }
+    })
+
+    return () => cancelAnimationFrame(frameId)
+  }, [isOpen, dropdownPlacement])
+
+  // Get icon for current theme (use provided function or fallback to MoonIcon)
+  const currentIcon = getThemeIcon ? getThemeIcon(currentTheme) : <MoonIcon />
+
+  const openLeftClass = resolvedPlacement === 'left' ? 'theme-picker--open-left' : ''
+
+  return (
+    <div className={`theme-picker ${openLeftClass} ${className}`.trim()}>
+      <Tooltip content="Choose theme">
+        <button
+          className="app-header__icon-btn theme-toggle-btn"
+          onClick={onToggle}
+          aria-label="Choose theme"
+        >
+          {currentIcon}
+        </button>
+      </Tooltip>
+      {isOpen && (
+        <div
+          ref={dropdownRef}
+          className="theme-picker__dropdown"
+          onClick={e => e.stopPropagation()}
+        >
+          <div className="theme-picker__main">
+            <div className="theme-picker__pills">
+              {themeFamilies.map((family, idx) => {
+                // Use provided icons or fallback to generic shapes
+                const lightIcon = family.lightIcon ?? getFallbackIcon(idx)
+                const darkIcon = family.darkIcon ?? getFallbackIcon(idx)
+
+                return (
+                  <div key={idx} className="theme-pill">
+                    {/* Light variant button */}
+                    <Tooltip content={family.lightLabel}>
+                      <button
+                        className={`theme-pill__btn theme-pill__btn--light ${currentTheme === family.lightTheme ? 'active' : ''}`}
+                        onClick={() => onThemeChange(family.lightTheme)}
+                        aria-label={family.lightLabel}
+                      >
+                        <div className="theme-pill__icon">{lightIcon}</div>
+                      </button>
+                    </Tooltip>
+
+                    {/* Dark variant button */}
+                    <Tooltip content={family.darkLabel}>
+                      <button
+                        className={`theme-pill__btn theme-pill__btn--dark ${currentTheme === family.darkTheme ? 'active' : ''}`}
+                        onClick={() => onThemeChange(family.darkTheme)}
+                        aria-label={family.darkLabel}
+                      >
+                        <div className="theme-pill__icon">{darkIcon}</div>
+                      </button>
+                    </Tooltip>
+                  </div>
+                )
+              })}
+            </div>
+            {/* Settings button - separate column on the right */}
+            {onSettingsClick && (
+              <Tooltip content="Settings">
+                <button
+                  className="theme-picker__settings-icon"
+                  onClick={() => {
+                    onSettingsClick()
+                    onToggle() // Close picker after opening settings
+                  }}
+                  aria-label="Settings"
+                >
+                  <SettingsIcon />
+                </button>
+              </Tooltip>
+            )}
+          </div>
+        </div>
+      )}
+      {isOpen && <div className="theme-picker__overlay" onClick={onToggle} />}
+    </div>
+  )
+}

package/src/components/Toast.tsx

@@ -0,0 +1,92 @@
+/**
+ * Toast Notification Component
+ * Displays temporary notification messages with different types
+ */
+
+import React, { useEffect, useState } from 'react'
+
+export interface ToastProps {
+  message: string
+  type?: 'success' | 'error' | 'info' | 'warning'
+  duration?: number
+  onClose: () => void
+}
+
+/**
+ * Helper function to render SVG icon wrapper with consistent styling
+ */
+const renderIcon = (children: React.ReactNode) => (
+  <svg
+    className="toast__icon"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    {children}
+  </svg>
+)
+
+export function Toast({ message, type = 'info', duration = 3000, onClose }: ToastProps) {
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    // Fade in with slight delay for smoother appearance
+    const showTimer = setTimeout(() => {
+      setIsVisible(true)
+    }, 50)
+
+    // Auto-dismiss after duration
+    const hideTimer = setTimeout(() => {
+      setIsVisible(false)
+      // Wait for fade-out animation before calling onClose
+      setTimeout(onClose, 500)
+    }, duration)
+
+    return () => {
+      clearTimeout(showTimer)
+      clearTimeout(hideTimer)
+    }
+  }, [duration, onClose])
+
+  const getIcon = () => {
+    switch (type) {
+      case 'success':
+        return renderIcon(<path d="M20 6L9 17l-5-5" />)
+      case 'error':
+        return renderIcon(
+          <>
+            <circle cx="12" cy="12" r="10" />
+            <line x1="15" y1="9" x2="9" y2="15" />
+            <line x1="9" y1="9" x2="15" y2="15" />
+          </>
+        )
+      case 'warning':
+        return renderIcon(
+          <>
+            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+            <line x1="12" y1="9" x2="12" y2="13" />
+            <line x1="12" y1="17" x2="12.01" y2="17" />
+          </>
+        )
+      case 'info':
+      default:
+        return renderIcon(
+          <>
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="16" x2="12" y2="12" />
+            <line x1="12" y1="8" x2="12.01" y2="8" />
+          </>
+        )
+    }
+  }
+
+  return (
+    <div className={`toast toast--${type} ${isVisible ? 'toast--visible' : ''}`}>
+      {getIcon()}
+      <span className="toast__message">{message}</span>
+    </div>
+  )
+}

package/src/components/Toaster.tsx

@@ -0,0 +1,43 @@
+/**
+ * Toaster Container Component
+ * Manages and displays multiple toast notifications
+ */
+
+import React from 'react'
+import { Toast } from './Toast'
+import '../toaster.css'
+
+export interface ToastState {
+  id: number
+  message: string
+  type: 'success' | 'error' | 'info' | 'warning'
+  duration?: number
+}
+
+export interface ToasterProps {
+  toasts: ToastState[]
+  onDismiss: (id: number) => void
+  position?:
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right'
+}
+
+export function Toaster({ toasts, onDismiss, position = 'bottom-center' }: ToasterProps) {
+  return (
+    <div className={`toast-container toast-container--${position}`}>
+      {toasts.map(toast => (
+        <Toast
+          key={toast.id}
+          message={toast.message}
+          type={toast.type}
+          duration={toast.duration}
+          onClose={() => onDismiss(toast.id)}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/Tooltip.tsx

@@ -0,0 +1,212 @@
+/**
+ * Tooltip Component
+ * Themed replacement for `title=`. A native title tooltip is OS-drawn, waits
+ * about a second, never appears on keyboard focus and cannot be themed.
+ *
+ * Meets WCAG 1.4.13 (content on hover or focus): it shows on hover AND focus,
+ * Escape dismisses it, and the pointer can move onto the bubble without it
+ * closing. The child gets `aria-describedby`, so the text is announced —
+ * unless it is the child's own `aria-label`, which would read it twice. That
+ * is the common case for an icon button: the label names it, and the tooltip
+ * shows sighted users the same words.
+ *
+ * Like <Select>, the bubble is portalled into the anchor's theme scope (see
+ * themeScopeOf), so it keeps the theme's tokens and is placed correctly even
+ * under a transformed ancestor.
+ */
+
+import React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import '../tooltip.css'
+import { themeScopeOf } from '../lib/themeScope'
+import { placeTooltip, type Placed, type TooltipPlacement } from '../lib/tooltipPlacement'
+
+export type { TooltipPlacement }
+export type TooltipVariant = 'inverse' | 'card' | 'primary'
+
+export interface TooltipProps {
+  content: React.ReactNode
+  /** Preferred side; flips to the opposite one when it would leave the viewport. */
+  placement?: TooltipPlacement
+  variant?: TooltipVariant
+  /** Hover delay before showing, ms. Focus shows immediately. */
+  delay?: number
+  /** Render the child alone, e.g. while a menu it belongs to is open. */
+  disabled?: boolean
+  /** A single element. Tooltip attaches its ref and pointer/focus handlers to it
+   *  directly (composed with the child's own) and adds aria-describedby. */
+  children: React.ReactElement<AnchorProps>
+}
+
+/** What Tooltip reads from, and adds to, its child. No wrapper element: a
+ *  wrapper — even `display: contents` — still changes the DOM tree, and with it
+ *  every `:last-child`, `>` and `+` selector aimed at the child. */
+interface AnchorProps {
+  'aria-describedby'?: string
+  'aria-label'?: string
+  ref?: React.Ref<HTMLElement>
+  onPointerEnter?: React.PointerEventHandler<HTMLElement>
+  onPointerLeave?: React.PointerEventHandler<HTMLElement>
+  onPointerDown?: React.PointerEventHandler<HTMLElement>
+  onFocus?: React.FocusEventHandler<HTMLElement>
+  onBlur?: React.FocusEventHandler<HTMLElement>
+}
+
+/** The child's own ref: a prop in React 19, on the element in React 18 (where
+ *  reading it from props is always undefined, and in 19 `element.ref` warns). */
+function childRefOf(child: React.ReactElement<AnchorProps>): React.Ref<HTMLElement> | undefined {
+  if (!React.version.startsWith('18')) return child.props.ref
+  return (child as unknown as { ref?: React.Ref<HTMLElement> }).ref ?? undefined
+}
+
+const HIDE_GRACE_MS = 120
+
+export function Tooltip({
+  content,
+  placement = 'top',
+  variant = 'card',
+  delay = 300,
+  disabled = false,
+  children
+}: TooltipProps) {
+  const tipId = useId()
+  const [open, setOpen] = useState(false)
+  const [placed, setPlaced] = useState<Placed | null>(null)
+  const [scope, setScope] = useState<HTMLElement | null>(null)
+  const anchorRef = useRef<HTMLElement | null>(null)
+  const bubbleRef = useRef<HTMLDivElement>(null)
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  const show = useCallback((after: number) => {
+    clearTimeout(timer.current)
+    timer.current = setTimeout(() => {
+      setScope(themeScopeOf(anchorRef.current))
+      setOpen(true)
+    }, after)
+  }, [])
+
+  const hide = useCallback((after: number) => {
+    clearTimeout(timer.current)
+    timer.current = setTimeout(() => {
+      setOpen(false)
+      setPlaced(null)
+    }, after)
+  }, [])
+
+  useEffect(() => () => clearTimeout(timer.current), [])
+
+  const childRef = childRefOf(children)
+  const setAnchor = useCallback(
+    (node: HTMLElement | null) => {
+      anchorRef.current = node
+      if (typeof childRef === 'function') childRef(node)
+      else if (childRef) (childRef as React.MutableRefObject<HTMLElement | null>).current = node
+    },
+    [childRef]
+  )
+
+  const place = useCallback(() => {
+    const target = anchorRef.current
+    const bubble = bubbleRef.current
+    if (!target || !bubble) return
+    setPlaced(
+      placeTooltip(
+        placement,
+        target.getBoundingClientRect(),
+        bubble.offsetWidth,
+        bubble.offsetHeight
+      )
+    )
+  }, [placement])
+
+  useLayoutEffect(() => {
+    if (open && scope) place()
+  }, [open, scope, place, content])
+
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') hide(0)
+    }
+    window.addEventListener('scroll', place, true)
+    window.addEventListener('resize', place)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('scroll', place, true)
+      window.removeEventListener('resize', place)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open, place, hide])
+
+  if (disabled || content == null || content === '') return children
+
+  const visible = open && placed !== null
+  const restatesLabel = typeof content === 'string' && content === children.props['aria-label']
+  const style: React.CSSProperties = placed
+    ? ({
+        left: placed.left,
+        top: placed.top,
+        '--hdk-tooltip-arrow': `${placed.arrow}px`
+      } as React.CSSProperties)
+    : { left: 0, top: 0 }
+
+  const own = children.props
+  return (
+    <>
+      {React.cloneElement(children, {
+        ref: setAnchor,
+        onPointerEnter: e => {
+          own.onPointerEnter?.(e)
+          if (e.pointerType === 'mouse') show(delay)
+        },
+        onPointerLeave: e => {
+          own.onPointerLeave?.(e)
+          if (e.pointerType === 'mouse') hide(HIDE_GRACE_MS)
+        },
+        // A press dismisses it, as it does a native title: the click usually
+        // opens something (a menu, a dialog) the bubble would sit on top of.
+        onPointerDown: e => {
+          own.onPointerDown?.(e)
+          hide(0)
+        },
+        onFocus: e => {
+          own.onFocus?.(e)
+          // Keyboard focus only — a mouse click focuses too, and the hover
+          // path already handles that pointer.
+          if (e.currentTarget.matches(':focus-visible')) show(0)
+        },
+        onBlur: e => {
+          own.onBlur?.(e)
+          hide(0)
+        },
+        'aria-describedby':
+          [own['aria-describedby'], open && !restatesLabel ? tipId : null]
+            .filter(Boolean)
+            .join(' ') || undefined
+      })}
+      {open &&
+        scope &&
+        createPortal(
+          <div
+            ref={bubbleRef}
+            id={tipId}
+            role="tooltip"
+            className={[
+              'hdk-tooltip',
+              `hdk-tooltip--${variant}`,
+              `hdk-tooltip--${placed?.side ?? placement}`,
+              visible && 'hdk-tooltip--visible'
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            style={style}
+            onPointerEnter={() => clearTimeout(timer.current)}
+            onPointerLeave={() => hide(HIDE_GRACE_MS)}
+          >
+            {content}
+          </div>,
+          scope
+        )}
+    </>
+  )
+}

package/src/context-menu.css

@@ -0,0 +1,11 @@
+/**
+ * ContextMenu Component Styles
+ * Generic context menu with dynamic positioning
+ */
+
+.context-menu {
+  position: fixed;
+  left: var(--context-menu-x, 0);
+  top: var(--context-menu-y, 0);
+  z-index: var(--context-menu-z-index, 1000);
+}