ADR table, Conduction Design System

AdrTable + AdrStatus · architecture-decision-record index for technical-docs pages

ID	Title	Status	Date
001	Schema-first design	Accepted	2025-03-14
002	Storage adapter interface	Accepted	2025-04-02
003	GraphQL alongside REST	Accepted	2025-06-21
004	Audit log signing	Accepted	2025-09-08
005	Single-table inheritance	Superseded	2025-10-15
006	Event-driven webhooks	Proposed	2026-02-01
007	Per-tenant key rotation	Draft	2026-03-22
008	Synchronous CRDT merge	Rejected	2026-04-09

React / MDX usage

Mount in MDX as `<AdrTable/>`

Architecture-decision-record index. Four columns (ID, Title, Status, Date) with a colour-coded status pill. Used at the top of every technical-docs.html page to give an at-a-glance view of which decisions are accepted, superseded, or still in flight.

Status colours

Accepted — mint-green pill (the decision is live)
Proposed — cobalt-100 pill (under discussion)
Draft — orange pill (not yet up for review)
Superseded — cobalt-50 muted pill (replaced by a newer ADR; the row stays in the table for history)
Rejected — vermillion pill (decided against; kept for history)

Import & example

import {AdrTable} from '@conduction/docusaurus-preset/components';

<AdrTable
  items={[
    {id: '001', title: 'Schema-first design',        status: 'accepted',   date: '2025-03-14'},
    {id: '002', title: 'Storage adapter interface',  status: 'accepted',   date: '2025-04-02'},
    {id: '005', title: 'Single-table inheritance',   status: 'superseded', date: '2025-10-15'},
    {id: '006', title: 'Event-driven webhooks',      status: 'proposed',   date: '2026-02-01'},
  ]}
/>

Props

items array of {id, title, status, date, href?}. Setting href turns the title into a link to the full ADR.
status one of accepted / proposed / draft / superseded / rejected