@wandelbots/wandelbots-js-react-components 2.40.0-pr.feature-seperate-timer.383.0494cf4 → 2.41.0

package/src/components/Timer/TimerDefaultVariant.tsx

@@ -1,140 +0,0 @@
-import { Box, Fade, Typography } from "@mui/material"
-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

@@ -1,140 +0,0 @@
-import { Box, Typography } from "@mui/material"
-import { useTheme } from "@mui/material/styles"
-import { useTranslation } from "react-i18next"
-import type { TimerState, TimerAnimationState } from "./types"
-import { formatTime } 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 } = 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") : formatTime(elapsedTime)}
-        </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") : formatTime(elapsedTime)}
-      </Typography>
-    </Box>
-  )
-}

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,
-  }
-}