@w5-ui/react 0.1.0

package/src/components/FileUpload.tsx

@@ -0,0 +1,129 @@
+import { useRef, useState, type DragEvent, type ChangeEvent } from 'react'
+
+export interface FileUploadProps {
+  label?: string
+  hint?: string
+  accept?: string
+  multiple?: boolean
+  disabled?: boolean
+  onFiles?: (files: File[]) => void
+}
+
+export function FileUpload({
+  label = 'Upload file',
+  hint,
+  accept,
+  multiple = false,
+  disabled = false,
+  onFiles,
+}: FileUploadProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [drag, setDrag] = useState(false)
+  const [done, setDone] = useState<string | null>(null)
+
+  function handleFiles(files: FileList | null) {
+    if (!files || files.length === 0) return
+    const arr = Array.from(files)
+    setDone(arr.length === 1 ? arr[0].name : `${arr.length} files selected`)
+    onFiles?.(arr)
+  }
+
+  function onChange(e: ChangeEvent<HTMLInputElement>) {
+    handleFiles(e.target.files)
+    e.target.value = ''
+  }
+
+  function onDragOver(e: DragEvent) {
+    e.preventDefault()
+    if (!disabled) setDrag(true)
+  }
+
+  function onDragLeave(e: DragEvent) {
+    if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) {
+      setDrag(false)
+    }
+  }
+
+  function onDrop(e: DragEvent) {
+    e.preventDefault()
+    setDrag(false)
+    if (!disabled) handleFiles(e.dataTransfer.files)
+  }
+
+  const cls = [
+    'file-upload',
+    drag ? 'file-upload--drag' : '',
+    done ? 'file-upload--done' : '',
+    disabled ? 'file-upload--disabled' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  return (
+    <div
+      role="button"
+      aria-label={done ?? label}
+      aria-disabled={disabled}
+      className={cls}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+      onClick={() => {
+        if (!disabled) inputRef.current?.click()
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          if (!disabled) inputRef.current?.click()
+        }
+      }}
+      tabIndex={disabled ? -1 : 0}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        className="sr-only"
+        onChange={onChange}
+        aria-label={label}
+        tabIndex={-1}
+      />
+      <svg className="file-upload__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        {done ? (
+          <path
+            d="M5 13l4 4L19 7"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        ) : (
+          <>
+            <path
+              d="M12 15V3m0 0L8 7m4-4 4 4"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+            <path
+              d="M3 15v4a2 2 0 002 2h14a2 2 0 002-2v-4"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              fill="none"
+            />
+          </>
+        )}
+      </svg>
+      <div>
+        <span className="file-upload__label">{done ?? label}</span>
+        {!done && hint && <p className="file-upload__hint">{hint}</p>}
+      </div>
+    </div>
+  )
+}

package/src/components/FilterBuilder.tsx

@@ -0,0 +1,217 @@
+import { useId } from 'react'
+
+export interface FilterField {
+  key: string
+  label: string
+  type?: 'text' | 'number' | 'select'
+  options?: string[]
+}
+
+export interface FilterRule {
+  id: string
+  field: string
+  op: string
+  value: string
+}
+
+export interface FilterBuilderProps {
+  fields: FilterField[]
+  value?: FilterRule[]
+  conjunction?: 'and' | 'or'
+  onChange?: (rules: FilterRule[], conjunction: 'and' | 'or') => void
+  'aria-label'?: string
+}
+
+const TEXT_OPS = ['contains', 'not contains', 'equals', 'not equals', 'starts with']
+const NUM_OPS = ['equals', 'not equals', 'greater than', 'less than', 'at least', 'at most']
+const SEL_OPS = ['is', 'is not']
+
+function opsFor(type?: string) {
+  if (type === 'number') return NUM_OPS
+  if (type === 'select') return SEL_OPS
+  return TEXT_OPS
+}
+
+function defaultOp(type?: string) {
+  return opsFor(type)[0]
+}
+
+let _id = 0
+function uid() {
+  return String(++_id)
+}
+
+export function FilterBuilder({
+  fields,
+  value = [],
+  conjunction = 'and',
+  onChange,
+  'aria-label': ariaLabel = 'Filter builder',
+}: FilterBuilderProps) {
+  const groupId = useId()
+
+  function update(rules: FilterRule[], conj: 'and' | 'or' = conjunction) {
+    onChange?.(rules, conj)
+  }
+
+  function addRule() {
+    const f = fields[0]
+    update([...value, { id: uid(), field: f?.key ?? '', op: defaultOp(f?.type), value: '' }])
+  }
+
+  function removeRule(id: string) {
+    update(value.filter((r) => r.id !== id))
+  }
+
+  function setField(id: string, key: string) {
+    const f = fields.find((x) => x.key === key)
+    update(
+      value.map((r) => (r.id === id ? { ...r, field: key, op: defaultOp(f?.type), value: '' } : r)),
+    )
+  }
+
+  function setOp(id: string, op: string) {
+    update(value.map((r) => (r.id === id ? { ...r, op } : r)))
+  }
+
+  function setValue(id: string, val: string) {
+    update(value.map((r) => (r.id === id ? { ...r, value: val } : r)))
+  }
+
+  return (
+    <div className="fb" role="group" aria-label={ariaLabel}>
+      <div className="fb-header">
+        <span className="fb-label">Filters</span>
+        {value.length > 0 && (
+          <>
+            <span className="fb-conj-label">Match</span>
+            <div className="fb-conj" role="group" aria-label="Conjunction">
+              {(['and', 'or'] as const).map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  className={`fb-conj-btn${conjunction === c ? ' is-active' : ''}`}
+                  aria-pressed={conjunction === c}
+                  onClick={() => update(value, c)}
+                >
+                  {c.toUpperCase()}
+                </button>
+              ))}
+            </div>
+            <span className="fb-conj-label">conditions</span>
+          </>
+        )}
+        <button type="button" className="fb-add" onClick={addRule} aria-label="Add filter rule">
+          + Add rule
+        </button>
+        {value.length > 0 && (
+          <button
+            type="button"
+            className="fb-clear"
+            onClick={() => update([])}
+            aria-label="Clear all filters"
+          >
+            Clear
+          </button>
+        )}
+      </div>
+      {value.length > 0 && (
+        <ul className="fb-rules" aria-label="Filter rules">
+          {value.map((rule, i) => {
+            const f = fields.find((x) => x.key === rule.field)
+            const ops = opsFor(f?.type)
+            const fieldId = `${groupId}-f${i}`
+            const opId = `${groupId}-op${i}`
+            const valId = `${groupId}-v${i}`
+            return (
+              <li key={rule.id} className="fb-rule">
+                <label className="sr-only" htmlFor={fieldId}>
+                  Field {i + 1}
+                </label>
+                <select
+                  id={fieldId}
+                  className="fb-select"
+                  value={rule.field}
+                  onChange={(e) => setField(rule.id, e.target.value)}
+                  aria-label={`Rule ${i + 1} field`}
+                >
+                  {fields.map((x) => (
+                    <option key={x.key} value={x.key}>
+                      {x.label}
+                    </option>
+                  ))}
+                </select>
+                <label className="sr-only" htmlFor={opId}>
+                  Operator {i + 1}
+                </label>
+                <select
+                  id={opId}
+                  className="fb-select fb-select--op"
+                  value={rule.op}
+                  onChange={(e) => setOp(rule.id, e.target.value)}
+                  aria-label={`Rule ${i + 1} operator`}
+                >
+                  {ops.map((op) => (
+                    <option key={op} value={op}>
+                      {op}
+                    </option>
+                  ))}
+                </select>
+                <label className="sr-only" htmlFor={valId}>
+                  Value {i + 1}
+                </label>
+                {f?.type === 'select' ? (
+                  <select
+                    id={valId}
+                    className="fb-select fb-select--val"
+                    value={rule.value}
+                    onChange={(e) => setValue(rule.id, e.target.value)}
+                    aria-label={`Rule ${i + 1} value`}
+                  >
+                    <option value="">Any</option>
+                    {f.options?.map((o) => (
+                      <option key={o} value={o}>
+                        {o}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    id={valId}
+                    className="fb-input"
+                    type={f?.type === 'number' ? 'number' : 'text'}
+                    value={rule.value}
+                    placeholder="Value…"
+                    onChange={(e) => setValue(rule.id, e.target.value)}
+                    aria-label={`Rule ${i + 1} value`}
+                  />
+                )}
+                <button
+                  type="button"
+                  className="fb-remove icon-btn"
+                  onClick={() => removeRule(rule.id)}
+                  aria-label={`Remove rule ${i + 1}`}
+                >
+                  <svg
+                    viewBox="0 0 12 12"
+                    width="10"
+                    height="10"
+                    aria-hidden="true"
+                    fill="currentColor"
+                  >
+                    <path
+                      d="M1 1l10 10M11 1L1 11"
+                      stroke="currentColor"
+                      strokeWidth="1.8"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                </button>
+              </li>
+            )
+          })}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/FlameGraph.tsx

@@ -0,0 +1,119 @@
+import { useMemo } from 'react'
+
+export interface FlameNode {
+  label: string
+  value?: number
+  color?: string
+  children?: FlameNode[]
+}
+
+export interface FlameGraphProps {
+  root: FlameNode
+  height?: number
+  ariaLabel?: string
+}
+
+interface FlatCell {
+  x: number
+  y: number
+  w: number
+  h: number
+  label: string
+  color: string
+  depth: number
+}
+
+const PALETTE = ['#006FFF', '#FF7B2E', '#F5A623', '#FB923C', '#F97316', '#EF4444', '#A78BFA']
+const VW = 340
+const GAP = 1.5
+
+function nodeValue(node: FlameNode): number {
+  if (node.children?.length) return node.children.reduce((s, c) => s + nodeValue(c), 0)
+  return node.value ?? 1
+}
+
+function treeDepth(node: FlameNode): number {
+  if (!node.children?.length) return 0
+  return 1 + Math.max(...node.children.map(treeDepth))
+}
+
+function flatten(
+  node: FlameNode,
+  x: number,
+  depth: number,
+  w: number,
+  levelH: number,
+  totalHeight: number,
+  inheritColor: string,
+  colorIdx: { n: number },
+  cells: FlatCell[],
+): void {
+  let color = node.color ?? ''
+  if (!color) {
+    if (depth === 0) color = 'rgba(255,255,255,0.10)'
+    else if (depth === 1) color = PALETTE[colorIdx.n++ % PALETTE.length]
+    else color = inheritColor
+  }
+  const y = totalHeight - (depth + 1) * levelH
+  cells.push({ x, y, w, h: levelH, label: node.label, color, depth })
+  if (node.children?.length && w > 0) {
+    const total = nodeValue(node)
+    let cx = x
+    for (const child of node.children) {
+      const cw = total > 0 ? (nodeValue(child) / total) * w : 0
+      flatten(child, cx, depth + 1, cw, levelH, totalHeight, color, colorIdx, cells)
+      cx += cw
+    }
+  }
+}
+
+export function FlameGraph({ root, height = 160, ariaLabel = 'Flame graph' }: FlameGraphProps) {
+  const cells = useMemo(() => {
+    const depth = treeDepth(root)
+    const levelH = height / (depth + 1)
+    const result: FlatCell[] = []
+    flatten(root, 0, 0, VW, levelH, height, PALETTE[0], { n: 0 }, result)
+    return result
+  }, [root, height])
+
+  if (!cells.length) 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"
+      >
+        {cells.map((cell, i) =>
+          cell.w > GAP * 2 ? (
+            <g key={i}>
+              <rect
+                x={cell.x + GAP / 2}
+                y={cell.y + GAP / 2}
+                width={Math.max(0, cell.w - GAP)}
+                height={Math.max(0, cell.h - GAP)}
+                fill={cell.color}
+                fillOpacity={cell.depth === 0 ? 1 : cell.depth === 1 ? 0.7 : 0.85}
+                rx={2}
+              />
+              {cell.w > 32 && (
+                <text
+                  x={cell.x + cell.w / 2}
+                  y={cell.y + cell.h / 2 + 4}
+                  textAnchor="middle"
+                  fontSize={Math.min(10, (cell.w - GAP) / 6, cell.h - 4)}
+                  fill="#fff"
+                  fontFamily="inherit"
+                >
+                  {cell.label}
+                </text>
+              )}
+            </g>
+          ) : null,
+        )}
+      </svg>
+    </div>
+  )
+}

package/src/components/ForceGraph.tsx

@@ -0,0 +1,149 @@
+export interface FDNode {
+  id: string
+  label?: string
+  color?: string
+  r?: number
+}
+
+export interface FDLink {
+  source: string
+  target: string
+}
+
+export interface ForceGraphProps {
+  nodes: FDNode[]
+  links: FDLink[]
+  height?: number
+  ariaLabel?: string
+}
+
+const PALETTE = ['#006FFF', '#00C875', '#FF7B7B', '#F5C26B', '#A78BFA', '#34D399']
+const VW = 340
+const ITERS = 300
+
+type State = { x: number; y: number; vx: number; vy: number }
+
+function layout(
+  nodes: FDNode[],
+  links: FDLink[],
+  W: number,
+  H: number,
+): { x: number; y: number }[] {
+  const idxById: Record<string, number> = {}
+  nodes.forEach((n, i) => {
+    idxById[n.id] = i
+  })
+  const edges = links
+    .map((l) => [idxById[l.source], idxById[l.target]] as [number, number])
+    .filter(([a, b]) => a !== undefined && b !== undefined)
+
+  const cx = W / 2
+  const cy = H / 2
+  const step = (2 * Math.PI) / nodes.length
+  const r0 = Math.min(W, H) * 0.35
+
+  const state: State[] = nodes.map((_, i) => ({
+    x: cx + r0 * Math.cos(i * step),
+    y: cy + r0 * Math.sin(i * step),
+    vx: 0,
+    vy: 0,
+  }))
+
+  for (let iter = 0; iter < ITERS; iter++) {
+    for (const [a, b] of edges) {
+      const dx = state[b].x - state[a].x
+      const dy = state[b].y - state[a].y
+      const d = Math.sqrt(dx * dx + dy * dy) || 1
+      const f = (0.04 * (d - 80)) / d
+      state[a].vx += dx * f
+      state[a].vy += dy * f
+      state[b].vx -= dx * f
+      state[b].vy -= dy * f
+    }
+    for (let i = 0; i < state.length; i++) {
+      for (let j = i + 1; j < state.length; j++) {
+        const dx = state[j].x - state[i].x
+        const dy = state[j].y - state[i].y
+        const d2 = dx * dx + dy * dy || 1
+        const d = Math.sqrt(d2)
+        const f = 600 / d2
+        state[i].vx -= (dx / d) * f
+        state[i].vy -= (dy / d) * f
+        state[j].vx += (dx / d) * f
+        state[j].vy += (dy / d) * f
+      }
+    }
+    for (const s of state) {
+      s.vx += (cx - s.x) * 0.008
+      s.vy += (cy - s.y) * 0.008
+      s.vx *= 0.85
+      s.vy *= 0.85
+      s.x += s.vx
+      s.y += s.vy
+    }
+  }
+
+  return state.map((s) => ({ x: s.x, y: s.y }))
+}
+
+export function ForceGraph({
+  nodes,
+  links,
+  height = 260,
+  ariaLabel = 'Force-directed network graph',
+}: ForceGraphProps) {
+  if (!nodes.length) return null
+
+  const pos = layout(nodes, links, VW, height)
+  const idxById: Record<string, number> = {}
+  nodes.forEach((n, i) => {
+    idxById[n.id] = i
+  })
+
+  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"
+      >
+        {links.map((l, li) => {
+          const si = idxById[l.source]
+          const ti = idxById[l.target]
+          if (si === undefined || ti === undefined) return null
+          return (
+            <line
+              key={li}
+              x1={pos[si].x}
+              y1={pos[si].y}
+              x2={pos[ti].x}
+              y2={pos[ti].y}
+              stroke="rgba(255,255,255,0.12)"
+              strokeWidth={1.5}
+            />
+          )
+        })}
+        {nodes.map((n, ni) => {
+          const r = n.r ?? 10
+          const color = n.color ?? PALETTE[ni % PALETTE.length]
+          return (
+            <g key={ni}>
+              <circle cx={pos[ni].x} cy={pos[ni].y} r={r} fill={color} fillOpacity={0.85} />
+              <text
+                x={pos[ni].x}
+                y={pos[ni].y + r + 11}
+                fill="#A4A7B5"
+                fontSize={8}
+                textAnchor="middle"
+                fontFamily="inherit"
+              >
+                {n.label ?? n.id}
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/FunnelChart.tsx

@@ -0,0 +1,79 @@
+import { useMemo } from 'react'
+
+export interface FunnelSegment {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface FunnelChartProps {
+  segments: FunnelSegment[]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 320
+const PAD = { t: 4, r: 8, b: 4, l: 8 }
+const SEP = 2
+const DEFAULT_COLORS = ['#006FFF', '#0092FF', '#00B4C2', '#00C875', '#F5A623']
+
+export function FunnelChart({
+  segments,
+  height = 160,
+  ariaLabel = 'Funnel chart',
+}: FunnelChartProps) {
+  const shapes = useMemo(() => {
+    if (!segments.length) return []
+    const maxVal = Math.max(...segments.map((s) => s.value))
+    const n = segments.length
+    const chartH = height - PAD.t - PAD.b
+    const slotH = (chartH - SEP * (n - 1)) / n
+    const chartW = VW - PAD.l - PAD.r
+    const cx = PAD.l + chartW / 2
+    const widths = segments.map((s) => (s.value / (maxVal || 1)) * chartW)
+
+    return segments.map((s, i) => {
+      const tw = widths[i]
+      const bw = i + 1 < n ? widths[i + 1] : widths[i] * 0.7
+      const y0 = PAD.t + i * (slotH + SEP)
+      const y1 = y0 + slotH
+      return {
+        points: `${(cx - tw / 2).toFixed(1)},${y0.toFixed(1)} ${(cx + tw / 2).toFixed(1)},${y0.toFixed(1)} ${(cx + bw / 2).toFixed(1)},${y1.toFixed(1)} ${(cx - bw / 2).toFixed(1)},${y1.toFixed(1)}`,
+        color: s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+        label: s.label,
+        value: s.value,
+        cx: cx.toFixed(1),
+        cy: ((y0 + y1) / 2).toFixed(1),
+      }
+    })
+  }, [segments, 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"
+      >
+        {shapes.map((s, i) => (
+          <g key={i}>
+            <polygon points={s.points} fill={s.color} fillOpacity={0.75} />
+            <text
+              x={s.cx}
+              y={s.cy}
+              textAnchor="middle"
+              dominantBaseline="central"
+              fill="rgba(255,255,255,0.9)"
+              fontSize={10}
+              fontFamily="inherit"
+              fontWeight={500}
+            >
+              {s.label} · {s.value}
+            </text>
+          </g>
+        ))}
+      </svg>
+    </div>
+  )
+}