Skip to content

packages ui

Claude edited this page Sep 23, 2026 · 3 revisions

UI (@safrs/ui)

Scope. Root primitive used by golden-path. Product UIs (SentraBot, Kediri, Smartboard, portfolio) do not consume this package.

Purpose

React primitives built on the Sentra design tokens. Deliberately minimal — one exported component (StatusCard). Shared-package changes are R2.

Key source files

File Purpose
packages/ui/src/index.ts Barrel: exports StatusCard + StatusCardState
packages/ui/src/status-card.tsx The StatusCard component
packages/ui/package.json Depends on @sentra/token; react is a peer dependency

The component

StatusCard (packages/ui/src/status-card.tsx) renders a labelled status panel with an inline state badge:

  • Props: label, detail, state ("ready" | "attention"), and optional children.
  • Renders an <article class="status-card" data-state={state}> with a heading, the label, a short detail paragraph, and any children.
  • The visible state text is localised (Bahasa Indonesia): ready → "Siap", attention → "Perlu perhatian".

Styling is class-driven (status-card, status-card__*) so the actual colours come from @sentra/token (see Token); the component carries no raw colour or radius values, which keeps it inside the governance token gate.

import { StatusCard } from "@safrs/ui";

<StatusCard
  label="Database"
  detail="Local disposable database is ready."
  state="ready"
/>

Integration points

  • @safrs/web consumes @safrs/ui (declared in projects/internal/golden-path/apps/web/package.json).
  • @sentra/token provides the design tokens the component styles against; check-tokens.mjs enforces that no raw values leak into this package.

Verification

pnpm --filter @safrs/ui lint
pnpm --filter @safrs/ui typecheck
pnpm --filter @safrs/ui test
pnpm --filter @safrs/ui build

Related pages

Clone this wiki locally