# Component Playground Implementation Plan

This document outlines the plan to implement a `/playground` route in the `babymonitor` frontend, allowing for isolated component development and testing with realistic mock data.

## Goal
Create a route `/playground` that provides a dropdown menu to select any UI component from the codebase. When selected, the component will be rendered in isolation with its required props and necessary TanStack Query cache data pre-populated with realistic mock values.

## Target Components
The playground will cover components from both the `tracker` and `stats` directories:

### Tracker Components
- `StatusBanner`
- `TimeAdjuster`
- `SleepButton`

### Stats Components
- `DailySummary`
- `WakeupPlot`
- `BedtimePlot`
- `SleepTimetable`
- `SessionList`
- `IntervalPicker`
- `SettingsPopover`

## Technical Approach

### 1. Component Registry Definition
I will define a registry within `Playground.tsx` that maps component names to:
- The React Component itself.
- A function to generate required `props`.
- An array of TanStack Query `queryKeys` that need to be populated in the cache.

### 2. Mock Data Injection Strategy
To avoid modifying existing hooks (like `useSessions` or `useStats`), I will leverage the TanStack `QueryClient`. 
- When a component is selected, a `useEffect` will trigger.
- This effect will use `queryClient.setQueryData(key, mockData)` for every key associated with that component in the registry.
- This ensures that when the component calls its respective hook, it finds the mock data already in the cache.

### 3. Implementation Details
- **File Creation**: `frontend/src/components/Playground.tsx` will house the main logic.
- **Routing**: `frontend/src/App.tsx` will be updated to include the new `<Route path="/playground" element={<Playground />} />`.
- **Dependencies**: The playground will wrap its content in a `QueryClientProvider` and `ThemeProvider` (if applicable) to mimic the production environment.
- **Styling**: Tailwind CSS will be used for the dropdown and layout to maintain consistency with the existing design system.

## Mock Data Schema
I will implement realistic data based on the types defined in `frontend/src/types/index.ts`:
- **Sessions**: A list of `SleepSessionRead` objects including `start_time`, `end_time`, and varied durations.
- **Stats**: 7 days of `DailySummaryDay`, `TimetableSlot`, and `WakeupBedtimeDay` data to populate charts and grids.
- **Settings**: Default values for `dayStart`, `dayEnd`, etc., to satisfy the `useSettings` hook.

## Step-by-Step Execution
1. **Create** `frontend/src/components/Playground.tsx`.
2. **Define** the component registry and mock data generators inside `Playground.tsx`.
3. **Implement** the selection logic and cache injection mechanism in `Playground.tsx`.
4. **Update** `frontend/src/App.tsx` to register the route.
5. **Verify** (via manual instruction) that components render correctly without backend connectivity.