@w5-ui/react 0.1.0

package/src/components/TimeRange.tsx

@@ -0,0 +1,152 @@
+import { useState, useRef, useEffect, useId } from 'react'
+import type { KeyboardEvent } from 'react'
+
+const PRESETS = [
+  { id: '1h', label: 'Last 1 hour', short: 'Last 1 h' },
+  { id: '6h', label: 'Last 6 hours', short: 'Last 6 h' },
+  { id: '24h', label: 'Last 24 hours', short: 'Last 24 h' },
+  { id: '7d', label: 'Last 7 days', short: 'Last 7 d' },
+  { id: '30d', label: 'Last 30 days', short: 'Last 30 d' },
+] as const
+
+export type TimeRangeId = (typeof PRESETS)[number]['id']
+
+export interface TimeRangeProps {
+  value?: TimeRangeId
+  onChange?: (value: TimeRangeId) => void
+}
+
+export function TimeRange({ value = '1h', onChange }: TimeRangeProps) {
+  const uid = useId()
+  const listId = `${uid}-list`
+  const [open, setOpen] = useState(false)
+  const [activeIdx, setActiveIdx] = useState(0)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  const selected = PRESETS.find((p) => p.id === value) ?? PRESETS[0]
+
+  useEffect(() => {
+    if (!open) return
+    function handler(e: MouseEvent) {
+      if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  function toggle() {
+    setOpen((prev) => {
+      if (!prev) setActiveIdx(PRESETS.findIndex((p) => p.id === value))
+      return !prev
+    })
+  }
+
+  function select(id: TimeRangeId) {
+    onChange?.(id)
+    setOpen(false)
+    triggerRef.current?.focus()
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (!open) {
+      if (['ArrowDown', 'Enter', ' '].includes(e.key)) {
+        e.preventDefault()
+        setActiveIdx(PRESETS.findIndex((p) => p.id === value))
+        setOpen(true)
+      }
+      return
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      setOpen(false)
+      triggerRef.current?.focus()
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.min(i + 1, PRESETS.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      setActiveIdx(0)
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      setActiveIdx(PRESETS.length - 1)
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      select(PRESETS[activeIdx].id)
+    } else if (e.key === 'Tab') {
+      setOpen(false)
+    }
+  }
+
+  return (
+    <div ref={wrapperRef} className="time-range-root">
+      <button
+        ref={triggerRef}
+        type="button"
+        className="btn time-range-trigger"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={open ? listId : undefined}
+        onClick={toggle}
+        onKeyDown={onKeyDown}
+      >
+        {selected.short}
+        <svg
+          className="time-range-chevron"
+          width="10"
+          height="6"
+          viewBox="0 0 10 6"
+          aria-hidden="true"
+          focusable="false"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M1 1l4 4 4-4" />
+        </svg>
+      </button>
+      {open && (
+        <ul id={listId} role="listbox" aria-label="Time range" className="time-range-list">
+          {PRESETS.map((p, idx) => (
+            <li
+              key={p.id}
+              role="option"
+              aria-selected={p.id === value}
+              tabIndex={-1}
+              data-active={idx === activeIdx ? 'true' : undefined}
+              className="time-range-option"
+              onMouseEnter={() => setActiveIdx(idx)}
+              onMouseDown={(e) => {
+                e.preventDefault()
+                select(p.id)
+              }}
+            >
+              {p.label}
+              {p.id === value && (
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 12 12"
+                  aria-hidden="true"
+                  focusable="false"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M2 6l3 3 5-5" />
+                </svg>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/Timeline.tsx

@@ -0,0 +1,31 @@
+export interface TimelineEvent {
+  id: string
+  title: string
+  description?: string
+  time: string
+  variant?: 'info' | 'warn' | 'danger' | 'success' | 'neutral'
+}
+
+export interface TimelineProps {
+  events: TimelineEvent[]
+  className?: string
+}
+
+export function Timeline({ events, className = '' }: TimelineProps) {
+  return (
+    <ol className={`timeline ${className}`.trim()} aria-label="Event timeline">
+      {events.map((e) => (
+        <li key={e.id} className={`timeline__item timeline__item--${e.variant ?? 'neutral'}`}>
+          <span className="timeline__dot" aria-hidden="true" />
+          <div className="timeline__content">
+            <div className="timeline__header">
+              <span className="timeline__title">{e.title}</span>
+              <time className="timeline__time">{e.time}</time>
+            </div>
+            {e.description && <p className="timeline__desc">{e.description}</p>}
+          </div>
+        </li>
+      ))}
+    </ol>
+  )
+}

package/src/components/Toast.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react'
+import { CloseIcon } from '../icons.js'
+
+export type ToastVariant = 'success' | 'info' | 'warn' | 'danger'
+
+interface ToastItem {
+  id: string
+  message: string
+  variant: ToastVariant
+}
+
+type Listener = (item: ToastItem) => void
+const listeners = new Set<Listener>()
+let seq = 0
+
+export const toast = {
+  show(message: string, variant: ToastVariant = 'info') {
+    const item: ToastItem = { id: String(++seq), message, variant }
+    listeners.forEach((l) => l(item))
+  },
+  success: (msg: string) => toast.show(msg, 'success'),
+  warn: (msg: string) => toast.show(msg, 'warn'),
+  danger: (msg: string) => toast.show(msg, 'danger'),
+  info: (msg: string) => toast.show(msg, 'info'),
+}
+
+export function Toaster() {
+  const [items, setItems] = useState<ToastItem[]>([])
+
+  useEffect(() => {
+    const add = (item: ToastItem) => {
+      setItems((prev) => [...prev, item])
+      setTimeout(() => remove(item.id), 4000)
+    }
+    listeners.add(add)
+    return () => {
+      listeners.delete(add)
+    }
+  }, [])
+
+  function remove(id: string) {
+    setItems((prev) => prev.filter((t) => t.id !== id))
+  }
+
+  return (
+    <div
+      className="toaster"
+      role="log"
+      aria-label="Notifications"
+      aria-live="polite"
+      aria-atomic="false"
+    >
+      {items.map((item) => (
+        <div
+          key={item.id}
+          className={`toast toast-${item.variant}`}
+          role={item.variant === 'danger' ? 'alert' : 'status'}
+        >
+          <span className="toast-msg">{item.message}</span>
+          <button
+            type="button"
+            className="toast-dismiss icon-btn"
+            onClick={() => remove(item.id)}
+            aria-label="Dismiss notification"
+          >
+            <CloseIcon aria-hidden="true" />
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/Toggle.tsx

@@ -0,0 +1,68 @@
+import { useId } from 'react'
+
+export interface ToggleProps {
+  on: boolean
+  onToggle?: () => void
+  ariaLabel?: string
+  ariaDescribedBy?: string
+}
+
+export function Toggle({ on, onToggle, ariaLabel, ariaDescribedBy }: ToggleProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={on}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedBy}
+      onClick={onToggle}
+      className={`toggle-track ${on ? 'on' : 'off'}`}
+    >
+      <span className="knob" />
+    </button>
+  )
+}
+
+export interface RowToggleProps {
+  title: string
+  description: string
+  on: boolean
+  onToggle?: () => void
+}
+
+export function RowToggle({ title, description, on, onToggle }: RowToggleProps) {
+  const descId = useId()
+  return (
+    <div className="row-toggle">
+      <div className="info">
+        <div className="t">{title}</div>
+        <div className="d" id={descId}>
+          {description}
+        </div>
+      </div>
+      <Toggle on={on} onToggle={onToggle} ariaLabel={title} ariaDescribedBy={descId} />
+    </div>
+  )
+}
+
+export interface RowToggleListProps {
+  items: { title: string; description: string }[]
+  state: Record<string, boolean>
+  onToggle: (title: string) => void
+}
+
+export function RowToggleList({ items, state, onToggle }: RowToggleListProps) {
+  return (
+    <>
+      {items.map((it) => (
+        <RowToggle
+          key={it.title}
+          title={it.title}
+          description={it.description}
+          on={!!state[it.title]}
+          onToggle={() => onToggle(it.title)}
+        />
+      ))}
+    </>
+  )
+}

package/src/components/ToggleGroup.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react'
+
+export interface ToggleGroupOption {
+  value: string
+  label: ReactNode
+  disabled?: boolean
+}
+
+export interface ToggleGroupProps {
+  options: ToggleGroupOption[]
+  value: string[]
+  onChange: (value: string[]) => void
+  ariaLabel: string
+  size?: 'sm' | 'md'
+  className?: string
+}
+
+export function ToggleGroup({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  size = 'md',
+  className = '',
+}: ToggleGroupProps) {
+  function toggle(v: string) {
+    if (value.includes(v)) {
+      onChange(value.filter((x) => x !== v))
+    } else {
+      onChange([...value, v])
+    }
+  }
+
+  return (
+    <div
+      role="group"
+      aria-label={ariaLabel}
+      className={`tg-group tg-group--${size}${className ? ` ${className}` : ''}`}
+    >
+      {options.map((opt) => {
+        const pressed = value.includes(opt.value)
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            aria-pressed={pressed}
+            disabled={opt.disabled}
+            className={`tg-btn${pressed ? ' tg-btn--on' : ''}`}
+            onClick={() => toggle(opt.value)}
+          >
+            {opt.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/Tooltip.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+import { useId } from 'react'
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'
+
+export interface TooltipProps {
+  label: string
+  children: ReactNode
+  placement?: TooltipPlacement
+  className?: string
+}
+
+export function Tooltip({ label, children, placement = 'top', className = '' }: TooltipProps) {
+  const id = useId()
+  return (
+    <span className={`tooltip-wrapper tooltip-${placement} ${className}`.trim()}>
+      <span className="tooltip-trigger" aria-describedby={id}>
+        {children}
+      </span>
+      <span id={id} role="tooltip" className="tooltip-content">
+        {label}
+      </span>
+    </span>
+  )
+}

package/src/components/TransferList.tsx

@@ -0,0 +1,227 @@
+import { useId, useRef, useState } from 'react'
+
+export interface TransferListItem {
+  id: string
+  label: string
+  description?: string
+}
+
+export interface TransferListProps {
+  sourceLabel?: string
+  targetLabel?: string
+  source?: TransferListItem[]
+  target?: TransferListItem[]
+  defaultSource?: TransferListItem[]
+  defaultTarget?: TransferListItem[]
+  onChange?: (source: TransferListItem[], target: TransferListItem[]) => void
+  className?: string
+}
+
+export function TransferList({
+  sourceLabel = 'Available',
+  targetLabel = 'Selected',
+  source: srcProp,
+  target: tgtProp,
+  defaultSource = [],
+  defaultTarget = [],
+  onChange,
+  className = '',
+}: TransferListProps) {
+  const gid = useId()
+  const [intSrc, setIntSrc] = useState<TransferListItem[]>(() => srcProp ?? defaultSource)
+  const [intTgt, setIntTgt] = useState<TransferListItem[]>(() => tgtProp ?? defaultTarget)
+  const srcItems = srcProp !== undefined ? srcProp : intSrc
+  const tgtItems = tgtProp !== undefined ? tgtProp : intTgt
+
+  const [selSrc, setSelSrc] = useState(new Set<string>())
+  const [selTgt, setSelTgt] = useState(new Set<string>())
+  const [focSrc, setFocSrc] = useState(0)
+  const [focTgt, setFocTgt] = useState(0)
+  const srcRefs = useRef<(HTMLLIElement | null)[]>([])
+  const tgtRefs = useRef<(HTMLLIElement | null)[]>([])
+
+  function commit(nextSrc: TransferListItem[], nextTgt: TransferListItem[]) {
+    if (srcProp === undefined) setIntSrc(nextSrc)
+    if (tgtProp === undefined) setIntTgt(nextTgt)
+    onChange?.(nextSrc, nextTgt)
+  }
+
+  function moveRight(ids: Set<string>) {
+    if (!ids.size) return
+    commit(
+      srcItems.filter((i) => !ids.has(i.id)),
+      [...tgtItems, ...srcItems.filter((i) => ids.has(i.id))],
+    )
+    setSelSrc(new Set())
+    setFocSrc(0)
+  }
+
+  function moveLeft(ids: Set<string>) {
+    if (!ids.size) return
+    commit(
+      [...srcItems, ...tgtItems.filter((i) => ids.has(i.id))],
+      tgtItems.filter((i) => !ids.has(i.id)),
+    )
+    setSelTgt(new Set())
+    setFocTgt(0)
+  }
+
+  function toggle(sel: Set<string>, set: (s: Set<string>) => void, id: string) {
+    const n = new Set(sel)
+    if (n.has(id)) {
+      n.delete(id)
+    } else {
+      n.add(id)
+    }
+    set(n)
+  }
+
+  function listKey(
+    e: React.KeyboardEvent,
+    items: TransferListItem[],
+    sel: Set<string>,
+    setSel: (s: Set<string>) => void,
+    foc: number,
+    setFoc: (n: number) => void,
+    refs: React.MutableRefObject<(HTMLLIElement | null)[]>,
+    onEnter: () => void,
+  ) {
+    if (!items.length) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      const n = Math.min(foc + 1, items.length - 1)
+      setFoc(n)
+      refs.current[n]?.focus()
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      const n = Math.max(foc - 1, 0)
+      setFoc(n)
+      refs.current[n]?.focus()
+    } else if (e.key === ' ') {
+      e.preventDefault()
+      const item = items[foc]
+      if (item) toggle(sel, setSel, item.id)
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      onEnter()
+    }
+  }
+
+  function renderList(
+    id: string,
+    label: string,
+    items: TransferListItem[],
+    sel: Set<string>,
+    setSel: (s: Set<string>) => void,
+    foc: number,
+    setFoc: (n: number) => void,
+    refs: React.MutableRefObject<(HTMLLIElement | null)[]>,
+    onEnter: () => void,
+  ) {
+    return (
+      <div className="tl__panel">
+        <div className="tl__header" id={id}>
+          {label} <span className="tl__count">{items.length}</span>
+        </div>
+        <ul
+          role="listbox"
+          aria-labelledby={id}
+          aria-multiselectable="true"
+          className="tl__list"
+          onKeyDown={(e) => listKey(e, items, sel, setSel, foc, setFoc, refs, onEnter)}
+        >
+          {items.length === 0 ? (
+            <li className="tl__empty" role="option" aria-selected={false} aria-disabled="true">
+              Empty
+            </li>
+          ) : (
+            items.map((item, i) => (
+              <li
+                key={item.id}
+                ref={(el) => {
+                  refs.current[i] = el
+                }}
+                role="option"
+                aria-selected={sel.has(item.id)}
+                tabIndex={i === foc ? 0 : -1}
+                className={`tl__item${sel.has(item.id) ? ' tl__item--sel' : ''}`}
+                onClick={() => {
+                  setFoc(i)
+                  toggle(sel, setSel, item.id)
+                }}
+              >
+                <span className="tl__item-label">{item.label}</span>
+                {item.description && <span className="tl__item-desc">{item.description}</span>}
+              </li>
+            ))
+          )}
+        </ul>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`tl ${className}`.trim()}>
+      {renderList(
+        `${gid}-src`,
+        sourceLabel,
+        srcItems,
+        selSrc,
+        setSelSrc,
+        focSrc,
+        setFocSrc,
+        srcRefs,
+        () => moveRight(selSrc),
+      )}
+      <div className="tl__controls" role="group" aria-label="Transfer controls">
+        <button
+          type="button"
+          className="tl__btn"
+          aria-label={`Move all to ${targetLabel}`}
+          disabled={!srcItems.length}
+          onClick={() => moveRight(new Set(srcItems.map((i) => i.id)))}
+        >
+          {'»'}
+        </button>
+        <button
+          type="button"
+          className="tl__btn"
+          aria-label={`Move selected to ${targetLabel}`}
+          disabled={!selSrc.size}
+          onClick={() => moveRight(selSrc)}
+        >
+          {'›'}
+        </button>
+        <button
+          type="button"
+          className="tl__btn"
+          aria-label={`Move selected back to ${sourceLabel}`}
+          disabled={!selTgt.size}
+          onClick={() => moveLeft(selTgt)}
+        >
+          {'‹'}
+        </button>
+        <button
+          type="button"
+          className="tl__btn"
+          aria-label={`Move all back to ${sourceLabel}`}
+          disabled={!tgtItems.length}
+          onClick={() => moveLeft(new Set(tgtItems.map((i) => i.id)))}
+        >
+          {'«'}
+        </button>
+      </div>
+      {renderList(
+        `${gid}-tgt`,
+        targetLabel,
+        tgtItems,
+        selTgt,
+        setSelTgt,
+        focTgt,
+        setFocTgt,
+        tgtRefs,
+        () => moveLeft(selTgt),
+      )}
+    </div>
+  )
+}