Improvements todo created and small bugfixes

2026-05-25 12:56:08 +02:00
parent 499f68b9ee
commit 648d376a12
10 changed files with 807 additions and 72 deletions
@@ -0,0 +1,56 @@
+# 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.