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

package/package.json

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

package/src/components/CycleTimer/DefaultVariant.tsx

@@ -2,7 +2,7 @@ import { Box, Fade, Typography, useTheme } from "@mui/material"
 import { Gauge } from "@mui/x-charts/Gauge"
 import { useTranslation } from "react-i18next"
 import type { AnimationState, TimerState } from "./types"
-import { formatTime } from "./utils"
+import { formatTime, formatTimeLocalized } from "./utils"
 
 interface DefaultVariantProps {
   timerState: TimerState
@@ -17,7 +17,7 @@ export const DefaultVariant = ({
   hasError,
   className,
 }: DefaultVariantProps) => {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
   const theme = useTheme()
   const { currentState, remainingTime, maxTime, currentProgress } = timerState
   const {
@@ -310,7 +310,7 @@ export const DefaultVariant = ({
                     ? t("CycleTimer.Determined.lb", "determined")
                     : currentState === "countdown" && maxTime !== null
                       ? t("CycleTimer.OfTime.lb", {
-                          time: formatTime(maxTime),
+                          time: formatTimeLocalized(maxTime, i18n.language),
                         })
                       : ""}
               </span>

package/src/components/CycleTimer/SmallVariant.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography, useTheme } from "@mui/material"
 import { useTranslation } from "react-i18next"
 import type { AnimationState, TimerState } from "./types"
-import { formatTime } from "./utils"
+import { formatTimeLocalized } from "./utils"
 
 interface SmallVariantProps {
   timerState: TimerState
@@ -18,7 +18,7 @@ export const SmallVariant = ({
   compact,
   className,
 }: SmallVariantProps) => {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
   const theme = useTheme()
   const { currentState, remainingTime, maxTime } = timerState
   const {
@@ -54,8 +54,8 @@ export const SmallVariant = ({
           {hasError
             ? t("CycleTimer.Error.lb", "Error")
             : currentState === "idle"
-              ? "0:00"
-              : formatTime(remainingTime)}
+              ? "0s"
+              : formatTimeLocalized(remainingTime, i18n.language)}
         </Typography>
       </Box>
     )
@@ -202,24 +202,24 @@ export const SmallVariant = ({
           </>
         ) : currentState === "measuring" ? (
           compact ? (
-            `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
+            `${formatTimeLocalized(remainingTime, i18n.language)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
           ) : (
-            `${formatTime(remainingTime)} / ${t("CycleTimer.Measuring.lb", "measuring...")}`
+            `${formatTimeLocalized(remainingTime, i18n.language)} / ${t("CycleTimer.Measuring.lb", "measuring...")}`
           )
         ) : currentState === "measured" ? (
           compact ? (
-            `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
+            `${formatTimeLocalized(remainingTime, i18n.language)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
           ) : (
-            `${formatTime(remainingTime)} / ${t("CycleTimer.Determined.lb", "determined")}`
+            `${formatTimeLocalized(remainingTime, i18n.language)} / ${t("CycleTimer.Determined.lb", "determined")}`
           )
         ) : currentState === "countdown" && maxTime !== null ? (
           compact ? (
-            `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
+            `${formatTimeLocalized(remainingTime, i18n.language)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
           ) : (
-            `${formatTime(remainingTime)} / ${t("CycleTimer.Time.lb", { time: formatTime(maxTime) })}`
+            `${formatTimeLocalized(remainingTime, i18n.language)} / ${t("CycleTimer.Time.lb", { time: formatTimeLocalized(maxTime, i18n.language) })}`
           )
         ) : (
-          formatTime(remainingTime)
+          formatTimeLocalized(remainingTime, i18n.language)
         )}
       </Typography>
     </Box>

package/src/components/CycleTimer/utils.ts

@@ -1,10 +1,79 @@
 /**
- * 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 - DurationFormat is not yet in TypeScript 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(" ")
 }
 
 /**

package/src/i18n/locales/de/translations.json

@@ -45,8 +45,8 @@
   "Jogging.Joints.bt": "Gelenke",
   "Jogging.Velocity.bt": "Geschwindigkeit",
   "CycleTimer.RemainingTime.lb": "Verbleibende Zeit",
-  "CycleTimer.OfTime.lb": "von {{time}} min.",
-  "CycleTimer.Time.lb": "{{time}} min.",
+  "CycleTimer.OfTime.lb": "von {{time}}",
+  "CycleTimer.Time.lb": "{{time}}",
   "CycleTimer.Error.lb": "Fehler",
   "CycleTimer.WaitingForCycle.lb": "Warten auf Programmzyklus",
   "CycleTimer.CycleTime.lb": "Zykluszeit",

package/src/i18n/locales/en/translations.json

@@ -46,8 +46,8 @@
   "Jogging.Joints.bt": "Joints",
   "Jogging.Velocity.bt": "Velocity",
   "CycleTimer.RemainingTime.lb": "Time remaining",
-  "CycleTimer.OfTime.lb": "of {{time}} min.",
-  "CycleTimer.Time.lb": "{{time}} min.",
+  "CycleTimer.OfTime.lb": "of {{time}}",
+  "CycleTimer.Time.lb": "{{time}}",
   "CycleTimer.Error.lb": "Error",
   "CycleTimer.WaitingForCycle.lb": "Waiting for program cycle",
   "CycleTimer.CycleTime.lb": "Cycle Time",