@w5-ui/react 0.1.0

package/src/components/TreeMap.tsx

@@ -0,0 +1,126 @@
+import { useMemo } from 'react'
+
+export interface TreeMapNode {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface TreeMapProps {
+  nodes: TreeMapNode[]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 320
+const PAD = 4
+const GAP = 2
+const PALETTE = ['#006FFF', '#00C875', '#F04949', '#A78BFA', '#F5A623', '#50B8E7']
+
+interface LayoutRect {
+  x: number
+  y: number
+  w: number
+  h: number
+  label: string
+  value: number
+  color: string
+}
+
+function layout(
+  nodes: { label: string; value: number; color: string }[],
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+): LayoutRect[] {
+  if (!nodes.length) return []
+  if (nodes.length === 1) return [{ x, y, w: Math.max(w, 0), h: Math.max(h, 0), ...nodes[0] }]
+  const total = nodes.reduce((s, n) => s + n.value, 0)
+  let acc = 0
+  let split = nodes.length - 1
+  for (let i = 0; i < nodes.length - 1; i++) {
+    acc += nodes[i].value
+    if (acc / total >= 0.5) {
+      split = i + 1
+      break
+    }
+  }
+  const ratio = nodes.slice(0, split).reduce((s, n) => s + n.value, 0) / total
+  if (w > h) {
+    const w1 = Math.max((w - GAP) * ratio, 0)
+    return [
+      ...layout(nodes.slice(0, split), x, y, w1, h),
+      ...layout(nodes.slice(split), x + w1 + GAP, y, Math.max(w - w1 - GAP, 0), h),
+    ]
+  }
+  const h1 = Math.max((h - GAP) * ratio, 0)
+  return [
+    ...layout(nodes.slice(0, split), x, y, w, h1),
+    ...layout(nodes.slice(split), x, y + h1 + GAP, w, Math.max(h - h1 - GAP, 0)),
+  ]
+}
+
+export function TreeMap({ nodes, height = 160, ariaLabel = 'Treemap chart' }: TreeMapProps) {
+  const rects = useMemo(() => {
+    if (!nodes.length) return []
+    const sorted = [...nodes]
+      .sort((a, b) => b.value - a.value)
+      .map((n, i) => ({ ...n, color: n.color ?? PALETTE[i % PALETTE.length] }))
+    return layout(sorted, PAD, PAD, VW - PAD * 2, height - PAD * 2)
+  }, [nodes, height])
+
+  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"
+      >
+        {rects.map((r, i) => {
+          const showLabel = r.w >= 36 && r.h >= 22
+          const fs = Math.min(10, Math.max(7, Math.floor(r.w / 6)))
+          return (
+            <g key={i}>
+              <rect
+                x={r.x.toFixed(1)}
+                y={r.y.toFixed(1)}
+                width={r.w.toFixed(1)}
+                height={r.h.toFixed(1)}
+                fill={r.color}
+                fillOpacity={0.85}
+                rx={3}
+              />
+              {showLabel && (
+                <>
+                  <text
+                    x={(r.x + r.w / 2).toFixed(1)}
+                    y={(r.y + r.h / 2 - 4).toFixed(1)}
+                    textAnchor="middle"
+                    fill="#fff"
+                    fontSize={fs}
+                    fontFamily="inherit"
+                    fontWeight={600}
+                  >
+                    {r.label}
+                  </text>
+                  <text
+                    x={(r.x + r.w / 2).toFixed(1)}
+                    y={(r.y + r.h / 2 + 9).toFixed(1)}
+                    textAnchor="middle"
+                    fill="rgba(255,255,255,0.65)"
+                    fontSize={Math.max(fs - 1, 7)}
+                    fontFamily="inherit"
+                  >
+                    {r.value}
+                  </text>
+                </>
+              )}
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/TreeView.tsx

@@ -0,0 +1,221 @@
+import { useState, useRef, useCallback } from 'react'
+import type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react'
+
+export interface TreeNode {
+  id: string
+  label: string
+  icon?: ReactNode
+  meta?: string
+  children?: TreeNode[]
+}
+
+export interface TreeViewProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect'> {
+  nodes: TreeNode[]
+  selected?: string
+  onSelect?: (id: string) => void
+  defaultExpanded?: string[]
+  label?: string
+}
+
+function visibleIds(nodes: TreeNode[], expanded: Set<string>): string[] {
+  const ids: string[] = []
+  function walk(list: TreeNode[]) {
+    for (const n of list) {
+      ids.push(n.id)
+      if (n.children?.length && expanded.has(n.id)) walk(n.children)
+    }
+  }
+  walk(nodes)
+  return ids
+}
+
+function findNode(id: string, list: TreeNode[]): TreeNode | undefined {
+  for (const n of list) {
+    if (n.id === id) return n
+    if (n.children) {
+      const found = findNode(id, n.children)
+      if (found) return found
+    }
+  }
+}
+
+function TreeItem({
+  node,
+  selected,
+  focusedId,
+  expanded,
+}: {
+  node: TreeNode
+  selected: string | undefined
+  focusedId: string
+  expanded: Set<string>
+}) {
+  const hasChildren = !!node.children?.length
+  const isExpanded = expanded.has(node.id)
+  const isSelected = selected === node.id
+
+  return (
+    <li
+      role="treeitem"
+      aria-expanded={hasChildren ? isExpanded : undefined}
+      aria-selected={isSelected}
+      tabIndex={focusedId === node.id ? 0 : -1}
+      data-tree-id={node.id}
+      className="tree__item"
+    >
+      <div className={`tree__row${isSelected ? ' tree__row--selected' : ''}`}>
+        {hasChildren ? (
+          <svg
+            className={`tree__chevron${isExpanded ? ' tree__chevron--open' : ''}`}
+            viewBox="0 0 12 12"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M4 2l4 4-4 4"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        ) : (
+          <span className="tree__indent" aria-hidden="true" />
+        )}
+        {node.icon && (
+          <span className="tree__icon" aria-hidden="true">
+            {node.icon}
+          </span>
+        )}
+        <span className="tree__label">{node.label}</span>
+        {node.meta && <span className="tree__meta">{node.meta}</span>}
+      </div>
+      {hasChildren && isExpanded && (
+        <ul role="group" className="tree__group">
+          {node.children!.map((child) => (
+            <TreeItem
+              key={child.id}
+              node={child}
+              selected={selected}
+              focusedId={focusedId}
+              expanded={expanded}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  )
+}
+
+export function TreeView({
+  nodes,
+  selected,
+  onSelect,
+  defaultExpanded = [],
+  label,
+  className = '',
+  ...rest
+}: TreeViewProps) {
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set(defaultExpanded))
+  const [focusedId, setFocusedId] = useState<string>(() => nodes[0]?.id ?? '')
+  const rootRef = useRef<HTMLUListElement>(null)
+
+  const toggle = useCallback((id: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }, [])
+
+  function moveFocus(id: string) {
+    setFocusedId(id)
+    requestAnimationFrame(() => {
+      rootRef.current?.querySelector<HTMLElement>(`[data-tree-id="${id}"]`)?.focus()
+    })
+  }
+
+  function handleFocus(e: React.FocusEvent<HTMLUListElement>) {
+    const el = (e.target as HTMLElement).closest('[data-tree-id]')
+    if (el) setFocusedId(el.getAttribute('data-tree-id') ?? focusedId)
+  }
+
+  function handleClick(e: React.MouseEvent<HTMLUListElement>) {
+    const row = (e.target as HTMLElement).closest('.tree__row')
+    if (!row) return
+    const item = row.closest('[data-tree-id]')
+    if (!item) return
+    const id = item.getAttribute('data-tree-id')
+    if (!id) return
+    onSelect?.(id)
+    setFocusedId(id)
+    moveFocus(id)
+    const node = findNode(id, nodes)
+    if (node?.children?.length) toggle(id)
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {
+    const el = (e.target as HTMLElement).closest('[data-tree-id]')
+    if (!el) return
+    const id = el.getAttribute('data-tree-id')
+    if (!id) return
+
+    const visible = visibleIds(nodes, expanded)
+    const idx = visible.indexOf(id)
+    const node = findNode(id, nodes)
+    const hasChildren = !!node?.children?.length
+    const isNodeExpanded = expanded.has(id)
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      const next = visible[idx + 1]
+      if (next) moveFocus(next)
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      const prev = visible[idx - 1]
+      if (prev) moveFocus(prev)
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      if (hasChildren && !isNodeExpanded) toggle(id)
+      else if (hasChildren && isNodeExpanded) moveFocus(node!.children![0]!.id)
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      if (hasChildren && isNodeExpanded) toggle(id)
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      if (visible[0]) moveFocus(visible[0])
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      const last = visible[visible.length - 1]
+      if (last) moveFocus(last)
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      onSelect?.(id)
+      setFocusedId(id)
+    }
+  }
+
+  return (
+    <ul
+      ref={rootRef}
+      role="tree"
+      aria-label={label}
+      className={`tree ${className}`.trim()}
+      onFocus={handleFocus}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      {...rest}
+    >
+      {nodes.map((node) => (
+        <TreeItem
+          key={node.id}
+          node={node}
+          selected={selected}
+          focusedId={focusedId}
+          expanded={expanded}
+        />
+      ))}
+    </ul>
+  )
+}

package/src/components/UptimeTimeline.tsx

@@ -0,0 +1,138 @@
+export type UptimeStatus = 'up' | 'degraded' | 'down'
+
+export interface UptimeSegment {
+  from: number
+  to: number
+  status: UptimeStatus
+}
+
+export interface UptimeSeries {
+  label: string
+  segments: UptimeSegment[]
+}
+
+export interface UptimeTimelineProps {
+  series: UptimeSeries[]
+  xLabels?: string[]
+  ariaLabel?: string
+}
+
+const VW = 400
+const LABEL_W = 88
+const PAD_R = 10
+const PAD_T = 6
+const ROW_H = 14
+const ROW_GAP = 8
+const XLBL_H = 16
+const LEG_H = 16
+const PAD_B = XLBL_H + LEG_H + 4
+
+const STATUS_COLOR: Record<UptimeStatus, string> = {
+  up: '#00C875',
+  degraded: '#F5A623',
+  down: '#F03E3E',
+}
+
+const LEGEND: { status: UptimeStatus; label: string }[] = [
+  { status: 'up', label: 'Up' },
+  { status: 'degraded', label: 'Degraded' },
+  { status: 'down', label: 'Down' },
+]
+
+export function UptimeTimeline({
+  series,
+  xLabels,
+  ariaLabel = 'Uptime timeline',
+}: UptimeTimelineProps) {
+  const trackW = VW - LABEL_W - PAD_R
+  const rowsH = series.length * (ROW_H + ROW_GAP) - ROW_GAP
+  const totalH = PAD_T + rowsH + PAD_B
+  const xlblY = PAD_T + rowsH + XLBL_H
+  const legY = xlblY + LEG_H
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${totalH}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {series.map((s, si) => {
+          const y = PAD_T + si * (ROW_H + ROW_GAP)
+          return (
+            <g key={s.label}>
+              <text
+                x={LABEL_W - 8}
+                y={y + ROW_H / 2 + 4}
+                textAnchor="end"
+                fill="#A4A7B5"
+                fontSize={11}
+                fontFamily="inherit"
+              >
+                {s.label}
+              </text>
+              <rect
+                x={LABEL_W}
+                y={y}
+                width={trackW}
+                height={ROW_H}
+                fill="rgba(255,255,255,0.04)"
+                rx={3}
+              />
+              {s.segments.map((seg, i) => (
+                <rect
+                  key={i}
+                  x={LABEL_W + seg.from * trackW}
+                  y={y}
+                  width={(seg.to - seg.from) * trackW}
+                  height={ROW_H}
+                  fill={STATUS_COLOR[seg.status]}
+                  rx={2}
+                  fillOpacity={0.85}
+                />
+              ))}
+            </g>
+          )
+        })}
+
+        {xLabels?.map((lbl, i) => (
+          <text
+            key={lbl}
+            x={LABEL_W + (xLabels.length > 1 ? i / (xLabels.length - 1) : 0) * trackW}
+            y={xlblY}
+            textAnchor={i === 0 ? 'start' : i === xLabels.length - 1 ? 'end' : 'middle'}
+            fill="#6E7079"
+            fontSize={10}
+            fontFamily="inherit"
+          >
+            {lbl}
+          </text>
+        ))}
+
+        {LEGEND.map(({ status, label }, i) => (
+          <g key={status}>
+            <rect
+              x={LABEL_W + i * 80}
+              y={legY - 8}
+              width={12}
+              height={8}
+              fill={STATUS_COLOR[status]}
+              rx={2}
+              fillOpacity={0.85}
+            />
+            <text
+              x={LABEL_W + i * 80 + 16}
+              y={legY}
+              fill="#6E7079"
+              fontSize={10}
+              fontFamily="inherit"
+            >
+              {label}
+            </text>
+          </g>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/VennDiagram.tsx

@@ -0,0 +1,151 @@
+export interface VennSet {
+  id: string
+  label: string
+  value: number
+  color?: string
+}
+
+export interface VennIntersection {
+  sets: string[]
+  value: number
+}
+
+export interface VennDiagramProps {
+  sets: VennSet[]
+  intersections?: VennIntersection[]
+  height?: number
+  ariaLabel?: string
+}
+
+const PALETTE = ['#006FFF', '#00C875', '#A78BFA']
+const VW = 340
+
+function fmt(n: number): string {
+  return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n)
+}
+
+export function VennDiagram({
+  sets,
+  intersections = [],
+  height = 240,
+  ariaLabel = 'Venn diagram',
+}: VennDiagramProps) {
+  if (sets.length < 2 || sets.length > 3) return null
+
+  const is3 = sets.length === 3
+  const cx = VW / 2
+  const cy = height / 2
+
+  const circles = is3
+    ? [
+        { x: cx, y: cy - 40, r: 75 },
+        { x: cx - 65, y: cy + 50, r: 75 },
+        { x: cx + 65, y: cy + 50, r: 75 },
+      ]
+    : [
+        { x: cx - 58, y: cy, r: 85 },
+        { x: cx + 58, y: cy, r: 85 },
+      ]
+
+  const exclusiveValues = sets.map((s) =>
+    Math.max(
+      0,
+      s.value -
+        intersections.filter((i) => i.sets.includes(s.id)).reduce((sum, i) => sum + i.value, 0),
+    ),
+  )
+
+  function getPt(inter: VennIntersection): { x: number; y: number } | null {
+    const idxById: Record<string, number> = {}
+    sets.forEach((s, i) => {
+      idxById[s.id] = i
+    })
+    const idxs = inter.sets
+      .map((id) => idxById[id])
+      .filter((v) => v !== undefined)
+      .sort((a, b) => a - b)
+    if (!is3) return { x: cx, y: cy }
+    if (idxs.length >= 3) return { x: cx, y: cy + 18 }
+    if (idxs[0] === 0 && idxs[1] === 1) return { x: cx - 33, y: cy + 4 }
+    if (idxs[0] === 0 && idxs[1] === 2) return { x: cx + 33, y: cy + 4 }
+    if (idxs[0] === 1 && idxs[1] === 2) return { x: cx, y: cy + 50 }
+    return null
+  }
+
+  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"
+      >
+        {sets.map((s, i) => {
+          const c = circles[i]
+          const color = s.color ?? PALETTE[i % PALETTE.length]
+          return (
+            <circle
+              key={i}
+              cx={c.x}
+              cy={c.y}
+              r={c.r}
+              fill={color}
+              fillOpacity={0.15}
+              stroke={color}
+              strokeOpacity={0.55}
+              strokeWidth={1.5}
+            />
+          )
+        })}
+
+        {sets.map((s, i) => {
+          const c = circles[i]
+          const color = s.color ?? PALETTE[i % PALETTE.length]
+          return (
+            <g key={i}>
+              <text
+                x={c.x}
+                y={c.y - 8}
+                fill={color}
+                fontSize={11}
+                textAnchor="middle"
+                fontFamily="inherit"
+                fontWeight={600}
+              >
+                {s.label}
+              </text>
+              <text
+                x={c.x}
+                y={c.y + 8}
+                fill="#A4A7B5"
+                fontSize={10}
+                textAnchor="middle"
+                fontFamily="inherit"
+              >
+                {fmt(exclusiveValues[i])}
+              </text>
+            </g>
+          )
+        })}
+
+        {intersections.map((inter, i) => {
+          const pt = getPt(inter)
+          if (!pt) return null
+          return (
+            <text
+              key={i}
+              x={pt.x}
+              y={pt.y}
+              fill="rgba(255,255,255,0.65)"
+              fontSize={10}
+              textAnchor="middle"
+              fontFamily="inherit"
+            >
+              {fmt(inter.value)}
+            </text>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}