@wandelbots/wandelbots-js-react-components 5.5.1-pr.fix-standardize-output.591.60112ee → 5.5.1

package/src/components/CycleTimer/useTimerLogic.ts

@@ -0,0 +1,330 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import { useInterpolation } from "../utils/interpolation"
+import type { TimerState } from "./types"
+import { calculateExactProgress } from "./utils"
+
+interface UseTimerLogicProps {
+  autoStart: boolean
+  onCycleEnd?: () => void
+  onMeasuringComplete?: () => void
+  hasError: boolean
+  onPauseAnimation: () => void
+  onErrorAnimation: () => void
+  onClearErrorAnimation: () => void
+  onStartPulsating: (onComplete?: () => void) => void
+}
+
+export const useTimerLogic = ({
+  autoStart,
+  onCycleEnd,
+  onMeasuringComplete,
+  hasError,
+  onPauseAnimation,
+  onErrorAnimation,
+  onClearErrorAnimation,
+  onStartPulsating,
+}: UseTimerLogicProps) => {
+  const [timerState, setTimerState] = useState<TimerState>({
+    currentState: "idle",
+    remainingTime: 0,
+    maxTime: null,
+    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)
+
+  // Spring-based interpolator for smooth gauge progress animations
+  const [progressInterpolator] = useInterpolation([0], {
+    tension: 80,
+    friction: 18,
+    onChange: ([progress]) => {
+      setTimerState((prev) => ({ ...prev, currentProgress: progress }))
+    },
+  })
+
+  const setIdle = useCallback(() => {
+    setTimerState((prev) => ({
+      ...prev,
+      currentState: "idle",
+      maxTime: null,
+      // Don't reset remainingTime - keep the last value
+      isRunning: false,
+      isPausedState: false,
+      currentProgress: 0, // Reset progress to 0 for gauge
+    }))
+    pausedTimeRef.current = 0
+    startTimeRef.current = null
+    progressInterpolator.setImmediate([0]) // Use setImmediate for instant reset
+  }, [progressInterpolator])
+
+  const startMeasuring = useCallback(
+    (elapsedSeconds: number = 0) => {
+      const initialProgress = ((elapsedSeconds / 60) % 1) * 100
+      setTimerState((prev) => ({
+        ...prev,
+        currentState: "measuring",
+        maxTime: null,
+        remainingTime: elapsedSeconds,
+        isPausedState: false,
+        currentProgress: initialProgress, // Immediately set progress
+      }))
+      pausedTimeRef.current = 0
+
+      progressInterpolator.setImmediate([initialProgress]) // Use setImmediate for instant reset
+
+      if (autoStart) {
+        startTimeRef.current = Date.now() - elapsedSeconds * 1000
+        setTimerState((prev) => ({ ...prev, isRunning: true }))
+      } else {
+        startTimeRef.current = null
+      }
+    },
+    [autoStart, progressInterpolator],
+  )
+
+  const startNewCycle = useCallback(
+    (maxTimeSeconds: number, elapsedSeconds: number = 0) => {
+      // Stop any running timer first to prevent conflicts
+      setTimerState((prev) => ({ ...prev, isRunning: false }))
+      startTimeRef.current = null
+
+      setTimerState((prev) => ({
+        ...prev,
+        currentState: "countdown",
+        maxTime: maxTimeSeconds,
+        isPausedState: false,
+      }))
+      pausedTimeRef.current = 0
+
+      // Count-down mode
+      const remainingSeconds = Math.max(0, maxTimeSeconds - elapsedSeconds)
+      const initialProgress =
+        elapsedSeconds > 0 ? (elapsedSeconds / maxTimeSeconds) * 100 : 0
+
+      setTimerState((prev) => ({
+        ...prev,
+        remainingTime: remainingSeconds,
+        currentProgress: initialProgress, // Immediately set progress
+      }))
+
+      progressInterpolator.setImmediate([initialProgress]) // Use setImmediate for instant reset
+
+      if (remainingSeconds === 0) {
+        setTimerState((prev) => ({ ...prev, isRunning: false }))
+        startTimeRef.current = null
+        if (onCycleEnd) {
+          queueMicrotask(() => onCycleEnd())
+        }
+      } else if (autoStart) {
+        setTimeout(() => {
+          startTimeRef.current = Date.now() - elapsedSeconds * 1000
+          setTimerState((prev) => ({ ...prev, isRunning: true }))
+        }, 0)
+      } else {
+        startTimeRef.current = null
+      }
+    },
+    [autoStart, onCycleEnd, progressInterpolator],
+  )
+
+  const completeMeasuring = useCallback(() => {
+    // Always trigger completion regardless of current state
+    setTimerState((prev) => ({
+      ...prev,
+      isRunning: false,
+      currentState: "measured",
+    }))
+    startTimeRef.current = null
+
+    onStartPulsating(() => {
+      if (onMeasuringComplete) {
+        onMeasuringComplete()
+      }
+    })
+  }, [onStartPulsating, onMeasuringComplete])
+
+  const pause = useCallback(() => {
+    if (startTimeRef.current && timerState.isRunning) {
+      const now = Date.now()
+      const additionalElapsed = now - startTimeRef.current
+      pausedTimeRef.current += additionalElapsed
+
+      const totalElapsed = pausedTimeRef.current / 1000
+      const exactProgress = calculateExactProgress(
+        timerState.currentState,
+        totalElapsed,
+        timerState.maxTime,
+      )
+      progressInterpolator.setTarget([exactProgress])
+    }
+
+    setTimerState((prev) => ({
+      ...prev,
+      isRunning: false,
+      isPausedState: true,
+    }))
+    onPauseAnimation()
+  }, [
+    timerState.isRunning,
+    timerState.currentState,
+    timerState.maxTime,
+    progressInterpolator,
+    onPauseAnimation,
+  ])
+
+  const resume = useCallback(() => {
+    if (
+      timerState.isPausedState &&
+      (timerState.remainingTime > 0 || timerState.currentState !== "countdown")
+    ) {
+      startTimeRef.current = Date.now()
+      setTimerState((prev) => ({
+        ...prev,
+        isRunning: true,
+        isPausedState: false,
+      }))
+    }
+  }, [
+    timerState.isPausedState,
+    timerState.remainingTime,
+    timerState.currentState,
+  ])
+
+  const isPaused = useCallback(() => {
+    return timerState.isPausedState
+  }, [timerState.isPausedState])
+
+  // Handle error state changes
+  useEffect(() => {
+    if (hasError) {
+      if (timerState.isRunning && !timerState.isPausedState) {
+        setTimerState((prev) => ({ ...prev, wasRunningBeforeError: true }))
+        pause()
+      }
+      onErrorAnimation()
+    } else {
+      if (timerState.wasRunningBeforeError && timerState.isPausedState) {
+        setTimerState((prev) => ({ ...prev, wasRunningBeforeError: false }))
+        resume()
+      }
+      onClearErrorAnimation()
+    }
+  }, [
+    hasError,
+    timerState.isRunning,
+    timerState.isPausedState,
+    timerState.wasRunningBeforeError,
+    pause,
+    resume,
+    onErrorAnimation,
+    onClearErrorAnimation,
+  ])
+
+  // Main timer loop
+  useEffect(() => {
+    if (timerState.isRunning) {
+      const updateTimer = () => {
+        if (startTimeRef.current) {
+          const now = Date.now()
+          const elapsed =
+            (now - startTimeRef.current + pausedTimeRef.current) / 1000
+
+          if (
+            timerState.currentState === "countdown" &&
+            timerState.maxTime !== null
+          ) {
+            const remaining = Math.max(0, timerState.maxTime - elapsed)
+            setTimerState((prev) => ({
+              ...prev,
+              remainingTime: Math.ceil(remaining),
+            }))
+
+            const progress = Math.min(100, (elapsed / timerState.maxTime) * 100)
+            progressInterpolator.setTarget([progress])
+
+            if (remaining <= 0) {
+              setTimerState((prev) => ({
+                ...prev,
+                isRunning: false,
+                remainingTime: 0,
+              }))
+              startTimeRef.current = null
+              progressInterpolator.setTarget([100])
+              if (onCycleEnd) {
+                queueMicrotask(() => onCycleEnd())
+              }
+              return
+            }
+          } else if (timerState.currentState === "measuring") {
+            setTimerState((prev) => ({
+              ...prev,
+              remainingTime: Math.floor(elapsed),
+            }))
+            const progress = ((elapsed / 60) % 1) * 100
+            progressInterpolator.setTarget([progress])
+          }
+
+          if (timerState.isRunning) {
+            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)
+      }
+    }
+  }, [
+    timerState.isRunning,
+    onCycleEnd,
+    timerState.currentState,
+    timerState.maxTime,
+    progressInterpolator,
+  ])
+
+  // Interpolation animation loop
+  useEffect(() => {
+    let interpolationAnimationId: number | null = null
+
+    const animateInterpolation = () => {
+      progressInterpolator.update(1 / 60)
+      interpolationAnimationId = requestAnimationFrame(animateInterpolation)
+    }
+
+    interpolationAnimationId = requestAnimationFrame(animateInterpolation)
+
+    return () => {
+      if (interpolationAnimationId) {
+        cancelAnimationFrame(interpolationAnimationId)
+      }
+    }
+  }, [progressInterpolator])
+
+  return {
+    timerState,
+    controls: {
+      startNewCycle,
+      startMeasuring,
+      setIdle,
+      completeMeasuring,
+      pause,
+      resume,
+      isPaused,
+    },
+  }
+}

package/src/components/CycleTimer/utils.ts

@@ -0,0 +1,122 @@
+/**
+ * Formats time in seconds to D:HH:MM:SS, H:MM:SS or MM:SS format
+ * Used for the default (large) timer variant
+ * Automatically includes days and hours as needed for clarity
+ */
+export const formatTime = (seconds: number): string => {
+  const days = Math.floor(seconds / 86400)
+  const hours = Math.floor((seconds % 86400) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const remainingSeconds = seconds % 60
+
+  // Build time parts array
+  const parts: string[] = []
+
+  if (days > 0) {
+    parts.push(days.toString())
+    parts.push(hours.toString().padStart(2, "0"))
+    parts.push(minutes.toString().padStart(2, "0"))
+    parts.push(remainingSeconds.toString().padStart(2, "0"))
+  } else if (hours > 0) {
+    parts.push(hours.toString())
+    parts.push(minutes.toString().padStart(2, "0"))
+    parts.push(remainingSeconds.toString().padStart(2, "0"))
+  } else {
+    parts.push(minutes.toString())
+    parts.push(remainingSeconds.toString().padStart(2, "0"))
+  }
+
+  return parts.join(":")
+}
+
+/**
+ * Formats time in seconds to a localized human-readable format
+ * Used for the small timer variant
+ * Examples: "2h 30m 15s", "45m 30s", "30s"
+ * Falls back to English units if Intl.DurationFormat is not available
+ */
+export const formatTimeLocalized = (
+  seconds: number,
+  locale?: string,
+): string => {
+  const days = Math.floor(seconds / 86400)
+  const hours = Math.floor((seconds % 86400) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const remainingSeconds = seconds % 60
+
+  // Try using Intl.DurationFormat if available (newer browsers)
+  if (typeof Intl !== "undefined" && "DurationFormat" in Intl) {
+    try {
+      const duration: Record<string, number> = {}
+      if (days > 0) duration.days = days
+      if (hours > 0) duration.hours = hours
+      if (minutes > 0) duration.minutes = minutes
+      if (remainingSeconds > 0 || Object.keys(duration).length === 0) {
+        duration.seconds = remainingSeconds
+      }
+
+      // @ts-expect-error - DurationFormat is not yet in TypeScript types
+      const formatter = new Intl.DurationFormat(locale, { style: "narrow" })
+      return formatter.format(duration)
+    } catch {
+      // Fall through to manual formatting
+    }
+  }
+
+  // Manual formatting with compact units
+  const parts: string[] = []
+
+  if (days > 0) parts.push(`${days}d`)
+  if (hours > 0) parts.push(`${hours}h`)
+  if (minutes > 0) parts.push(`${minutes}m`)
+  if (remainingSeconds > 0 || parts.length === 0) {
+    parts.push(`${remainingSeconds}s`)
+  }
+
+  return parts.join(" ")
+}
+
+/**
+ * Calculates progress percentage for different timer states
+ */
+export const calculateProgress = (
+  currentState: string,
+  remainingTime: number,
+  maxTime: number | null,
+): number => {
+  if (currentState === "idle") {
+    return 0
+  }
+
+  if (currentState === "countdown" && maxTime !== null) {
+    // Count-down mode: progress based on elapsed time
+    const elapsed = maxTime - remainingTime
+    return Math.min(100, (elapsed / maxTime) * 100)
+  }
+
+  if (currentState === "measuring") {
+    // Measuring mode: progress based on minute steps (0-100% per minute)
+    return ((remainingTime / 60) % 1) * 100
+  }
+
+  return 0
+}
+
+/**
+ * Calculates exact progress position based on elapsed time
+ */
+export const calculateExactProgress = (
+  currentState: string,
+  totalElapsed: number,
+  maxTime: number | null,
+): number => {
+  if (currentState === "countdown" && maxTime !== null) {
+    return Math.min(100, (totalElapsed / maxTime) * 100)
+  }
+
+  if (currentState === "measuring") {
+    return ((totalElapsed / 60) % 1) * 100
+  }
+
+  return 0
+}

package/src/components/CycleTimer.tsx

@@ -0,0 +1,8 @@
+export { CycleTimer } from "./CycleTimer/index"
+export type {
+  CycleTimerControls,
+  CycleTimerProps,
+  CycleTimerState,
+} from "./CycleTimer/types"
+
+export { CycleTimer as default } from "./CycleTimer/index"