@w5-ui/react 0.1.0

package/src/components/BoxPlot.tsx

@@ -0,0 +1,142 @@
+import { useMemo } from 'react'
+
+export interface BoxSeries {
+  label: string
+  q0: number
+  q1: number
+  q2: number
+  q3: number
+  q4: number
+  color?: string
+}
+
+export interface BoxPlotProps {
+  series: BoxSeries[]
+  yRange?: [number, number]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = { t: 12, r: 8, b: 28, l: 8 }
+const DEFAULT_COLOR = '#006FFF'
+
+export function BoxPlot({ series, yRange, height = 160, ariaLabel = 'Box plot' }: BoxPlotProps) {
+  const { boxes, gridLines } = useMemo(() => {
+    if (!series.length) return { boxes: [], gridLines: [] }
+    const allVals = series.flatMap((s) => [s.q0, s.q1, s.q2, s.q3, s.q4])
+    const y0 = yRange?.[0] ?? Math.min(...allVals)
+    const y1 = yRange?.[1] ?? Math.max(...allVals)
+    const ySpan = y1 - y0 || 1
+    const chartW = VW - PAD.l - PAD.r
+    const chartH = height - PAD.t - PAD.b
+    const n = series.length
+    const slotW = chartW / n
+    const bw = slotW * 0.4
+    const toY = (v: number) => PAD.t + chartH - ((v - y0) / ySpan) * chartH
+    const gridLines = [0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH)
+    const boxes = series.map((s, i) => {
+      const cx = PAD.l + (i + 0.5) * slotW
+      return {
+        key: String(i),
+        cx: cx.toFixed(1),
+        color: s.color ?? DEFAULT_COLOR,
+        label: s.label,
+        whiskerY0: toY(s.q0).toFixed(1),
+        whiskerY4: toY(s.q4).toFixed(1),
+        capX0: (cx - bw / 2).toFixed(1),
+        capX1: (cx + bw / 2).toFixed(1),
+        boxX: (cx - bw / 2).toFixed(1),
+        boxW: bw.toFixed(1),
+        boxY: toY(s.q3).toFixed(1),
+        boxH: (toY(s.q1) - toY(s.q3)).toFixed(1),
+        medY: toY(s.q2).toFixed(1),
+      }
+    })
+    return { boxes, gridLines }
+  }, [series, yRange, 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"
+      >
+        {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}
+          />
+        ))}
+        {boxes.map((b) => (
+          <g key={b.key}>
+            <line
+              x1={b.cx}
+              y1={b.whiskerY4}
+              x2={b.cx}
+              y2={b.whiskerY0}
+              stroke={b.color}
+              strokeWidth={1.5}
+              strokeOpacity={0.6}
+            />
+            <line
+              x1={b.capX0}
+              y1={b.whiskerY0}
+              x2={b.capX1}
+              y2={b.whiskerY0}
+              stroke={b.color}
+              strokeWidth={1.5}
+              strokeOpacity={0.6}
+            />
+            <line
+              x1={b.capX0}
+              y1={b.whiskerY4}
+              x2={b.capX1}
+              y2={b.whiskerY4}
+              stroke={b.color}
+              strokeWidth={1.5}
+              strokeOpacity={0.6}
+            />
+            <rect
+              x={b.boxX}
+              y={b.boxY}
+              width={b.boxW}
+              height={b.boxH}
+              fill={b.color}
+              fillOpacity={0.2}
+              stroke={b.color}
+              strokeWidth={1.5}
+              strokeOpacity={0.8}
+              rx={2}
+            />
+            <line
+              x1={b.capX0}
+              y1={b.medY}
+              x2={b.capX1}
+              y2={b.medY}
+              stroke={b.color}
+              strokeWidth={2.5}
+            />
+            <text
+              x={b.cx}
+              y={height - 4}
+              textAnchor="middle"
+              fill="#6E7079"
+              fontSize={9}
+              fontFamily="inherit"
+            >
+              {b.label}
+            </text>
+          </g>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,44 @@
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[]
+  onNavigate?: (index: number) => void
+  className?: string
+}
+
+export function Breadcrumb({ items, onNavigate, className = '' }: BreadcrumbProps) {
+  return (
+    <nav aria-label="Breadcrumb" className={`breadcrumb ${className}`.trim()}>
+      <ol className="breadcrumb__list">
+        {items.map((item, i) => {
+          const isLast = i === items.length - 1
+          return (
+            <li key={i} className="breadcrumb__item">
+              {isLast ? (
+                <span aria-current="page" className="breadcrumb__current">
+                  {item.label}
+                </span>
+              ) : item.href ? (
+                <a href={item.href} className="breadcrumb__link">
+                  {item.label}
+                </a>
+              ) : (
+                <button type="button" className="breadcrumb__link" onClick={() => onNavigate?.(i)}>
+                  {item.label}
+                </button>
+              )}
+              {!isLast && (
+                <span aria-hidden="true" className="breadcrumb__sep">
+                  /
+                </span>
+              )}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}

package/src/components/BubbleChart.tsx

@@ -0,0 +1,115 @@
+import { useMemo } from 'react'
+
+export interface BubblePoint {
+  x: number
+  y: number
+  size: number
+  color?: string
+  label?: string
+  key?: string
+}
+
+export interface BubbleChartProps {
+  points: BubblePoint[]
+  xRange?: [number, number]
+  yRange?: [number, number]
+  rRange?: [number, number]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = { t: 12, r: 12, b: 12, l: 12 }
+const DEFAULT_COLOR = '#006FFF'
+
+export function BubbleChart({
+  points,
+  xRange,
+  yRange,
+  rRange = [4, 20],
+  height = 160,
+  ariaLabel = 'Bubble chart',
+}: BubbleChartProps) {
+  const { bubbles, gridLines } = useMemo(() => {
+    if (!points.length) return { bubbles: [], gridLines: [] }
+    const xs = points.map((p) => p.x)
+    const ys = points.map((p) => p.y)
+    const sizes = points.map((p) => p.size)
+    const x0 = xRange?.[0] ?? Math.min(...xs)
+    const x1 = xRange?.[1] ?? Math.max(...xs)
+    const y0 = yRange?.[0] ?? Math.min(...ys)
+    const y1 = yRange?.[1] ?? Math.max(...ys)
+    const s0 = Math.min(...sizes)
+    const s1 = Math.max(...sizes)
+    const xSpan = x1 - x0 || 1
+    const ySpan = y1 - y0 || 1
+    const sSpan = s1 - s0 || 1
+    const [rMin, rMax] = rRange
+    const chartW = VW - PAD.l - PAD.r
+    const chartH = height - PAD.t - PAD.b
+
+    const toX = (x: number) => PAD.l + ((x - x0) / xSpan) * chartW
+    const toY = (y: number) => PAD.t + chartH - ((y - y0) / ySpan) * chartH
+    const toR = (s: number) => rMin + ((s - s0) / sSpan) * (rMax - rMin)
+
+    const gridLines = [0.25, 0.5, 0.75].map((f) => ({
+      x: PAD.l + f * chartW,
+      y: PAD.t + (1 - f) * chartH,
+    }))
+
+    const bubbles = points.map((p, i) => ({
+      cx: toX(p.x).toFixed(1),
+      cy: toY(p.y).toFixed(1),
+      r: toR(p.size).toFixed(1),
+      color: p.color ?? DEFAULT_COLOR,
+      key: p.key ?? String(i),
+    }))
+
+    return { bubbles, gridLines }
+  }, [points, xRange, yRange, rRange, 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"
+      >
+        {gridLines.map((g, i) => (
+          <g key={i}>
+            <line
+              x1={g.x}
+              y1={PAD.t}
+              x2={g.x}
+              y2={PAD.t + (height - PAD.t - PAD.b)}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <line
+              x1={PAD.l}
+              y1={g.y}
+              x2={VW - PAD.r}
+              y2={g.y}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+          </g>
+        ))}
+        {bubbles.map((b) => (
+          <circle
+            key={b.key}
+            cx={b.cx}
+            cy={b.cy}
+            r={b.r}
+            fill={b.color}
+            fillOpacity={0.6}
+            stroke={b.color}
+            strokeOpacity={0.9}
+            strokeWidth={1.5}
+          />
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/BulletChart.tsx

@@ -0,0 +1,121 @@
+export interface BulletItem {
+  label: string
+  value: number
+  target?: number
+  ranges?: [number, number]
+  unit?: string
+  color?: string
+}
+
+export interface BulletChartProps {
+  items: BulletItem[]
+  max?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const LABEL_W = 110
+const VAL_W = 44
+const TRACK_H = 10
+const RANGE_H = 18
+const ROW_H = 34
+const PAD = 8
+
+export function BulletChart({ items, max = 100, ariaLabel = 'Bullet chart' }: BulletChartProps) {
+  const trackW = VW - LABEL_W - VAL_W
+  const totalH = items.length * ROW_H + PAD * 2
+
+  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"
+      >
+        {items.map((item, i) => {
+          const y = PAD + i * ROW_H
+          const midY = y + ROW_H / 2
+          const rangeY = midY - RANGE_H / 2
+          const trackY = midY - TRACK_H / 2
+          const [r1, r2] = item.ranges ?? [50, 75]
+          const r1w = (r1 / max) * trackW
+          const r2w = (r2 / max) * trackW
+          const valW = Math.min(item.value / max, 1) * trackW
+          const targetX = item.target != null ? (Math.min(item.target, max) / max) * trackW : null
+          const color = item.color ?? '#006FFF'
+          const unit = item.unit ?? '%'
+
+          return (
+            <g key={i}>
+              <text
+                x={LABEL_W - 8}
+                y={midY + 4}
+                textAnchor="end"
+                fill="#A4A7B5"
+                fontSize={11}
+                fontFamily="inherit"
+              >
+                {item.label}
+              </text>
+              <rect
+                x={LABEL_W}
+                y={rangeY}
+                width={trackW}
+                height={RANGE_H}
+                fill="rgba(255,255,255,0.04)"
+                rx={2}
+              />
+              <rect
+                x={LABEL_W + r1w}
+                y={rangeY}
+                width={trackW - r1w}
+                height={RANGE_H}
+                fill="rgba(255,255,255,0.07)"
+                rx={2}
+              />
+              <rect
+                x={LABEL_W + r2w}
+                y={rangeY}
+                width={trackW - r2w}
+                height={RANGE_H}
+                fill="rgba(255,255,255,0.10)"
+                rx={2}
+              />
+              <rect
+                x={LABEL_W}
+                y={trackY}
+                width={valW}
+                height={TRACK_H}
+                fill={color}
+                fillOpacity={0.9}
+                rx={2}
+              />
+              {targetX != null && (
+                <rect
+                  x={LABEL_W + targetX - 1.5}
+                  y={rangeY}
+                  width={3}
+                  height={RANGE_H}
+                  fill="rgba(255,255,255,0.85)"
+                  rx={1}
+                />
+              )}
+              <text
+                x={LABEL_W + trackW + 6}
+                y={midY + 4}
+                fill="#fff"
+                fontSize={11}
+                fontFamily="inherit"
+                style={{ fontVariantNumeric: 'tabular-nums' }}
+              >
+                {item.value}
+                {unit}
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/BumpChart.tsx

@@ -0,0 +1,127 @@
+export interface BumpSeries {
+  label: string
+  ranks: number[] // 1 = top rank at each time point
+  color?: string
+}
+
+export interface BumpChartProps {
+  labels: string[]
+  series: BumpSeries[]
+  ariaLabel?: string
+}
+
+const VW = 380
+const PAD_L = 12
+const PAD_R = 76
+const PAD_T = 8
+const PAD_B = 20
+const ROW_H = 28
+const DOT_R = 5
+const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342']
+
+export function BumpChart({ labels, series, ariaLabel = 'Bump chart' }: BumpChartProps) {
+  const maxRank = Math.max(...series.flatMap((s) => s.ranks), 1)
+  const TRACK_W = VW - PAD_L - PAD_R
+  const svgH = PAD_T + maxRank * ROW_H + PAD_B
+
+  const xOf = (i: number) =>
+    labels.length > 1 ? PAD_L + (i / (labels.length - 1)) * TRACK_W : PAD_L + TRACK_W / 2
+
+  const yOf = (rank: number) => PAD_T + (rank - 1) * ROW_H + ROW_H / 2
+
+  function buildPath(ranks: number[]): string {
+    return ranks
+      .map((rank, i) => {
+        const x = xOf(i)
+        const y = yOf(rank)
+        if (i === 0) return `M${x},${y}`
+        const prevX = xOf(i - 1)
+        const prevY = yOf(ranks[i - 1])
+        const cpX = (prevX + x) / 2
+        return `C${cpX},${prevY} ${cpX},${y} ${x},${y}`
+      })
+      .join(' ')
+  }
+
+  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"
+      >
+        {labels.map((label, i) => (
+          <g key={i}>
+            <line
+              x1={xOf(i)}
+              y1={PAD_T}
+              x2={xOf(i)}
+              y2={PAD_T + maxRank * ROW_H}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <text
+              x={xOf(i)}
+              y={svgH - 5}
+              fill="#6E7079"
+              fontSize={9}
+              textAnchor="middle"
+              fontFamily="inherit"
+            >
+              {label}
+            </text>
+          </g>
+        ))}
+
+        {Array.from({ length: maxRank }, (_, i) => (
+          <line
+            key={i}
+            x1={PAD_L}
+            y1={yOf(i + 1)}
+            x2={PAD_L + TRACK_W}
+            y2={yOf(i + 1)}
+            stroke="rgba(255,255,255,0.04)"
+            strokeWidth={1}
+          />
+        ))}
+
+        {series.map((s, si) => {
+          const color = s.color ?? COLORS[si % COLORS.length]
+          const lastRank = s.ranks[s.ranks.length - 1]
+          return (
+            <g key={si}>
+              <path
+                d={buildPath(s.ranks)}
+                fill="none"
+                stroke={color}
+                strokeWidth={2.5}
+                opacity={0.85}
+              />
+              {s.ranks.map((rank, i) => (
+                <circle
+                  key={i}
+                  cx={xOf(i)}
+                  cy={yOf(rank)}
+                  r={DOT_R}
+                  fill={color}
+                  stroke="#1A1F2E"
+                  strokeWidth={1.5}
+                />
+              ))}
+              <text
+                x={xOf(labels.length - 1) + DOT_R + 6}
+                y={yOf(lastRank) + 4}
+                fill={color}
+                fontSize={10}
+                fontFamily="inherit"
+              >
+                {s.label}
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/Button.tsx

@@ -0,0 +1,61 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { Spinner } from './Spinner.js'
+
+export type ButtonVariant = 'primary' | 'ghost' | 'danger'
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  iconOnly?: boolean
+  loading?: boolean
+  children?: ReactNode
+}
+
+export function Button({
+  variant = 'ghost',
+  iconOnly = false,
+  loading = false,
+  className = '',
+  type = 'button',
+  disabled,
+  children,
+  ...rest
+}: ButtonProps) {
+  const cls = ['btn', `btn-${variant}`, iconOnly && 'btn-icon', className].filter(Boolean).join(' ')
+  return (
+    <button
+      type={type}
+      className={cls}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+      {...rest}
+    >
+      {loading && <Spinner size="sm" />}
+      {children}
+    </button>
+  )
+}
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode
+}
+
+export function IconButton({
+  className = '',
+  type = 'button',
+  children,
+  title,
+  'aria-label': ariaLabel,
+  ...rest
+}: IconButtonProps) {
+  return (
+    <button
+      type={type}
+      className={`icon-btn ${className}`.trim()}
+      title={title}
+      aria-label={ariaLabel ?? title}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}