@wandelbots/wandelbots-js-react-components 2.44.0-pr.feature-seperate-timer.383.59e079b → 2.44.0

package/src/components/Timer/index.tsx

@@ -1,101 +0,0 @@
-import { observer } from "mobx-react-lite"
-import { useEffect } from "react"
-import { externalizeComponent } from "../../externalizeComponent"
-import { TimerDefaultVariant } from "./TimerDefaultVariant"
-import { TimerSmallVariant } from "./TimerSmallVariant"
-import type { TimerProps } from "./types"
-import { useTimerAnimations } from "./useTimerAnimations"
-import { useTimerLogic } from "./useTimerLogic"
-
-/**
- * A simple count-up timer component with visual progress indication
- *
- * Features:
- * - Count-up timer that tracks elapsed time
- * - Visual progress gauge that cycles every minute
- * - Two display variants: large circular gauge (default) or small icon with text
- * - Full timer control: start, pause, resume, reset functionality
- * - Support for starting with elapsed time (resume mid-session)
- * - Error state support: pauses timer and shows error styling
- * - Smooth progress animations with spring physics
- * - Fully localized with i18next
- * - Material-UI theming integration
- */
-export const Timer = externalizeComponent(
-  observer(
-    ({
-      onTimerReady,
-      autoStart = true,
-      variant = "default",
-      compact = false,
-      className,
-      hasError = false,
-    }: TimerProps) => {
-      // Initialize animation hooks
-      const {
-        animationState,
-        triggerPauseAnimation,
-        triggerErrorAnimation,
-        clearErrorAnimation,
-        setInitialAnimationState,
-        cleanup,
-      } = useTimerAnimations()
-
-      // Initialize timer logic
-      const { timerState, controls } = useTimerLogic({
-        autoStart,
-        hasError,
-        onPauseAnimation: triggerPauseAnimation,
-        onErrorAnimation: triggerErrorAnimation,
-        onClearErrorAnimation: clearErrorAnimation,
-      })
-
-      // Set initial animation state
-      useEffect(() => {
-        setInitialAnimationState()
-      }, [setInitialAnimationState])
-
-      // Provide controls to parent component
-      useEffect(() => {
-        let isMounted = true
-        const timeoutId = setTimeout(() => {
-          if (isMounted) {
-            onTimerReady(controls)
-          }
-        }, 0)
-
-        return () => {
-          isMounted = false
-          clearTimeout(timeoutId)
-        }
-      }, [onTimerReady, controls])
-
-      // Cleanup on unmount
-      useEffect(() => {
-        return cleanup
-      }, [cleanup])
-
-      // Render appropriate variant
-      if (variant === "small") {
-        return (
-          <TimerSmallVariant
-            timerState={timerState}
-            animationState={animationState}
-            hasError={hasError}
-            compact={compact}
-            className={className}
-          />
-        )
-      }
-
-      return (
-        <TimerDefaultVariant
-          timerState={timerState}
-          animationState={animationState}
-          hasError={hasError}
-          className={className}
-        />
-      )
-    },
-  ),
-)

package/src/components/Timer/types.ts

@@ -1,38 +0,0 @@
-export interface TimerControls {
-  start: (elapsedSeconds?: number) => void
-  pause: () => void
-  resume: () => void
-  reset: () => void
-  isPaused: () => boolean
-}
-
-export interface TimerProps {
-  /**
-   * Callback that receives the timer control functions
-   */
-  onTimerReady: (controls: TimerControls) => void
-  /** Whether the timer should start automatically when initialized */
-  autoStart?: boolean
-  /** Visual variant of the timer */
-  variant?: "default" | "small"
-  /** For small variant: whether to show compact display */
-  compact?: boolean
-  /** Additional CSS classes */
-  className?: string
-  /** Whether the timer is in an error state (pauses timer and shows error styling) */
-  hasError?: boolean
-}
-
-export interface TimerState {
-  elapsedTime: number
-  isRunning: boolean
-  isPausedState: boolean
-  currentProgress: number
-  wasRunningBeforeError: boolean
-}
-
-export interface TimerAnimationState {
-  showPauseAnimation: boolean
-  showErrorAnimation: boolean
-  showMainText: boolean
-}

package/src/components/Timer/useTimerAnimations.ts

@@ -1,94 +0,0 @@
-import { useCallback, useRef, useState } from "react"
-import type { TimerAnimationState } from "./types"
-
-export const useTimerAnimations = () => {
-  const [animationState, setAnimationState] = useState<TimerAnimationState>({
-    showPauseAnimation: false,
-    showErrorAnimation: false,
-    showMainText: true,
-  })
-
-  // Refs for managing timeouts
-  const pauseAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  const errorAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  const fadeTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-  const triggerPauseAnimation = useCallback(() => {
-    setAnimationState((prev) => ({ ...prev, showPauseAnimation: true }))
-
-    if (pauseAnimationTimeoutRef.current) {
-      clearTimeout(pauseAnimationTimeoutRef.current)
-    }
-
-    pauseAnimationTimeoutRef.current = setTimeout(() => {
-      setAnimationState((prev) => ({ ...prev, showPauseAnimation: false }))
-    }, 800)
-  }, [])
-
-  const triggerErrorAnimation = useCallback(() => {
-    setAnimationState((prev) => ({ ...prev, showErrorAnimation: true }))
-
-    if (errorAnimationTimeoutRef.current) {
-      clearTimeout(errorAnimationTimeoutRef.current)
-    }
-
-    errorAnimationTimeoutRef.current = setTimeout(() => {
-      setAnimationState((prev) => ({ ...prev, showErrorAnimation: false }))
-    }, 600)
-  }, [])
-
-  const clearErrorAnimation = useCallback(() => {
-    setAnimationState((prev) => ({ ...prev, showErrorAnimation: false }))
-    if (errorAnimationTimeoutRef.current) {
-      clearTimeout(errorAnimationTimeoutRef.current)
-    }
-  }, [])
-
-  const triggerFadeTransition = useCallback(() => {
-    setAnimationState((prev) => ({
-      ...prev,
-      showMainText: false,
-    }))
-
-    if (fadeTimeoutRef.current) {
-      clearTimeout(fadeTimeoutRef.current)
-    }
-
-    fadeTimeoutRef.current = setTimeout(() => {
-      setAnimationState((prev) => ({
-        ...prev,
-        showMainText: true,
-      }))
-    }, 200)
-  }, [])
-
-  const setInitialAnimationState = useCallback(() => {
-    setAnimationState((prev) => ({
-      ...prev,
-      showMainText: true,
-    }))
-  }, [])
-
-  // Cleanup function
-  const cleanup = useCallback(() => {
-    if (pauseAnimationTimeoutRef.current) {
-      clearTimeout(pauseAnimationTimeoutRef.current)
-    }
-    if (errorAnimationTimeoutRef.current) {
-      clearTimeout(errorAnimationTimeoutRef.current)
-    }
-    if (fadeTimeoutRef.current) {
-      clearTimeout(fadeTimeoutRef.current)
-    }
-  }, [])
-
-  return {
-    animationState,
-    triggerPauseAnimation,
-    triggerErrorAnimation,
-    clearErrorAnimation,
-    triggerFadeTransition,
-    setInitialAnimationState,
-    cleanup,
-  }
-}

package/src/components/Timer/useTimerLogic.ts

@@ -1,214 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react"
-import { useInterpolation } from "../utils/interpolation"
-import type { TimerState } from "./types"
-
-interface UseTimerLogicProps {
-  autoStart: boolean
-  hasError: boolean
-  onPauseAnimation: () => void
-  onErrorAnimation: () => void
-  onClearErrorAnimation: () => void
-}
-
-export const useTimerLogic = ({
-  autoStart,
-  hasError,
-  onPauseAnimation,
-  onErrorAnimation,
-  onClearErrorAnimation,
-}: UseTimerLogicProps) => {
-  const [timerState, setTimerState] = useState<TimerState>({
-    elapsedTime: 0,
-    isRunning: false,
-    isPausedState: false,
-    currentProgress: 0,
-    wasRunningBeforeError: false,
-  })
-
-  // Timer-related refs
-  const animationRef = useRef<number | null>(null)
-  const startTimeRef = useRef<number | null>(null)
-  const pausedTimeRef = useRef<number>(0)
-  const lastProgressRef = useRef<number>(0)
-
-  // Spring-based interpolator for smooth gauge progress animations
-  const [progressInterpolator] = useInterpolation([0], {
-    tension: 80,
-    friction: 18,
-    onChange: ([progress]) => {
-      setTimerState((prev) => ({ ...prev, currentProgress: progress }))
-    },
-  })
-
-  const start = useCallback(
-    (elapsedSeconds: number = 0) => {
-      const initialProgress = ((elapsedSeconds / 60) % 1) * 100
-      setTimerState((prev) => ({
-        ...prev,
-        elapsedTime: elapsedSeconds,
-        isPausedState: false,
-        currentProgress: initialProgress,
-      }))
-      pausedTimeRef.current = 0
-      lastProgressRef.current = initialProgress
-
-      progressInterpolator.setImmediate([initialProgress])
-
-      if (autoStart) {
-        startTimeRef.current = Date.now() - elapsedSeconds * 1000
-        setTimerState((prev) => ({ ...prev, isRunning: true }))
-      } else {
-        startTimeRef.current = null
-      }
-    },
-    [autoStart, progressInterpolator],
-  )
-
-  const pause = useCallback(() => {
-    if (startTimeRef.current && timerState.isRunning) {
-      const now = Date.now()
-      const totalElapsed = (now - startTimeRef.current) / 1000 + pausedTimeRef.current
-      const currentProgress = ((totalElapsed / 60) % 1) * 100
-      progressInterpolator.setTarget([currentProgress])
-      
-      setTimerState((prev) => ({
-        ...prev,
-        elapsedTime: Math.floor(totalElapsed),
-      }))
-    }
-
-    setTimerState((prev) => ({
-      ...prev,
-      isRunning: false,
-      isPausedState: true,
-    }))
-    onPauseAnimation()
-  }, [
-    timerState.isRunning,
-    progressInterpolator,
-    onPauseAnimation,
-  ])
-
-  const resume = useCallback(() => {
-    if (timerState.isPausedState) {
-      pausedTimeRef.current = timerState.elapsedTime
-      startTimeRef.current = Date.now()
-      setTimerState((prev) => ({
-        ...prev,
-        isRunning: true,
-        isPausedState: false,
-      }))
-    }
-  }, [timerState.isPausedState, timerState.elapsedTime])
-
-  const reset = useCallback(() => {
-    setTimerState((prev) => ({
-      ...prev,
-      elapsedTime: 0,
-      isRunning: false,
-      isPausedState: false,
-      currentProgress: 0,
-    }))
-    pausedTimeRef.current = 0
-    startTimeRef.current = null
-    lastProgressRef.current = 0
-    progressInterpolator.setImmediate([0])
-  }, [progressInterpolator])
-
-  const isPaused = useCallback(() => {
-    return timerState.isPausedState
-  }, [timerState.isPausedState])
-
-  // Handle error state changes
-  useEffect(() => {
-    if (hasError) {
-      if (timerState.isRunning) {
-        setTimerState((prev) => ({ ...prev, wasRunningBeforeError: true }))
-        pause()
-      }
-      onErrorAnimation()
-    } else {
-      if (timerState.wasRunningBeforeError && !timerState.isRunning) {
-        setTimerState((prev) => ({ ...prev, wasRunningBeforeError: false }))
-        resume()
-      }
-      onClearErrorAnimation()
-    }
-  }, [
-    hasError,
-    timerState.isRunning,
-    timerState.wasRunningBeforeError,
-    pause,
-    resume,
-    onErrorAnimation,
-    onClearErrorAnimation,
-  ])
-
-  // Main timer loop
-  useEffect(() => {
-    if (timerState.isRunning) {
-      const updateTimer = () => {
-        if (startTimeRef.current) {
-          const now = Date.now()
-          const totalElapsed = (now - startTimeRef.current) / 1000 + pausedTimeRef.current
-          const currentProgress = ((totalElapsed / 60) % 1) * 100
-
-          setTimerState((prev) => ({
-            ...prev,
-            elapsedTime: Math.floor(totalElapsed),
-          }))
-
-          // Only update progress interpolator if progress changed significantly
-          const progressDiff = Math.abs(currentProgress - lastProgressRef.current)
-          if (progressDiff > 0.1) {
-            progressInterpolator.setTarget([currentProgress])
-            lastProgressRef.current = currentProgress
-          }
-        }
-        animationRef.current = requestAnimationFrame(updateTimer)
-      }
-      animationRef.current = requestAnimationFrame(updateTimer)
-    } else {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current)
-        animationRef.current = null
-      }
-    }
-
-    return () => {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current)
-        animationRef.current = null
-      }
-    }
-  }, [timerState.isRunning, progressInterpolator])
-
-  // Interpolation animation loop
-  useEffect(() => {
-    let interpolationAnimationId: number | null = null
-
-    const animateInterpolation = () => {
-      progressInterpolator.update()
-      interpolationAnimationId = requestAnimationFrame(animateInterpolation)
-    }
-
-    interpolationAnimationId = requestAnimationFrame(animateInterpolation)
-
-    return () => {
-      if (interpolationAnimationId) {
-        cancelAnimationFrame(interpolationAnimationId)
-      }
-    }
-  }, [progressInterpolator])
-
-  return {
-    timerState,
-    controls: {
-      start,
-      pause,
-      resume,
-      reset,
-      isPaused,
-    },
-  }
-}

package/src/components/Timer/utils.ts

@@ -1,15 +0,0 @@
-/**
- * Formats time in seconds to MM:SS format
- */
-export const formatTime = (seconds: number): string => {
-  const minutes = Math.floor(seconds / 60)
-  const remainingSeconds = seconds % 60
-  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
-}
-
-/**
- * Calculates progress percentage for timer (minute-based cycles)
- */
-export const calculateTimerProgress = (elapsedTime: number): number => {
-  return ((elapsedTime / 60) % 1) * 100
-}