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

package/dist/components/ui/hardware-acceleration-demo.esm.js

@@ -5,7 +5,7 @@ import { Button } from './button'
 import { useHardwareAcceleration } from '../../hooks/use-hardware-acceleration'
 import { useBatteryOptimization } from '../../hooks/use-battery-optimization'
 
-export const HardwareAccelerationDemo= () => {
+export const HardwareAccelerationDemo: React.FC = () => {
   const [showGPUInfo, setShowGPUInfo] = useState(true)
   const [showPerformanceMetrics, setShowPerformanceMetrics] = useState(true)
   const [showBatteryInfo, setShowBatteryInfo] = useState(true)
@@ -15,32 +15,34 @@ export const HardwareAccelerationDemo= () => {
 
   // Hooks with error handling
   const hardwareAcceleration = useHardwareAcceleration({
-    enableGPUMonitoring,
-    enablePerformanceTracking,
-    enableBatteryOptimization,
-    enableAutomaticOptimization}, {
-    onGPUDetected) => console.log('GPU detected, gpuInfo),
-    onPerformanceWarning, metrics) => console.log('Performance warning, warning, metrics),
-    onBatteryWarning, isLow) => console.log('Battery warning, level, isLow),
-    onOptimizationApplied) => console.log('Optimization applied, optimization)
+    enableGPUMonitoring: true,
+    enablePerformanceTracking: true,
+    enableBatteryOptimization: true,
+    enableAutomaticOptimization: true
+  }, {
+    onGPUDetected: (gpuInfo) => console.log('GPU detected:', gpuInfo),
+    onPerformanceWarning: (warning, metrics) => console.log('Performance warning:', warning, metrics),
+    onBatteryWarning: (level, isLow) => console.log('Battery warning:', level, isLow),
+    onOptimizationApplied: (optimization) => console.log('Optimization applied:', optimization)
   })
 
   const batteryOptimization = useBatteryOptimization({
-    enableBatteryMonitoring,
-    enablePerformanceThrottling,
-    enableUserPreferences,
-    enableAdaptiveOptimization}, {
-    onBatteryStatusChange) => console.log('Battery status changed, status),
-    onLowBatteryWarning) => console.log('Low battery warning, status),
-    onCriticalBatteryWarning) => console.log('Critical battery warning, status),
-    onPerformanceThrottled, reason) => console.log('Performance throttled, level, reason),
-    onOptimizationApplied) => console.log('Battery optimization applied, optimization)
+    enableBatteryMonitoring: true,
+    enablePerformanceThrottling: true,
+    enableUserPreferences: true,
+    enableAdaptiveOptimization: true
+  }, {
+    onBatteryStatusChange: (status) => console.log('Battery status changed:', status),
+    onLowBatteryWarning: (status) => console.log('Low battery warning:', status),
+    onCriticalBatteryWarning: (status) => console.log('Critical battery warning:', status),
+    onPerformanceThrottled: (level, reason) => console.log('Performance throttled:', level, reason),
+    onOptimizationApplied: (optimization) => console.log('Battery optimization applied:', optimization)
   })
 
   // Error boundary effect
   useEffect(() => {
-    const handleError = (error) => {
-      console.error('Hardware acceleration demo error, error)
+    const handleError = (error: ErrorEvent) => {
+      console.error('Hardware acceleration demo error:', error)
       setError(error.message)
     }
 
@@ -66,22 +68,41 @@ export const HardwareAccelerationDemo= () => {
   }, [])
 
   // Get animation classes based on type
-  const getAnimationClasses = useCallback((type) => {
+  const getAnimationClasses = useCallback((type: string) => {
     const baseClasses = 'w-32 h-32 rounded-lg transition-all duration-1000 ease-in-out'
     
     switch (type) {
-      case 'basic'} bg-cs-primary hover} bg-cs-secondary gpu-optimized hover} bg-cs-accent transform3d-optimized hover} bg-cs-primary performance-accelerated hover}
+      case 'basic':
+        return `${baseClasses} bg-cs-primary hover:bg-cs-secondary`
+      case 'gpu':
+        return `${baseClasses} bg-cs-secondary gpu-optimized hover:bg-cs-accent`
+      case 'transform3d':
+        return `${baseClasses} bg-cs-accent transform3d-optimized hover:bg-cs-primary`
+      case 'performance':
+        return `${baseClasses} bg-cs-primary performance-accelerated hover:bg-cs-secondary`
+      default:
+        return baseClasses
+    }
   }, [])
 
   // Get animation styles based on state
-  const getAnimationStyles = useCallback((state) => {
+  const getAnimationStyles = useCallback((state: string) => {
     switch (state) {
-      case 'running', 0, 0) rotate(360deg) scale(1.2)',
-          opacity}
-      case 'paused', 0, 0) rotate(180deg) scale(1.1)',
-          opacity}
-      default, 0, 0) rotate(0deg) scale(1)',
-          opacity}
+      case 'running':
+        return {
+          transform: 'translate3d(100px, 0, 0) rotate(360deg) scale(1.2)',
+          opacity: 0.8
+        }
+      case 'paused':
+        return {
+          transform: 'translate3d(50px, 0, 0) rotate(180deg) scale(1.1)',
+          opacity: 0.9
+        }
+      default:
+        return {
+          transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
+          opacity: 1
+        }
     }
   }, [])
 
@@ -121,8 +142,8 @@ export const HardwareAccelerationDemo= () => {
           <CardHeader>
             <CardTitle className="text-xl flex items-center gap-2">
               🎮 GPU Information
-              <Badge variant={hardwareAcceleration.isGPUSupported ? 'default' }>
-                {hardwareAcceleration.isGPUSupported ? 'Supported' }
+              <Badge variant={hardwareAcceleration.isGPUSupported ? 'default' : 'secondary'}>
+                {hardwareAcceleration.isGPUSupported ? 'Supported' : 'Not Supported'}
               </Badge>
             </CardTitle>
             <CardDescription>
@@ -130,30 +151,37 @@ export const HardwareAccelerationDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-1 md="space-y-2">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
                 <div className="flex justify-between">
-                  <span className="text-sm font-medium">Vendor="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.vendor}</span>
+                  <span className="text-sm font-medium">Vendor:</span>
+                  <span className="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.vendor}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-sm font-medium">Renderer="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.renderer}</span>
+                  <span className="text-sm font-medium">Renderer:</span>
+                  <span className="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.renderer}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-sm font-medium">Version="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.version}</span>
+                  <span className="text-sm font-medium">Version:</span>
+                  <span className="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.version}</span>
                 </div>
               </div>
               <div className="space-y-2">
                 <div className="flex justify-between">
-                  <span className="text-sm font-medium">WebGL Support={hardwareAcceleration.gpuInfo.isWebGLSupported ? 'default' }>
-                    {hardwareAcceleration.gpuInfo.isWebGLSupported ? 'Yes' }
+                  <span className="text-sm font-medium">WebGL Support:</span>
+                  <Badge variant={hardwareAcceleration.gpuInfo.isWebGLSupported ? 'default' : 'secondary'}>
+                    {hardwareAcceleration.gpuInfo.isWebGLSupported ? 'Yes' : 'No'}
                   </Badge>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-sm font-medium">WebGL2 Support={hardwareAcceleration.gpuInfo.isWebGL2Supported ? 'default' }>
-                    {hardwareAcceleration.gpuInfo.isWebGL2Supported ? 'Yes' }
+                  <span className="text-sm font-medium">WebGL2 Support:</span>
+                  <Badge variant={hardwareAcceleration.gpuInfo.isWebGL2Supported ? 'default' : 'secondary'}>
+                    {hardwareAcceleration.gpuInfo.isWebGL2Supported ? 'Yes' : 'No'}
                   </Badge>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-sm font-medium">Max Texture Size="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.maxTextureSize}</span>
+                  <span className="text-sm font-medium">Max Texture Size:</span>
+                  <span className="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.maxTextureSize}</span>
                 </div>
               </div>
             </div>
@@ -174,7 +202,9 @@ export const HardwareAccelerationDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-2 lg="text-2xl font-bold text-cs-primary">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 text-center">
+              <div>
+                <p className="text-2xl font-bold text-cs-primary">
                   {hardwareAcceleration.metrics.fps}
                 </p>
                 <p className="text-sm text-cs-text-secondary">FPS</p>
@@ -201,14 +231,19 @@ export const HardwareAccelerationDemo= () => {
             
             <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={
-                  hardwareAcceleration.performanceLevel === 'excellent' ? 'default' === 'good' ? 'default' === 'fair' ? 'secondary' }>
+                <span className="font-medium text-sm">Performance Level:</span>
+                <Badge variant={
+                  hardwareAcceleration.performanceLevel === 'excellent' ? 'default' :
+                  hardwareAcceleration.performanceLevel === 'good' ? 'default' :
+                  hardwareAcceleration.performanceLevel === 'fair' ? 'secondary' : 'secondary'
+                }>
                   {hardwareAcceleration.performanceLevel.toUpperCase()}
                 </Badge>
               </div>
               <div className="flex items-center justify-between">
-                <span className="font-medium text-sm">Hardware Acceleration={hardwareAcceleration.isHardwareAccelerated ? 'default' }>
-                  {hardwareAcceleration.isHardwareAccelerated ? 'Enabled' }
+                <span className="font-medium text-sm">Hardware Acceleration:</span>
+                <Badge variant={hardwareAcceleration.isHardwareAccelerated ? 'default' : 'secondary'}>
+                  {hardwareAcceleration.isHardwareAccelerated ? 'Enabled' : 'Disabled'}
                 </Badge>
               </div>
             </div>
@@ -222,7 +257,7 @@ export const HardwareAccelerationDemo= () => {
           <CardHeader>
             <CardTitle className="text-xl flex items-center gap-2">
               🔋 Battery Optimization
-              <Badge variant={batteryOptimization.isLowBattery ? 'secondary' }>
+              <Badge variant={batteryOptimization.isLowBattery ? 'secondary' : 'default'}>
                 {batteryOptimization.batteryPercentage}%
               </Badge>
             </CardTitle>
@@ -231,19 +266,23 @@ export const HardwareAccelerationDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-1 md="space-y-3">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-3">
                 <h4 className="font-medium">Battery Status</h4>
                 <div className="space-y-2">
                   <div className="flex justify-between">
-                    <span className="text-sm">Level="text-sm text-cs-text-secondary">{batteryOptimization.batteryPercentage}%</span>
+                    <span className="text-sm">Level:</span>
+                    <span className="text-sm text-cs-text-secondary">{batteryOptimization.batteryPercentage}%</span>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Status={batteryOptimization.isCharging ? 'default' }>
-                      {batteryOptimization.isCharging ? 'Charging' }
+                    <span className="text-sm">Status:</span>
+                    <Badge variant={batteryOptimization.isCharging ? 'default' : 'secondary'}>
+                      {batteryOptimization.isCharging ? 'Charging' : 'Discharging'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Health="outline">{batteryOptimization.getBatteryHealth()}</Badge>
+                    <span className="text-sm">Health:</span>
+                    <Badge variant="outline">{batteryOptimization.getBatteryHealth()}</Badge>
                   </div>
                 </div>
               </div>
@@ -252,14 +291,17 @@ export const HardwareAccelerationDemo= () => {
                 <h4 className="font-medium">Performance Settings</h4>
                 <div className="space-y-2">
                   <div className="flex justify-between">
-                    <span className="text-sm">Throttle Level="outline">{batteryOptimization.currentThrottleLevel}</Badge>
+                    <span className="text-sm">Throttle Level:</span>
+                    <Badge variant="outline">{batteryOptimization.currentThrottleLevel}</Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">User Preference="outline">{batteryOptimization.userPreferences}</Badge>
+                    <span className="text-sm">User Preference:</span>
+                    <Badge variant="outline">{batteryOptimization.userPreferences}</Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Optimization={batteryOptimization.isOptimizing ? 'secondary' }>
-                      {batteryOptimization.isOptimizing ? 'Active' }
+                    <span className="text-sm">Optimization:</span>
+                    <Badge variant={batteryOptimization.isOptimizing ? 'secondary' : 'default'}>
+                      {batteryOptimization.isOptimizing ? 'Active' : 'Idle'}
                     </Badge>
                   </div>
                 </div>
@@ -268,23 +310,24 @@ export const HardwareAccelerationDemo= () => {
 
             {/* 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">
+              <h4 className="font-medium text-sm mb-2">User Preference:</h4>
+              <div className="flex gap-2">
                 <Button
-                  variant={batteryOptimization.userPreferences === 'performance' ? 'default' }
+                  variant={batteryOptimization.userPreferences === 'performance' ? 'default' : 'outline'}
                   size="sm"
                   onClick={() => batteryOptimization.updateUserPreferences('performance')}
                 >
                   Performance
                 </Button>
                 <Button
-                  variant={batteryOptimization.userPreferences === 'balanced' ? 'default' }
+                  variant={batteryOptimization.userPreferences === 'balanced' ? 'default' : 'outline'}
                   size="sm"
                   onClick={() => batteryOptimization.updateUserPreferences('balanced')}
                 >
                   Balanced
                 </Button>
                 <Button
-                  variant={batteryOptimization.userPreferences === 'battery' ? 'default' }
+                  variant={batteryOptimization.userPreferences === 'battery' ? 'default' : 'outline'}
                   size="sm"
                   onClick={() => batteryOptimization.updateUserPreferences('battery')}
                 >
@@ -308,28 +351,28 @@ export const HardwareAccelerationDemo= () => {
           {/* Animation Type Selection */}
           <div className="flex flex-wrap gap-2">
             <Button
-              variant={animationType === 'basic' ? 'default' }
+              variant={animationType === 'basic' ? 'default' : 'outline'}
               size="sm"
               onClick={() => setAnimationType('basic')}
             >
               Basic
             </Button>
             <Button
-              variant={animationType === 'gpu' ? 'default' }
+              variant={animationType === 'gpu' ? 'default' : 'outline'}
               size="sm"
               onClick={() => setAnimationType('gpu')}
             >
               GPU Optimized
             </Button>
             <Button
-              variant={animationType === 'transform3d' ? 'default' }
+              variant={animationType === 'transform3d' ? 'default' : 'outline'}
               size="sm"
               onClick={() => setAnimationType('transform3d')}
             >
               Transform3D
             </Button>
             <Button
-              variant={animationType === 'performance' ? 'default' }
+              variant={animationType === 'performance' ? 'default' : 'outline'}
               size="sm"
               onClick={() => setAnimationType('performance')}
             >
@@ -372,10 +415,10 @@ export const HardwareAccelerationDemo= () => {
 
           {/* Animation Info */}
           <div className="text-center text-sm text-cs-text-secondary">
-            <p>Animation Type="font-medium">{animationType}</span></p>
-            <p>State="font-medium">{animationState}</span></p>
-            <p>Hardware Acceleration="font-medium">
-              {hardwareAcceleration.isHardwareAccelerated ? 'Enabled' }
+            <p>Animation Type: <span className="font-medium">{animationType}</span></p>
+            <p>State: <span className="font-medium">{animationState}</span></p>
+            <p>Hardware Acceleration: <span className="font-medium">
+              {hardwareAcceleration.isHardwareAccelerated ? 'Enabled' : 'Disabled'}
             </span></p>
           </div>
         </CardContent>
@@ -392,42 +435,42 @@ export const HardwareAccelerationDemo= () => {
         <CardContent className="space-y-4">
           <div className="flex flex-wrap gap-4">
             <Button
-              variant={showGPUInfo ? 'default' }
+              variant={showGPUInfo ? 'default' : 'outline'}
               size="sm"
               onClick={() => setShowGPUInfo(!showGPUInfo)}
             >
-              {showGPUInfo ? 'Hide' } GPU Info
+              {showGPUInfo ? 'Hide' : 'Show'} GPU Info
             </Button>
             <Button
-              variant={showPerformanceMetrics ? 'default' }
+              variant={showPerformanceMetrics ? 'default' : 'outline'}
               size="sm"
               onClick={() => setShowPerformanceMetrics(!showPerformanceMetrics)}
             >
-              {showPerformanceMetrics ? 'Hide' } Performance
+              {showPerformanceMetrics ? 'Hide' : 'Show'} Performance
             </Button>
             <Button
-              variant={showBatteryInfo ? 'default' }
+              variant={showBatteryInfo ? 'default' : 'outline'}
               size="sm"
               onClick={() => setShowBatteryInfo(!showBatteryInfo)}
             >
-              {showBatteryInfo ? 'Hide' } Battery Info
+              {showBatteryInfo ? 'Hide' : 'Show'} Battery Info
             </Button>
           </div>
 
           <div className="flex flex-wrap gap-4">
             <Button
-              variant={enableHardwareAcceleration ? 'default' }
+              variant={enableHardwareAcceleration ? 'default' : 'outline'}
               size="sm"
               onClick={() => setEnableHardwareAcceleration(!enableHardwareAcceleration)}
             >
-              {enableHardwareAcceleration ? 'Disable' } Hardware Acceleration
+              {enableHardwareAcceleration ? 'Disable' : 'Enable'} Hardware Acceleration
             </Button>
             <Button
-              variant={enableBatteryOptimization ? 'default' }
+              variant={enableBatteryOptimization ? 'default' : 'outline'}
               size="sm"
               onClick={() => setEnableBatteryOptimization(!enableBatteryOptimization)}
             >
-              {enableBatteryOptimization ? 'Disable' } Battery Optimization
+              {enableBatteryOptimization ? 'Disable' : 'Enable'} Battery Optimization
             </Button>
           </div>
         </CardContent>
@@ -444,25 +487,30 @@ export const HardwareAccelerationDemo= () => {
         <CardContent>
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <span className="text-sm">Hardware Acceleration={hardwareAcceleration.isHardwareAccelerated ? 'default' }>
-                {hardwareAcceleration.isHardwareAccelerated ? 'Optimal' }
+              <span className="text-sm">Hardware Acceleration:</span>
+              <Badge variant={hardwareAcceleration.isHardwareAccelerated ? 'default' : 'secondary'}>
+                {hardwareAcceleration.isHardwareAccelerated ? 'Optimal' : 'Needs Optimization'}
               </Badge>
             </div>
             <div className="flex items-center justify-between">
-              <span className="text-sm">Performance Level={
+              <span className="text-sm">Performance Level:</span>
+              <Badge variant={
                 hardwareAcceleration.performanceLevel === 'excellent' || hardwareAcceleration.performanceLevel === 'good' 
-                  ? 'default' }>
+                  ? 'default' : 'secondary'
+              }>
                 {hardwareAcceleration.performanceLevel.toUpperCase()}
               </Badge>
             </div>
             <div className="flex items-center justify-between">
-              <span className="text-sm">Battery Optimization={batteryOptimization.isLowBattery ? 'secondary' }>
-                {batteryOptimization.isLowBattery ? 'Needs Optimization' }
+              <span className="text-sm">Battery Optimization:</span>
+              <Badge variant={batteryOptimization.isLowBattery ? 'secondary' : 'default'}>
+                {batteryOptimization.isLowBattery ? 'Needs Optimization' : 'Optimized'}
               </Badge>
             </div>
             <div className="flex items-center justify-between">
-              <span className="text-sm">GPU Utilization={hardwareAcceleration.metrics.gpuUtilization < 80 ? 'default' }>
-                {hardwareAcceleration.metrics.gpuUtilization < 80 ? 'Optimal' }
+              <span className="text-sm">GPU Utilization:</span>
+              <Badge variant={hardwareAcceleration.metrics.gpuUtilization < 80 ? 'default' : 'secondary'}>
+                {hardwareAcceleration.metrics.gpuUtilization < 80 ? 'Optimal' : 'High Usage'}
               </Badge>
             </div>
           </div>
@@ -470,7 +518,8 @@ export const HardwareAccelerationDemo= () => {
           {/* Recent Optimizations */}
           {hardwareAcceleration.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">
+              <h4 className="font-medium text-sm mb-2">Recent Optimizations:</h4>
+              <ul className="text-xs text-cs-text-secondary space-y-1">
                 {hardwareAcceleration.optimizations.slice(-3).map((optimization, index) => (
                   <li key={index}>• {optimization}</li>
                 ))}
@@ -481,7 +530,8 @@ export const HardwareAccelerationDemo= () => {
           {/* Battery Recommendations */}
           {batteryOptimization.optimizationRecommendations.length > 0 && (
             <div className="mt-4 p-3 bg-cs-secondary/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">Battery Recommendations="text-xs text-cs-text-secondary space-y-1">
+              <h4 className="font-medium text-sm mb-2">Battery Recommendations:</h4>
+              <ul className="text-xs text-cs-text-secondary space-y-1">
                 {batteryOptimization.optimizationRecommendations.slice(0, 3).map((recommendation, index) => (
                   <li key={index}>• {recommendation}</li>
                 ))}