Skip to content

Design System — Component Catalogue

Status: Draft — scaffolded alongside ADR-0066. Components filled in under CVN-N008-EA stories.

This page is the catalogue of coded components that make up the platform's UIs. Per ADR-0066 §Direction of truth: every component has its source of truth in code — the Storybook story defines its props, variants, states, and accessibility. The Figma counterpart is a visual mirror kept in sync via the shadcn Figma kit + token projection; it is used by designers to compose screens, not to author new components.

Primitives (shadcn/ui baseline)

Adopted from shadcn/ui, restyled to match the CVNTrade tokens defined in code (console-next/tokens/*.json, DTCG format) and projected into Figma Variables under Config Console > 00 - Principles. Not re-documented here — refer to the shadcn docs for the API.

  • Button, Input, Label, Textarea, Select, Checkbox, Switch, Slider, Tabs, Accordion, Card, Dialog, Sheet, AlertDialog, Toast, Badge, Separator, Tooltip, Popover, DropdownMenu

CVNTrade-specific components

One row per component. Filled in as each is designed + built.

ID Component Purpose Figma frame Storybook story Status
CMP-CONFIG-001 ConfigPanel Groups related parameters into a card with validation + save action TBD TBD Planned
CMP-CONFIG-002 ConfigSelect Type-aware select for catalog-backed allowed values + free-text fallback TBD TBD Planned
CMP-CONFIG-003 ValidationBanner Surfaces server-side validation errors in-form TBD TBD Planned
CMP-CONFIG-004 AuditDrawer Side drawer exposing the change history for the current parameter TBD TBD Planned
CMP-CONFIG-005 DiffViewer Two-pane before/after diff for config snapshots TBD TBD Planned
CMP-CONFIG-006 ApprovalDialog Modal overlay for the approver's accept/reject on critical-parameter changes TBD TBD Planned
CMP-CONFIG-007 RunGrid Paginated table of FTF runs with filters + PDF download action TBD TBD Planned
CMP-CONFIG-008 WorkerStatusCard Live card per worker showing config_version_id, lag, last apply TBD TBD Planned

Component spec template

Each Storybook story MUST expose at least these states (rendered as separate stories under the same component):

  • Default — happy path, pristine inputs
  • Loading — placeholder / skeleton rendered while data is being fetched
  • Error — component receives an error (rendered via an error prop or context)
  • Disabled — component is read-only (e.g. for the viewer RBAC role)
  • Mobile — viewport breakpoint set to sm or xs so responsive behaviour is captured

The MDX doc block of every story MUST carry:

  • The component's CMP-<area>-<nnn> ID
  • A link to the Figma frame
  • A link to the related MkDocs screen page
  • A props table (auto-generated via Storybook autodocs where possible)
  • Accessibility notes: keyboard navigation, ARIA labels, colour-contrast tokens used

Tokens

Per ADR-0066 §Direction of truth: tokens live in code, Figma is a projection. Editing a token in Figma is a no-op — the next merge overwrites it. To change a token, open a PR on console-next/tokens/*.json.

Token family Source of truth Projection target(s)
Colour console-next/tokens/colors.json (DTCG) tailwind.config.ts via lib/tokens.ts + Figma Variables via sync_design_tokens.ts
Typography console-next/tokens/typography.json (DTCG) Tailwind fontFamily / fontSize / fontWeight + CSS custom properties + Figma Variables
Spacing console-next/tokens/spacing.json (DTCG) Tailwind spacing + borderRadius + Figma Variables
Elevation planned — console-next/tokens/elevation.json (EA-US1) Tailwind boxShadow + Figma Variables
Motion planned — console-next/tokens/motion.json (EA-US1) Tailwind transitionDuration / transitionTimingFunction + Figma Variables

Each JSON edit triggers the CI sync that propagates the new value to Figma Variables, keeping the two surfaces in lock-step. Elevation and Motion families are added under the first EA story.

References