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

package/src/components/Timer/TimerDefaultVariant.tsx

@@ -0,0 +1,143 @@
+import Box from "@mui/material/Box"
+import Fade from "@mui/material/Fade"
+import Typography from "@mui/material/Typography"
+import { Gauge } from "@mui/x-charts"
+import { useTheme } from "@mui/material/styles"
+import { useTranslation } from "react-i18next"
+import type { TimerState, TimerAnimationState } from "./types"
+import { formatTime } from "./utils"
+
+interface TimerDefaultVariantProps {
+  timerState: TimerState
+  animationState: TimerAnimationState
+  hasError: boolean
+  className?: string
+}
+
+export const TimerDefaultVariant = ({
+  timerState,
+  animationState,
+  hasError,
+  className,
+}: TimerDefaultVariantProps) => {
+  const { t } = useTranslation()
+  const theme = useTheme()
+  const { elapsedTime, currentProgress } = timerState
+  const { showErrorAnimation, showPauseAnimation, showMainText } =
+    animationState
+
+  return (
+    <Box
+      className={className}
+      sx={{
+        position: "relative",
+        width: 264,
+        height: 264,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Gauge
+        width={264}
+        height={264}
+        value={currentProgress}
+        valueMin={0}
+        valueMax={100}
+        innerRadius="85%"
+        outerRadius="100%"
+        margin={0}
+        skipAnimation={true}
+        text={() => ""}
+        sx={{
+          opacity: showPauseAnimation || showErrorAnimation ? 0.6 : 1,
+          transition: "opacity 0.5s ease-out",
+          "& .MuiGauge-valueArc": {
+            fill: hasError
+              ? theme.palette.error.light
+              : theme.palette.success.main,
+            transition: "fill 0.5s ease-out",
+          },
+          "& .MuiGauge-referenceArc": {
+            fill: "#171927",
+            stroke: "transparent",
+            strokeWidth: 0,
+            transition:
+              "fill 0.5s ease-out, stroke 0.5s ease-out, stroke-width 0.5s ease-out",
+          },
+          "& .MuiGauge-valueText": {
+            display: "none",
+          },
+          "& .MuiGauge-text": {
+            display: "none",
+          },
+        }}
+      />
+
+      {/* Center content overlay */}
+      <Box
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          width: 225,
+          height: 225,
+          borderRadius: "50%",
+          backgroundColor: "#292B3F",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          gap: 1,
+          transition: "background-color 0.5s ease-out",
+        }}
+      >
+        {/* Main display */}
+        <Box
+          sx={{
+            position: "relative",
+            height: "48px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginBottom: 0.5,
+          }}
+        >
+          {/* Error text */}
+          <Fade in={showMainText && hasError} timeout={200}>
+            <Typography
+              variant="h6"
+              sx={{
+                position: "absolute",
+                fontSize: "16px",
+                fontWeight: 500,
+                color: theme.palette.error.light,
+              }}
+            >
+              {t("timer.error")}
+            </Typography>
+          </Fade>
+
+          {/* Timer display */}
+          <Fade in={showMainText && !hasError} timeout={300}>
+            <Typography
+              variant="h1"
+              sx={{
+                position: "absolute",
+                fontSize: "48px",
+                fontWeight: 500,
+                color: theme.palette.text.primary,
+                lineHeight: 1,
+                letterSpacing: "-0.5px",
+              }}
+            >
+              {formatTime(elapsedTime)}
+            </Typography>
+          </Fade>
+        </Box>
+      </Box>
+    </Box>
+  )
+}

package/src/components/Timer/TimerSmallVariant.tsx

@@ -0,0 +1,141 @@
+import Box from "@mui/material/Box"
+import Typography from "@mui/material/Typography"
+import { useTheme } from "@mui/material/styles"
+import { useTranslation } from "react-i18next"
+import type { TimerAnimationState, TimerState } from "./types"
+import { formatTimeLocalized } from "./utils"
+
+interface TimerSmallVariantProps {
+  timerState: TimerState
+  animationState: TimerAnimationState
+  hasError: boolean
+  compact: boolean
+  className?: string
+}
+
+export const TimerSmallVariant = ({
+  timerState,
+  animationState,
+  hasError,
+  compact,
+  className,
+}: TimerSmallVariantProps) => {
+  const { t, i18n } = useTranslation()
+  const theme = useTheme()
+  const { elapsedTime, currentProgress } = timerState
+  const { showErrorAnimation, showPauseAnimation } = animationState
+
+  // Simple text-only mode for compact variant
+  if (compact) {
+    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("timer.error")
+            : formatTimeLocalized(elapsedTime, i18n.language)}
+        </Typography>
+      </Box>
+    )
+  }
+
+  return (
+    <Box
+      className={className}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        m: 0,
+        gap: 1,
+      }}
+    >
+      {/* Animated progress ring icon */}
+      <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"
+        >
+          <circle
+            cx="10"
+            cy="10"
+            r="8"
+            fill="none"
+            stroke={
+              hasError ? theme.palette.error.light : theme.palette.success.main
+            }
+            strokeWidth="2"
+            opacity={0.3}
+            style={{
+              transition: "stroke 0.8s ease-in-out, opacity 2s ease-in-out",
+            }}
+          />
+          <circle
+            cx="10"
+            cy="10"
+            r="8"
+            fill="none"
+            stroke={
+              hasError ? theme.palette.error.light : theme.palette.success.main
+            }
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeDasharray={`${2 * Math.PI * 8}`}
+            strokeDashoffset={`${2 * Math.PI * 8 * (1 - currentProgress / 100)}`}
+            style={{
+              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
+            : theme.palette.text.primary,
+          fontSize: "14px",
+          lineHeight: "normal",
+          letterSpacing: "normal",
+          transition:
+            "color 0.8s ease-in-out, font-size 0.3s ease-out, opacity 2s ease-in-out",
+        }}
+      >
+        {hasError
+          ? t("timer.error")
+          : formatTimeLocalized(elapsedTime, i18n.language)}
+      </Typography>
+    </Box>
+  )
+}

package/src/components/Timer/index.tsx

@@ -0,0 +1,103 @@
+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}
+        />
+      )
+    },
+  ),
+)
+
+export default Timer

package/src/components/Timer/types.ts

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

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