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

package/dist/components/ui/touch-friendly-interface-demo.js

@@ -0,0 +1,481 @@
+import React, { useState } from 'react'
+import { Badge } from './badge'
+import { Input } from './input'
+import { Button } from './button'
+import { Card, CardContent } from './card'
+import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface'
+
+export const TouchFriendlyInterfaceDemo= () => {
+  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,
+    spacing,
+    feedback,
+    performance,
+    accessibility}, {
+    onTouchTargetOptimized) => {
+      console.log('Touch target optimized, config)
+    },
+    onTouchInteractionDetected) => {
+      console.log('Touch interaction detected, interaction)
+    },
+    onPerformanceOptimized) => {
+      console.log('Performance optimized, score)
+    },
+    onAccessibilityEnhanced) => {
+      console.log('Accessibility enhanced, feature)
+    }
+  })
+
+  const handleInputChange = (field, value) => {
+    setFormData(prev => ({ ...prev, [field]}))
+  }
+
+  const renderTargetComplianceDemo = () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md="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)
+            </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)
+            </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="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={{
+                  backgroundColor)' )'
+                }}
+              >
+                <span
+                  className="inline-block rounded-full bg-white shadow transform transition-transform w-6 h-6"
+                  style={{
+                    transform)' )'
+                  }}
+                />
+              </button>
+              <span className="text-sm">Toggle Switch</span>
+            </div>
+            
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Slider Value}</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]"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
+  const renderTouchInteractionsDemo = () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md="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={`ml-2 ${touchInteractionState.isTouching ? 'text-cs-success' }`}>
+                    {touchInteractionState.isTouching ? 'Yes' }
+                  </span>
+                </div>
+                <div>
+                  <span className="font-medium">Touch Count="ml-2 text-cs-text-primary">{touchInteractionState.touchCount}</span>
+                </div>
+                <div>
+                  <span className="font-medium">Duration="ml-2 text-cs-text-primary">{touchInteractionState.touchDuration.toFixed(0)}ms</span>
+                </div>
+                <div>
+                  <span className="font-medium">Velocity="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' ? '👆' === 'tap' ? '👆' === 'double-tap' ? '👆👆' === 'long-press' ? '⏰' === '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' === 'tap' ? 'Quick touch detected' === 'double-tap' ? 'Double touch detected' === 'long-press' ? 'Long press detected' === 'swipe' ? 'Swipe gesture 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="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}px</div>
+              <div>Y}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}px</div>
+              <div>Y}px</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
+  const renderPerformanceDemo = () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md="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' = 60 ? 'text-cs-warning' }`}>
+                    {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' = 60 ? 'bg-cs-warning' }`}
+                    style={{ width}%` }}
+                  />
+                </div>
+                
+                <div className="text-xs text-cs-text-secondary">
+                  {touchTargetState.performanceScore >= 80 ? 'Excellent performance' = 60 ? 'Good performance' }
+                </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' }`}>
+                    {touchTargetState.size >= 44 ? '✅ 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>
+          ) ="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>
+          ) ="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="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' }`}>
+                    {touchTargetState.isAccessible ? '✅ Enabled' }
+                  </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' }`}>
+                    {touchTargetState.size >= 44 ? '✅ 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="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="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'
+                }`}
+          >
+            {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={touchTargetState.isOptimized ? 'default' }>
+              {touchTargetState.isOptimized ? 'Optimized' }
+            </Badge>
+            <Badge variant={touchTargetState.isAccessible ? 'default' }>
+              {touchTargetState.isAccessible ? 'Accessible' }
+            </Badge>
+          </div>
+          
+          <div className="flex items-center space-x-4">
+            <span className="font-medium">Performance={`font-bold ${
+              touchTargetState.performanceScore >= 80 ? 'text-cs-success' = 60 ? 'text-cs-warning' }`}>
+              {touchTargetState.performanceScore}%
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}