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

package/dist/components/ui/semantic-input-system-demo.esm.js

@@ -0,0 +1,465 @@
+import React, { useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
+import { Button } from './button'
+import { Input } from './input'
+import { Label } from './label'
+import { Badge } from './badge'
+import { useSemanticInput } from '../../hooks/use-semantic-input'
+import { useMobileKeyboardOptimization } from '../../hooks/use-mobile-keyboard-optimization'
+import { useTouchFriendlyInput } from '../../hooks/use-touch-friendly-input'
+import { useInputPerformance } from '../../hooks/use-input-performance'
+import { useInputAccessibility } from '../../hooks/use-input-accessibility'
+
+export const SemanticInputSystemDemo= () => {
+  const [activeDemo, setActiveDemo] = useState<'semantic' | 'mobile' | 'touch' | 'performance' | 'accessibility'>('semantic')
+  const [formData, setFormData] = useState({
+    name,
+    email,
+    phone,
+    creditCard,
+    amount,
+    search})
+
+  // Initialize hooks with proper interfaces
+  const { semanticState, detectInputType, optimizeKeyboard } = useSemanticInput(
+    { type, autocomplete, inputMode, keyboardType},
+    {},
+    {
+      enableAutoDetection,
+      enableKeyboardOptimization,
+      enableAutocomplete}
+  )
+
+  const { keyboardState, optimizations, autoOptimizeForInputType } = useMobileKeyboardOptimization({
+    enableKeyboardDetection,
+    enablePerformanceMonitoring,
+    enableBatteryOptimization})
+
+  const { touchState, touchOptimizations, autoOptimizeTouch } = useTouchFriendlyInput({
+    enableTouchOptimization,
+    enablePerformanceMonitoring,
+    enableAccessibilitySupport})
+
+  const { performanceMetrics, autoOptimize } = useInputPerformance({
+    enablePerformanceMonitoring,
+    enableMemoryManagement,
+    enableBatteryOptimization})
+
+  const { accessibilityFeatures, enableARIASupport } = useInputAccessibility({
+    enableARIA,
+    enableKeyboardNavigation,
+    enableScreenReader,
+    enableFocusManagement})
+
+  const handleInputChange = (field, value) => {
+    setFormData(prev => ({ ...prev, [field]}))
+    
+    // Detect semantic type and optimize
+    const detectedType = detectInputType(value, field)
+    if (detectedType && detectedType.type !== 'text') {
+      optimizeKeyboard(detectedType)
+      autoOptimizeForInputType(detectedType.type)
+    }
+  }
+
+  const handleDemoChange = (demo) => {
+    setActiveDemo(demo)
+    
+    // Start relevant monitoring for the selected demo
+    switch (demo) {
+      case 'semantic')
+        break
+      case 'performance')
+        break
+      case 'accessibility'=== 'function') {
+          enableARIASupport()
+        }
+        break
+    }
+  }
+
+  const renderSemanticDemo = () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md="space-y-2">
+          <Label htmlFor="name">Full Name</Label>
+          <Input
+            id="name"
+            value={formData.name}
+            onChange={(e) => handleInputChange('name', e.target.value)}
+            placeholder="Enter your full name"
+            className="semantic-input"
+          />
+          <div className="text-sm text-gray-600">
+            Detected Type="secondary">{semanticState.detectedType?.type || 'text'}</Badge>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="email">Email Address</Label>
+          <Input
+            id="email"
+            type="email"
+            value={formData.email}
+            onChange={(e) => handleInputChange('email', e.target.value)}
+            placeholder="Enter your email"
+            className="semantic-input"
+          />
+          <div className="text-sm text-gray-600">
+            Keyboard="secondary">{semanticState.keyboardOptimized ? 'Optimized' }</Badge>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="phone">Phone Number</Label>
+          <Input
+            id="phone"
+            value={formData.phone}
+            onChange={(e) => handleInputChange('phone', e.target.value)}
+            placeholder="Enter your phone number"
+            className="semantic-input"
+          />
+          <div className="text-sm text-gray-600">
+            Autocomplete="secondary">{semanticState.autocompleteEnhanced ? 'Enhanced' }</Badge>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="creditCard">Credit Card</Label>
+          <Input
+            id="creditCard"
+            value={formData.creditCard}
+            onChange={(e) => handleInputChange('creditCard', e.target.value)}
+            placeholder="Enter credit card number"
+            className="semantic-input"
+          />
+          <div className="text-sm text-gray-600">
+            Touch="secondary">{semanticState.touchOptimized ? 'Optimized' }</Badge>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="amount">Amount</Label>
+          <Input
+            id="amount"
+            value={formData.amount}
+            onChange={(e) => handleInputChange('amount', e.target.value)}
+            placeholder="Enter amount"
+            className="semantic-input"
+          />
+          <div className="text-sm text-gray-600">
+            Performance="secondary">{semanticState.isOptimized ? 'Optimized' }</Badge>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="search">Search</Label>
+          <Input
+            id="search"
+            value={formData.search}
+            onChange={(e) => handleInputChange('search', e.target.value)}
+            placeholder="Search..."
+            className="semantic-input"
+          />
+          <div className="text-sm text-gray-600">
+            Type="secondary">{semanticState.detectedType?.type || 'text'}</Badge>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-gray-50 p-4 rounded-lg">
+        <h4 className="font-semibold mb-2">Semantic State</h4>
+        <pre className="text-xs text-gray-700 overflow-auto">
+          {JSON.stringify(semanticState, null, 2)}
+        </pre>
+      </div>
+    </div>
+  )
+
+  const renderMobileDemo = () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md="space-y-2">
+          <Label>Keyboard State</Label>
+          <div className="space-y-2 text-sm">
+            <div>Visible={keyboardState.isVisible ? 'default' }>{keyboardState.isVisible ? 'Yes' }</Badge></div>
+            <div>Height}px</div>
+            <div>Type="outline">{keyboardState.type}</Badge></div>
+            <div>Platform="outline">{keyboardState.platform}</Badge></div>
+            <div>Orientation="outline">{keyboardState.orientation}</Badge></div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label>Keyboard Optimizations</Label>
+          <div className="space-y-2">
+            {optimizations.map((opt, index) => (
+              <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
+                <span className="text-sm">{opt.name}</span>
+                <Badge variant={opt.applied ? 'default' }>
+                  {opt.applied ? 'Applied' }
+                </Badge>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-blue-50 p-4 rounded-lg">
+        <h4 className="font-semibold mb-2 text-blue-800">Mobile Keyboard Features</h4>
+        <ul className="text-sm text-blue-700 space-y-1">
+          <li>• Automatic keyboard type detection</li>
+          <li>• Platform-specific optimizations</li>
+          <li>• Orientation-aware adjustments</li>
+          <li>• Performance monitoring integration</li>
+          <li>• Battery optimization support</li>
+        </ul>
+      </div>
+    </div>
+  )
+
+  const renderTouchDemo = () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md="space-y-2">
+          <Label>Touch State</Label>
+          <div className="space-y-2 text-sm">
+            <div>Touching={touchState.isTouching ? 'default' }>{touchState.isTouching ? 'Yes' }</Badge></div>
+            <div>Touch Count}</div>
+            <div>Duration}ms</div>
+            <div>Velocity)}px/ms</div>
+            <div>Gesture="outline">{touchState.gestureType}</Badge></div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label>Touch Optimizations</Label>
+          <div className="space-y-2">
+            {touchOptimizations.map((opt, index) => (
+              <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
+                <span className="text-sm">{opt.name}</span>
+                <Badge variant={opt.applied ? 'default' }>
+                  {opt.applied ? 'Applied' }
+                </Badge>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-green-50 p-4 rounded-lg">
+        <h4 className="font-semibold mb-2 text-green-800">Touch-Friendly Features</h4>
+        <ul className="text-sm text-green-700 space-y-1">
+          <li>• 44px minimum touch targets</li>
+          <li>• Multi-touch gesture support</li>
+          <li>• Touch feedback and animations</li>
+          <li>• Performance monitoring</li>
+          <li>• Accessibility compliance</li>
+        </ul>
+      </div>
+    </div>
+  )
+
+  const renderPerformanceDemo = () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md="space-y-2">
+          <Label>Performance Metrics</Label>
+          <div className="space-y-2 text-sm">
+            <div>Frame Rate} FPS</div>
+            <div>Input Latency)}ms</div>
+            <div>Memory Usage}MB</div>
+            <div>Battery Level).toFixed(1)}%</div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label>Performance Status</Label>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-sm">Frame Rate</span>
+              <Badge variant={performanceMetrics.frameRate >= 60 ? 'default' }>
+                {performanceMetrics.frameRate >= 60 ? 'Optimal' }
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm">Input Latency</span>
+              <Badge variant={performanceMetrics.inputLatency < 16 ? 'default' }>
+                {performanceMetrics.inputLatency < 16 ? 'Optimal' }
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm">Memory</span>
+              <Badge variant={performanceMetrics.memoryUsage < 100 ? 'default' }>
+                {performanceMetrics.memoryUsage < 100 ? 'Optimal' }
+              </Badge>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-purple-50 p-4 rounded-lg">
+        <h4 className="font-semibold mb-2 text-purple-800">Performance Features</h4>
+        <ul className="text-sm text-purple-700 space-y-1">
+          <li>• Real-time performance monitoring</li>
+          <li>• Memory usage optimization</li>
+          <li>• Battery-conscious operations</li>
+          <li>• Frame rate optimization</li>
+          <li>• Input latency tracking</li>
+        </ul>
+      </div>
+    </div>
+  )
+
+  const renderAccessibilityDemo = () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md="space-y-2">
+          <Label>Accessibility Features</Label>
+          <div className="space-y-2">
+            {accessibilityFeatures.map((feature, index) => (
+              <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
+                <span className="text-sm">{feature.name}</span>
+                <Badge variant={feature.enabled ? 'default' }>
+                  {feature.enabled ? 'Enabled' }
+                </Badge>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label>Accessibility Score</Label>
+          <div className="text-center p-4 bg-blue-50 rounded-lg">
+            <div className="text-3xl font-bold text-blue-600">
+              {accessibilityFeatures.filter(f => f.enabled).length}/{accessibilityFeatures.length}
+            </div>
+            <div className="text-sm text-blue-700">Features Enabled</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-orange-50 p-4 rounded-lg">
+        <h4 className="font-semibold mb-2 text-orange-800">Accessibility Features</h4>
+        <ul className="text-sm text-orange-700 space-y-1">
+          <li>• ARIA labels and descriptions</li>
+          <li>• Keyboard navigation support</li>
+          <li>• Screen reader optimization</li>
+          <li>• Focus management</li>
+          <li>• High contrast support</li>
+        </ul>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="max-w-6xl mx-auto p-6 space-y-6">
+      <div className="text-center space-y-4">
+        <h1 className="text-4xl font-bold text-gray-900">
+          🎯 Story 12="text-xl text-gray-600 max-w-3xl mx-auto">
+          Advanced input system with semantic type detection, mobile keyboard optimization, 
+          touch-friendly behavior, performance monitoring, and accessibility support.
+        </p>
+        <div className="flex flex-wrap justify-center gap-2">
+          <Badge variant="default">Semantic Types</Badge>
+          <Badge variant="secondary">Mobile Keyboard</Badge>
+          <Badge variant="outline">Touch Optimization</Badge>
+          <Badge variant="destructive">Performance</Badge>
+          <Badge variant="default">Accessibility</Badge>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2 justify-center">
+        <Button
+          variant={activeDemo === 'semantic' ? 'default' }
+          onClick={() => handleDemoChange('semantic')}
+        >
+          🧠 Semantic Input
+        </Button>
+        <Button
+          variant={activeDemo === 'mobile' ? 'default' }
+          onClick={() => handleDemoChange('mobile')}
+        >
+          📱 Mobile Keyboard
+        </Button>
+        <Button
+          variant={activeDemo === 'touch' ? 'default' }
+          onClick={() => handleDemoChange('touch')}
+        >
+          👆 Touch Friendly
+        </Button>
+        <Button
+          variant={activeDemo === 'performance' ? 'default' }
+          onClick={() => handleDemoChange('performance')}
+        >
+          ⚡ Performance
+        </Button>
+        <Button
+          variant={activeDemo === 'accessibility' ? 'default' }
+          onClick={() => handleDemoChange('accessibility')}
+        >
+          ♿ Accessibility
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            {activeDemo === 'semantic' && '🧠 Semantic Input System'}
+            {activeDemo === 'mobile' && '📱 Mobile Keyboard Optimization'}
+            {activeDemo === 'touch' && '👆 Touch-Friendly Interface'}
+            {activeDemo === 'performance' && '⚡ Performance Monitoring'}
+            {activeDemo === 'accessibility' && '♿ Accessibility Features'}
+          </CardTitle>
+          <CardDescription>
+            {activeDemo === 'semantic' && 'Intelligent input type detection and mobile keyboard optimization'}
+            {activeDemo === 'mobile' && 'Platform-aware keyboard behavior and mobile-specific enhancements'}
+            {activeDemo === 'touch' && 'Touch-optimized interactions with 44px minimum targets'}
+            {activeDemo === 'performance' && 'Real-time performance monitoring and optimization'}
+            {activeDemo === 'accessibility' && 'Comprehensive accessibility support and compliance'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {activeDemo === 'semantic' && renderSemanticDemo()}
+          {activeDemo === 'mobile' && renderMobileDemo()}
+          {activeDemo === 'touch' && renderTouchDemo()}
+          {activeDemo === 'performance' && renderPerformanceDemo()}
+          {activeDemo === 'accessibility' && renderAccessibilityDemo()}
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 md="text-lg">🎯 Next Steps</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ul className="text-sm space-y-2">
+              <li>✅ Story 12]</li>
+              <li>🔧 Story 13="text-lg">🚀 Features</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ul className="text-sm space-y-2">
+              <li>• Semantic input type detection</li>
+              <li>• Mobile keyboard optimization</li>
+              <li>• Touch-friendly behavior</li>
+              <li>• Performance monitoring</li>
+              <li>• Accessibility compliance</li>
+            </ul>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">📊 Status</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <div className="flex justify-between">
+                <span className="text-sm">Components="default">6/6</Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-sm">Hooks="default">6/6</Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-sm">Tests="default">Passing</Badge>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}