@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/hooks/use-form-feedback.ts

@@ -0,0 +1,403 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface FeedbackState {
+  type: 'none' | 'success' | 'error' | 'warning' | 'info'
+  message: string
+  isVisible: boolean
+  isAnimating: boolean
+  duration: number
+  timestamp: number
+}
+
+export interface FeedbackConfig {
+  enableAnimations: boolean
+  enableTouchFeedback: boolean
+  enableHapticFeedback: boolean
+  enableSoundFeedback: boolean
+  defaultDuration: number
+  animationDuration: number
+  enableAutoHide: boolean
+  enableAccessibility: boolean
+}
+
+export interface FeedbackCallbacks {
+  onFeedbackShow?: (feedback: FeedbackState) => void
+  onFeedbackHide?: (feedback: FeedbackState) => void
+  onFeedbackComplete?: (feedback: FeedbackState) => void
+  onAccessibilityAnnounce?: (message: string) => void
+}
+
+export interface FormFeedbackState {
+  currentFeedback: FeedbackState
+  feedbackHistory: FeedbackState[]
+  isAnimating: boolean
+  accessibilityEnabled: boolean
+}
+
+export const useFormFeedback = (
+  callbacks: FeedbackCallbacks = {},
+  config: Partial<FeedbackConfig> = {}
+) => {
+  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: {
+      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)
+  const audioContextRef = useRef<AudioContext | null>(null)
+
+  // Initialize audio context if supported
+  useEffect(() => {
+    if (defaultConfig.enableSoundFeedback && 'AudioContext' in window) {
+      audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)()
+    }
+  }, [defaultConfig.enableSoundFeedback])
+
+  // Trigger haptic feedback
+  const triggerHapticFeedback = useCallback((intensity: 'light' | 'medium' | 'strong' = 'medium') => {
+    if (!defaultConfig.enableHapticFeedback || !('vibrate' in navigator)) return
+
+    const vibrationPattern = {
+      light: 20,
+      medium: 50,
+      strong: 100
+    }
+
+    try {
+      navigator.vibrate(vibrationPattern[intensity])
+    } catch (error) {
+      console.warn('Haptic feedback not supported:', error)
+    }
+  }, [defaultConfig.enableHapticFeedback])
+
+  // Trigger sound feedback
+  const triggerSoundFeedback = useCallback((type: 'success' | 'error' | 'warning' | 'info' = 'success') => {
+    if (!defaultConfig.enableSoundFeedback || !audioContextRef.current) return
+
+    try {
+      const audioContext = audioContextRef.current
+      const oscillator = audioContext.createOscillator()
+      const gainNode = audioContext.createGain()
+
+      oscillator.connect(gainNode)
+      gainNode.connect(audioContext.destination)
+
+      const soundConfig = {
+        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]
+      oscillator.frequency.setValueAtTime(config.frequency, audioContext.currentTime)
+      gainNode.gain.setValueAtTime(config.volume, audioContext.currentTime)
+
+      oscillator.start(audioContext.currentTime)
+      oscillator.stop(audioContext.currentTime + config.duration)
+    } catch (error) {
+      console.warn('Sound feedback not supported:', error)
+    }
+  }, [defaultConfig.enableSoundFeedback])
+
+  // Announce feedback for accessibility
+  const announceAccessibility = useCallback((message: string) => {
+    if (!defaultConfig.enableAccessibility) return
+
+    // Create a live region for screen readers
+    let liveRegion = document.getElementById('form-feedback-live-region')
+    if (!liveRegion) {
+      liveRegion = document.createElement('div')
+      liveRegion.id = 'form-feedback-live-region'
+      liveRegion.setAttribute('aria-live', 'polite')
+      liveRegion.setAttribute('aria-atomic', 'true')
+      liveRegion.style.position = 'absolute'
+      liveRegion.style.left = '-10000px'
+      liveRegion.style.width = '1px'
+      liveRegion.style.height = '1px'
+      liveRegion.style.overflow = 'hidden'
+      document.body.appendChild(liveRegion)
+    }
+
+    liveRegion.textContent = message
+    callbacks.onAccessibilityAnnounce?.(message)
+  }, [defaultConfig.enableAccessibility, callbacks])
+
+  // Show feedback with animation
+  const showFeedback = useCallback((
+    type: FeedbackState['type'],
+    message: string,
+    duration?: number,
+    options?: { skipAnimation?: boolean; skipSound?: boolean; skipHaptic?: boolean }
+  ) => {
+    // Clear existing timers
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current)
+      hideTimerRef.current = null
+    }
+
+    if (animationTimerRef.current) {
+      clearTimeout(animationTimerRef.current)
+      animationTimerRef.current = null
+    }
+
+    const feedback: FeedbackState = {
+      type,
+      message,
+      isVisible: true,
+      isAnimating: !options?.skipAnimation && defaultConfig.enableAnimations,
+      duration: duration || defaultConfig.defaultDuration,
+      timestamp: Date.now()
+    }
+
+    // Start animation
+    if (feedback.isAnimating) {
+      setFeedbackState(prev => ({
+        ...prev,
+        currentFeedback: feedback,
+        isAnimating: true
+      }))
+
+      // End animation after animation duration
+      animationTimerRef.current = setTimeout(() => {
+        setFeedbackState(prev => ({
+          ...prev,
+          isAnimating: false
+        }))
+      }, defaultConfig.animationDuration)
+    } else {
+      setFeedbackState(prev => ({
+        ...prev,
+        currentFeedback: feedback,
+        isAnimating: false
+      }))
+    }
+
+    // Add to history
+    setFeedbackState(prev => ({
+      ...prev,
+      feedbackHistory: [feedback, ...prev.feedbackHistory.slice(0, 9)] // Keep last 10
+    }))
+
+    // Trigger feedback based on type
+    if (!options?.skipHaptic) {
+      switch (type) {
+        case 'success':
+          triggerHapticFeedback('light')
+          break
+        case 'error':
+          triggerHapticFeedback('strong')
+          break
+        case 'warning':
+          triggerHapticFeedback('medium')
+          break
+        case 'info':
+          triggerHapticFeedback('light')
+          break
+      }
+    }
+
+    if (!options?.skipSound) {
+      triggerSoundFeedback(type === 'none' ? 'success' : type)
+    }
+
+    // Announce for accessibility
+    announceAccessibility(message)
+
+    // Auto-hide if enabled
+    if (defaultConfig.enableAutoHide && feedback.duration > 0) {
+      hideTimerRef.current = setTimeout(() => {
+        hideFeedback()
+      }, feedback.duration)
+    }
+
+    callbacks.onFeedbackShow?.(feedback)
+  }, [
+    defaultConfig.enableAnimations,
+    defaultConfig.defaultDuration,
+    defaultConfig.animationDuration,
+    defaultConfig.enableAutoHide,
+    triggerHapticFeedback,
+    triggerSoundFeedback,
+    announceAccessibility,
+    callbacks
+  ])
+
+  // Hide feedback
+  const hideFeedback = useCallback(() => {
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current)
+      hideTimerRef.current = null
+    }
+
+    if (animationTimerRef.current) {
+      clearTimeout(animationTimerRef.current)
+      animationTimerRef.current = null
+    }
+
+    setFeedbackState(prev => ({
+      ...prev,
+      currentFeedback: {
+        ...prev.currentFeedback,
+        isVisible: false,
+        isAnimating: false
+      },
+      isAnimating: false
+    }))
+
+    callbacks.onFeedbackHide?.(feedbackState.currentFeedback)
+  }, [feedbackState.currentFeedback, callbacks])
+
+  // Show success feedback
+  const showSuccess = useCallback((message: string, duration?: number, options?: any) => {
+    showFeedback('success', message, duration, options)
+  }, [showFeedback])
+
+  // Show error feedback
+  const showError = useCallback((message: string, duration?: number, options?: any) => {
+    showFeedback('error', message, duration, options)
+  }, [showFeedback])
+
+  // Show warning feedback
+  const showWarning = useCallback((message: string, duration?: number, options?: any) => {
+    showFeedback('warning', message, duration, options)
+  }, [showFeedback])
+
+  // Show info feedback
+  const showInfo = useCallback((message: string, duration?: number, options?: any) => {
+    showFeedback('info', message, duration, options)
+  }, [showFeedback])
+
+  // Clear all feedback
+  const clearFeedback = useCallback(() => {
+    hideFeedback()
+    setFeedbackState(prev => ({
+      ...prev,
+      feedbackHistory: []
+    }))
+  }, [hideFeedback])
+
+  // Get feedback classes for styling
+  const getFeedbackClasses = useCallback(() => {
+    const { currentFeedback, isAnimating } = feedbackState
+    
+    if (!currentFeedback.isVisible) return ''
+
+    const classes = ['form-feedback']
+
+    // Add type class
+    if (currentFeedback.type !== 'none') {
+      classes.push(`form-feedback-${currentFeedback.type}`)
+    }
+
+    // Add animation classes
+    if (isAnimating) {
+      classes.push('form-feedback-animating')
+    }
+
+    if (currentFeedback.isVisible) {
+      classes.push('form-feedback-visible')
+    }
+
+    return classes.join(' ')
+  }, [feedbackState])
+
+  // Get feedback icon
+  const getFeedbackIcon = useCallback((type: FeedbackState['type']) => {
+    switch (type) {
+      case 'success':
+        return '✅'
+      case 'error':
+        return '❌'
+      case 'warning':
+        return '⚠️'
+      case 'info':
+        return 'ℹ️'
+      default:
+        return ''
+    }
+  }, [])
+
+  // Check if feedback is visible
+  const isFeedbackVisible = useCallback(() => {
+    return feedbackState.currentFeedback.isVisible
+  }, [feedbackState.currentFeedback.isVisible])
+
+  // Get current feedback type
+  const getCurrentFeedbackType = useCallback(() => {
+    return feedbackState.currentFeedback.type
+  }, [feedbackState.currentFeedback.type])
+
+  // Clean up timers on unmount
+  useEffect(() => {
+    return () => {
+      if (hideTimerRef.current) {
+        clearTimeout(hideTimerRef.current)
+      }
+      if (animationTimerRef.current) {
+        clearTimeout(animationTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    feedbackState,
+    showFeedback,
+    showSuccess,
+    showError,
+    showWarning,
+    showInfo,
+    hideFeedback,
+    clearFeedback,
+    getFeedbackClasses,
+    getFeedbackIcon,
+    isFeedbackVisible,
+    getCurrentFeedbackType,
+    triggerHapticFeedback,
+    triggerSoundFeedback
+  }
+}
+
+// Convenience hook for basic form feedback
+export const useBasicFormFeedback = () => {
+  return useFormFeedback({}, {
+    enableAnimations: true,
+    enableTouchFeedback: false,
+    enableHapticFeedback: false,
+    enableSoundFeedback: false,
+    enableAccessibility: true
+  })
+}
+
+// Convenience hook for enhanced form feedback
+export const useEnhancedFormFeedback = () => {
+  return useFormFeedback({}, {
+    enableAnimations: true,
+    enableTouchFeedback: true,
+    enableHapticFeedback: true,
+    enableSoundFeedback: true,
+    enableAccessibility: true
+  })
+}