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

package/dist/components/ui/layout-demo.d.ts

@@ -0,0 +1,352 @@
+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