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

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

@@ -1,553 +1,191 @@
-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: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<'basic' | 'advanced' | 'performance' | 'semantic'>('basic')
-  const [formResults, setFormResults] = useState<Array<{ type: string; data: any; timestamp: Date }>>([])
-  const [enableEnhancedFeatures, setEnableEnhancedFeatures] = useState(true)
-  
-  const basicFormRef = useRef<MobileFormValidationRef>(null)
-  const advancedFormRef = useRef<MobileFormValidationRef>(null)
-
-  // Basic form fields
-  const basicFields = [
-    {
-      name: 'name',
-      label: 'Full Name',
-      type: { type: 'text' } as InputType,
-      placeholder: 'Enter your full name',
-      rules: [
-        { type: 'required' as const, message: 'Name is required' },
-        { type: 'minLength' as const, value: 2, message: 'Name must be at least 2 characters' }
-      ]
-    },
-    {
-      name: 'email',
-      label: 'Email Address',
-      type: { type: 'email' } as InputType,
-      placeholder: 'Enter your email',
-      rules: [
-        { type: 'required' as const, message: 'Email is required' },
-        { type: 'email' as const, message: 'Please enter a valid email address' }
-      ]
-    }
-  ]
-
-  // Advanced form fields
-  const advancedFields = [
-    {
-      name: 'fullName',
-      label: 'Full Name',
-      type: { type: 'text' } as InputType,
-      placeholder: 'Enter your full name',
-      rules: [
-        { type: 'required' as const, message: 'Full name is required' },
-        { type: 'minLength' as const, value: 3, message: 'Name must be at least 3 characters' },
-        { type: 'maxLength' as const, value: 50, message: 'Name must be less than 50 characters' }
-      ]
-    },
-    {
-      name: 'emailAddress',
-      label: 'Email Address',
-      type: { type: 'email' } as InputType,
-      placeholder: 'Enter your email address',
-      rules: [
-        { type: 'required' as const, message: 'Email is required' },
-        { type: 'email' as const, message: 'Please enter a valid email address' }
-      ]
-    },
-    {
-      name: 'phoneNumber',
-      label: 'Phone Number',
-      type: { type: 'tel' } as InputType,
-      placeholder: 'Enter your phone number',
-      rules: [
-        { type: 'required' as const, message: 'Phone number is required' },
-        { type: 'pattern' as const, value: /^[\+]?[0-9\s\-\(\)]{7,}$/, message: 'Please enter a valid phone number' }
-      ]
-    },
-    {
-      name: 'website',
-      label: 'Website',
-      type: { type: 'url' } as InputType,
-      placeholder: 'Enter your website URL',
-      rules: [
-        { type: 'pattern' as const, value: /^https?:\/\/.+/, message: 'Please enter a valid URL starting with http:// or https://' }
-      ]
-    },
-    {
-      name: 'age',
-      label: 'Age',
-      type: { type: 'number' } as InputType,
-      placeholder: 'Enter your age',
-      rules: [
-        { type: 'required' as const, message: 'Age is required' },
-        { type: 'minLength' as const, value: 1, message: 'Age must be at least 1' },
-        { type: 'maxLength' as const, value: 3, message: 'Age must be less than 1000' }
-      ]
-    },
-    {
-      name: 'password',
-      label: 'Password',
-      type: { type: 'password' } as InputType,
-      placeholder: 'Enter your password',
-      rules: [
-        { type: 'required' as const, message: 'Password is required' },
-        { type: 'minLength' as const, value: 8, message: 'Password must be at least 8 characters' },
-        { type: 'pattern' as const, value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, message: 'Password must contain lowercase, uppercase, and number' }
-      ]
-    },
-    {
-      name: 'confirmPassword',
-      label: 'Confirm Password',
-      type: { type: 'password' } as InputType,
-      placeholder: 'Confirm your password',
-      rules: [
-        { type: 'required' as const, message: 'Please confirm your password' },
-        { type: 'custom' as const, message: 'Passwords do not match', validator: (value: any): boolean => {
-          const passwordField = advancedFields.find(f => f.name === 'password')
-          const passwordValue = passwordField ? (document.getElementById('password') as HTMLInputElement)?.value : ''
-          return value === passwordValue
-        }}
-      ]
-    }
-  ]
-
-  // Handle form submission
-  const handleFormSubmit = (formData: Record<string, any>, formType: string) => {
-    const result = {
-      type: formType,
-      data: formData,
-      timestamp: new Date()
-    }
-    
-    setFormResults(prev => [result, ...prev.slice(0, 9)]) // Keep last 10 results
-    
-    console.log(`${formType} form submitted:`, formData)
-  }
-
-  // Handle form validation change
-  const handleValidationChange = (isValid: boolean, formType: string) => {
-    console.log(`${formType} form validation:`, isValid ? 'Valid' : 'Invalid')
-  }
-
-  // Clear form results
-  const clearResults = () => {
-    setFormResults([])
-  }
-
-  // Test form submission programmatically
-  const testFormSubmission = async (formType: 'basic' | 'advanced') => {
-    const formRef = formType === 'basic' ? basicFormRef : advancedFormRef
-    
-    if (formRef.current) {
-      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: 'basic' | 'advanced') => {
-    const formRef = formType === 'basic' ? basicFormRef : advancedFormRef
-    
-    if (formRef.current) {
-      try {
-        const isValid = await formRef.current.validate()
-        console.log(`${formType} form validation test:`, isValid ? 'Valid' : 'Invalid')
-      } catch (error) {
-        console.error(`${formType} form validation test error:`, error)
-      }
-    }
-  }
-
-  // Test form reset programmatically
-  const testFormReset = (formType: 'basic' | 'advanced') => {
-    const formRef = formType === 'basic' ? basicFormRef : advancedFormRef
-    
-    if (formRef.current) {
-      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: Advanced Form System with Mobile Validation
-        </Badge>
-      </div>
-
-      {/* Enhanced Features Toggle */}
-      <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:</span>
-          <Button
-            variant={enableEnhancedFeatures ? 'default' : 'outline'}
-            size="sm"
-            onClick={() => setEnableEnhancedFeatures(!enableEnhancedFeatures)}
-          >
-            {enableEnhancedFeatures ? 'Enabled' : 'Disabled'}
-          </Button>
-        </div>
-      </div>
-
-      {/* Tab Navigation */}
-      <Tabs 
-        tabs={[
-          {
-            id: 'basic',
-            label: 'Basic Form',
-            content: (
-              <div className="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: 'advanced',
-            label: 'Advanced Form',
-            content: (
-              <div className="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: 'performance',
-            label: 'Performance',
-            content: (
-              <div className="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:grid-cols-2 gap-4">
-                      <div className="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:</span>
-                            <Badge variant="default">Enabled</Badge>
-                          </div>
-                          <div className="flex justify-between">
-                            <span>Touch Event Optimization:</span>
-                            <Badge variant={enableEnhancedFeatures ? 'default' : 'secondary'}>
-                              {enableEnhancedFeatures ? 'Enabled' : 'Disabled'}
-                            </Badge>
-                          </div>
-                          <div className="flex justify-between">
-                            <span>Memory Management:</span>
-                            <Badge variant={enableEnhancedFeatures ? 'default' : 'secondary'}>
-                              {enableEnhancedFeatures ? 'Enabled' : 'Disabled'}
-                            </Badge>
-                          </div>
-                          <div className="flex justify-between">
-                            <span>Battery Optimization:</span>
-                            <Badge variant={enableEnhancedFeatures ? 'default' : 'secondary'}>
-                              {enableEnhancedFeatures ? 'Enabled' : 'Disabled'}
-                            </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: 'semantic',
-            label: 'Semantic Input',
-            content: (
-              <div className="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:grid-cols-2 gap-4">
-                      <div className="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:</span>
-                            <Badge variant="default">Enabled</Badge>
-                          </div>
-                          <div className="flex justify-between">
-                            <span>Keyboard Optimization:</span>
-                            <Badge variant={enableEnhancedFeatures ? 'default' : 'secondary'}>
-                              {enableEnhancedFeatures ? 'Enabled' : 'Disabled'}
-                            </Badge>
-                          </div>
-                          <div className="flex justify-between">
-                            <span>Autocomplete Enhancement:</span>
-                            <Badge variant={enableEnhancedFeatures ? 'default' : 'secondary'}>
-                              {enableEnhancedFeatures ? 'Enabled' : 'Disabled'}
-                            </Badge>
-                          </div>
-                          <div className="flex justify-between">
-                            <span>Touch Optimization:</span>
-                            <Badge variant="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:</strong> Detects @ symbol, sets email keyboard</p>
-                          <p>• <strong>Phone:</strong> Detects numeric patterns, sets phone keyboard</p>
-                          <p>• <strong>URL:</strong> Detects http/https, sets URL keyboard</p>
-                          <p>• <strong>Search:</strong> Detects search context, optimizes input</p>
-                          <p>• <strong>Number:</strong> Detects numeric patterns, 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: string) => 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:grid-cols-2 gap-4">
-            <div className="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
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 from './mobile-form-validation';
+export const FormDemo = () => {
+    const [activeTab, setActiveTab] = useState('basic');
+    const [formResults, setFormResults] = useState([]);
+    const [enableEnhancedFeatures, setEnableEnhancedFeatures] = useState(true);
+    const basicFormRef = useRef(null);
+    const advancedFormRef = useRef(null);
+    // Basic form fields
+    const basicFields = [
+        {
+            name: 'name',
+            label: 'Full Name',
+            type: { type: 'text' },
+            placeholder: 'Enter your full name',
+            rules: [
+                { type: 'required', message: 'Name is required' },
+                { type: 'minLength', value: 2, message: 'Name must be at least 2 characters' }
+            ]
+        },
+        {
+            name: 'email',
+            label: 'Email Address',
+            type: { type: 'email' },
+            placeholder: 'Enter your email',
+            rules: [
+                { type: 'required', message: 'Email is required' },
+                { type: 'email', message: 'Please enter a valid email address' }
+            ]
+        }
+    ];
+    // Advanced form fields
+    const advancedFields = [
+        {
+            name: 'fullName',
+            label: 'Full Name',
+            type: { type: 'text' },
+            placeholder: 'Enter your full name',
+            rules: [
+                { type: 'required', message: 'Full name is required' },
+                { type: 'minLength', value: 3, message: 'Name must be at least 3 characters' },
+                { type: 'maxLength', value: 50, message: 'Name must be less than 50 characters' }
+            ]
+        },
+        {
+            name: 'emailAddress',
+            label: 'Email Address',
+            type: { type: 'email' },
+            placeholder: 'Enter your email address',
+            rules: [
+                { type: 'required', message: 'Email is required' },
+                { type: 'email', message: 'Please enter a valid email address' }
+            ]
+        },
+        {
+            name: 'phoneNumber',
+            label: 'Phone Number',
+            type: { type: 'tel' },
+            placeholder: 'Enter your phone number',
+            rules: [
+                { type: 'required', message: 'Phone number is required' },
+                { type: 'pattern', value: /^[\+]?[0-9\s\-\(\)]{7,}$/, message: 'Please enter a valid phone number' }
+            ]
+        },
+        {
+            name: 'website',
+            label: 'Website',
+            type: { type: 'url' },
+            placeholder: 'Enter your website URL',
+            rules: [
+                { type: 'pattern', value: /^https?:\/\/.+/, message: 'Please enter a valid URL starting with http:// or https://' }
+            ]
+        },
+        {
+            name: 'age',
+            label: 'Age',
+            type: { type: 'number' },
+            placeholder: 'Enter your age',
+            rules: [
+                { type: 'required', message: 'Age is required' },
+                { type: 'minLength', value: 1, message: 'Age must be at least 1' },
+                { type: 'maxLength', value: 3, message: 'Age must be less than 1000' }
+            ]
+        },
+        {
+            name: 'password',
+            label: 'Password',
+            type: { type: 'password' },
+            placeholder: 'Enter your password',
+            rules: [
+                { type: 'required', message: 'Password is required' },
+                { type: 'minLength', value: 8, message: 'Password must be at least 8 characters' },
+                { type: 'pattern', value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, message: 'Password must contain lowercase, uppercase, and number' }
+            ]
+        },
+        {
+            name: 'confirmPassword',
+            label: 'Confirm Password',
+            type: { type: 'password' },
+            placeholder: 'Confirm your password',
+            rules: [
+                { type: 'required', message: 'Please confirm your password' },
+                { type: 'custom', message: 'Passwords do not match', validator: (value) => {
+                        const passwordField = advancedFields.find(f => f.name === 'password');
+                        const passwordValue = passwordField ? document.getElementById('password')?.value : '';
+                        return value === passwordValue;
+                    } }
+            ]
+        }
+    ];
+    // Handle form submission
+    const handleFormSubmit = (formData, formType) => {
+        const result = {
+            type: formType,
+            data: formData,
+            timestamp: new Date()
+        };
+        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' : 'Invalid');
+    };
+    // Clear form results
+    const clearResults = () => {
+        setFormResults([]);
+    };
+    // Test form submission programmatically
+    const testFormSubmission = async (formType) => {
+        const formRef = formType === 'basic' ? basicFormRef : advancedFormRef;
+        if (formRef.current) {
+            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 : advancedFormRef;
+        if (formRef.current) {
+            try {
+                const isValid = await formRef.current.validate();
+                console.log(`${formType} form validation test:`, isValid ? 'Valid' : 'Invalid');
+            }
+            catch (error) {
+                console.error(`${formType} form validation test error:`, error);
+            }
+        }
+    };
+    // Test form reset programmatically
+    const testFormReset = (formType) => {
+        const formRef = formType === 'basic' ? basicFormRef : advancedFormRef;
+        if (formRef.current) {
+            formRef.current.reset();
+            console.log(`${formType} form reset`);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center space-y-2", children: [_jsx("h1", { className: "text-3xl font-bold", children: "\uD83D\uDCF1 Mobile Form Validation Demo" }), _jsx("p", { className: "text-gray-600", children: "Advanced form system with mobile validation, animated feedback, and performance optimization" }), _jsx(Badge, { variant: "outline", className: "text-sm", children: "Story 6: Advanced Form System with Mobile Validation" })] }), _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "flex items-center gap-2 p-3 bg-gray-50 rounded-lg", children: [_jsx("span", { className: "text-sm font-medium", children: "Enhanced Features:" }), _jsx(Button, { variant: enableEnhancedFeatures ? 'default' : 'outline', size: "sm", onClick: () => setEnableEnhancedFeatures(!enableEnhancedFeatures), children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }) }), _jsx(Tabs, { tabs: [
+                    {
+                        id: 'basic',
+                        label: 'Basic Form',
+                        content: (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDE80 Basic Form Validation", _jsx(Badge, { variant: "secondary", children: "Simple Example" })] }), _jsx(CardDescription, { children: "Basic form with name and email validation. Demonstrates core validation features." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(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 }), _jsxs("div", { className: "flex gap-2 pt-4 border-t", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormSubmission('basic'), children: "Test Submit" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormValidation('basic'), children: "Test Validation" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormReset('basic'), children: "Test Reset" })] })] })] }) }))
+                    },
+                    {
+                        id: 'advanced',
+                        label: 'Advanced Form',
+                        content: (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFAF Advanced Form Validation", _jsx(Badge, { variant: "default", children: "Full Featured" })] }), _jsx(CardDescription, { children: "Comprehensive form with multiple field types, complex validation rules, and all features enabled." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(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 }), _jsxs("div", { className: "flex gap-2 pt-4 border-t", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormSubmission('advanced'), children: "Test Submit" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormValidation('advanced'), children: "Test Validation" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormReset('advanced'), children: "Test Reset" })] })] })] }) }))
+                    },
+                    {
+                        id: 'performance',
+                        label: 'Performance',
+                        content: (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\u26A1 Performance Monitoring", _jsx(Badge, { variant: "outline", children: "Real-time Metrics" })] }), _jsx(CardDescription, { children: "Monitor form performance, memory usage, battery status, and optimization scores." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Performance Features" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Validation Throttling:" }), _jsx(Badge, { variant: "default", children: "Enabled" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Touch Event Optimization:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Memory Management:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Battery Optimization:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Optimization Benefits" }), _jsxs("div", { className: "space-y-2 text-sm text-gray-600", children: [_jsx("p", { children: "\u2022 Reduced validation frequency for better performance" }), _jsx("p", { children: "\u2022 Touch event throttling for smooth mobile experience" }), _jsx("p", { children: "\u2022 Automatic memory cleanup to prevent leaks" }), _jsx("p", { children: "\u2022 Battery-aware optimizations for mobile devices" }), _jsx("p", { children: "\u2022 Real-time performance scoring and recommendations" })] })] })] }), _jsxs("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsx("h4", { className: "font-semibold text-blue-800 mb-2", children: "Performance Tips" }), _jsxs("ul", { className: "text-sm text-blue-700 space-y-1", children: [_jsx("li", { children: "\u2022 Use validation throttling to reduce unnecessary validations" }), _jsx("li", { children: "\u2022 Enable touch event optimization for better mobile performance" }), _jsx("li", { children: "\u2022 Monitor memory usage and enable cleanup when needed" }), _jsx("li", { children: "\u2022 Enable battery optimization for mobile devices" }), _jsx("li", { children: "\u2022 Check performance scores and apply recommendations" })] })] })] })] }) }))
+                    },
+                    {
+                        id: 'semantic',
+                        label: 'Semantic Input',
+                        content: (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83E\uDDE0 Semantic Input Optimization", _jsx(Badge, { variant: "outline", children: "Smart Detection" })] }), _jsx(CardDescription, { children: "Automatic input type detection, mobile keyboard optimization, and enhanced autocomplete." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Semantic Features" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Auto Type Detection:" }), _jsx(Badge, { variant: "default", children: "Enabled" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Keyboard Optimization:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Autocomplete Enhancement:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Touch Optimization:" }), _jsx(Badge, { variant: "default", children: "Enabled" })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Detection Examples" }), _jsxs("div", { className: "space-y-2 text-sm text-gray-600", children: [_jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "Email:" }), " Detects @ symbol, sets email keyboard"] }), _jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "Phone:" }), " Detects numeric patterns, sets phone keyboard"] }), _jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "URL:" }), " Detects http/https, sets URL keyboard"] }), _jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "Search:" }), " Detects search context, optimizes input"] }), _jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "Number:" }), " Detects numeric patterns, sets numeric keyboard"] })] })] })] }), _jsxs("div", { className: "p-4 bg-green-50 border border-green-200 rounded-lg", children: [_jsx("h4", { className: "font-semibold text-green-800 mb-2", children: "Semantic Benefits" }), _jsxs("ul", { className: "text-sm text-green-700 space-y-1", children: [_jsx("li", { children: "\u2022 Automatic input type detection based on field name and content" }), _jsx("li", { children: "\u2022 Mobile keyboard optimization for better user experience" }), _jsx("li", { children: "\u2022 Enhanced autocomplete with appropriate suggestions" }), _jsx("li", { children: "\u2022 Touch-friendly input optimization" }), _jsx("li", { children: "\u2022 Accessibility improvements with proper input modes" })] })] })] })] }) }))
+                    }
+                ], activeTab: activeTab, onTabChange: (tabId) => setActiveTab(tabId), className: "w-full" }), formResults.length > 0 && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDCCA Form Submission Results", _jsx(Button, { variant: "outline", size: "sm", onClick: clearResults, children: "Clear Results" })] }), _jsx(CardDescription, { children: "Recent form submissions and their data" })] }), _jsx(CardContent, { children: _jsx("div", { className: "space-y-3 max-h-64 overflow-y-auto", children: formResults.map((result, index) => (_jsxs("div", { className: "p-3 bg-gray-50 rounded-lg", children: [_jsxs("div", { className: "flex justify-between items-start mb-2", children: [_jsx(Badge, { variant: "outline", children: result.type }), _jsx("span", { className: "text-xs text-gray-500", children: result.timestamp.toLocaleTimeString() })] }), _jsx("pre", { className: "text-xs bg-white p-2 rounded border overflow-x-auto", children: JSON.stringify(result.data, null, 2) })] }, index))) }) })] })), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "\uD83C\uDFAF Story 6 Implementation Summary" }), _jsx(CardDescription, { children: "Complete mobile form validation system with all requested features" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "\u2705 Completed Features" }), _jsxs("ul", { className: "text-sm space-y-1 text-gray-600", children: [_jsx("li", { children: "\u2022 Mobile form validation system" }), _jsx("li", { children: "\u2022 Animated success/error states" }), _jsx("li", { children: "\u2022 Touch-friendly form layouts" }), _jsx("li", { children: "\u2022 Semantic input optimization" }), _jsx("li", { children: "\u2022 Performance-optimized validation" }), _jsx("li", { children: "\u2022 Haptic feedback and touch sounds" }), _jsx("li", { children: "\u2022 Battery-aware optimizations" }), _jsx("li", { children: "\u2022 Memory management and cleanup" })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "\uD83D\uDE80 Advanced Capabilities" }), _jsxs("ul", { className: "text-sm space-y-1 text-gray-600", children: [_jsx("li", { children: "\u2022 Real-time performance monitoring" }), _jsx("li", { children: "\u2022 Automatic input type detection" }), _jsx("li", { children: "\u2022 Mobile keyboard optimization" }), _jsx("li", { children: "\u2022 Touch event throttling" }), _jsx("li", { children: "\u2022 Responsive layout adaptation" }), _jsx("li", { children: "\u2022 Accessibility enhancements" }), _jsx("li", { children: "\u2022 Performance scoring system" }), _jsx("li", { children: "\u2022 Optimization recommendations" })] })] })] }) })] })] }));
+};
+export default FormDemo;