@wandelbots/wandelbots-js-react-components 2.51.0 → 2.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.51.0",
+  "version": "2.52.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/CycleTimer/SmallVariant.tsx

@@ -202,19 +202,19 @@ export const SmallVariant = ({
           </>
         ) : currentState === "measuring" ? (
           compact ? (
-            `${formatTimeLocalized(remainingTime, i18n.language)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
+            formatTimeLocalized(remainingTime, i18n.language)
           ) : (
             `${formatTimeLocalized(remainingTime, i18n.language)} / ${t("CycleTimer.Measuring.lb", "measuring...")}`
           )
         ) : currentState === "measured" ? (
           compact ? (
-            `${formatTimeLocalized(remainingTime, i18n.language)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
+            formatTimeLocalized(remainingTime, i18n.language)
           ) : (
             `${formatTimeLocalized(remainingTime, i18n.language)} / ${t("CycleTimer.Determined.lb", "determined")}`
           )
         ) : currentState === "countdown" && maxTime !== null ? (
           compact ? (
-            `${formatTimeLocalized(remainingTime, i18n.language)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
+            formatTimeLocalized(remainingTime, i18n.language)
           ) : (
             `${formatTimeLocalized(remainingTime, i18n.language)} / ${t("CycleTimer.Time.lb", { time: formatTimeLocalized(maxTime, i18n.language) })}`
           )

package/src/components/Timer/TimerSmallVariant.tsx

@@ -1,8 +1,8 @@
 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"
+import type { TimerAnimationState, TimerState } from "./types"
+import { formatTimeLocalized } from "./utils"
 
 interface TimerSmallVariantProps {
   timerState: TimerState
@@ -19,7 +19,7 @@ export const TimerSmallVariant = ({
   compact,
   className,
 }: TimerSmallVariantProps) => {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
   const theme = useTheme()
   const { elapsedTime, currentProgress } = timerState
   const { showErrorAnimation, showPauseAnimation } = animationState
@@ -45,7 +45,9 @@ export const TimerSmallVariant = ({
             transition: "color 0.5s ease-out",
           }}
         >
-          {hasError ? t("timer.error") : formatTime(elapsedTime)}
+          {hasError
+            ? t("timer.error")
+            : formatTimeLocalized(elapsedTime, i18n.language)}
         </Typography>
       </Box>
     )
@@ -87,9 +89,7 @@ export const TimerSmallVariant = ({
             r="8"
             fill="none"
             stroke={
-              hasError
-                ? theme.palette.error.light
-                : theme.palette.success.main
+              hasError ? theme.palette.error.light : theme.palette.success.main
             }
             strokeWidth="2"
             opacity={0.3}
@@ -103,9 +103,7 @@ export const TimerSmallVariant = ({
             r="8"
             fill="none"
             stroke={
-              hasError
-                ? theme.palette.error.light
-                : theme.palette.success.main
+              hasError ? theme.palette.error.light : theme.palette.success.main
             }
             strokeWidth="2"
             strokeLinecap="round"
@@ -133,7 +131,9 @@ export const TimerSmallVariant = ({
             "color 0.8s ease-in-out, font-size 0.3s ease-out, opacity 2s ease-in-out",
         }}
       >
-        {hasError ? t("timer.error") : formatTime(elapsedTime)}
+        {hasError
+          ? t("timer.error")
+          : formatTimeLocalized(elapsedTime, i18n.language)}
       </Typography>
     </Box>
   )

package/src/components/Timer/utils.ts

@@ -1,10 +1,82 @@
 /**
- * Formats time in seconds to MM:SS format
+ * Formats time in seconds to D:HH:MM:SS, H:MM:SS or MM:SS format
+ * Used for the default (large) timer variant
+ * Automatically includes days and hours as needed for clarity
  */
 export const formatTime = (seconds: number): string => {
-  const minutes = Math.floor(seconds / 60)
+  const days = Math.floor(seconds / 86400)
+  const hours = Math.floor((seconds % 86400) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
   const remainingSeconds = seconds % 60
-  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
+
+  // Build time parts array
+  const parts: string[] = []
+
+  if (days > 0) {
+    parts.push(days.toString())
+    parts.push(hours.toString().padStart(2, "0"))
+    parts.push(minutes.toString().padStart(2, "0"))
+    parts.push(remainingSeconds.toString().padStart(2, "0"))
+  } else if (hours > 0) {
+    parts.push(hours.toString())
+    parts.push(minutes.toString().padStart(2, "0"))
+    parts.push(remainingSeconds.toString().padStart(2, "0"))
+  } else {
+    parts.push(minutes.toString())
+    parts.push(remainingSeconds.toString().padStart(2, "0"))
+  }
+
+  return parts.join(":")
+}
+
+/**
+ * Formats time in seconds to a localized human-readable format
+ * Used for the small timer variant
+ * Examples: "2h 30m 15s", "45m 30s", "30s"
+ * Falls back to English units if Intl.DurationFormat is not available
+ */
+export const formatTimeLocalized = (
+  seconds: number,
+  locale?: string,
+): string => {
+  const days = Math.floor(seconds / 86400)
+  const hours = Math.floor((seconds % 86400) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const remainingSeconds = seconds % 60
+
+  // Try using Intl.DurationFormat if available (newer browsers)
+  if (typeof Intl !== "undefined" && "DurationFormat" in Intl) {
+    try {
+      const duration: Record<string, number> = {}
+      if (days > 0) duration.days = days
+      if (hours > 0) duration.hours = hours
+      if (minutes > 0) duration.minutes = minutes
+      if (remainingSeconds > 0 || Object.keys(duration).length === 0) {
+        duration.seconds = remainingSeconds
+      }
+
+      // @ts-expect-error
+      // TODO: Remove suppression once Intl.DurationFormat is supported in TypeScript types.
+      // See: https://github.com/microsoft/TypeScript/issues/53971
+      // DurationFormat is a proposed API and not yet available in TypeScript's standard library types.
+      const formatter = new Intl.DurationFormat(locale, { style: "narrow" })
+      return formatter.format(duration)
+    } catch {
+      // Fall through to manual formatting
+    }
+  }
+
+  // Manual formatting with compact units
+  const parts: string[] = []
+
+  if (days > 0) parts.push(`${days}d`)
+  if (hours > 0) parts.push(`${hours}h`)
+  if (minutes > 0) parts.push(`${minutes}m`)
+  if (remainingSeconds > 0 || parts.length === 0) {
+    parts.push(`${remainingSeconds}s`)
+  }
+
+  return parts.join(" ")
 }
 
 /**