Something went wrong. Try again.
opencode v2 mirror
Something went wrong. Try again.
1.5 kB · 70 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071import { DiffChanges } from "./diff-changes"
const docs = `### Overview Summarize additions/deletions as compact text.
Pair with \`Diff\`/\`DiffSSR\` to contextualize a change set.
### API- Required: \`changes\` as { additions, deletions } or an array of those objects.- Optional: \`appearance\` is \`compact\` (default) or \`standard\`.
### Variants and states- Handles zero-change state (renders nothing).
### Behavior- Aggregates arrays into total additions/deletions.
### Accessibility- Ensure surrounding context conveys meaning of the counts/bars.
### Theming/tokens- Uses \`data-component="diff-changes"\` and diff color tokens.
`
const changes = { additions: 12, deletions: 5 }
export default { title: "UI/DiffChanges", id: "ui-diff-changes", component: DiffChanges, tags: ["autodocs"], parameters: { docs: { description: { component: docs, }, }, }, args: { changes, },}
export const Default = {}
export const Appearances = { render: () => ( <div style={{ display: "flex", gap: "16px", "align-items": "center" }}> <DiffChanges appearance="standard" changes={changes} /> <DiffChanges appearance="compact" changes={changes} /> </div> ),}
export const MultipleFiles = { args: { changes: [ { additions: 4, deletions: 1 }, { additions: 8, deletions: 3 }, { additions: 2, deletions: 0 }, ], },}
export const Zero = { args: { changes: { additions: 0, deletions: 0 }, },}