@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2

package/src/components/CycleTimer/SmallVariant.tsx

@@ -1,229 +0,0 @@
-import { useTheme } from "@mui/material/styles"
-import Box from "@mui/material/Box"
-import Typography from "@mui/material/Typography"
-import { useTranslation } from "react-i18next"
-import type { AnimationState, TimerState } from "./types"
-import { formatTimeLocalized } from "./utils"
-
-interface SmallVariantProps {
-  timerState: TimerState
-  animationState: AnimationState
-  hasError: boolean
-  compact: boolean
-  className?: string
-}
-
-export const SmallVariant = ({
-  timerState,
-  animationState,
-  hasError,
-  compact,
-  className,
-}: SmallVariantProps) => {
-  const { t, i18n } = useTranslation()
-  const theme = useTheme()
-  const { currentState, remainingTime, maxTime } = timerState
-  const {
-    showErrorAnimation,
-    showPauseAnimation,
-    showPulsatingText,
-    pulsatingFinished,
-    showIdlePulsating,
-    idleDotsCount,
-  } = animationState
-
-  // Simple text-only mode for compact variant in certain states
-  if (compact && currentState === "idle") {
-    return (
-      <Box
-        className={className}
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          m: 0,
-        }}
-      >
-        <Typography
-          variant="body2"
-          sx={{
-            color: hasError
-              ? theme.palette.error.light
-              : theme.palette.text.primary,
-            fontSize: "14px",
-            transition: "color 0.5s ease-out",
-          }}
-        >
-          {hasError
-            ? t("CycleTimer.Error.lb", "Error")
-            : currentState === "idle"
-              ? "0s"
-              : formatTimeLocalized(remainingTime, i18n.language)}
-        </Typography>
-      </Box>
-    )
-  }
-
-  return (
-    <Box
-      className={className}
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        m: 0,
-        gap: 1,
-      }}
-    >
-      {/* Animated progress ring icon */}
-      {!(currentState === "idle" && compact) && (
-        <Box
-          sx={{
-            width: 20,
-            height: 20,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            opacity: showPauseAnimation || showErrorAnimation ? 0.6 : 1,
-            transition: "opacity 0.5s ease-out",
-          }}
-        >
-          <svg
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            style={{ transform: "rotate(-90deg)" }}
-            role="img"
-            aria-label="Timer progress"
-          >
-            {/* Background ring */}
-            <circle
-              cx="10"
-              cy="10"
-              r="8"
-              fill="none"
-              stroke={
-                hasError
-                  ? theme.palette.error.light
-                  : currentState === "measured"
-                    ? showPulsatingText || pulsatingFinished
-                      ? theme.palette.success.main
-                      : theme.palette.text.secondary
-                    : theme.palette.success.main
-              }
-              strokeWidth="2"
-              opacity={
-                currentState === "measured" && pulsatingFinished
-                  ? showPulsatingText
-                    ? 1
-                    : 0.6
-                  : 0.3
-              }
-              style={{
-                transition: "stroke 0.8s ease-in-out, opacity 2s ease-in-out",
-              }}
-            />
-            {/* Progress ring */}
-            <circle
-              cx="10"
-              cy="10"
-              r="8"
-              fill="none"
-              stroke={
-                hasError
-                  ? theme.palette.error.light
-                  : currentState === "measured"
-                    ? showPulsatingText || pulsatingFinished
-                      ? theme.palette.success.main
-                      : theme.palette.text.secondary
-                    : theme.palette.success.main
-              }
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeDasharray={`${2 * Math.PI * 8}`}
-              strokeDashoffset={`${2 * Math.PI * 8 * (1 - (currentState === "idle" ? 0 : timerState.currentProgress) / 100)}`}
-              style={{
-                opacity:
-                  currentState === "measured" && pulsatingFinished
-                    ? showPulsatingText
-                      ? 1
-                      : 0.6
-                    : 1,
-                transition:
-                  "stroke-dashoffset 0.1s ease-out, stroke 0.8s ease-in-out, opacity 2s ease-in-out",
-              }}
-            />
-          </svg>
-        </Box>
-      )}
-
-      {/* Timer text display */}
-      <Typography
-        variant="body2"
-        sx={{
-          color: hasError
-            ? theme.palette.error.light
-            : currentState === "idle"
-              ? "rgba(255, 255, 255, 0.7)"
-              : currentState === "measured"
-                ? showPulsatingText || pulsatingFinished
-                  ? theme.palette.success.main
-                  : theme.palette.text.secondary
-                : theme.palette.text.primary,
-          fontSize: "14px",
-          lineHeight: "normal",
-          letterSpacing: "normal",
-          opacity:
-            currentState === "idle"
-              ? showIdlePulsating
-                ? 1
-                : 0.6
-              : currentState === "measured" && pulsatingFinished
-                ? showPulsatingText
-                  ? 1
-                  : 0.6
-                : 1,
-          transition:
-            "color 0.8s ease-in-out, font-size 0.3s ease-out, opacity 2s ease-in-out",
-        }}
-      >
-        {hasError ? (
-          t("CycleTimer.Error.lb", "Error")
-        ) : currentState === "idle" ? (
-          <>
-            <span>
-              {t("CycleTimer.WaitingForCycle.lb", "Waiting for program cycle")}
-            </span>
-            <span
-              style={{
-                display: "inline-block",
-                width: "18px",
-                textAlign: "left",
-              }}
-            >
-              {".".repeat(idleDotsCount)}
-            </span>
-          </>
-        ) : currentState === "measuring" ? (
-          compact ? (
-            formatTimeLocalized(remainingTime, i18n.language)
-          ) : (
-            `${formatTimeLocalized(remainingTime, i18n.language)} / ${t("CycleTimer.Measuring.lb", "measuring...")}`
-          )
-        ) : currentState === "measured" ? (
-          compact ? (
-            formatTimeLocalized(remainingTime, i18n.language)
-          ) : (
-            `${formatTimeLocalized(remainingTime, i18n.language)} / ${t("CycleTimer.Determined.lb", "determined")}`
-          )
-        ) : currentState === "countdown" && maxTime !== null ? (
-          compact ? (
-            formatTimeLocalized(remainingTime, i18n.language)
-          ) : (
-            `${formatTimeLocalized(remainingTime, i18n.language)} / ${t("CycleTimer.Time.lb", { time: formatTimeLocalized(maxTime, i18n.language) })}`
-          )
-        ) : (
-          formatTimeLocalized(remainingTime, i18n.language)
-        )}
-      </Typography>
-    </Box>
-  )
-}

package/src/components/CycleTimer/index.tsx

@@ -1,158 +0,0 @@
-import { observer } from "mobx-react-lite"
-import { useEffect, useRef } from "react"
-import { externalizeComponent } from "../../externalizeComponent"
-import { DefaultVariant } from "./DefaultVariant"
-import { SmallVariant } from "./SmallVariant"
-import type { CycleTimerProps } from "./types"
-import { useAnimations } from "./useAnimations"
-import { useTimerLogic } from "./useTimerLogic"
-
-/**
- * A circular gauge timer component for cycle-specific timing operations
- *
- * Features:
- * - Custom SVG circular gauge with 264px diameter and 40px thickness
- * - Multiple states: idle, measuring, measured, countdown, success
- * - Idle state: shows "Waiting for program cycle" with transparent inner circle
- * - Measuring state: counts up with "Cycle Time" / "measuring..." labels
- * - Measured state: shows final time with "Cycle Time" / "determined" labels in pulsating green
- * - Countdown mode: shows remaining time prominently, counts down to zero
- * - Success state: brief green flash after cycle completion
- * - Displays appropriate labels based on state
- * - Automatically counts down and triggers callback when reaching zero
- * - Full timer control: start, pause, resume functionality
- * - Support for starting with elapsed time (resume mid-cycle)
- * - Error state support: pauses timer and shows error styling (red color)
- * - Smooth fade transitions between different text states
- * - Pulsating text animation for completed measuring state
- * - Fully localized with i18next
- * - Material-UI theming integration
- * - Small variant with animated progress icon (gauge border only) next to text
- */
-export const CycleTimer = externalizeComponent(
-  observer(
-    ({
-      onCycleComplete,
-      onCycleEnd,
-      onMeasuringComplete,
-      autoStart = true,
-      variant = "default",
-      compact = false,
-      className,
-      hasError = false,
-    }: CycleTimerProps) => {
-      const prevStateRef = useRef<string | undefined>(undefined)
-
-      // Initialize animation hooks
-      const {
-        animationState,
-        triggerPauseAnimation,
-        triggerErrorAnimation,
-        clearErrorAnimation,
-        startPulsatingAnimation,
-        stopPulsatingAnimation,
-        startIdleAnimations,
-        stopIdleAnimations,
-        triggerFadeTransition,
-        setInitialAnimationState,
-        cleanup,
-      } = useAnimations()
-
-      // Initialize timer logic
-      const { timerState, controls } = useTimerLogic({
-        autoStart,
-        onCycleEnd,
-        onMeasuringComplete,
-        hasError,
-        onPauseAnimation: triggerPauseAnimation,
-        onErrorAnimation: triggerErrorAnimation,
-        onClearErrorAnimation: clearErrorAnimation,
-        onStartPulsating: startPulsatingAnimation,
-      })
-
-      // Handle state changes with fade transitions
-      useEffect(() => {
-        const prevState = prevStateRef.current
-
-        if (
-          prevStateRef.current !== undefined &&
-          prevState !== timerState.currentState
-        ) {
-          // Stop pulsating animation if leaving measured state
-          if (prevState === "measured") {
-            stopPulsatingAnimation()
-          }
-
-          // Stop idle animations if leaving idle state
-          if (prevState === "idle") {
-            stopIdleAnimations()
-          }
-
-          // Trigger fade transition
-          triggerFadeTransition()
-        } else {
-          // No state change or first time - set initial state
-          setInitialAnimationState()
-        }
-
-        // Start idle animations if entering idle state
-        if (timerState.currentState === "idle") {
-          startIdleAnimations()
-        }
-
-        prevStateRef.current = timerState.currentState
-      }, [
-        timerState.currentState,
-        stopPulsatingAnimation,
-        stopIdleAnimations,
-        startIdleAnimations,
-        triggerFadeTransition,
-        setInitialAnimationState,
-      ])
-
-      // Provide controls to parent component
-      useEffect(() => {
-        let isMounted = true
-        const timeoutId = setTimeout(() => {
-          if (isMounted) {
-            onCycleComplete(controls)
-          }
-        }, 0)
-
-        return () => {
-          isMounted = false
-          clearTimeout(timeoutId)
-        }
-      }, [onCycleComplete, controls])
-
-      // Cleanup on unmount
-      useEffect(() => {
-        return cleanup
-      }, [cleanup])
-
-      // Render appropriate variant
-      if (variant === "small") {
-        return (
-          <SmallVariant
-            timerState={timerState}
-            animationState={animationState}
-            hasError={hasError}
-            compact={compact}
-            className={className}
-          />
-        )
-      }
-
-      return (
-        <DefaultVariant
-          timerState={timerState}
-          animationState={animationState}
-          hasError={hasError}
-          className={className}
-        />
-      )
-    },
-  ),
-)
-
-export default CycleTimer

package/src/components/CycleTimer/types.ts

@@ -1,58 +0,0 @@
-export type CycleTimerState =
-  | "idle" // Initial state showing "Waiting for program cycle"
-  | "measuring" // Counting up without max time, showing "Cycle Time" / "measuring..."
-  | "measured" // Completed measuring state showing "Cycle Time" / "determined" with pulsating green text
-  | "countdown" // Counting down with max time
-  | "success" // Brief success state after cycle completion
-
-export interface CycleTimerControls {
-  startNewCycle: (maxTimeSeconds: number, elapsedSeconds?: number) => void
-  startMeasuring: (elapsedSeconds?: number) => void
-  setIdle: () => void
-  completeMeasuring: () => void
-  pause: () => void
-  resume: () => void
-  isPaused: () => boolean
-}
-
-export interface CycleTimerProps {
-  /**
-   * Callback that receives the timer control functions
-   */
-  onCycleComplete: (controls: CycleTimerControls) => void
-  /** Callback fired when a cycle actually completes (reaches zero) */
-  onCycleEnd?: () => void
-  /** Callback fired when measuring cycle completes */
-  onMeasuringComplete?: () => void
-  /** Whether the timer should start automatically when maxTime is set */
-  autoStart?: boolean
-  /** Visual variant of the timer */
-  variant?: "default" | "small"
-  /** For small variant: whether to show remaining time details (compact hides them) */
-  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 {
-  currentState: CycleTimerState
-  remainingTime: number
-  maxTime: number | null
-  isRunning: boolean
-  isPausedState: boolean
-  currentProgress: number
-  wasRunningBeforeError: boolean
-}
-
-export interface AnimationState {
-  showPauseAnimation: boolean
-  showErrorAnimation: boolean
-  showPulsatingText: boolean
-  pulsatingFinished: boolean
-  showLabels: boolean
-  showMainText: boolean
-  showIdlePulsating: boolean
-  idleDotsCount: number
-}

package/src/components/CycleTimer/useAnimations.ts

@@ -1,202 +0,0 @@
-import { useCallback, useRef, useState } from "react"
-import type { AnimationState } from "./types"
-
-export const useAnimations = () => {
-  const [animationState, setAnimationState] = useState<AnimationState>({
-    showPauseAnimation: false,
-    showErrorAnimation: false,
-    showPulsatingText: false,
-    pulsatingFinished: false,
-    showLabels: true,
-    showMainText: true,
-    showIdlePulsating: false,
-    idleDotsCount: 0,
-  })
-
-  // Refs for managing timeouts and intervals
-  const pauseAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  const errorAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  const pulsatingIntervalRef = useRef<NodeJS.Timeout | null>(null)
-  const fadeTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  const pulseCountRef = useRef<number>(0)
-  const idlePulsatingIntervalRef = useRef<NodeJS.Timeout | null>(null)
-  const idleDotsIntervalRef = 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 startPulsatingAnimation = useCallback((onComplete?: () => void) => {
-    pulseCountRef.current = 0
-    // Start with fade to success color
-    setAnimationState((prev) => ({
-      ...prev,
-      showPulsatingText: true,
-      pulsatingFinished: false,
-    }))
-
-    // After initial success color fade, start slow pulsating like idle
-    setTimeout(() => {
-      setAnimationState((prev) => ({
-        ...prev,
-        pulsatingFinished: true, // This will keep the success color and start slow pulsating
-      }))
-
-      // Start slow pulsating animation similar to idle
-      pulsatingIntervalRef.current = setInterval(() => {
-        setAnimationState((prev) => ({
-          ...prev,
-          showPulsatingText: !prev.showPulsatingText,
-        }))
-      }, 2000) // Same slow timing as idle pulsating
-
-      if (onComplete) {
-        onComplete()
-      }
-    }, 800) // Initial success color display duration
-  }, [])
-
-  const stopPulsatingAnimation = useCallback(() => {
-    if (pulsatingIntervalRef.current) {
-      clearInterval(pulsatingIntervalRef.current)
-      pulsatingIntervalRef.current = null
-    }
-    // Reset all pulsating states to ensure colors are reset
-    setAnimationState((prev) => ({
-      ...prev,
-      showPulsatingText: false,
-      pulsatingFinished: false,
-    }))
-    pulseCountRef.current = 0
-  }, [])
-
-  const startIdleAnimations = useCallback(() => {
-    // Start pulsating animation for the text
-    setAnimationState((prev) => ({
-      ...prev,
-      showIdlePulsating: true,
-    }))
-
-    idlePulsatingIntervalRef.current = setInterval(() => {
-      setAnimationState((prev) => ({
-        ...prev,
-        showIdlePulsating: !prev.showIdlePulsating,
-      }))
-    }, 2000) // Slower pulsate every 2 seconds
-
-    // Start animated dots
-    idleDotsIntervalRef.current = setInterval(() => {
-      setAnimationState((prev) => ({
-        ...prev,
-        idleDotsCount: (prev.idleDotsCount + 1) % 4, // Cycle through 0, 1, 2, 3
-      }))
-    }, 800) // Change dots every 800ms
-  }, [])
-
-  const stopIdleAnimations = useCallback(() => {
-    if (idlePulsatingIntervalRef.current) {
-      clearInterval(idlePulsatingIntervalRef.current)
-      idlePulsatingIntervalRef.current = null
-    }
-    if (idleDotsIntervalRef.current) {
-      clearInterval(idleDotsIntervalRef.current)
-      idleDotsIntervalRef.current = null
-    }
-    setAnimationState((prev) => ({
-      ...prev,
-      showIdlePulsating: false,
-      idleDotsCount: 0,
-    }))
-  }, [])
-
-  const triggerFadeTransition = useCallback(() => {
-    setAnimationState((prev) => ({
-      ...prev,
-      showLabels: false,
-      showMainText: false,
-    }))
-
-    if (fadeTimeoutRef.current) {
-      clearTimeout(fadeTimeoutRef.current)
-    }
-
-    fadeTimeoutRef.current = setTimeout(() => {
-      setAnimationState((prev) => ({
-        ...prev,
-        showLabels: true,
-        showMainText: true,
-      }))
-    }, 200)
-  }, [])
-
-  const setInitialAnimationState = useCallback(() => {
-    setAnimationState((prev) => ({
-      ...prev,
-      showLabels: true,
-      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)
-    }
-    if (pulsatingIntervalRef.current) {
-      clearInterval(pulsatingIntervalRef.current)
-    }
-    if (idlePulsatingIntervalRef.current) {
-      clearInterval(idlePulsatingIntervalRef.current)
-    }
-    if (idleDotsIntervalRef.current) {
-      clearInterval(idleDotsIntervalRef.current)
-    }
-  }, [])
-
-  return {
-    animationState,
-    triggerPauseAnimation,
-    triggerErrorAnimation,
-    clearErrorAnimation,
-    startPulsatingAnimation,
-    stopPulsatingAnimation,
-    startIdleAnimations,
-    stopIdleAnimations,
-    triggerFadeTransition,
-    setInitialAnimationState,
-    cleanup,
-  }
-}