@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

package/src/components/ui/touch-friendly-interface-demo.tsx

@@ -0,0 +1,522 @@
+'use client'
+
+import * as React from 'react';
+import { useState } from 'react';
+import { Badge } from './badge.js'
+import { Input } from './input.js'
+import { Button } from './button.js'
+import { Card, CardContent } from './card.js'
+import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface.js'
+
+export const TouchFriendlyInterfaceDemo: React.FC = () => {
+  const [activeDemo, setActiveDemo] = useState<'targets' | 'interactions' | 'performance' | 'accessibility'>('targets')
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: ''
+  })
+  const [toggleState, setToggleState] = useState(false)
+  const [sliderValue, setSliderValue] = useState(50)
+
+  const { touchTargetState, touchInteractionState, isOptimizing, optimizations } = useTouchFriendlyInterface({
+    minSize: 44,
+    spacing: 'default',
+    feedback: 'scale',
+    performance: true,
+    accessibility: true
+  }, {
+    onTouchTargetOptimized: (config) => {
+      console.log('Touch target optimized:', config)
+    },
+    onTouchInteractionDetected: (interaction) => {
+      console.log('Touch interaction detected:', interaction)
+    },
+    onPerformanceOptimized: (score) => {
+      console.log('Performance optimized:', score)
+    },
+    onAccessibilityEnhanced: (feature) => {
+      console.log('Accessibility enhanced:', feature)
+    }
+  })
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }))
+  }
+
+  const renderTargetComplianceDemo = () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">44px Target Compliance</h3>
+          
+          <div className="space-y-3">
+            <Button size="sm" className="touch-target touch-friendly-button touch-interaction touch-performance min-h-[44px] min-w-[44px]">
+              Small Button (44px)
+            </Button>
+            
+            <Button size="default" variant="secondary" className="touch-target touch-friendly-button-secondary touch-interaction touch-performance min-h-[48px] min-w-[48px]">
+              Default Button (48px)
+            </Button>
+            
+            <Button size="lg" variant="outline" className="touch-target touch-interaction touch-performance min-h-[56px] min-w-[56px] bg-transparent border border-cs-border text-cs-text-primary hover:bg-cs-hover-bg">
+              Large Button (56px)
+            </Button>
+            
+            <Button size="lg" variant="ghost" className="touch-target touch-interaction touch-performance min-h-[64px] min-w-[64px] bg-transparent text-cs-text-primary hover:bg-cs-hover-bg">
+              Extra Large Button (64px)
+            </Button>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">Touch-Friendly Inputs</h3>
+          
+          <div className="space-y-3">
+            <Input
+              placeholder="Small Input (44px)"
+              value={formData.name}
+              onChange={(e) => handleInputChange('name', e.target.value)}
+              className="touch-target touch-friendly-input touch-interaction touch-performance min-h-[44px] min-w-[44px] px-3 py-2 text-sm"
+            />
+            
+            <Input
+              placeholder="Default Input (48px)"
+              value={formData.email}
+              onChange={(e) => handleInputChange('email', e.target.value)}
+              className="touch-target touch-friendly-input touch-interaction touch-performance min-h-[48px] min-w-[48px] px-4 py-3 text-base"
+            />
+            
+            <Input
+              placeholder="Large Input (56px)"
+              value={formData.message}
+              onChange={(e) => handleInputChange('message', e.target.value)}
+              className="touch-target touch-friendly-input touch-interaction touch-performance min-h-[56px] min-w-[56px] px-6 py-4 text-lg"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">Interactive Cards</h3>
+          
+          <div className="space-y-3">
+            <Card className="touch-target touch-friendly-card touch-interaction touch-performance touch-feedback min-h-[44px] min-w-[44px] p-3 cursor-pointer">
+              <CardContent className="text-center">
+                <div className="text-lg font-semibold">Small Card</div>
+                <div className="text-sm text-cs-text-secondary">44px target</div>
+              </CardContent>
+            </Card>
+            
+            <Card className="touch-target touch-friendly-card touch-interaction touch-performance touch-ripple min-h-[48px] min-w-[48px] p-4 cursor-pointer">
+              <CardContent className="text-center">
+                <div className="text-lg font-semibold">Default Card</div>
+                <div className="text-sm text-cs-text-secondary">48px target</div>
+              </CardContent>
+            </Card>
+            
+            <Card className="touch-target touch-friendly-card touch-interaction touch-performance touch-state-hover touch-state-active min-h-[56px] min-w-[56px] p-6 cursor-pointer">
+              <CardContent className="text-center">
+                <div className="text-lg font-semibold">Large Card</div>
+                <div className="text-sm text-cs-text-secondary">56px target</div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">Form Controls</h3>
+          
+          <div className="space-y-4">
+            <div className="flex items-center space-x-3">
+              <button
+                type="button"
+                role="switch"
+                aria-checked={toggleState}
+                onClick={() => setToggleState(!toggleState)}
+                className="touch-target touch-interaction touch-performance touch-feedback relative inline-flex items-center justify-center rounded-full transition-colors min-h-[48px] min-w-[48px] focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2"
+                style={{
+                  backgroundColor: toggleState ? 'var(--cs-primary)' : 'var(--cs-border)'
+                }}
+              >
+                <span
+                  className="inline-block rounded-full bg-white shadow transform transition-transform w-6 h-6"
+                  style={{
+                    transform: toggleState ? 'translateX(24px)' : 'translateX(0)'
+                  }}
+                />
+              </button>
+              <span className="text-sm">Toggle Switch</span>
+            </div>
+            
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Slider Value: {sliderValue}</label>
+              <input
+                type="range"
+                value={sliderValue}
+                onChange={(e) => setSliderValue(Number(e.target.value))}
+                min={0}
+                max={100}
+                step={1}
+                className="touch-target touch-interaction touch-performance touch-feedback w-full h-2 bg-cs-border rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-cs-primary min-h-[48px]"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
+  const renderTouchInteractionsDemo = () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">Touch State</h3>
+          
+          <div className="space-y-3">
+            <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+              <div className="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <span className="font-medium">Touching:</span>
+                  <span className={`ml-2 ${touchInteractionState.isTouching ? 'text-cs-success' : 'text-cs-text-secondary'}`}>
+                    {touchInteractionState.isTouching ? 'Yes' : 'No'}
+                  </span>
+                </div>
+                <div>
+                  <span className="font-medium">Touch Count:</span>
+                  <span className="ml-2 text-cs-text-primary">{touchInteractionState.touchCount}</span>
+                </div>
+                <div>
+                  <span className="font-medium">Duration:</span>
+                  <span className="ml-2 text-cs-text-primary">{touchInteractionState.touchDuration.toFixed(0)}ms</span>
+                </div>
+                <div>
+                  <span className="font-medium">Velocity:</span>
+                  <span className="ml-2 text-cs-text-primary">{touchInteractionState.touchVelocity.toFixed(2)}px/ms</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">Gesture Detection</h3>
+          
+          <div className="space-y-3">
+            <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+              <div className="text-center">
+                <div className="text-2xl font-bold text-cs-primary mb-2">
+                  {touchInteractionState.gestureType === 'none' ? '👆' : 
+                   touchInteractionState.gestureType === 'tap' ? '👆' :
+                   touchInteractionState.gestureType === 'double-tap' ? '👆👆' :
+                   touchInteractionState.gestureType === 'long-press' ? '⏰' :
+                   touchInteractionState.gestureType === 'swipe' ? '👈👉' : '🤏'}
+                </div>
+                <div className="text-lg font-semibold capitalize">
+                  {touchInteractionState.gestureType.replace('-', ' ')}
+                </div>
+                <div className="text-sm text-cs-text-secondary">
+                  {touchInteractionState.gestureType === 'none' ? 'Touch to detect gesture' :
+                   touchInteractionState.gestureType === 'tap' ? 'Quick touch detected' :
+                   touchInteractionState.gestureType === 'double-tap' ? 'Double touch detected' :
+                   touchInteractionState.gestureType === 'long-press' ? 'Long press detected' :
+                   touchInteractionState.gestureType === 'swipe' ? 'Swipe gesture detected' : 'Pinch detected'}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-cs-text-primary">Touch Coordinates</h3>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+            <h4 className="font-medium mb-2">Start Position</h4>
+            <div className="text-sm space-y-1">
+              <div>X: {touchInteractionState.touchStartX}px</div>
+              <div>Y: {touchInteractionState.touchStartY}px</div>
+            </div>
+          </div>
+          
+          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+            <h4 className="font-medium mb-2">Current Position</h4>
+            <div className="text-sm space-y-1">
+              <div>X: {touchInteractionState.touchCurrentX}px</div>
+              <div>Y: {touchInteractionState.touchCurrentY}px</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
+  const renderPerformanceDemo = () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">Performance Metrics</h3>
+          
+          <div className="space-y-3">
+            <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+              <div className="space-y-3">
+                <div className="flex justify-between items-center">
+                  <span className="text-sm font-medium">Performance Score</span>
+                  <span className={`text-lg font-bold ${
+                    touchTargetState.performanceScore >= 80 ? 'text-cs-success' :
+                    touchTargetState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'
+                  }`}>
+                    {touchTargetState.performanceScore}/100
+                  </span>
+                </div>
+                
+                <div className="w-full bg-cs-border rounded-full h-2">
+                  <div 
+                    className={`h-2 rounded-full transition-all duration-300 ${
+                      touchTargetState.performanceScore >= 80 ? 'bg-cs-success' :
+                      touchTargetState.performanceScore >= 60 ? 'bg-cs-warning' : 'bg-cs-error'
+                    }`}
+                    style={{ width: `${touchTargetState.performanceScore}%` }}
+                  />
+                </div>
+                
+                <div className="text-xs text-cs-text-secondary">
+                  {touchTargetState.performanceScore >= 80 ? 'Excellent performance' :
+                   touchTargetState.performanceScore >= 60 ? 'Good performance' : 'Needs optimization'}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">Touch Target Status</h3>
+          
+          <div className="space-y-3">
+            <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+              <div className="space-y-2">
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">Target Size</span>
+                  <span className="font-medium">{touchTargetState.size}px</span>
+                </div>
+                
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">Compliance</span>
+                  <span className={`font-medium ${touchTargetState.size >= 44 ? 'text-cs-success' : 'text-cs-error'}`}>
+                    {touchTargetState.size >= 44 ? '✅ Compliant' : '❌ Non-compliant'}
+                  </span>
+                </div>
+                
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">Spacing</span>
+                  <span className="font-medium capitalize">{touchTargetState.spacing}</span>
+                </div>
+                
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">Feedback</span>
+                  <span className="font-medium capitalize">{touchTargetState.feedback}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-cs-text-primary">Optimizations</h3>
+        
+        <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+          {isOptimizing ? (
+            <div className="text-center py-4">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-cs-primary mx-auto mb-2"></div>
+              <div className="text-sm text-cs-text-secondary">Optimizing touch targets...</div>
+            </div>
+          ) : optimizations.length > 0 ? (
+            <div className="space-y-2">
+              {optimizations.map((optimization, index) => (
+                <div key={index} className="flex items-center space-x-2 text-sm">
+                  <span className="text-cs-success">✅</span>
+                  <span>{optimization}</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-4 text-cs-text-secondary">
+              No optimizations applied yet
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+
+  const renderAccessibilityDemo = () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">Accessibility Features</h3>
+          
+          <div className="space-y-3">
+            <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+              <div className="space-y-2">
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">ARIA Support</span>
+                  <span className={`font-medium ${touchTargetState.isAccessible ? 'text-cs-success' : 'text-cs-warning'}`}>
+                    {touchTargetState.isAccessible ? '✅ Enabled' : '⚠️ Disabled'}
+                  </span>
+                </div>
+                
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">Focus Management</span>
+                  <span className="font-medium text-cs-success">✅ Enabled</span>
+                </div>
+                
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">Screen Reader</span>
+                  <span className="font-medium text-cs-success">✅ Supported</span>
+                </div>
+                
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">Keyboard Nav</span>
+                  <span className="font-medium text-cs-success">✅ Supported</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">Touch Standards</h3>
+          
+          <div className="space-y-3">
+            <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+              <div className="space-y-2">
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">44px Minimum</span>
+                  <span className={`font-medium ${touchTargetState.size >= 44 ? 'text-cs-success' : 'text-cs-error'}`}>
+                    {touchTargetState.size >= 44 ? '✅ Met' : '❌ Not Met'}
+                  </span>
+                </div>
+                
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">Touch Action</span>
+                  <span className="font-medium text-cs-success">✅ Optimized</span>
+                </div>
+                
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">Tap Highlight</span>
+                  <span className="font-medium text-cs-success">✅ Disabled</span>
+                </div>
+                
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">User Select</span>
+                  <span className="font-medium text-cs-success">✅ Disabled</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-cs-text-primary">Interactive Test</h3>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Button
+            size="default"
+            className="touch-target touch-friendly-button touch-interaction touch-performance touch-feedback min-h-[48px] min-w-[48px]"
+            aria-label="Test button with scale feedback"
+          >
+            Scale Feedback
+          </Button>
+          
+          <Button
+            size="default"
+            variant="secondary"
+            className="touch-target touch-friendly-button-secondary touch-interaction touch-performance touch-ripple min-h-[48px] min-w-[48px]"
+            aria-label="Test button with ripple feedback"
+          >
+            Ripple Feedback
+          </Button>
+          
+          <Button
+            size="default"
+            variant="outline"
+            className="touch-target touch-interaction touch-performance touch-state-hover touch-state-active min-h-[48px] min-w-[48px] bg-transparent border border-cs-border text-cs-text-primary hover:bg-cs-hover-bg"
+            aria-label="Test button with color feedback"
+          >
+            Color Feedback
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="text-center space-y-2">
+        <h2 className="text-2xl font-bold text-cs-text-primary">
+          Touch-Friendly Interface & 44px Target Compliance
+        </h2>
+        <p className="text-cs-text-secondary">
+          Advanced touch interface system with accessibility compliance and performance optimization
+        </p>
+      </div>
+
+      {/* Navigation Tabs */}
+      <div className="flex flex-wrap gap-2 justify-center">
+        {(['targets', 'interactions', 'performance', 'accessibility'] as const).map((demo) => (
+          <button
+            key={demo}
+            onClick={() => setActiveDemo(demo)}
+            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+              activeDemo === demo
+                ? 'bg-cs-primary text-white'
+                : 'bg-cs-surface-bg text-cs-text-primary hover:bg-cs-hover-bg'
+            }`}
+          >
+            {demo === 'targets' && '🎯 Target Compliance'}
+            {demo === 'interactions' && '👆 Touch Interactions'}
+            {demo === 'performance' && '⚡ Performance'}
+            {demo === 'accessibility' && '♿ Accessibility'}
+          </button>
+        ))}
+      </div>
+
+      {/* Demo Content */}
+      <div className="min-h-[400px]">
+        {activeDemo === 'targets' && renderTargetComplianceDemo()}
+        {activeDemo === 'interactions' && renderTouchInteractionsDemo()}
+        {activeDemo === 'performance' && renderPerformanceDemo()}
+        {activeDemo === 'accessibility' && renderAccessibilityDemo()}
+      </div>
+
+      {/* Status Bar */}
+      <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+        <div className="flex flex-wrap items-center justify-between gap-4 text-sm">
+          <div className="flex items-center space-x-4">
+            <span className="font-medium">Status:</span>
+            <Badge variant={touchTargetState.isOptimized ? 'default' : 'secondary'}>
+              {touchTargetState.isOptimized ? 'Optimized' : 'Optimizing...'}
+            </Badge>
+            <Badge variant={touchTargetState.isAccessible ? 'default' : 'secondary'}>
+              {touchTargetState.isAccessible ? 'Accessible' : 'Enhancing...'}
+            </Badge>
+          </div>
+          
+          <div className="flex items-center space-x-4">
+            <span className="font-medium">Performance:</span>
+            <span className={`font-bold ${
+              touchTargetState.performanceScore >= 80 ? 'text-cs-success' :
+              touchTargetState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'
+            }`}>
+              {touchTargetState.performanceScore}%
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}