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

package/src/components/ui/layout-demo.tsx

@@ -0,0 +1,367 @@
+import React, { useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
+import { Badge } from './badge'
+import { Button } from './button'
+import { 
+  MobileLayout, 
+  TabletLayout, 
+  DesktopLayout, 
+  AdaptiveLayout
+} from './layouts'
+import { useAdaptiveLayout } from '../../hooks/use-adaptive-layout'
+import { useLayoutPerformance } from '../../hooks/use-layout-performance'
+import { useMobileLayout } from '../../hooks/use-mobile-layout'
+import { useTabletLayout } from '../../hooks/use-tablet-layout'
+
+export const LayoutDemo: React.FC = () => {
+  const [activeLayout, setActiveLayout] = useState<'mobile' | 'tablet' | 'desktop' | 'adaptive'>('adaptive')
+  const [showPerformanceMetrics, setShowPerformanceMetrics] = useState(true)
+  const [enableTouchOptimization, setEnableTouchOptimization] = useState(true)
+  const [enableAdvancedFeatures, setEnableAdvancedFeatures] = useState(true)
+
+  // Hooks
+  useAdaptiveLayout({
+    enablePerformanceOptimization: true,
+    enableTouchOptimization: true,
+    enableBatteryOptimization: true,
+    enableMemoryOptimization: true
+  }, {
+    onDeviceChange: (deviceType) => console.log('Device changed to:', deviceType),
+    onOrientationChange: (orientation) => console.log('Orientation changed to:', orientation),
+    onPerformanceChange: (score) => console.log('Performance score:', score)
+  })
+
+  const layoutPerformance = useLayoutPerformance({
+    enableLayoutCalculationOptimization: true,
+    enableMemoryManagement: true,
+    enableBatteryOptimization: true,
+    enablePerformanceMonitoring: true
+  }, {
+    onPerformanceWarning: (warning, metrics) => console.log('Performance warning:', warning, metrics),
+    onMemoryWarning: (usage, threshold) => console.log('Memory warning:', usage, threshold),
+    onBatteryWarning: (level, isLow) => console.log('Battery warning:', level, isLow)
+  })
+
+  const mobileLayout = useMobileLayout({
+    enableTouchTargetOptimization: true,
+    enableGestureSupport: true,
+    enableTouchFeedback: true,
+    enablePerformanceOptimization: true
+  }, {
+    onTouchTargetOptimized: (target) => console.log('Touch target optimized:', target),
+    onGestureDetected: (event) => console.log('Gesture detected:', event),
+    onTouchFeedback: (type, target) => console.log('Touch feedback:', type, target)
+  })
+
+  useTabletLayout({
+    enableOrientationOptimization: true,
+    enableSplitViewSupport: true,
+    enableKeyboardOptimization: true,
+    enableSafeAreaOptimization: true,
+    enablePerformanceOptimization: true,
+    enableTouchOptimization: true
+  }, {
+    onOrientationChange: (orientation) => console.log('Tablet orientation:', orientation),
+    onSplitViewChange: (isSplitView) => console.log('Split view:', isSplitView),
+    onKeyboardChange: (isVisible) => console.log('Keyboard visible:', isVisible)
+  })
+
+  // Layout content
+  const renderLayoutContent = () => {
+    const commonContent = (
+      <div className="space-y-6">
+        {/* Feature Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <Card className="border-2 border-cs-primary">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-lg flex items-center gap-2">
+                🎨 Design System
+                <Badge variant="default">Core</Badge>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-cs-text-secondary mb-3">
+                Complete design system with themes, components, and customization
+              </p>
+              <div className="flex items-center gap-2">
+                <Badge variant="outline">Components</Badge>
+                <Badge variant="outline">Themes</Badge>
+                <Badge variant="outline">Customization</Badge>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-2 border-cs-secondary">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-lg flex items-center gap-2">
+                📱 Mobile Features
+                <Badge variant="secondary">Stories 3-6</Badge>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-cs-text-secondary mb-3">
+                Mobile-first animations, performance monitoring, touch optimization, and forms
+              </p>
+              <div className="flex items-center gap-2">
+                <Badge variant="outline">Animations</Badge>
+                <Badge variant="outline">Performance</Badge>
+                <Badge variant="outline">Touch</Badge>
+                <Badge variant="outline">Forms</Badge>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-2 border-cs-accent">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-lg flex items-center gap-2">
+                🚀 Layout System
+                <Badge variant="outline">Story 7</Badge>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-cs-text-secondary mb-3">
+                Device-specific layouts with responsive excellence and performance optimization
+              </p>
+              <div className="flex items-center gap-2">
+                <Badge variant="outline">Responsive</Badge>
+                <Badge variant="outline">Performance</Badge>
+                <Badge variant="outline">Touch</Badge>
+                <Badge variant="outline">Adaptive</Badge>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Performance Overview */}
+        {showPerformanceMetrics && (
+          <Card className="border-2 border-cs-accent">
+            <CardHeader>
+              <CardTitle className="text-xl flex items-center gap-2">
+                📊 Performance Overview
+                <Badge variant="outline">Real-time</Badge>
+              </CardTitle>
+              <CardDescription>
+                Comprehensive performance metrics across all layout systems
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 text-center">
+                <div>
+                  <p className="text-2xl font-bold text-cs-primary">
+                    {layoutPerformance.metrics.performanceScore}
+                  </p>
+                  <p className="text-sm text-cs-text-secondary">Performance Score</p>
+                </div>
+                <div>
+                  <p className="text-2xl font-bold text-cs-secondary">
+                    {layoutPerformance.metrics.fps}
+                  </p>
+                  <p className="text-sm text-cs-text-secondary">FPS</p>
+                </div>
+                <div>
+                  <p className="text-2xl font-bold text-cs-accent">
+                    {layoutPerformance.metrics.memoryUsage.toFixed(1)}%
+                  </p>
+                  <p className="text-sm text-cs-text-secondary">Memory</p>
+                </div>
+                <div>
+                  <p className="text-2xl font-bold text-cs-primary">
+                    {layoutPerformance.metrics.batteryLevel.toFixed(1)}
+                  </p>
+                  <p className="text-sm text-cs-text-secondary">Battery</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Layout Controls */}
+        <Card className="border border-cs-border">
+          <CardHeader>
+            <CardTitle className="text-lg">Layout Controls</CardTitle>
+            <CardDescription>
+              Configure and test different layout behaviors
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex flex-wrap gap-4">
+              <Button
+                variant={activeLayout === 'mobile' ? 'default' : 'outline'}
+                onClick={() => setActiveLayout('mobile')}
+              >
+                📱 Mobile
+              </Button>
+              <Button
+                variant={activeLayout === 'tablet' ? 'default' : 'outline'}
+                onClick={() => setActiveLayout('tablet')}
+              >
+                📱 Tablet
+              </Button>
+              <Button
+                variant={activeLayout === 'desktop' ? 'default' : 'outline'}
+                onClick={() => setActiveLayout('desktop')}
+              >
+                💻 Desktop
+              </Button>
+              <Button
+                variant={activeLayout === 'adaptive' ? 'default' : 'outline'}
+                onClick={() => setActiveLayout('adaptive')}
+              >
+                🔄 Adaptive
+              </Button>
+            </div>
+
+            <div className="flex flex-wrap gap-4">
+              <Button
+                variant={showPerformanceMetrics ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setShowPerformanceMetrics(!showPerformanceMetrics)}
+              >
+                {showPerformanceMetrics ? 'Hide' : 'Show'} Performance
+              </Button>
+              <Button
+                variant={enableTouchOptimization ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setEnableTouchOptimization(!enableTouchOptimization)}
+              >
+                {enableTouchOptimization ? 'Disable' : 'Enable'} Touch
+              </Button>
+              <Button
+                variant={enableAdvancedFeatures ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setEnableAdvancedFeatures(!enableAdvancedFeatures)}
+              >
+                {enableAdvancedFeatures ? 'Disable' : 'Enable'} Advanced
+              </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">Layout Performance:</span>
+                <Badge variant={layoutPerformance.isPerformanceOptimal ? 'default' : 'secondary'}>
+                  {layoutPerformance.isPerformanceOptimal ? 'Optimal' : 'Needs Optimization'}
+                </Badge>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm">Memory Usage:</span>
+                <Badge variant={layoutPerformance.isMemoryOptimal ? 'default' : 'secondary'}>
+                  {layoutPerformance.isMemoryOptimal ? 'Optimal' : 'High Usage'}
+                </Badge>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm">Battery Status:</span>
+                <Badge variant={layoutPerformance.isBatteryOptimal ? 'default' : 'secondary'}>
+                  {layoutPerformance.isBatteryOptimal ? 'Good' : 'Low Battery'}
+                </Badge>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm">Touch Optimization:</span>
+                <Badge variant={mobileLayout.isTouchOptimized ? 'default' : 'secondary'}>
+                  {mobileLayout.isTouchOptimized ? 'Optimized' : 'Needs Optimization'}
+                </Badge>
+              </div>
+            </div>
+
+            {layoutPerformance.layoutOptimizations.length > 0 && (
+              <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
+                <h4 className="font-medium text-sm mb-2">Recommendations:</h4>
+                <ul className="text-xs text-cs-text-secondary space-y-1">
+                  {layoutPerformance.layoutOptimizations.map((optimization, index) => (
+                    <li key={index}>• {optimization}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    )
+
+    switch (activeLayout) {
+      case 'mobile':
+        return (
+          <MobileLayout
+            title="Mobile Layout Demo"
+            description="Touch-optimized mobile layout with performance monitoring"
+            enableTouchOptimization={enableTouchOptimization}
+            enablePerformanceMonitoring={showPerformanceMetrics}
+          >
+            {commonContent}
+          </MobileLayout>
+        )
+      
+      case 'tablet':
+        return (
+          <TabletLayout
+            title="Tablet Layout Demo"
+            description="Tablet-optimized layout with orientation and split view support"
+            enableTouchOptimization={enableTouchOptimization}
+            enablePerformanceMonitoring={showPerformanceMetrics}
+          >
+            {commonContent}
+          </TabletLayout>
+        )
+      
+      case 'desktop':
+        return (
+          <DesktopLayout
+            title="Desktop Layout Demo"
+            description="Desktop-optimized layout with advanced features and performance monitoring"
+            enableAdvancedFeatures={enableAdvancedFeatures}
+            enablePerformanceMonitoring={showPerformanceMetrics}
+          >
+            {commonContent}
+          </DesktopLayout>
+        )
+      
+      case 'adaptive':
+      default:
+        return (
+          <AdaptiveLayout
+            title="Adaptive Layout Demo"
+            description="Automatically adapts to different device types with optimal layouts"
+            enableTouchOptimization={enableTouchOptimization}
+            enablePerformanceMonitoring={showPerformanceMetrics}
+            enableAdvancedFeatures={enableAdvancedFeatures}
+          >
+            {commonContent}
+          </AdaptiveLayout>
+        )
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold text-cs-text-primary mb-2">
+          🚀 Device-Specific Layout & Responsive Excellence
+        </h1>
+        <p className="text-lg text-cs-text-secondary mb-4">
+          Story 7 Implementation - Comprehensive layout system with device-specific optimizations
+        </p>
+        <div className="flex items-center justify-center gap-2">
+          <Badge variant="default">Story 7</Badge>
+          <Badge variant="outline">Responsive Design</Badge>
+          <Badge variant="secondary">Performance</Badge>
+          <Badge variant="outline">Touch Optimization</Badge>
+        </div>
+      </div>
+
+      {/* Layout Demo */}
+      {renderLayoutContent()}
+    </div>
+  )
+}
+
+export default LayoutDemo

package/src/components/ui/layouts/adaptive-layout.tsx

@@ -0,0 +1,139 @@
+import React, { ReactNode, useState, useEffect } from 'react'
+import { Card, CardContent } from '../card'
+import { Badge } from '../badge'
+import { MobileLayout } from './mobile-layout'
+import { TabletLayout } from './tablet-layout'
+import { DesktopLayout } from './desktop-layout'
+
+export type DeviceType = 'mobile' | 'tablet' | 'desktop'
+
+export interface AdaptiveLayoutProps {
+  children: ReactNode
+  title?: string
+  description?: string
+  showHeader?: boolean
+  showSidebar?: boolean
+  enableTouchOptimization?: boolean
+  enablePerformanceMonitoring?: boolean
+  enableAdvancedFeatures?: boolean
+  className?: string
+}
+
+export const AdaptiveLayout: React.FC<AdaptiveLayoutProps> = ({
+  children,
+  title = 'Adaptive Layout',
+  description = 'Automatically adapts to different device types with optimal layouts',
+  showHeader = true,
+  showSidebar = true,
+  enableTouchOptimization = true,
+  enablePerformanceMonitoring = true,
+  enableAdvancedFeatures = true,
+  className = ''
+}) => {
+  const [deviceType, setDeviceType] = useState<DeviceType>('desktop')
+  const [screenSize, setScreenSize] = useState({ width: 0, height: 0 })
+  const [orientation, setOrientation] = useState<'portrait' | 'landscape'>('landscape')
+
+  // Device detection and adaptation
+  useEffect(() => {
+    const detectDevice = () => {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      
+      setScreenSize({ width, height })
+      setOrientation(width > height ? 'landscape' : 'portrait')
+
+      // Device type detection based on screen size
+      if (width < 768) {
+        setDeviceType('mobile')
+      } else if (width < 1024) {
+        setDeviceType('tablet')
+      } else {
+        setDeviceType('desktop')
+      }
+    }
+
+    detectDevice()
+    window.addEventListener('resize', detectDevice)
+    window.addEventListener('orientationchange', detectDevice)
+
+    return () => {
+      window.removeEventListener('resize', detectDevice)
+      window.removeEventListener('orientationchange', detectDevice)
+    }
+  }, [])
+
+  // Render appropriate layout based on device type
+  const renderLayout = () => {
+    const commonProps = {
+      title,
+      description,
+      showHeader,
+      enablePerformanceMonitoring,
+      className
+    }
+
+    switch (deviceType) {
+      case 'mobile':
+        return (
+          <MobileLayout
+            {...commonProps}
+            showFooter={true}
+            enableTouchOptimization={enableTouchOptimization}
+          >
+            {children}
+          </MobileLayout>
+        )
+      
+      case 'tablet':
+        return (
+          <TabletLayout
+            {...commonProps}
+            showSidebar={showSidebar}
+            enableTouchOptimization={enableTouchOptimization}
+          >
+            {children}
+          </TabletLayout>
+        )
+      
+      case 'desktop':
+        return (
+          <DesktopLayout
+            {...commonProps}
+            showSidebar={showSidebar}
+            showTopBar={true}
+            enableAdvancedFeatures={enableAdvancedFeatures}
+          >
+            {children}
+          </DesktopLayout>
+        )
+      
+      default:
+        return <div>{children}</div>
+    }
+  }
+
+  return (
+    <div className={className}>
+      {/* Device Info Overlay (for development/testing) */}
+      <div className="fixed top-4 right-4 z-50">
+        <Card className="bg-cs-surface/90 backdrop-blur-sm border-2 border-cs-accent">
+          <CardContent className="p-3">
+            <div className="flex items-center gap-2 text-xs">
+              <Badge variant="outline">{deviceType}</Badge>
+              <Badge variant="secondary">{orientation}</Badge>
+              <span className="text-cs-text-secondary">
+                {screenSize.width}×{screenSize.height}
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Render appropriate layout */}
+      {renderLayout()}
+    </div>
+  )
+}
+
+export default AdaptiveLayout