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

package/dist/components/ui/touch-demo.esm.js

@@ -0,0 +1,433 @@
+import React, { useState, useRef } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
+import { Button } from './button'
+import { Badge } from './badge'
+import { useGestures, useTouchOptimization, useMobileTouch } from '../../hooks'
+import { useDevice } from '../../hooks/use-device'
+
+export const TouchDemo= () => {
+  const [activeTab, setActiveTab] = useState<'overview' | 'gestures' | 'optimization' | 'mobile'>('overview')
+  const [gestureHistory, setGestureHistory] = useState<Array<{ type; details; timestamp}>>([])
+  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) => {
+      const gestureInfo = {
+        type,
+        details} - ${gesture.distance.toFixed(0)}px, ${gesture.velocity.toFixed(1)}px/ms`,
+        timestamp)
+      }
+      setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
+    },
+    onPinch) => {
+      const gestureInfo = {
+        type,
+        details)}, Distance)}px`,
+        timestamp)
+      }
+      setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
+    },
+    onTap) => {
+      const gestureInfo = {
+        type,
+        details}, ${position.y})`,
+        timestamp)
+      }
+      setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
+    },
+    onLongPress) => {
+      const gestureInfo = {
+        type,
+        details}, ${position.y})`,
+        timestamp)
+      }
+      setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
+    }
+  })
+
+  // Touch optimization hook
+  const {
+    optimizationState,
+    performanceMetrics,
+    applyOptimizations,
+    resetOptimizations
+  } = useTouchOptimization(optimizationElementRef, {
+    onTouchPerformanceWarning) => {
+      console.warn('Touch performance warning, metrics)
+    },
+    onBatteryOptimization) => {
+      console.log('Battery optimization, enabled ? 'enabled' )
+    }
+  })
+
+  // Mobile touch hook
+  const {
+    mobileTouchState,
+    clearAllGestureHints,
+    getTouchFeedbackClasses
+  } = useMobileTouch(mobileTouchElementRef, {
+    onTouchFeedback) => {
+      setTouchFeedback(`${state.feedbackType} feedback - ${state.feedbackIntensity} intensity`)
+    },
+    onGestureHint) => {
+      console.log('Gesture hint, hint)
+    }
+  })
+
+  const clearGestureHistory = () => {
+    setGestureHistory([])
+    resetGestureState()
+  }
+
+  const getPerformanceScoreColor = (score) => {
+    switch (score) {
+      case 'excellent'}
+  }
+
+  const getBatteryImpactColor = (impact) => {
+    switch (impact) {
+      case 'low'}
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Tab Navigation */}
+      <div className="flex flex-wrap gap-2">
+        {[
+          { id, label, icon},
+          { id, label, icon},
+          { id, label, icon},
+          { id, label, icon}
+        ].map((tab) => (
+          <Button
+            key={tab.id}
+            variant={activeTab === tab.id ? 'default' }
+            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="space-y-2">
+                  <h4 className="font-semibold">Device Information</h4>
+                  <div className="text-sm space-y-1">
+                    <p>Screen Size="secondary">{device.screenSize}</Badge></p>
+                    <p>Touch Device="secondary">{device.touchDevice ? 'Yes' }</Badge></p>
+                    <p>Orientation="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="secondary">{mobileTouchState.deviceCapabilities.maxTouchPoints}</Badge></p>
+                    <p>Haptic Support="secondary">{mobileTouchState.deviceCapabilities.supportsHaptics ? 'Yes' }</Badge></p>
+                    <p>Audio Support="secondary">{mobileTouchState.deviceCapabilities.supportsAudio ? 'Yes' }</Badge></p>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="grid grid-cols-1 md="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' }>
+                  {isGestureActive ? 'Active' }
+                </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}
+                <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}}
+                >
+                  <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}` }
+                    </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>
+                    ) , 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' }>
+                  {optimizationState.isOptimized ? '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}
+                <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="outline">{optimizationState.currentTouchAction}</Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Passive Listeners={optimizationState.passiveListenersEnabled ? 'default' }>
+                        {optimizationState.passiveListenersEnabled ? 'Enabled' }
+                      </Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Battery Optimization={optimizationState.batteryOptimizationEnabled ? 'default' }>
+                        {optimizationState.batteryOptimizationEnabled ? 'Enabled' }
+                      </Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Throttling={optimizationState.throttlingEnabled ? 'default' }>
+                        {optimizationState.throttlingEnabled ? 'Enabled' }
+                      </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>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Avg Duration)}ms</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Latency)}ms</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Performance={getPerformanceScoreColor(performanceMetrics.performanceScore)}>
+                        {performanceMetrics.performanceScore}
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Battery Impact={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}}
+              >
+                <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' }>
+                  {mobileTouchState.isActive ? 'Active' }
+                </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}
+                <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="outline">{mobileTouchState.touchCount}</Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Feedback Type="outline">{mobileTouchState.currentFeedback.feedbackType}</Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Intensity="outline">{mobileTouchState.currentFeedback.feedbackIntensity}</Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Active Hints="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>
+                    ) , index) => (
+                        <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' }
+                  </p>
+                  <p className="text-xs text-gray-500 mt-2">
+                    Experience haptic feedback and touch sounds
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  )
+}