@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/components/ui/advanced-transition-system-demo.tsx

@@ -0,0 +1,670 @@
+import React, { useState } from 'react'
+import { Badge } from './badge'
+import { useAdvancedTransitionSystem } from '../../hooks/use-advanced-transition-system'
+import {
+  AdvancedTransitionButton,
+  AdvancedTransitionCard,
+  AdvancedTransitionInput,
+  AdvancedTransitionList
+} from './advanced-transition-system'
+
+export const AdvancedTransitionSystemDemo: React.FC = () => {
+  const [activeDemo, setActiveDemo] = useState<'transitions' | 'performance' | 'device' | 'accessibility'>('transitions')
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: ''
+  })
+
+  const { transitionState, performanceMetrics, isOptimizing, optimizations } = useAdvancedTransitionSystem({
+    duration: 300,
+    easing: 'ease-out',
+    performance: true,
+    deviceOptimization: true,
+    accessibility: true,
+    batteryAware: true
+  }, {
+    onTransitionStart: (config) => {
+      console.log('Transition started:', config)
+    },
+    onTransitionComplete: (duration) => {
+      console.log('Transition completed in:', duration, 'ms')
+    },
+    onPerformanceOptimized: (metrics) => {
+      console.log('Performance optimized:', metrics)
+    },
+    onDeviceOptimized: (deviceType) => {
+      console.log('Device optimized for:', deviceType)
+    },
+    onAccessibilityEnhanced: (feature) => {
+      console.log('Accessibility enhanced:', feature)
+    }
+  })
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }))
+  }
+
+  const renderTransitionsDemo = () => (
+    <div className="space-y-8">
+      {/* Cubic Bezier Curves Showcase */}
+      <div className="space-y-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary">🎨 Cubic Bezier Curves</h3>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="space-y-4">
+            <h4 className="font-medium text-cs-text-primary">Standard Easing</h4>
+            
+            <div className="space-y-3">
+              <AdvancedTransitionButton
+                duration={300}
+                easing="ease-out"
+                variant="default"
+                size="default"
+              >
+                Ease Out (Standard)
+              </AdvancedTransitionButton>
+              
+              <AdvancedTransitionButton
+                duration={300}
+                easing="ease-in"
+                variant="secondary"
+                size="default"
+              >
+                Ease In
+              </AdvancedTransitionButton>
+              
+              <AdvancedTransitionButton
+                duration={300}
+                easing="ease-in-out"
+                variant="outline"
+                size="default"
+              >
+                Ease In Out
+              </AdvancedTransitionButton>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <h4 className="font-medium text-cs-text-primary">Advanced Easing</h4>
+            
+            <div className="space-y-3">
+              <AdvancedTransitionButton
+                duration={300}
+                easing="ease-out-quint"
+                variant="default"
+                size="default"
+              >
+                Ease Out Quint
+              </AdvancedTransitionButton>
+              
+              <AdvancedTransitionButton
+                duration={300}
+                easing="ease-out-expo"
+                variant="secondary"
+                size="default"
+              >
+                Ease Out Expo
+              </AdvancedTransitionButton>
+              
+              <AdvancedTransitionButton
+                duration={300}
+                easing="ease-out-circ"
+                variant="outline"
+                size="default"
+              >
+                Ease Out Circ
+              </AdvancedTransitionButton>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Transition Durations */}
+      <div className="space-y-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary">⏱️ Transition Durations</h3>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="space-y-4">
+            <h4 className="font-medium text-cs-text-primary">Fast Transitions</h4>
+            
+            <div className="space-y-3">
+              <AdvancedTransitionButton
+                duration={75}
+                easing="ease-out"
+                variant="default"
+                size="sm"
+              >
+                75ms (Ultra Fast)
+              </AdvancedTransitionButton>
+              
+              <AdvancedTransitionButton
+                duration={150}
+                easing="ease-out"
+                variant="secondary"
+                size="sm"
+              >
+                150ms (Fast)
+              </AdvancedTransitionButton>
+              
+              <AdvancedTransitionButton
+                duration={200}
+                easing="ease-out"
+                variant="outline"
+                size="sm"
+              >
+                200ms (Quick)
+              </AdvancedTransitionButton>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <h4 className="font-medium text-cs-text-primary">Slow Transitions</h4>
+            
+            <div className="space-y-3">
+              <AdvancedTransitionButton
+                duration={500}
+                easing="ease-out"
+                variant="default"
+                size="lg"
+              >
+                500ms (Slow)
+              </AdvancedTransitionButton>
+              
+              <AdvancedTransitionButton
+                duration={700}
+                easing="ease-out"
+                variant="secondary"
+                size="lg"
+              >
+                700ms (Slower)
+              </AdvancedTransitionButton>
+              
+              <AdvancedTransitionButton
+                duration={1000}
+                easing="ease-out"
+                variant="outline"
+                size="lg"
+              >
+                1000ms (Very Slow)
+              </AdvancedTransitionButton>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Interactive Components */}
+      <div className="space-y-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary">🎭 Interactive Components</h3>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="space-y-4">
+            <h4 className="font-medium text-cs-text-primary">Interactive Cards</h4>
+            
+            <div className="space-y-3">
+              <AdvancedTransitionCard
+                duration={300}
+                easing="ease-out"
+                interactive
+              >
+                <div className="text-center">
+                  <div className="text-lg font-semibold">Interactive Card</div>
+                  <div className="text-sm text-cs-text-secondary">Click to trigger transition</div>
+                </div>
+              </AdvancedTransitionCard>
+              
+              <AdvancedTransitionCard
+                duration={500}
+                easing="ease-out-quint"
+                interactive
+              >
+                <div className="text-center">
+                  <div className="text-lg font-semibold">Quint Easing</div>
+                  <div className="text-sm text-cs-text-secondary">Smooth shadow transition</div>
+                </div>
+              </AdvancedTransitionCard>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <h4 className="font-medium text-cs-text-primary">Form Inputs</h4>
+            
+            <div className="space-y-3">
+              <AdvancedTransitionInput
+                duration={200}
+                easing="ease-out"
+                placeholder="Focus to trigger transition"
+                value={formData.name}
+                onChange={(e) => handleInputChange('name', e.target.value)}
+              />
+              
+              <AdvancedTransitionInput
+                duration={300}
+                easing="ease-out-quint"
+                placeholder="Quint easing on focus"
+                value={formData.email}
+                onChange={(e) => handleInputChange('email', e.target.value)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Staggered Animations */}
+      <div className="space-y-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary">🎬 Staggered Animations</h3>
+        
+        <AdvancedTransitionList
+          duration={300}
+          easing="ease-out"
+          staggerDelay={100}
+        >
+          <li className="p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-1">
+            Item 1 - Fades in first
+          </li>
+          <li className="p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-2">
+            Item 2 - Fades in second
+          </li>
+          <li className="p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-3">
+            Item 3 - Fades in third
+          </li>
+          <li className="p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-4">
+            Item 4 - Fades in fourth
+          </li>
+          <li className="p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-5">
+            Item 5 - Fades in last
+          </li>
+        </AdvancedTransitionList>
+      </div>
+    </div>
+  )
+
+  const renderPerformanceDemo = () => (
+    <div className="space-y-6">
+      {/* Performance Metrics */}
+      <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="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">Frame Rate</span>
+                <span className={`text-lg font-bold ${
+                  performanceMetrics.frameRate >= 55 ? 'text-cs-success' :
+                  performanceMetrics.frameRate >= 45 ? 'text-cs-warning' : 'text-cs-error'
+                }`}>
+                  {performanceMetrics.frameRate} FPS
+                </span>
+              </div>
+              
+              <div className="w-full bg-cs-border rounded-full h-2">
+                <div 
+                  className={`h-2 rounded-full transition-all duration-300 ${
+                    performanceMetrics.frameRate >= 55 ? 'bg-cs-success' :
+                    performanceMetrics.frameRate >= 45 ? 'bg-cs-warning' : 'bg-cs-error'
+                  }`}
+                  style={{ width: `${(performanceMetrics.frameRate / 60) * 100}%` }}
+                />
+              </div>
+              
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-medium">Memory Usage</span>
+                <span className="font-medium">{performanceMetrics.memoryUsage}%</span>
+              </div>
+              
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-medium">Smoothness</span>
+                <span className={`font-medium ${
+                  performanceMetrics.smoothness >= 80 ? 'text-cs-success' :
+                  performanceMetrics.smoothness >= 60 ? 'text-cs-warning' : 'text-cs-error'
+                }`}>
+                  {performanceMetrics.smoothness}%
+                </span>
+              </div>
+              
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-medium">Battery Impact</span>
+                <span className={`font-medium ${
+                  performanceMetrics.batteryImpact >= 80 ? 'text-cs-success' :
+                  performanceMetrics.batteryImpact >= 60 ? 'text-cs-warning' : 'text-cs-error'
+                }`}>
+                  {performanceMetrics.batteryImpact}%
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">🎯 Performance Score</h3>
+          
+          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+            <div className="text-center space-y-3">
+              <div className={`text-4xl font-bold ${
+                transitionState.performanceScore >= 80 ? 'text-cs-success' :
+                transitionState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'
+              }`}>
+                {transitionState.performanceScore}/100
+              </div>
+              
+              <div className="w-full bg-cs-border rounded-full h-3">
+                <div 
+                  className={`h-3 rounded-full transition-all duration-300 ${
+                    transitionState.performanceScore >= 80 ? 'bg-cs-success' :
+                    transitionState.performanceScore >= 60 ? 'bg-cs-warning' : 'bg-cs-error'
+                  }`}
+                  style={{ width: `${transitionState.performanceScore}%` }}
+                />
+              </div>
+              
+              <div className="text-sm text-cs-text-secondary">
+                {transitionState.performanceScore >= 80 ? 'Excellent Performance' :
+                 transitionState.performanceScore >= 60 ? 'Good Performance' : 'Needs Optimization'}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Hardware Acceleration */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-cs-text-primary">🚀 Hardware Acceleration</h3>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border text-center">
+            <div className="text-2xl mb-2">⚡</div>
+            <div className="font-medium">GPU Acceleration</div>
+            <div className="text-sm text-cs-text-secondary">Hardware-accelerated transforms</div>
+          </div>
+          
+          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border text-center">
+            <div className="text-2xl mb-2">💾</div>
+            <div className="font-medium">Memory Optimization</div>
+            <div className="text-sm text-cs-text-secondary">Efficient memory usage</div>
+          </div>
+          
+          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border text-center">
+            <div className="text-2xl mb-2">🔋</div>
+            <div className="font-medium">Battery Aware</div>
+            <div className="text-sm text-cs-text-secondary">Optimized for battery life</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
+  const renderDeviceDemo = () => (
+    <div className="space-y-6">
+      {/* Device Detection */}
+      <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">📱 Device Detection</h3>
+          
+          <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">Current Device</span>
+                <Badge variant="default" className="capitalize">
+                  {transitionState.deviceType}
+                </Badge>
+              </div>
+              
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-medium">Battery Level</span>
+                <Badge 
+                  variant={
+                    transitionState.batteryLevel === 'normal' ? 'default' :
+                    transitionState.batteryLevel === 'low' ? 'secondary' : 'outline'
+                  }
+                  className="capitalize"
+                >
+                  {transitionState.batteryLevel}
+                </Badge>
+              </div>
+              
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-medium">Reduced Motion</span>
+                <Badge variant={transitionState.reducedMotion ? 'outline' : 'default'}>
+                  {transitionState.reducedMotion ? 'Enabled' : 'Disabled'}
+                </Badge>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">⚙️ Device 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 for device...</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>
+
+      {/* Device-Specific Transitions */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-cs-text-primary">🎯 Device-Specific Transitions</h3>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <AdvancedTransitionCard
+            duration={transitionState.deviceType === 'mobile' ? 200 : 300}
+            easing="ease-out"
+            className="text-center"
+          >
+            <div className="text-lg font-semibold">Mobile Optimized</div>
+            <div className="text-sm text-cs-text-secondary">
+              Duration: {transitionState.deviceType === 'mobile' ? '200ms' : '300ms'}
+            </div>
+          </AdvancedTransitionCard>
+          
+          <AdvancedTransitionCard
+            duration={transitionState.deviceType === 'tablet' ? 250 : 300}
+            easing="ease-out"
+            className="text-center"
+          >
+            <div className="text-lg font-semibold">Tablet Optimized</div>
+            <div className="text-sm text-cs-text-secondary">
+              Duration: {transitionState.deviceType === 'tablet' ? '250ms' : '300ms'}
+            </div>
+          </AdvancedTransitionCard>
+          
+          <AdvancedTransitionCard
+            duration={300}
+            easing="ease-out"
+            className="text-center"
+          >
+            <div className="text-lg font-semibold">Desktop Optimized</div>
+            <div className="text-sm text-cs-text-secondary">
+              Duration: 300ms
+            </div>
+          </AdvancedTransitionCard>
+        </div>
+      </div>
+    </div>
+  )
+
+  const renderAccessibilityDemo = () => (
+    <div className="space-y-6">
+      {/* Accessibility Features */}
+      <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="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">Reduced Motion</span>
+                <Badge variant={transitionState.reducedMotion ? 'default' : 'secondary'}>
+                  {transitionState.reducedMotion ? 'Supported' : 'Not Detected'}
+                </Badge>
+              </div>
+              
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-medium">Screen Reader</span>
+                <Badge variant="default">Supported</Badge>
+              </div>
+              
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-medium">Focus Management</span>
+                <Badge variant="default">Enabled</Badge>
+              </div>
+              
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-medium">ARIA Support</span>
+                <Badge variant="default">Full</Badge>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-cs-text-primary">🎭 Motion Preferences</h3>
+          
+          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+            <div className="space-y-3">
+              <div className="text-center">
+                <div className="text-2xl mb-2">
+                  {transitionState.reducedMotion ? '🚫' : '✨'}
+                </div>
+                <div className="font-medium">
+                  {transitionState.reducedMotion ? 'Reduced Motion' : 'Full Motion'}
+                </div>
+                <div className="text-sm text-cs-text-secondary">
+                  {transitionState.reducedMotion 
+                    ? 'Transitions are disabled for accessibility' 
+                    : 'All transitions are enabled'}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Accessibility Test */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-cs-text-primary">🧪 Accessibility Test</h3>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <AdvancedTransitionButton
+            duration={transitionState.reducedMotion ? 0 : 300}
+            easing="ease-out"
+            variant="default"
+            size="default"
+            aria-label="Test button with accessibility support"
+          >
+            Test Button
+          </AdvancedTransitionButton>
+          
+          <AdvancedTransitionInput
+            duration={transitionState.reducedMotion ? 0 : 200}
+            easing="ease-out"
+            placeholder="Test input accessibility"
+            aria-label="Test input with accessibility support"
+          />
+        </div>
+        
+        <div className="text-sm text-cs-text-secondary">
+          <strong>Note:</strong> If you have reduced motion enabled in your system preferences, 
+          transitions will be automatically disabled for better accessibility.
+        </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">
+          Advanced Transition System with Cubic Bezier Curves
+        </h2>
+        <p className="text-cs-text-secondary">
+          Professional animation system with performance optimization, device-specific behavior, and accessibility support
+        </p>
+      </div>
+
+      {/* Navigation Tabs */}
+      <div className="flex flex-wrap gap-2 justify-center">
+        {(['transitions', 'performance', 'device', '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 === 'transitions' && '🎨 Transitions'}
+            {demo === 'performance' && '📊 Performance'}
+            {demo === 'device' && '📱 Device'}
+            {demo === 'accessibility' && '♿ Accessibility'}
+          </button>
+        ))}
+      </div>
+
+      {/* Demo Content */}
+      <div className="min-h-[400px]">
+        {activeDemo === 'transitions' && renderTransitionsDemo()}
+        {activeDemo === 'performance' && renderPerformanceDemo()}
+        {activeDemo === 'device' && renderDeviceDemo()}
+        {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">Device:</span>
+            <Badge variant="outline" className="capitalize">
+              {transitionState.deviceType}
+            </Badge>
+            <span className="font-medium">Battery:</span>
+            <Badge 
+              variant={
+                transitionState.batteryLevel === 'normal' ? 'default' :
+                transitionState.batteryLevel === 'low' ? 'secondary' : 'outline'
+              }
+              className="capitalize"
+            >
+              {transitionState.batteryLevel}
+            </Badge>
+          </div>
+          
+          <div className="flex items-center space-x-4">
+            <span className="font-medium">Performance:</span>
+            <span className={`font-bold ${
+              transitionState.performanceScore >= 80 ? 'text-cs-success' :
+              transitionState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'
+            }`}>
+              {transitionState.performanceScore}%
+            </span>
+            <span className="font-medium">Motion:</span>
+            <Badge variant={transitionState.reducedMotion ? 'outline' : 'default'}>
+              {transitionState.reducedMotion ? 'Reduced' : 'Full'}
+            </Badge>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}