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

package/dist/components/ui/enterprise-mobile-experience-demo.js

@@ -12,13 +12,14 @@ import {
   EnterpriseNotification
 } from './enterprise-mobile-experience'
 
-export const EnterpriseMobileExperienceDemo= () => {
+export const EnterpriseMobileExperienceDemo: React.FC = () => {
   const [activeDemo, setActiveDemo] = useState<'overview' | 'quality' | 'performance' | 'accessibility' | 'components'>('overview')
   const [formData, setFormData] = useState({
-    name,
-    email,
-    company,
-    feedback})
+    name: '',
+    email: '',
+    company: '',
+    feedback: ''
+  })
   const [showNotification, setShowNotification] = useState(false)
   const [notificationType, setNotificationType] = useState<'success' | 'warning' | 'error' | 'info'>('success')
 
@@ -32,36 +33,37 @@ export const EnterpriseMobileExperienceDemo= () => {
     runComprehensiveOptimization,
     clearOptimizationHistory
   } = useEnterpriseMobileExperience({
-    enableProfessionalQuality,
-    enablePerformanceExcellence,
-    enableAccessibilityCompliance,
-    enableUserExperienceExcellence,
-    enableVisualRefinement,
-    enableInteractionRefinement}, {
-    onQualityImproved) => {
-      console.log('Quality improved, metrics)
+    enableProfessionalQuality: true,
+    enablePerformanceExcellence: true,
+    enableAccessibilityCompliance: true,
+    enableUserExperienceExcellence: true,
+    enableVisualRefinement: true,
+    enableInteractionRefinement: true
+  }, {
+    onQualityImproved: (metrics) => {
+      console.log('Quality improved:', metrics)
     },
-    onPerformanceOptimized) => {
-      console.log('Performance optimized, metrics)
+    onPerformanceOptimized: (metrics) => {
+      console.log('Performance optimized:', metrics)
     },
-    onAccessibilityEnhanced) => {
-      console.log('Accessibility enhanced, metrics)
+    onAccessibilityEnhanced: (metrics) => {
+      console.log('Accessibility enhanced:', metrics)
     },
-    onPhaseCompleted) => {
-      console.log('Phase completed, phase)
+    onPhaseCompleted: (phase) => {
+      console.log('Phase completed:', phase)
     },
-    onEnterpriseReady) => {
-      console.log('Enterprise ready, state)
+    onEnterpriseReady: (state) => {
+      console.log('Enterprise ready:', state)
       setShowNotification(true)
       setNotificationType('success')
     }
   })
 
-  const handleInputChange = (field, value) => {
-    setFormData(prev => ({ ...prev, [field]}))
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }))
   }
 
-  const handleShowNotification = (type) => {
+  const handleShowNotification = (type: 'success' | 'warning' | 'error' | 'info') => {
     setNotificationType(type)
     setShowNotification(true)
   }
@@ -72,7 +74,8 @@ export const EnterpriseMobileExperienceDemo= () => {
       <div className="space-y-6">
         <h3 className="text-lg font-semibold text-cs-text-primary">🏆 Enterprise Status Overview</h3>
         
-        <div className="grid grid-cols-1 md="premium" className="text-center">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <EnterpriseCard variant="premium" className="text-center">
             <div className="space-y-4">
               <div className="text-4xl font-bold text-cs-primary">
                 {enterpriseState.overallQualityScore}/100
@@ -81,10 +84,17 @@ export const EnterpriseMobileExperienceDemo= () => {
                 Overall Quality Score
               </div>
               <div className="text-sm text-cs-text-secondary">
-                {enterpriseState.overallQualityScore >= 90 ? 'Exceptional Quality' = 80 ? 'High Quality' = 70 ? 'Good Quality' }
+                {enterpriseState.overallQualityScore >= 90 ? 'Exceptional Quality' :
+                 enterpriseState.overallQualityScore >= 80 ? 'High Quality' :
+                 enterpriseState.overallQualityScore >= 70 ? 'Good Quality' : 'Needs Improvement'}
               </div>
               <EnterpriseStatus phase={
-                enterpriseState.currentPhase === 'initialization' ? 'initializing' === 'optimization' ? 'optimizing' === 'polish' ? 'polishing' === 'verification' ? 'verifying' }>
+                enterpriseState.currentPhase === 'initialization' ? 'initializing' :
+                enterpriseState.currentPhase === 'optimization' ? 'optimizing' :
+                enterpriseState.currentPhase === 'polish' ? 'polishing' :
+                enterpriseState.currentPhase === 'verification' ? 'verifying' :
+                'complete'
+              }>
                 {enterpriseState.currentPhase.charAt(0).toUpperCase() + enterpriseState.currentPhase.slice(1)}
               </EnterpriseStatus>
             </div>
@@ -99,7 +109,7 @@ export const EnterpriseMobileExperienceDemo= () => {
                 Optimizations Applied
               </div>
               <div className="text-sm text-cs-text-secondary">
-                Last).toLocaleTimeString() }
+                Last: {enterpriseState.lastOptimizationTime ? new Date(enterpriseState.lastOptimizationTime).toLocaleTimeString() : 'Never'}
               </div>
               <EnterpriseButton
                 onClick={runComprehensiveOptimization}
@@ -107,7 +117,7 @@ export const EnterpriseMobileExperienceDemo= () => {
                 loading={isOptimizing}
                 variant="premium"
               >
-                {isOptimizing ? 'Optimizing...' }
+                {isOptimizing ? 'Optimizing...' : 'Run Optimization'}
               </EnterpriseButton>
             </div>
           </EnterpriseCard>
@@ -146,18 +156,18 @@ export const EnterpriseMobileExperienceDemo= () => {
       <div className="space-y-6">
         <h3 className="text-lg font-semibold text-cs-text-primary">🚀 Enterprise Ready Status</h3>
         
-        <EnterpriseCard variant={enterpriseState.isEnterpriseReady ? 'featured' }>
+        <EnterpriseCard variant={enterpriseState.isEnterpriseReady ? 'featured' : 'default'}>
           <div className="text-center space-y-4">
             <div className="text-6xl">
-              {enterpriseState.isEnterpriseReady ? '🏆' }
+              {enterpriseState.isEnterpriseReady ? '🏆' : '⏳'}
             </div>
             <div className="text-2xl font-bold text-cs-text-primary">
-              {enterpriseState.isEnterpriseReady ? 'Enterprise Ready!' }
+              {enterpriseState.isEnterpriseReady ? 'Enterprise Ready!' : 'Preparing for Enterprise'}
             </div>
             <div className="text-cs-text-secondary">
               {enterpriseState.isEnterpriseReady 
                 ? 'Your design system meets enterprise-grade standards and is ready for production use.'
-                }
+                : 'Optimization in progress. Your design system will be enterprise-ready soon.'}
             </div>
             {enterpriseState.isEnterpriseReady && (
               <div className="flex justify-center">
@@ -178,10 +188,12 @@ export const EnterpriseMobileExperienceDemo= () => {
       <div className="space-y-6">
         <h3 className="text-lg font-semibold text-cs-text-primary">✨ Professional Quality Assessment</h3>
         
-        <div className="grid grid-cols-1 md="text-lg font-semibold text-cs-text-primary mb-4">Visual Quality</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <EnterpriseCard>
+            <h4 className="text-lg font-semibold text-cs-text-primary mb-4">Visual Quality</h4>
             <EnterpriseProgress
               value={qualityMetrics.visualQuality}
-              variant={qualityMetrics.visualQuality >= 90 ? 'success' = 80 ? 'warning' }
+              variant={qualityMetrics.visualQuality >= 90 ? 'success' : qualityMetrics.visualQuality >= 80 ? 'warning' : 'error'}
               size="lg"
             />
             <div className="mt-4 text-sm text-cs-text-secondary">
@@ -193,7 +205,7 @@ export const EnterpriseMobileExperienceDemo= () => {
             <h4 className="text-lg font-semibold text-cs-text-primary mb-4">Interaction Quality</h4>
             <EnterpriseProgress
               value={qualityMetrics.interactionQuality}
-              variant={qualityMetrics.interactionQuality >= 90 ? 'success' = 80 ? 'warning' }
+              variant={qualityMetrics.interactionQuality >= 90 ? 'success' : qualityMetrics.interactionQuality >= 80 ? 'warning' : 'error'}
               size="lg"
             />
             <div className="mt-4 text-sm text-cs-text-secondary">
@@ -202,10 +214,12 @@ export const EnterpriseMobileExperienceDemo= () => {
           </EnterpriseCard>
         </div>
 
-        <div className="grid grid-cols-1 md="text-lg font-semibold text-cs-text-primary mb-4">Mobile Optimization</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <EnterpriseCard>
+            <h4 className="text-lg font-semibold text-cs-text-primary mb-4">Mobile Optimization</h4>
             <EnterpriseProgress
               value={qualityMetrics.mobileOptimization}
-              variant={qualityMetrics.mobileOptimization >= 90 ? 'success' = 80 ? 'warning' }
+              variant={qualityMetrics.mobileOptimization >= 90 ? 'success' : qualityMetrics.mobileOptimization >= 80 ? 'warning' : 'error'}
               size="lg"
             />
             <div className="mt-4 text-sm text-cs-text-secondary">
@@ -217,7 +231,7 @@ export const EnterpriseMobileExperienceDemo= () => {
             <h4 className="text-lg font-semibold text-cs-text-primary mb-4">Industry Benchmark</h4>
             <EnterpriseProgress
               value={qualityMetrics.industryBenchmark}
-              variant={qualityMetrics.industryBenchmark >= 90 ? 'success' = 80 ? 'warning' }
+              variant={qualityMetrics.industryBenchmark >= 90 ? 'success' : qualityMetrics.industryBenchmark >= 80 ? 'warning' : 'error'}
               size="lg"
             />
             <div className="mt-4 text-sm text-cs-text-secondary">
@@ -254,7 +268,8 @@ export const EnterpriseMobileExperienceDemo= () => {
                 </div>
               ))}
             </div>
-          ) ="text-center py-8 text-cs-text-secondary">
+          ) : (
+            <div className="text-center py-8 text-cs-text-secondary">
               No optimizations applied yet. Run optimization to see improvements.
             </div>
           )}
@@ -269,18 +284,20 @@ export const EnterpriseMobileExperienceDemo= () => {
       <div className="space-y-6">
         <h3 className="text-lg font-semibold text-cs-text-primary">⚡ Performance Excellence</h3>
         
-        <div className="grid grid-cols-1 md="text-lg font-semibold text-cs-text-primary mb-4">Frame Rate Performance</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <EnterpriseCard>
+            <h4 className="text-lg font-semibold text-cs-text-primary mb-4">Frame Rate Performance</h4>
             <div className="text-center space-y-3">
               <div className="text-4xl font-bold text-cs-primary">
                 {performanceMetrics.frameRate}
               </div>
               <div className="text-lg text-cs-text-primary">FPS</div>
               <div className="text-sm text-cs-text-secondary">
-                Target} FPS
+                Target: 60 FPS | Current: {performanceMetrics.frameRate} FPS
               </div>
               <EnterpriseProgress
                 value={(performanceMetrics.frameRate / 60) * 100}
-                variant={performanceMetrics.frameRate >= 55 ? 'success' = 45 ? 'warning' }
+                variant={performanceMetrics.frameRate >= 55 ? 'success' : performanceMetrics.frameRate >= 45 ? 'warning' : 'error'}
                 size="lg"
               />
             </div>
@@ -294,18 +311,20 @@ export const EnterpriseMobileExperienceDemo= () => {
               </div>
               <div className="text-lg text-cs-text-primary">Efficiency</div>
               <div className="text-sm text-cs-text-secondary">
-                Usage}% | Available}%
+                Usage: {performanceMetrics.memoryUsage}% | Available: {100 - performanceMetrics.memoryUsage}%
               </div>
               <EnterpriseProgress
                 value={100 - performanceMetrics.memoryUsage}
-                variant={performanceMetrics.memoryUsage <= 20 ? 'success' = 40 ? 'warning' }
+                variant={performanceMetrics.memoryUsage <= 20 ? 'success' : performanceMetrics.memoryUsage <= 40 ? 'warning' : 'error'}
                 size="lg"
               />
             </div>
           </EnterpriseCard>
         </div>
 
-        <div className="grid grid-cols-1 md="text-lg font-semibold text-cs-text-primary mb-4">Battery Efficiency</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <EnterpriseCard>
+            <h4 className="text-lg font-semibold text-cs-text-primary mb-4">Battery Efficiency</h4>
             <div className="text-center space-y-3">
               <div className="text-4xl font-bold text-cs-primary">
                 {performanceMetrics.batteryEfficiency}%
@@ -316,7 +335,7 @@ export const EnterpriseMobileExperienceDemo= () => {
               </div>
               <EnterpriseProgress
                 value={performanceMetrics.batteryEfficiency}
-                variant={performanceMetrics.batteryEfficiency >= 80 ? 'success' = 60 ? 'warning' }
+                variant={performanceMetrics.batteryEfficiency >= 80 ? 'success' : performanceMetrics.batteryEfficiency >= 60 ? 'warning' : 'error'}
                 size="lg"
               />
             </div>
@@ -334,7 +353,7 @@ export const EnterpriseMobileExperienceDemo= () => {
               </div>
               <EnterpriseProgress
                 value={performanceMetrics.networkEfficiency}
-                variant={performanceMetrics.networkEfficiency >= 80 ? 'success' = 60 ? 'warning' }
+                variant={performanceMetrics.networkEfficiency >= 80 ? 'success' : performanceMetrics.networkEfficiency >= 60 ? 'warning' : 'error'}
                 size="lg"
               />
             </div>
@@ -370,10 +389,12 @@ export const EnterpriseMobileExperienceDemo= () => {
       <div className="space-y-6">
         <h3 className="text-lg font-semibold text-cs-text-primary">♿ Accessibility Compliance</h3>
         
-        <div className="grid grid-cols-1 md="text-lg font-semibold text-cs-text-primary mb-4">WCAG 2.1 AA Compliance</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <EnterpriseCard>
+            <h4 className="text-lg font-semibold text-cs-text-primary mb-4">WCAG 2.1 AA Compliance</h4>
             <EnterpriseProgress
               value={accessibilityMetrics.wcagCompliance}
-              variant={accessibilityMetrics.wcagCompliance >= 90 ? 'success' = 80 ? 'warning' }
+              variant={accessibilityMetrics.wcagCompliance >= 90 ? 'success' : accessibilityMetrics.wcagCompliance >= 80 ? 'warning' : 'error'}
               size="lg"
             />
             <div className="mt-4 text-sm text-cs-text-secondary">
@@ -385,7 +406,7 @@ export const EnterpriseMobileExperienceDemo= () => {
             <h4 className="text-lg font-semibold text-cs-text-primary mb-4">Screen Reader Support</h4>
             <EnterpriseProgress
               value={accessibilityMetrics.screenReaderSupport}
-              variant={accessibilityMetrics.screenReaderSupport >= 90 ? 'success' = 80 ? 'warning' }
+              variant={accessibilityMetrics.screenReaderSupport >= 90 ? 'success' : accessibilityMetrics.screenReaderSupport >= 80 ? 'warning' : 'error'}
               size="lg"
             />
             <div className="mt-4 text-sm text-cs-text-secondary">
@@ -394,10 +415,12 @@ export const EnterpriseMobileExperienceDemo= () => {
           </EnterpriseCard>
         </div>
 
-        <div className="grid grid-cols-1 md="text-lg font-semibold text-cs-text-primary mb-4">Keyboard Navigation</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <EnterpriseCard>
+            <h4 className="text-lg font-semibold text-cs-text-primary mb-4">Keyboard Navigation</h4>
             <EnterpriseProgress
               value={accessibilityMetrics.keyboardNavigation}
-              variant={accessibilityMetrics.keyboardNavigation >= 90 ? 'success' = 80 ? 'warning' }
+              variant={accessibilityMetrics.keyboardNavigation >= 90 ? 'success' : accessibilityMetrics.keyboardNavigation >= 80 ? 'warning' : 'error'}
               size="lg"
             />
             <div className="mt-4 text-sm text-cs-text-secondary">
@@ -409,7 +432,7 @@ export const EnterpriseMobileExperienceDemo= () => {
             <h4 className="text-lg font-semibold text-cs-text-primary mb-4">Color Contrast</h4>
             <EnterpriseProgress
               value={accessibilityMetrics.colorContrast}
-              variant={accessibilityMetrics.colorContrast >= 90 ? 'success' = 80 ? 'warning' }
+              variant={accessibilityMetrics.colorContrast >= 90 ? 'success' : accessibilityMetrics.colorContrast >= 80 ? 'warning' : 'error'}
               size="lg"
             />
             <div className="mt-4 text-sm text-cs-text-secondary">
@@ -423,7 +446,8 @@ export const EnterpriseMobileExperienceDemo= () => {
       <div className="space-y-6">
         <h3 className="text-lg font-semibold text-cs-text-primary">🔧 Accessibility Features</h3>
         
-        <div className="grid grid-cols-1 md="interactive" className="text-center">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <EnterpriseCard variant="interactive" className="text-center">
             <div className="text-3xl mb-2">🎭</div>
             <h4 className="font-semibold text-cs-text-primary">Motion Reduction</h4>
             <div className="text-sm text-cs-text-secondary">
@@ -457,7 +481,9 @@ export const EnterpriseMobileExperienceDemo= () => {
       <div className="space-y-6">
         <h3 className="text-lg font-semibold text-cs-text-primary">🎨 Enterprise Components Showcase</h3>
         
-        <div className="grid grid-cols-1 md="text-lg font-semibold text-cs-text-primary mb-4">Enterprise Buttons</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <EnterpriseCard>
+            <h4 className="text-lg font-semibold text-cs-text-primary mb-4">Enterprise Buttons</h4>
             <div className="space-y-3">
               <EnterpriseButton variant="default" size="default">
                 Primary Button
@@ -499,7 +525,9 @@ export const EnterpriseMobileExperienceDemo= () => {
           </EnterpriseCard>
         </div>
 
-        <div className="grid grid-cols-1 md="text-lg font-semibold text-cs-text-primary mb-4">Progress Indicators</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <EnterpriseCard>
+            <h4 className="text-lg font-semibold text-cs-text-primary mb-4">Progress Indicators</h4>
             <div className="space-y-4">
               <EnterpriseProgress value={75} variant="success" />
               <EnterpriseProgress value={45} variant="warning" />
@@ -524,7 +552,9 @@ export const EnterpriseMobileExperienceDemo= () => {
         
         <EnterpriseCard>
           <form className="space-y-6">
-            <div className="grid grid-cols-1 md="Full Name"
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <EnterpriseInput
+                label="Full Name"
                 placeholder="Enter your full name"
                 value={formData.name}
                 onChange={(e) => handleInputChange('name', e.target.value)}
@@ -540,7 +570,9 @@ export const EnterpriseMobileExperienceDemo= () => {
               />
             </div>
             
-            <div className="grid grid-cols-1 md="Company"
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <EnterpriseInput
+                label="Company"
                 placeholder="Enter your company name"
                 value={formData.company}
                 onChange={(e) => handleInputChange('company', e.target.value)}
@@ -557,7 +589,7 @@ export const EnterpriseMobileExperienceDemo= () => {
               <EnterpriseButton
                 variant="outline"
                 onClick={() => {
-                  setFormData({ name, email, company, feedback})
+                  setFormData({ name: '', email: '', company: '', feedback: '' })
                 }}
               >
                 Clear Form
@@ -637,7 +669,8 @@ export const EnterpriseMobileExperienceDemo= () => {
             className={`px-4 py-2 rounded-lg font-medium transition-colors ${
               activeDemo === demo
                 ? 'bg-cs-primary text-white'
-                }`}
+                : 'bg-cs-surface-bg text-cs-text-primary hover:bg-cs-hover-bg'
+            }`}
           >
             {demo === 'overview' && '🏆 Overview'}
             {demo === 'quality' && '✨ Quality'}
@@ -661,22 +694,33 @@ export const EnterpriseMobileExperienceDemo= () => {
       <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
         <div className="flex flex-wrap items-center justify-between gap-4 text-sm">
           <div className="flex items-center space-x-4">
-            <span className="font-medium">Phase={
-              enterpriseState.currentPhase === 'initialization' ? 'initializing' === 'optimization' ? 'optimizing' === 'polish' ? 'polishing' === 'verification' ? 'verifying' }>
+            <span className="font-medium">Phase:</span>
+            <EnterpriseStatus phase={
+              enterpriseState.currentPhase === 'initialization' ? 'initializing' :
+              enterpriseState.currentPhase === 'optimization' ? 'optimizing' :
+              enterpriseState.currentPhase === 'polish' ? 'polishing' :
+              enterpriseState.currentPhase === 'verification' ? 'verifying' :
+              'complete'
+            }>
               {enterpriseState.currentPhase.charAt(0).toUpperCase() + enterpriseState.currentPhase.slice(1)}
             </EnterpriseStatus>
-            <span className="font-medium">Optimizations="outline">
+            <span className="font-medium">Optimizations:</span>
+            <Badge variant="outline">
               {enterpriseState.optimizationCount}
             </Badge>
           </div>
           
           <div className="flex items-center space-x-4">
-            <span className="font-medium">Quality Score={`font-bold ${
-              enterpriseState.overallQualityScore >= 90 ? 'text-cs-success' = 80 ? 'text-cs-warning' }`}>
+            <span className="font-medium">Quality Score:</span>
+            <span className={`font-bold ${
+              enterpriseState.overallQualityScore >= 90 ? 'text-cs-success' :
+              enterpriseState.overallQualityScore >= 80 ? 'text-cs-warning' : 'text-cs-error'
+            }`}>
               {enterpriseState.overallQualityScore}/100
             </span>
-            <span className="font-medium">Status={enterpriseState.isEnterpriseReady ? 'default' }>
-              {enterpriseState.isEnterpriseReady ? 'Enterprise Ready' }
+            <span className="font-medium">Status:</span>
+            <Badge variant={enterpriseState.isEnterpriseReady ? 'default' : 'secondary'}>
+              {enterpriseState.isEnterpriseReady ? 'Enterprise Ready' : 'In Progress'}
             </Badge>
           </div>
         </div>
@@ -687,9 +731,15 @@ export const EnterpriseMobileExperienceDemo= () => {
         <EnterpriseNotification
           type={notificationType}
           title={
-            notificationType === 'success' ? 'Success!' === 'warning' ? 'Warning!' === 'error' ? 'Error!' }
+            notificationType === 'success' ? 'Success!' :
+            notificationType === 'warning' ? 'Warning!' :
+            notificationType === 'error' ? 'Error!' : 'Information'
+          }
           message={
-            notificationType === 'success' ? 'Operation completed successfully!' === 'warning' ? 'Please review the information provided.' === 'error' ? 'An error occurred. Please try again.' }
+            notificationType === 'success' ? 'Operation completed successfully!' :
+            notificationType === 'warning' ? 'Please review the information provided.' :
+            notificationType === 'error' ? 'An error occurred. Please try again.' : 'Here is some information for you.'
+          }
           onClose={() => setShowNotification(false)}
           duration={3000}
         />