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

package/dist/components/ui/performance-demo.js

@@ -0,0 +1,549 @@
+import React, { useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
+import { Button } from './button'
+import { Badge } from './badge'
+import { 
+  usePerformance,
+  useFrameRate,
+  useMemoryUsage,
+  useBatteryStatus,
+  usePerformanceThrottling
+} from '../../hooks'
+import { useDevice } from '../../hooks/use-device'
+
+export const PerformanceDemo= () => {
+  const [activeTab, setActiveTab] = useState<'overview' | 'fps' | 'memory' | 'battery' | 'throttling'>('overview')
+  const [showRecommendations, setShowRecommendations] = useState(false)
+  
+  const device = useDevice()
+  
+  // Main performance hook
+  const {
+    throttlingEnabled,
+    throttlingReason,
+    performanceMode,
+    getOptimizationRecommendations
+  } = usePerformance({
+    callbacks) => console.warn(`FPS Warning}`),
+      onMemoryWarning) => console.warn(`Memory Warning).toFixed(1)}%`),
+      onBatteryLow) => console.warn(`Battery Low).toFixed(1)}%`),
+      onPerformanceModeChange) => console.log(`Performance mode changed to}`),
+      onThrottlingChange, reason) => console.log(`Throttling ${enabled ? 'enabled' }}`)
+    }
+  })
+
+  // Specialized hooks
+  const {
+    metrics,
+    performanceScore,
+    getPerformanceInsights} = useFrameRate({
+    callbacks) => console.warn(`Frame rate warning} FPS`),
+      onFPSDrop, previous) => console.warn(`FPS drop detected} → ${fps}`)
+    }
+  })
+
+  const {
+    metrics,
+    memoryTrend,
+    memoryLeakDetected,
+    getOptimizationRecommendations,
+    getCleanupSuggestions} = useMemoryUsage({
+    callbacks) => console.warn(`Memory usage warning).toFixed(1)}%`),
+      onMemoryLeakDetected) => console.warn(`Memory leak detected} trend`)
+    }
+  })
+
+  const {
+    metrics,
+    batteryLevel,
+    isCharging,
+    isLowPowerMode,
+    isCriticalBattery,
+    getOptimizationRecommendations,
+    getPowerSavingSuggestions,
+    getBatteryStatus} = useBatteryStatus({
+    callbacks) => console.warn(`Battery low).toFixed(1)}%`),
+      onBatteryCritical) => console.error(`Battery critical).toFixed(1)}%`)
+    }
+  })
+
+  const {
+    metrics,
+    isThrottling,
+    throttleLevel,
+    optimizations,
+    recommendations,
+    performanceSettings,
+
+  } = 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)
+  })
+
+  // Performance score color mapping
+  const getScoreColor = (score) => {
+    switch (score) {
+      case 'excellent'}
+  }
+
+  // Performance mode color mapping
+  const getModeColor = (mode) => {
+    switch (mode) {
+      case 'high'}
+  }
+
+  // Throttling level color mapping
+  const getThrottlingColor = (level) => {
+    switch (level) {
+      case 'none'}
+  }
+
+  // Memory trend icon
+  const getMemoryTrendIcon = (trend) => {
+    switch (trend) {
+      case 'increasing'}
+  }
+
+  // Battery icon
+  const getBatteryIcon = (level, charging) => {
+    if (charging) return '🔌'
+    if (level <= 0.15) return '🔴'
+    if (level <= 0.3) return '🟠'
+    if (level <= 0.5) return '🟡'
+    return '🟢'
+  }
+
+  const tabs = [
+    { id, label, icon},
+    { id, label, icon},
+    { id, label, icon},
+    { id, label, icon},
+    { id, label, icon}
+  ]
+
+  return (
+    <div className="space-y-6">
+      {/* Tab Navigation */}
+      <div className="flex flex-wrap gap-2 border-b pb-4">
+        {tabs.map((tab) => (
+          <Button
+            key={tab.id}
+            variant={activeTab === tab.id ? 'default' }
+            size="sm"
+            onClick={() => setActiveTab(tab.id as any)}
+            className="flex items-center gap-2"
+          >
+            <span>{tab.icon}</span>
+            {tab.label}
+          </Button>
+        ))}
+      </div>
+
+      {/* Overview Tab */}
+      {activeTab === 'overview' && (
+        <div className="space-y-6">
+          {/* Performance Summary */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                🎯 Performance Summary
+                <Badge variant={performanceMode === 'high' ? 'default' }>
+                  {performanceMode.toUpperCase()} MODE
+                </Badge>
+              </CardTitle>
+              <CardDescription>
+                Real-time performance overview and system status
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-1 md}
+                <div className="text-center p-4 border rounded-lg">
+                  <div className="text-2xl font-bold text-blue-600">{fpsMetrics.fps}</div>
+                  <div className="text-sm text-gray-600">FPS</div>
+                  <Badge className={`mt-2 ${getScoreColor(fpsScore)}`}>
+                    {fpsScore}
+                  </Badge>
+                </div>
+
+                {/* Memory Status */}
+                <div className="text-center p-4 border rounded-lg">
+                  <div className="text-2xl font-bold text-purple-600">
+                    {memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) }%
+                  </div>
+                  <div className="text-sm text-gray-600">Memory Usage</div>
+                  <div className="flex items-center justify-center gap-1 mt-2">
+                    <span>{getMemoryTrendIcon(memoryTrend)}</span>
+                    <Badge variant={memoryLeakDetected ? 'destructive' }>
+                      {memoryLeakDetected ? 'Leak Detected' }
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Battery Status */}
+                <div className="text-center p-4 border rounded-lg">
+                  <div className="text-2xl font-bold text-green-600">
+                    {getBatteryIcon(batteryLevel || 1, isCharging)}
+                  </div>
+                  <div className="text-sm text-gray-600">Battery</div>
+                  <Badge variant={isCriticalBattery ? 'destructive' }>
+                    {getBatteryStatusText()}
+                  </Badge>
+                </div>
+              </div>
+
+              {/* Throttling Status */}
+              {throttlingEnabled && (
+                <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+                  <div className="flex items-center gap-2">
+                    <span className="text-yellow-600">⚠️</span>
+                    <div>
+                      <div className="font-medium text-yellow-800">Performance Throttling Active</div>
+                      <div className="text-sm text-yellow-700">{throttlingReason}</div>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Recommendations Toggle */}
+              <Button
+                variant="outline"
+                onClick={() => setShowRecommendations(!showRecommendations)}
+                className="w-full"
+              >
+                {showRecommendations ? 'Hide' } Performance Recommendations
+              </Button>
+
+              {/* Performance Recommendations */}
+              {showRecommendations && (
+                <div className="space-y-3">
+                  <h4 className="font-medium text-gray-900">Optimization Recommendations="space-y-2 text-sm text-gray-700">
+                    {getOptimizationRecommendations().map((rec, index) => (
+                      <li key={index} className="flex items-start gap-2">
+                        <span className="text-blue-500">•</span>
+                        {rec}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Device Information */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                📱 Device Information
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md="font-medium">Device Type}
+                </div>
+                <div>
+                  <span className="font-medium">Screen Size}
+                </div>
+                <div>
+                  <span className="font-medium">Orientation}
+                </div>
+                <div>
+                  <span className="font-medium">Touch Device}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Frame Rate Tab */}
+      {activeTab === 'fps' && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              🎬 Frame Rate Monitoring
+              <Badge className={getScoreColor(fpsScore)}>
+                {fpsScore.toUpperCase()}
+              </Badge>
+            </CardTitle>
+            <CardDescription>
+              Real-time FPS tracking and performance analysis
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-2 md="text-center p-3 border rounded-lg">
+                <div className="text-xl font-bold text-blue-600">{fpsMetrics.fps}</div>
+                <div className="text-xs text-gray-600">Current FPS</div>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <div className="text-xl font-bold text-green-600">{fpsMetrics.averageFPS}</div>
+                <div className="text-xs text-gray-600">Average FPS</div>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <div className="text-xl font-bold text-purple-600">{fpsMetrics.minFPS}</div>
+                <div className="text-xs text-gray-600">Min FPS</div>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <div className="text-xl font-bold text-orange-600">{fpsMetrics.maxFPS}</div>
+                <div className="text-xs text-gray-600">Max FPS</div>
+              </div>
+            </div>
+
+            <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
+              <h4 className="font-medium text-blue-800 mb-2">Performance Insights="space-y-1 text-sm text-blue-700">
+                {getFPSInsights().map((insight, index) => (
+                  <li key={index} className="flex items-start gap-2">
+                    <span className="text-blue-500">•</span>
+                    {insight}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Memory Tab */}
+      {activeTab === 'memory' && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              🧠 Memory Usage Monitoring
+              <Badge variant={memoryLeakDetected ? 'destructive' }>
+                {memoryLeakDetected ? 'LEAK DETECTED' )}
+              </Badge>
+            </CardTitle>
+            <CardDescription>
+              Memory usage tracking and leak detection
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-1 md="text-center p-3 border rounded-lg">
+                <div className="text-xl font-bold text-purple-600">
+                  {memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) }%
+                </div>
+                <div className="text-xs text-gray-600">Usage</div>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <div className="text-xl font-bold text-blue-600">
+                  {memoryMetrics.usedJSHeapSize ? (memoryMetrics.usedJSHeapSize / 1024 / 1024).toFixed(1) } MB
+                </div>
+                <div className="text-xs text-gray-600">Used</div>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <div className="text-xl font-bold text-green-600">
+                  {memoryMetrics.jsHeapSizeLimit ? (memoryMetrics.jsHeapSizeLimit / 1024 / 1024).toFixed(1) } MB
+                </div>
+                <div className="text-xs text-gray-600">Limit</div>
+              </div>
+            </div>
+
+            <div className="p-4 bg-purple-50 border border-purple-200 rounded-lg">
+              <h4 className="font-medium text-purple-800 mb-2">Memory Optimization="space-y-1 text-sm text-purple-700">
+                {getMemoryRecommendations().map((rec, index) => (
+                  <li key={index} className="flex items-start gap-2">
+                    <span className="text-purple-500">•</span>
+                    {rec}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {memoryLeakDetected && (
+              <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+                <h4 className="font-medium text-red-800 mb-2">Memory Leak Cleanup Suggestions="space-y-1 text-sm text-red-700">
+                  {getMemoryCleanupSuggestions().map((suggestion, index) => (
+                    <li key={index} className="flex items-start gap-2">
+                      <span className="text-red-500">•</span>
+                      {suggestion}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Battery Tab */}
+      {activeTab === 'battery' && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              🔋 Battery Status Monitoring
+              <Badge variant={isCriticalBattery ? 'destructive' }>
+                {getBatteryStatusText()}
+              </Badge>
+            </CardTitle>
+            <CardDescription>
+              Battery level monitoring and power optimization
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-1 md="text-center p-3 border rounded-lg">
+                <div className="text-2xl">{getBatteryIcon(batteryLevel || 1, isCharging)}</div>
+                <div className="text-xl font-bold text-green-600">
+                  {batteryLevel ? (batteryLevel * 100).toFixed(1) }%
+                </div>
+                <div className="text-xs text-gray-600">Level</div>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <div className="text-xl font-bold text-blue-600">
+                  {isCharging ? 'Yes' }
+                </div>
+                <div className="text-xs text-gray-600">Charging</div>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <div className="text-xl font-bold text-purple-600">
+                  {batteryMetrics.chargingTime || 'N/A'}
+                </div>
+                <div className="text-xs text-gray-600">Charging Time</div>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <div className="text-xl font-bold text-orange-600">
+                  {batteryMetrics.dischargingTime || 'N/A'}
+                </div>
+                <div className="text-xs text-gray-600">Discharge Time</div>
+              </div>
+            </div>
+
+            <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
+              <h4 className="font-medium text-green-800 mb-2">Battery Optimization="space-y-1 text-sm text-green-700">
+                {getBatteryRecommendations().map((rec, index) => (
+                  <li key={index} className="flex items-start gap-2">
+                    <span className="text-green-500">•</span>
+                    {rec}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {(isLowPowerMode || isCriticalBattery) && (
+              <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+                <h4 className="font-medium text-yellow-800 mb-2">Power Saving Suggestions="space-y-1 text-sm text-yellow-700">
+                  {getBatteryPowerSuggestions().map((suggestion, index) => (
+                    <li key={index} className="flex items-start gap-2">
+                      <span className="text-yellow-500">•</span>
+                      {suggestion}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Throttling Tab */}
+      {activeTab === 'throttling' && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              ⚡ Performance Throttling
+                              <Badge className={getThrottlingColor(throttleLevel)}>
+                  {throttleLevel.toUpperCase()}
+                </Badge>
+            </CardTitle>
+            <CardDescription>
+              Automatic and manual performance throttling controls
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-1 md="text-center p-3 border rounded-lg">
+                <div className="text-xl font-bold text-blue-600">
+                  {isThrottling ? 'Active' }
+                </div>
+                <div className="text-xs text-gray-600">Throttling Status</div>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <Badge className={getModeColor(performanceSettings.animationQuality)}>
+                  {performanceSettings.animationQuality.toUpperCase()}
+                </Badge>
+                <div className="text-xs text-gray-600 mt-1">Performance Mode</div>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <div className="text-xl font-bold text-green-600">
+                  {performanceSettings.memoryOptimization ? 'Yes' }
+                </div>
+                <div className="text-xs text-gray-600">Battery Optimized</div>
+              </div>
+            </div>
+
+            {/* Throttling Status */}
+            <div className="flex flex-wrap gap-2">
+              <div className="text-center p-3 border rounded-lg">
+                <div className="text-lg font-bold text-blue-600">
+                  {throttleLevel}
+                </div>
+                <div className="text-xs text-gray-600">Current Level</div>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <div className="text-lg font-bold text-green-600">
+                  {isThrottling ? 'Active' }
+                </div>
+                <div className="text-xs text-gray-600">Throttling Status</div>
+              </div>
+            </div>
+
+            {/* Performance Settings */}
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900">Performance Settings="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <span className="font-medium">Max Concurrent Animations="text-blue-600">{performanceSettings.maxConcurrentAnimations}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Frame Rate Limit="text-blue-600">{performanceSettings.frameRateLimit}fps</div>
+                </div>
+                <div>
+                  <span className="font-medium">Animation Quality="text-blue-600">{performanceSettings.animationQuality}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Memory Optimization="text-blue-600">{performanceSettings.memoryOptimization ? 'Yes' }</div>
+                </div>
+              </div>
+            </div>
+
+            {/* Throttling Information */}
+            {isThrottling && (
+              <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+                <h4 className="font-medium text-yellow-800 mb-2">Throttling Information="text-sm text-yellow-700 space-y-1">
+                  <div><strong>Level}</div>
+                  <div><strong>Performance Score}</div>
+                  <div><strong>FPS}</div>
+                </div>
+              </div>
+            )}
+
+            {/* Recommendations */}
+            <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
+              <h4 className="font-medium text-blue-800 mb-2">Throttling Recommendations="space-y-1 text-sm text-blue-700">
+                {recommendations.map((rec, index) => (
+                  <li key={index} className="flex items-start gap-2">
+                    <span className="text-blue-500">•</span>
+                    {rec}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Optimization Suggestions */}
+            <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
+              <h4 className="font-medium text-green-800 mb-2">Optimization Suggestions="space-y-1 text-sm text-green-700">
+                {optimizations.map((suggestion, index) => (
+                  <li key={index} className="flex items-start gap-2">
+                    <span className="text-green-500">•</span>
+                    {suggestion}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}