Code Diff

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as CodeDiffStories from './CodeDiff.stories';

<Meta of={CodeDiffStories} name='Usage' />

<Title />

## Purpose

Shows the files an agent (or a person) changed, each expandable to its diff.

## Usage

Use it wherever a change needs review: the proposed fix in an approval report, the result of an edit in a chat, a list of changed files on a branch. Each file is one row. Collapsed rows keep the list short; expand a row to read its diff.

## Implementation

It is the PDS Panel List with expandable Panel Rows. The file name is the row's `items-left` slot, the PDS File Diff (counts and bar) is the `items-right` slot, and the Code Block with `language='diff'` is the `items-below` slot. Pass each file's `diff` as unified diff text; the Code Block colors added and removed lines.

See the table below for the available props.

<hr />

<Canvas of={CodeDiffStories.Default} />
<Controls of={CodeDiffStories.Default} />