diff options
Diffstat (limited to 'packages/ui/src/components/diff.stories.tsx')
| -rw-r--r-- | packages/ui/src/components/diff.stories.tsx | 96 |
1 files changed, 0 insertions, 96 deletions
diff --git a/packages/ui/src/components/diff.stories.tsx b/packages/ui/src/components/diff.stories.tsx deleted file mode 100644 index 03bf4a0e0..000000000 --- a/packages/ui/src/components/diff.stories.tsx +++ /dev/null @@ -1,96 +0,0 @@ -// @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 }, - ], - }, -} |
