Skip to content
weftGitHub

ConflictAlert

Two people changed one value. Shows both, and lets you pick.

SourcePackage @weft-js/warp

Preview

tsx
import { state } from '@weft-js/core'import { Button, ConflictAlert, Stack, Text } from '@weft-js/warp'import type { Peer } from '@weft-js/warp'export function ReviewDate() {  const picked = state<string | null>(null)  return (    <>      {picked.value        ? <Stack gap="related" align="center"><Text>Review date: {picked.value}</Text><Button size="sm" emphasis="ghost" tone="neutral" onClick={() => (picked.value = null)}>Show the conflict again</Button></Stack>        : <ConflictAlert field="Review date" peer={JUN} time="10:31" theirs="Nov 21" yours="Nov 14" onUseTheirs={() => (picked.value = 'Nov 21')} onKeepMine={() => (picked.value = 'Nov 14')} />}    </>  )}const PEOPLE = [  { id: 'mara', name: 'Mara Lindqvist', email: 'mara@weft.dev', role: 'Owner', team: 'Platform', initials: 'ML' },  { id: 'jun', name: 'Jun Tanaka', email: 'jun@weft.dev', role: 'Admin', team: 'Platform', initials: 'JT' },  { id: 'priya', name: 'Priya Raman', email: 'priya@weft.dev', role: 'Member', team: 'Web', initials: 'PR' },  { id: 'tomas', name: 'Tomás Oliveira', email: 'tomas@weft.dev', role: 'Member', team: 'Web', initials: 'TO' },  { id: 'lena', name: 'Lena Fischer', email: 'lena@weft.dev', role: 'Member', team: 'Data', initials: 'LF' },  { id: 'noor', name: 'Noor Haddad', email: 'noor@weft.dev', role: 'Viewer', team: 'Data', initials: 'NH' },  { id: 'sam', name: 'Sam Okafor', email: 'sam@weft.dev', role: 'Member', team: 'Mobile', initials: 'SO' },  { id: 'ines', name: 'Inés Vidal', email: 'ines@weft.dev', role: 'Viewer', team: 'Mobile', initials: 'IV' },]const PEERS: Peer[] = PEOPLE.map((p, i) => ({ id: p.id, name: p.name, color: i + 1 }))const [MARA, JUN, PRIYA, TOMAS, LENA, NOOR, SAM, INES] = PEERS as [Peer, Peer, Peer, Peer, Peer, Peer, Peer, Peer]

Installation

npm install @weft-js/warp

Usage

tsx
import { ConflictAlert } from '@weft-js/warp'

Accessibility

  • This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

PropTypeDefaultDescription
fieldstring—The field's name.
peerPeer—Who changed it.
timestring—When.
theirsunknown—Their value.
yoursunknown—Your value.
EventTypeDefaultDescription
onUseTheirs() => void—Takes theirs.
onKeepMine() => void—Keeps yours.
onCompare(() => void)—Shows Compare.

RelatedSync indicatorLocked field