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

package/dist/components/ui/advanced-transition-system-demo.js

@@ -0,0 +1,624 @@
+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= () => {
+  const [activeDemo, setActiveDemo] = useState<'transitions' | 'performance' | 'device' | 'accessibility'>('transitions')
+  const [formData, setFormData] = useState({
+    name,
+    email,
+    message})
+
+  const { transitionState, performanceMetrics, isOptimizing, optimizations } = useAdvancedTransitionSystem({
+    duration,
+    easing,
+    performance,
+    deviceOptimization,
+    accessibility,
+    batteryAware}, {
+    onTransitionStart) => {
+      console.log('Transition started, config)
+    },
+    onTransitionComplete) => {
+      console.log('Transition completed in, duration, 'ms')
+    },
+    onPerformanceOptimized) => {
+      console.log('Performance optimized, metrics)
+    },
+    onDeviceOptimized) => {
+      console.log('Device optimized for, deviceType)
+    },
+    onAccessibilityEnhanced) => {
+      console.log('Accessibility enhanced, feature)
+    }
+  })
+
+  const handleInputChange = (field, value) => {
+    setFormData(prev => ({ ...prev, [field]}))
+  }
+
+  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="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="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="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="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' = 45 ? 'text-cs-warning' }`}>
+                  {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' = 45 ? 'bg-cs-warning' }`}
+                  style={{ width) * 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' = 60 ? 'text-cs-warning' }`}>
+                  {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' = 60 ? 'text-cs-warning' }`}>
+                  {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' = 60 ? 'text-cs-warning' }`}>
+                {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' = 60 ? 'bg-cs-warning' }`}
+                  style={{ width}%` }}
+                />
+              </div>
+              
+              <div className="text-sm text-cs-text-secondary">
+                {transitionState.performanceScore >= 80 ? 'Excellent Performance' = 60 ? 'Good Performance' }
+              </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="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="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' === 'low' ? 'secondary' }
+                  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' }>
+                  {transitionState.reducedMotion ? 'Enabled' }
+                </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>
+            ) ="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>
+
+      {/* 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={transitionState.deviceType === 'mobile' ? 200 }
+            easing="ease-out"
+            className="text-center"
+          >
+            <div className="text-lg font-semibold">Mobile Optimized</div>
+            <div className="text-sm text-cs-text-secondary">
+              Duration=== 'mobile' ? '200ms' }
+            </div>
+          </AdvancedTransitionCard>
+          
+          <AdvancedTransitionCard
+            duration={transitionState.deviceType === 'tablet' ? 250 }
+            easing="ease-out"
+            className="text-center"
+          >
+            <div className="text-lg font-semibold">Tablet Optimized</div>
+            <div className="text-sm text-cs-text-secondary">
+              Duration=== 'tablet' ? '250ms' }
+            </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)
+
+  const renderAccessibilityDemo = () => (
+    <div className="space-y-6">
+      {/* Accessibility Features */}
+      <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="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' }>
+                  {transitionState.reducedMotion ? 'Supported' }
+                </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' }
+                </div>
+                <div className="text-sm text-cs-text-secondary">
+                  {transitionState.reducedMotion 
+                    ? 'Transitions are disabled for accessibility' 
+                    }
+                </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={transitionState.reducedMotion ? 0 }
+            easing="ease-out"
+            variant="default"
+            size="default"
+            aria-label="Test button with accessibility support"
+          >
+            Test Button
+          </AdvancedTransitionButton>
+          
+          <AdvancedTransitionInput
+            duration={transitionState.reducedMotion ? 0 }
+            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, 
+          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'
+                }`}
+          >
+            {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="outline" className="capitalize">
+              {transitionState.deviceType}
+            </Badge>
+            <span className="font-medium">Battery={
+                transitionState.batteryLevel === 'normal' ? 'default' === 'low' ? 'secondary' }
+              className="capitalize"
+            >
+              {transitionState.batteryLevel}
+            </Badge>
+          </div>
+          
+          <div className="flex items-center space-x-4">
+            <span className="font-medium">Performance={`font-bold ${
+              transitionState.performanceScore >= 80 ? 'text-cs-success' = 60 ? 'text-cs-warning' }`}>
+              {transitionState.performanceScore}%
+            </span>
+            <span className="font-medium">Motion={transitionState.reducedMotion ? 'outline' }>
+              {transitionState.reducedMotion ? 'Reduced' }
+            </Badge>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}