@w5-ui/react 0.1.0

package/src/components/Dendrogram.tsx

@@ -0,0 +1,150 @@
+export interface DendrogramNode {
+  id: string
+  label: string
+  children?: DendrogramNode[]
+  color?: string
+}
+
+export interface DendrogramProps {
+  root: DendrogramNode
+  colWidth?: number
+  rowHeight?: number
+  ariaLabel?: string
+}
+
+interface PlacedNode {
+  id: string
+  label: string
+  x: number
+  y: number
+  color: string
+  isLeaf: boolean
+  children: PlacedNode[]
+}
+
+const CHILD_COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342']
+
+function placeNodes(
+  n: DendrogramNode,
+  depth: number,
+  colWidth: number,
+  rowHeight: number,
+  counter: { v: number },
+  color: string,
+): PlacedNode {
+  const nodeColor = n.color ?? color
+  const isLeaf = !n.children?.length
+  if (isLeaf) {
+    const y = counter.v * rowHeight + rowHeight / 2
+    counter.v++
+    return {
+      id: n.id,
+      label: n.label,
+      x: depth * colWidth,
+      y,
+      color: nodeColor,
+      isLeaf: true,
+      children: [],
+    }
+  }
+  const children = n.children!.map((c, i) =>
+    placeNodes(c, depth + 1, colWidth, rowHeight, counter, CHILD_COLORS[i % CHILD_COLORS.length]),
+  )
+  const y = (children[0].y + children[children.length - 1].y) / 2
+  return {
+    id: n.id,
+    label: n.label,
+    x: depth * colWidth,
+    y,
+    color: nodeColor,
+    isLeaf: false,
+    children,
+  }
+}
+
+function treeDepth(n: DendrogramNode): number {
+  if (!n.children?.length) return 0
+  return 1 + Math.max(...n.children.map(treeDepth))
+}
+
+function* iterNodes(n: PlacedNode): Generator<PlacedNode> {
+  yield n
+  for (const c of n.children) yield* iterNodes(c)
+}
+
+function* iterLinks(n: PlacedNode): Generator<[PlacedNode, PlacedNode]> {
+  for (const c of n.children) {
+    yield [n, c]
+    yield* iterLinks(c)
+  }
+}
+
+function shiftNode(n: PlacedNode, dx: number, dy: number): PlacedNode {
+  return { ...n, x: n.x + dx, y: n.y + dy, children: n.children.map((c) => shiftNode(c, dx, dy)) }
+}
+
+export function Dendrogram({
+  root,
+  colWidth = 130,
+  rowHeight = 28,
+  ariaLabel = 'Dendrogram',
+}: DendrogramProps) {
+  const PAD_L = 12
+  const PAD_V = 10
+  const LABEL_LEAF_W = 130
+
+  const counter = { v: 0 }
+  const rawRoot = placeNodes(root, 0, colWidth, rowHeight, counter, '#8B909E')
+  const placed = shiftNode(rawRoot, PAD_L, PAD_V)
+
+  const maxDepth = treeDepth(root)
+  const svgW = PAD_L + (maxDepth + 1) * colWidth + LABEL_LEAF_W
+  const svgH = counter.v * rowHeight + PAD_V * 2
+
+  const nodes = [...iterNodes(placed)]
+  const links = [...iterLinks(placed)]
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%', overflowX: 'auto' }}>
+      <svg
+        viewBox={`0 0 ${svgW} ${svgH}`}
+        style={{ width: '100%', height: svgH, display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {links.map(([parent, child], i) => {
+          const mx = (parent.x + child.x) / 2
+          const d = `M${parent.x},${parent.y} C${mx},${parent.y} ${mx},${child.y} ${child.x},${child.y}`
+          return (
+            <path key={i} d={d} fill="none" stroke="rgba(255,255,255,0.13)" strokeWidth={1.5} />
+          )
+        })}
+        {nodes.map((n) => (
+          <g key={n.id}>
+            <circle cx={n.x} cy={n.y} r={4} fill={n.color} />
+            {n.isLeaf ? (
+              <text x={n.x + 10} y={n.y + 4} fill="#C8CDD9" fontSize={10} fontFamily="inherit">
+                {n.label}
+              </text>
+            ) : n.children.length === 0 || n.x === PAD_L ? (
+              <text x={n.x + 10} y={n.y + 4} fill="#8B909E" fontSize={9} fontFamily="inherit">
+                {n.label}
+              </text>
+            ) : (
+              <text
+                x={n.x}
+                y={n.y - 7}
+                fill="#8B909E"
+                fontSize={9}
+                fontFamily="inherit"
+                textAnchor="middle"
+              >
+                {n.label}
+              </text>
+            )}
+          </g>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/Donut.tsx

@@ -0,0 +1,101 @@
+export interface DonutSegment {
+  label: string
+  value: number
+  color: string
+}
+
+export interface DonutProps {
+  size?: number
+  segments: DonutSegment[]
+  centerValue: string | number
+  centerLabel: string
+  trackColor?: string
+  ariaLabel?: string
+}
+
+export function Donut({
+  size = 96,
+  segments,
+  centerValue,
+  centerLabel,
+  trackColor = 'rgba(255,255,255,0.06)',
+  ariaLabel,
+}: DonutProps) {
+  const total = segments.reduce((s, x) => s + x.value, 0) || 1
+  const r = (size - 20) / 2
+  const c = 2 * Math.PI * r
+  let cumulative = 0
+  const segDesc = segments
+    .map((s) => `${s.label} ${Math.round((s.value / total) * 100)}%`)
+    .join(', ')
+  const label = ariaLabel ?? `${centerValue} ${centerLabel}${segDesc ? `: ${segDesc}` : ''}`
+  return (
+    <div
+      role="img"
+      aria-label={label}
+      style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}
+    >
+      <svg
+        width={size}
+        height={size}
+        aria-hidden="true"
+        focusable="false"
+        style={{ transform: 'rotate(-90deg)' }}
+      >
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={r}
+          fill="none"
+          stroke={trackColor}
+          strokeWidth={10}
+        />
+        {segments.map((seg) => {
+          const frac = seg.value / total
+          const dash = c
+          const offset = c * (1 - cumulative - frac)
+          const rotate = cumulative * 360
+          cumulative += frac
+          return (
+            <circle
+              key={seg.label}
+              cx={size / 2}
+              cy={size / 2}
+              r={r}
+              fill="none"
+              stroke={seg.color}
+              strokeWidth={10}
+              strokeDasharray={dash}
+              strokeDashoffset={offset}
+              strokeLinecap="round"
+              transform={`rotate(${rotate} ${size / 2} ${size / 2})`}
+            />
+          )
+        })}
+      </svg>
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            fontSize: 20,
+            fontWeight: 600,
+            letterSpacing: '-0.01em',
+            fontVariantNumeric: 'tabular-nums',
+          }}
+        >
+          {centerValue}
+        </div>
+        <div style={{ fontSize: 10, color: '#6E7079' }}>{centerLabel}</div>
+      </div>
+    </div>
+  )
+}

package/src/components/DotPlot.tsx

@@ -0,0 +1,195 @@
+export interface DotPlotItem {
+  label: string
+  value: number
+  compare?: number
+  color?: string
+}
+
+export interface DotPlotProps {
+  items: DotPlotItem[]
+  min?: number
+  max?: number
+  unit?: string
+  valueLegend?: string
+  compareLegend?: string
+  ariaLabel?: string
+}
+
+const VW = 380
+const LABEL_W = 132
+const VALUE_W = 32
+const PAD_R = 6
+const TRACK_W = VW - LABEL_W - VALUE_W - PAD_R
+const DOT_R = 5
+const ROW_H = 28
+const PAD_T = 8
+const AXIS_H = 18
+const LEG_H = 18
+const TICKS = 5
+
+export function DotPlot({
+  items,
+  min = 0,
+  max,
+  unit = '',
+  valueLegend,
+  compareLegend,
+  ariaLabel = 'Dot plot',
+}: DotPlotProps) {
+  const hasCompare = items.some((it) => it.compare !== undefined)
+  const maxVal = max ?? Math.max(...items.map((it) => Math.max(it.value, it.compare ?? 0)))
+  const range = Math.max(maxVal - min, 1)
+  const svgH =
+    PAD_T +
+    items.length * ROW_H +
+    AXIS_H +
+    (hasCompare && (valueLegend || compareLegend) ? LEG_H + 4 : 0)
+
+  const tx = (v: number) => LABEL_W + ((v - min) / range) * TRACK_W
+
+  const ticks = Array.from({ length: TICKS }, (_, i) => min + (i / (TICKS - 1)) * range)
+
+  const legY = PAD_T + items.length * ROW_H + AXIS_H + 4
+
+  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"
+            >
+              {Number.isInteger(t) ? t : t.toFixed(1)}
+              {unit}
+            </text>
+          </g>
+        ))}
+
+        {items.map((item, i) => {
+          const cy = PAD_T + i * ROW_H + ROW_H / 2
+          const cx = tx(item.value)
+          const ccx = item.compare !== undefined ? tx(item.compare) : null
+          const color = item.color ?? '#006FFF'
+
+          return (
+            <g key={i}>
+              <text
+                x={LABEL_W - 8}
+                y={cy + 4}
+                fill="#A4A7B5"
+                fontSize={10}
+                textAnchor="end"
+                fontFamily="inherit"
+              >
+                {item.label}
+              </text>
+
+              <line
+                x1={LABEL_W}
+                y1={cy}
+                x2={LABEL_W + TRACK_W}
+                y2={cy}
+                stroke="rgba(255,255,255,0.06)"
+                strokeWidth={1}
+              />
+
+              {ccx !== null && (
+                <line
+                  x1={Math.min(cx, ccx)}
+                  y1={cy}
+                  x2={Math.max(cx, ccx)}
+                  y2={cy}
+                  stroke={color}
+                  strokeWidth={1.5}
+                  opacity={0.35}
+                />
+              )}
+
+              {ccx !== null && (
+                <circle
+                  cx={ccx}
+                  cy={cy}
+                  r={DOT_R - 1}
+                  fill="none"
+                  stroke="#A4A7B5"
+                  strokeWidth={1.5}
+                />
+              )}
+
+              <circle cx={cx} cy={cy} r={DOT_R} fill={color} />
+
+              <text
+                x={LABEL_W + TRACK_W + 6}
+                y={cy + 4}
+                fill="#A4A7B5"
+                fontSize={9}
+                fontFamily="inherit"
+              >
+                {item.value}
+                {unit}
+              </text>
+            </g>
+          )
+        })}
+
+        {hasCompare && (valueLegend || compareLegend) && (
+          <g>
+            {valueLegend && (
+              <>
+                <circle cx={LABEL_W} cy={legY + 5} r={4} fill="#006FFF" />
+                <text
+                  x={LABEL_W + 10}
+                  y={legY + 9}
+                  fill="#A4A7B5"
+                  fontSize={9}
+                  fontFamily="inherit"
+                >
+                  {valueLegend}
+                </text>
+              </>
+            )}
+            {compareLegend && (
+              <>
+                <circle
+                  cx={LABEL_W + (valueLegend ? 80 : 0)}
+                  cy={legY + 5}
+                  r={3}
+                  fill="none"
+                  stroke="#A4A7B5"
+                  strokeWidth={1.5}
+                />
+                <text
+                  x={LABEL_W + (valueLegend ? 90 : 10)}
+                  y={legY + 9}
+                  fill="#A4A7B5"
+                  fontSize={9}
+                  fontFamily="inherit"
+                >
+                  {compareLegend}
+                </text>
+              </>
+            )}
+          </g>
+        )}
+      </svg>
+    </div>
+  )
+}

package/src/components/Drawer.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useId, useRef, type ReactNode } from 'react'
+import { CloseIcon } from '../icons.js'
+import { IconButton } from './Button.js'
+
+export interface DrawerProps {
+  open: boolean
+  title: string
+  onClose: () => void
+  children?: ReactNode
+}
+
+const FOCUSABLE =
+  'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+
+export function Drawer({ open, title, onClose, children }: DrawerProps) {
+  const titleId = useId()
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const prev = document.activeElement as HTMLElement | null
+    const panel = panelRef.current
+    const first = panel?.querySelector<HTMLElement>(FOCUSABLE)
+    ;(first ?? panel)?.focus()
+
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        onClose()
+        return
+      }
+      if (e.key !== 'Tab' || !panel) return
+      const items = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE))
+      if (!items.length) {
+        e.preventDefault()
+        return
+      }
+      const f = items[0]!,
+        l = items[items.length - 1]!
+      const active = document.activeElement
+      if (e.shiftKey && active === f) {
+        e.preventDefault()
+        l.focus()
+      } else if (!e.shiftKey && active === l) {
+        e.preventDefault()
+        f.focus()
+      }
+    }
+
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('keydown', onKey)
+      prev?.focus?.()
+    }
+  }, [open, onClose])
+
+  return (
+    <>
+      <div
+        className={`drawer-overlay ${open ? 'show' : ''}`}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div
+        ref={panelRef}
+        className={`drawer-panel ${open ? 'show' : ''}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+      >
+        <div className="drawer-h">
+          <h2 id={titleId}>{title}</h2>
+          <IconButton onClick={onClose} aria-label="Close">
+            <CloseIcon />
+          </IconButton>
+        </div>
+        <div className="drawer-b">{children}</div>
+      </div>
+    </>
+  )
+}