mirror of
https://github.com/anomalyco/opencode.git
synced 2026-05-02 22:40:22 +00:00
96 lines
2.1 KiB
TypeScript
96 lines
2.1 KiB
TypeScript
// @ts-nocheck
|
|
import * as mod from "./diff"
|
|
import { create } from "../storybook/scaffold"
|
|
import { diff } from "../storybook/fixtures"
|
|
|
|
const docs = `### Overview
|
|
Render a code diff with OpenCode styling using the Pierre diff engine.
|
|
|
|
Pair with \`DiffChanges\` for summary counts.
|
|
Use \`LineComment\` or external UI for annotation workflows.
|
|
|
|
### API
|
|
- Required: \`before\` and \`after\` file contents (name + contents).
|
|
- Optional: \`diffStyle\` ("unified" | "split"), \`annotations\`, \`selectedLines\`, \`commentedLines\`.
|
|
- Optional interaction: \`enableLineSelection\`, \`onLineSelectionEnd\`.
|
|
- Passes through Pierre FileDiff options (see component source).
|
|
|
|
### Variants and states
|
|
- Unified and split diff styles.
|
|
- Optional line selection + commented line highlighting.
|
|
|
|
### Behavior
|
|
- Re-renders when \`before\`/\`after\` or diff options change.
|
|
- Line selection uses mouse drag/selection when enabled.
|
|
|
|
### Accessibility
|
|
- TODO: confirm keyboard behavior from the Pierre diff engine.
|
|
- Provide surrounding labels or headings when used as a standalone view.
|
|
|
|
### Theming/tokens
|
|
- Uses \`data-component="diff"\` and Pierre CSS variables from \`styleVariables\`.
|
|
- Colors derive from theme tokens (diff add/delete, background, text).
|
|
|
|
`
|
|
|
|
const story = create({
|
|
title: "UI/Diff",
|
|
mod,
|
|
args: {
|
|
before: diff.before,
|
|
after: diff.after,
|
|
diffStyle: "unified",
|
|
},
|
|
})
|
|
|
|
export default {
|
|
title: "UI/Diff",
|
|
id: "components-diff",
|
|
component: story.meta.component,
|
|
tags: ["autodocs"],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: docs,
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
diffStyle: {
|
|
control: "select",
|
|
options: ["unified", "split"],
|
|
},
|
|
enableLineSelection: {
|
|
control: "boolean",
|
|
},
|
|
},
|
|
}
|
|
|
|
export const Unified = story.Basic
|
|
|
|
export const Split = {
|
|
args: {
|
|
diffStyle: "split",
|
|
},
|
|
}
|
|
|
|
export const Selectable = {
|
|
args: {
|
|
enableLineSelection: true,
|
|
},
|
|
}
|
|
|
|
export const SelectedLines = {
|
|
args: {
|
|
selectedLines: { start: 2, end: 4 },
|
|
},
|
|
}
|
|
|
|
export const CommentedLines = {
|
|
args: {
|
|
commentedLines: [
|
|
{ start: 1, end: 1 },
|
|
{ start: 4, end: 4 },
|
|
],
|
|
},
|
|
}
|