| name | crave-kitchen-sink |
| description | Build the /_kitchen-sink showcase route — a single screen that renders every component from src/components in both light and dark themes for visual audit. Includes a top theme-toggle and an "Exercise mock API" panel that calls each api.* method and prints the result. Used continuously across Phases 1–5 to catch drift; removed in Phase 6 (crave-qa-polish). |
crave-kitchen-sink
The internal showcase that proves the component library + mock API both work without needing the real screens. Built alongside crave-components, kept healthy each phase, deleted at release.
File
app/_kitchen-sink.tsx (the leading underscore makes it a hidden route — not reachable from tabs/nav, only by typing the URL or via a debug button in the Account screen during development).
Sections
0. Header
- Theme toggle (System / Light / Dark) wired to
theme.setMode().
- "Simulate errors" switch → sets
globalThis.__simulateErrors = true/false.
- "Reset storage" button → clears
crave/* keys and crave-cart (with confirm).
1. Tokens
Render swatches for every color token in both modes (display both side-by-side or per the active mode), spacing rulers, radii samples, every typography style with sample text.
2. Components
Render each component from src/components/index.ts with at least:
- All variants (
Button: primary/secondary/ghost + disabled + loading).
- All states (
Chip: unselected/selected).
- Edge cases (
RestaurantCard with long restaurant name; MenuItemRow with no description; Skeleton shimmer in motion).
Sheet triggered by a button.Stepper showing each of the 5 order statuses.MapView placeholder with a sample route + a courier animating at progress = 0.4.
3. Mock API exerciser
A vertical list of buttons, one per api.* method:
getCategories · getRestaurants · getRestaurant(<seed id>) · getMenu(<seed id>) · searchRestaurants("pizza") · placeOrder(<sample input>) · getOrders · getOrder(<latest id>)
Each button:
- Runs the call.
- Shows a status pill (idle / loading / ok / error).
- On expand, shows the result JSON (pretty-printed, scrollable, truncated to ~80 lines).
- Times the call in ms.
4. Animation lab
- Trigger the add-to-cart fly animation between two placeholder rects.
- Toggle
useReducedMotion simulation via a switch (overrides Reanimated's check for this screen only).
- Force
CartBar slide-in/out manually.
Acceptance
/_kitchen-sink opens directly without auth gating (use a top-level route so it bypasses tabs).- Every component listed in crave-components appears at least once in each theme.
- Every
api.* call can be exercised and shows a result.
- Toggling appearance live-flips the entire screen.
Hard rules
- This route is NEVER linked from the user-facing nav. Only reachable by URL during development.
- Must be deleted (or excluded via env check) in crave-qa-polish before the release build.
- Don't put real production logic in this screen — it's a viewer/exerciser only.
