<!-- source-hash: 82f8ca355b8119e08afe608bf0b4cf05 -->
Storybook stories for the `TicketInfoSection` component, covering collapsed, expanded, interactive, and minimal display states of the collapsible ticket info bar.

## Key Components

- **`Collapsed`** — Default header-only view showing organization, user, device, and status fields
- **`Expanded`** — Fully populated view with description, attachments, tags, knowledge base articles, and notes
- **`Interactive`** — Stateful story demonstrating expand/collapse toggle with `useState`, device click handler, and note CRUD callbacks
- **`Minimal`** — Expanded state with all fields set to "Unassigned", useful for empty-state validation

## Usage Example

```typescript
import { TicketInfoSection } from '../components/ui/ticket-info-section';

// Basic collapsed header
<TicketInfoSection
  organization={{ name: 'Acme Corp' }}
  user="John Doe"
  device={{ name: 'WIN-SERVER-01', icon: <Monitor className="size-4" /> }}
  status="TECH_REQUIRED"
  expanded={false}
/>

// Expanded with notes and attachments
<TicketInfoSection
  organization={{ name: 'Acme Corp' }}
  user="John Doe"
  device={{ name: 'WIN-SERVER-01' }}
  status="ACTIVE"
  expanded={true}
  notes={mockNotes}
  attachments={mockAttachments}
  knowledgeBaseArticles={mockArticles}
  tags={['Client-onboarding']}
  onAddNote={(text) => console.log('Add note:', text)}
  onEditNote={(id) => console.log('Edit note:', id)}
  onDeleteNote={(id) => console.log('Delete note:', id)}
/>
```