@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/hooks/use-form-feedback.js

@@ -1,48 +1,68 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface FeedbackState {
-  type}
+  type: 'none' | 'success' | 'error' | 'warning' | 'info'
+  message: string
+  isVisible: boolean
+  isAnimating: boolean
+  duration: number
+  timestamp: number
+}
 
 export interface FeedbackConfig {
-  enableAnimations}
+  enableAnimations: boolean
+  enableTouchFeedback: boolean
+  enableHapticFeedback: boolean
+  enableSoundFeedback: boolean
+  defaultDuration: number
+  animationDuration: number
+  enableAutoHide: boolean
+  enableAccessibility: boolean
+}
 
 export interface FeedbackCallbacks {
-  onFeedbackShow?) => void
-  onFeedbackHide?) => void
-  onFeedbackComplete?) => void
-  onAccessibilityAnnounce?) => void
+  onFeedbackShow?: (feedback: FeedbackState) => void
+  onFeedbackHide?: (feedback: FeedbackState) => void
+  onFeedbackComplete?: (feedback: FeedbackState) => void
+  onAccessibilityAnnounce?: (message: string) => void
 }
 
 export interface FormFeedbackState {
-  currentFeedback]
-  isAnimating}
+  currentFeedback: FeedbackState
+  feedbackHistory: FeedbackState[]
+  isAnimating: boolean
+  accessibilityEnabled: boolean
+}
 
 export const useFormFeedback = (
-  callbacks= {},
-  config= {}
+  callbacks: FeedbackCallbacks = {},
+  config: Partial<FeedbackConfig> = {}
 ) => {
-  const defaultConfig= {
-    enableAnimations,
-    enableTouchFeedback,
-    enableHapticFeedback,
-    enableSoundFeedback,
-    defaultDuration,
-    animationDuration,
-    enableAutoHide,
-    enableAccessibility,
+  const defaultConfig: FeedbackConfig = {
+    enableAnimations: true,
+    enableTouchFeedback: true,
+    enableHapticFeedback: true,
+    enableSoundFeedback: false,
+    defaultDuration: 3000,
+    animationDuration: 300,
+    enableAutoHide: true,
+    enableAccessibility: true,
     ...config
   }
 
   const [feedbackState, setFeedbackState] = useState<FormFeedbackState>({
-    currentFeedback,
-      message,
-      isVisible,
-      isAnimating,
-      duration,
-      timestamp},
-    feedbackHistory],
-    isAnimating,
-    accessibilityEnabled})
+    currentFeedback: {
+      type: 'none',
+      message: '',
+      isVisible: false,
+      isAnimating: false,
+      duration: defaultConfig.defaultDuration,
+      timestamp: 0
+    },
+    feedbackHistory: [],
+    isAnimating: false,
+    accessibilityEnabled: defaultConfig.enableAccessibility
+  })
 
   const hideTimerRef = useRef<NodeJS.Timeout | null>(null)
   const animationTimerRef = useRef<NodeJS.Timeout | null>(null)
@@ -56,23 +76,24 @@ export const useFormFeedback = (
   }, [defaultConfig.enableSoundFeedback])
 
   // Trigger haptic feedback
-  const triggerHapticFeedback = useCallback((intensity= 'medium') => {
+  const triggerHapticFeedback = useCallback((intensity: 'light' | 'medium' | 'strong' = 'medium') => {
     if (!defaultConfig.enableHapticFeedback || !('vibrate' in navigator)) return
 
     const vibrationPattern = {
-      light,
-      medium,
-      strong}
+      light: 20,
+      medium: 50,
+      strong: 100
+    }
 
     try {
       navigator.vibrate(vibrationPattern[intensity])
     } catch (error) {
-      console.warn('Haptic feedback not supported, error)
+      console.warn('Haptic feedback not supported:', error)
     }
   }, [defaultConfig.enableHapticFeedback])
 
   // Trigger sound feedback
-  const triggerSoundFeedback = useCallback((type= 'success') => {
+  const triggerSoundFeedback = useCallback((type: 'success' | 'error' | 'warning' | 'info' = 'success') => {
     if (!defaultConfig.enableSoundFeedback || !audioContextRef.current) return
 
     try {
@@ -84,10 +105,10 @@ export const useFormFeedback = (
       gainNode.connect(audioContext.destination)
 
       const soundConfig = {
-        success, duration, volume},
-        error, duration, volume},
-        warning, duration, volume},
-        info, duration, volume}
+        success: { frequency: 800, duration: 0.1, volume: 0.1 },
+        error: { frequency: 400, duration: 0.2, volume: 0.15 },
+        warning: { frequency: 600, duration: 0.15, volume: 0.12 },
+        info: { frequency: 1000, duration: 0.08, volume: 0.08 }
       }
 
       const config = soundConfig[type]
@@ -97,12 +118,12 @@ export const useFormFeedback = (
       oscillator.start(audioContext.currentTime)
       oscillator.stop(audioContext.currentTime + config.duration)
     } catch (error) {
-      console.warn('Sound feedback not supported, error)
+      console.warn('Sound feedback not supported:', error)
     }
   }, [defaultConfig.enableSoundFeedback])
 
   // Announce feedback for accessibility
-  const announceAccessibility = useCallback((message) => {
+  const announceAccessibility = useCallback((message: string) => {
     if (!defaultConfig.enableAccessibility) return
 
     // Create a live region for screen readers
@@ -126,10 +147,10 @@ export const useFormFeedback = (
 
   // Show feedback with animation
   const showFeedback = useCallback((
-    type],
-    message,
-    duration?,
-    options?; skipSound?; skipHaptic?}
+    type: FeedbackState['type'],
+    message: string,
+    duration?: number,
+    options?: { skipAnimation?: boolean; skipSound?: boolean; skipHaptic?: boolean }
   ) => {
     // Clear existing timers
     if (hideTimerRef.current) {
@@ -142,57 +163,64 @@ export const useFormFeedback = (
       animationTimerRef.current = null
     }
 
-    const feedback= {
+    const feedback: FeedbackState = {
       type,
       message,
-      isVisible,
-      isAnimating,
-      duration,
-      timestamp)
+      isVisible: true,
+      isAnimating: !options?.skipAnimation && defaultConfig.enableAnimations,
+      duration: duration || defaultConfig.defaultDuration,
+      timestamp: Date.now()
     }
 
     // Start animation
     if (feedback.isAnimating) {
       setFeedbackState(prev => ({
         ...prev,
-        currentFeedback,
-        isAnimating}))
+        currentFeedback: feedback,
+        isAnimating: true
+      }))
 
       // End animation after animation duration
       animationTimerRef.current = setTimeout(() => {
         setFeedbackState(prev => ({
           ...prev,
-          isAnimating}))
+          isAnimating: false
+        }))
       }, defaultConfig.animationDuration)
     } else {
       setFeedbackState(prev => ({
         ...prev,
-        currentFeedback,
-        isAnimating}))
+        currentFeedback: feedback,
+        isAnimating: false
+      }))
     }
 
     // Add to history
     setFeedbackState(prev => ({
       ...prev,
-      feedbackHistory, ...prev.feedbackHistory.slice(0, 9)] // Keep last 10
+      feedbackHistory: [feedback, ...prev.feedbackHistory.slice(0, 9)] // Keep last 10
     }))
 
     // Trigger feedback based on type
     if (!options?.skipHaptic) {
       switch (type) {
-        case 'success')
+        case 'success':
+          triggerHapticFeedback('light')
           break
-        case 'error')
+        case 'error':
+          triggerHapticFeedback('strong')
           break
-        case 'warning')
+        case 'warning':
+          triggerHapticFeedback('medium')
           break
-        case 'info')
+        case 'info':
+          triggerHapticFeedback('light')
           break
       }
     }
 
     if (!options?.skipSound) {
-      triggerSoundFeedback(type === 'none' ? 'success' )
+      triggerSoundFeedback(type === 'none' ? 'success' : type)
     }
 
     // Announce for accessibility
@@ -231,31 +259,34 @@ export const useFormFeedback = (
 
     setFeedbackState(prev => ({
       ...prev,
-      currentFeedback,
-        isVisible,
-        isAnimating},
-      isAnimating}))
+      currentFeedback: {
+        ...prev.currentFeedback,
+        isVisible: false,
+        isAnimating: false
+      },
+      isAnimating: false
+    }))
 
     callbacks.onFeedbackHide?.(feedbackState.currentFeedback)
   }, [feedbackState.currentFeedback, callbacks])
 
   // Show success feedback
-  const showSuccess = useCallback((message, duration?, options?) => {
+  const showSuccess = useCallback((message: string, duration?: number, options?: any) => {
     showFeedback('success', message, duration, options)
   }, [showFeedback])
 
   // Show error feedback
-  const showError = useCallback((message, duration?, options?) => {
+  const showError = useCallback((message: string, duration?: number, options?: any) => {
     showFeedback('error', message, duration, options)
   }, [showFeedback])
 
   // Show warning feedback
-  const showWarning = useCallback((message, duration?, options?) => {
+  const showWarning = useCallback((message: string, duration?: number, options?: any) => {
     showFeedback('warning', message, duration, options)
   }, [showFeedback])
 
   // Show info feedback
-  const showInfo = useCallback((message, duration?, options?) => {
+  const showInfo = useCallback((message: string, duration?: number, options?: any) => {
     showFeedback('info', message, duration, options)
   }, [showFeedback])
 
@@ -264,7 +295,7 @@ export const useFormFeedback = (
     hideFeedback()
     setFeedbackState(prev => ({
       ...prev,
-      feedbackHistory]
+      feedbackHistory: []
     }))
   }, [hideFeedback])
 
@@ -294,9 +325,19 @@ export const useFormFeedback = (
   }, [feedbackState])
 
   // Get feedback icon
-  const getFeedbackIcon = useCallback((type]) => {
+  const getFeedbackIcon = useCallback((type: FeedbackState['type']) => {
     switch (type) {
-      case 'success'}
+      case 'success':
+        return '✅'
+      case 'error':
+        return '❌'
+      case 'warning':
+        return '⚠️'
+      case 'info':
+        return 'ℹ️'
+      default:
+        return ''
+    }
   }, [])
 
   // Check if feedback is visible
@@ -342,19 +383,21 @@ export const useFormFeedback = (
 // Convenience hook for basic form feedback
 export const useBasicFormFeedback = () => {
   return useFormFeedback({}, {
-    enableAnimations,
-    enableTouchFeedback,
-    enableHapticFeedback,
-    enableSoundFeedback,
-    enableAccessibility})
+    enableAnimations: true,
+    enableTouchFeedback: false,
+    enableHapticFeedback: false,
+    enableSoundFeedback: false,
+    enableAccessibility: true
+  })
 }
 
 // Convenience hook for enhanced form feedback
 export const useEnhancedFormFeedback = () => {
   return useFormFeedback({}, {
-    enableAnimations,
-    enableTouchFeedback,
-    enableHapticFeedback,
-    enableSoundFeedback,
-    enableAccessibility})
+    enableAnimations: true,
+    enableTouchFeedback: true,
+    enableHapticFeedback: true,
+    enableSoundFeedback: true,
+    enableAccessibility: true
+  })
 }