📦 Component Sandbox

Interactive testing environment for all Booknuto components

Wave 0

Shared Foundation

Quick Mode shared components

Quick Mode Foundation
WizardShell, StepContainer, QuickHint, FreemiumLock, EarlyBirdTeaser, PricePreview
Klikem otevřít demo →
Package Wizard
Package pricing configuration with tiers and velocity limits
Klikem otevřít demo →
Wave 3

Mobile Gesture Components

Responsive mobile components and gesture handling

SwipeContainer
Horizontal swipe gesture navigation for day/week switching
Klikem otevřít demo →
MobileBottomSheet
Mobile bottom sheet modal with URL state sync and accessibility
Klikem otevřít demo →
GestureOnboardingOverlay
First-time mobile user tutorial with 3-step workflow
Klikem otevřít demo →
Wave 4

Service Pages & Navigation

Service setup navigation and layout components

IntegratedNavigationWidget
Service setup navigation with step status tracking and responsive variants
Klikem otevřít demo →
🚀 Quick Start

Sandbox slouží k izolovanému testování komponent. Každá demo stránka poskytuje:

  • Interactive controls pro manipulaci se stavem
  • Visual preview komponenty v reálném čase
  • Props API dokumentace
  • Test checklist pro manuální testování
  • Příklady použití v aplikaci

Upravujte props, klikejte na prvky a používejte klávesnici - vše se projeví v real-time.

✅ Kompatibilita

Sandbox je optimalizován pro:

  • Desktop browsers (Chrome, Firefox, Safari, Edge)
  • Mobile browsers (iOS Safari, Chrome Android)
  • Screen readers (NVDA, JAWS, VoiceOver)
  • Keyboard navigation (Tab, Enter, Escape, Arrow keys)
📝 Development Notes

Sandbox pages používají client-side komponenty ('use client'). Pro testování:

  • Start dev server: npx pnpm dev
  • Navigate to: http://localhost:3000/sandbox
  • Hot reload funguje automaticky