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

package/src/components/LoadingSkeleton.tsx

@@ -0,0 +1,84 @@
+/**
+ * LoadingSkeleton Component
+ * Displays a loading skeleton with theme support
+ * Can be customized with different layouts
+ */
+
+import React from 'react'
+
+export interface LoadingSkeletonProps {
+  isDarkTheme?: boolean
+  className?: string
+  layout?: 'default' | 'minimal' | 'custom'
+  customContent?: React.ReactNode
+}
+
+export function LoadingSkeleton({
+  isDarkTheme = false,
+  className = '',
+  layout = 'default',
+  customContent
+}: LoadingSkeletonProps) {
+  if (layout === 'custom' && customContent) {
+    return (
+      <div
+        className={`loading-skeleton ${className}`}
+        data-dark-theme={isDarkTheme ? 'true' : 'false'}
+      >
+        {customContent}
+      </div>
+    )
+  }
+
+  if (layout === 'minimal') {
+    return (
+      <div
+        className={`loading-skeleton loading-skeleton--minimal ${className}`}
+        data-dark-theme={isDarkTheme ? 'true' : 'false'}
+      >
+        <div className="skeleton-spinner"></div>
+      </div>
+    )
+  }
+
+  // Default layout - task app specific but can be overridden
+  return (
+    <div
+      className={`loading-skeleton ${className}`}
+      data-dark-theme={isDarkTheme ? 'true' : 'false'}
+    >
+      <div className="loading-skeleton__content">
+        {/* Header */}
+        <div className="skeleton-header-row">
+          <div className="skeleton-header"></div>
+          <div className="skeleton-button"></div>
+        </div>
+
+        {/* Navigation */}
+        <div className="skeleton-nav">
+          <div className="skeleton-nav-item"></div>
+          <div className="skeleton-nav-item"></div>
+          <div className="skeleton-nav-item"></div>
+        </div>
+
+        {/* Input */}
+        <div className="skeleton-input"></div>
+
+        {/* Filters */}
+        <div className="skeleton-filters">
+          <div className="skeleton-filter"></div>
+          <div className="skeleton-filter"></div>
+          <div className="skeleton-filter"></div>
+        </div>
+
+        {/* Content */}
+        <div className="skeleton-content">
+          <div className="skeleton-content-header"></div>
+          <div className="skeleton-item"></div>
+          <div className="skeleton-item"></div>
+          <div className="skeleton-item"></div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/Modal.tsx

@@ -0,0 +1,171 @@
+/**
+ * Modal Component
+ * Generic modal dialog with keyboard shortcuts and customizable actions
+ *
+ * Styles ship with the package: import '@wolffm/task-ui-components/modal.css'
+ */
+
+import React, { useEffect, useId, useRef } from 'react'
+
+export interface ModalProps {
+  isOpen: boolean
+  title: string
+  onClose: () => void
+  onConfirm?: () => void | Promise<void>
+  children?: React.ReactNode
+  inputValue?: string
+  onInputChange?: (value: string) => void
+  inputPlaceholder?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  confirmDisabled?: boolean
+  confirmDanger?: boolean
+  showCancel?: boolean
+  showConfirm?: boolean
+  className?: string
+  overlayClassName?: string
+  /**
+   * Replaces the whole action row. A wizard has Back/Cancel/Regenerate/Create,
+   * which the fixed Cancel+Confirm pair cannot express — and that is what
+   * pushes an app to hand-roll its own dialog instead of adopting this one.
+   *
+   * `null` means *no* row at all (a progress step, a viewer); omitting it means
+   * "use the default row". `??` collapses those two, so the check below is
+   * against `undefined` explicitly.
+   */
+  actions?: React.ReactNode
+  /** Rendered left of the title, e.g. a wizard's Back button. */
+  lead?: React.ReactNode
+}
+
+/**
+ * Open dialogs, outermost first. Each mounted-and-open Modal pushes a token
+ * and pops it on close, so the handler can tell whether it is the one the
+ * keypress is meant for.
+ */
+const escapeStack: symbol[] = []
+
+export function Modal({
+  isOpen,
+  title,
+  onClose,
+  onConfirm,
+  children,
+  inputValue,
+  onInputChange,
+  inputPlaceholder,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  confirmDisabled = false,
+  confirmDanger = false,
+  showCancel = true,
+  showConfirm = true,
+  className = '',
+  overlayClassName = '',
+  actions,
+  lead
+}: ModalProps) {
+  const titleId = useId()
+  const cardRef = useRef<HTMLDivElement>(null)
+
+  // Escape closes from anywhere in the dialog, not just from a focused input.
+  // Bound to the document rather than the card so it works before anything
+  // inside has been focused — previously the handler hung off the optional
+  // text input, so a dialog without one could not be dismissed by keyboard.
+  //
+  // Only the TOP-MOST open dialog answers, which is what makes a confirm
+  // nested inside another modal usable: the parent's document listener is
+  // still live underneath it, so without the stack one Escape closes both.
+  // onClose is read through a ref so a caller passing an unmemoised handler
+  // cannot re-run this effect and shuffle itself back to the top of the stack.
+  const onCloseRef = useRef(onClose)
+  onCloseRef.current = onClose
+  useEffect(() => {
+    if (!isOpen) return
+    const id = Symbol('modal')
+    escapeStack.push(id)
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      if (escapeStack[escapeStack.length - 1] !== id) return
+      e.preventDefault()
+      onCloseRef.current()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      const at = escapeStack.lastIndexOf(id)
+      if (at >= 0) escapeStack.splice(at, 1)
+    }
+  }, [isOpen])
+
+  // Move focus into the dialog on open, so the keyboard starts inside it.
+  useEffect(() => {
+    if (!isOpen) return
+    const card = cardRef.current
+    if (!card) return
+    const focusable = card.querySelector<HTMLElement>(
+      'input:not([type=hidden]), textarea, select, button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'
+    )
+    ;(focusable ?? card).focus()
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  return (
+    <div className={`modal-overlay ${overlayClassName}`.trim()} onClick={onClose}>
+      <div
+        ref={cardRef}
+        className={`modal-card ${className}`.trim()}
+        onClick={e => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+      >
+        <div className="modal-head">
+          {lead}
+          <h3 id={titleId}>{title}</h3>
+        </div>
+
+        {children}
+
+        {onInputChange && (
+          <input
+            type="text"
+            className="modal-input"
+            value={inputValue || ''}
+            onChange={e => onInputChange(e.target.value)}
+            placeholder={inputPlaceholder}
+            onKeyDown={e => {
+              if (e.key === 'Enter' && !confirmDisabled && onConfirm) {
+                e.preventDefault()
+                void onConfirm()
+              }
+            }}
+          />
+        )}
+
+        {actions !== undefined ? (
+          actions
+        ) : (
+          <div className="modal-actions">
+            {showCancel && (
+              <button className="modal-button" onClick={onClose}>
+                {cancelLabel}
+              </button>
+            )}
+            {showConfirm && onConfirm && (
+              <button
+                className={`modal-button ${confirmDanger ? 'modal-button--danger' : 'modal-button--primary'}`}
+                onClick={() => void onConfirm()}
+                disabled={confirmDisabled}
+              >
+                {confirmLabel}
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/NumberInput.tsx

@@ -0,0 +1,161 @@
+/**
+ * NumberInput Component
+ * A themed number field with its own stepper, for the OS spinner arrows that
+ * no CSS can style (controls.css removes them from a bare <input type=number>).
+ *
+ * It is a real <input type="number"> with every input prop passed through, so
+ * it works controlled (`value` + `onChange`) or uncontrolled (`defaultValue`),
+ * submits in a form, and keeps native min/max/step validation and the arrow
+ * keys. The buttons call the input's own stepUp()/stepDown() and then fire
+ * `input` and `change`, so `onChange` sees an ordinary edit: React's value
+ * tracker compares against what React last wrote, and stepUp() goes around it.
+ *
+ * Holding a button repeats, like the native spinner. The buttons are not tab
+ * stops — the arrow keys on the field already step — but they are labelled.
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { Icon } from '@wolffm/themes'
+import '../number-input.css'
+
+export type NumberInputSize = 'sm' | 'md' | 'lg'
+
+export interface NumberInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  size?: NumberInputSize
+  /** Labels for the two buttons; default "Increase" / "Decrease". */
+  increaseLabel?: string
+  decreaseLabel?: string
+}
+
+const REPEAT_DELAY_MS = 400
+const REPEAT_EVERY_MS = 60
+const ICON_SIZE: Record<NumberInputSize, number> = { sm: 12, md: 14, lg: 16 }
+
+export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  function NumberInput(
+    {
+      size = 'md',
+      increaseLabel = 'Increase',
+      decreaseLabel = 'Decrease',
+      className,
+      disabled,
+      readOnly,
+      onInput,
+      ...rest
+    },
+    ref
+  ) {
+    const inputRef = useRef<HTMLInputElement | null>(null)
+    const repeat = useRef<{
+      delay?: ReturnType<typeof setTimeout>
+      every?: ReturnType<typeof setInterval>
+    }>({})
+    // Mirrors the field so the buttons can disable at min/max, controlled or not.
+    const [current, setCurrent] = useState<string>(String(rest.value ?? rest.defaultValue ?? ''))
+    useEffect(() => {
+      if (rest.value !== undefined) setCurrent(String(rest.value))
+    }, [rest.value])
+
+    const setRef = useCallback(
+      (node: HTMLInputElement | null) => {
+        inputRef.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+      },
+      [ref]
+    )
+
+    const stop = useCallback(() => {
+      clearTimeout(repeat.current.delay)
+      clearInterval(repeat.current.every)
+      repeat.current = {}
+    }, [])
+    useEffect(() => stop, [stop])
+
+    const stepOnce = useCallback((dir: 1 | -1) => {
+      const input = inputRef.current
+      if (!input || input.disabled || input.readOnly) return false
+      const before = input.value
+      if (dir === 1) input.stepUp()
+      else input.stepDown()
+      if (input.value === before) return false
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      input.dispatchEvent(new Event('change', { bubbles: true }))
+      return true
+    }, [])
+
+    const start = (dir: 1 | -1) => (e: React.PointerEvent) => {
+      if (e.button !== 0) return
+      // Keep focus (and the caret) in the field, as the native spinner does.
+      e.preventDefault()
+      inputRef.current?.focus({ preventScroll: true })
+      stop()
+      if (!stepOnce(dir)) return
+      repeat.current.delay = setTimeout(() => {
+        repeat.current.every = setInterval(() => {
+          if (!stepOnce(dir)) stop()
+        }, REPEAT_EVERY_MS)
+      }, REPEAT_DELAY_MS)
+    }
+
+    const n = current === '' ? NaN : Number(current)
+    const min = rest.min === undefined || rest.min === '' ? -Infinity : Number(rest.min)
+    const max = rest.max === undefined || rest.max === '' ? Infinity : Number(rest.max)
+    const locked = disabled || readOnly
+
+    return (
+      <span
+        className={[
+          'hdk-number',
+          `hdk-number--${size}`,
+          disabled && 'hdk-number--disabled',
+          className
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <input
+          ref={setRef}
+          type="number"
+          className="hdk-number__input"
+          disabled={disabled}
+          readOnly={readOnly}
+          onInput={e => {
+            setCurrent(e.currentTarget.value)
+            onInput?.(e)
+          }}
+          {...rest}
+        />
+        <span className="hdk-number__steps">
+          <button
+            type="button"
+            tabIndex={-1}
+            className="hdk-number__step"
+            aria-label={increaseLabel}
+            disabled={locked || n >= max}
+            onPointerDown={start(1)}
+            onPointerUp={stop}
+            onPointerLeave={stop}
+            onPointerCancel={stop}
+          >
+            <Icon name="chevron-up" size={ICON_SIZE[size]} />
+          </button>
+          <button
+            type="button"
+            tabIndex={-1}
+            className="hdk-number__step"
+            aria-label={decreaseLabel}
+            disabled={locked || n <= min}
+            onPointerDown={start(-1)}
+            onPointerUp={stop}
+            onPointerLeave={stop}
+            onPointerCancel={stop}
+          >
+            <Icon name="chevron-down" size={ICON_SIZE[size]} />
+          </button>
+        </span>
+      </span>
+    )
+  }
+)