babymonitor/frontend/playground_plan.md

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.