@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/components/ui/hardware-acceleration-demo.tsx

@@ -0,0 +1,547 @@
+import React, { useState, useCallback, useEffect } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
+import { Badge } from './badge'
+import { Button } from './button'
+import { useHardwareAcceleration } from '../../hooks/use-hardware-acceleration'
+import { useBatteryOptimization } from '../../hooks/use-battery-optimization'
+
+export const HardwareAccelerationDemo: React.FC = () => {
+  const [showGPUInfo, setShowGPUInfo] = useState(true)
+  const [showPerformanceMetrics, setShowPerformanceMetrics] = useState(true)
+  const [showBatteryInfo, setShowBatteryInfo] = useState(true)
+  const [enableHardwareAcceleration, setEnableHardwareAcceleration] = useState(true)
+  const [enableBatteryOptimization, setEnableBatteryOptimization] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  // Hooks with error handling
+  const hardwareAcceleration = useHardwareAcceleration({
+    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: 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: ErrorEvent) => {
+      console.error('Hardware acceleration demo error:', error)
+      setError(error.message)
+    }
+
+    window.addEventListener('error', handleError)
+    return () => window.removeEventListener('error', handleError)
+  }, [])
+
+  // Demo animations with hardware acceleration
+  const [animationState, setAnimationState] = useState<'idle' | 'running' | 'paused'>('idle')
+  const [animationType, setAnimationType] = useState<'basic' | 'gpu' | 'transform3d' | 'performance'>('basic')
+
+  const startAnimation = useCallback(() => {
+    setAnimationState('running')
+    setTimeout(() => setAnimationState('idle'), 3000)
+  }, [])
+
+  const pauseAnimation = useCallback(() => {
+    setAnimationState('paused')
+  }, [])
+
+  const resumeAnimation = useCallback(() => {
+    setAnimationState('running')
+  }, [])
+
+  // Get animation classes based on 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':
+        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: string) => {
+    switch (state) {
+      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
+        }
+    }
+  }, [])
+
+  // Show error if any
+  if (error) {
+    return (
+      <div className="p-6 bg-red-50 border border-red-200 rounded-lg">
+        <h2 className="text-lg font-semibold text-red-800 mb-2">Error Loading Hardware Acceleration Demo</h2>
+        <p className="text-red-600 mb-4">{error}</p>
+        <Button onClick={() => setError(null)} variant="outline">
+          Try Again
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold text-cs-text-primary mb-2">
+          🚀 Hardware Acceleration & GPU Optimization
+        </h1>
+        <p className="text-lg text-cs-text-secondary mb-4">
+          Story 8 Implementation - Advanced hardware acceleration with GPU optimization and battery awareness
+        </p>
+        <div className="flex items-center justify-center gap-2">
+          <Badge variant="default">Story 8</Badge>
+          <Badge variant="outline">Hardware Acceleration</Badge>
+          <Badge variant="secondary">GPU Optimization</Badge>
+          <Badge variant="outline">Battery Optimization</Badge>
+        </div>
+      </div>
+
+      {/* GPU Information */}
+      {showGPUInfo && hardwareAcceleration.gpuInfo && (
+        <Card className="border-2 border-cs-primary">
+          <CardHeader>
+            <CardTitle className="text-xl flex items-center gap-2">
+              🎮 GPU Information
+              <Badge variant={hardwareAcceleration.isGPUSupported ? 'default' : 'secondary'}>
+                {hardwareAcceleration.isGPUSupported ? 'Supported' : 'Not Supported'}
+              </Badge>
+            </CardTitle>
+            <CardDescription>
+              Real-time GPU capability detection and WebGL support information
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <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:</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:</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:</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:</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:</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:</span>
+                  <span className="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.maxTextureSize}</span>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Performance Metrics */}
+      {showPerformanceMetrics && (
+        <Card className="border-2 border-cs-secondary">
+          <CardHeader>
+            <CardTitle className="text-xl flex items-center gap-2">
+              📊 Performance Metrics
+              <Badge variant="outline">Real-time</Badge>
+            </CardTitle>
+            <CardDescription>
+              Hardware acceleration performance monitoring and optimization status
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <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>
+              </div>
+              <div>
+                <p className="text-2xl font-bold text-cs-secondary">
+                  {hardwareAcceleration.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">
+                  {hardwareAcceleration.metrics.gpuUtilization.toFixed(1)}%
+                </p>
+                <p className="text-sm text-cs-text-secondary">GPU Usage</p>
+              </div>
+              <div>
+                <p className="text-2xl font-bold text-cs-primary">
+                  {hardwareAcceleration.metrics.performanceScore}
+                </p>
+                <p className="text-sm text-cs-text-secondary">Performance Score</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:</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:</span>
+                <Badge variant={hardwareAcceleration.isHardwareAccelerated ? 'default' : 'secondary'}>
+                  {hardwareAcceleration.isHardwareAccelerated ? 'Enabled' : 'Disabled'}
+                </Badge>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Battery Information */}
+      {showBatteryInfo && (
+        <Card className="border-2 border-cs-accent">
+          <CardHeader>
+            <CardTitle className="text-xl flex items-center gap-2">
+              🔋 Battery Optimization
+              <Badge variant={batteryOptimization.isLowBattery ? 'secondary' : 'default'}>
+                {batteryOptimization.batteryPercentage}%
+              </Badge>
+            </CardTitle>
+            <CardDescription>
+              Battery-aware performance optimization and user preference management
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <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:</span>
+                    <span className="text-sm text-cs-text-secondary">{batteryOptimization.batteryPercentage}%</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <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:</span>
+                    <Badge variant="outline">{batteryOptimization.getBatteryHealth()}</Badge>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="space-y-3">
+                <h4 className="font-medium">Performance Settings</h4>
+                <div className="space-y-2">
+                  <div className="flex justify-between">
+                    <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:</span>
+                    <Badge variant="outline">{batteryOptimization.userPreferences}</Badge>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm">Optimization:</span>
+                    <Badge variant={batteryOptimization.isOptimizing ? 'secondary' : 'default'}>
+                      {batteryOptimization.isOptimizing ? 'Active' : 'Idle'}
+                    </Badge>
+                  </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:</h4>
+              <div className="flex gap-2">
+                <Button
+                  variant={batteryOptimization.userPreferences === 'performance' ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => batteryOptimization.updateUserPreferences('performance')}
+                >
+                  Performance
+                </Button>
+                <Button
+                  variant={batteryOptimization.userPreferences === 'balanced' ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => batteryOptimization.updateUserPreferences('balanced')}
+                >
+                  Balanced
+                </Button>
+                <Button
+                  variant={batteryOptimization.userPreferences === 'battery' ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => batteryOptimization.updateUserPreferences('battery')}
+                >
+                  Battery
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Hardware Acceleration Demo */}
+      <Card className="border border-cs-border">
+        <CardHeader>
+          <CardTitle className="text-lg">Hardware Acceleration Demo</CardTitle>
+          <CardDescription>
+            Test different types of hardware acceleration with real-time animations
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Animation Type Selection */}
+          <div className="flex flex-wrap gap-2">
+            <Button
+              variant={animationType === 'basic' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setAnimationType('basic')}
+            >
+              Basic
+            </Button>
+            <Button
+              variant={animationType === 'gpu' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setAnimationType('gpu')}
+            >
+              GPU Optimized
+            </Button>
+            <Button
+              variant={animationType === 'transform3d' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setAnimationType('transform3d')}
+            >
+              Transform3D
+            </Button>
+            <Button
+              variant={animationType === 'performance' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setAnimationType('performance')}
+            >
+              Performance
+            </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(animationType)}
+              style={getAnimationStyles(animationState)}
+            />
+          </div>
+
+          {/* Animation Info */}
+          <div className="text-center text-sm text-cs-text-secondary">
+            <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>
+      </Card>
+
+      {/* Controls */}
+      <Card className="border border-cs-border">
+        <CardHeader>
+          <CardTitle className="text-lg">Demo Controls</CardTitle>
+          <CardDescription>
+            Configure and test different hardware acceleration features
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-wrap gap-4">
+            <Button
+              variant={showGPUInfo ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setShowGPUInfo(!showGPUInfo)}
+            >
+              {showGPUInfo ? 'Hide' : 'Show'} GPU Info
+            </Button>
+            <Button
+              variant={showPerformanceMetrics ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setShowPerformanceMetrics(!showPerformanceMetrics)}
+            >
+              {showPerformanceMetrics ? 'Hide' : 'Show'} Performance
+            </Button>
+            <Button
+              variant={showBatteryInfo ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setShowBatteryInfo(!showBatteryInfo)}
+            >
+              {showBatteryInfo ? 'Hide' : 'Show'} Battery Info
+            </Button>
+          </div>
+
+          <div className="flex flex-wrap gap-4">
+            <Button
+              variant={enableHardwareAcceleration ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setEnableHardwareAcceleration(!enableHardwareAcceleration)}
+            >
+              {enableHardwareAcceleration ? 'Disable' : 'Enable'} Hardware Acceleration
+            </Button>
+            <Button
+              variant={enableBatteryOptimization ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setEnableBatteryOptimization(!enableBatteryOptimization)}
+            >
+              {enableBatteryOptimization ? 'Disable' : 'Enable'} Battery Optimization
+            </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">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>
+              <Badge variant={
+                hardwareAcceleration.performanceLevel === 'excellent' || hardwareAcceleration.performanceLevel === 'good' 
+                  ? 'default' : 'secondary'
+              }>
+                {hardwareAcceleration.performanceLevel.toUpperCase()}
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <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:</span>
+              <Badge variant={hardwareAcceleration.metrics.gpuUtilization < 80 ? 'default' : 'secondary'}>
+                {hardwareAcceleration.metrics.gpuUtilization < 80 ? 'Optimal' : 'High Usage'}
+              </Badge>
+            </div>
+          </div>
+
+          {/* 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:</h4>
+              <ul className="text-xs text-cs-text-secondary space-y-1">
+                {hardwareAcceleration.optimizations.slice(-3).map((optimization, index) => (
+                  <li key={index}>• {optimization}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* 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:</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>
+                ))}
+              </ul>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export default HardwareAccelerationDemo

package/src/components/ui/input.tsx

@@ -0,0 +1,35 @@
+import * as React from "react"
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  variant?: 'default' | 'error' | 'success' | 'warning' | 'loading'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  state?: 'normal' | 'focused' | 'disabled' | 'readonly'
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = 'text', variant = 'default', size = 'md', state = 'normal', ...props }, ref) => {
+    // Build semantic CSS classes using BEM methodology
+    const baseClass = 'input'
+    const variantClass = `input--variant-${variant}`
+    const sizeClass = `input--size-${size}`
+    const stateClass = `input--state-${state}`
+
+    // Combine classes
+    const inputClasses = [baseClass, variantClass, sizeClass, stateClass, className]
+      .filter(Boolean)
+      .join(' ')
+
+    return (
+      <input
+        type={type}
+        className={inputClasses}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/src/components/ui/label.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={`label ${className || ''}`}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }