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

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

@@ -5,9 +5,9 @@ import { Badge } from './badge'
 import { useGestures, useTouchOptimization, useMobileTouch } from '../../hooks'
 import { useDevice } from '../../hooks/use-device'
 
-export const TouchDemo= () => {
+export const TouchDemo: React.FC = () => {
   const [activeTab, setActiveTab] = useState<'overview' | 'gestures' | 'optimization' | 'mobile'>('overview')
-  const [gestureHistory, setGestureHistory] = useState<Array<{ type; details; timestamp}>>([])
+  const [gestureHistory, setGestureHistory] = useState<Array<{ type: string; details: any; timestamp: Date }>>([])
   const [touchFeedback, setTouchFeedback] = useState<string>('')
   
   const gestureElementRef = useRef<HTMLDivElement>(null)
@@ -22,35 +22,35 @@ export const TouchDemo= () => {
     currentGestureType,
     resetGestureState
   } = useGestures(gestureElementRef, {
-    onSwipe) => {
+    onSwipe: (gesture: any) => {
       const gestureInfo = {
-        type,
-        details} - ${gesture.distance.toFixed(0)}px, ${gesture.velocity.toFixed(1)}px/ms`,
-        timestamp)
+        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) => {
+    onPinch: (gesture: any) => {
       const gestureInfo = {
-        type,
-        details)}, Distance)}px`,
-        timestamp)
+        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) => {
+    onTap: (position: any) => {
       const gestureInfo = {
-        type,
-        details}, ${position.y})`,
-        timestamp)
+        type: 'Tap',
+        details: `Position: (${position.x}, ${position.y})`,
+        timestamp: new Date()
       }
       setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
     },
-    onLongPress) => {
+    onLongPress: (position: any) => {
       const gestureInfo = {
-        type,
-        details}, ${position.y})`,
-        timestamp)
+        type: 'Long Press',
+        details: `Position: (${position.x}, ${position.y})`,
+        timestamp: new Date()
       }
       setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
     }
@@ -63,11 +63,11 @@ export const TouchDemo= () => {
     applyOptimizations,
     resetOptimizations
   } = useTouchOptimization(optimizationElementRef, {
-    onTouchPerformanceWarning) => {
-      console.warn('Touch performance warning, metrics)
+    onTouchPerformanceWarning: (metrics: any) => {
+      console.warn('Touch performance warning:', metrics)
     },
-    onBatteryOptimization) => {
-      console.log('Battery optimization, enabled ? 'enabled' )
+    onBatteryOptimization: (enabled: any) => {
+      console.log('Battery optimization:', enabled ? 'enabled' : 'disabled')
     }
   })
 
@@ -77,11 +77,11 @@ export const TouchDemo= () => {
     clearAllGestureHints,
     getTouchFeedbackClasses
   } = useMobileTouch(mobileTouchElementRef, {
-    onTouchFeedback) => {
+    onTouchFeedback: (state: any) => {
       setTouchFeedback(`${state.feedbackType} feedback - ${state.feedbackIntensity} intensity`)
     },
-    onGestureHint) => {
-      console.log('Gesture hint, hint)
+    onGestureHint: (hint: any) => {
+      console.log('Gesture hint:', hint)
     }
   })
 
@@ -90,14 +90,23 @@ export const TouchDemo= () => {
     resetGestureState()
   }
 
-  const getPerformanceScoreColor = (score) => {
+  const getPerformanceScoreColor = (score: string) => {
     switch (score) {
-      case 'excellent'}
+      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) => {
+  const getBatteryImpactColor = (impact: string) => {
     switch (impact) {
-      case 'low'}
+      case 'low': return 'text-green-600'
+      case 'medium': return 'text-yellow-600'
+      case 'high': return 'text-red-600'
+      default: return 'text-gray-600'
+    }
   }
 
   return (
@@ -105,14 +114,14 @@ export const TouchDemo= () => {
       {/* Tab Navigation */}
       <div className="flex flex-wrap gap-2">
         {[
-          { id, label, icon},
-          { id, label, icon},
-          { id, label, icon},
-          { id, label, icon}
+          { 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' }
+            variant={activeTab === tab.id ? 'default' : 'outline'}
             size="sm"
             onClick={() => setActiveTab(tab.id as any)}
             className="touch-button"
@@ -136,25 +145,27 @@ export const TouchDemo= () => {
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="grid grid-cols-1 md="space-y-2">
+              <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="secondary">{device.screenSize}</Badge></p>
-                    <p>Touch Device="secondary">{device.touchDevice ? 'Yes' }</Badge></p>
-                    <p>Orientation="secondary">{device.orientation}</Badge></p>
+                    <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="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>
+                    <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="text-center p-4 bg-gray-50 rounded-lg">
+              <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>
@@ -182,8 +193,8 @@ export const TouchDemo= () => {
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 👆 Gesture Recognition
-                <Badge variant={isGestureActive ? 'default' }>
-                  {isGestureActive ? 'Active' }
+                <Badge variant={isGestureActive ? 'default' : 'secondary'}>
+                  {isGestureActive ? 'Active' : 'Inactive'}
                 </Badge>
               </CardTitle>
               <CardDescription>
@@ -200,17 +211,18 @@ export const TouchDemo= () => {
                 </Button>
               </div>
 
-              <div className="grid grid-cols-1 lg}
+              <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}}
+                  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 !== 'none' ? `Current: ${currentGestureType}` : 'Touch to start'}
                     </p>
                     <p className="text-xs text-gray-500 mt-2">
                       Swipe, pinch, tap, or long press here
@@ -224,7 +236,8 @@ export const TouchDemo= () => {
                   <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) => (
+                    ) : (
+                      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>
@@ -251,8 +264,8 @@ export const TouchDemo= () => {
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 ⚡ Touch Optimization
-                <Badge variant={optimizationState.isOptimized ? 'default' }>
-                  {optimizationState.isOptimized ? 'Optimized' }
+                <Badge variant={optimizationState.isOptimized ? 'default' : 'secondary'}>
+                  {optimizationState.isOptimized ? 'Optimized' : 'Not Optimized'}
                 </Badge>
               </CardTitle>
               <CardDescription>
@@ -269,26 +282,31 @@ export const TouchDemo= () => {
                 </Button>
               </div>
 
-              <div className="grid grid-cols-1 lg}
+              <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="outline">{optimizationState.currentTouchAction}</Badge>
+                      <span>Touch Action:</span>
+                      <Badge variant="outline">{optimizationState.currentTouchAction}</Badge>
                     </div>
                     <div className="flex justify-between">
-                      <span>Passive Listeners={optimizationState.passiveListenersEnabled ? 'default' }>
-                        {optimizationState.passiveListenersEnabled ? 'Enabled' }
+                      <span>Passive Listeners:</span>
+                      <Badge variant={optimizationState.passiveListenersEnabled ? 'default' : 'secondary'}>
+                        {optimizationState.passiveListenersEnabled ? 'Enabled' : 'Disabled'}
                       </Badge>
                     </div>
                     <div className="flex justify-between">
-                      <span>Battery Optimization={optimizationState.batteryOptimizationEnabled ? 'default' }>
-                        {optimizationState.batteryOptimizationEnabled ? 'Enabled' }
+                      <span>Battery Optimization:</span>
+                      <Badge variant={optimizationState.batteryOptimizationEnabled ? 'default' : 'secondary'}>
+                        {optimizationState.batteryOptimizationEnabled ? 'Enabled' : 'Disabled'}
                       </Badge>
                     </div>
                     <div className="flex justify-between">
-                      <span>Throttling={optimizationState.throttlingEnabled ? 'default' }>
-                        {optimizationState.throttlingEnabled ? 'Enabled' }
+                      <span>Throttling:</span>
+                      <Badge variant={optimizationState.throttlingEnabled ? 'default' : 'secondary'}>
+                        {optimizationState.throttlingEnabled ? 'Enabled' : 'Disabled'}
                       </Badge>
                     </div>
                   </div>
@@ -299,21 +317,26 @@ export const TouchDemo= () => {
                   <h4 className="font-semibold">Performance Metrics</h4>
                   <div className="space-y-2 text-sm">
                     <div className="flex justify-between">
-                      <span>Touch Events}</span>
+                      <span>Touch Events:</span>
+                      <span>{performanceMetrics.touchEventCount}</span>
                     </div>
                     <div className="flex justify-between">
-                      <span>Avg Duration)}ms</span>
+                      <span>Avg Duration:</span>
+                      <span>{performanceMetrics.averageTouchDuration.toFixed(1)}ms</span>
                     </div>
                     <div className="flex justify-between">
-                      <span>Latency)}ms</span>
+                      <span>Latency:</span>
+                      <span>{performanceMetrics.touchEventLatency.toFixed(1)}ms</span>
                     </div>
                     <div className="flex justify-between">
-                      <span>Performance={getPerformanceScoreColor(performanceMetrics.performanceScore)}>
+                      <span>Performance:</span>
+                      <span className={getPerformanceScoreColor(performanceMetrics.performanceScore)}>
                         {performanceMetrics.performanceScore}
                       </span>
                     </div>
                     <div className="flex justify-between">
-                      <span>Battery Impact={getBatteryImpactColor(performanceMetrics.batteryImpact)}>
+                      <span>Battery Impact:</span>
+                      <span className={getBatteryImpactColor(performanceMetrics.batteryImpact)}>
                         {performanceMetrics.batteryImpact}
                       </span>
                     </div>
@@ -325,7 +348,7 @@ export const TouchDemo= () => {
               <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}}
+                style={{ touchAction: optimizationState.currentTouchAction }}
               >
                 <div className="text-center">
                   <div className="text-2xl mb-2">⚡</div>
@@ -347,8 +370,8 @@ export const TouchDemo= () => {
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 📱 Mobile Touch Behaviors
-                <Badge variant={mobileTouchState.isActive ? 'default' }>
-                  {mobileTouchState.isActive ? 'Active' }
+                <Badge variant={mobileTouchState.isActive ? 'default' : 'secondary'}>
+                  {mobileTouchState.isActive ? 'Active' : 'Inactive'}
                 </Badge>
               </CardTitle>
               <CardDescription>
@@ -362,21 +385,26 @@ export const TouchDemo= () => {
                 </Button>
               </div>
 
-              <div className="grid grid-cols-1 lg}
+              <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="outline">{mobileTouchState.touchCount}</Badge>
+                      <span>Touch Count:</span>
+                      <Badge variant="outline">{mobileTouchState.touchCount}</Badge>
                     </div>
                     <div className="flex justify-between">
-                      <span>Feedback Type="outline">{mobileTouchState.currentFeedback.feedbackType}</Badge>
+                      <span>Feedback Type:</span>
+                      <Badge variant="outline">{mobileTouchState.currentFeedback.feedbackType}</Badge>
                     </div>
                     <div className="flex justify-between">
-                      <span>Intensity="outline">{mobileTouchState.currentFeedback.feedbackIntensity}</Badge>
+                      <span>Intensity:</span>
+                      <Badge variant="outline">{mobileTouchState.currentFeedback.feedbackIntensity}</Badge>
                     </div>
                     <div className="flex justify-between">
-                      <span>Active Hints="outline">{mobileTouchState.activeGestureHints.length}</Badge>
+                      <span>Active Hints:</span>
+                      <Badge variant="outline">{mobileTouchState.activeGestureHints.length}</Badge>
                     </div>
                   </div>
                   {touchFeedback && (
@@ -392,7 +420,8 @@ export const TouchDemo= () => {
                   <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) => (
+                    ) : (
+                      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>
@@ -417,7 +446,7 @@ export const TouchDemo= () => {
                   <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' }
+                    {mobileTouchState.isActive ? 'Touch active' : 'Touch to start'}
                   </p>
                   <p className="text-xs text-gray-500 mt-2">
                     Experience haptic feedback and touch sounds