@wandelbots/wandelbots-js-react-components 2.50.1-pr.feature-localize-timer-string.395.caef642 → 2.50.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.50.1-pr.feature-localize-timer-string.395.caef642",
+  "version": "2.50.1",
   "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, formatTimeLocalized } from "./utils"
+import { formatTime } from "./utils"
 
 interface DefaultVariantProps {
   timerState: TimerState
@@ -17,7 +17,7 @@ export const DefaultVariant = ({
   hasError,
   className,
 }: DefaultVariantProps) => {
-  const { t, i18n } = useTranslation()
+  const { t } = 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: formatTimeLocalized(maxTime, i18n.language),
+                          time: formatTime(maxTime),
                         })
                       : ""}
               </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 { formatTimeLocalized } from "./utils"
+import { formatTime } from "./utils"
 
 interface SmallVariantProps {
   timerState: TimerState
@@ -18,7 +18,7 @@ export const SmallVariant = ({
   compact,
   className,
 }: SmallVariantProps) => {
-  const { t, i18n } = useTranslation()
+  const { t } = 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"
-              ? "0s"
-              : formatTimeLocalized(remainingTime, i18n.language)}
+              ? "0:00"
+              : formatTime(remainingTime)}
         </Typography>
       </Box>
     )
@@ -202,24 +202,24 @@ export const SmallVariant = ({
           </>
         ) : currentState === "measuring" ? (
           compact ? (
-            `${formatTimeLocalized(remainingTime, i18n.language)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
+            `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
           ) : (
-            `${formatTimeLocalized(remainingTime, i18n.language)} / ${t("CycleTimer.Measuring.lb", "measuring...")}`
+            `${formatTime(remainingTime)} / ${t("CycleTimer.Measuring.lb", "measuring...")}`
           )
         ) : currentState === "measured" ? (
           compact ? (
-            `${formatTimeLocalized(remainingTime, i18n.language)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
+            `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
           ) : (
-            `${formatTimeLocalized(remainingTime, i18n.language)} / ${t("CycleTimer.Determined.lb", "determined")}`
+            `${formatTime(remainingTime)} / ${t("CycleTimer.Determined.lb", "determined")}`
           )
         ) : currentState === "countdown" && maxTime !== null ? (
           compact ? (
-            `${formatTimeLocalized(remainingTime, i18n.language)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
+            `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
           ) : (
-            `${formatTimeLocalized(remainingTime, i18n.language)} / ${t("CycleTimer.Time.lb", { time: formatTimeLocalized(maxTime, i18n.language) })}`
+            `${formatTime(remainingTime)} / ${t("CycleTimer.Time.lb", { time: formatTime(maxTime) })}`
           )
         ) : (
-          formatTimeLocalized(remainingTime, i18n.language)
+          formatTime(remainingTime)
         )}
       </Typography>
     </Box>

package/src/components/CycleTimer/utils.ts

@@ -1,79 +1,10 @@
 /**
- * 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
+ * Formats time in seconds to MM:SS format
  */
 export const formatTime = (seconds: number): string => {
-  const days = Math.floor(seconds / 86400)
-  const hours = Math.floor((seconds % 86400) / 3600)
-  const minutes = Math.floor((seconds % 3600) / 60)
+  const minutes = Math.floor(seconds / 60)
   const remainingSeconds = seconds % 60
-
-  // 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(" ")
+  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
 }
 
 /**

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}}",
-  "CycleTimer.Time.lb": "{{time}}",
+  "CycleTimer.OfTime.lb": "von {{time}} min.",
+  "CycleTimer.Time.lb": "{{time}} min.",
   "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}}",
-  "CycleTimer.Time.lb": "{{time}}",
+  "CycleTimer.OfTime.lb": "of {{time}} min.",
+  "CycleTimer.Time.lb": "{{time}} min.",
   "CycleTimer.Error.lb": "Error",
   "CycleTimer.WaitingForCycle.lb": "Waiting for program cycle",
   "CycleTimer.CycleTime.lb": "Cycle Time",