@w5-ui/react 0.1.0

package/src/components/JsonViewer.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react'
+
+type JsVal = string | number | boolean | null | JsVal[] | { [k: string]: JsVal }
+
+function Primitive({ v }: { v: string | number | boolean | null }) {
+  if (v === null) return <span className="jv-null">null</span>
+  if (typeof v === 'string') return <span className="jv-string">&quot;{v}&quot;</span>
+  if (typeof v === 'number') return <span className="jv-number">{v}</span>
+  return <span className="jv-boolean">{String(v)}</span>
+}
+
+function JvNode({
+  v,
+  k,
+  depth,
+  maxDepth,
+  startOpen,
+}: {
+  v: JsVal
+  k?: string
+  depth: number
+  maxDepth: number
+  startOpen: boolean
+}) {
+  const isArr = Array.isArray(v)
+  const isObj = v !== null && typeof v === 'object'
+  const [open, setOpen] = useState(startOpen && depth < maxDepth)
+
+  const indent = depth * 14
+
+  if (!isArr && !isObj) {
+    return (
+      <div role="treeitem" aria-selected={false} className="jv-row" style={{ paddingLeft: indent }}>
+        {k != null && (
+          <>
+            <span className="jv-key">&quot;{k}&quot;</span>
+            <span className="jv-colon">: </span>
+          </>
+        )}
+        <Primitive v={v as string | number | boolean | null} />
+      </div>
+    )
+  }
+
+  const entries: [string | number, JsVal][] = isArr
+    ? (v as JsVal[]).map((item, i) => [i, item])
+    : Object.entries(v as { [key: string]: JsVal })
+  const count = entries.length
+  const [ob, cb] = isArr ? ['[', ']'] : ['{', '}']
+
+  return (
+    <div role="treeitem" aria-selected={false} aria-expanded={open} className="jv-node">
+      <button
+        type="button"
+        className="jv-toggle-row"
+        onClick={() => setOpen((s) => !s)}
+        aria-label={`${open ? 'Collapse' : 'Expand'} ${k ?? (isArr ? 'array' : 'object')}`}
+        style={{ paddingLeft: indent }}
+      >
+        <span className="jv-caret" aria-hidden="true">
+          {open ? '▾' : '▸'}
+        </span>
+        {k != null && (
+          <>
+            <span className="jv-key">&quot;{k}&quot;</span>
+            <span className="jv-colon">: </span>
+          </>
+        )}
+        <span className="jv-bracket">{ob}</span>
+        {!open && (
+          <>
+            <span className="jv-count">&thinsp;{count}&thinsp;</span>
+            <span className="jv-bracket">{cb}</span>
+          </>
+        )}
+      </button>
+      {open && (
+        <div role="group" className="jv-children">
+          {entries.map(([ek, ev]) => (
+            <JvNode
+              key={String(ek)}
+              v={ev}
+              k={isArr ? undefined : String(ek)}
+              depth={depth + 1}
+              maxDepth={maxDepth}
+              startOpen={startOpen}
+            />
+          ))}
+          <div className="jv-row jv-close" style={{ paddingLeft: indent }}>
+            <span className="jv-bracket">{cb}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export interface JsonViewerProps {
+  data: unknown
+  label?: string
+  defaultExpanded?: boolean
+  maxDepth?: number
+}
+
+export function JsonViewer({
+  data,
+  label = 'JSON viewer',
+  defaultExpanded = true,
+  maxDepth = 3,
+}: JsonViewerProps) {
+  return (
+    <div className="json-viewer" role="tree" aria-label={label}>
+      <JvNode v={data as JsVal} depth={0} maxDepth={maxDepth} startOpen={defaultExpanded} />
+    </div>
+  )
+}

package/src/components/KVTable.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react'
+
+export interface KVRow {
+  label: string
+  value: ReactNode
+}
+
+export interface KVTableProps {
+  rows: KVRow[]
+  caption?: string
+}
+
+export function KVTable({ rows, caption }: KVTableProps) {
+  return (
+    <table className="kv-table">
+      {caption && <caption className="sr-only">{caption}</caption>}
+      <tbody>
+        {rows.map(({ label, value }) => (
+          <tr key={label} className="kv-table__row">
+            <th scope="row" className="kv-table__label">
+              {label}
+            </th>
+            <td className="kv-table__value">{value}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}

package/src/components/KanbanBoard.tsx

@@ -0,0 +1,171 @@
+import { useId, useRef, useState } from 'react'
+
+export interface KanbanCard {
+  id: string
+  title: string
+  subtitle?: string
+  meta?: string
+}
+
+export interface KanbanColumn {
+  id: string
+  title: string
+  color?: string
+  cards: KanbanCard[]
+}
+
+export interface KanbanBoardProps {
+  columns: KanbanColumn[]
+  onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string) => void
+  ariaLabel?: string
+}
+
+export function KanbanBoard({ columns, onCardMove, ariaLabel = 'Kanban board' }: KanbanBoardProps) {
+  const announceId = useId()
+  const [announce, setAnnounce] = useState('')
+  const [grabbed, setGrabbed] = useState<{ cardId: string; colId: string } | null>(null)
+  const [dragSrc, setDragSrc] = useState<{ cardId: string; colId: string } | null>(null)
+  const [dragOverCol, setDragOverCol] = useState<string | null>(null)
+  const cardRefs = useRef<Record<string, HTMLButtonElement | null>>({})
+
+  function say(msg: string) {
+    setAnnounce(msg)
+  }
+
+  function colOf(cardId: string): KanbanColumn | undefined {
+    return columns.find((c) => c.cards.some((k) => k.id === cardId))
+  }
+
+  function handleKeyDown(
+    e: React.KeyboardEvent<HTMLButtonElement>,
+    card: KanbanCard,
+    col: KanbanColumn,
+  ) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault()
+      if (grabbed?.cardId === card.id) {
+        setGrabbed(null)
+        say(`Dropped ${card.title} in ${col.title}.`)
+      } else {
+        setGrabbed({ cardId: card.id, colId: col.id })
+        say(
+          `Picked up ${card.title} from ${col.title}. Use left/right arrows to move between columns, Space to drop, Escape to cancel.`,
+        )
+      }
+    } else if (e.key === 'Escape' && grabbed?.cardId === card.id) {
+      e.preventDefault()
+      setGrabbed(null)
+      say('Move cancelled.')
+    } else if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && grabbed?.cardId === card.id) {
+      e.preventDefault()
+      const idx = columns.findIndex((c) => c.id === grabbed.colId)
+      const nextIdx = e.key === 'ArrowLeft' ? idx - 1 : idx + 1
+      if (nextIdx < 0 || nextIdx >= columns.length) return
+      const nextCol = columns[nextIdx]
+      onCardMove?.(card.id, grabbed.colId, nextCol.id)
+      setGrabbed({ cardId: card.id, colId: nextCol.id })
+      say(`Moved ${card.title} to ${nextCol.title}.`)
+      setTimeout(() => {
+        cardRefs.current[card.id]?.focus()
+      }, 0)
+    }
+  }
+
+  function handleDragStart(e: React.DragEvent, cardId: string, colId: string) {
+    e.dataTransfer.effectAllowed = 'move'
+    setDragSrc({ cardId, colId })
+  }
+
+  function handleDrop(e: React.DragEvent, toColId: string) {
+    e.preventDefault()
+    if (!dragSrc || dragSrc.colId === toColId) return
+    const card = colOf(dragSrc.cardId)?.cards.find((c) => c.id === dragSrc.cardId)
+    const toCol = columns.find((c) => c.id === toColId)
+    onCardMove?.(dragSrc.cardId, dragSrc.colId, toColId)
+    if (card && toCol) say(`Moved ${card.title} to ${toCol.title}.`)
+    setDragSrc(null)
+    setDragOverCol(null)
+  }
+
+  return (
+    <div className="kanban" role="region" aria-label={ariaLabel}>
+      <span
+        id={announceId}
+        role="status"
+        aria-live="assertive"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {announce}
+      </span>
+
+      <div className="kanban-board" role="list">
+        {columns.map((col) => (
+          <div
+            key={col.id}
+            className={`kanban-col${dragOverCol === col.id ? ' kanban-col--over' : ''}`}
+            role="listitem"
+            onDragOver={(e) => {
+              e.preventDefault()
+              e.dataTransfer.dropEffect = 'move'
+              setDragOverCol(col.id)
+            }}
+            onDragLeave={() => setDragOverCol(null)}
+            onDrop={(e) => handleDrop(e, col.id)}
+          >
+            <div className="kanban-col-header">
+              {col.color && (
+                <span
+                  className="kanban-col-dot"
+                  style={{ background: col.color }}
+                  aria-hidden="true"
+                />
+              )}
+              <span className="kanban-col-title">{col.title}</span>
+              <span
+                className="kanban-col-count"
+                aria-label={`${col.cards.length} card${col.cards.length !== 1 ? 's' : ''}`}
+              >
+                {col.cards.length}
+              </span>
+            </div>
+            <ul className="kanban-cards" aria-label={`${col.title} cards`}>
+              {col.cards.map((card) => {
+                const isGrabbed = grabbed?.cardId === card.id
+                return (
+                  <li key={card.id} className={`kanban-card-item${isGrabbed ? ' is-grabbed' : ''}`}>
+                    <button
+                      ref={(el) => {
+                        cardRefs.current[card.id] = el
+                      }}
+                      type="button"
+                      className="kanban-card"
+                      draggable
+                      aria-pressed={isGrabbed}
+                      aria-label={`${card.title}${card.subtitle ? `, ${card.subtitle}` : ''}${card.meta ? `, ${card.meta}` : ''}. ${isGrabbed ? 'Moving. Use arrow keys to change column, Space to drop, Escape to cancel.' : 'Press Space to move.'}`}
+                      onKeyDown={(e) => handleKeyDown(e, card, col)}
+                      onDragStart={(e) => handleDragStart(e, card.id, col.id)}
+                      onDragEnd={() => {
+                        setDragSrc(null)
+                        setDragOverCol(null)
+                      }}
+                    >
+                      <span className="kanban-card-title">{card.title}</span>
+                      {card.subtitle && <span className="kanban-card-sub">{card.subtitle}</span>}
+                      {card.meta && <span className="kanban-card-meta">{card.meta}</span>}
+                    </button>
+                  </li>
+                )
+              })}
+              {col.cards.length === 0 && (
+                <li className="kanban-empty" role="note" aria-label={`${col.title} is empty`}>
+                  Empty
+                </li>
+              )}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/Kbd.tsx

@@ -0,0 +1,22 @@
+export interface KbdProps {
+  keys: string | string[]
+  className?: string
+}
+
+export function Kbd({ keys, className = '' }: KbdProps) {
+  const parts = typeof keys === 'string' ? keys.split('+') : keys
+  return (
+    <kbd className={`kbd ${className}`.trim()}>
+      {parts.map((k, i) => (
+        <span key={i} className="kbd__segment">
+          {i > 0 && (
+            <span className="kbd__plus" aria-hidden="true">
+              +
+            </span>
+          )}
+          <kbd className="kbd__key">{k}</kbd>
+        </span>
+      ))}
+    </kbd>
+  )
+}

package/src/components/LineChart.tsx

@@ -0,0 +1,112 @@
+import { useMemo } from 'react'
+
+export interface LineChartSeries {
+  label: string
+  color: string
+  values: number[]
+}
+
+export interface LineChartProps {
+  series: LineChartSeries[]
+  labels?: string[]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = { t: 12, r: 8, b: 28, l: 8 }
+
+export function LineChart({
+  series,
+  labels = [],
+  height = 160,
+  ariaLabel = 'Line chart',
+}: LineChartProps) {
+  const { paths, areas, gridLines } = useMemo(() => {
+    const allValues = series.flatMap((s) => s.values)
+    if (!allValues.length) return { paths: [], areas: [], gridLines: [] }
+    const minV = Math.min(...allValues)
+    const maxV = Math.max(...allValues)
+    const range = maxV - minV || 1
+    const chartW = VW - PAD.l - PAD.r
+    const chartH = height - PAD.t - PAD.b
+    const n = series[0]?.values.length ?? 0
+
+    const toX = (i: number) => PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2)
+    const toY = (v: number) => PAD.t + chartH - ((v - minV) / range) * chartH
+
+    const gridLines = [0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH)
+
+    const paths = series.map((s) => {
+      const pts = s.values.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`)
+      return { color: s.color, label: s.label, d: `M ${pts.join(' L ')}` }
+    })
+
+    const areas = series.map((s) => {
+      const pts = s.values.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`)
+      const bot = (PAD.t + chartH).toFixed(1)
+      return {
+        color: s.color,
+        label: s.label,
+        d: `M ${toX(0).toFixed(1)},${bot} L ${pts.join(' L ')} L ${toX(n - 1).toFixed(1)},${bot} Z`,
+      }
+    })
+
+    return { paths, areas, gridLines }
+  }, [series, height])
+
+  const chartW = VW - PAD.l - PAD.r
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${height}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {gridLines.map((y, i) => (
+          <line
+            key={i}
+            x1={PAD.l}
+            y1={y}
+            x2={VW - PAD.r}
+            y2={y}
+            stroke="rgba(255,255,255,0.06)"
+            strokeWidth={1}
+          />
+        ))}
+        {areas.map((s) => (
+          <path key={s.label} d={s.d} fill={s.color} fillOpacity={0.1} />
+        ))}
+        {paths.map((s) => (
+          <path
+            key={s.label}
+            d={s.d}
+            fill="none"
+            stroke={s.color}
+            strokeWidth={2}
+            strokeLinejoin="round"
+            strokeLinecap="round"
+          />
+        ))}
+        {labels.map((lbl, i) => {
+          const x = PAD.l + (labels.length > 1 ? (i / (labels.length - 1)) * chartW : chartW / 2)
+          return (
+            <text
+              key={i}
+              x={x}
+              y={height - 4}
+              textAnchor="middle"
+              fill="#6E7079"
+              fontSize={9}
+              fontFamily="inherit"
+            >
+              {lbl}
+            </text>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/LogViewer.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useRef, useState } from 'react'
+
+export interface LogEntry {
+  id?: string
+  timestamp: string
+  level: 'info' | 'warn' | 'error' | 'debug'
+  category?: string
+  event: string
+  subject?: string
+  detail?: string
+}
+
+export interface LogViewerProps {
+  entries: LogEntry[]
+  height?: number
+  defaultFollow?: boolean
+  ariaLabel?: string
+  className?: string
+}
+
+const SEV_DOT: Record<string, string> = {
+  error: '#F03A3A',
+  warn: '#F5A623',
+  info: '#006FFF',
+  debug: '#4A4B53',
+}
+
+export function LogViewer({
+  entries,
+  height = 360,
+  defaultFollow = true,
+  ariaLabel = 'Log entries',
+  className = '',
+}: LogViewerProps) {
+  const [follow, setFollow] = useState(defaultFollow)
+  const bodyRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (follow && bodyRef.current) {
+      bodyRef.current.scrollTop = bodyRef.current.scrollHeight
+    }
+  }, [entries.length, follow])
+
+  return (
+    <div className={`lv ${className}`.trim()}>
+      <div className="lv__toolbar">
+        <span className="lv__count">{entries.length} entries</span>
+        <button
+          type="button"
+          className={`lv__follow${follow ? ' lv__follow--on' : ''}`}
+          onClick={() => setFollow((f) => !f)}
+          aria-pressed={follow}
+        >
+          Follow
+        </button>
+      </div>
+      <div
+        ref={bodyRef}
+        role="log"
+        aria-live="polite"
+        aria-label={ariaLabel}
+        className="lv__body"
+        style={{ height }}
+      >
+        <table className="lv__table">
+          <caption className="sr-only">{ariaLabel}</caption>
+          <thead>
+            <tr>
+              <th scope="col">Severity</th>
+              <th scope="col">Source</th>
+              <th scope="col">Time</th>
+              <th scope="col">Event</th>
+              <th scope="col">Subject</th>
+              <th scope="col">Detail</th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map((e, i) => (
+              <tr key={e.id ?? i}>
+                <td>
+                  <span className={`lv__sev lv__sev--${e.level}`}>
+                    <span
+                      className="lv__dot"
+                      style={{ background: SEV_DOT[e.level] ?? SEV_DOT.info }}
+                      aria-hidden="true"
+                    />
+                    {e.level === 'error' ? 'crit' : e.level}
+                  </span>
+                </td>
+                <td className="lv__cat">{e.category ?? ''}</td>
+                <td className="lv__time">{e.timestamp}</td>
+                <td className="lv__event">{e.event}</td>
+                <td className="lv__subject">{e.subject ?? ''}</td>
+                <td className="lv__detail">{e.detail ?? ''}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

package/src/components/LollipopChart.tsx

@@ -0,0 +1,110 @@
+export interface LollipopItem {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface LollipopChartProps {
+  items: LollipopItem[]
+  unit?: string
+  color?: string
+  ariaLabel?: string
+}
+
+const VW = 340
+const LABEL_W = 110
+const VAL_W = 36
+const PAD_R = 4
+const TRACK_W = VW - LABEL_W - VAL_W - PAD_R
+const DOT_R = 5
+const ROW_H = 26
+const PAD_T = 6
+const AXIS_H = 18
+const TICKS = 4
+
+export function LollipopChart({
+  items,
+  unit = '',
+  color = '#006FFF',
+  ariaLabel = 'Lollipop chart',
+}: LollipopChartProps) {
+  const maxVal = Math.max(...items.map((it) => it.value), 1)
+  const svgH = PAD_T + items.length * ROW_H + AXIS_H
+
+  const tx = (v: number) => LABEL_W + (v / maxVal) * TRACK_W
+
+  const ticks = Array.from({ length: TICKS + 1 }, (_, i) => Math.round((i / TICKS) * maxVal))
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${svgH}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {ticks.map((t, i) => (
+          <g key={i}>
+            <line
+              x1={tx(t)}
+              y1={PAD_T}
+              x2={tx(t)}
+              y2={PAD_T + items.length * ROW_H}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <text
+              x={tx(t)}
+              y={PAD_T + items.length * ROW_H + 13}
+              fill="#6E7079"
+              fontSize={9}
+              textAnchor="middle"
+              fontFamily="inherit"
+            >
+              {t}
+              {unit}
+            </text>
+          </g>
+        ))}
+
+        {items.map((item, i) => {
+          const cy = PAD_T + i * ROW_H + ROW_H / 2
+          const cx = tx(item.value)
+          const c = item.color ?? color
+
+          return (
+            <g key={i}>
+              <text
+                x={LABEL_W - 6}
+                y={cy + 4}
+                fill="#A4A7B5"
+                fontSize={10}
+                textAnchor="end"
+                fontFamily="inherit"
+              >
+                {item.label}
+              </text>
+
+              <line
+                x1={LABEL_W}
+                y1={cy}
+                x2={cx}
+                y2={cy}
+                stroke={c}
+                strokeWidth={1.5}
+                opacity={0.5}
+              />
+
+              <circle cx={cx} cy={cy} r={DOT_R} fill={c} />
+
+              <text x={cx + DOT_R + 4} y={cy + 4} fill="#A4A7B5" fontSize={9} fontFamily="inherit">
+                {item.value}
+                {unit}
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}