Stage Rail

#Installation & usage

Use a stage rail for work that moves through ordered stages: build, test and deploy in CI, the steps of a migration, the phases of a rollout. Each stage is a key in a recessed track holding its name, its duration (ticking in mono while it runs), a run of cells that fill as it progresses and its state: queued, running, passed, failed or skipped. The cells of every stage share one line, so the run reads as a single bar: ink where work is done, the accent where it's under way, the danger tone where it broke, hatched where a stage was skipped. Picking a stage raises its key, so the rail can drive whatever sits below it, such as that stage's log. For steps a person works through, use a Stepper.

import { useState } from 'react'
import { StageRail } from '@youj/react'

export function Pipeline() {
  const [stage, setStage] = useState('test')
  const testStartedAt = Date.now() - 20_000
  return (
    <StageRail
      stages={[
        { id: 'build', name: 'Build', status: 'passed', duration: 72_000 },
        { id: 'test', name: 'Test', status: 'running', startedAt: testStartedAt, estimate: 64_000 },
        { id: 'deploy', name: 'Deploy', status: 'queued' },
      ]}
      value={stage}
      onValueChange={setStage}
    />
  )
}

Times are in milliseconds. A running stage ticks from its startedAt and fills toward its estimate (what it usually takes), stopping short of full until it passes; pass progress (0–1) instead when you know it. A finished stage shows its duration, and a failed one fills to its progress, where it broke. Without value, the rail picks the running stage, else the first that failed, else the last to have run.

The rail is one toggle group with a stage always picked. Pass the id of the panel it drives as controls, and it sets aria-controls on every stage:

<StageRail stages={stages} value={picked} onValueChange={setPicked} controls="stage-log" />
<div id="stage-log" role="log" aria-label={`${name} log`}>…</div>

#Description

#Code