Files

Build & Publish / publish (push) Failing after 45s

Details

feat: add ButtonGroup, theme toggle, dark theme fixes, remove shift references

- Add ButtonGroup primitive: multi-select toggle with colored dot indicators
- Replace FilterPill status filters with ButtonGroup in TopBar and EventFeed
- Add light/dark mode toggle to TopBar (moon/sun icon)
- Fix dark theme: add --purple/--purple-bg tokens, replace all hardcoded
  #F3EEFA/#7C3AED with tokens, fix --amber-light text contrast in sidebar,
  brighten --sidebar-text/--sidebar-muted tokens, use color-mix for
  ProcessorTimeline bar fills
- Remove all "shift" references (presets, labels, badges)
- Shrink SegmentedTabs height to match search bar and ButtonGroup
- Update COMPONENT_GUIDE.md with new components and updated descriptions
- Add ButtonGroup demo to Inventory
- Add README.md with setup instructions and navigation guide

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-19 16:33:34 +01:00

4.8 KiB

Raw Blame History

Cameleer3 Design System

A component library and interactive UI prototype for the Cameleer3 monitoring platform. This project contains both the reusable design system (primitives, composites, layout components) and a fully functional mock application demonstrating all pages and interactions.

Prerequisites

Node.js 20 or later (tested with 22.x) — https://nodejs.org
Git — https://git-scm.com

No other tools, accounts, or access to external registries are required. All dependencies are published on the public npm registry.

Getting Started

# 1. Clone the repository
git clone <repo-url> cameleer-design-system
cd cameleer-design-system

# 2. Install dependencies
npm install

# 3. Start the development server
npm run dev

The dev server will start at http://localhost:5173 (Vite will print the exact URL).

Available Scripts

Command	Description
`npm run dev`	Start the development server with hot reload
`npm run build`	Type-check and build the production bundle
`npm run preview`	Serve the production build locally
`npm test`	Run the test suite (Vitest, 332 tests)
`npm run lint`	Run ESLint

Navigating the Prototype

Once the dev server is running, open http://localhost:5173 in your browser. The application includes these sections:

Applications — Exchange monitoring dashboard
- /apps — All exchanges across all applications
- /apps/:appId — Filtered by application
- /apps/:appId/:routeId — Filtered by application and route
- Click the ↗ icon on any row to open the full Exchange Detail page
Agents — JVM agent health monitoring
- /agents — Overview of all agent instances grouped by application
- /agents/:appId — Single application's agents
- /agents/:appId/:instanceId — Instance detail with CPU, memory, threads, GC charts
Routes — Per-route performance metrics
- /routes — Aggregated KPI cards, route performance table, charts
- /routes/:appId — Filtered by application
- /routes/:appId/:routeId — Per-processor statistics and route flow diagram
Admin — User management (RBAC), OIDC configuration, audit log
- /admin/rbac — Users, groups, roles with inline editing
- /admin/oidc — OIDC provider configuration form
- /admin/audit — Searchable audit log table
Inventory — Component showcase
- /inventory — Interactive demos of every design system component

Top Bar Controls

Search (Ctrl+K) — Full-text search across applications, routes, agents, exchanges
Status Filters — Toggle OK / Warn / Error / Running to filter exchanges
Time Range — Preset time ranges (1h, 3h, 6h, Today, 24h, 7d) or custom date/time picker
Theme Toggle (☾/☀) — Switch between light and dark mode

Key Interactions

Exchange slide-in panel — Click any row in the exchanges table to open a detail panel on the right showing overview, errors, route flow, and processor timeline
Exchange detail page — Click the ↗ icon or "Open full details" link for the full inspector with Message IN/OUT panels and correlation chain
Processor selection — On the exchange detail page, click any processor in the timeline or flow diagram to see its message snapshots
Starring — Hover any item in the sidebar trees and click the star to pin it to the Starred section
Dark mode — Click the moon/sun icon in the top bar to toggle themes

Project Structure

src/
  design-system/
    primitives/     # Atomic components (Button, Input, Badge, StatusDot, ...)
    composites/     # Composed components (DataTable, Modal, EventFeed, RouteFlow, ...)
    layout/         # Page-level layout (AppShell, Sidebar, TopBar)
    providers/      # React context providers (Theme, CommandPalette, GlobalFilter)
    tokens.css      # Design tokens (colors, spacing, typography, shadows)
    utils/          # Shared utilities (hashColor, timePresets)
  pages/            # Application pages (Dashboard, Routes, AgentHealth, Admin, ...)
  mocks/            # Static mock data (exchanges, routes, agents, metrics, sidebar)

Tech Stack

React 19 + TypeScript
Vite for development and bundling
CSS Modules for styling (all colors via design tokens)
Vitest + React Testing Library for tests
No runtime CSS-in-JS, no Tailwind, no external component libraries

Notes

All data is static mock data — no backend or API calls required
The prototype is fully self-contained and works offline after npm install
Light and dark themes are supported throughout
Fonts (DM Sans, JetBrains Mono) are loaded from Google Fonts and require an internet connection on first load

4.8 KiB Raw Blame History