<!-- source-hash: abdfb61054ac90989111840ada6a1cca -->
Storybook stories for the `ChatTicketList` component, providing interactive visual test cases covering ticket states, scroll fading behavior, and loading skeletons.

## Key Components

| Export | Description |
|---|---|
| `Default` | Five mock tickets spanning all common statuses |
| `SingleTicket` | Minimal single-ticket render |
| `AllStatuses` | Four tickets demonstrating `ACTIVE`, `ON_HOLD`, `TECH_REQUIRED`, and `RESOLVED` states |
| `ScrollFading` | 15 tickets in a 400px container to showcase scroll-edge fade effect |
| `ScrollFadingCompact` | Same dataset in a tighter 280px container for more pronounced fading |
| `Loading` | Empty tickets array with `isLoading: true` to render skeleton placeholder rows |

**Helpers**

- `mockTickets` — five representative `ChatTicketItemData` fixtures covering the four ticket statuses
- `manyTickets` — extends `mockTickets` to 15 entries across diverse categories (Email, Security, Onboarding, Infrastructure, etc.)
- `constrainedDecorator(height?)` — wraps each story in a max-width 600px flex container; accepts an optional fixed height to trigger scrollable overflow

## Usage Example

```typescript
// Render the scroll-fading story locally in Storybook
import { ScrollFading } from "./ChatTicketList.stories";

// Or compose the component directly with the same fixture data
import { ChatTicketList } from "../components/chat/chat-ticket-list";
import type { ChatTicketItemData } from "../components/chat/entity-cards/chat-ticket-item";

const tickets: ChatTicketItemData[] = [
  {
    id: "1",
    title: "Printer not working",
    ticketNumber: "1002",
    status: "ACTIVE",
    category: "Hardware Issue",
    timeAgo: "2 hours",
  },
];

<ChatTicketList
  tickets={tickets}
  isLoading={false}
  onTicketClick={(id) => console.log("clicked", id)}
/>;
```

**Source:** [`ChatTicketList.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ChatTicketList.stories.tsx)