@w5-ui/react 0.1.0

package/src/components/MACInput.tsx

@@ -0,0 +1,164 @@
+import { useId, useRef, useState } from 'react'
+import type { ClipboardEvent, KeyboardEvent, ChangeEvent } from 'react'
+
+export interface MACInputProps {
+  label?: string
+  value?: string
+  defaultValue?: string
+  disabled?: boolean
+  onChange?: (value: string) => void
+  id?: string
+  className?: string
+}
+
+const HEX_RE = /^[0-9a-fA-F]{0,2}$/
+const FULL_MAC_RE = /^([0-9a-fA-F]{2}[:-]){5}[0-9a-fA-F]{2}$/
+
+function parseMAC(mac: string): [string, string, string, string, string, string] {
+  const parts = mac.replace(/-/g, ':').split(':')
+  return [
+    parts[0] ?? '00',
+    parts[1] ?? '00',
+    parts[2] ?? '00',
+    parts[3] ?? '00',
+    parts[4] ?? '00',
+    parts[5] ?? '00',
+  ]
+}
+
+function normalizeMAC(mac: string): string {
+  return (
+    mac
+      .replace(/-/g, ':')
+      .replace(/:/g, '')
+      .match(/.{1,2}/g)
+      ?.join(':') ?? mac
+  )
+}
+
+export function MACInput({
+  label,
+  value: valueProp,
+  defaultValue = '00:00:00:00:00:00',
+  disabled = false,
+  onChange,
+  id,
+  className = '',
+}: MACInputProps) {
+  const gid = useId()
+  const inputId = id ?? gid
+  const [internal, setInternal] = useState<[string, string, string, string, string, string]>(() =>
+    parseMAC(valueProp ?? defaultValue),
+  )
+  const refs = useRef<(HTMLInputElement | null)[]>([null, null, null, null, null, null])
+
+  const pairs = valueProp !== undefined ? parseMAC(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 = [...pairs] as [string, string, string, string, string, string]
+    next[i] = val.toUpperCase()
+    if (valueProp === undefined) setInternal(next)
+    onChange?.(next.join(':'))
+  }
+
+  function handleChange(i: number, e: ChangeEvent<HTMLInputElement>) {
+    const raw = e.target.value
+    if (!HEX_RE.test(raw)) return
+    commit(i, raw)
+    if (raw.length === 2 && i < 5) focusAt(i + 1)
+  }
+
+  function handleKey(i: number, e: KeyboardEvent<HTMLInputElement>) {
+    const el = refs.current[i]!
+    if (e.key === ':' || e.key === '-') {
+      e.preventDefault()
+      if (i < 5) focusAt(i + 1)
+    } else if (e.key === 'ArrowRight' && el.selectionStart === el.value.length) {
+      if (i < 5) {
+        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 (FULL_MAC_RE.test(text)) {
+      e.preventDefault()
+      const normalized = normalizeMAC(text)
+      const next = normalized.split(':') as [string, string, string, string, string, string]
+      const upper = next.map((p) => p.toUpperCase()) as [
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+      ]
+      if (valueProp === undefined) setInternal(upper)
+      onChange?.(upper.join(':'))
+      focusAt(5)
+    }
+  }
+
+  return (
+    <div className={`mac-input-wrapper ${className}`.trim()}>
+      {label && (
+        <label htmlFor={`${inputId}-0`} className="mac-input__label">
+          {label}
+        </label>
+      )}
+      <div
+        className={`mac-input${disabled ? ' mac-input--disabled' : ''}`}
+        role="group"
+        aria-label={label ?? 'MAC address'}
+      >
+        {pairs.flatMap((pair, i) => {
+          const nodes = [
+            <input
+              key={`p${i}`}
+              ref={(el) => {
+                refs.current[i] = el
+              }}
+              id={i === 0 ? `${inputId}-0` : undefined}
+              type="text"
+              inputMode="text"
+              aria-label={`Byte ${i + 1} of 6`}
+              value={pair}
+              disabled={disabled}
+              maxLength={2}
+              className="mac-input__pair"
+              onChange={(e) => handleChange(i, e)}
+              onKeyDown={(e) => handleKey(i, e)}
+              onPaste={handlePaste}
+              onFocus={(e) => e.currentTarget.select()}
+            />,
+          ]
+          if (i < 5)
+            nodes.push(
+              <span key={`c${i}`} className="mac-input__colon" aria-hidden="true">
+                :
+              </span>,
+            )
+          return nodes
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/MarimekkoChart.tsx

@@ -0,0 +1,143 @@
+import { useMemo } from 'react'
+
+export interface MarimekkoSegment {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface MarimekkoColumn {
+  label: string
+  segments: MarimekkoSegment[]
+}
+
+export interface MarimekkoChartProps {
+  columns: MarimekkoColumn[]
+  height?: number
+  ariaLabel?: string
+}
+
+const PALETTE = ['#006FFF', '#00C875', '#F5A623', '#A78BFA', '#FF7B7B', '#00C8C8', '#FB923C']
+const VW = 340
+const LABEL_H = 22
+const GAP = 2
+
+interface Cell {
+  x: number
+  y: number
+  w: number
+  h: number
+  color: string
+  label: string
+}
+interface Header {
+  x: number
+  w: number
+  label: string
+}
+
+export function MarimekkoChart({
+  columns,
+  height = 160,
+  ariaLabel = 'Marimekko chart',
+}: MarimekkoChartProps) {
+  const { cells, headers } = useMemo(() => {
+    const colTotals = columns.map((col) => col.segments.reduce((s, seg) => s + seg.value, 0))
+    const grandTotal = colTotals.reduce((s, t) => s + t, 0)
+    if (grandTotal === 0) return { cells: [] as Cell[], headers: [] as Header[] }
+
+    const chartH = height - LABEL_H
+    const result: Cell[] = []
+    const hdrs: Header[] = []
+
+    let cx = 0
+    columns.forEach((col, ci) => {
+      const colTotal = colTotals[ci]
+      const colW = (colTotal / grandTotal) * VW
+      hdrs.push({ x: cx, w: colW, label: col.label })
+
+      let sy = LABEL_H
+      col.segments.forEach((seg, si) => {
+        const segH = colTotal > 0 ? (seg.value / colTotal) * chartH : 0
+        result.push({
+          x: cx,
+          y: sy,
+          w: colW,
+          h: segH,
+          color: seg.color ?? PALETTE[si % PALETTE.length],
+          label: seg.label,
+        })
+        sy += segH
+      })
+      cx += colW
+    })
+    return { cells: result, headers: hdrs }
+  }, [columns, 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"
+      >
+        {headers.map((h, i) =>
+          h.w > GAP * 2 ? (
+            <text
+              key={i}
+              x={h.x + h.w / 2}
+              y={LABEL_H - 6}
+              textAnchor="middle"
+              fontSize={Math.min(10, h.w / 6)}
+              fill="#A4A7B5"
+              fontFamily="inherit"
+            >
+              {h.label}
+            </text>
+          ) : null,
+        )}
+        {cells.map((cell, i) =>
+          cell.w > GAP * 2 && cell.h > 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={0.8}
+                rx={2}
+              />
+              {cell.w > 36 && cell.h > 14 && (
+                <text
+                  x={cell.x + cell.w / 2}
+                  y={cell.y + cell.h / 2 + 4}
+                  textAnchor="middle"
+                  fontSize={Math.min(9, (cell.w - GAP) / 8, cell.h - 6)}
+                  fill="#fff"
+                  fontFamily="inherit"
+                >
+                  {cell.label}
+                </text>
+              )}
+            </g>
+          ) : null,
+        )}
+        {headers.slice(0, -1).map((h, i) => (
+          <line
+            key={i}
+            x1={h.x + h.w}
+            y1={LABEL_H}
+            x2={h.x + h.w}
+            y2={height}
+            stroke="rgba(255,255,255,0.12)"
+            strokeWidth={1}
+          />
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/MatrixChart.tsx

@@ -0,0 +1,118 @@
+export interface MatrixChartProps {
+  rows: string[]
+  cols: string[]
+  values: number[][]
+  unit?: string
+  height?: number
+  ariaLabel?: string
+}
+
+const LEFT = 80
+const TOP = 60
+const CELL = 38
+const FONT = 'inherit'
+
+function cellColor(t: number): string {
+  const alpha = 0.07 + t * 0.88
+  return `rgba(0,111,255,${alpha.toFixed(2)})`
+}
+
+function fmt(n: number): string {
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`
+  return String(n)
+}
+
+export function MatrixChart({
+  rows,
+  cols,
+  values,
+  unit = '',
+  ariaLabel = 'Matrix chart',
+}: MatrixChartProps) {
+  const allVals = values.flat()
+  const max = Math.max(...allVals, 1)
+  const W = LEFT + cols.length * CELL
+  const H = TOP + rows.length * CELL
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${W} ${H}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {cols.map((col, ci) => {
+          const cx = LEFT + ci * CELL + CELL / 2
+          return (
+            <text
+              key={ci}
+              x={cx}
+              y={TOP - 8}
+              fill="#A4A7B5"
+              fontSize={10}
+              textAnchor="end"
+              fontFamily={FONT}
+              transform={`rotate(-40, ${cx}, ${TOP - 8})`}
+            >
+              {col}
+            </text>
+          )
+        })}
+
+        {rows.map((row, ri) => {
+          const cy = TOP + ri * CELL + CELL / 2
+          return (
+            <text
+              key={ri}
+              x={LEFT - 8}
+              y={cy + 4}
+              fill="#A4A7B5"
+              fontSize={10}
+              textAnchor="end"
+              fontFamily={FONT}
+            >
+              {row}
+            </text>
+          )
+        })}
+
+        {rows.map((_, ri) =>
+          cols.map((_, ci) => {
+            const v = values[ri]?.[ci] ?? 0
+            const t = v / max
+            const x = LEFT + ci * CELL
+            const y = TOP + ri * CELL
+            const cx = x + CELL / 2
+            const cy = y + CELL / 2
+            return (
+              <g key={`${ri}-${ci}`}>
+                <rect
+                  x={x + 1}
+                  y={y + 1}
+                  width={CELL - 2}
+                  height={CELL - 2}
+                  rx={3}
+                  fill={cellColor(t)}
+                />
+                {v > 0 && (
+                  <text
+                    x={cx}
+                    y={cy + 4}
+                    fill={t > 0.5 ? '#fff' : '#A4A7B5'}
+                    fontSize={9}
+                    textAnchor="middle"
+                    fontFamily={FONT}
+                  >
+                    {fmt(v)}
+                    {unit}
+                  </text>
+                )}
+              </g>
+            )
+          }),
+        )}
+      </svg>
+    </div>
+  )
+}

package/src/components/Menubar.tsx

@@ -0,0 +1,194 @@
+import { useState, useRef, useEffect, useId, useCallback } from 'react'
+import type { KeyboardEvent } from 'react'
+
+export interface MenubarItem {
+  id: string
+  label: string
+  disabled?: boolean
+  separator?: boolean
+}
+
+export interface MenubarMenu {
+  id: string
+  label: string
+  items: MenubarItem[]
+}
+
+export interface MenubarProps {
+  menus: MenubarMenu[]
+  onAction: (menuId: string, itemId: string) => void
+  label?: string
+  className?: string
+}
+
+export function Menubar({ menus, onAction, label = 'Menu', className }: MenubarProps) {
+  const uid = useId()
+  const [openIdx, setOpenIdx] = useState<number | null>(null)
+  const [activeItemIdx, setActiveItemIdx] = useState(0)
+  const triggerRefs = useRef<(HTMLButtonElement | null)[]>([])
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (openIdx === null) return
+    function handler(e: MouseEvent) {
+      if (!rootRef.current?.contains(e.target as Node)) setOpenIdx(null)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [openIdx])
+
+  const openMenu = useCallback(
+    (idx: number, focusLast = false) => {
+      const eligible = menus[idx].items.filter((i) => !i.separator && !i.disabled)
+      setActiveItemIdx(focusLast ? eligible.length - 1 : 0)
+      setOpenIdx(idx)
+    },
+    [menus],
+  )
+
+  const closeMenu = useCallback(() => setOpenIdx(null), [])
+
+  const activate = useCallback(
+    (menuId: string, itemId: string) => {
+      onAction(menuId, itemId)
+      setOpenIdx(null)
+    },
+    [onAction],
+  )
+
+  function handleTriggerKeyDown(e: KeyboardEvent, idx: number) {
+    const count = menus.length
+    if (openIdx === null) {
+      if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        triggerRefs.current[(idx + 1) % count]?.focus()
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        triggerRefs.current[(idx - 1 + count) % count]?.focus()
+      } else if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        openMenu(idx, false)
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        openMenu(idx, true)
+      } else if (e.key === 'Home') {
+        e.preventDefault()
+        triggerRefs.current[0]?.focus()
+      } else if (e.key === 'End') {
+        e.preventDefault()
+        triggerRefs.current[count - 1]?.focus()
+      }
+    } else {
+      const menu = menus[openIdx]
+      const eligible = menu.items.filter((i) => !i.separator && !i.disabled)
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        closeMenu()
+        triggerRefs.current[openIdx]?.focus()
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        setActiveItemIdx((i) => Math.min(i + 1, eligible.length - 1))
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        setActiveItemIdx((i) => Math.max(i - 1, 0))
+      } else if (e.key === 'Home') {
+        e.preventDefault()
+        setActiveItemIdx(0)
+      } else if (e.key === 'End') {
+        e.preventDefault()
+        setActiveItemIdx(eligible.length - 1)
+      } else if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        const item = eligible[activeItemIdx]
+        if (item) activate(menu.id, item.id)
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        const nextIdx = (openIdx + 1) % count
+        openMenu(nextIdx, false)
+        triggerRefs.current[nextIdx]?.focus()
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        const prevIdx = (openIdx - 1 + count) % count
+        openMenu(prevIdx, false)
+        triggerRefs.current[prevIdx]?.focus()
+      } else if (e.key === 'Tab') {
+        closeMenu()
+      }
+    }
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      role="menubar"
+      aria-label={label}
+      className={`menubar${className ? ' ' + className : ''}`}
+    >
+      {menus.map((menu, idx) => {
+        const isOpen = openIdx === idx
+        const menuId = `${uid}-menu-${idx}`
+        const eligible = menu.items.filter((i) => !i.separator && !i.disabled)
+        return (
+          <div key={menu.id} className="menubar-menu">
+            <button
+              ref={(el) => {
+                triggerRefs.current[idx] = el
+              }}
+              type="button"
+              role="menuitem"
+              aria-haspopup="menu"
+              aria-expanded={isOpen}
+              aria-controls={isOpen ? menuId : undefined}
+              className={`menubar-trigger${isOpen ? ' is-open' : ''}`}
+              onClick={() => {
+                if (isOpen) closeMenu()
+                else openMenu(idx)
+              }}
+              onKeyDown={(e) => handleTriggerKeyDown(e, idx)}
+            >
+              {menu.label}
+            </button>
+            {isOpen && (
+              <ul id={menuId} role="menu" aria-label={menu.label} className="menubar-dropdown">
+                {menu.items.map((item) => {
+                  if (item.separator) {
+                    return (
+                      <li
+                        key={item.id}
+                        role="separator"
+                        className="menubar-sep"
+                        aria-hidden="true"
+                      />
+                    )
+                  }
+                  const eligibleIdx = eligible.indexOf(item)
+                  return (
+                    <li
+                      key={item.id}
+                      role="menuitem"
+                      tabIndex={-1}
+                      aria-disabled={item.disabled}
+                      data-active={
+                        eligibleIdx === activeItemIdx && !item.disabled ? 'true' : undefined
+                      }
+                      className="menubar-item"
+                      onMouseEnter={() => {
+                        if (!item.disabled) setActiveItemIdx(eligibleIdx)
+                      }}
+                      onMouseDown={(e) => {
+                        e.preventDefault()
+                        if (!item.disabled) activate(menu.id, item.id)
+                      }}
+                    >
+                      {item.label}
+                    </li>
+                  )
+                })}
+              </ul>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}