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

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

@@ -0,0 +1,360 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface FeedbackState {
+  type}
+
+export interface FeedbackConfig {
+  enableAnimations}
+
+export interface FeedbackCallbacks {
+  onFeedbackShow?) => void
+  onFeedbackHide?) => void
+  onFeedbackComplete?) => void
+  onAccessibilityAnnounce?) => void
+}
+
+export interface FormFeedbackState {
+  currentFeedback]
+  isAnimating}
+
+export const useFormFeedback = (
+  callbacks= {},
+  config= {}
+) => {
+  const defaultConfig= {
+    enableAnimations,
+    enableTouchFeedback,
+    enableHapticFeedback,
+    enableSoundFeedback,
+    defaultDuration,
+    animationDuration,
+    enableAutoHide,
+    enableAccessibility,
+    ...config
+  }
+
+  const [feedbackState, setFeedbackState] = useState<FormFeedbackState>({
+    currentFeedback,
+      message,
+      isVisible,
+      isAnimating,
+      duration,
+      timestamp},
+    feedbackHistory],
+    isAnimating,
+    accessibilityEnabled})
+
+  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= 'medium') => {
+    if (!defaultConfig.enableHapticFeedback || !('vibrate' in navigator)) return
+
+    const vibrationPattern = {
+      light,
+      medium,
+      strong}
+
+    try {
+      navigator.vibrate(vibrationPattern[intensity])
+    } catch (error) {
+      console.warn('Haptic feedback not supported, error)
+    }
+  }, [defaultConfig.enableHapticFeedback])
+
+  // Trigger sound feedback
+  const triggerSoundFeedback = useCallback((type= '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, duration, volume},
+        error, duration, volume},
+        warning, duration, volume},
+        info, duration, volume}
+      }
+
+      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) => {
+    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],
+    message,
+    duration?,
+    options?; skipSound?; skipHaptic?}
+  ) => {
+    // Clear existing timers
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current)
+      hideTimerRef.current = null
+    }
+
+    if (animationTimerRef.current) {
+      clearTimeout(animationTimerRef.current)
+      animationTimerRef.current = null
+    }
+
+    const feedback= {
+      type,
+      message,
+      isVisible,
+      isAnimating,
+      duration,
+      timestamp)
+    }
+
+    // Start animation
+    if (feedback.isAnimating) {
+      setFeedbackState(prev => ({
+        ...prev,
+        currentFeedback,
+        isAnimating}))
+
+      // End animation after animation duration
+      animationTimerRef.current = setTimeout(() => {
+        setFeedbackState(prev => ({
+          ...prev,
+          isAnimating}))
+      }, defaultConfig.animationDuration)
+    } else {
+      setFeedbackState(prev => ({
+        ...prev,
+        currentFeedback,
+        isAnimating}))
+    }
+
+    // Add to history
+    setFeedbackState(prev => ({
+      ...prev,
+      feedbackHistory, ...prev.feedbackHistory.slice(0, 9)] // Keep last 10
+    }))
+
+    // Trigger feedback based on type
+    if (!options?.skipHaptic) {
+      switch (type) {
+        case 'success')
+          break
+        case 'error')
+          break
+        case 'warning')
+          break
+        case 'info')
+          break
+      }
+    }
+
+    if (!options?.skipSound) {
+      triggerSoundFeedback(type === 'none' ? 'success' )
+    }
+
+    // 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,
+        isVisible,
+        isAnimating},
+      isAnimating}))
+
+    callbacks.onFeedbackHide?.(feedbackState.currentFeedback)
+  }, [feedbackState.currentFeedback, callbacks])
+
+  // Show success feedback
+  const showSuccess = useCallback((message, duration?, options?) => {
+    showFeedback('success', message, duration, options)
+  }, [showFeedback])
+
+  // Show error feedback
+  const showError = useCallback((message, duration?, options?) => {
+    showFeedback('error', message, duration, options)
+  }, [showFeedback])
+
+  // Show warning feedback
+  const showWarning = useCallback((message, duration?, options?) => {
+    showFeedback('warning', message, duration, options)
+  }, [showFeedback])
+
+  // Show info feedback
+  const showInfo = useCallback((message, duration?, options?) => {
+    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]) => {
+    switch (type) {
+      case 'success'}
+  }, [])
+
+  // 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,
+    enableTouchFeedback,
+    enableHapticFeedback,
+    enableSoundFeedback,
+    enableAccessibility})
+}
+
+// Convenience hook for enhanced form feedback
+export const useEnhancedFormFeedback = () => {
+  return useFormFeedback({}, {
+    enableAnimations,
+    enableTouchFeedback,
+    enableHapticFeedback,
+    enableSoundFeedback,
+    enableAccessibility})
+}

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

@@ -0,0 +1,360 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface FeedbackState {
+  type}
+
+export interface FeedbackConfig {
+  enableAnimations}
+
+export interface FeedbackCallbacks {
+  onFeedbackShow?) => void
+  onFeedbackHide?) => void
+  onFeedbackComplete?) => void
+  onAccessibilityAnnounce?) => void
+}
+
+export interface FormFeedbackState {
+  currentFeedback]
+  isAnimating}
+
+export const useFormFeedback = (
+  callbacks= {},
+  config= {}
+) => {
+  const defaultConfig= {
+    enableAnimations,
+    enableTouchFeedback,
+    enableHapticFeedback,
+    enableSoundFeedback,
+    defaultDuration,
+    animationDuration,
+    enableAutoHide,
+    enableAccessibility,
+    ...config
+  }
+
+  const [feedbackState, setFeedbackState] = useState<FormFeedbackState>({
+    currentFeedback,
+      message,
+      isVisible,
+      isAnimating,
+      duration,
+      timestamp},
+    feedbackHistory],
+    isAnimating,
+    accessibilityEnabled})
+
+  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= 'medium') => {
+    if (!defaultConfig.enableHapticFeedback || !('vibrate' in navigator)) return
+
+    const vibrationPattern = {
+      light,
+      medium,
+      strong}
+
+    try {
+      navigator.vibrate(vibrationPattern[intensity])
+    } catch (error) {
+      console.warn('Haptic feedback not supported, error)
+    }
+  }, [defaultConfig.enableHapticFeedback])
+
+  // Trigger sound feedback
+  const triggerSoundFeedback = useCallback((type= '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, duration, volume},
+        error, duration, volume},
+        warning, duration, volume},
+        info, duration, volume}
+      }
+
+      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) => {
+    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],
+    message,
+    duration?,
+    options?; skipSound?; skipHaptic?}
+  ) => {
+    // Clear existing timers
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current)
+      hideTimerRef.current = null
+    }
+
+    if (animationTimerRef.current) {
+      clearTimeout(animationTimerRef.current)
+      animationTimerRef.current = null
+    }
+
+    const feedback= {
+      type,
+      message,
+      isVisible,
+      isAnimating,
+      duration,
+      timestamp)
+    }
+
+    // Start animation
+    if (feedback.isAnimating) {
+      setFeedbackState(prev => ({
+        ...prev,
+        currentFeedback,
+        isAnimating}))
+
+      // End animation after animation duration
+      animationTimerRef.current = setTimeout(() => {
+        setFeedbackState(prev => ({
+          ...prev,
+          isAnimating}))
+      }, defaultConfig.animationDuration)
+    } else {
+      setFeedbackState(prev => ({
+        ...prev,
+        currentFeedback,
+        isAnimating}))
+    }
+
+    // Add to history
+    setFeedbackState(prev => ({
+      ...prev,
+      feedbackHistory, ...prev.feedbackHistory.slice(0, 9)] // Keep last 10
+    }))
+
+    // Trigger feedback based on type
+    if (!options?.skipHaptic) {
+      switch (type) {
+        case 'success')
+          break
+        case 'error')
+          break
+        case 'warning')
+          break
+        case 'info')
+          break
+      }
+    }
+
+    if (!options?.skipSound) {
+      triggerSoundFeedback(type === 'none' ? 'success' )
+    }
+
+    // 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,
+        isVisible,
+        isAnimating},
+      isAnimating}))
+
+    callbacks.onFeedbackHide?.(feedbackState.currentFeedback)
+  }, [feedbackState.currentFeedback, callbacks])
+
+  // Show success feedback
+  const showSuccess = useCallback((message, duration?, options?) => {
+    showFeedback('success', message, duration, options)
+  }, [showFeedback])
+
+  // Show error feedback
+  const showError = useCallback((message, duration?, options?) => {
+    showFeedback('error', message, duration, options)
+  }, [showFeedback])
+
+  // Show warning feedback
+  const showWarning = useCallback((message, duration?, options?) => {
+    showFeedback('warning', message, duration, options)
+  }, [showFeedback])
+
+  // Show info feedback
+  const showInfo = useCallback((message, duration?, options?) => {
+    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]) => {
+    switch (type) {
+      case 'success'}
+  }, [])
+
+  // 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,
+    enableTouchFeedback,
+    enableHapticFeedback,
+    enableSoundFeedback,
+    enableAccessibility})
+}
+
+// Convenience hook for enhanced form feedback
+export const useEnhancedFormFeedback = () => {
+  return useFormFeedback({}, {
+    enableAnimations,
+    enableTouchFeedback,
+    enableHapticFeedback,
+    enableSoundFeedback,
+    enableAccessibility})
+}