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

package/dist/components/ui/mobile-form-validation.js

@@ -11,17 +11,27 @@ import { useSemanticInput, InputType } from '../../hooks/use-semantic-input'
 import { useFormPerformance } from '../../hooks/use-form-performance'
 
 export interface MobileFormValidationProps {
-  title?]
-    initialValue?}>
-  onSubmit?, any>) => void
-  onValidationChange?) => void
-  className?}
+  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; data, any>; errors] }>
-  reset) => void
-  validate) => Promise<boolean>
-  getFieldValidation) => any
+  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>(
@@ -50,110 +60,116 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
     // Initialize hooks with configuration based on enhanced features
     const initialFields = fields.reduce((acc, field) => {
       acc[field.name] = {
-        name,
-        value,
-        rules}
+        name: field.name,
+        value: field.initialValue || '',
+        rules: field.rules
+      }
       return acc
     }, {} as Record<string, any>)
 
     // Form feedback hook
     const feedback = useFormFeedback({
-      onFeedbackShow) => {
-        console.log('Feedback shown, feedbackState)
+      onFeedbackShow: (feedbackState) => {
+        console.log('Feedback shown:', feedbackState)
       }
     }, {
-      enableAnimations,
-      enableTouchFeedback,
-      enableHapticFeedback,
-      enableSoundFeedback,
-      enableAccessibility})
+      enableAnimations: true,
+      enableTouchFeedback: true,
+      enableHapticFeedback: enableEnhancedFeatures,
+      enableSoundFeedback: enableEnhancedFeatures,
+      enableAccessibility: true
+    })
 
     // Form validation hook
     const {
       updateField,
       touchField,
       validateAllFields,
-      submitForm,
+      submitForm: submitFormHook,
       resetForm,
       getFieldValidation,
       isFormValid,
       isFormDirty
     } = useMobileFormValidation(initialFields, {
-      onFormSubmit, isValid) => {
+      onFormSubmit: (data, isValid) => {
         if (isValid && onSubmit) {
           onSubmit(data)
         }
       },
-      onValidationComplete, isValid, errors) => {
+      onValidationComplete: (fieldName, isValid, errors) => {
         // Trigger feedback based on validation result
         if (isValid) {
           feedback.showSuccess(`${fieldName} is valid`)
         } else {
-          feedback.showError(`${fieldName}, ')}`)
+          feedback.showError(`${fieldName}: ${errors.join(', ')}`)
         }
       }
     }, {
-      enableTouchFeedback,
-      enableHapticFeedback,
-      enableSoundFeedback,
-      validationDelay,
-      enablePerformanceOptimization,
-      maxValidationRetries})
+      enableTouchFeedback: true,
+      enableHapticFeedback: enableEnhancedFeatures,
+      enableSoundFeedback: enableEnhancedFeatures,
+      validationDelay: enableEnhancedFeatures ? 300 : 500,
+      enablePerformanceOptimization: enableEnhancedFeatures,
+      maxValidationRetries: enableEnhancedFeatures ? 3 : 1
+    })
 
     // Mobile form layout hook
     const layout = useMobileFormLayout({
-      onLayoutChange) => {
-        console.log('Layout changed, layoutState)
+      onLayoutChange: (layoutState) => {
+        console.log('Layout changed:', layoutState)
       }
     }, {
-      enableTouchOptimization,
-      enableKeyboardOptimization,
-      enableResponsiveBehavior,
-      enablePerformanceOptimization,
-      enableAutoFocus})
+      enableTouchOptimization: true,
+      enableKeyboardOptimization: enableEnhancedFeatures,
+      enableResponsiveBehavior: true,
+      enablePerformanceOptimization: enableEnhancedFeatures,
+      enableAutoFocus: enableEnhancedFeatures
+    })
 
     // Form performance hook
     const performance = useFormPerformance({
-      onPerformanceWarning, metrics) => {
-        console.warn('Performance warning, warning, metrics)
+      onPerformanceWarning: (warning, metrics) => {
+        console.warn('Performance warning:', warning, metrics)
         feedback.showWarning(warning)
       },
-      onMemoryWarning, _threshold) => {
-        feedback.showWarning(`Memory usage high).toFixed(1)}%`)
+      onMemoryWarning: (usage, _threshold) => {
+        feedback.showWarning(`Memory usage high: ${(usage * 100).toFixed(1)}%`)
       },
-      onBatteryWarning, isLow) => {
+      onBatteryWarning: (level, isLow) => {
         if (isLow) {
-          feedback.showWarning(`Low battery).toFixed(0)}%`)
+          feedback.showWarning(`Low battery: ${(level * 100).toFixed(0)}%`)
         }
       }
     }, {
-      enableValidationThrottling,
-      enableTouchEventOptimization,
-      enableMemoryManagement,
-      enableBatteryOptimization})
+      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) => {
-          console.log(`Input type detected for ${field.name}, inputType)
+        onInputTypeDetected: (inputType) => {
+          console.log(`Input type detected for ${field.name}:`, inputType)
         },
-        onKeyboardOptimization) => {
-          console.log(`Keyboard optimization for ${field.name}, optimized)
+        onKeyboardOptimization: (optimized) => {
+          console.log(`Keyboard optimization for ${field.name}:`, optimized)
         }
       }, {
-        enableAutoDetection,
-        enableKeyboardOptimization,
-        enableAutocomplete,
-        enableTouchOptimization,
-        enableAccessibility,
-        enablePerformanceMonitoring})
+        enableAutoDetection: true,
+        enableKeyboardOptimization: enableEnhancedFeatures,
+        enableAutocomplete: enableEnhancedFeatures,
+        enableTouchOptimization: true,
+        enableAccessibility: true,
+        enablePerformanceMonitoring: enableEnhancedFeatures
+      })
       return acc
     }, {} as Record<string, any>)
 
     // Handle field changes
-    const handleFieldChange = (fieldName, value) => {
-      setFormData(prev => ({ ...prev, [fieldName]}))
+    const handleFieldChange = (fieldName: string, value: any) => {
+      setFormData(prev => ({ ...prev, [fieldName]: value }))
       
       // Update validation state
       updateField(fieldName, value)
@@ -171,12 +187,12 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
     }
 
     // Handle field blur
-    const handleFieldBlur = (fieldName) => {
+    const handleFieldBlur = (fieldName: string) => {
       touchField(fieldName)
     }
 
     // Handle form submission
-    const handleSubmit = async (e) => {
+    const handleSubmit = async (e: React.FormEvent) => {
       e.preventDefault()
       setIsSubmitting(true)
 
@@ -189,11 +205,11 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
             onSubmit(result.data)
           }
         } else {
-          feedback.showError(`Form submission failed, ')}`)
+          feedback.showError(`Form submission failed: ${result.errors.join(', ')}`)
         }
       } catch (error) {
         feedback.showError('An unexpected error occurred')
-        console.error('Form submission error, error)
+        console.error('Form submission error:', error)
       } finally {
         setIsSubmitting(false)
       }
@@ -208,7 +224,7 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
       }, {} as Record<string, any>))
       
       // Reset semantic inputs
-      Object.values(semanticInputs).forEach((semanticInput) => {
+      Object.values(semanticInputs).forEach((semanticInput: any) => {
         semanticInput.resetOptimizations()
       })
       
@@ -223,9 +239,9 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
 
     // Expose methods via ref
     React.useImperativeHandle(ref, () => ({
-      submit,
-      reset,
-      validate,
+      submit: submitFormHook,
+      reset: handleReset,
+      validate: validateAllFields,
       getFieldValidation
     }))
 
@@ -248,13 +264,15 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
           <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={performance.performanceState.isOptimized ? 'default' }>
-                  {performance.performanceState.isOptimized ? 'Optimized' }
+                <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={layout.isOptimized ? 'default' }>
-                  {layout.isOptimized ? 'Optimized' }
+                <span>Layout:</span>
+                <Badge variant={layout.isOptimized ? 'default' : 'secondary'}>
+                  {layout.isOptimized ? 'Optimized' : 'Not Optimized'}
                 </Badge>
               </div>
             </div>
@@ -315,10 +333,15 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
                         onBlur={() => handleFieldBlur(field.name)}
                         className={`w-full transition-all duration-200 ${
                           isFieldTouched && !isFieldValid
-                            ? 'border-red-500 focus} ${semanticInput?.getSemanticClasses() || ''}`}
+                            ? '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,
-                          width}}
+                          minHeight: layout.currentSpacing,
+                          width: layout.currentFieldWidth
+                        }}
                         {...semanticInput?.getOptimizedAttributes(field.type)}
                       />
                       
@@ -327,7 +350,8 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
                         <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
                           {isFieldValid ? (
                             <span className="text-green-500 text-lg">✓</span>
-                          ) ="text-red-500 text-lg">✗</span>
+                          ) : (
+                            <span className="text-red-500 text-lg">✗</span>
                           )}
                         </div>
                       )}
@@ -336,7 +360,7 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
                     {/* Field Errors */}
                     {isFieldTouched && !isFieldValid && fieldErrors.length > 0 && (
                       <div className="text-red-500 text-sm space-y-1">
-                        {fieldErrors.map((error, index) => (
+                        {fieldErrors.map((error: string, index: number) => (
                           <div key={index} className="flex items-center gap-1">
                             <span>•</span>
                             <span>{error}</span>
@@ -349,13 +373,15 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
                     {enableEnhancedFeatures && semanticInput && (
                       <div className="text-xs text-gray-500 space-y-1">
                         <div className="flex items-center gap-2">
-                          <span>Type="outline" className="text-xs">
+                          <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="default" className="text-xs">Yes</Badge>
+                            <span>Optimized:</span>
+                            <Badge variant="default" className="text-xs">Yes</Badge>
                           </div>
                         )}
                       </div>
@@ -365,12 +391,14 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
               })}
 
               {/* Form Actions */}
-              <div className="flex flex-col sm="submit"
+              <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}}
+                  style={{ minHeight: layout.currentSpacing }}
                 >
-                  {isSubmitting ? 'Submitting...' }
+                  {isSubmitting ? 'Submitting...' : 'Submit'}
                 </Button>
                 
                 <Button
@@ -378,7 +406,7 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
                   variant="outline"
                   onClick={handleReset}
                   className="flex-1 touch-button"
-                  style={{ minHeight}}
+                  style={{ minHeight: layout.currentSpacing }}
                 >
                   Reset
                 </Button>
@@ -387,19 +415,24 @@ export const MobileFormValidation = forwardRef<MobileFormValidationRef, MobileFo
               {/* Form Status */}
               <div className="text-sm text-gray-500 space-y-1">
                 <div className="flex items-center gap-2">
-                  <span>Form Status={isFormValid ? 'default' }>
-                    {isFormValid ? 'Valid' }
+                  <span>Form Status:</span>
+                  <Badge variant={isFormValid ? 'default' : 'secondary'}>
+                    {isFormValid ? 'Valid' : 'Invalid'}
                   </Badge>
                 </div>
                 <div className="flex items-center gap-2">
-                  <span>Dirty={isFormDirty ? 'default' }>
-                    {isFormDirty ? 'Yes' }
+                  <span>Dirty:</span>
+                  <Badge variant={isFormDirty ? 'default' : 'secondary'}>
+                    {isFormDirty ? 'Yes' : 'No'}
                   </Badge>
                 </div>
                 {enableEnhancedFeatures && (
                   <div className="flex items-center gap-2">
-                    <span>Performance Score={
-                      performance.performanceState.performanceMetrics.optimizationScore >= 0.8 ? 'default' = 0.6 ? 'secondary' }>
+                    <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>

package/dist/components/ui/mobile-input-demo.esm.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Card } from './card';
 import { MobileInput, mobileInputConfigs } from './mobile-input';
 
-export const MobileInputDemo= () => {
+export const MobileInputDemo: React.FC = () => {
   return (
     <div className="space-y-6">
       <div className="text-center">
@@ -18,7 +18,8 @@ export const MobileInputDemo= () => {
         <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
           Semantic Input Types
         </h3>
-        <div className="grid grid-cols-1 md="space-y-2">
+        <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"
@@ -96,15 +97,17 @@ export const MobileInputDemo= () => {
         <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
           Custom Mobile Configurations
         </h3>
-        <div className="grid grid-cols-1 md="space-y-2">
+        <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,
-                inputMode,
-                spellCheck,
-                autoCapitalize}}
+                semanticType: 'email',
+                inputMode: 'tel',
+                spellCheck: true,
+                autoCapitalize: 'characters'
+              }}
               className="w-full"
             />
             <p className="text-xs text-cs-text-muted">
@@ -117,8 +120,9 @@ export const MobileInputDemo= () => {
             <MobileInput
               placeholder="No autocomplete"
               mobileConfig={{
-                semanticType,
-                enableAutocomplete}}
+                semanticType: 'name',
+                enableAutocomplete: false
+              }}
               className="w-full"
             />
             <p className="text-xs text-cs-text-muted">
@@ -132,12 +136,13 @@ export const MobileInputDemo= () => {
         <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
           Props Override Behavior
         </h3>
-        <div className="grid grid-cols-1 md="space-y-2">
+        <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}}
+              mobileConfig={{ semanticType: 'email' }}
               className="w-full"
             />
             <p className="text-xs text-cs-text-muted">
@@ -149,7 +154,7 @@ export const MobileInputDemo= () => {
             <label className="text-sm font-medium text-cs-text-secondary">Custom Attributes</label>
             <MobileInput
               placeholder="Custom attributes"
-              mobileConfig={{ semanticType}}
+              mobileConfig={{ semanticType: 'name' }}
               autoComplete="off"
               spellCheck={true}
               className="w-full"
@@ -166,7 +171,8 @@ export const MobileInputDemo= () => {
           Mobile Optimization Features
         </h3>
         <div className="space-y-4">
-          <div className="grid grid-cols-1 md="p-4 bg-cs-surface-bg rounded-lg">
+          <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">

package/dist/components/ui/mobile-input-demo.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Card } from './card';
 import { MobileInput, mobileInputConfigs } from './mobile-input';
 
-export const MobileInputDemo= () => {
+export const MobileInputDemo: React.FC = () => {
   return (
     <div className="space-y-6">
       <div className="text-center">
@@ -18,7 +18,8 @@ export const MobileInputDemo= () => {
         <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
           Semantic Input Types
         </h3>
-        <div className="grid grid-cols-1 md="space-y-2">
+        <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"
@@ -96,15 +97,17 @@ export const MobileInputDemo= () => {
         <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
           Custom Mobile Configurations
         </h3>
-        <div className="grid grid-cols-1 md="space-y-2">
+        <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,
-                inputMode,
-                spellCheck,
-                autoCapitalize}}
+                semanticType: 'email',
+                inputMode: 'tel',
+                spellCheck: true,
+                autoCapitalize: 'characters'
+              }}
               className="w-full"
             />
             <p className="text-xs text-cs-text-muted">
@@ -117,8 +120,9 @@ export const MobileInputDemo= () => {
             <MobileInput
               placeholder="No autocomplete"
               mobileConfig={{
-                semanticType,
-                enableAutocomplete}}
+                semanticType: 'name',
+                enableAutocomplete: false
+              }}
               className="w-full"
             />
             <p className="text-xs text-cs-text-muted">
@@ -132,12 +136,13 @@ export const MobileInputDemo= () => {
         <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
           Props Override Behavior
         </h3>
-        <div className="grid grid-cols-1 md="space-y-2">
+        <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}}
+              mobileConfig={{ semanticType: 'email' }}
               className="w-full"
             />
             <p className="text-xs text-cs-text-muted">
@@ -149,7 +154,7 @@ export const MobileInputDemo= () => {
             <label className="text-sm font-medium text-cs-text-secondary">Custom Attributes</label>
             <MobileInput
               placeholder="Custom attributes"
-              mobileConfig={{ semanticType}}
+              mobileConfig={{ semanticType: 'name' }}
               autoComplete="off"
               spellCheck={true}
               className="w-full"
@@ -166,7 +171,8 @@ export const MobileInputDemo= () => {
           Mobile Optimization Features
         </h3>
         <div className="space-y-4">
-          <div className="grid grid-cols-1 md="p-4 bg-cs-surface-bg rounded-lg">
+          <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">