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

package/dist/components/ui/mobile-skeleton-loading-demo.esm.js

@@ -0,0 +1,621 @@
+import React, { useState, useEffect } from 'react'
+import { Card } from './card'
+import { Button } from './button'
+import { Badge } from './badge'
+import { useMobileSkeleton } from '../../hooks/use-mobile-skeleton'
+import { useDeviceLoadingStates } from '../../hooks/use-device-loading-states'
+import { useLoadingPerformance } from '../../hooks/use-loading-performance'
+import { useBatteryConsciousLoading } from '../../hooks/use-battery-conscious-loading'
+import { useLoadingAccessibility } from '../../hooks/use-loading-accessibility'
+
+export const MobileSkeletonLoadingDemo= () => {
+  const [activeTab, setActiveTab] = useState('overview')
+  const [isLoading, setIsLoading] = useState(false)
+  const [loadingProgress, setLoadingProgress] = useState(0)
+  const [showSkeletons, setShowSkeletons] = useState(true)
+
+  // Initialize all hooks
+  const mobileSkeleton = useMobileSkeleton(
+    {
+      enableMobileOptimization,
+      enablePerformanceOptimization,
+      enableBatteryOptimization,
+      enableAccessibilitySupport,
+      enableTouchOptimization},
+    {
+      onSkeletonCreated) => console.log('Skeleton created, variant),
+      onLoadingStateChanged) => console.log('Loading state changed, state),
+      onPerformanceOptimized) => console.log('Performance optimized, optimization),
+      onBatteryOptimized) => console.log('Battery optimized, strategy),
+      onAccessibilityEnhanced) => console.log('Accessibility enhanced, feature)
+    }
+  )
+
+  const deviceLoadingStates = useDeviceLoadingStates(
+    {
+      enableMobileStates,
+      enableTabletStates,
+      enableDesktopStates,
+      enableAdaptiveBehavior,
+      enableOrientationSupport,
+      enablePerformanceAdaptation},
+    {
+      onLoadingStateChanged) => console.log('Device loading state changed, state),
+      onDeviceStateChanged) => console.log('Device state changed, deviceState),
+      onAdaptiveBehaviorEnabled) => console.log('Adaptive behavior enabled, behavior),
+      onPerformanceAdapted) => console.log('Performance adapted, adaptation)
+    }
+  )
+
+  const loadingPerformance = useLoadingPerformance(
+    {
+      enableAnimationOptimization,
+      enableMemoryManagement,
+      enableBatteryOptimization,
+      enablePerformanceMonitoring,
+      enableAutoOptimization},
+    {
+      onPerformanceOptimized) => console.log('Loading performance optimized, strategy),
+      onMemoryOptimized) => console.log('Memory optimized, optimization),
+      onBatteryOptimized) => console.log('Battery optimized, strategy),
+      onAnimationOptimized) => console.log('Animation optimized, optimization)
+    }
+  )
+
+  const batteryConsciousLoading = useBatteryConsciousLoading(
+    {
+      enableBatteryMonitoring,
+      enableLoadingOptimization,
+      enablePerformanceAdjustment,
+      enableUserNotification,
+      enableAutoOptimization},
+    {
+      onBatteryLevelChanged) => console.log('Battery level changed, batteryState),
+      onLoadingOptimized) => console.log('Loading optimized for battery, optimization),
+      onPerformanceAdjusted) => console.log('Performance adjusted, adjustment),
+      onUserNotified) => console.log('User notified, notification)
+    }
+  )
+
+  const loadingAccessibility = useLoadingAccessibility(
+    {
+      enableScreenReaderSupport,
+      enableReducedMotionSupport,
+      enableFocusManagement,
+      enableAriaSupport,
+      enableVoiceControl,
+      enableHighContrast,
+      enableKeyboardNavigation},
+    {
+      onScreenReaderEnhanced) => console.log('Screen reader enhanced, feature),
+      onReducedMotionApplied) => console.log('Reduced motion applied, feature),
+      onFocusManaged) => console.log('Focus managed, feature),
+      onAriaEnhanced) => console.log('ARIA enhanced, feature),
+      onVoiceControlEnabled) => console.log('Voice control enabled, feature),
+      onHighContrastApplied) => console.log('High contrast applied, feature),
+      onKeyboardNavigationEnabled) => console.log('Keyboard navigation enabled, feature)
+    }
+  )
+
+  // Simulate loading progress
+  useEffect(() => {
+    if (isLoading) {
+      const interval = setInterval(() => {
+        setLoadingProgress(prev => {
+          if (prev >= 100) {
+            setIsLoading(false)
+            setLoadingProgress(0)
+            return 0
+          }
+          return prev + 10
+        })
+      }, 200)
+      return () => clearInterval(interval)
+    }
+  }, [isLoading])
+
+  // Start loading simulation
+  const startLoading = () => {
+    setIsLoading(true)
+    setLoadingProgress(0)
+  }
+
+  // Toggle skeleton visibility
+  const toggleSkeletons = () => {
+    setShowSkeletons(!showSkeletons)
+  }
+
+  // Get device-specific loading class
+  const getLoadingStateClass = () => {
+    switch (deviceLoadingStates.deviceState.deviceType) {
+      case 'mobile'}
+  }
+
+  // Get battery-conscious class
+  const getBatteryClass = () => {
+    const batteryStatus = batteryConsciousLoading.batteryState.status
+    if (batteryStatus === 'critical') return 'battery-critical'
+    if (batteryStatus === 'low') return 'battery-low'
+    return ''
+  }
+
+  // Get performance class
+  const getPerformanceClass = () => {
+    const performanceHealth = loadingPerformance.performanceHealth
+    if (performanceHealth === 'poor') return 'performance-low'
+    if (performanceHealth === 'fair') return 'performance-medium'
+    return 'performance-high'
+  }
+
+  // Get accessibility class
+  const getAccessibilityClass = () => {
+    if (loadingAccessibility.accessibilityScore >= 80) return 'accessibility-enhanced'
+    return ''
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-gray-900 mb-2">
+          📱 Mobile Skeleton & Loading State Sophistication
+        </h2>
+        <p className="text-gray-600 mb-4">
+          Advanced mobile-optimized skeleton components with device-specific loading states, 
+          performance optimization, battery consciousness, and accessibility support.
+        </p>
+        <Badge variant="secondary">Story 11 Implementation</Badge>
+      </div>
+
+      {/* Main Demo */}
+      <Card className="p-6">
+        {/* Navigation */}
+        <div className="flex flex-wrap gap-2 mb-6">
+          <Button 
+            variant={activeTab === 'overview' ? 'default' }
+            onClick={() => setActiveTab('overview')}
+            size="sm"
+          >
+            Overview
+          </Button>
+          <Button 
+            variant={activeTab === 'skeletons' ? 'default' }
+            onClick={() => setActiveTab('skeletons')}
+            size="sm"
+          >
+            Skeletons
+          </Button>
+          <Button 
+            variant={activeTab === 'loading' ? 'default' }
+            onClick={() => setActiveTab('loading')}
+            size="sm"
+          >
+            Loading States
+          </Button>
+          <Button 
+            variant={activeTab === 'performance' ? 'default' }
+            onClick={() => setActiveTab('performance')}
+            size="sm"
+          >
+            Performance
+          </Button>
+          <Button 
+            variant={activeTab === 'accessibility' ? 'default' }
+            onClick={() => setActiveTab('accessibility')}
+            size="sm"
+          >
+            Accessibility
+          </Button>
+        </div>
+
+        {/* Overview Section */}
+        {activeTab === 'overview' && (
+          <div className="space-y-6">
+            <div className="grid grid-cols-1 md}
+              <div className="p-4 bg-blue-50 rounded-lg">
+                <h3 className="font-semibold text-blue-900 mb-2">Device State</h3>
+                <div className="space-y-1 text-sm">
+                  <p><span className="font-medium">Type}</p>
+                  <p><span className="font-medium">Orientation}</p>
+                  <p><span className="font-medium">Screen}</p>
+                  <p><span className="font-medium">Strategy]?.type || 'skeleton'}</p>
+                </div>
+              </div>
+
+              {/* Battery Status */}
+              <div className="p-4 bg-yellow-50 rounded-lg">
+                <h3 className="font-semibold text-yellow-900 mb-2">Battery Status</h3>
+                <div className="space-y-1 text-sm">
+                  <p><span className="font-medium">Level)}%</p>
+                  <p><span className="font-medium">Status}</p>
+                  <p><span className="font-medium">Mode}</p>
+                  <p><span className="font-medium">Savings}%</p>
+                </div>
+              </div>
+
+              {/* Performance Metrics */}
+              <div className="p-4 bg-green-50 rounded-lg">
+                <h3 className="font-semibold text-green-900 mb-2">Performance</h3>
+                <div className="space-y-1 text-sm">
+                  <p><span className="font-medium">FPS}</p>
+                  <p><span className="font-medium">Render)}ms</p>
+                  <p><span className="font-medium">Memory}MB</p>
+                  <p><span className="font-medium">Health}</p>
+                </div>
+              </div>
+
+              {/* Accessibility Score */}
+              <div className="p-4 bg-purple-50 rounded-lg">
+                <h3 className="font-semibold text-purple-900 mb-2">Accessibility</h3>
+                <div className="space-y-1 text-sm">
+                  <p><span className="font-medium">Score}%</p>
+                  <p><span className="font-medium">Features}</p>
+                  <p><span className="font-medium">Active}</p>
+                  <p><span className="font-medium">Enhancing}</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Controls */}
+            <div className="flex flex-wrap gap-4 justify-center">
+              <Button onClick={startLoading} disabled={isLoading}>
+                {isLoading ? 'Loading...' }
+              </Button>
+              <Button onClick={toggleSkeletons} variant="outline">
+                {showSkeletons ? 'Hide' } Skeletons
+              </Button>
+              <Button onClick={loadingPerformance.autoOptimize} variant="outline">
+                Auto-Optimize Performance
+              </Button>
+              <Button onClick={batteryConsciousLoading.optimizeLoadingForBattery} variant="outline">
+                Optimize for Battery
+              </Button>
+              <Button onClick={loadingAccessibility.autoEnableAccessibility} variant="outline">
+                Enable All Accessibility
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Skeletons Section */}
+        {activeTab === 'skeletons' && (
+          <div className="space-y-6">
+            <div className="text-center mb-6">
+              <h3 className="text-xl font-semibold mb-2">Mobile-Optimized Skeleton Components</h3>
+              <p className="text-gray-600">
+                Device-specific skeleton variants with performance optimization and touch-friendly interactions
+              </p>
+            </div>
+
+            <div className={`${getLoadingStateClass()} ${getBatteryClass()} ${getPerformanceClass()} ${getAccessibilityClass()}`}>
+              {showSkeletons && (
+                <>
+                  {/* Text Line Skeletons */}
+                  <div className="loading-skeleton">
+                    <div className="mobile-skeleton text-line animation-pulse touch-friendly" 
+                         aria-label="Loading text line 1"></div>
+                    <div className="mobile-skeleton text-line animation-pulse touch-friendly" 
+                         aria-label="Loading text line 2"></div>
+                    <div className="mobile-skeleton text-line animation-pulse touch-friendly" 
+                         aria-label="Loading text line 3"></div>
+                  </div>
+
+                  {/* Avatar and Button Skeletons */}
+                  <div className="flex items-center gap-4">
+                    <div className="mobile-skeleton avatar animation-shimmer touch-friendly" 
+                         aria-label="Loading avatar"></div>
+                    <div className="mobile-skeleton button animation-pulse touch-friendly" 
+                         aria-label="Loading button"></div>
+                  </div>
+
+                  {/* Card Skeleton */}
+                  <div className="mobile-skeleton card animation-wave touch-friendly" 
+                       aria-label="Loading card content"></div>
+                </>
+              )}
+            </div>
+
+            {/* Skeleton Variants */}
+            <div className="grid grid-cols-1 md="p-4 bg-gray-50 rounded-lg">
+                <h4 className="font-semibold mb-2">Available Skeleton Variants</h4>
+                <div className="space-y-2 text-sm">
+                  {mobileSkeleton.skeletonVariants.map(variant => (
+                    <div key={variant.id} className="flex justify-between items-center">
+                      <span>{variant.name}</span>
+                      <Badge variant={variant.mobileOptimized ? "default" }>
+                        {variant.animation}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="p-4 bg-gray-50 rounded-lg">
+                <h4 className="font-semibold mb-2">Device Optimizations</h4>
+                <div className="space-y-2 text-sm">
+                  <p><span className="font-medium">Mobile Optimized) ? 'Yes' }</p>
+                  <p><span className="font-medium">Loading Strategy)}</p>
+                  <p><span className="font-medium">Animation Intensity)}</p>
+                  <p><span className="font-medium">Touch Friendly=> v.touchFriendly) ? 'Yes' }</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Loading States Section */}
+        {activeTab === 'loading' && (
+          <div className="space-y-6">
+            <div className="text-center mb-6">
+              <h3 className="text-xl font-semibold mb-2">Device-Specific Loading States</h3>
+              <p className="text-gray-600">
+                Adaptive loading states that automatically adjust based on device capabilities and battery level
+              </p>
+            </div>
+
+            {/* Loading Progress */}
+            {isLoading && (
+              <div className="space-y-4">
+                <div className="loading-progress">
+                  <div 
+                    className="loading-progress-bar" 
+                    style={{ width}%` }}
+                    aria-label={`Loading progress}%`}
+                  ></div>
+                </div>
+                <p className="text-center text-sm text-gray-600">
+                  Loading... {loadingProgress}%
+                </p>
+              </div>
+            )}
+
+            {/* Device Loading States */}
+            <div className="grid grid-cols-1 md="space-y-4">
+                <h4 className="font-semibold">Current Device State</h4>
+                <div className="p-4 bg-blue-50 rounded-lg space-y-2">
+                  <p><span className="font-medium">Device}</p>
+                  <p><span className="font-medium">Orientation}</p>
+                  <p><span className="font-medium">Performance}</p>
+                  <p><span className="font-medium">Battery}</p>
+                  <p><span className="font-medium">Adaptive}</p>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <h4 className="font-semibold">Available Loading States</h4>
+                <div className="space-y-2">
+                  {deviceLoadingStates.getLoadingStatesForDevice().map(state => (
+                    <div key={state.id} className="p-3 bg-gray-50 rounded-lg">
+                      <div className="flex justify-between items-center mb-1">
+                        <span className="font-medium">{state.name}</span>
+                        <Badge variant="outline">{state.type}</Badge>
+                      </div>
+                      <div className="text-sm text-gray-600">
+                        <p>Duration}ms</p>
+                        <p>Complexity}</p>
+                        <p>Performance}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Loading State Controls */}
+            <div className="flex flex-wrap gap-4 justify-center">
+              <Button onClick={deviceLoadingStates.enableAdaptiveBehavior} variant="outline">
+                Enable Adaptive Behavior
+              </Button>
+              <Button onClick={deviceLoadingStates.adaptToPerformance} variant="outline">
+                Adapt to Performance
+              </Button>
+              <Button onClick={deviceLoadingStates.clearAdaptations} variant="outline">
+                Clear Adaptations
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Performance Section */}
+        {activeTab === 'performance' && (
+          <div className="space-y-6">
+            <div className="text-center mb-6">
+              <h3 className="text-xl font-semibold mb-2">Loading Performance Optimization</h3>
+              <p className="text-gray-600">
+                Real-time performance monitoring with automatic optimization and battery-conscious strategies
+              </p>
+            </div>
+
+            {/* Performance Metrics */}
+            <div className="grid grid-cols-2 md="metric-item">
+                <div className="metric-value">{loadingPerformance.performanceMetrics.frameRate}</div>
+                <div className="metric-label">FPS</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-value">{Math.round(loadingPerformance.performanceMetrics.renderTime)}ms</div>
+                <div className="metric-label">Render Time</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-value">{loadingPerformance.performanceMetrics.memoryUsage}MB</div>
+                <div className="metric-label">Memory</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-value">{loadingPerformance.getPerformanceScore()}</div>
+                <div className="metric-label">Score</div>
+              </div>
+            </div>
+
+            {/* Performance Health */}
+            <div className="p-4 bg-gray-50 rounded-lg">
+              <h4 className="font-semibold mb-3">Performance Health}</h4>
+              <div className="space-y-2">
+                {loadingPerformance.getOptimizationRecommendations().map((recommendation, index) => (
+                  <p key={index} className="text-sm text-gray-600">• {recommendation}</p>
+                ))}
+              </div>
+            </div>
+
+            {/* Optimization Strategies */}
+            <div className="space-y-4">
+              <h4 className="font-semibold">Applied Optimizations</h4>
+              <div className="grid grid-cols-1 md=> (
+                  <div key={strategy.id} className="p-3 bg-green-50 rounded-lg">
+                    <div className="flex justify-between items-center mb-1">
+                      <span className="font-medium">{strategy.name}</span>
+                      <Badge variant={strategy.impact === 'high' ? 'default' }>
+                        {strategy.impact}
+                      </Badge>
+                    </div>
+                    <p className="text-sm text-gray-600">{strategy.description}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Performance Controls */}
+            <div className="flex flex-wrap gap-4 justify-center">
+              <Button onClick={loadingPerformance.optimizeAnimations} variant="outline">
+                Optimize Animations
+              </Button>
+              <Button onClick={loadingPerformance.optimizeMemory} variant="outline">
+                Optimize Memory
+              </Button>
+              <Button onClick={loadingPerformance.optimizeBattery} variant="outline">
+                Optimize Battery
+              </Button>
+              <Button onClick={loadingPerformance.optimizePerformance} variant="outline">
+                Optimize Overall
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Accessibility Section */}
+        {activeTab === 'accessibility' && (
+          <div className="space-y-6">
+            <div className="text-center mb-6">
+              <h3 className="text-xl font-semibold mb-2">Loading Accessibility Support</h3>
+              <p className="text-gray-600">
+                Comprehensive accessibility features including screen reader support, reduced motion, focus management, and ARIA
+              </p>
+            </div>
+
+            {/* Accessibility Score */}
+            <div className="text-center p-6 bg-purple-50 rounded-lg">
+              <div className="text-4xl font-bold text-purple-600 mb-2">
+                {loadingAccessibility.accessibilityScore}%
+              </div>
+              <p className="text-purple-700 font-medium">Accessibility Score</p>
+            </div>
+
+            {/* Accessibility State */}
+            <div className="grid grid-cols-2 md="metric-item">
+                <div className="metric-value">{loadingAccessibility.accessibilityState.screenReaderActive ? '✓' }</div>
+                <div className="metric-label">Screen Reader</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-value">{loadingAccessibility.accessibilityState.reducedMotionEnabled ? '✓' }</div>
+                <div className="metric-label">Reduced Motion</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-value">{loadingAccessibility.accessibilityState.ariaLabelsActive ? '✓' }</div>
+                <div className="metric-label">ARIA Labels</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-value">{loadingAccessibility.accessibilityState.keyboardNavigationActive ? '✓' }</div>
+                <div className="metric-label">Keyboard Nav</div>
+              </div>
+            </div>
+
+            {/* Accessibility Features */}
+            <div className="space-y-4">
+              <h4 className="font-semibold">Active Accessibility Features</h4>
+              <div className="grid grid-cols-1 md=> (
+                  <div key={feature.id} className="p-3 bg-purple-50 rounded-lg">
+                    <div className="flex justify-between items-center mb-1">
+                      <span className="font-medium">{feature.name}</span>
+                      <Badge variant={feature.impact === 'high' ? 'default' }>
+                        {feature.impact}
+                      </Badge>
+                    </div>
+                    <p className="text-sm text-gray-600">{feature.description}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Accessibility Recommendations */}
+            <div className="p-4 bg-blue-50 rounded-lg">
+              <h4 className="font-semibold mb-3">Accessibility Recommendations</h4>
+              <div className="space-y-2">
+                {loadingAccessibility.getAccessibilityRecommendations().map((recommendation, index) => (
+                  <p key={index} className="text-sm text-gray-600">• {recommendation}</p>
+                ))}
+              </div>
+            </div>
+
+            {/* Accessibility Controls */}
+            <div className="flex flex-wrap gap-4 justify-center">
+              <Button onClick={loadingAccessibility.enableScreenReaderSupport} variant="outline">
+                Enable Screen Reader
+              </Button>
+              <Button onClick={loadingAccessibility.enableReducedMotionSupport} variant="outline">
+                Enable Reduced Motion
+              </Button>
+              <Button onClick={loadingAccessibility.enableAriaSupport} variant="outline">
+                Enable ARIA Support
+              </Button>
+              <Button onClick={loadingAccessibility.enableKeyboardNavigation} variant="outline">
+                Enable Keyboard Nav
+              </Button>
+            </div>
+          </div>
+        )}
+      </Card>
+
+      {/* Status Indicators */}
+      <div className="grid grid-cols-1 md={`loading-status ${getBatteryClass()}`}>
+          <div className="w-3 h-3 bg-current rounded-full"></div>
+          <span className="text-sm font-medium">
+            Battery)}
+          </span>
+        </div>
+        
+        <div className={`loading-status ${getPerformanceClass()}`}>
+          <div className="w-3 h-3 bg-current rounded-full"></div>
+          <span className="text-sm font-medium">
+            Performance}
+          </span>
+        </div>
+        
+        <div className={`loading-status ${getAccessibilityClass()}`}>
+          <div className="w-3 h-3 bg-current rounded-full"></div>
+          <span className="text-sm font-medium">
+            Accessibility}%
+          </span>
+        </div>
+        
+        <div className="loading-status">
+          <div className="w-3 h-3 bg-current rounded-full"></div>
+          <span className="text-sm font-medium">
+            Device}
+          </span>
+        </div>
+      </div>
+
+      {/* Notifications */}
+      {batteryConsciousLoading.notifications.length > 0 && (
+        <div className="space-y-2">
+          <h4 className="font-semibold">Recent Notifications</h4>
+          {batteryConsciousLoading.notifications.slice(-3).map((notification, index) => (
+            <div key={index} className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
+              <p className="text-sm text-blue-800">{notification}</p>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default MobileSkeletonLoadingDemo