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

package/dist/hooks/use-semantic-input-types.js

@@ -1,21 +1,42 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface SemanticInputConfig {
-  type}
+  type: string
+  inputMode: 'text' | 'email' | 'tel' | 'url' | 'numeric' | 'decimal' | 'search'
+  autoCapitalize: 'off' | 'on' | 'sentences' | 'words' | 'characters' | 'none'
+  autoComplete: string
+  autoCorrect: 'on' | 'off'
+  spellCheck: boolean
+  pattern?: string
+  minLength?: number
+  maxLength?: number
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  tabIndex?: number
+}
 
 export interface SemanticInputType {
-  id}
+  id: string
+  name: string
+  config: SemanticInputConfig
+  mobileOptimized: boolean
+  touchFriendly: boolean
+  accessibilityEnhanced: boolean
+  performanceOptimized: boolean
+}
 
 export interface SemanticInputTypesCallbacks {
-  onInputTypeSelected?) => void
-  onConfigApplied?) => void
-  onMobileOptimizationApplied?) => void
-  onTouchOptimizationApplied?) => void
-  onAccessibilityEnhanced?) => void
+  onInputTypeSelected?: (inputType: SemanticInputType) => void
+  onConfigApplied?: (config: SemanticInputConfig) => void
+  onMobileOptimizationApplied?: (optimization: string) => void
+  onTouchOptimizationApplied?: (optimization: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
 }
 
 export const useSemanticInputTypes = (
-  callbacks= {}
+  callbacks: SemanticInputTypesCallbacks = {}
 ) => {
   const [inputTypes, setInputTypes] = useState<SemanticInputType[]>([])
   const [selectedType, setSelectedType] = useState<SemanticInputType | null>(null)
@@ -26,121 +47,142 @@ export const useSemanticInputTypes = (
   const optimizationTimerRef = useRef<number | null>(null)
 
   // Semantic input type configurations
-  const semanticInputConfigs, SemanticInputConfig> = {
-    name,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      minLength,
-      maxLength,
-      placeholder,
-      required},
-    email,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      pattern]+@[a-z0-9.-]+\\.[a-z]{2,}$',
-      placeholder,
-      required},
-    phone,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      pattern)\\s]+',
-      placeholder,
-      required},
-    creditCard,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      pattern]+',
-      minLength,
-      maxLength,
-      placeholder,
-      required},
-    amount,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      minLength,
-      maxLength,
-      placeholder,
-      required},
-    password,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      minLength,
-      maxLength,
-      placeholder,
-      required},
-    search,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      placeholder,
-      required},
-    url,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      placeholder,
-      required},
-    username,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      minLength,
-      maxLength,
-      placeholder,
-      required},
-    address,
-      inputMode,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      spellCheck,
-      minLength,
-      maxLength,
-      placeholder,
-      required}
+  const semanticInputConfigs: Record<string, SemanticInputConfig> = {
+    name: {
+      type: 'text',
+      inputMode: 'text',
+      autoCapitalize: 'words',
+      autoComplete: 'name',
+      autoCorrect: 'on',
+      spellCheck: true,
+      minLength: 2,
+      maxLength: 50,
+      placeholder: 'Enter your full name',
+      required: true
+    },
+    email: {
+      type: 'email',
+      inputMode: 'email',
+      autoCapitalize: 'none',
+      autoComplete: 'email',
+      autoCorrect: 'off',
+      spellCheck: false,
+      pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$',
+      placeholder: 'Enter your email address',
+      required: true
+    },
+    phone: {
+      type: 'tel',
+      inputMode: 'tel',
+      autoCapitalize: 'none',
+      autoComplete: 'tel',
+      autoCorrect: 'off',
+      spellCheck: false,
+      pattern: '[0-9\\-\\+\\(\\)\\s]+',
+      placeholder: 'Enter your phone number',
+      required: true
+    },
+    creditCard: {
+      type: 'text',
+      inputMode: 'numeric',
+      autoCapitalize: 'none',
+      autoComplete: 'cc-number',
+      autoCorrect: 'off',
+      spellCheck: false,
+      pattern: '[0-9\\s]+',
+      minLength: 13,
+      maxLength: 19,
+      placeholder: 'Enter card number',
+      required: true
+    },
+    amount: {
+      type: 'number',
+      inputMode: 'decimal',
+      autoCapitalize: 'none',
+      autoComplete: 'off',
+      autoCorrect: 'off',
+      spellCheck: false,
+      minLength: 1,
+      maxLength: 10,
+      placeholder: 'Enter amount',
+      required: true
+    },
+    password: {
+      type: 'password',
+      inputMode: 'text',
+      autoCapitalize: 'none',
+      autoComplete: 'current-password',
+      autoCorrect: 'off',
+      spellCheck: false,
+      minLength: 8,
+      maxLength: 128,
+      placeholder: 'Enter your password',
+      required: true
+    },
+    search: {
+      type: 'search',
+      inputMode: 'search',
+      autoCapitalize: 'none',
+      autoComplete: 'off',
+      autoCorrect: 'off',
+      spellCheck: true,
+      placeholder: 'Search...',
+      required: false
+    },
+    url: {
+      type: 'url',
+      inputMode: 'url',
+      autoCapitalize: 'none',
+      autoComplete: 'url',
+      autoCorrect: 'off',
+      spellCheck: false,
+      placeholder: 'Enter website URL',
+      required: false
+    },
+    username: {
+      type: 'text',
+      inputMode: 'text',
+      autoCapitalize: 'none',
+      autoComplete: 'username',
+      autoCorrect: 'off',
+      spellCheck: false,
+      minLength: 3,
+      maxLength: 30,
+      placeholder: 'Enter username',
+      required: true
+    },
+    address: {
+      type: 'text',
+      inputMode: 'text',
+      autoCapitalize: 'words',
+      autoComplete: 'street-address',
+      autoCorrect: 'on',
+      spellCheck: true,
+      minLength: 10,
+      maxLength: 200,
+      placeholder: 'Enter your address',
+      required: true
+    }
   }
 
   // Initialize semantic input types
   const initializeInputTypes = useCallback(() => {
-    const types] = Object.entries(semanticInputConfigs).map(([key, config]) => ({
-      id,
-      name).toUpperCase() + key.slice(1),
+    const types: SemanticInputType[] = Object.entries(semanticInputConfigs).map(([key, config]) => ({
+      id: key,
+      name: key.charAt(0).toUpperCase() + key.slice(1),
       config,
-      mobileOptimized,
-      touchFriendly,
-      accessibilityEnhanced,
-      performanceOptimized}))
+      mobileOptimized: true,
+      touchFriendly: true,
+      accessibilityEnhanced: true,
+      performanceOptimized: true
+    }))
 
     setInputTypes(types)
     return types
   }, [])
 
   // Select input type
-  const selectInputType = useCallback((typeId) => {
+  const selectInputType = useCallback((typeId: string) => {
     const type = inputTypes.find(t => t.id === typeId)
     if (type) {
       setSelectedType(type)
@@ -151,7 +193,7 @@ export const useSemanticInputTypes = (
   }, [inputTypes, callbacks])
 
   // Apply input configuration
-  const applyInputConfig = useCallback((config) => {
+  const applyInputConfig = useCallback((config: SemanticInputConfig) => {
     if (inputRef.current) {
       // Apply all configuration properties
       Object.entries(config).forEach(([key, value]) => {
@@ -243,13 +285,13 @@ export const useSemanticInputTypes = (
   }, [selectedType, applyInputConfig, applyMobileOptimization, applyTouchOptimization, enhanceAccessibility])
 
   // Get input type by name
-  const getInputTypeByName = useCallback((name) => {
+  const getInputTypeByName = useCallback((name: string) => {
     return inputTypes.find(t => t.name.toLowerCase() === name.toLowerCase())
   }, [inputTypes])
 
   // Validate input configuration
-  const validateInputConfig = useCallback((config) => {
-    const errors] = []
+  const validateInputConfig = useCallback((config: SemanticInputConfig) => {
+    const errors: string[] = []
     
     if (!config.type) errors.push('Input type is required')
     if (!config.inputMode) errors.push('Input mode is required')
@@ -299,15 +341,15 @@ export const useSemanticInputTypes = (
     validateInputConfig,
     
     // Utility functions
-    getInputConfig) => semanticInputConfigs[typeId],
-    isTypeSelected) => selectedType?.id === typeId,
-    getOptimizationStatus) => ({
-      mobile=> o.includes('Mobile')),
-      touch=> o.includes('Touch')),
-      accessibility=> o.includes('ARIA') || o.includes('Screen reader')),
-      performance=> o.includes('Performance'))
+    getInputConfig: (typeId: string) => semanticInputConfigs[typeId],
+    isTypeSelected: (typeId: string) => selectedType?.id === typeId,
+    getOptimizationStatus: () => ({
+      mobile: optimizations.some(o => o.includes('Mobile')),
+      touch: optimizations.some(o => o.includes('Touch')),
+      accessibility: optimizations.some(o => o.includes('ARIA') || o.includes('Screen reader')),
+      performance: optimizations.some(o => o.includes('Performance'))
     }),
-    clearOptimizations) => setOptimizations([])
+    clearOptimizations: () => setOptimizations([])
   }
 }