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

package/dist/components/ui/layouts/adaptive-layout.d.ts

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

package/dist/components/ui/layouts/adaptive-layout.esm.js

@@ -0,0 +1,120 @@
+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}
+
+export const AdaptiveLayout= ({
+  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, height})
+  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' )
+
+      // 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'}
+            showFooter={true}
+            enableTouchOptimization={enableTouchOptimization}
+          >
+            {children}
+          </MobileLayout>
+        )
+      
+      case 'tablet'}
+            showSidebar={showSidebar}
+            enableTouchOptimization={enableTouchOptimization}
+          >
+            {children}
+          </TabletLayout>
+        )
+      
+      case 'desktop'}
+            showSidebar={showSidebar}
+            showTopBar={true}
+            enableAdvancedFeatures={enableAdvancedFeatures}
+          >
+            {children}
+          </DesktopLayout>
+        )
+      
+      default}</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

package/dist/components/ui/layouts/adaptive-layout.js

@@ -0,0 +1,120 @@
+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}
+
+export const AdaptiveLayout= ({
+  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, height})
+  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' )
+
+      // 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'}
+            showFooter={true}
+            enableTouchOptimization={enableTouchOptimization}
+          >
+            {children}
+          </MobileLayout>
+        )
+      
+      case 'tablet'}
+            showSidebar={showSidebar}
+            enableTouchOptimization={enableTouchOptimization}
+          >
+            {children}
+          </TabletLayout>
+        )
+      
+      case 'desktop'}
+            showSidebar={showSidebar}
+            showTopBar={true}
+            enableAdvancedFeatures={enableAdvancedFeatures}
+          >
+            {children}
+          </DesktopLayout>
+        )
+      
+      default}</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

package/dist/components/ui/layouts/desktop-layout.d.ts

@@ -0,0 +1,219 @@
+export interface DesktopLayoutProps {
+  children: ReactNode
+  title?: string
+  description?: string
+  showHeader?: boolean
+  showSidebar?: boolean
+  showTopBar?: boolean
+  enablePerformanceMonitoring?: boolean
+  enableAdvancedFeatures?: boolean
+  className?: string
+}
+
+export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
+  children,
+  title = 'Desktop Layout',
+  description = 'Desktop-optimized layout with advanced features and performance monitoring',
+  showHeader = true,
+  showSidebar = true,
+  showTopBar = true,
+  enablePerformanceMonitoring = true,
+  enableAdvancedFeatures = true,
+  className = ''
+}) => {
+  const [performanceMetrics, setPerformanceMetrics] = useState({
+    renderTime: 0,
+    memoryUsage: 0,
+    cpuUsage: 0,
+    fps: 60
+  })
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
+
+  // Performance monitoring
+  useEffect(() => {
+    if (!enablePerformanceMonitoring) return
+
+    const measurePerformance = () => {
+      const startTime = performance.now()
+
+      // Simulate performance measurement
+      setTimeout(() => {
+        const endTime = performance.now()
+        const renderTime = endTime - startTime
+
+        setPerformanceMetrics(prev => ({
+          ...prev,
+          renderTime,
+          memoryUsage: Math.random() * 100,
+          cpuUsage: Math.random() * 50,
+          fps: 55 + Math.random() * 10
+        }))
+      }, 100)
+    }
+
+    measurePerformance()
+    const interval = setInterval(measurePerformance, 4000)
+
+    return () => clearInterval(interval)
+  }, [enablePerformanceMonitoring])
+
+  return (
+    <div className={`min-h-screen bg-cs-page-bg ${className}`}>
+      {/* Top Bar */}
+      {showTopBar && (
+        <div className="bg-cs-surface border-b border-cs-border px-6 py-2">
+          <div className="flex items-center justify-between text-sm text-cs-text-secondary">
+            <span>Stan Design System</span>
+            <div className="flex items-center gap-4">
+              <span>Desktop Layout</span>
+              {enableAdvancedFeatures && <span>Advanced Features Enabled</span>}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Desktop Header */}
+      {showHeader && (
+        <header className="bg-cs-surface border-b border-cs-border px-8 py-6">
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <h1 className="text-3xl font-bold text-cs-text-primary">{title}</h1>
+              {description && (
+                <p className="text-lg text-cs-text-secondary mt-3">{description}</p>
+              )}
+            </div>
+            <div className="flex items-center gap-4">
+              <Badge variant="outline" className="text-base">
+                Desktop
+              </Badge>
+              {enableAdvancedFeatures && (
+                <Badge variant="default" className="text-base">
+                  Advanced
+                </Badge>
+              )}
+              {enablePerformanceMonitoring && (
+                <Badge variant="secondary" className="text-base">
+                  Performance
+                </Badge>
+              )}
+            </div>
+          </div>
+        </header>
+      )}
+
+      {/* Main Content with Sidebar */}
+      <div className="flex flex-1">
+        {/* Sidebar */}
+        {showSidebar && (
+          <aside className={`bg-cs-surface border-r border-cs-border transition-all duration-300 ${
+            sidebarCollapsed ? 'w-16' : 'w-80'
+          }`}>
+            <div className="p-4">
+              <div className="flex items-center justify-between mb-6">
+                <h3 className={`font-semibold text-cs-text-primary ${
+                  sidebarCollapsed ? 'hidden' : 'block'
+                }`}>
+                  Navigation
+                </h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+                  className="ml-auto"
+                >
+                  {sidebarCollapsed ? '→' : '←'}
+                </Button>
+              </div>
+
+              <nav className="space-y-2">
+                <Button variant="ghost" className={`w-full justify-start ${
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
+                  🏠 {!sidebarCollapsed && 'Dashboard'}
+                </Button>
+                <Button variant="ghost" className={`w-full justify-start ${
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
+                  🎨 {!sidebarCollapsed && 'Design System'}
+                </Button>
+                <Button variant="ghost" className={`w-full justify-start ${
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
+                  📱 {!sidebarCollapsed && 'Mobile Features'}
+                </Button>
+                <Button variant="ghost" className={`w-full justify-start ${
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
+                  🧪 {!sidebarCollapsed && 'Interactive Demos'}
+                </Button>
+                <Button variant="ghost" className={`w-full justify-start ${
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
+                  📊 {!sidebarCollapsed && 'Performance'}
+                </Button>
+                <Button variant="ghost" className={`w-full justify-start ${
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
+                  ⚙️ {!sidebarCollapsed && 'Configuration'}
+                </Button>
+              </nav>
+            </div>
+          </aside>
+        )}
+
+        {/* Main Content */}
+        <main className="flex-1 p-8 space-y-8">
+          {/* Performance Metrics */}
+          {enablePerformanceMonitoring && (
+            <Card className="border-2 border-cs-accent">
+              <CardHeader>
+                <CardTitle className="text-2xl flex items-center gap-3">
+                  📊 Desktop Performance Metrics
+                  <Badge variant="outline" className="text-base">Real-time</Badge>
+                </CardTitle>
+                <CardDescription className="text-base">
+                  Advanced performance monitoring for desktop devices
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 xl:grid-cols-4 gap-8 text-center">
+                  <div>
+                    <p className="text-4xl font-bold text-cs-primary">
+                      {performanceMetrics.renderTime.toFixed(1)}ms
+                    </p>
+                    <p className="text-base text-cs-text-secondary">Render Time</p>
+                  </div>
+                  <div>
+                    <p className="text-4xl font-bold text-cs-secondary">
+                      {performanceMetrics.memoryUsage.toFixed(1)}%
+                    </p>
+                    <p className="text-base text-cs-text-secondary">Memory Usage</p>
+                  </div>
+                  <div>
+                    <p className="text-4xl font-bold text-cs-accent">
+                      {performanceMetrics.cpuUsage.toFixed(1)}%
+                    </p>
+                    <p className="text-base text-cs-text-secondary">CPU Usage</p>
+                  </div>
+                  <div>
+                    <p className="text-4xl font-bold text-cs-primary">
+                      {performanceMetrics.fps.toFixed(0)}
+                    </p>
+                    <p className="text-base text-cs-text-secondary">FPS</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Content Area */}
+          <div className="space-y-8">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default DesktopLayout