@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

package/dist/components/ui/touch-demo.d.ts

@@ -0,0 +1,455 @@
+export const TouchDemo: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'overview' | 'gestures' | 'optimization' | 'mobile'>('overview')
+  const [gestureHistory, setGestureHistory] = useState<Array<{ type: string; details: any; timestamp: Date }>>([])
+  const [touchFeedback, setTouchFeedback] = useState<string>('')
+
+  const gestureElementRef = useRef<HTMLDivElement>(null)
+  const optimizationElementRef = useRef<HTMLDivElement>(null)
+  const mobileTouchElementRef = useRef<HTMLDivElement>(null)
+
+  const device = useDevice()
+
+  // Gesture recognition hook
+  const {
+    isGestureActive,
+    currentGestureType,
+    resetGestureState
+  } = useGestures(gestureElementRef, {
+    onSwipe: (gesture: any) => {
+      const gestureInfo = {
+        type: 'Swipe',
+        details: `${gesture.direction} - ${gesture.distance.toFixed(0)}px, ${gesture.velocity.toFixed(1)}px/ms`,
+        timestamp: new Date()
+      }
+      setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
+    },
+    onPinch: (gesture: any) => {
+      const gestureInfo = {
+        type: 'Pinch',
+        details: `Scale: ${gesture.scale.toFixed(2)}, Distance: ${gesture.distance.toFixed(0)}px`,
+        timestamp: new Date()
+      }
+      setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
+    },
+    onTap: (position: any) => {
+      const gestureInfo = {
+        type: 'Tap',
+        details: `Position: (${position.x}, ${position.y})`,
+        timestamp: new Date()
+      }
+      setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
+    },
+    onLongPress: (position: any) => {
+      const gestureInfo = {
+        type: 'Long Press',
+        details: `Position: (${position.x}, ${position.y})`,
+        timestamp: new Date()
+      }
+      setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
+    }
+  })
+
+  // Touch optimization hook
+  const {
+    optimizationState,
+    performanceMetrics,
+    applyOptimizations,
+    resetOptimizations
+  } = useTouchOptimization(optimizationElementRef, {
+    onTouchPerformanceWarning: (metrics: any) => {
+      console.warn('Touch performance warning:', metrics)
+    },
+    onBatteryOptimization: (enabled: any) => {
+      console.log('Battery optimization:', enabled ? 'enabled' : 'disabled')
+    }
+  })
+
+  // Mobile touch hook
+  const {
+    mobileTouchState,
+    clearAllGestureHints,
+    getTouchFeedbackClasses
+  } = useMobileTouch(mobileTouchElementRef, {
+    onTouchFeedback: (state: any) => {
+      setTouchFeedback(`${state.feedbackType} feedback - ${state.feedbackIntensity} intensity`)
+    },
+    onGestureHint: (hint: any) => {
+      console.log('Gesture hint:', hint)
+    }
+  })
+
+  const clearGestureHistory = () => {
+    setGestureHistory([])
+    resetGestureState()
+  }
+
+  const getPerformanceScoreColor = (score: string) => {
+    switch (score) {
+      case 'excellent': return 'text-green-600'
+      case 'good': return 'text-blue-600'
+      case 'fair': return 'text-yellow-600'
+      case 'poor': return 'text-red-600'
+      default: return 'text-gray-600'
+    }
+  }
+
+  const getBatteryImpactColor = (impact: string) => {
+    switch (impact) {
+      case 'low': return 'text-green-600'
+      case 'medium': return 'text-yellow-600'
+      case 'high': return 'text-red-600'
+      default: return 'text-gray-600'
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Tab Navigation */}
+      <div className="flex flex-wrap gap-2">
+        {[
+          { id: 'overview', label: 'Overview', icon: '📱' },
+          { id: 'gestures', label: 'Gesture Recognition', icon: '👆' },
+          { id: 'optimization', label: 'Touch Optimization', icon: '⚡' },
+          { id: 'mobile', label: 'Mobile Touch', icon: '📱' }
+        ].map((tab) => (
+          <Button
+            key={tab.id}
+            variant={activeTab === tab.id ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setActiveTab(tab.id as any)}
+            className="touch-button"
+          >
+            {tab.icon} {tab.label}
+          </Button>
+        ))}
+      </div>
+
+      {/* Overview Tab */}
+      {activeTab === 'overview' && (
+        <div className="space-y-4">
+          <Card className="touch-card">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                🎯 Touch Optimization & Gesture Support
+                <Badge variant="outline">Story 5 Implementation</Badge>
+              </CardTitle>
+              <CardDescription>
+                Comprehensive touch optimization system with gesture recognition, performance monitoring, and mobile-first interactions
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <h4 className="font-semibold">Device Information</h4>
+                  <div className="text-sm space-y-1">
+                    <p>Screen Size: <Badge variant="secondary">{device.screenSize}</Badge></p>
+                    <p>Touch Device: <Badge variant="secondary">{device.touchDevice ? 'Yes' : 'No'}</Badge></p>
+                    <p>Orientation: <Badge variant="secondary">{device.orientation}</Badge></p>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <h4 className="font-semibold">Touch Capabilities</h4>
+                  <div className="text-sm space-y-1">
+                    <p>Max Touch Points: <Badge variant="secondary">{mobileTouchState.deviceCapabilities.maxTouchPoints}</Badge></p>
+                    <p>Haptic Support: <Badge variant="secondary">{mobileTouchState.deviceCapabilities.supportsHaptics ? 'Yes' : 'No'}</Badge></p>
+                    <p>Audio Support: <Badge variant="secondary">{mobileTouchState.deviceCapabilities.supportsAudio ? 'Yes' : 'No'}</Badge></p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="text-center p-4 bg-gray-50 rounded-lg">
+                  <div className="text-2xl mb-2">👆</div>
+                  <h4 className="font-semibold">Gesture Recognition</h4>
+                  <p className="text-sm text-gray-600">Swipe, pinch, tap, and long press detection</p>
+                </div>
+                <div className="text-center p-4 bg-gray-50 rounded-lg">
+                  <div className="text-2xl mb-2">⚡</div>
+                  <h4 className="font-semibold">Performance Optimization</h4>
+                  <p className="text-sm text-gray-600">Touch event optimization and battery awareness</p>
+                </div>
+                <div className="text-center p-4 bg-gray-50 rounded-lg">
+                  <div className="text-2xl mb-2">📱</div>
+                  <h4 className="font-semibold">Mobile Touch</h4>
+                  <p className="text-sm text-gray-600">Touch feedback, haptics, and gesture hints</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Gesture Recognition Tab */}
+      {activeTab === 'gestures' && (
+        <div className="space-y-4">
+          <Card className="touch-card">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                👆 Gesture Recognition
+                <Badge variant={isGestureActive ? 'default' : 'secondary'}>
+                  {isGestureActive ? 'Active' : 'Inactive'}
+                </Badge>
+              </CardTitle>
+              <CardDescription>
+                Test gesture recognition on the interactive area below. Try swiping, pinching, tapping, and long pressing.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex gap-2">
+                <Button onClick={resetGestureState} variant="outline" size="sm">
+                  Reset Gestures
+                </Button>
+                <Button onClick={clearGestureHistory} variant="outline" size="sm">
+                  Clear History
+                </Button>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                {/* Interactive Gesture Area */}
+                <div
+                  ref={gestureElementRef}
+                  className="min-h-[300px] border-2 border-dashed border-gray-300 rounded-lg p-4 flex items-center justify-center bg-gray-50 touch-target"
+                  style={{ touchAction: 'manipulation' }}
+                >
+                  <div className="text-center">
+                    <div className="text-4xl mb-2">👆</div>
+                    <p className="font-medium">Gesture Test Area</p>
+                    <p className="text-sm text-gray-600">
+                      {currentGestureType !== 'none' ? `Current: ${currentGestureType}` : 'Touch to start'}
+                    </p>
+                    <p className="text-xs text-gray-500 mt-2">
+                      Swipe, pinch, tap, or long press here
+                    </p>
+                  </div>
+                </div>
+
+                {/* Gesture History */}
+                <div className="space-y-2">
+                  <h4 className="font-semibold">Gesture History</h4>
+                  <div className="max-h-[300px] overflow-y-auto space-y-2">
+                    {gestureHistory.length === 0 ? (
+                      <p className="text-gray-500 text-sm">No gestures detected yet</p>
+                    ) : (
+                      gestureHistory.map((gesture, index) => (
+                        <div key={index} className="p-2 bg-gray-50 rounded text-sm">
+                          <div className="flex justify-between items-start">
+                            <span className="font-medium">{gesture.type}</span>
+                            <span className="text-xs text-gray-500">
+                              {gesture.timestamp.toLocaleTimeString()}
+                            </span>
+                          </div>
+                          <p className="text-gray-600">{gesture.details}</p>
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Touch Optimization Tab */}
+      {activeTab === 'optimization' && (
+        <div className="space-y-4">
+          <Card className="touch-card">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                ⚡ Touch Optimization
+                <Badge variant={optimizationState.isOptimized ? 'default' : 'secondary'}>
+                  {optimizationState.isOptimized ? 'Optimized' : 'Not Optimized'}
+                </Badge>
+              </CardTitle>
+              <CardDescription>
+                Monitor touch performance and apply optimizations for better user experience.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex gap-2">
+                <Button onClick={applyOptimizations} variant="default" size="sm">
+                  Apply Optimizations
+                </Button>
+                <Button onClick={resetOptimizations} variant="outline" size="sm">
+                  Reset Optimizations
+                </Button>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                {/* Optimization Status */}
+                <div className="space-y-3">
+                  <h4 className="font-semibold">Optimization Status</h4>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span>Touch Action:</span>
+                      <Badge variant="outline">{optimizationState.currentTouchAction}</Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Passive Listeners:</span>
+                      <Badge variant={optimizationState.passiveListenersEnabled ? 'default' : 'secondary'}>
+                        {optimizationState.passiveListenersEnabled ? 'Enabled' : 'Disabled'}
+                      </Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Battery Optimization:</span>
+                      <Badge variant={optimizationState.batteryOptimizationEnabled ? 'default' : 'secondary'}>
+                        {optimizationState.batteryOptimizationEnabled ? 'Enabled' : 'Disabled'}
+                      </Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Throttling:</span>
+                      <Badge variant={optimizationState.throttlingEnabled ? 'default' : 'secondary'}>
+                        {optimizationState.throttlingEnabled ? 'Enabled' : 'Disabled'}
+                      </Badge>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Performance Metrics */}
+                <div className="space-y-3">
+                  <h4 className="font-semibold">Performance Metrics</h4>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span>Touch Events:</span>
+                      <span>{performanceMetrics.touchEventCount}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Avg Duration:</span>
+                      <span>{performanceMetrics.averageTouchDuration.toFixed(1)}ms</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Latency:</span>
+                      <span>{performanceMetrics.touchEventLatency.toFixed(1)}ms</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Performance:</span>
+                      <span className={getPerformanceScoreColor(performanceMetrics.performanceScore)}>
+                        {performanceMetrics.performanceScore}
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Battery Impact:</span>
+                      <span className={getBatteryImpactColor(performanceMetrics.batteryImpact)}>
+                        {performanceMetrics.batteryImpact}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Test Area */}
+              <div
+                ref={optimizationElementRef}
+                className="min-h-[200px] border-2 border-dashed border-gray-300 rounded-lg p-4 flex items-center justify-center bg-gray-50 touch-target"
+                style={{ touchAction: optimizationState.currentTouchAction }}
+              >
+                <div className="text-center">
+                  <div className="text-2xl mb-2">⚡</div>
+                  <p className="font-medium">Optimization Test Area</p>
+                  <p className="text-sm text-gray-600">
+                    Touch here to test optimizations
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Mobile Touch Tab */}
+      {activeTab === 'mobile' && (
+        <div className="space-y-4">
+          <Card className="touch-card">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                📱 Mobile Touch Behaviors
+                <Badge variant={mobileTouchState.isActive ? 'default' : 'secondary'}>
+                  {mobileTouchState.isActive ? 'Active' : 'Inactive'}
+                </Badge>
+              </CardTitle>
+              <CardDescription>
+                Experience mobile touch feedback, haptics, and gesture hints.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex gap-2">
+                <Button onClick={clearAllGestureHints} variant="outline" size="sm">
+                  Clear Hints
+                </Button>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                {/* Touch Feedback Status */}
+                <div className="space-y-3">
+                  <h4 className="font-semibold">Touch Feedback Status</h4>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span>Touch Count:</span>
+                      <Badge variant="outline">{mobileTouchState.touchCount}</Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Feedback Type:</span>
+                      <Badge variant="outline">{mobileTouchState.currentFeedback.feedbackType}</Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Intensity:</span>
+                      <Badge variant="outline">{mobileTouchState.currentFeedback.feedbackIntensity}</Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Active Hints:</span>
+                      <Badge variant="outline">{mobileTouchState.activeGestureHints.length}</Badge>
+                    </div>
+                  </div>
+                  {touchFeedback && (
+                    <div className="p-2 bg-blue-50 border border-blue-200 rounded text-sm">
+                      {touchFeedback}
+                    </div>
+                  )}
+                </div>
+
+                {/* Active Gesture Hints */}
+                <div className="space-y-3">
+                  <h4 className="font-semibold">Active Gesture Hints</h4>
+                  <div className="max-h-[200px] overflow-y-auto space-y-2">
+                    {mobileTouchState.activeGestureHints.length === 0 ? (
+                      <p className="text-gray-500 text-sm">No active hints</p>
+                    ) : (
+                      mobileTouchState.activeGestureHints.map((hint: any, index: number) => (
+                        <div key={index} className="p-2 bg-yellow-50 border border-yellow-200 rounded text-sm">
+                          <div className="flex justify-between items-start">
+                            <span className="font-medium">{hint.type}</span>
+                            <span className="text-xs text-gray-500">
+                              {new Date(hint.timeout).toLocaleTimeString()}
+                            </span>
+                          </div>
+                          <p className="text-gray-600">{hint.message}</p>
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* Mobile Touch Test Area */}
+              <div
+                ref={mobileTouchElementRef}
+                className={`min-h-[300px] border-2 border-dashed border-gray-300 rounded-lg p-4 flex items-center justify-center bg-gray-50 touch-target ${getTouchFeedbackClasses()}`}
+              >
+                <div className="text-center">
+                  <div className="text-4xl mb-2">📱</div>
+                  <p className="font-medium">Mobile Touch Test Area</p>
+                  <p className="text-sm text-gray-600">
+                    {mobileTouchState.isActive ? 'Touch active' : 'Touch to start'}
+                  </p>
+                  <p className="text-xs text-gray-500 mt-2">
+                    Experience haptic feedback and touch sounds
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  )
+}