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/warpUsage
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
| Prop | Type | Default | Description |
|---|---|---|---|
field | string | — | The field's name. |
peer | Peer | — | Who changed it. |
time | string | — | When. |
theirs | unknown | — | Their value. |
yours | unknown | — | Your value. |
| Event | Type | Default | Description |
|---|---|---|---|
onUseTheirs | () => void | — | Takes theirs. |
onKeepMine | () => void | — | Keeps yours. |
onCompare | (() => void) | — | Shows Compare. |
RelatedSync indicatorLocked field