@wandelbots/wandelbots-js-react-components 2.40.0 → 2.41.0-pr.feature-seperate-timer.383.38eb55e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.40.0",
+  "version": "2.41.0-pr.feature-seperate-timer.383.38eb55e",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/CycleTimer/DefaultVariant.tsx

@@ -114,7 +114,6 @@ export const DefaultVariant = ({
               showLabels &&
               !hasError &&
               currentState !== "idle" &&
-              currentState !== "countup" &&
               currentState !== "success"
             }
             timeout={300}
@@ -277,7 +276,6 @@ export const DefaultVariant = ({
               showLabels &&
               !hasError &&
               currentState !== "idle" &&
-              currentState !== "countup" &&
               currentState !== "success"
             }
             timeout={300}

package/src/components/CycleTimer/SmallVariant.tsx

@@ -31,7 +31,7 @@ export const SmallVariant = ({
   } = animationState
 
   // Simple text-only mode for compact variant in certain states
-  if (compact && (currentState === "countup" || currentState === "idle")) {
+  if (compact && currentState === "idle") {
     return (
       <Box
         className={className}
@@ -72,10 +72,7 @@ export const SmallVariant = ({
       }}
     >
       {/* Animated progress ring icon */}
-      {!(
-        currentState === "countup" ||
-        (currentState === "idle" && compact)
-      ) && (
+      {!(currentState === "idle" && compact) && (
         <Box
           sx={{
             width: 20,

package/src/components/CycleTimer/index.tsx

@@ -8,19 +8,18 @@ import { useAnimations } from "./useAnimations"
 import { useTimerLogic } from "./useTimerLogic"
 
 /**
- * A circular gauge timer component that shows the remaining time of a cycle or counts up
+ * 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, countup, success
+ * - 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
- * - Count-up mode: shows elapsed time without special labels
  * - Success state: brief green flash after cycle completion
  * - Displays appropriate labels based on state
- * - Automatically counts down/up and triggers callback when reaching zero (countdown only)
+ * - 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)
@@ -28,7 +27,7 @@ import { useTimerLogic } from "./useTimerLogic"
  * - 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 or simple text-only mode
+ * - Small variant with animated progress icon (gauge border only) next to text
  */
 export const CycleTimer = externalizeComponent(
   observer(

package/src/components/CycleTimer/types.ts

@@ -3,13 +3,11 @@ export type CycleTimerState =
   | "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
-  | "countup" // Simple count up without special text
   | "success" // Brief success state after cycle completion
 
 export interface CycleTimerControls {
-  startNewCycle: (maxTimeSeconds?: number, elapsedSeconds?: number) => void
+  startNewCycle: (maxTimeSeconds: number, elapsedSeconds?: number) => void
   startMeasuring: (elapsedSeconds?: number) => void
-  startCountUp: (elapsedSeconds?: number) => void
   setIdle: () => void
   completeMeasuring: () => void
   pause: () => void

package/src/components/CycleTimer/useTimerLogic.ts

@@ -88,114 +88,66 @@ export const useTimerLogic = ({
     [autoStart, progressInterpolator],
   )
 
-  const startCountUp = useCallback(
-    (elapsedSeconds: number = 0) => {
-      const initialProgress = ((elapsedSeconds / 60) % 1) * 100
-      setTimerState((prev) => ({
-        ...prev,
-        currentState: "countup",
-        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) => {
+    (maxTimeSeconds: number, elapsedSeconds: number = 0) => {
       // Stop any running timer first to prevent conflicts
       setTimerState((prev) => ({ ...prev, isRunning: false }))
       startTimeRef.current = null
 
-      const newState = maxTimeSeconds !== undefined ? "countdown" : "countup"
       setTimerState((prev) => ({
         ...prev,
-        currentState: newState,
-        maxTime: maxTimeSeconds ?? null,
+        currentState: "countdown",
+        maxTime: maxTimeSeconds,
         isPausedState: false,
       }))
       pausedTimeRef.current = 0
 
-      if (maxTimeSeconds !== undefined) {
-        // 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
+      // 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 {
-        // Count-up mode
-        const initialProgress = ((elapsedSeconds / 60) % 1) * 100
-        setTimerState((prev) => ({
-          ...prev,
-          remainingTime: elapsedSeconds,
-          currentProgress: initialProgress, // Immediately set progress
-        }))
-
-        progressInterpolator.setImmediate([initialProgress]) // Use setImmediate for instant reset
-
-        if (autoStart) {
-          setTimeout(() => {
-            startTimeRef.current = Date.now() - elapsedSeconds * 1000
-            setTimerState((prev) => ({ ...prev, isRunning: true }))
-          }, 0)
-        } else {
-          startTimeRef.current = null
-        }
+        startTimeRef.current = null
       }
     },
     [autoStart, onCycleEnd, progressInterpolator],
   )
 
   const completeMeasuring = useCallback(() => {
-    if (timerState.currentState === "measuring") {
-      setTimerState((prev) => ({
-        ...prev,
-        isRunning: false,
-        currentState: "measured",
-      }))
-      startTimeRef.current = null
+    // Always trigger completion regardless of current state
+    setTimerState((prev) => ({
+      ...prev,
+      isRunning: false,
+      currentState: "measured",
+    }))
+    startTimeRef.current = null
 
-      onStartPulsating(() => {
-        if (onMeasuringComplete) {
-          onMeasuringComplete()
-        }
-      })
-    }
-  }, [timerState.currentState, onStartPulsating, onMeasuringComplete])
+    onStartPulsating(() => {
+      if (onMeasuringComplete) {
+        onMeasuringComplete()
+      }
+    })
+  }, [onStartPulsating, onMeasuringComplete])
 
   const pause = useCallback(() => {
     if (startTimeRef.current && timerState.isRunning) {
@@ -316,13 +268,6 @@ export const useTimerLogic = ({
             }))
             const progress = ((elapsed / 60) % 1) * 100
             progressInterpolator.setTarget([progress])
-          } else if (timerState.currentState === "countup") {
-            setTimerState((prev) => ({
-              ...prev,
-              remainingTime: Math.floor(elapsed),
-            }))
-            const progress = ((elapsed / 60) % 1) * 100
-            progressInterpolator.setTarget([progress])
           }
 
           if (timerState.isRunning) {
@@ -375,7 +320,6 @@ export const useTimerLogic = ({
     controls: {
       startNewCycle,
       startMeasuring,
-      startCountUp,
       setIdle,
       completeMeasuring,
       pause,

package/src/components/CycleTimer/utils.ts

@@ -25,8 +25,8 @@ export const calculateProgress = (
     return Math.min(100, (elapsed / maxTime) * 100)
   }
 
-  if (currentState === "measuring" || currentState === "countup") {
-    // Count-up modes: progress based on minute steps (0-100% per minute)
+  if (currentState === "measuring") {
+    // Measuring mode: progress based on minute steps (0-100% per minute)
     return ((remainingTime / 60) % 1) * 100
   }
 
@@ -45,7 +45,7 @@ export const calculateExactProgress = (
     return Math.min(100, (totalElapsed / maxTime) * 100)
   }
 
-  if (currentState === "measuring" || currentState === "countup") {
+  if (currentState === "measuring") {
     return ((totalElapsed / 60) % 1) * 100
   }
 

package/src/components/TabBar.tsx

@@ -1,7 +1,7 @@
 import type { SxProps } from "@mui/material"
 import { Box, Tab, Tabs } from "@mui/material"
 import { observer } from "mobx-react-lite"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { externalizeComponent } from "../externalizeComponent"
 
 export interface TabItem {
@@ -18,6 +18,8 @@ export interface TabItem {
 export interface TabBarProps {
   /** Array of tab items to display */
   items: TabItem[]
+  /** Controlled active tab index */
+  activeTab?: number
   /** Default active tab index */
   defaultActiveTab?: number
   /** Callback when tab changes */
@@ -57,14 +59,39 @@ function TabPanel(props: TabPanelProps) {
  */
 export const TabBar = externalizeComponent(
   observer((props: TabBarProps) => {
-    const { items, defaultActiveTab = 0, onTabChange, sx, ref } = props
-    const [activeTab, setActiveTab] = useState(defaultActiveTab)
+    const {
+      items,
+      activeTab,
+      defaultActiveTab = 0,
+      onTabChange,
+      sx,
+      ref,
+    } = props
+    const isControlled = activeTab !== undefined
+    const [uncontrolledActiveTab, setUncontrolledActiveTab] =
+      useState(defaultActiveTab)
+
+    // Keep uncontrolled state in range when items change
+    useEffect(() => {
+      if (isControlled) return
+      if (items.length === 0) return
+      if (
+        uncontrolledActiveTab < 0 ||
+        uncontrolledActiveTab > items.length - 1
+      ) {
+        setUncontrolledActiveTab(0)
+      }
+    }, [items.length, isControlled, uncontrolledActiveTab])
+
+    const currentValue = isControlled ? activeTab! : uncontrolledActiveTab
 
     const handleTabChange = (
       _event: React.SyntheticEvent,
       newValue: number,
     ) => {
-      setActiveTab(newValue)
+      if (!isControlled) {
+        setUncontrolledActiveTab(newValue)
+      }
       onTabChange?.(newValue)
     }
 
@@ -76,7 +103,7 @@ export const TabBar = externalizeComponent(
         {/* Tabs */}
         <Box sx={{ px: 0, py: 0 }}>
           <Tabs
-            value={activeTab}
+            value={currentValue}
             onChange={handleTabChange}
             sx={{
               minHeight: "32px",
@@ -104,11 +131,11 @@ export const TabBar = externalizeComponent(
                   backgroundColor: (theme) =>
                     theme.palette.backgroundPaperElevation?.[11] || "#32344B",
                   color: "text.primary",
-                  opacity: activeTab === index ? 1 : 0.38,
+                  opacity: currentValue === index ? 1 : 0.38,
                   fontSize: "13px",
                   transition: "all 0.2s ease-in-out",
                   "&:hover": {
-                    opacity: activeTab === index ? 1 : 0.6,
+                    opacity: currentValue === index ? 1 : 0.6,
                   },
                   "&.Mui-selected": {
                     opacity: 1,
@@ -134,7 +161,7 @@ export const TabBar = externalizeComponent(
         {/* Tab Content */}
         <Box sx={{ flex: 1, overflow: "auto" }}>
           {items.map((item, index) => (
-            <TabPanel key={item.id} value={activeTab} index={index}>
+            <TabPanel key={item.id} value={currentValue} index={index}>
               {item.content}
             </TabPanel>
           ))}

package/src/components/Timer/Timer.ts

@@ -0,0 +1,2 @@
+export { Timer } from "./index"
+export type { TimerControls, TimerProps } from "./types"

package/src/components/Timer/TimerDefaultVariant.tsx

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

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