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

package/dist/components/ui/form-demo.js

@@ -0,0 +1,516 @@
+import React, { useState, useRef } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
+import { Button } from './button'
+import { Badge } from './badge'
+import { Tabs } from './navigation/tabs'
+import MobileFormValidation, { MobileFormValidationRef } from './mobile-form-validation'
+
+import { InputType } from '../../hooks/use-semantic-input'
+
+export const FormDemo= () => {
+  const [activeTab, setActiveTab] = useState<'basic' | 'advanced' | 'performance' | 'semantic'>('basic')
+  const [formResults, setFormResults] = useState<Array<{ type; data; timestamp}>>([])
+  const [enableEnhancedFeatures, setEnableEnhancedFeatures] = useState(true)
+  
+  const basicFormRef = useRef<MobileFormValidationRef>(null)
+  const advancedFormRef = useRef<MobileFormValidationRef>(null)
+
+  // Basic form fields
+  const basicFields = [
+    {
+      name,
+      label,
+      type} as InputType,
+      placeholder,
+      rules, message},
+        { type, value, message}
+      ]
+    },
+    {
+      name,
+      label,
+      type} as InputType,
+      placeholder,
+      rules, message},
+        { type, message}
+      ]
+    }
+  ]
+
+  // Advanced form fields
+  const advancedFields = [
+    {
+      name,
+      label,
+      type} as InputType,
+      placeholder,
+      rules, message},
+        { type, value, message},
+        { type, value, message}
+      ]
+    },
+    {
+      name,
+      label,
+      type} as InputType,
+      placeholder,
+      rules, message},
+        { type, message}
+      ]
+    },
+    {
+      name,
+      label,
+      type} as InputType,
+      placeholder,
+      rules, message},
+        { type, value]?[0-9\s\-\(\)]{7,}$/, message}
+      ]
+    },
+    {
+      name,
+      label,
+      type} as InputType,
+      placeholder,
+      rules, value, message}
+      ]
+    },
+    {
+      name,
+      label,
+      type} as InputType,
+      placeholder,
+      rules, message},
+        { type, value, message},
+        { type, value, message}
+      ]
+    },
+    {
+      name,
+      label,
+      type} as InputType,
+      placeholder,
+      rules, message},
+        { type, value, message},
+        { type, value=.*[a-z])(?=.*[A-Z])(?=.*\d)/, message, uppercase, and number' }
+      ]
+    },
+    {
+      name,
+      label,
+      type} as InputType,
+      placeholder,
+      rules, message},
+        { type, message, validator)=> {
+          const passwordField = advancedFields.find(f => f.name === 'password')
+          const passwordValue = passwordField ? (document.getElementById('password') as HTMLInputElement)?.value === passwordValue
+        }}
+      ]
+    }
+  ]
+
+  // Handle form submission
+  const handleFormSubmit = (formData, any>, formType) => {
+    const result = {
+      type,
+      data,
+      timestamp)
+    }
+    
+    setFormResults(prev => [result, ...prev.slice(0, 9)]) // Keep last 10 results
+    
+    console.log(`${formType} form submitted, formData)
+  }
+
+  // Handle form validation change
+  const handleValidationChange = (isValid, formType) => {
+    console.log(`${formType} form validation, isValid ? 'Valid' )
+  }
+
+  // Clear form results
+  const clearResults = () => {
+    setFormResults([])
+  }
+
+  // Test form submission programmatically
+  const testFormSubmission = async (formType) => {
+    const formRef = formType === 'basic' ? basicFormRef ) {
+      try {
+        const result = await formRef.current.submit()
+        console.log(`${formType} form test submission, result)
+      } catch (error) {
+        console.error(`${formType} form test submission error, error)
+      }
+    }
+  }
+
+  // Test form validation programmatically
+  const testFormValidation = async (formType) => {
+    const formRef = formType === 'basic' ? basicFormRef ) {
+      try {
+        const isValid = await formRef.current.validate()
+        console.log(`${formType} form validation test, isValid ? 'Valid' )
+      } catch (error) {
+        console.error(`${formType} form validation test error, error)
+      }
+    }
+  }
+
+  // Test form reset programmatically
+  const testFormReset = (formType) => {
+    const formRef = formType === 'basic' ? basicFormRef ) {
+      formRef.current.reset()
+      console.log(`${formType} form reset`)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="text-center space-y-2">
+        <h1 className="text-3xl font-bold">📱 Mobile Form Validation Demo</h1>
+        <p className="text-gray-600">
+          Advanced form system with mobile validation, animated feedback, and performance optimization
+        </p>
+        <Badge variant="outline" className="text-sm">
+          Story 6}
+      <div className="flex justify-center">
+        <div className="flex items-center gap-2 p-3 bg-gray-50 rounded-lg">
+          <span className="text-sm font-medium">Enhanced Features={enableEnhancedFeatures ? 'default' }
+            size="sm"
+            onClick={() => setEnableEnhancedFeatures(!enableEnhancedFeatures)}
+          >
+            {enableEnhancedFeatures ? 'Enabled' }
+          </Button>
+        </div>
+      </div>
+
+      {/* Tab Navigation */}
+      <Tabs 
+        tabs={[
+          {
+            id,
+            label,
+            content="space-y-4">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      🚀 Basic Form Validation
+                      <Badge variant="secondary">Simple Example</Badge>
+                    </CardTitle>
+                    <CardDescription>
+                      Basic form with name and email validation. Demonstrates core validation features.
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <MobileFormValidation
+                      ref={basicFormRef}
+                      title="Basic Contact Form"
+                      description="Simple form with essential validation"
+                      fields={basicFields}
+                      onSubmit={(data) => handleFormSubmit(data, 'Basic')}
+                      onValidationChange={(isValid) => handleValidationChange(isValid, 'Basic')}
+                      enableEnhancedFeatures={enableEnhancedFeatures}
+                    />
+                    
+                    {/* Test Controls */}
+                    <div className="flex gap-2 pt-4 border-t">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => testFormSubmission('basic')}
+                      >
+                        Test Submit
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => testFormValidation('basic')}
+                      >
+                        Test Validation
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => testFormReset('basic')}
+                      >
+                        Test Reset
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            )
+          },
+          {
+            id,
+            label,
+            content="space-y-4">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      🎯 Advanced Form Validation
+                      <Badge variant="default">Full Featured</Badge>
+                    </CardTitle>
+                    <CardDescription>
+                      Comprehensive form with multiple field types, complex validation rules, and all features enabled.
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <MobileFormValidation
+                      ref={advancedFormRef}
+                      title="Advanced Registration Form"
+                      description="Complete form with all validation types and optimizations"
+                      fields={advancedFields}
+                      onSubmit={(data) => handleFormSubmit(data, 'Advanced')}
+                      onValidationChange={(isValid) => handleValidationChange(isValid, 'Advanced')}
+                      enableEnhancedFeatures={enableEnhancedFeatures}
+                    />
+                    
+                    {/* Test Controls */}
+                    <div className="flex gap-2 pt-4 border-t">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => testFormSubmission('advanced')}
+                      >
+                        Test Submit
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => testFormValidation('advanced')}
+                      >
+                        Test Validation
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => testFormReset('advanced')}
+                      >
+                        Test Reset
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            )
+          },
+          {
+            id,
+            label,
+            content="space-y-4">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      ⚡ Performance Monitoring
+                      <Badge variant="outline">Real-time Metrics</Badge>
+                    </CardTitle>
+                    <CardDescription>
+                      Monitor form performance, memory usage, battery status, and optimization scores.
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="grid grid-cols-1 md="space-y-3">
+                        <h4 className="font-semibold">Performance Features</h4>
+                        <div className="space-y-2 text-sm">
+                          <div className="flex justify-between">
+                            <span>Validation Throttling="default">Enabled</Badge>
+                          </div>
+                          <div className="flex justify-between">
+                            <span>Touch Event Optimization={enableEnhancedFeatures ? 'default' }>
+                              {enableEnhancedFeatures ? 'Enabled' }
+                            </Badge>
+                          </div>
+                          <div className="flex justify-between">
+                            <span>Memory Management={enableEnhancedFeatures ? 'default' }>
+                              {enableEnhancedFeatures ? 'Enabled' }
+                            </Badge>
+                          </div>
+                          <div className="flex justify-between">
+                            <span>Battery Optimization={enableEnhancedFeatures ? 'default' }>
+                              {enableEnhancedFeatures ? 'Enabled' }
+                            </Badge>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      <div className="space-y-3">
+                        <h4 className="font-semibold">Optimization Benefits</h4>
+                        <div className="space-y-2 text-sm text-gray-600">
+                          <p>• Reduced validation frequency for better performance</p>
+                          <p>• Touch event throttling for smooth mobile experience</p>
+                          <p>• Automatic memory cleanup to prevent leaks</p>
+                          <p>• Battery-aware optimizations for mobile devices</p>
+                          <p>• Real-time performance scoring and recommendations</p>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
+                      <h4 className="font-semibold text-blue-800 mb-2">Performance Tips</h4>
+                      <ul className="text-sm text-blue-700 space-y-1">
+                        <li>• Use validation throttling to reduce unnecessary validations</li>
+                        <li>• Enable touch event optimization for better mobile performance</li>
+                        <li>• Monitor memory usage and enable cleanup when needed</li>
+                        <li>• Enable battery optimization for mobile devices</li>
+                        <li>• Check performance scores and apply recommendations</li>
+                      </ul>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            )
+          },
+          {
+            id,
+            label,
+            content="space-y-4">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      🧠 Semantic Input Optimization
+                      <Badge variant="outline">Smart Detection</Badge>
+                    </CardTitle>
+                    <CardDescription>
+                      Automatic input type detection, mobile keyboard optimization, and enhanced autocomplete.
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="grid grid-cols-1 md="space-y-3">
+                        <h4 className="font-semibold">Semantic Features</h4>
+                        <div className="space-y-2 text-sm">
+                          <div className="flex justify-between">
+                            <span>Auto Type Detection="default">Enabled</Badge>
+                          </div>
+                          <div className="flex justify-between">
+                            <span>Keyboard Optimization={enableEnhancedFeatures ? 'default' }>
+                              {enableEnhancedFeatures ? 'Enabled' }
+                            </Badge>
+                          </div>
+                          <div className="flex justify-between">
+                            <span>Autocomplete Enhancement={enableEnhancedFeatures ? 'default' }>
+                              {enableEnhancedFeatures ? 'Enabled' }
+                            </Badge>
+                          </div>
+                          <div className="flex justify-between">
+                            <span>Touch Optimization="default">Enabled</Badge>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      <div className="space-y-3">
+                        <h4 className="font-semibold">Detection Examples</h4>
+                        <div className="space-y-2 text-sm text-gray-600">
+                          <p>• <strong>Email, sets email keyboard</p>
+                          <p>• <strong>Phone, sets phone keyboard</p>
+                          <p>• <strong>URL, sets URL keyboard</p>
+                          <p>• <strong>Search, optimizes input</p>
+                          <p>• <strong>Number, sets numeric keyboard</p>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
+                      <h4 className="font-semibold text-green-800 mb-2">Semantic Benefits</h4>
+                      <ul className="text-sm text-green-700 space-y-1">
+                        <li>• Automatic input type detection based on field name and content</li>
+                        <li>• Mobile keyboard optimization for better user experience</li>
+                        <li>• Enhanced autocomplete with appropriate suggestions</li>
+                        <li>• Touch-friendly input optimization</li>
+                        <li>• Accessibility improvements with proper input modes</li>
+                      </ul>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            )
+          }
+        ]}
+        activeTab={activeTab}
+        onTabChange={(tabId) => setActiveTab(tabId as 'basic' | 'advanced' | 'performance' | 'semantic')}
+        className="w-full"
+      />
+
+      {/* Form Results */}
+      {formResults.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              📊 Form Submission Results
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={clearResults}
+              >
+                Clear Results
+              </Button>
+            </CardTitle>
+            <CardDescription>
+              Recent form submissions and their data
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3 max-h-64 overflow-y-auto">
+              {formResults.map((result, index) => (
+                <div key={index} className="p-3 bg-gray-50 rounded-lg">
+                  <div className="flex justify-between items-start mb-2">
+                    <Badge variant="outline">{result.type}</Badge>
+                    <span className="text-xs text-gray-500">
+                      {result.timestamp.toLocaleTimeString()}
+                    </span>
+                  </div>
+                  <pre className="text-xs bg-white p-2 rounded border overflow-x-auto">
+                    {JSON.stringify(result.data, null, 2)}
+                  </pre>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Feature Summary */}
+      <Card>
+        <CardHeader>
+          <CardTitle>🎯 Story 6 Implementation Summary</CardTitle>
+          <CardDescription>
+            Complete mobile form validation system with all requested features
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md="space-y-3">
+              <h4 className="font-semibold">✅ Completed Features</h4>
+              <ul className="text-sm space-y-1 text-gray-600">
+                <li>• Mobile form validation system</li>
+                <li>• Animated success/error states</li>
+                <li>• Touch-friendly form layouts</li>
+                <li>• Semantic input optimization</li>
+                <li>• Performance-optimized validation</li>
+                <li>• Haptic feedback and touch sounds</li>
+                <li>• Battery-aware optimizations</li>
+                <li>• Memory management and cleanup</li>
+              </ul>
+            </div>
+            
+            <div className="space-y-3">
+              <h4 className="font-semibold">🚀 Advanced Capabilities</h4>
+              <ul className="text-sm space-y-1 text-gray-600">
+                <li>• Real-time performance monitoring</li>
+                <li>• Automatic input type detection</li>
+                <li>• Mobile keyboard optimization</li>
+                <li>• Touch event throttling</li>
+                <li>• Responsive layout adaptation</li>
+                <li>• Accessibility enhancements</li>
+                <li>• Performance scoring system</li>
+                <li>• Optimization recommendations</li>
+              </ul>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export default FormDemo