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

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

@@ -0,0 +1,250 @@
+import React, { useState } from 'react'
+import { Card } from './card'
+import { Button } from './button'
+import { Badge } from './badge'
+import { 
+  AnimatedContainer, 
+  StaggeredContainer,
+  useAnimationProfile,
+  usePerformanceMode
+} from './animation'
+
+
+export const AnimationDemo: React.FC = () => {
+  const [currentAnimation, setCurrentAnimation] = useState<'fadeIn' | 'slideIn' | 'scaleIn' | 'bounce'>('fadeIn')
+  const [isAnimating, setIsAnimating] = useState(false)
+  
+  const { profile, performanceMetrics, deviceInfo } = useAnimationProfile()
+  const { performanceMode, shouldOptimizeForBattery } = usePerformanceMode()
+
+  const animations = [
+    { key: 'fadeIn' as const, label: 'Fade In', icon: '✨' },
+    { key: 'slideIn' as const, label: 'Slide In', icon: '➡️' },
+    { key: 'scaleIn' as const, label: 'Scale In', icon: '🔍' },
+    { key: 'bounce' as const, label: 'Bounce', icon: '🎾' }
+  ]
+
+  const handleAnimationChange = (animation: typeof currentAnimation) => {
+    setCurrentAnimation(animation)
+    setIsAnimating(true)
+    
+    // Reset animation state after a delay
+    setTimeout(() => setIsAnimating(false), 1000)
+  }
+
+  const performanceIndicators = [
+    { label: 'FPS', value: performanceMetrics.fps, unit: '', color: performanceMetrics.fps > 50 ? 'green' : performanceMetrics.fps > 30 ? 'yellow' : 'red' },
+    { label: 'Memory', value: performanceMetrics.memoryUsage ? Math.round(performanceMetrics.memoryUsage * 100) : 'N/A', unit: '%', color: 'blue' },
+    { label: 'Battery', value: performanceMetrics.batteryLevel ? Math.round(performanceMetrics.batteryLevel * 100) : 'N/A', unit: '%', color: performanceMetrics.isLowPowerMode ? 'red' : 'green' }
+  ]
+
+  return (
+    <div className="space-y-6 p-6">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold mb-2">Mobile-First Animation System</h1>
+        <p className="text-gray-600 dark:text-gray-400">
+          Device-specific animations with performance optimization and battery awareness
+        </p>
+      </div>
+
+      {/* Performance Metrics */}
+      <Card className="p-4">
+        <h2 className="text-xl font-semibold mb-4">Performance Metrics</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {performanceIndicators.map((indicator) => (
+            <div key={indicator.label} className="text-center">
+              <div className={`text-2xl font-bold text-${indicator.color}-600`}>
+                {indicator.value}{indicator.unit}
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">
+                {indicator.label}
+              </div>
+            </div>
+          ))}
+        </div>
+        
+        <div className="mt-4 space-y-2">
+          <div className="flex items-center justify-between">
+            <span>Performance Mode:</span>
+            <Badge variant={performanceMode === 'high' ? 'default' : performanceMode === 'medium' ? 'secondary' : 'destructive'}>
+              {performanceMode.toUpperCase()}
+            </Badge>
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Battery Optimization:</span>
+            <Badge variant={shouldOptimizeForBattery ? 'destructive' : 'default'}>
+              {shouldOptimizeForBattery ? 'Enabled' : 'Disabled'}
+            </Badge>
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Reduced Motion:</span>
+            <Badge variant={profile.performance.reducedMotion ? 'destructive' : 'default'}>
+              {profile.performance.reducedMotion ? 'Enabled' : 'Disabled'}
+            </Badge>
+          </div>
+        </div>
+      </Card>
+
+      {/* Device Information */}
+      <Card className="p-4">
+        <h2 className="text-xl font-semibold mb-4">Device Profile</h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="text-center">
+            <div className="text-lg font-semibold">{deviceInfo.screenSize}</div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">Screen Size</div>
+          </div>
+          <div className="text-center">
+            <div className="text-lg font-semibold">{deviceInfo.orientation}</div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">Orientation</div>
+          </div>
+          <div className="text-center">
+            <div className="text-lg font-semibold">{deviceInfo.touchDevice ? 'Touch' : 'Mouse'}</div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">Input Type</div>
+          </div>
+          <div className="text-center">
+            <div className="text-lg font-semibold">{deviceInfo.isMobile ? 'Mobile' : deviceInfo.isTablet ? 'Tablet' : 'Desktop'}</div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">Device Type</div>
+          </div>
+        </div>
+      </Card>
+
+      {/* Animation Controls */}
+      <Card className="p-4">
+        <h2 className="text-xl font-semibold mb-4">Animation Controls</h2>
+        <div className="flex flex-wrap gap-2 mb-4">
+          {animations.map((animation) => (
+            <Button
+              key={animation.key}
+              variant={currentAnimation === animation.key ? 'default' : 'outline'}
+              onClick={() => handleAnimationChange(animation.key)}
+              disabled={isAnimating}
+              className="flex items-center gap-2"
+            >
+              <span>{animation.icon}</span>
+              {animation.label}
+            </Button>
+          ))}
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">Current Animation Profile</label>
+            <div className="space-y-2 text-sm">
+              <div>Duration: {profile.duration.normal}</div>
+              <div>Easing: {profile.easing.ease}</div>
+              <div>Performance: {profile.performance.mode}</div>
+            </div>
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">Animation Classes</label>
+            <div className="text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded">
+              {deviceInfo.isMobile && 'coach-stan-mobile-animation '}
+              {deviceInfo.isTablet && 'coach-stan-tablet-animation '}
+              {deviceInfo.isDesktop && 'coach-stan-desktop-animation '}
+              {shouldOptimizeForBattery && 'coach-stan-battery-saver '}
+              {profile.performance.reducedMotion && 'reduced-motion'}
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      {/* Animation Examples */}
+      <Card className="p-4">
+        <h2 className="text-xl font-semibold mb-4">Animation Examples</h2>
+        
+        {/* Single Animation */}
+        <div className="mb-6">
+          <h3 className="text-lg font-medium mb-3">Single Animation</h3>
+          <AnimatedContainer
+            animation={currentAnimation}
+            duration="normal"
+            easing="ease"
+            className="h-32 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center text-white font-semibold"
+          >
+            <div className="text-center">
+              <div className="text-2xl mb-2">🎭</div>
+              <div>Animated Element</div>
+              <div className="text-sm opacity-75">{currentAnimation}</div>
+            </div>
+          </AnimatedContainer>
+        </div>
+
+        {/* Staggered Animations */}
+        <div className="mb-6">
+          <h3 className="text-lg font-medium mb-3">Staggered Animations</h3>
+          <StaggeredContainer
+            animation="slideIn"
+            duration="fast"
+            staggerDelay={0.1}
+            staggerDirection="forward"
+            className="grid grid-cols-2 md:grid-cols-4 gap-4"
+          >
+            {[1, 2, 3, 4].map((num) => (
+              <div
+                key={num}
+                className="h-20 bg-gradient-to-br from-green-400 to-blue-500 rounded-lg flex items-center justify-center text-white font-bold text-xl"
+              >
+                {num}
+              </div>
+            ))}
+          </StaggeredContainer>
+        </div>
+
+        {/* Performance Mode Comparison */}
+        <div>
+          <h3 className="text-lg font-medium mb-3">Performance Mode Comparison</h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <AnimatedContainer
+              animation="fadeIn"
+              duration="fast"
+              className="h-24 bg-red-400 rounded-lg flex items-center justify-center text-white font-semibold"
+            >
+              Fast Mode
+            </AnimatedContainer>
+            <AnimatedContainer
+              animation="fadeIn"
+              duration="normal"
+              className="h-24 bg-yellow-400 rounded-lg flex items-center justify-center text-white font-semibold"
+            >
+              Normal Mode
+            </AnimatedContainer>
+            <AnimatedContainer
+              animation="fadeIn"
+              duration="slow"
+              className="h-24 bg-green-400 rounded-lg flex items-center justify-center text-white font-semibold"
+            >
+              Slow Mode
+            </AnimatedContainer>
+          </div>
+        </div>
+      </Card>
+
+      {/* Technical Details */}
+      <Card className="p-4">
+        <h2 className="text-xl font-semibold mb-4">Technical Details</h2>
+        <div className="space-y-4">
+          <div>
+            <h3 className="font-medium mb-2">Animation Profile</h3>
+            <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
+              {JSON.stringify(profile, null, 2)}
+            </pre>
+          </div>
+          
+          <div>
+            <h3 className="font-medium mb-2">Device Info</h3>
+            <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
+              {JSON.stringify(deviceInfo, null, 2)}
+            </pre>
+          </div>
+          
+          <div>
+            <h3 className="font-medium mb-2">Performance Metrics</h3>
+            <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
+              {JSON.stringify(performanceMetrics, null, 2)}
+            </pre>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const badgeVariants = cva(
+  "badge",
+  {
+    variants: {
+      variant: {
+        default: "badge--default",
+        secondary: "badge--secondary",
+        destructive: "badge--destructive",
+        outline: "badge--outline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }