@w5-ui/react 0.1.0

package/README.md

@@ -0,0 +1,9 @@
+# @w5-ui/react
+
+React component library for the Dash UI design system. Pairs with `@w5-ui/tokens` for tokens and
+`@w5-ui/assets` for brand SVGs.
+
+```tsx
+import '@w5-ui/react/styles.css'
+import { Card, Pill, Button, Topbar, Sidebar } from '@w5-ui/react'
+```

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@w5-ui/react",
+  "version": "0.1.0",
+  "description": "React 18 components for the Dash UI design system - ~170 dashboard-focused components with full type defs and SSR support. Part of Webber's design systems.",
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "dashboard",
+    "ui-library",
+    "dash-ui"
+  ],
+  "author": "Webber Takken (https://github.com/webbertakken)",
+  "license": "MIT",
+  "homepage": "https://github.com/webbertakken/dash-ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webbertakken/dash-ui.git",
+    "directory": "packages/react"
+  },
+  "bugs": "https://github.com/webbertakken/dash-ui/issues",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@w5-ui/assets": "workspace:*",
+    "@w5-ui/tokens": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "typescript": "^5.5.0"
+  },
+  "files": [
+    "src/**",
+    "!src/__tests__",
+    "!src/__tests__/**"
+  ],
+  "scripts": {
+    "typecheck": "yarn run -T tsgo --noEmit -p tsconfig.build.json"
+  }
+}

package/src/components/Accordion.tsx

@@ -0,0 +1,65 @@
+import { useState, useId, type HTMLAttributes, type ReactNode } from 'react'
+
+export interface AccordionItemProps {
+  title: string
+  children?: ReactNode
+  defaultOpen?: boolean
+}
+
+export function AccordionItem({ title, children, defaultOpen = false }: AccordionItemProps) {
+  const [open, setOpen] = useState(defaultOpen)
+  const id = useId()
+  const btnId = `acc-btn-${id}`
+  const panelId = `acc-panel-${id}`
+  return (
+    <div className="accordion-item">
+      <h3 className="accordion-header">
+        <button
+          id={btnId}
+          type="button"
+          className="accordion-trigger"
+          aria-expanded={open}
+          aria-controls={panelId}
+          onClick={() => setOpen((v) => !v)}
+        >
+          <span>{title}</span>
+          <svg
+            className={`accordion-chevron${open ? ' open' : ''}`}
+            viewBox="0 0 16 16"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M4 6l4 4 4-4"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      </h3>
+      <div
+        id={panelId}
+        role="region"
+        aria-labelledby={btnId}
+        className="accordion-panel"
+        hidden={!open}
+      >
+        <div className="accordion-content">{children}</div>
+      </div>
+    </div>
+  )
+}
+
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode
+}
+
+export function Accordion({ children, className = '', ...rest }: AccordionProps) {
+  return (
+    <div className={`accordion ${className}`.trim()} {...rest}>
+      {children}
+    </div>
+  )
+}

package/src/components/ActionMenu.tsx

@@ -0,0 +1,131 @@
+import { useState, useRef, useEffect, useId } from 'react'
+import type { KeyboardEvent } from 'react'
+
+export interface ActionMenuItem {
+  id: string
+  label: string
+  danger?: boolean
+  disabled?: boolean
+}
+
+export interface ActionMenuProps {
+  items: ActionMenuItem[]
+  onAction: (id: string) => void
+  label?: string
+}
+
+export function ActionMenu({ items, onAction, label = 'Actions' }: ActionMenuProps) {
+  const uid = useId()
+  const menuId = `${uid}-menu`
+  const [open, setOpen] = useState(false)
+  const [activeIdx, setActiveIdx] = useState(0)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    function handler(e: MouseEvent) {
+      if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  function toggle() {
+    setOpen((prev) => {
+      if (!prev) setActiveIdx(0)
+      return !prev
+    })
+  }
+
+  function activate(id: string) {
+    onAction(id)
+    setOpen(false)
+    triggerRef.current?.focus()
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (!open) {
+      if (['ArrowDown', 'Enter', ' '].includes(e.key)) {
+        e.preventDefault()
+        setActiveIdx(0)
+        setOpen(true)
+      }
+      return
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      setOpen(false)
+      triggerRef.current?.focus()
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.min(i + 1, items.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      setActiveIdx(0)
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      setActiveIdx(items.length - 1)
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      const item = items[activeIdx]
+      if (item && !item.disabled) activate(item.id)
+    } else if (e.key === 'Tab') {
+      setOpen(false)
+    }
+  }
+
+  return (
+    <div ref={wrapperRef} className="action-menu-root">
+      <button
+        ref={triggerRef}
+        type="button"
+        className="icon-btn action-menu-trigger"
+        aria-label={label}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={open ? menuId : undefined}
+        onClick={toggle}
+        onKeyDown={onKeyDown}
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          aria-hidden="true"
+          focusable="false"
+          fill="currentColor"
+        >
+          <circle cx="7" cy="2.5" r="1.2" />
+          <circle cx="7" cy="7" r="1.2" />
+          <circle cx="7" cy="11.5" r="1.2" />
+        </svg>
+      </button>
+      {open && (
+        <ul id={menuId} role="menu" aria-label={label} className="action-menu">
+          {items.map((item, idx) => (
+            <li
+              key={item.id}
+              role="menuitem"
+              tabIndex={-1}
+              aria-disabled={item.disabled}
+              data-active={idx === activeIdx ? 'true' : undefined}
+              data-danger={item.danger ? 'true' : undefined}
+              className="action-menu-item"
+              onMouseEnter={() => setActiveIdx(idx)}
+              onMouseDown={(e) => {
+                e.preventDefault()
+                if (!item.disabled) activate(item.id)
+              }}
+            >
+              {item.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/ActivityFeed.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useRef } from 'react'
+
+export type ActivitySeverity = 'info' | 'success' | 'warn' | 'error' | 'neutral'
+
+export interface ActivityItem {
+  id: string
+  title: string
+  description?: string
+  time: string
+  severity?: ActivitySeverity
+}
+
+export interface ActivityFeedProps {
+  items: ActivityItem[]
+  label?: string
+  busy?: boolean
+  maxHeight?: number
+  autoScroll?: boolean
+}
+
+export function ActivityFeed({
+  items,
+  label = 'Activity feed',
+  busy = false,
+  maxHeight = 360,
+  autoScroll = false,
+}: ActivityFeedProps) {
+  const endRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (autoScroll) endRef.current?.scrollIntoView({ block: 'nearest' })
+  }, [items, autoScroll])
+
+  return (
+    <div
+      role="feed"
+      aria-label={label}
+      aria-busy={busy}
+      className="activity-feed"
+      style={{ maxHeight, overflowY: 'auto' }}
+    >
+      {items.map((item, i) => (
+        <article
+          key={item.id}
+          className={`af-item af-item--${item.severity ?? 'neutral'}`}
+          aria-labelledby={`af-title-${item.id}`}
+          aria-describedby={item.description ? `af-desc-${item.id}` : undefined}
+          aria-posinset={i + 1}
+          aria-setsize={items.length}
+          // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- navigable feed item for keyboard users
+          tabIndex={0}
+        >
+          <div className="af-dot" aria-hidden="true" />
+          <div className="af-body">
+            <div className="af-header">
+              <span id={`af-title-${item.id}`} className="af-title">
+                {item.title}
+              </span>
+              <span className="af-time">{item.time}</span>
+            </div>
+            {item.description && (
+              <p id={`af-desc-${item.id}`} className="af-desc">
+                {item.description}
+              </p>
+            )}
+          </div>
+        </article>
+      ))}
+      {items.length === 0 && (
+        <div className="af-empty" role="status">
+          No activity
+        </div>
+      )}
+      <div ref={endRef} />
+    </div>
+  )
+}

package/src/components/Alert.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react'
+import { CloseIcon } from '../icons.js'
+
+export type AlertVariant = 'success' | 'warn' | 'danger' | 'info'
+
+export interface AlertProps {
+  variant?: AlertVariant
+  children: ReactNode
+  onDismiss?: () => void
+}
+
+export function Alert({ variant = 'info', children, onDismiss }: AlertProps) {
+  return (
+    <div
+      className={`alert alert-${variant}`}
+      role={variant === 'danger' ? 'alert' : 'status'}
+      aria-live={variant === 'danger' ? 'assertive' : 'polite'}
+      aria-atomic="true"
+    >
+      <span className="alert-body">{children}</span>
+      {onDismiss && (
+        <button
+          type="button"
+          className="alert-dismiss icon-btn"
+          onClick={onDismiss}
+          aria-label="Dismiss alert"
+        >
+          <CloseIcon aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/AnnotatedTimeSeries.tsx

@@ -0,0 +1,148 @@
+import { useMemo } from 'react'
+
+export interface TimeSeriesAnnotation {
+  index: number
+  label: string
+  color?: string
+}
+
+export interface AnnotatedTimeSeriesProps {
+  data: number[]
+  labels?: string[]
+  annotations?: TimeSeriesAnnotation[]
+  color?: string
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = { t: 16, r: 8, b: 28, l: 32 }
+
+export function AnnotatedTimeSeries({
+  data,
+  labels = [],
+  annotations = [],
+  color = '#006FFF',
+  height = 160,
+  ariaLabel = 'Annotated time series',
+}: AnnotatedTimeSeriesProps) {
+  const { linePath, areaPath, gridLines, xLabels, markers } = useMemo(() => {
+    if (data.length < 2)
+      return { linePath: '', areaPath: '', gridLines: [], xLabels: [], markers: [] }
+    const n = data.length
+    const chartW = VW - PAD.l - PAD.r
+    const chartH = height - PAD.t - PAD.b
+    const minV = Math.min(...data)
+    const maxV = Math.max(...data) || 1
+    const range = maxV - minV || 1
+    const bot = PAD.t + chartH
+
+    const toX = (i: number) => PAD.l + (i / (n - 1)) * chartW
+    const toY = (v: number) => PAD.t + chartH - ((v - minV) / range) * chartH
+
+    const pts = data.map((v, i) => [toX(i), toY(v)] as [number, number])
+    const linePath = pts
+      .map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`)
+      .join(' ')
+    const areaPath = `${linePath} L${pts[n - 1][0].toFixed(1)},${bot} L${pts[0][0].toFixed(1)},${bot} Z`
+
+    const gridLines = [0, 0.5, 1].map((f) => ({
+      y: PAD.t + (1 - f) * chartH,
+      label: String(Math.round(minV + f * range)),
+    }))
+
+    const stride = n <= 8 ? 1 : Math.ceil(n / 6)
+    const xLabels = data
+      .map((_, i) => ({ x: toX(i), text: labels[i] ?? String(i), i }))
+      .filter(({ i }) => i % stride === 0 || i === n - 1)
+
+    const markers = annotations.map((a) => ({
+      x: toX(Math.max(0, Math.min(n - 1, a.index))),
+      label: a.label,
+      color: a.color ?? '#F5A623',
+      chartH,
+    }))
+
+    return { linePath, areaPath, gridLines, xLabels, markers }
+  }, [data, labels, annotations, height])
+
+  if (data.length < 2) return null
+
+  const n = data.length
+
+  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={PAD.l}
+              y1={g.y}
+              x2={VW - PAD.r}
+              y2={g.y}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <text
+              x={PAD.l - 4}
+              y={g.y + 3}
+              fill="#6E7079"
+              fontSize={8}
+              textAnchor="end"
+              fontFamily="inherit"
+            >
+              {g.label}
+            </text>
+          </g>
+        ))}
+
+        <path d={areaPath} fill={color} fillOpacity={0.08} />
+        <path
+          d={linePath}
+          fill="none"
+          stroke={color}
+          strokeWidth={1.5}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+
+        {markers.map((m, i) => (
+          <g key={i}>
+            <line
+              x1={m.x}
+              y1={PAD.t}
+              x2={m.x}
+              y2={PAD.t + m.chartH}
+              stroke={m.color}
+              strokeWidth={1}
+              strokeDasharray="3,2"
+              opacity={0.85}
+            />
+            <text x={m.x + 2} y={PAD.t + 8} fill={m.color} fontSize={7} fontFamily="inherit">
+              {m.label}
+            </text>
+          </g>
+        ))}
+
+        {xLabels.map((l) => (
+          <text
+            key={l.i}
+            x={l.x.toFixed(1)}
+            y={height - 6}
+            fill="#6E7079"
+            fontSize={8}
+            textAnchor={l.i === 0 ? 'start' : l.i === n - 1 ? 'end' : 'middle'}
+            fontFamily="inherit"
+          >
+            {l.text}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/AppShell.tsx

@@ -0,0 +1,158 @@
+import { appLogos, logos } from '@w5-ui/assets'
+import { Fragment, type ReactNode } from 'react'
+import { CaretIcon, SearchIcon, UpdatesIcon, BellIcon, HelpIcon } from '../icons.js'
+import { Avatar } from './Avatar.js'
+import { IconButton } from './Button.js'
+
+void logos
+
+export interface AppDef {
+  id: string
+  label: string
+  logo: keyof typeof appLogos
+}
+
+export const DEFAULT_APPS: AppDef[] = [
+  { id: 'system', label: 'System', logo: 'system' },
+  { id: 'instances', label: 'Instances', logo: 'instances' },
+  { id: 'agents', label: 'Agents', logo: 'agents' },
+]
+
+export interface TopbarProps {
+  siteName: string
+  apps?: AppDef[]
+  activeApp: string
+  onAppChange?: (id: string) => void
+  initials?: string
+  notificationCount?: number
+}
+
+export function Topbar({
+  siteName,
+  apps = DEFAULT_APPS,
+  activeApp,
+  onAppChange,
+  initials = 'MS',
+  notificationCount = 1,
+}: TopbarProps) {
+  return (
+    <header className="topbar">
+      <button
+        type="button"
+        className="site-switch"
+        aria-label={`Switch site: ${siteName}`}
+        aria-haspopup="menu"
+      >
+        <span className="status-ring" />
+        <span className="site-name" aria-hidden="true">
+          {siteName}
+        </span>
+        <CaretIcon className="caret" aria-hidden="true" />
+      </button>
+      <nav className="app-tabs" aria-label="Apps">
+        {apps.map((a) => (
+          <button
+            key={a.id}
+            type="button"
+            className={`app-tab ${a.id === activeApp ? 'active' : ''}`}
+            aria-current={a.id === activeApp ? 'page' : undefined}
+            onClick={() => onAppChange?.(a.id)}
+          >
+            <img src={appLogos[a.logo]} alt="" width={24} height={24} />
+            <span className="label">{a.label}</span>
+          </button>
+        ))}
+      </nav>
+      <div className="topbar-spacer" />
+      <div className="topbar-right">
+        <IconButton aria-label="Search" title="Search">
+          <SearchIcon />
+        </IconButton>
+        <IconButton aria-label="Updates" title="Updates">
+          <UpdatesIcon />
+        </IconButton>
+        <IconButton
+          aria-label={
+            notificationCount > 0 ? `Notifications, ${notificationCount} new` : 'Notifications'
+          }
+          title="Notifications"
+          style={{ position: 'relative' }}
+        >
+          <BellIcon />
+          {notificationCount > 0 && (
+            <span
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                top: 6,
+                right: 6,
+                width: 6,
+                height: 6,
+                background: '#F03A3A',
+                borderRadius: '50%',
+                border: '1.5px solid #0A0A0B',
+              }}
+            />
+          )}
+        </IconButton>
+        <IconButton aria-label="Help" title="Help">
+          <HelpIcon />
+        </IconButton>
+        <Avatar initials={initials} size="sm" alt={`Account, ${initials}`} />
+      </div>
+    </header>
+  )
+}
+
+export interface SidebarSectionDef {
+  title: string
+  items: SidebarItemDef[]
+}
+
+export interface SidebarItemDef {
+  id: string
+  label: string
+  icon: ReactNode
+  count?: number
+  pill?: number
+}
+
+export interface SidebarProps {
+  sections: SidebarSectionDef[]
+  activeId: string
+  onChange?: (id: string) => void
+}
+
+export function Sidebar({ sections, activeId, onChange }: SidebarProps) {
+  return (
+    <nav className="sidebar" aria-label="Primary">
+      {sections.map((sec) => (
+        <Fragment key={sec.title}>
+          <h2 className="sb-section">{sec.title}</h2>
+          <ul className="sb-list">
+            {sec.items.map((it) => (
+              <li key={it.id}>
+                <button
+                  type="button"
+                  className={`sb-item ${it.id === activeId ? 'active' : ''}`}
+                  aria-current={it.id === activeId ? 'page' : undefined}
+                  onClick={() => onChange?.(it.id)}
+                >
+                  <span className="sb-ico">{it.icon}</span>
+                  {it.label}
+                  {it.count !== undefined && <span className="sb-count">{it.count}</span>}
+                  {it.pill !== undefined && (
+                    <span className="sb-pill">
+                      {it.pill}
+                      <span className="sr-only"> alert{it.pill !== 1 ? 's' : ''}</span>
+                    </span>
+                  )}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </Fragment>
+      ))}
+    </nav>
+  )
+}