MergeBox — @sdxc/ui

Demo apps

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Issue trackerCairnCairn, an invented issue tracker: grouped issue lists with filters in the address, a drag-and-drop board, projects on a roadmap, cycles with burn-up charts and an inbox./demo/apps/cairn
Social networkChorusChorus, an invented social network: a live timeline with pictures, link cards, polls and threads, profiles, grouped notifications, search and messages./demo/apps/chorus
Code hostDeltaDelta, a code host whose one repository is its own source: a file tree beside the code, line links, blame and the commits list, every file and commit read from git when the site is built./demo/apps/delta
CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
Chat assistantTernTern, an invented chat assistant: conversations with streamed replies, code and tables, projects, a canvas, sharing and settings./demo/apps/tern

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { MergeBox } from "@sdxc/ui/app";

Renders the precondition rows, then the merge control or the outcome. While the request can't merge, both halves of the split button stay on screen, disabled, and the sentence naming why is their aria-describedby. The method menu is a native popover of radios posting method, and the button names the chosen method through CSS, so the box needs no island at all.

Examples

Blocked on a review

Review requiredAt least 1 approving review is required by reviewers with write access

Some checks haven't completed yet1 pending and 3 successful checks

No conflicts with the base branch

View code

tsx

<MergeBox
	state="blocked"
	action="/acme/delta/pull/418/merge"
	rows={{
		reviews: {
			tone: "warning",
			title: "Review required",
			detail: "At least 1 approving review is required by reviewers with write access",
		},
		checks: { tone: "warning", title: "Some checks haven't completed yet", detail: "1 pending and 3 successful checks" },
		conflicts: { tone: "success", title: "No conflicts with the base branch" },
	}}
	labels={labels}
/>

Conflicts with the base branch

2 approving reviews

1 failing checktest (ubuntu-latest) failed after 3m 41s

This branch has conflicts that must be resolvedConflicting files: src/parser.ts, src/lexer/tokens.ts

View code

tsx

<MergeBox
	state="conflicts"
	action="/acme/delta/pull/405/merge"
	rows={{
		reviews: { tone: "success", title: "2 approving reviews" },
		checks: { tone: "danger", title: "1 failing check", detail: "test (ubuntu-latest) failed after 3m 41s" },
		conflicts: {
			tone: "danger",
			title: "This branch has conflicts that must be resolved",
			detail: "Conflicting files: src/parser.ts, src/lexer/tokens.ts",
		},
	}}
	labels={labels}
/>

Merged, with the branch left to delete

Pull request merged into main

View code

tsx

<MergeBox
	state="merged"
	action="/acme/delta/pull/399/merge"
	labels={labels}
	followUp={
		<form method="post" action="/acme/delta/branches/fix-tokenizer-offsets/delete">
			<Button type="submit" variant="outline" size="sm">Delete branch</Button>
		</form>
	}
/>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`state`	`"ready" \| "blocked" \| "conflicts" \| "merged" \| "closed"`	Yes	Enables the merge button only at `ready`, and swaps it for the outcome once settled.
`rows`	`Rows`	No	The preconditions shown above the button; an omitted row is left out.
`methods`	`Method[]`	No	The methods offered. @default ["merge", "squash", "rebase"]
`defaultMethod`	`"merge" \| "squash" \| "rebase"`	No	The method chosen when the box renders. Defaults to the first of `methods`.
`action`	`string`	Yes	Where the form posts; the body carries `method` and any `fields`.
`fields`	`RemixNode`	No	Extra hidden fields posted with the merge, such as a CSRF token.
`followUp`	`RemixNode`	No	What follows a settled pull request, such as a "Delete branch" form.
`labels`	`Labels`	Yes	Every string the box shows, so it reads in any language.

Also accepts everything in Omit<TagProps<"section">, "children">.

Types

Name	Values	What it decides
`State`	`"ready" \| "blocked" \| "conflicts" \| "merged" \| "closed"`	Where the pull request stands: `ready` can merge, `blocked` waits on a review or a check, `conflicts` needs the branch updated, and `merged` and `closed` are settled.
`Method`	`"merge" \| "squash" \| "rebase"`	How the branch lands: a merge commit, one squashed commit, or rebased commits.
`Tone`	`"success" \| "warning" \| "danger" \| "neutral"`	The tone a row reads in: met is `success`, waiting `warning`, failing `danger`.