57 lines
2.9 KiB
Markdown
57 lines
2.9 KiB
Markdown
# 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.
|