@w5-ui/react 0.1.0

package/src/components/NotificationPanel.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useId, useRef, useState } from 'react'
+import { CloseIcon } from '../icons.js'
+import { IconButton } from './Button.js'
+
+export type NotifType = 'alarm' | 'system' | 'update'
+export type NotifSeverity = 'danger' | 'warn' | 'info' | 'success'
+
+export interface Notification {
+  id: string
+  type: NotifType
+  severity?: NotifSeverity
+  title: string
+  description?: string
+  time: string
+  read: boolean
+}
+
+export interface NotificationPanelProps {
+  open: boolean
+  onClose: () => void
+  notifications: Notification[]
+  onMarkRead?: (id: string) => void
+  onMarkAllRead?: () => void
+}
+
+const FOCUSABLE =
+  'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+
+const SEV_COLOR: Record<string, string> = {
+  danger: '#F03A3A',
+  warn: '#F5A623',
+  info: '#006FFF',
+  success: '#00B070',
+}
+
+const TYPE_LABEL: Record<NotifType, string> = {
+  alarm: 'Alarm',
+  system: 'System',
+  update: 'Update',
+}
+
+export function NotificationPanel({
+  open,
+  onClose,
+  notifications,
+  onMarkRead,
+  onMarkAllRead,
+}: NotificationPanelProps) {
+  const titleId = useId()
+  const panelRef = useRef<HTMLDivElement>(null)
+  const [filter, setFilter] = useState<'all' | NotifType>('all')
+
+  const unread = notifications.filter((n) => !n.read).length
+  const filtered = filter === 'all' ? notifications : notifications.filter((n) => n.type === filter)
+
+  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={`np-overlay${open ? ' np-overlay--show' : ''}`}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div
+        ref={panelRef}
+        className={`np-panel${open ? ' np-panel--show' : ''}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+      >
+        <div className="np-header">
+          <div className="np-title-row">
+            <h2 id={titleId} className="np-title">
+              Notifications
+              {unread > 0 && (
+                <span className="np-badge" aria-label={`${unread} unread`}>
+                  {unread}
+                </span>
+              )}
+            </h2>
+            <div className="np-header-actions">
+              {unread > 0 && (
+                <button type="button" className="np-mark-all" onClick={onMarkAllRead}>
+                  Mark all read
+                </button>
+              )}
+              <IconButton onClick={onClose} aria-label="Close notifications">
+                <CloseIcon />
+              </IconButton>
+            </div>
+          </div>
+          <div className="np-filters" role="tablist" aria-label="Filter by type">
+            {(['all', 'alarm', 'system', 'update'] as const).map((f) => (
+              <button
+                key={f}
+                type="button"
+                role="tab"
+                aria-selected={filter === f}
+                className={`np-filter${filter === f ? ' np-filter--active' : ''}`}
+                onClick={() => setFilter(f)}
+              >
+                {f === 'all' ? 'All' : TYPE_LABEL[f]}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div
+          className="np-list"
+          role="log"
+          aria-live="polite"
+          aria-label="Notifications"
+          aria-relevant="additions"
+        >
+          {filtered.length === 0 ? (
+            <div className="np-empty">No notifications</div>
+          ) : (
+            filtered.map((n) => (
+              <div key={n.id} className={`np-item${n.read ? ' np-item--read' : ''}`}>
+                <span
+                  className="np-dot"
+                  style={{ background: SEV_COLOR[n.severity ?? 'info'] }}
+                  aria-hidden="true"
+                />
+                <div className="np-item-body">
+                  <div className="np-item-top">
+                    <span className="np-item-title">{n.title}</span>
+                    <span className="np-item-time">{n.time}</span>
+                  </div>
+                  {n.description && <p className="np-item-desc">{n.description}</p>}
+                  <span className="np-type-badge">{TYPE_LABEL[n.type]}</span>
+                </div>
+                {!n.read && onMarkRead && (
+                  <button
+                    type="button"
+                    className="np-read-btn"
+                    onClick={() => onMarkRead(n.id)}
+                    aria-label={`Mark as read: ${n.title}`}
+                    title="Mark as read"
+                  >
+                    ✓
+                  </button>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/NumberInput.tsx

@@ -0,0 +1,129 @@
+import { useState, useId } from 'react'
+import type { KeyboardEvent, ChangeEvent } from 'react'
+
+export interface NumberInputProps {
+  label?: string
+  value?: number
+  defaultValue?: number
+  min?: number
+  max?: number
+  step?: number
+  suffix?: string
+  disabled?: boolean
+  onChange?: (value: number) => void
+  id?: string
+  className?: string
+}
+
+export function NumberInput({
+  label,
+  value: valueProp,
+  defaultValue = 0,
+  min,
+  max,
+  step = 1,
+  suffix,
+  disabled = false,
+  onChange,
+  id,
+  className = '',
+}: NumberInputProps) {
+  const generatedId = useId()
+  const inputId = id ?? generatedId
+  const [internalValue, setInternalValue] = useState(defaultValue)
+  const value = valueProp !== undefined ? valueProp : internalValue
+
+  function clamp(n: number) {
+    let v = n
+    if (min !== undefined) v = Math.max(min, v)
+    if (max !== undefined) v = Math.min(max, v)
+    return v
+  }
+
+  function commit(next: number) {
+    const clamped = clamp(next)
+    if (valueProp === undefined) setInternalValue(clamped)
+    onChange?.(clamped)
+  }
+
+  function handleKey(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      commit(value + step)
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      commit(value - step)
+    } else if (e.key === 'PageUp') {
+      e.preventDefault()
+      commit(value + step * 10)
+    } else if (e.key === 'PageDown') {
+      e.preventDefault()
+      commit(value - step * 10)
+    } else if (e.key === 'Home' && min !== undefined) {
+      e.preventDefault()
+      commit(min)
+    } else if (e.key === 'End' && max !== undefined) {
+      e.preventDefault()
+      commit(max)
+    }
+  }
+
+  function handleChange(e: ChangeEvent<HTMLInputElement>) {
+    const n = Number(e.target.value)
+    if (!isNaN(n)) commit(n)
+  }
+
+  const canDecrement = !disabled && (min === undefined || value > min)
+  const canIncrement = !disabled && (max === undefined || value < max)
+
+  return (
+    <div className={`number-input ${className}`.trim()}>
+      {label && (
+        <label htmlFor={inputId} className="number-input__label">
+          {label}
+        </label>
+      )}
+      <div className="number-input__control">
+        <button
+          type="button"
+          className="number-input__btn"
+          aria-label="Decrement"
+          tabIndex={-1}
+          disabled={!canDecrement}
+          onClick={() => commit(value - step)}
+        >
+          −
+        </button>
+        <input
+          id={inputId}
+          type="number"
+          role="spinbutton"
+          aria-valuenow={value}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuetext={suffix ? `${value} ${suffix}` : undefined}
+          value={value}
+          disabled={disabled}
+          className="number-input__field"
+          onChange={handleChange}
+          onKeyDown={handleKey}
+        />
+        {suffix && (
+          <span className="number-input__suffix" aria-hidden="true">
+            {suffix}
+          </span>
+        )}
+        <button
+          type="button"
+          className="number-input__btn"
+          aria-label="Increment"
+          tabIndex={-1}
+          disabled={!canIncrement}
+          onClick={() => commit(value + step)}
+        >
+          +
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/OTPInput.tsx

@@ -0,0 +1,135 @@
+import { useId, useRef, useState } from 'react'
+import type { ClipboardEvent, KeyboardEvent } from 'react'
+
+export interface OTPInputProps {
+  label?: string
+  length?: number
+  value?: string
+  defaultValue?: string
+  disabled?: boolean
+  onChange?: (value: string) => void
+  id?: string
+  className?: string
+}
+
+export function OTPInput({
+  label,
+  length = 6,
+  value: valueProp,
+  defaultValue = '',
+  disabled = false,
+  onChange,
+  id,
+  className = '',
+}: OTPInputProps) {
+  const gid = useId()
+  const inputId = id ?? gid
+  const [internal, setInternal] = useState<string[]>(() => {
+    const src = valueProp ?? defaultValue
+    return Array.from({ length }, (_, i) => src[i] ?? '')
+  })
+  const refs = useRef<(HTMLInputElement | null)[]>(Array(length).fill(null))
+
+  const digits =
+    valueProp !== undefined ? Array.from({ length }, (_, i) => valueProp[i] ?? '') : internal
+
+  function focusAt(i: number) {
+    const el = refs.current[i]
+    if (el) {
+      el.focus()
+      el.select()
+    }
+  }
+
+  function commit(next: string[]) {
+    if (valueProp === undefined) setInternal(next)
+    onChange?.(next.join(''))
+  }
+
+  function handleInput(i: number, raw: string) {
+    const char = raw.replace(/\D/g, '').slice(-1)
+    const next = [...digits]
+    next[i] = char
+    commit(next)
+    if (char && i < length - 1) focusAt(i + 1)
+  }
+
+  function handleKey(i: number, e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Backspace') {
+      if (digits[i]) {
+        const next = [...digits]
+        next[i] = ''
+        commit(next)
+      } else if (i > 0) {
+        e.preventDefault()
+        focusAt(i - 1)
+      }
+    } else if (e.key === 'ArrowLeft' && i > 0) {
+      e.preventDefault()
+      focusAt(i - 1)
+    } else if (e.key === 'ArrowRight' && i < length - 1) {
+      e.preventDefault()
+      focusAt(i + 1)
+    }
+  }
+
+  function handlePaste(e: ClipboardEvent<HTMLInputElement>) {
+    const text = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, length)
+    if (!text.length) return
+    e.preventDefault()
+    const next = Array.from({ length }, (_, i) => text[i] ?? digits[i] ?? '')
+    commit(next)
+    focusAt(Math.min(text.length, length - 1))
+  }
+
+  const half = Math.floor(length / 2)
+
+  return (
+    <div className={`otp-input-wrapper${className ? ` ${className}` : ''}`}>
+      {label && (
+        <label htmlFor={`${inputId}-0`} className="otp-input__label">
+          {label}
+        </label>
+      )}
+      <div
+        className={`otp-input${disabled ? ' otp-input--disabled' : ''}`}
+        role="group"
+        aria-label={label ?? 'One-time password'}
+      >
+        {digits.flatMap((d, i) => {
+          const nodes = []
+          if (i === half) {
+            nodes.push(
+              <span key="sep" className="otp-input__separator" aria-hidden="true">
+                &ndash;
+              </span>,
+            )
+          }
+          nodes.push(
+            <input
+              key={i}
+              ref={(el) => {
+                refs.current[i] = el
+              }}
+              id={i === 0 ? `${inputId}-0` : undefined}
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              maxLength={1}
+              aria-label={`Digit ${i + 1} of ${length}`}
+              value={d}
+              disabled={disabled}
+              className="otp-input__digit"
+              autoComplete={i === 0 ? 'one-time-code' : 'off'}
+              onChange={(e) => handleInput(i, e.target.value)}
+              onKeyDown={(e) => handleKey(i, e)}
+              onPaste={handlePaste}
+              onFocus={(e) => e.currentTarget.select()}
+            />,
+          )
+          return nodes
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/Pagination.tsx

@@ -0,0 +1,73 @@
+import type { HTMLAttributes } from 'react'
+
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+  page: number
+  pageSize: number
+  total: number
+  onChange: (page: number) => void
+}
+
+function pageNumbers(page: number, totalPages: number): (number | '...')[] {
+  if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1)
+  const items: (number | '...')[] = [1]
+  const lo = Math.max(2, page - 1)
+  const hi = Math.min(totalPages - 1, page + 1)
+  if (lo > 2) items.push('...')
+  for (let i = lo; i <= hi; i++) items.push(i)
+  if (hi < totalPages - 1) items.push('...')
+  items.push(totalPages)
+  return items
+}
+
+export function Pagination({
+  page,
+  pageSize,
+  total,
+  onChange,
+  className = '',
+  ...rest
+}: PaginationProps) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize))
+  if (totalPages <= 1) return null
+  const pages = pageNumbers(page, totalPages)
+  return (
+    <nav className={`pagination ${className}`.trim()} aria-label="Pagination" {...rest}>
+      <button
+        type="button"
+        className="pagination-btn"
+        aria-label="Previous page"
+        disabled={page <= 1}
+        onClick={() => onChange(page - 1)}
+      >
+        ‹
+      </button>
+      {pages.map((p, i) =>
+        p === '...' ? (
+          <span key={`e${i}`} className="pagination-ellipsis" aria-hidden="true">
+            …
+          </span>
+        ) : (
+          <button
+            key={p}
+            type="button"
+            className={`pagination-btn${p === page ? ' active' : ''}`}
+            aria-label={`Page ${p}`}
+            aria-current={p === page ? 'page' : undefined}
+            onClick={() => onChange(p)}
+          >
+            {p}
+          </button>
+        ),
+      )}
+      <button
+        type="button"
+        className="pagination-btn"
+        aria-label="Next page"
+        disabled={page >= totalPages}
+        onClick={() => onChange(page + 1)}
+      >
+        ›
+      </button>
+    </nav>
+  )
+}

package/src/components/ParallelCoordinates.tsx

@@ -0,0 +1,149 @@
+const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342']
+
+export interface ParallelAxis {
+  label: string
+  min: number
+  max: number
+  unit?: string
+  invert?: boolean
+}
+
+export interface ParallelSeries {
+  label: string
+  color?: string
+  values: number[]
+}
+
+export interface ParallelCoordinatesProps {
+  axes: ParallelAxis[]
+  series: ParallelSeries[]
+  height?: number
+  ariaLabel?: string
+}
+
+export function ParallelCoordinates({
+  axes,
+  series,
+  height = 200,
+  ariaLabel = 'Parallel coordinates chart',
+}: ParallelCoordinatesProps) {
+  const VW = 380
+  const VH = height
+  const PAD_L = 28
+  const PAD_R = 28
+  const PAD_T = 32
+  const PAD_B = 20
+
+  const TRACK_W = VW - PAD_L - PAD_R
+  const TRACK_H = VH - PAD_T - PAD_B
+  const nAxes = axes.length
+
+  function axisX(i: number): number {
+    return PAD_L + (nAxes > 1 ? i * (TRACK_W / (nAxes - 1)) : TRACK_W / 2)
+  }
+
+  function valueY(axis: ParallelAxis, v: number): number {
+    const t = Math.max(0, Math.min(1, (v - axis.min) / (axis.max - axis.min)))
+    return axis.invert ? PAD_T + t * TRACK_H : PAD_T + (1 - t) * TRACK_H
+  }
+
+  function seriesPath(s: ParallelSeries): string {
+    return axes
+      .map((axis, i) => {
+        const x = axisX(i).toFixed(1)
+        const y = valueY(axis, s.values[i] ?? axis.min).toFixed(1)
+        return i === 0 ? `M${x},${y}` : `L${x},${y}`
+      })
+      .join(' ')
+  }
+
+  const TICKS = [0, 0.5, 1]
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${VH}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {axes.map((axis, i) => {
+          const x = axisX(i)
+          return (
+            <g key={i}>
+              <line
+                x1={x}
+                y1={PAD_T}
+                x2={x}
+                y2={VH - PAD_B}
+                stroke="rgba(255,255,255,0.2)"
+                strokeWidth={1}
+              />
+              <text
+                x={x}
+                y={PAD_T - 8}
+                fill="#A4A7B5"
+                fontSize={8}
+                textAnchor="middle"
+                fontFamily="inherit"
+              >
+                {axis.label}
+              </text>
+              {axis.unit && (
+                <text
+                  x={x}
+                  y={PAD_T - 1}
+                  fill="#6E7079"
+                  fontSize={7}
+                  textAnchor="middle"
+                  fontFamily="inherit"
+                >
+                  {axis.unit}
+                </text>
+              )}
+              {TICKS.map((t) => {
+                const v = axis.invert
+                  ? axis.min + t * (axis.max - axis.min)
+                  : axis.max - t * (axis.max - axis.min)
+                const y = PAD_T + t * TRACK_H
+                return (
+                  <g key={t}>
+                    <line
+                      x1={x - 3}
+                      y1={y}
+                      x2={x + 3}
+                      y2={y}
+                      stroke="rgba(255,255,255,0.25)"
+                      strokeWidth={1}
+                    />
+                    <text
+                      x={x - 5}
+                      y={y + 3}
+                      fill="#6E7079"
+                      fontSize={7}
+                      textAnchor="end"
+                      fontFamily="inherit"
+                    >
+                      {v % 1 === 0 ? v.toFixed(0) : v.toFixed(1)}
+                    </text>
+                  </g>
+                )
+              })}
+            </g>
+          )
+        })}
+
+        {series.map((s, si) => (
+          <path
+            key={si}
+            d={seriesPath(s)}
+            fill="none"
+            stroke={s.color ?? COLORS[si % COLORS.length]}
+            strokeWidth={1.5}
+            opacity={0.75}
+          />
+        ))}
+      </svg>
+    </div>
+  )
+}