style(13-03): apply Prettier formatting across repo
Mechanical reformat — no logic changes. 398 files changed, 19125 insertions(+), 16457 deletions(-). Prettier 3.8.4 with .prettierrc (singleQuote:true, semi:true, tabWidth:2, trailingComma:all, printWidth:100). Isolated per D-13-08 for reviewability.
This commit is contained in:
Lucas Berger
@@ -56,6 +56,7 @@ Read-only EventDetailPopover (XSS-safe, accessible, Phase-3-reusable), always-vi
|
||||
### Task 1: EventDetailPopover + CalendarShell wiring (TDD)
|
||||
|
||||
**`apps/pwa/src/components/EventDetailPopover.tsx`** (259 lines):
|
||||
|
||||
- Resolves open event by `openEventId` (Zustand) from TanStack Query `['events']` cache using `queryClient.getQueriesData`
|
||||
- Dual-mode: standalone (primary, driven by Zustand) + `customComponents.eventModal` prop from Schedule-X
|
||||
- Renders title (heading), date/time, location (with MapPin icon when present), description (max-4-lines scroll), calendar name + color swatch footer
|
||||
@@ -67,6 +68,7 @@ Read-only EventDetailPopover (XSS-safe, accessible, Phase-3-reusable), always-vi
|
||||
- Wired in CalendarShell: `customComponents={{ eventModal: EventDetailPopover }}` AND rendered standalone after the layout
|
||||
|
||||
**`apps/pwa/src/components/EventDetailPopover.test.tsx`** (192 lines, TDD RED → GREEN):
|
||||
|
||||
- TDD RED commit: tests written first, failing because file missing
|
||||
- GREEN commit: implementation makes all 12 tests pass
|
||||
- Tests: title/location/description/calendarName render as text; heading role; Escape/close-button/backdrop all call `setOpenEventId(null)`; null openEventId renders nothing
|
||||
@@ -77,31 +79,37 @@ Read-only EventDetailPopover (XSS-safe, accessible, Phase-3-reusable), always-vi
|
||||
### Task 2: Chrome components, state branches, EventProof retired
|
||||
|
||||
**`apps/pwa/src/components/ColorLegend.tsx`**:
|
||||
|
||||
- One row per member: 12px color circle (`aria-label="{name}: {hex}"`) + display name
|
||||
- "Family" row always rendered last using `--color-shared-family` (#F25C7A)
|
||||
- Font: 13px label weight, `--color-text-secondary`
|
||||
|
||||
**`apps/pwa/src/components/AppNav.tsx`**:
|
||||
|
||||
- Phone: 48px top bar — "FamilySync" display text left, user avatar right with `aria-label` + `title` per reviewer note
|
||||
- Tablet/desktop: 240px left sidebar — app name + "Calendars" section header + `<ColorLegend>`
|
||||
|
||||
**`apps/pwa/src/components/ViewToolbar.tsx`**:
|
||||
|
||||
- Today | ‹ | › | Day | Week | Month | Agenda
|
||||
- 44px min-height on all buttons; keyboard-activatable
|
||||
- Active view: `rgba(74, 144, 217, 0.12)` surface tint (NOT accent color) per UI-SPEC 60/30/10 rule
|
||||
- Navigation via `calendarApp.$app.calendarState.setRange()` / `setView()` (internal Schedule-X API)
|
||||
|
||||
**`apps/pwa/src/components/SkeletonCalendar.tsx`**:
|
||||
|
||||
- Month variant: 6×7 grid of shimmer cells + 7-col header
|
||||
- Agenda variant: 4 date-group blocks, 2–3 rows each at 60–90% widths
|
||||
- `aria-busy="true"`, `aria-label="Loading calendar"` on root
|
||||
- Shimmer: `@keyframes shimmer` from tokens.css, `background-size: 200% 100%`, 1.5s infinite
|
||||
|
||||
**`apps/pwa/src/components/EmptyState.tsx`**:
|
||||
|
||||
- `CalendarDays` lucide icon (32px, `--color-text-muted`)
|
||||
- Heading "Nothing here" + body "No events in this period. Try a different date or switch views." per UI-SPEC copywriting
|
||||
|
||||
**`apps/pwa/src/components/CalendarShell.tsx`** (major refactor):
|
||||
|
||||
- Phone: AppNav top bar → ViewToolbar → calendar content → ColorLegend below
|
||||
- Tablet/desktop: AppNav sidebar (240px) + main area (ViewToolbar → calendar content)
|
||||
- State branches: `isInitialLoading` → `SkeletonCalendar`; `isEventsError` → "Couldn't load events" + "Check your connection" + **Retry** button calling `queryClient.refetchQueries({ queryKey: ['events'] })`; `isEmptyResult` → `EmptyState`; success+data → `ScheduleXCalendar`
|
||||
@@ -125,6 +133,7 @@ vite build: clean (490.30 kB, 827ms)
|
||||
### Auto-fixed Issues
|
||||
|
||||
**1. [Rule 3 - Blocking] @testing-library/jest-dom not imported in test-setup.ts**
|
||||
|
||||
- **Found during:** Task 1 GREEN phase — `toHaveTextContent` threw "Invalid Chai property"
|
||||
- **Issue:** `@testing-library/jest-dom` extends Vitest/Chai's `expect` with DOM matchers. It was installed (in devDependencies) but never imported in `src/test-setup.ts`, so matchers were not registered.
|
||||
- **Fix:** Added `import '@testing-library/jest-dom'` to `src/test-setup.ts`
|
||||
@@ -132,6 +141,7 @@ vite build: clean (490.30 kB, 827ms)
|
||||
- **Commit:** 3eebfbf (bundled with Task 1 GREEN commit)
|
||||
|
||||
**2. [Rule 1 - Bug] CalendarShell.test.tsx: synchronous getByTestId fails after loading state added**
|
||||
|
||||
- **Found during:** Task 2 verification — existing CalendarShell smoke test failed
|
||||
- **Issue:** The test did `screen.getByTestId('schedule-x-calendar')` synchronously, but CalendarShell now shows SkeletonCalendar while loading. The calendar element only appears after queries resolve.
|
||||
- **Fix:** Changed to `await screen.findByTestId('schedule-x-calendar')` (async, waits for element)
|
||||
@@ -139,6 +149,7 @@ vite build: clean (490.30 kB, 827ms)
|
||||
- **Commit:** 216ddce (bundled with Task 2 commit)
|
||||
|
||||
**3. [Rule 1 - Bug] ViewToolbar: CalendarApp.setDate/decrementRange/incrementRange/setView don't exist on public API**
|
||||
|
||||
- **Found during:** Task 2 tsc check — 4 type errors
|
||||
- **Issue:** `CalendarApp` class only exposes `render`, `destroy`, `setTheme`, `getTheme`, and `events` (EventsFacade). Navigation methods (`setRange`, `setView`) live on the internal `$app.calendarState` (a `CalendarAppSingleton` property).
|
||||
- **Fix:** Changed `calendarApp` prop type to `any`, accessed internal state via `calendarApp.$app.calendarState` with runtime null-guards. Navigation uses `Temporal.Now.plainDateISO()` for today and `ZonedDateTime.until().days` for range inference.
|
||||
@@ -156,6 +167,7 @@ None — all components render from live data (TanStack Query cache) or accurate
|
||||
## Threat Flags
|
||||
|
||||
T-02e-01 mitigated:
|
||||
|
||||
- EventDetailPopover: title, description, location, calendarName all rendered as plain-text JSX children
|
||||
- Test asserts `<script>alert("xss")</script>` in title → `heading.innerHTML` does NOT contain `<script>`, textContent DOES contain the literal string
|
||||
- Test asserts `<b>Bold</b>` in description → `descEl.innerHTML` does NOT contain `<b>`
|
||||
@@ -169,6 +181,7 @@ The plan gates on operator visual verification. The automated tasks (1 and 2) ar
|
||||
## Self-Check: PASSED
|
||||
|
||||
Files created:
|
||||
|
||||
- [x] apps/pwa/src/components/EventDetailPopover.tsx
|
||||
- [x] apps/pwa/src/components/EventDetailPopover.test.tsx
|
||||
- [x] apps/pwa/src/components/ColorLegend.tsx
|
||||
@@ -178,9 +191,11 @@ Files created:
|
||||
- [x] apps/pwa/src/components/EmptyState.tsx
|
||||
|
||||
Files deleted:
|
||||
|
||||
- [x] apps/pwa/src/components/EventProof.tsx (confirmed ABSENT)
|
||||
|
||||
Commits:
|
||||
|
||||
- [x] 433fb9f — TDD RED: EventDetailPopover test
|
||||
- [x] 3eebfbf — feat: EventDetailPopover + CalendarShell wiring
|
||||
- [x] 216ddce — feat: Task 2 chrome + states + EventProof retired
|
||||
|
||||
Reference in New Issue
Block a user