@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2-pr.fix-performance-issues.594.d053ea2

package/src/components/CycleTimer/useTimerLogic.ts

@@ -1,330 +0,0 @@
-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

@@ -1,122 +0,0 @@
-/**
- * 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

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