@wandelbots/wandelbots-js-react-components 2.37.0-pr.feature-states-for-cycle-timer.379.4ca80c1 → 2.37.0-pr.feature-states-for-cycle-timer.379.6ceb08e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.37.0-pr.feature-states-for-cycle-timer.379.4ca80c1",
+  "version": "2.37.0-pr.feature-states-for-cycle-timer.379.6ceb08e",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/CycleTimer/DefaultVariant.tsx

@@ -27,6 +27,8 @@ export const DefaultVariant = ({
     pulsatingFinished,
     showLabels,
     showMainText,
+    showIdlePulsating,
+    idleDotsCount,
   } = animationState
 
   return (
@@ -47,8 +49,9 @@ export const DefaultVariant = ({
         value={currentState === "idle" ? 0 : currentProgress}
         valueMin={0}
         valueMax={100}
-        innerRadius={currentState === "idle" ? "75%" : "76%"}
-        outerRadius="90%"
+        innerRadius="85%"
+        outerRadius="100%"
+        margin={0}
         skipAnimation={true}
         text={() => ""}
         sx={{
@@ -61,9 +64,9 @@ export const DefaultVariant = ({
             transition: "fill 0.5s ease-out",
           },
           [`& .MuiGauge-referenceArc`]: {
-            fill: currentState === "idle" ? "#292B3F" : "white",
-            stroke: currentState === "idle" ? "#181927" : "transparent",
-            strokeWidth: currentState === "idle" ? 2 : 0,
+            fill: currentState === "idle" ? "#171927" : "#171927",
+            stroke: "transparent",
+            strokeWidth: 0,
             transition:
               "fill 0.5s ease-out, stroke 0.5s ease-out, stroke-width 0.5s ease-out",
           },
@@ -83,8 +86,6 @@ export const DefaultVariant = ({
           top: "50%",
           left: "50%",
           transform: "translate(-50%, -50%)",
-          width: 200,
-          height: 200,
           borderRadius: "50%",
           display: "flex",
           flexDirection: "column",
@@ -102,7 +103,7 @@ export const DefaultVariant = ({
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            marginBottom: 0.5,
+            marginBottom: 1,
           }}
         >
           <Fade
@@ -121,22 +122,32 @@ export const DefaultVariant = ({
                 fontSize: "12px",
                 color:
                   currentState === "measured"
-                    ? pulsatingFinished
-                      ? theme.palette.text.secondary
-                      : showPulsatingText
-                        ? theme.palette.success.main
-                        : theme.palette.text.secondary
+                    ? showPulsatingText || pulsatingFinished
+                      ? theme.palette.success.main
+                      : theme.palette.text.secondary
                     : theme.palette.text.secondary,
                 transition: "color 0.8s ease-in-out",
               }}
             >
-              {currentState === "measuring"
-                ? t("CycleTimer.CycleTime.lb", "Cycle Time")
-                : currentState === "measured"
+              <span
+                style={{
+                  opacity:
+                    currentState === "measured" && pulsatingFinished
+                      ? showPulsatingText
+                        ? 1
+                        : 0.6
+                      : 1,
+                  transition: "opacity 2s ease-in-out",
+                }}
+              >
+                {currentState === "measuring"
                   ? t("CycleTimer.CycleTime.lb", "Cycle Time")
-                  : currentState === "countdown"
-                    ? t("CycleTimer.RemainingTime.lb", "Remaining Time")
-                    : ""}
+                  : currentState === "measured"
+                    ? t("CycleTimer.CycleTime.lb", "Cycle Time")
+                    : currentState === "countdown"
+                      ? t("CycleTimer.RemainingTime.lb", "Remaining Time")
+                      : ""}
+              </span>
             </Typography>
           </Fade>
         </Box>
@@ -167,11 +178,35 @@ export const DefaultVariant = ({
                 lineHeight: "166%",
                 letterSpacing: "0.17px",
                 textAlign: "center",
-                width: "150px",
+                width: "200px",
                 height: "20px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
               }}
             >
-              {t("CycleTimer.WaitingForCycle.lb", "Waiting for program cycle")}
+              <span
+                style={{
+                  opacity: showIdlePulsating ? 1 : 0.6,
+                  transition: "opacity 2s ease-in-out",
+                }}
+              >
+                {t(
+                  "CycleTimer.WaitingForCycle.lb",
+                  "Waiting for program cycle",
+                )}
+              </span>
+              <span
+                style={{
+                  display: "inline-block",
+                  width: "18px",
+                  textAlign: "left",
+                  opacity: showIdlePulsating ? 1 : 0.6,
+                  transition: "opacity 2s ease-in-out",
+                }}
+              >
+                {".".repeat(idleDotsCount)}
+              </span>
             </Typography>
           </Fade>
 
@@ -207,15 +242,24 @@ export const DefaultVariant = ({
                 position: "absolute",
                 fontSize: "48px",
                 fontWeight: 500,
-                color:
-                  currentState === "measured"
-                    ? theme.palette.text.primary
-                    : theme.palette.text.primary,
+                color: theme.palette.text.primary,
                 lineHeight: 1,
-                transition: "color 0.5s ease-out",
+                transition: "color 0.8s ease-in-out",
               }}
             >
-              {formatTime(remainingTime)}
+              <span
+                style={{
+                  opacity:
+                    currentState === "measured" && pulsatingFinished
+                      ? showPulsatingText
+                        ? 1
+                        : 0.6
+                      : 1,
+                  transition: "opacity 2s ease-in-out",
+                }}
+              >
+                {formatTime(remainingTime)}
+              </span>
             </Typography>
           </Fade>
         </Box>
@@ -225,6 +269,7 @@ export const DefaultVariant = ({
           sx={{
             height: "16px",
             display: "flex",
+            marginTop: 0.5,
             alignItems: "center",
             justifyContent: "center",
           }}
@@ -245,24 +290,34 @@ export const DefaultVariant = ({
                 fontSize: "12px",
                 color:
                   currentState === "measured"
-                    ? pulsatingFinished
-                      ? theme.palette.text.secondary
-                      : showPulsatingText
-                        ? theme.palette.success.main
-                        : theme.palette.text.secondary
+                    ? showPulsatingText || pulsatingFinished
+                      ? theme.palette.success.main
+                      : theme.palette.text.secondary
                     : theme.palette.text.secondary,
                 transition: "color 0.8s ease-in-out",
               }}
             >
-              {currentState === "measuring"
-                ? t("CycleTimer.Measuring.lb", "measuring...")
-                : currentState === "measured"
-                  ? t("CycleTimer.Determined.lb", "determined")
-                  : currentState === "countdown" && maxTime !== null
-                    ? t("CycleTimer.OfTime.lb", {
-                        time: formatTime(maxTime),
-                      })
-                    : ""}
+              <span
+                style={{
+                  opacity:
+                    currentState === "measured" && pulsatingFinished
+                      ? showPulsatingText
+                        ? 1
+                        : 0.6
+                      : 1,
+                  transition: "opacity 2s ease-in-out",
+                }}
+              >
+                {currentState === "measuring"
+                  ? t("CycleTimer.Measuring.lb", "measuring...")
+                  : currentState === "measured"
+                    ? t("CycleTimer.Determined.lb", "determined")
+                    : currentState === "countdown" && maxTime !== null
+                      ? t("CycleTimer.OfTime.lb", {
+                          time: formatTime(maxTime),
+                        })
+                      : ""}
+              </span>
             </Typography>
           </Fade>
         </Box>

package/src/components/CycleTimer/SmallVariant.tsx

@@ -26,6 +26,8 @@ export const SmallVariant = ({
     showPauseAnimation,
     showPulsatingText,
     pulsatingFinished,
+    showIdlePulsating,
+    idleDotsCount,
   } = animationState
 
   // Simple text-only mode for compact variant in certain states
@@ -103,17 +105,21 @@ export const SmallVariant = ({
                 hasError
                   ? theme.palette.error.light
                   : currentState === "measured"
-                    ? pulsatingFinished
-                      ? theme.palette.text.secondary
-                      : showPulsatingText
-                        ? theme.palette.success.main
-                        : theme.palette.text.secondary
+                    ? showPulsatingText || pulsatingFinished
+                      ? theme.palette.success.main
+                      : theme.palette.text.secondary
                     : theme.palette.success.main
               }
               strokeWidth="2"
-              opacity={0.3}
+              opacity={
+                currentState === "measured" && pulsatingFinished
+                  ? showPulsatingText
+                    ? 1
+                    : 0.6
+                  : 0.3
+              }
               style={{
-                transition: "stroke 0.8s ease-in-out",
+                transition: "stroke 0.8s ease-in-out, opacity 2s ease-in-out",
               }}
             />
             {/* Progress ring */}
@@ -126,11 +132,9 @@ export const SmallVariant = ({
                 hasError
                   ? theme.palette.error.light
                   : currentState === "measured"
-                    ? pulsatingFinished
-                      ? theme.palette.text.secondary
-                      : showPulsatingText
-                        ? theme.palette.success.main
-                        : theme.palette.text.secondary
+                    ? showPulsatingText || pulsatingFinished
+                      ? theme.palette.success.main
+                      : theme.palette.text.secondary
                     : theme.palette.success.main
               }
               strokeWidth="2"
@@ -138,8 +142,14 @@ export const SmallVariant = ({
               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",
+                  "stroke-dashoffset 0.1s ease-out, stroke 0.8s ease-in-out, opacity 2s ease-in-out",
               }}
             />
           </svg>
@@ -155,35 +165,65 @@ export const SmallVariant = ({
             : currentState === "idle"
               ? "rgba(255, 255, 255, 0.7)"
               : currentState === "measured"
-                ? pulsatingFinished
-                  ? theme.palette.text.secondary
-                  : showPulsatingText
-                    ? theme.palette.success.main
-                    : theme.palette.text.secondary
+                ? showPulsatingText || pulsatingFinished
+                  ? theme.palette.success.main
+                  : theme.palette.text.secondary
                 : theme.palette.text.primary,
-          fontSize: currentState === "idle" ? "12px" : "14px",
-          lineHeight: currentState === "idle" ? "166%" : "normal",
-          letterSpacing: currentState === "idle" ? "0.17px" : "normal",
-          transition: "color 0.8s ease-in-out, font-size 0.3s ease-out",
+          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"
-            ? t("CycleTimer.WaitingForCycle.lb", "Waiting for program cycle")
-            : currentState === "measuring"
-              ? compact
-                ? `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
-                : `${formatTime(remainingTime)} / ${t("CycleTimer.Measuring.lb", "measuring...")}`
-              : currentState === "measured"
-                ? compact
-                  ? `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
-                  : `${formatTime(remainingTime)} / ${t("CycleTimer.Determined.lb", "determined")}`
-                : currentState === "countdown" && maxTime !== null
-                  ? compact
-                    ? `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
-                    : `${formatTime(remainingTime)} / ${t("CycleTimer.Time.lb", { time: formatTime(maxTime) })}`
-                  : formatTime(remainingTime)}
+        {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 ? (
+            `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
+          ) : (
+            `${formatTime(remainingTime)} / ${t("CycleTimer.Measuring.lb", "measuring...")}`
+          )
+        ) : currentState === "measured" ? (
+          compact ? (
+            `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
+          ) : (
+            `${formatTime(remainingTime)} / ${t("CycleTimer.Determined.lb", "determined")}`
+          )
+        ) : currentState === "countdown" && maxTime !== null ? (
+          compact ? (
+            `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
+          ) : (
+            `${formatTime(remainingTime)} / ${t("CycleTimer.Time.lb", { time: formatTime(maxTime) })}`
+          )
+        ) : (
+          formatTime(remainingTime)
+        )}
       </Typography>
     </Box>
   )

package/src/components/CycleTimer/index.tsx

@@ -52,6 +52,8 @@ export const CycleTimer = externalizeComponent(
         clearErrorAnimation,
         startPulsatingAnimation,
         stopPulsatingAnimation,
+        startIdleAnimations,
+        stopIdleAnimations,
         triggerFadeTransition,
         setInitialAnimationState,
         cleanup,
@@ -82,6 +84,11 @@ export const CycleTimer = externalizeComponent(
             stopPulsatingAnimation()
           }
 
+          // Stop idle animations if leaving idle state
+          if (prevState === "idle") {
+            stopIdleAnimations()
+          }
+
           // Trigger fade transition
           triggerFadeTransition()
         } else {
@@ -89,10 +96,17 @@ export const CycleTimer = externalizeComponent(
           setInitialAnimationState()
         }
 
+        // Start idle animations if entering idle state
+        if (timerState.currentState === "idle") {
+          startIdleAnimations()
+        }
+
         prevStateRef.current = timerState.currentState
       }, [
         timerState.currentState,
         stopPulsatingAnimation,
+        stopIdleAnimations,
+        startIdleAnimations,
         triggerFadeTransition,
         setInitialAnimationState,
       ])

package/src/components/CycleTimer/types.ts

@@ -55,4 +55,6 @@ export interface AnimationState {
   pulsatingFinished: boolean
   showLabels: boolean
   showMainText: boolean
+  showIdlePulsating: boolean
+  idleDotsCount: number
 }

package/src/components/CycleTimer/useAnimations.ts

@@ -9,6 +9,8 @@ export const useAnimations = () => {
     pulsatingFinished: false,
     showLabels: true,
     showMainText: true,
+    showIdlePulsating: false,
+    idleDotsCount: 0,
   })
 
   // Refs for managing timeouts and intervals
@@ -17,6 +19,8 @@ export const useAnimations = () => {
   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 }))
@@ -51,36 +55,32 @@ export const useAnimations = () => {
 
   const startPulsatingAnimation = useCallback((onComplete?: () => void) => {
     pulseCountRef.current = 0
+    // Start with fade to success color
     setAnimationState((prev) => ({
       ...prev,
       showPulsatingText: true,
       pulsatingFinished: false,
     }))
 
-    pulsatingIntervalRef.current = setInterval(() => {
-      pulseCountRef.current += 1
+    // 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
+      }))
 
-      if (pulseCountRef.current >= 8) {
-        // 4 complete cycles (on->off->on->off = 8 state changes)
-        if (pulsatingIntervalRef.current) {
-          clearInterval(pulsatingIntervalRef.current)
-          pulsatingIntervalRef.current = null
-        }
-        setAnimationState((prev) => ({
-          ...prev,
-          showPulsatingText: false,
-          pulsatingFinished: true,
-        }))
-        if (onComplete) {
-          onComplete()
-        }
-      } else {
+      // 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)
+    }, 800) // Initial success color display duration
   }, [])
 
   const stopPulsatingAnimation = useCallback(() => {
@@ -88,6 +88,7 @@ export const useAnimations = () => {
       clearInterval(pulsatingIntervalRef.current)
       pulsatingIntervalRef.current = null
     }
+    // Reset all pulsating states to ensure colors are reset
     setAnimationState((prev) => ({
       ...prev,
       showPulsatingText: false,
@@ -96,6 +97,45 @@ export const useAnimations = () => {
     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,
@@ -138,6 +178,12 @@ export const useAnimations = () => {
     if (pulsatingIntervalRef.current) {
       clearInterval(pulsatingIntervalRef.current)
     }
+    if (idlePulsatingIntervalRef.current) {
+      clearInterval(idlePulsatingIntervalRef.current)
+    }
+    if (idleDotsIntervalRef.current) {
+      clearInterval(idleDotsIntervalRef.current)
+    }
   }, [])
 
   return {
@@ -147,6 +193,8 @@ export const useAnimations = () => {
     clearErrorAnimation,
     startPulsatingAnimation,
     stopPulsatingAnimation,
+    startIdleAnimations,
+    stopIdleAnimations,
     triggerFadeTransition,
     setInitialAnimationState,
     cleanup,