<!-- source-hash: f63f316c3ca0b7f0616cd692ac686468 -->
Storybook stories file for the `NotificationDrawer` feature, providing visual documentation and interactive playground stories for notification tiles, drawer states, and approval workflows.

## Key Components

| Export | Type | Description |
|---|---|---|
| `AllTileVariants` | Story | Static preview of all notification tile variants (`default`, `success`, `error`, `warning`, `info`) |
| `SeverityIconAndImage` | Story | Demonstrates the `severity` field (`INFO`, `WARNING`, `DANGER`) with image, icon, and dot fallback states |
| `LiveTile` | Story | Animated tile showing the 4-second progress bar + dismiss UX before settling into resting state |
| `DrawerEmpty` | Story | `NotificationDrawer` rendered with no notifications (empty state) |
| `DrawerWithSeedData` | Story | Drawer pre-seeded with `SEED` data covering all approval resolution states: pending, approved, rejected, cancelled |
| `AutoOpen` | Helper | Internal component that calls `useNotifications().open()` on mount to auto-expand the drawer in stories |
| `approvalSeed` | Helper | Factory function generating `Notification` objects for approval-request tiles in a given resolution state |

## Usage Example

```typescript
// Minimal provider + drawer setup (mirrors DrawerEmpty story)
import {
  NotificationsProvider,
  NotificationDrawer,
  useNotifications,
} from '../components/features/notifications';

function App() {
  return (
    <NotificationsProvider
      initialNotifications={SEED}
      onHistoryClick={() => router.push('/notifications')}
      historyHref="/notifications"
      renderTile={renderApprovalTile}
    >
      <NotificationDrawer />
    </NotificationsProvider>
  );
}

// Fire a notification from any realtime source
function RealtimeListener() {
  const { addNotification } = useNotifications();

  useEffect(() => {
    socket.on('alert', (event) => {
      addNotification({
        id: event.id,
        severity: 'WARNING',
        type: 'Disk Space Warning',
        icon: <AlertTriangleIcon size={16} />,
        title: event.device,
        description: event.message,
        createdAt: Date.now(),
        read: false,
      });
    });
  }, [addNotification]);

  return null;
}
```

## Notes

- Mount `<NotificationsProvider>` once at the app root; the bell button in `AppHeader` toggles the drawer automatically.
- The `severity` field (`INFO` | `WARNING` | `DANGER`) overrides `variant` for color; `imageUrl` takes priority over `icon`, which falls back to a severity dot.
- Source: [`NotificationDrawer.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/NotificationDrawer.stories.tsx)