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

package/dist/components/ui/battery-conscious-animation-demo.js

@@ -0,0 +1,533 @@
+import React, { useState, useCallback } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
+import { Badge } from './badge'
+import { Button } from './button'
+import { useBatteryAnimations } from '../../hooks/use-battery-animations'
+import { usePerformanceThrottling } from '../../hooks/use-performance-throttling'
+
+export const BatteryConsciousAnimationDemo= () => {
+  const [showBatteryInfo, setShowBatteryInfo] = useState(true)
+  const [showPerformanceInfo, setShowPerformanceInfo] = useState(true)
+  const [showAnimationDemo, setShowAnimationDemo] = useState(true)
+  const [showControls] = useState(true)
+
+  // Animation states
+  const [animationState, setAnimationState] = useState<'idle' | 'running' | 'paused'>('idle')
+  const [animationType, setAnimationType] = useState<'battery' | 'performance' | 'reduced-motion' | 'user-preference'>('battery')
+  const [animationComplexity, setAnimationComplexity] = useState<'low' | 'medium' | 'high'>('medium')
+
+  // Hooks
+  const batteryAnimations = useBatteryAnimations({
+    enableBatteryMonitoring,
+    enablePerformanceThrottling,
+    enableReducedMotion,
+    enableUserPreferences,
+    enableAutomaticOptimization}, {
+    onBatteryLevelChange, isLow) => console.log('Battery level changed, level, isLow),
+    onPerformanceWarning, shouldThrottle) => console.log('Performance warning, score, shouldThrottle),
+    onAnimationThrottled, reason) => console.log('Animation throttled, level, reason),
+    onUserPreferenceChange) => console.log('User preference changed, preference),
+    onReducedMotionChange) => console.log('Reduced motion changed, enabled)
+  })
+
+  const performanceThrottling = usePerformanceThrottling({
+    enablePerformanceMonitoring,
+    enableAutomaticThrottling,
+    enableUserExperienceOptimization,
+    enableBatteryPreservation}, {
+    onPerformanceWarning) => console.log('Performance warning, metrics),
+    onThrottlingApplied, reason) => console.log('Throttling applied, level, reason),
+    onPerformanceRecovery) => console.log('Performance recovery, metrics),
+    onUserExperienceOptimized) => console.log('User experience optimized, optimization)
+  })
+
+  // Animation controls
+  const startAnimation = useCallback(() => {
+    setAnimationState('running')
+    setTimeout(() => setAnimationState('idle'), 3000)
+  }, [])
+
+  const pauseAnimation = useCallback(() => {
+    setAnimationState('paused')
+  }, [])
+
+  const resumeAnimation = useCallback(() => {
+    setAnimationState('running')
+  }, [])
+
+  // Get animation classes based on current state
+  const getAnimationClasses = useCallback(() => {
+    const baseClasses = 'w-32 h-32 rounded-lg transition-all duration-1000 ease-in-out'
+    
+    // Base battery-conscious animation
+    let classes = `${baseClasses} battery-conscious-animation`
+    
+    // Add battery-specific classes
+    if (batteryAnimations.state.isCriticalBattery) {
+      classes += ' battery-critical-animation'
+    } else if (batteryAnimations.state.isLowBattery) {
+      classes += ' battery-optimized-animation'
+    }
+    
+    // Add performance throttling classes
+    if (performanceThrottling.throttleLevel === 'aggressive') {
+      classes += ' performance-throttled-aggressive'
+    } else if (performanceThrottling.throttleLevel === 'moderate') {
+      classes += ' performance-throttled-moderate'
+    } else if (performanceThrottling.throttleLevel === 'light') {
+      classes += ' performance-throttled-light'
+    }
+    
+    // Add complexity classes
+    if (animationComplexity === 'low') {
+      classes += ' animation-complexity-low'
+    } else if (animationComplexity === 'high') {
+      classes += ' animation-complexity-high'
+    }
+    
+    // Add user preference classes
+    classes += ` user-preference-${batteryAnimations.state.userPreference}`
+    
+    // Add performance optimization classes
+    if (performanceThrottling.metrics.performanceScore < 50) {
+      classes += ' performance-poor'
+    } else if (performanceThrottling.metrics.performanceScore < 70) {
+      classes += ' performance-fair'
+    }
+    
+    return classes
+  }, [batteryAnimations.state, performanceThrottling.throttleLevel, animationComplexity])
+
+  // Get animation styles based on state
+  const getAnimationStyles = useCallback(() => {
+    const settings = batteryAnimations.animationSettings
+    
+    if (!settings.shouldAnimate || batteryAnimations.shouldDisableAnimations) {
+      return {
+        transform, 0, 0) rotate(0deg) scale(1)',
+        opacity}
+    }
+    
+    switch (animationState) {
+      case 'running', 0, 0) rotate(360deg) scale(1.2)`,
+          opacity,
+          transitionDuration}ms`,
+          transitionTimingFunction}
+      case 'paused', 0, 0) rotate(180deg) scale(1.1)`,
+          opacity,
+          transitionDuration}ms`,
+          transitionTimingFunction}
+      default, 0, 0) rotate(0deg) scale(1)',
+          opacity,
+          transitionDuration}ms`,
+          transitionTimingFunction}
+    }
+  }, [animationState, batteryAnimations.animationSettings, batteryAnimations.shouldDisableAnimations])
+
+  // Get background color based on battery level
+  const getBackgroundColor = useCallback(() => {
+    if (batteryAnimations.state.isCriticalBattery) return 'bg-red-500'
+    if (batteryAnimations.state.isLowBattery) return 'bg-yellow-500'
+    if (batteryAnimations.state.batteryLevel < 0.5) return 'bg-orange-500'
+    return 'bg-green-500'
+  }, [batteryAnimations.state])
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold text-cs-text-primary mb-2">
+          🔋 Battery-Conscious Mobile Animations
+        </h1>
+        <p className="text-lg text-cs-text-secondary mb-4">
+          Story 9 Implementation - Smart animation system that respects battery life, performance, and user preferences
+        </p>
+        <div className="flex items-center justify-center gap-2">
+          <Badge variant="default">Story 9</Badge>
+          <Badge variant="outline">Battery Conscious</Badge>
+          <Badge variant="secondary">Performance Optimized</Badge>
+          <Badge variant="outline">Accessibility First</Badge>
+        </div>
+      </div>
+
+      {/* Battery Information */}
+      {showBatteryInfo && (
+        <Card className="border-2 border-cs-primary">
+          <CardHeader>
+            <CardTitle className="text-xl flex items-center gap-2">
+              🔋 Battery Status
+              <Badge variant={batteryAnimations.state.isLowBattery ? 'secondary' }>
+                {batteryAnimations.batteryPercentage}%
+              </Badge>
+            </CardTitle>
+            <CardDescription>
+              Real-time battery monitoring and animation optimization
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md="space-y-3">
+                <h4 className="font-medium">Battery Information</h4>
+                <div className="space-y-2">
+                  <div className="flex justify-between">
+                    <span className="text-sm">Level="text-sm text-cs-text-secondary">{batteryAnimations.batteryPercentage}%</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm">Status={batteryAnimations.state.isCharging ? 'default' }>
+                      {batteryAnimations.state.isCharging ? 'Charging' }
+                    </Badge>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm">Health="outline">{batteryAnimations.getBatteryHealth()}</Badge>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm">Throttle Level="outline">{batteryAnimations.state.throttleLevel}</Badge>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="space-y-3">
+                <h4 className="font-medium">Animation Settings</h4>
+                <div className="space-y-2">
+                  <div className="flex justify-between">
+                    <span className="text-sm">Duration="text-sm text-cs-text-secondary">{batteryAnimations.animationSettings.duration}ms</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm">Easing="text-sm text-cs-text-secondary">{batteryAnimations.animationSettings.easing}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm">Complexity="outline">{batteryAnimations.animationSettings.complexity}</Badge>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm">Frame Rate="text-sm text-cs-text-secondary">{batteryAnimations.animationSettings.frameRate}fps</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* User Preference Controls */}
+            <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
+              <h4 className="font-medium text-sm mb-2">User Preference="flex gap-2">
+                <Button
+                  variant={batteryAnimations.state.userPreference === 'performance' ? 'default' }
+                  size="sm"
+                  onClick={() => batteryAnimations.updateUserPreference('performance')}
+                >
+                  Performance
+                </Button>
+                <Button
+                  variant={batteryAnimations.state.userPreference === 'balanced' ? 'default' }
+                  size="sm"
+                  onClick={() => batteryAnimations.updateUserPreference('balanced')}
+                >
+                  Balanced
+                </Button>
+                <Button
+                  variant={batteryAnimations.state.userPreference === 'battery' ? 'default' }
+                  size="sm"
+                  onClick={() => batteryAnimations.updateUserPreference('battery')}
+                >
+                  Battery
+                </Button>
+                <Button
+                  variant={batteryAnimations.state.userPreference === 'accessibility' ? 'default' }
+                  size="sm"
+                  onClick={() => batteryAnimations.updateUserPreference('accessibility')}
+                >
+                  Accessibility
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Performance Information */}
+      {showPerformanceInfo && (
+        <Card className="border-2 border-cs-secondary">
+          <CardHeader>
+            <CardTitle className="text-xl flex items-center gap-2">
+              📊 Performance Monitoring
+              <Badge variant={performanceThrottling.isThrottling ? 'secondary' }>
+                {performanceThrottling.isThrottling ? 'Throttling' }
+              </Badge>
+            </CardTitle>
+            <CardDescription>
+              Real-time performance metrics and automatic throttling
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 lg="text-2xl font-bold text-cs-primary">
+                  {performanceThrottling.metrics.fps}
+                </p>
+                <p className="text-sm text-cs-text-secondary">FPS</p>
+              </div>
+              <div>
+                <p className="text-2xl font-bold text-cs-secondary">
+                  {performanceThrottling.metrics.frameTime.toFixed(1)}ms
+                </p>
+                <p className="text-sm text-cs-text-secondary">Frame Time</p>
+              </div>
+              <div>
+                <p className="text-2xl font-bold text-cs-accent">
+                  {performanceThrottling.metrics.performanceScore}
+                </p>
+                <p className="text-sm text-cs-text-secondary">Performance Score</p>
+              </div>
+              <div>
+                <p className="text-2xl font-bold text-cs-primary">
+                  {performanceThrottling.throttleLevel}
+                </p>
+                <p className="text-sm text-cs-text-secondary">Throttle Level</p>
+              </div>
+            </div>
+            
+            <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
+              <div className="flex items-center justify-between mb-2">
+                <span className="font-medium text-sm">Performance Level={
+                  performanceThrottling.performanceLevel === 'excellent' || performanceThrottling.performanceLevel === 'good' 
+                    ? 'default' }>
+                  {performanceThrottling.performanceLevel.toUpperCase()}
+                </Badge>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-sm">Throttling Status={performanceThrottling.isThrottling ? 'secondary' }>
+                  {performanceThrottling.isThrottling ? 'Active' }
+                </Badge>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Animation Demo */}
+      {showAnimationDemo && (
+        <Card className="border border-cs-border">
+          <CardHeader>
+            <CardTitle className="text-lg">Battery-Conscious Animation Demo</CardTitle>
+            <CardDescription>
+              Test different animation types with real-time battery and performance optimization
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* Animation Type Selection */}
+            <div className="flex flex-wrap gap-2">
+              <Button
+                variant={animationType === 'battery' ? 'default' }
+                size="sm"
+                onClick={() => setAnimationType('battery')}
+              >
+                Battery Optimized
+              </Button>
+              <Button
+                variant={animationType === 'performance' ? 'default' }
+                size="sm"
+                onClick={() => setAnimationType('performance')}
+              >
+                Performance Optimized
+              </Button>
+              <Button
+                variant={animationType === 'reduced-motion' ? 'default' }
+                size="sm"
+                onClick={() => setAnimationType('reduced-motion')}
+              >
+                Reduced Motion
+              </Button>
+              <Button
+                variant={animationType === 'user-preference' ? 'default' }
+                size="sm"
+                onClick={() => setAnimationType('user-preference')}
+              >
+                User Preference
+              </Button>
+            </div>
+
+            {/* Animation Complexity Selection */}
+            <div className="flex flex-wrap gap-2">
+              <Button
+                variant={animationComplexity === 'low' ? 'default' }
+                size="sm"
+                onClick={() => setAnimationComplexity('low')}
+              >
+                Low Complexity
+              </Button>
+              <Button
+                variant={animationComplexity === 'medium' ? 'default' }
+                size="sm"
+                onClick={() => setAnimationComplexity('medium')}
+              >
+                Medium Complexity
+              </Button>
+              <Button
+                variant={animationComplexity === 'high' ? 'default' }
+                size="sm"
+                onClick={() => setAnimationComplexity('high')}
+              >
+                High Complexity
+              </Button>
+            </div>
+
+            {/* Animation Controls */}
+            <div className="flex gap-2">
+              <Button
+                variant="default"
+                onClick={startAnimation}
+                disabled={animationState === 'running'}
+              >
+                Start Animation
+              </Button>
+              <Button
+                variant="outline"
+                onClick={pauseAnimation}
+                disabled={animationState !== 'running'}
+              >
+                Pause
+              </Button>
+              <Button
+                variant="outline"
+                onClick={resumeAnimation}
+                disabled={animationState !== 'paused'}
+              >
+                Resume
+              </Button>
+            </div>
+
+            {/* Animation Display */}
+            <div className="flex justify-center">
+              <div
+                className={`${getAnimationClasses()} ${getBackgroundColor()}`}
+                style={getAnimationStyles()}
+              />
+            </div>
+
+            {/* Animation Info */}
+            <div className="text-center text-sm text-cs-text-secondary">
+              <p>Animation Type="font-medium">{animationType}</span></p>
+              <p>Complexity="font-medium">{animationComplexity}</span></p>
+              <p>State="font-medium">{animationState}</span></p>
+              <p>Battery Optimized="font-medium">
+                {batteryAnimations.isAnimationOptimized() ? 'Yes' }
+              </span></p>
+              <p>Animations Disabled="font-medium">
+                {batteryAnimations.shouldDisableAnimations ? 'Yes' }
+              </span></p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Controls */}
+      {showControls && (
+        <Card className="border border-cs-border">
+          <CardHeader>
+            <CardTitle className="text-lg">Demo Controls</CardTitle>
+            <CardDescription>
+              Configure and test different battery-conscious animation features
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex flex-wrap gap-4">
+              <Button
+                variant={showBatteryInfo ? 'default' }
+                size="sm"
+                onClick={() => setShowBatteryInfo(!showBatteryInfo)}
+              >
+                {showBatteryInfo ? 'Hide' } Battery Info
+              </Button>
+              <Button
+                variant={showPerformanceInfo ? 'default' }
+                size="sm"
+                onClick={() => setShowPerformanceInfo(!showPerformanceInfo)}
+              >
+                {showPerformanceInfo ? 'Hide' } Performance
+              </Button>
+              <Button
+                variant={showAnimationDemo ? 'default' }
+                size="sm"
+                onClick={() => setShowAnimationDemo(!showAnimationDemo)}
+              >
+                {showAnimationDemo ? 'Hide' } Animation Demo
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Optimization Status */}
+      <Card className="border border-cs-border">
+        <CardHeader>
+          <CardTitle className="text-lg">Optimization Status</CardTitle>
+          <CardDescription>
+            Current optimization status and recommendations
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm">Battery Optimization={batteryAnimations.isAnimationOptimized() ? 'default' }>
+                {batteryAnimations.isAnimationOptimized() ? 'Active' }
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm">Performance Throttling={performanceThrottling.isThrottling ? 'secondary' }>
+                {performanceThrottling.isThrottling ? 'Active' }
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm">Reduced Motion={batteryAnimations.state.reducedMotion ? 'secondary' }>
+                {batteryAnimations.state.reducedMotion ? 'Enabled' }
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm">User Preference="outline">{batteryAnimations.state.userPreference}</Badge>
+            </div>
+          </div>
+
+          {/* Recent Optimizations */}
+          {batteryAnimations.optimizations.length > 0 && (
+            <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
+              <h4 className="font-medium text-sm mb-2">Recent Optimizations="text-xs text-cs-text-secondary space-y-1">
+                {batteryAnimations.optimizations.slice(-3).map((optimization, index) => (
+                  <li key={index}>• {optimization}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* Performance Optimizations */}
+          {performanceThrottling.optimizations.length > 0 && (
+            <div className="mt-4 p-3 bg-cs-secondary/10 rounded-lg">
+              <h4 className="font-medium text-sm mb-2">Performance Optimizations="text-xs text-cs-text-secondary space-y-1">
+                {performanceThrottling.optimizations.slice(-3).map((optimization, index) => (
+                  <li key={index}>• {optimization}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* Battery Recommendations */}
+          {batteryAnimations.recommendations.length > 0 && (
+            <div className="mt-4 p-3 bg-cs-primary/10 rounded-lg">
+              <h4 className="font-medium text-sm mb-2">Battery Recommendations="text-xs text-cs-text-secondary space-y-1">
+                {batteryAnimations.recommendations.slice(0, 3).map((recommendation, index) => (
+                  <li key={index}>• {recommendation}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* Performance Recommendations */}
+          {performanceThrottling.recommendations.length > 0 && (
+            <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
+              <h4 className="font-medium text-sm mb-2">Performance Recommendations="text-xs text-cs-text-secondary space-y-1">
+                {performanceThrottling.recommendations.slice(0, 3).map((recommendation, index) => (
+                  <li key={index}>• {recommendation}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export default BatteryConsciousAnimationDemo