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

package/src/components/ui/mobile-form-validation.tsx

@@ -0,0 +1,451 @@
+import React, { useState, useRef, forwardRef } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
+import { Button } from './button'
+import { Badge } from './badge'
+import { Input } from './input'
+import { Label } from './label'
+import { useMobileFormValidation, ValidationRule } from '../../hooks/use-mobile-form-validation'
+import { useFormFeedback } from '../../hooks/use-form-feedback'
+import { useMobileFormLayout } from '../../hooks/use-mobile-form-layout'
+import { useSemanticInput, InputType } from '../../hooks/use-semantic-input'
+import { useFormPerformance } from '../../hooks/use-form-performance'
+
+export interface MobileFormValidationProps {
+  title?: string
+  description?: string
+  fields: Array<{
+    name: string
+    label: string
+    type: InputType
+    placeholder?: string
+    rules: ValidationRule[]
+    initialValue?: any
+  }>
+  onSubmit?: (formData: Record<string, any>) => void
+  onValidationChange?: (isValid: boolean) => void
+  className?: string
+  enableEnhancedFeatures?: boolean
+}
+
+export interface MobileFormValidationRef {
+  submit: () => Promise<{ success: boolean; data: Record<string, any>; errors: string[] }>
+  reset: () => void
+  validate: () => Promise<boolean>
+  getFieldValidation: (fieldName: string) => any
+}
+
+export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFormValidationProps>(
+  ({ 
+    title = 'Mobile Form Validation',
+    description = 'Advanced form validation with mobile optimization',
+    fields,
+    onSubmit,
+    onValidationChange,
+    className = '',
+    enableEnhancedFeatures = true
+  }, ref) => {
+    const [formData, setFormData] = useState<Record<string, any>>({})
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const formRef = useRef<HTMLFormElement>(null)
+
+    // Initialize form data
+    React.useEffect(() => {
+      const initialData = fields.reduce((acc, field) => {
+        acc[field.name] = field.initialValue || ''
+        return acc
+      }, {} as Record<string, any>)
+      setFormData(initialData)
+    }, [fields])
+
+    // Initialize hooks with configuration based on enhanced features
+    const initialFields = fields.reduce((acc, field) => {
+      acc[field.name] = {
+        name: field.name,
+        value: field.initialValue || '',
+        rules: field.rules
+      }
+      return acc
+    }, {} as Record<string, any>)
+
+    // Form feedback hook
+    const feedback = useFormFeedback({
+      onFeedbackShow: (feedbackState) => {
+        console.log('Feedback shown:', feedbackState)
+      }
+    }, {
+      enableAnimations: true,
+      enableTouchFeedback: true,
+      enableHapticFeedback: enableEnhancedFeatures,
+      enableSoundFeedback: enableEnhancedFeatures,
+      enableAccessibility: true
+    })
+
+    // Form validation hook
+    const {
+      updateField,
+      touchField,
+      validateAllFields,
+      submitForm: submitFormHook,
+      resetForm,
+      getFieldValidation,
+      isFormValid,
+      isFormDirty
+    } = useMobileFormValidation(initialFields, {
+      onFormSubmit: (data, isValid) => {
+        if (isValid && onSubmit) {
+          onSubmit(data)
+        }
+      },
+      onValidationComplete: (fieldName, isValid, errors) => {
+        // Trigger feedback based on validation result
+        if (isValid) {
+          feedback.showSuccess(`${fieldName} is valid`)
+        } else {
+          feedback.showError(`${fieldName}: ${errors.join(', ')}`)
+        }
+      }
+    }, {
+      enableTouchFeedback: true,
+      enableHapticFeedback: enableEnhancedFeatures,
+      enableSoundFeedback: enableEnhancedFeatures,
+      validationDelay: enableEnhancedFeatures ? 300 : 500,
+      enablePerformanceOptimization: enableEnhancedFeatures,
+      maxValidationRetries: enableEnhancedFeatures ? 3 : 1
+    })
+
+    // Mobile form layout hook
+    const layout = useMobileFormLayout({
+      onLayoutChange: (layoutState) => {
+        console.log('Layout changed:', layoutState)
+      }
+    }, {
+      enableTouchOptimization: true,
+      enableKeyboardOptimization: enableEnhancedFeatures,
+      enableResponsiveBehavior: true,
+      enablePerformanceOptimization: enableEnhancedFeatures,
+      enableAutoFocus: enableEnhancedFeatures
+    })
+
+    // Form performance hook
+    const performance = useFormPerformance({
+      onPerformanceWarning: (warning, metrics) => {
+        console.warn('Performance warning:', warning, metrics)
+        feedback.showWarning(warning)
+      },
+      onMemoryWarning: (usage, _threshold) => {
+        feedback.showWarning(`Memory usage high: ${(usage * 100).toFixed(1)}%`)
+      },
+      onBatteryWarning: (level, isLow) => {
+        if (isLow) {
+          feedback.showWarning(`Low battery: ${(level * 100).toFixed(0)}%`)
+        }
+      }
+    }, {
+      enableValidationThrottling: true,
+      enableTouchEventOptimization: enableEnhancedFeatures,
+      enableMemoryManagement: enableEnhancedFeatures,
+      enableBatteryOptimization: enableEnhancedFeatures
+    })
+
+    // Semantic input hooks for each field
+    const semanticInputs = fields.reduce((acc, field) => {
+      acc[field.name] = useSemanticInput(field.type, {
+        onInputTypeDetected: (inputType) => {
+          console.log(`Input type detected for ${field.name}:`, inputType)
+        },
+        onKeyboardOptimization: (optimized) => {
+          console.log(`Keyboard optimization for ${field.name}:`, optimized)
+        }
+      }, {
+        enableAutoDetection: true,
+        enableKeyboardOptimization: enableEnhancedFeatures,
+        enableAutocomplete: enableEnhancedFeatures,
+        enableTouchOptimization: true,
+        enableAccessibility: true,
+        enablePerformanceMonitoring: enableEnhancedFeatures
+      })
+      return acc
+    }, {} as Record<string, any>)
+
+    // Handle field changes
+    const handleFieldChange = (fieldName: string, value: any) => {
+      setFormData(prev => ({ ...prev, [fieldName]: value }))
+      
+      // Update validation state
+      updateField(fieldName, value)
+      
+      // Update semantic input
+      const semanticInput = semanticInputs[fieldName]
+      if (semanticInput) {
+        semanticInput.handleInputChange(value, fieldName, fields.find(f => f.name === fieldName)?.placeholder)
+      }
+      
+      // Notify validation change
+      if (onValidationChange) {
+        onValidationChange(isFormValid)
+      }
+    }
+
+    // Handle field blur
+    const handleFieldBlur = (fieldName: string) => {
+      touchField(fieldName)
+    }
+
+    // Handle form submission
+    const handleSubmit = async (e: React.FormEvent) => {
+      e.preventDefault()
+      setIsSubmitting(true)
+
+      try {
+        const result = await submitFormHook()
+        
+        if (result.success) {
+          feedback.showSuccess('Form submitted successfully!')
+          if (onSubmit) {
+            onSubmit(result.data)
+          }
+        } else {
+          feedback.showError(`Form submission failed: ${result.errors.join(', ')}`)
+        }
+      } catch (error) {
+        feedback.showError('An unexpected error occurred')
+        console.error('Form submission error:', error)
+      } finally {
+        setIsSubmitting(false)
+      }
+    }
+
+    // Handle form reset
+    const handleReset = () => {
+      resetForm()
+      setFormData(fields.reduce((acc, field) => {
+        acc[field.name] = field.initialValue || ''
+        return acc
+      }, {} as Record<string, any>))
+      
+      // Reset semantic inputs
+      Object.values(semanticInputs).forEach((semanticInput: any) => {
+        semanticInput.resetOptimizations()
+      })
+      
+      // Reset performance
+      performance.resetPerformance()
+      
+      // Clear feedback
+      feedback.clearFeedback()
+      
+      feedback.showInfo('Form has been reset')
+    }
+
+    // Expose methods via ref
+    React.useImperativeHandle(ref, () => ({
+      submit: submitFormHook,
+      reset: handleReset,
+      validate: validateAllFields,
+      getFieldValidation
+    }))
+
+    // Apply performance optimizations
+    React.useEffect(() => {
+      performance.applyOptimizations()
+    }, [performance])
+
+    // Auto-focus first input on mobile
+    React.useEffect(() => {
+      if (layout.isMobile && layout.autoFocusFirstInput) {
+        layout.autoFocusFirstInput()
+      }
+    }, [layout.isMobile, layout.autoFocusFirstInput])
+
+    return (
+      <div className={`mobile-form-validation ${className}`}>
+        {/* Performance Status */}
+        {enableEnhancedFeatures && (
+          <div className="mb-4 p-3 bg-gray-50 rounded-lg">
+            <div className="flex items-center justify-between text-sm">
+              <div className="flex items-center gap-2">
+                <span>Performance:</span>
+                <Badge variant={performance.performanceState.isOptimized ? 'default' : 'secondary'}>
+                  {performance.performanceState.isOptimized ? 'Optimized' : 'Not Optimized'}
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <span>Layout:</span>
+                <Badge variant={layout.isOptimized ? 'default' : 'secondary'}>
+                  {layout.isOptimized ? 'Optimized' : 'Not Optimized'}
+                </Badge>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Form Feedback Display */}
+        {feedback.isFeedbackVisible() && (
+          <div className={`mb-4 p-3 rounded-lg ${feedback.getFeedbackClasses()}`}>
+            <div className="flex items-center gap-2">
+              <span>{feedback.getFeedbackIcon(feedback.getCurrentFeedbackType())}</span>
+              <span>{feedback.feedbackState.currentFeedback.message}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Form */}
+        <form 
+          ref={formRef}
+          onSubmit={handleSubmit}
+          className={`space-y-4 ${layout.getLayoutClasses()}`}
+          style={layout.getLayoutCSSVariables() as React.CSSProperties}
+        >
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                {title}
+                <Badge variant="outline">Story 6 Implementation</Badge>
+              </CardTitle>
+              <CardDescription>{description}</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {/* Form Fields */}
+              {fields.map((field) => {
+                const fieldValidation = getFieldValidation(field.name)
+                const semanticInput = semanticInputs[field.name]
+                const isFieldValid = fieldValidation.isValid
+                const fieldErrors = fieldValidation.errors
+                const isFieldTouched = fieldValidation.isTouched
+
+                return (
+                  <div key={field.name} className="space-y-2">
+                    <Label htmlFor={field.name} className="text-sm font-medium">
+                      {field.label}
+                      {field.rules.some(rule => rule.type === 'required') && (
+                        <span className="text-red-500 ml-1">*</span>
+                      )}
+                    </Label>
+                    
+                    <div className="relative">
+                      <Input
+                        id={field.name}
+                        ref={semanticInput?.inputRef}
+                        type={field.type.type}
+                        placeholder={field.placeholder}
+                        value={formData[field.name] || ''}
+                        onChange={(e) => handleFieldChange(field.name, e.target.value)}
+                        onBlur={() => handleFieldBlur(field.name)}
+                        className={`w-full transition-all duration-200 ${
+                          isFieldTouched && !isFieldValid
+                            ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
+                            : isFieldTouched && isFieldValid
+                            ? 'border-green-500 focus:border-green-500 focus:ring-green-500'
+                            : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                        } ${semanticInput?.getSemanticClasses() || ''}`}
+                        style={{
+                          minHeight: layout.currentSpacing,
+                          width: layout.currentFieldWidth
+                        }}
+                        {...semanticInput?.getOptimizedAttributes(field.type)}
+                      />
+                      
+                      {/* Field Status Indicators */}
+                      {isFieldTouched && (
+                        <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
+                          {isFieldValid ? (
+                            <span className="text-green-500 text-lg">✓</span>
+                          ) : (
+                            <span className="text-red-500 text-lg">✗</span>
+                          )}
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Field Errors */}
+                    {isFieldTouched && !isFieldValid && fieldErrors.length > 0 && (
+                      <div className="text-red-500 text-sm space-y-1">
+                        {fieldErrors.map((error: string, index: number) => (
+                          <div key={index} className="flex items-center gap-1">
+                            <span>•</span>
+                            <span>{error}</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+
+                    {/* Semantic Input Status */}
+                    {enableEnhancedFeatures && semanticInput && (
+                      <div className="text-xs text-gray-500 space-y-1">
+                        <div className="flex items-center gap-2">
+                          <span>Type:</span>
+                          <Badge variant="outline" className="text-xs">
+                            {semanticInput.semanticState.detectedType?.type || field.type.type}
+                          </Badge>
+                        </div>
+                        {semanticInput.semanticState.isOptimized && (
+                          <div className="flex items-center gap-2">
+                            <span>Optimized:</span>
+                            <Badge variant="default" className="text-xs">Yes</Badge>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+
+              {/* Form Actions */}
+              <div className="flex flex-col sm:flex-row gap-3 pt-4">
+                <Button
+                  type="submit"
+                  disabled={!isFormValid || isSubmitting}
+                  className="flex-1 touch-button"
+                  style={{ minHeight: layout.currentSpacing }}
+                >
+                  {isSubmitting ? 'Submitting...' : 'Submit'}
+                </Button>
+                
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleReset}
+                  className="flex-1 touch-button"
+                  style={{ minHeight: layout.currentSpacing }}
+                >
+                  Reset
+                </Button>
+              </div>
+
+              {/* Form Status */}
+              <div className="text-sm text-gray-500 space-y-1">
+                <div className="flex items-center gap-2">
+                  <span>Form Status:</span>
+                  <Badge variant={isFormValid ? 'default' : 'secondary'}>
+                    {isFormValid ? 'Valid' : 'Invalid'}
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span>Dirty:</span>
+                  <Badge variant={isFormDirty ? 'default' : 'secondary'}>
+                    {isFormDirty ? 'Yes' : 'No'}
+                  </Badge>
+                </div>
+                {enableEnhancedFeatures && (
+                  <div className="flex items-center gap-2">
+                    <span>Performance Score:</span>
+                    <Badge variant={
+                      performance.performanceState.performanceMetrics.optimizationScore >= 0.8 ? 'default' :
+                      performance.performanceState.performanceMetrics.optimizationScore >= 0.6 ? 'secondary' : 'destructive'
+                    }>
+                      {(performance.performanceState.performanceMetrics.optimizationScore * 100).toFixed(0)}%
+                    </Badge>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </form>
+      </div>
+    )
+  }
+)
+
+MobileFormValidation.displayName = 'MobileFormValidation'
+
+export default MobileFormValidation

package/src/components/ui/mobile-input-demo.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { Card } from './card';
+import { MobileInput, mobileInputConfigs } from './mobile-input';
+
+export const MobileInputDemo: React.FC = () => {
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-cs-text-primary mb-2">
+          Mobile Input System Recovery
+        </h2>
+        <p className="text-cs-text-secondary">
+          Semantic Input Excellence - Recovered from original project
+        </p>
+      </div>
+
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Semantic Input Types
+        </h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Name Input</label>
+            <MobileInput
+              placeholder="Enter your full name"
+              mobileConfig={mobileInputConfigs.name}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Auto-capitalizes words, suggests name autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Email Input</label>
+            <MobileInput
+              placeholder="Enter your email"
+              mobileConfig={mobileInputConfigs.email}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Email keyboard, no spell check, email autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Phone Input</label>
+            <MobileInput
+              placeholder="Enter phone number"
+              mobileConfig={mobileInputConfigs.phone}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Numeric keyboard, phone autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Password Input</label>
+            <MobileInput
+              placeholder="Enter new password"
+              mobileConfig={mobileInputConfigs.newPassword}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Password keyboard, new-password autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Search Input</label>
+            <MobileInput
+              placeholder="Search..."
+              mobileConfig={mobileInputConfigs.search}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Search keyboard, no autocomplete
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Amount Input</label>
+            <MobileInput
+              placeholder="Enter amount"
+              mobileConfig={mobileInputConfigs.amount}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Decimal keyboard, no autocomplete
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Custom Mobile Configurations
+        </h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Custom Input Mode</label>
+            <MobileInput
+              placeholder="Custom input mode"
+              mobileConfig={{
+                semanticType: 'email',
+                inputMode: 'tel',
+                spellCheck: true,
+                autoCapitalize: 'characters'
+              }}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Email type with tel input mode, spell check enabled
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Disabled Autocomplete</label>
+            <MobileInput
+              placeholder="No autocomplete"
+              mobileConfig={{
+                semanticType: 'name',
+                enableAutocomplete: false
+              }}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Name input with autocomplete disabled
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Props Override Behavior
+        </h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Explicit Type Override</label>
+            <MobileInput
+              type="password"
+              placeholder="Password type overrides semantic"
+              mobileConfig={{ semanticType: 'email' }}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Explicit password type overrides email semantic type
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-cs-text-secondary">Custom Attributes</label>
+            <MobileInput
+              placeholder="Custom attributes"
+              mobileConfig={{ semanticType: 'name' }}
+              autoComplete="off"
+              spellCheck={true}
+              className="w-full"
+            />
+            <p className="text-xs text-cs-text-muted">
+              Custom autoComplete and spellCheck override mobile config
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Mobile Optimization Features
+        </h3>
+        <div className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
+            <div className="p-4 bg-cs-surface-bg rounded-lg">
+              <div className="text-2xl mb-2">📱</div>
+              <h4 className="font-medium text-cs-text-primary">Touch Optimized</h4>
+              <p className="text-sm text-cs-text-secondary">
+                44px touch targets, touch-manipulation CSS
+              </p>
+            </div>
+            <div className="p-4 bg-cs-surface-bg rounded-lg">
+              <div className="text-2xl mb-2">⌨️</div>
+              <h4 className="font-medium text-cs-text-primary">Smart Keyboards</h4>
+              <p className="text-sm text-cs-text-secondary">
+                Semantic input modes for optimal mobile keyboards
+              </p>
+            </div>
+            <div className="p-4 bg-cs-surface-bg rounded-lg">
+              <div className="text-2xl mb-2">🔍</div>
+              <h4 className="font-medium text-cs-text-primary">Autocomplete</h4>
+              <p className="text-sm text-cs-text-secondary">
+                Intelligent autocomplete suggestions for better UX
+              </p>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};