@w5-ui/react 0.1.0

package/src/components/HorizonChart.tsx

@@ -0,0 +1,110 @@
+export interface HorizonSeries {
+  label: string
+  values: number[]
+  color?: string
+}
+
+export interface HorizonChartProps {
+  series: HorizonSeries[]
+  xLabels?: string[]
+  bands?: number
+  ariaLabel?: string
+}
+
+const LABEL_W = 72
+const ROW_H = 24
+const ROW_GAP = 3
+const X_H = 14
+const W = 400
+
+export function HorizonChart({
+  series,
+  xLabels,
+  bands = 3,
+  ariaLabel = 'Horizon chart',
+}: HorizonChartProps) {
+  if (!series.length) return null
+  const n = series[0].values.length
+  const allVals = series.flatMap((s) => s.values)
+  const maxVal = Math.max(...allVals, 1)
+  const step = maxVal / bands
+  const chartW = W - LABEL_W
+  const colW = chartW / Math.max(n, 1)
+  const totalH = series.length * (ROW_H + ROW_GAP) - ROW_GAP + (xLabels ? X_H + 4 : 0)
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${W} ${totalH}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {series.map((s, si) => {
+          const rowY = si * (ROW_H + ROW_GAP)
+          const color = s.color ?? '#006FFF'
+          return (
+            <g key={si}>
+              <text
+                x={LABEL_W - 6}
+                y={rowY + ROW_H / 2 + 4}
+                textAnchor="end"
+                fill="#C8C9D0"
+                fontSize={9}
+                fontFamily="inherit"
+              >
+                {s.label}
+              </text>
+              <rect
+                x={LABEL_W}
+                y={rowY}
+                width={chartW}
+                height={ROW_H}
+                fill="rgba(255,255,255,0.04)"
+                rx={2}
+              />
+              {s.values.flatMap((v, ti) =>
+                Array.from({ length: bands }, (_, k) => {
+                  const lo = k * step
+                  const fill = Math.min(Math.max(v - lo, 0), step) / step
+                  if (fill <= 0) return null
+                  const alpha = 0.25 + 0.3 * k
+                  const rH = fill * ROW_H
+                  return (
+                    <rect
+                      key={`${ti}-${k}`}
+                      x={LABEL_W + ti * colW}
+                      y={rowY + ROW_H - rH}
+                      width={Math.max(colW - 0.5, 0.5)}
+                      height={rH}
+                      fill={color}
+                      opacity={alpha}
+                      rx={1}
+                    />
+                  )
+                }),
+              )}
+            </g>
+          )
+        })}
+        {xLabels &&
+          xLabels.map((label, i) => {
+            const x = LABEL_W + (i / Math.max(xLabels.length - 1, 1)) * chartW
+            return (
+              <text
+                key={i}
+                x={x}
+                y={totalH}
+                textAnchor={i === 0 ? 'start' : i === xLabels.length - 1 ? 'end' : 'middle'}
+                fill="#6E7079"
+                fontSize={8}
+                fontFamily="inherit"
+              >
+                {label}
+              </text>
+            )
+          })}
+      </svg>
+    </div>
+  )
+}

package/src/components/HoverCard.tsx

@@ -0,0 +1,52 @@
+import { useId, useRef, useState, type ReactNode } from 'react'
+
+export type HoverCardPlacement = 'top' | 'bottom' | 'left' | 'right'
+
+export interface HoverCardProps {
+  content: ReactNode
+  children: ReactNode
+  placement?: HoverCardPlacement
+  delay?: number
+  className?: string
+}
+
+export function HoverCard({
+  content,
+  children,
+  placement = 'bottom',
+  delay = 300,
+  className = '',
+}: HoverCardProps) {
+  const id = useId()
+  const [open, setOpen] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  function show() {
+    if (timer.current) clearTimeout(timer.current)
+    timer.current = setTimeout(() => setOpen(true), delay)
+  }
+
+  function hide() {
+    if (timer.current) clearTimeout(timer.current)
+    setOpen(false)
+  }
+
+  return (
+    <div
+      className={`hovercard-wrapper hovercard-${placement} ${className}`.trim()}
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocus={show}
+      onBlur={hide}
+    >
+      <div className="hovercard-trigger" aria-describedby={open ? id : undefined}>
+        {children}
+      </div>
+      {open && (
+        <div id={id} role="tooltip" className="hovercard">
+          {content}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/IPInput.tsx

@@ -0,0 +1,147 @@
+import { useId, useRef, useState } from 'react'
+import type { ReactNode, ClipboardEvent, KeyboardEvent, ChangeEvent } from 'react'
+
+export interface IPInputProps {
+  label?: string
+  value?: string
+  defaultValue?: string
+  disabled?: boolean
+  onChange?: (value: string) => void
+  id?: string
+  className?: string
+}
+
+function clampOctet(s: string): string {
+  if (s === '') return s
+  const n = Number(s)
+  if (isNaN(n)) return s
+  return String(Math.min(255, Math.max(0, n)))
+}
+
+function parseIP(ip: string): [string, string, string, string] {
+  const parts = ip.split('.')
+  return [parts[0] ?? '0', parts[1] ?? '0', parts[2] ?? '0', parts[3] ?? '0']
+}
+
+export function IPInput({
+  label,
+  value: valueProp,
+  defaultValue = '0.0.0.0',
+  disabled = false,
+  onChange,
+  id,
+  className = '',
+}: IPInputProps) {
+  const gid = useId()
+  const inputId = id ?? gid
+  const [internal, setInternal] = useState<[string, string, string, string]>(() =>
+    parseIP(valueProp ?? defaultValue),
+  )
+  const refs = useRef<(HTMLInputElement | null)[]>([null, null, null, null])
+
+  const octets = valueProp !== undefined ? parseIP(valueProp) : internal
+
+  function focusAt(i: number) {
+    const el = refs.current[i]
+    if (el) {
+      el.focus()
+      el.select()
+    }
+  }
+
+  function commit(i: number, val: string) {
+    const next = [...octets] as [string, string, string, string]
+    next[i] = clampOctet(val)
+    if (valueProp === undefined) setInternal(next)
+    onChange?.(next.join('.'))
+  }
+
+  function handleChange(i: number, e: ChangeEvent<HTMLInputElement>) {
+    const raw = e.target.value
+    if (!/^\d{0,3}$/.test(raw)) return
+    commit(i, raw)
+    if (raw.length === 3 && i < 3) focusAt(i + 1)
+  }
+
+  function handleKey(i: number, e: KeyboardEvent<HTMLInputElement>) {
+    const el = refs.current[i]!
+    if (e.key === '.') {
+      e.preventDefault()
+      if (i < 3) focusAt(i + 1)
+    } else if (e.key === 'ArrowRight' && el.selectionStart === el.value.length) {
+      if (i < 3) {
+        e.preventDefault()
+        focusAt(i + 1)
+      }
+    } else if (e.key === 'ArrowLeft' && el.selectionStart === 0) {
+      if (i > 0) {
+        e.preventDefault()
+        focusAt(i - 1)
+      }
+    } else if (e.key === 'Backspace' && el.value === '' && i > 0) {
+      e.preventDefault()
+      focusAt(i - 1)
+    }
+  }
+
+  function handlePaste(e: ClipboardEvent<HTMLInputElement>) {
+    const text = e.clipboardData.getData('text').trim()
+    if (/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(text)) {
+      e.preventDefault()
+      const next = text.split('.').map(clampOctet) as [string, string, string, string]
+      if (valueProp === undefined) setInternal(next)
+      onChange?.(next.join('.'))
+      focusAt(3)
+    }
+  }
+
+  return (
+    <div className={`ip-input-wrapper ${className}`.trim()}>
+      {label && (
+        <label htmlFor={`${inputId}-0`} className="ip-input__label">
+          {label}
+        </label>
+      )}
+      <div
+        className={`ip-input${disabled ? ' ip-input--disabled' : ''}`}
+        role="group"
+        aria-label={label ?? 'IP address'}
+      >
+        {octets.flatMap((oct, i) => {
+          const nodes: ReactNode[] = [
+            <input
+              key={`o${i}`}
+              ref={(el) => {
+                refs.current[i] = el
+              }}
+              id={i === 0 ? `${inputId}-0` : undefined}
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              role="spinbutton"
+              aria-label={`Octet ${i + 1} of 4`}
+              aria-valuenow={oct === '' ? 0 : Number(oct)}
+              aria-valuemin={0}
+              aria-valuemax={255}
+              value={oct}
+              disabled={disabled}
+              maxLength={3}
+              className="ip-input__octet"
+              onChange={(e) => handleChange(i, e)}
+              onKeyDown={(e) => handleKey(i, e)}
+              onPaste={handlePaste}
+              onFocus={(e) => e.currentTarget.select()}
+            />,
+          ]
+          if (i < 3)
+            nodes.push(
+              <span key={`d${i}`} className="ip-input__dot" aria-hidden="true">
+                .
+              </span>,
+            )
+          return nodes
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/IcicleChart.tsx

@@ -0,0 +1,118 @@
+import { useMemo } from 'react'
+
+export interface IcicleNode {
+  label: string
+  value?: number
+  color?: string
+  children?: IcicleNode[]
+}
+
+export interface IcicleChartProps {
+  root: IcicleNode
+  height?: number
+  ariaLabel?: string
+}
+
+interface FlatCell {
+  x: number
+  y: number
+  w: number
+  h: number
+  label: string
+  color: string
+  depth: number
+}
+
+const PALETTE = ['#FF7B7B', '#F5A623', '#A78BFA', '#34D399', '#006FFF', '#00C875', '#FB923C']
+const VW = 340
+const GAP = 1.5
+
+function nodeValue(node: IcicleNode): number {
+  if (node.children?.length) return node.children.reduce((s, c) => s + nodeValue(c), 0)
+  return node.value ?? 1
+}
+
+function treeDepth(node: IcicleNode): number {
+  if (!node.children?.length) return 0
+  return 1 + Math.max(...node.children.map(treeDepth))
+}
+
+function flatten(
+  node: IcicleNode,
+  x: number,
+  y: number,
+  w: number,
+  levelH: number,
+  depth: 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
+  }
+  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, y + levelH, cw, levelH, depth + 1, color, colorIdx, cells)
+      cx += cw
+    }
+  }
+}
+
+export function IcicleChart({ root, height = 160, ariaLabel = 'Icicle chart' }: IcicleChartProps) {
+  const cells = useMemo(() => {
+    const depth = treeDepth(root)
+    const levelH = height / (depth + 1)
+    const result: FlatCell[] = []
+    flatten(root, 0, 0, VW, levelH, 0, 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/InlineEdit.tsx

@@ -0,0 +1,119 @@
+import { useState, useRef, useId } from 'react'
+
+const PencilIcon = () => (
+  <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" focusable={false}>
+    <path
+      d="M9.5 2l2.5 2.5-8 8H1.5v-2.5l8-8z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+const CheckIcon = () => (
+  <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" focusable={false}>
+    <path
+      d="M2.5 7.5l3.5 3.5L12 3"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+const CrossIcon = () => (
+  <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" focusable={false}>
+    <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+export interface InlineEditProps {
+  value: string
+  onConfirm: (value: string) => void
+  label: string
+  placeholder?: string
+}
+
+export function InlineEdit({ value, onConfirm, label, placeholder }: InlineEditProps) {
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState(value)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const editBtnRef = useRef<HTMLButtonElement>(null)
+  const inputId = useId()
+
+  function startEdit() {
+    setDraft(value)
+    setEditing(true)
+    requestAnimationFrame(() => inputRef.current?.focus())
+  }
+
+  function confirm() {
+    const trimmed = draft.trim()
+    if (trimmed) onConfirm(trimmed)
+    setEditing(false)
+    requestAnimationFrame(() => editBtnRef.current?.focus())
+  }
+
+  function cancel() {
+    setDraft(value)
+    setEditing(false)
+    requestAnimationFrame(() => editBtnRef.current?.focus())
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      confirm()
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      cancel()
+    }
+  }
+
+  if (editing) {
+    return (
+      <span className="ie ie--editing">
+        <input
+          ref={inputRef}
+          id={inputId}
+          className="ie__input"
+          aria-label={`Edit ${label}`}
+          value={draft}
+          placeholder={placeholder}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+        <button type="button" className="ie__btn ie__btn--save" aria-label="Save" onClick={confirm}>
+          <CheckIcon />
+        </button>
+        <button
+          type="button"
+          className="ie__btn ie__btn--cancel"
+          aria-label="Cancel"
+          onClick={cancel}
+        >
+          <CrossIcon />
+        </button>
+      </span>
+    )
+  }
+
+  return (
+    <span className="ie">
+      <span className="ie__text">{value}</span>
+      <button
+        ref={editBtnRef}
+        type="button"
+        className="ie__edit"
+        aria-label={`Edit ${label}`}
+        onClick={startEdit}
+      >
+        <PencilIcon />
+      </button>
+    </span>
+  )
+}

package/src/components/Input.tsx

@@ -0,0 +1,94 @@
+import { useId } from 'react'
+import type { InputHTMLAttributes, ReactNode } from 'react'
+import { SearchIcon } from '../icons.js'
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+export function Input({ className = '', ...rest }: InputProps) {
+  return <input className={`input ${className}`.trim()} {...rest} />
+}
+
+export interface FieldProps {
+  label: string
+  children?: ReactNode
+  defaultValue?: string
+  value?: string
+  id?: string
+  error?: string
+  required?: boolean
+  hint?: string
+}
+
+export function Field({
+  label,
+  children,
+  defaultValue,
+  value,
+  id,
+  error,
+  required,
+  hint,
+}: FieldProps) {
+  const generatedId = useId()
+  const inputId = id ?? generatedId
+  const errorId = error ? `${inputId}-error` : undefined
+  const hintId = hint ? `${inputId}-hint` : undefined
+  const describedBy = [hintId, errorId].filter(Boolean).join(' ') || undefined
+  return (
+    <div className="field">
+      <label htmlFor={inputId}>
+        {label}
+        {required && (
+          <span className="req" aria-hidden="true">
+            {' '}
+            *
+          </span>
+        )}
+      </label>
+      {hint && (
+        <div className="field-hint" id={hintId}>
+          {hint}
+        </div>
+      )}
+      {children ?? (
+        <Input
+          id={inputId}
+          defaultValue={defaultValue}
+          value={value}
+          required={required}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={describedBy}
+        />
+      )}
+      {error && (
+        <div className="field-error" id={errorId} role="alert">
+          {error}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export interface SearchBoxProps extends InputHTMLAttributes<HTMLInputElement> {
+  placeholder?: string
+}
+
+export function SearchBox({ placeholder, type, 'aria-label': ariaLabel, ...rest }: SearchBoxProps) {
+  return (
+    <div className="search" role="search">
+      <SearchIcon
+        style={{ color: '#6E7079' }}
+        width={14}
+        height={14}
+        aria-hidden="true"
+        focusable="false"
+      />
+      <input
+        type={type ?? 'search'}
+        placeholder={placeholder}
+        aria-label={ariaLabel ?? placeholder}
+        {...rest}
+      />
+    </div>
+  )
+}

package/src/components/InputGroup.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+
+export interface InputGroupProps {
+  prefix?: ReactNode
+  suffix?: ReactNode
+  children: ReactNode
+}
+
+export function InputGroup({ prefix, suffix, children }: InputGroupProps) {
+  return (
+    <div className="input-group">
+      {prefix !== undefined && (
+        <span className="input-group-addon input-group-addon--prefix">{prefix}</span>
+      )}
+      {children}
+      {suffix !== undefined && (
+        <span className="input-group-addon input-group-addon--suffix">{suffix}</span>
+      )}
+    </div>
+  )
+}