265 lines
8.1 KiB
YAML
265 lines
8.1 KiB
YAML
# ============================================================================
|
|
# PROTOTYPE WORK FILE: [Page Number] [Page Name]
|
|
# ============================================================================
|
|
# Purpose: Complete planning document for section-by-section implementation
|
|
# Created: [Date]
|
|
# Page Spec: ../[Scenario]/[Page-Number]-[Page-Name]/[Page-Number]-[Page-Name].md
|
|
# ============================================================================
|
|
|
|
metadata:
|
|
page_number: "[Page-Number]"
|
|
page_name: "[Page Name]"
|
|
scenario: "[Scenario-Number]-[Scenario-Name]"
|
|
complexity: "simple | medium | complex"
|
|
estimated_sections: [Number]
|
|
estimated_time: "[X] minutes"
|
|
|
|
# Device Compatibility
|
|
device_compatibility:
|
|
type: "mobile-only | mobile-tablet | responsive | desktop-only"
|
|
primary_viewport: "[Width]px"
|
|
test_viewports:
|
|
- width: 375
|
|
height: 667
|
|
device: "iPhone SE"
|
|
- width: 393
|
|
height: 852
|
|
device: "iPhone 14 Pro"
|
|
- width: 428
|
|
height: 926
|
|
device: "iPhone 14 Pro Max"
|
|
breakpoints: [] # For mobile-only, leave empty
|
|
touch_optimized: true
|
|
hover_interactions: false
|
|
|
|
dependencies:
|
|
- "shared/prototype-api.js"
|
|
- "shared/init.js"
|
|
# Add component dependencies as needed
|
|
|
|
# ============================================================================
|
|
# DESIGN TOKENS (Tailwind Config)
|
|
# ============================================================================
|
|
|
|
design_tokens:
|
|
colors:
|
|
primary: "#2563eb"
|
|
primary_hover: "#1d4ed8"
|
|
success: "#10b981"
|
|
error: "#ef4444"
|
|
|
|
tailwind_config:
|
|
theme_extend:
|
|
colors:
|
|
"[project-name]":
|
|
50: "#eff6ff"
|
|
500: "#2563eb"
|
|
600: "#1d4ed8"
|
|
700: "#1e40af"
|
|
fontFamily:
|
|
sans: "['Inter', 'system-ui', 'sans-serif']"
|
|
|
|
components_available:
|
|
- "image-crop (components/image-crop.js)"
|
|
- "toast (components/toast.js)"
|
|
- "modal (components/modal.js)"
|
|
- "form-validation (components/form-validation.js)"
|
|
|
|
# ============================================================================
|
|
# PAGE REQUIREMENTS (from specification)
|
|
# ============================================================================
|
|
|
|
page_purpose: |
|
|
[Brief description of what this page does and why user is here]
|
|
|
|
user_context:
|
|
- [Context point 1: What user has done before arriving]
|
|
- [Context point 2: What data is available]
|
|
- [Context point 3: User's current state]
|
|
|
|
success_criteria:
|
|
- [Criterion 1: What must be accomplished]
|
|
- [Criterion 2: Required validations]
|
|
- [Criterion 3: Data that must be saved]
|
|
- [Criterion 4: Where user navigates on success]
|
|
|
|
# ============================================================================
|
|
# DEMO DATA REQUIREMENTS
|
|
# ============================================================================
|
|
|
|
demo_data_needed:
|
|
current_user:
|
|
firstName: "[Example]"
|
|
lastName: "[Example]"
|
|
email: "[example@email.com]"
|
|
|
|
# Add other demo data needs (family, dogs, etc.)
|
|
|
|
example_submission:
|
|
# Example of completed form data
|
|
field1: "[value]"
|
|
field2: "[value]"
|
|
|
|
# ============================================================================
|
|
# OBJECT ID MAP (all interactive elements)
|
|
# ============================================================================
|
|
|
|
object_ids:
|
|
header:
|
|
- "[page]-header-back"
|
|
- "[page]-header-title"
|
|
|
|
form_inputs:
|
|
- "[page]-input-[field1]"
|
|
- "[page]-input-[field2]"
|
|
# Add all form fields
|
|
|
|
actions:
|
|
- "[page]-button-submit"
|
|
# Add all action buttons
|
|
|
|
# ============================================================================
|
|
# SECTION BREAKDOWN (implementation order)
|
|
# ============================================================================
|
|
|
|
sections:
|
|
- id: "section-1"
|
|
name: "Page Structure & Header"
|
|
scope: "HTML skeleton, header with back button, title, main container"
|
|
files_affected: ["[Page-Number]-[Page-Name].html"]
|
|
dependencies: []
|
|
object_ids:
|
|
- "[page]-header-back"
|
|
- "[page]-header-title"
|
|
tailwind_classes:
|
|
- "Layout: min-h-screen, bg-gray-50"
|
|
- "Header: bg-white, border-b, px-4, py-3"
|
|
- "Button: text-gray-600, hover:text-gray-900"
|
|
acceptance_criteria:
|
|
- "Header displays with back button and title"
|
|
- "Back button navigates to previous page"
|
|
- "Mobile viewport (375px) looks correct"
|
|
- "Tailwind styles applied correctly"
|
|
placeholder_message: "🚧 Building the form... Check back in a few minutes!"
|
|
|
|
- id: "section-2"
|
|
name: "[Section Name]"
|
|
scope: "[What this section adds]"
|
|
files_affected: ["[Page-Number]-[Page-Name].html"]
|
|
dependencies: ["[component files if needed]"]
|
|
object_ids:
|
|
- "[object-id-1]"
|
|
- "[object-id-2]"
|
|
tailwind_classes:
|
|
- "[List key Tailwind classes to use]"
|
|
acceptance_criteria:
|
|
- "[Test 1]"
|
|
- "[Test 2]"
|
|
placeholder_message: "[What's coming next]"
|
|
|
|
# Add sections 3-6+ as needed
|
|
|
|
# ============================================================================
|
|
# JAVASCRIPT REQUIREMENTS
|
|
# ============================================================================
|
|
|
|
javascript_functions:
|
|
initialization:
|
|
- "initPage() - Page-specific initialization"
|
|
- "[Other init functions]"
|
|
|
|
form_handling:
|
|
- "handleSubmit(event) - Form submission"
|
|
- "validateForm() - Validate all fields"
|
|
- "[Other form functions]"
|
|
|
|
ui_interactions:
|
|
- "[Interaction function 1]"
|
|
- "[Interaction function 2]"
|
|
|
|
api_calls:
|
|
- "DogWeekAPI.[method]([params])"
|
|
|
|
feedback:
|
|
- "showToast(message, type)"
|
|
- "setLoadingState(isLoading)"
|
|
- "[Other feedback functions]"
|
|
|
|
# ============================================================================
|
|
# NAVIGATION
|
|
# ============================================================================
|
|
|
|
navigation:
|
|
previous_page: "[Previous-Page].html"
|
|
next_page_success: "[Next-Page].html"
|
|
next_page_cancel: "[Cancel-Page].html"
|
|
|
|
# ============================================================================
|
|
# TESTING CHECKLIST (after all sections complete)
|
|
# ============================================================================
|
|
|
|
testing_checklist:
|
|
functionality:
|
|
- "[ ] All form fields work"
|
|
- "[ ] Validation shows errors correctly"
|
|
- "[ ] Submit button works"
|
|
- "[ ] Loading states display"
|
|
- "[ ] Success feedback shows"
|
|
- "[ ] Error handling works"
|
|
- "[ ] Navigation works (back, next)"
|
|
- "[ ] Data persists (reload page test)"
|
|
|
|
mobile_testing:
|
|
- "[ ] Viewport is correct width"
|
|
- "[ ] All tap targets min 44x44px"
|
|
- "[ ] Text is readable (min 16px)"
|
|
- "[ ] No horizontal scroll"
|
|
- "[ ] Touch gestures work (if applicable)"
|
|
|
|
code_quality:
|
|
- "[ ] All Object IDs present"
|
|
- "[ ] Console logs helpful"
|
|
- "[ ] No console errors"
|
|
- "[ ] Tailwind classes properly used"
|
|
- "[ ] Functions documented"
|
|
|
|
accessibility:
|
|
- "[ ] Keyboard navigation works"
|
|
- "[ ] Form labels present"
|
|
- "[ ] Error messages clear"
|
|
- "[ ] Focus states visible"
|
|
|
|
# ============================================================================
|
|
# MIGRATION NOTES (for production)
|
|
# ============================================================================
|
|
|
|
migration_todos:
|
|
- "Replace DogWeekAPI.[method]() with Supabase calls"
|
|
- "[Other production migration tasks]"
|
|
|
|
# ============================================================================
|
|
# KNOWN ISSUES / EDGE CASES
|
|
# ============================================================================
|
|
|
|
edge_cases:
|
|
- "[Edge case 1 to handle]"
|
|
- "[Edge case 2 to handle]"
|
|
|
|
# ============================================================================
|
|
# COMPLETION CRITERIA
|
|
# ============================================================================
|
|
|
|
definition_of_done:
|
|
- "All sections implemented and tested"
|
|
- "All object IDs present and correct"
|
|
- "All acceptance criteria met"
|
|
- "Console logs helpful and clear"
|
|
- "Mobile viewport works perfectly"
|
|
- "Demo data loads automatically"
|
|
- "Form validation complete"
|
|
- "Success/error feedback working"
|
|
- "Navigation works"
|
|
- "No console errors"
|
|
- "Code is clean"
|
|
- "Story files document all sections"
|