@wandelbots/wandelbots-js-react-components 5.5.1-pr.fix-standardize-output.591.60112ee → 5.5.1

package/src/components/Timer/useTimerLogic.ts

@@ -0,0 +1,214 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import { useInterpolation } from "../utils/interpolation"
+import type { TimerState } from "./types"
+
+interface UseTimerLogicProps {
+  autoStart: boolean
+  hasError: boolean
+  onPauseAnimation: () => void
+  onErrorAnimation: () => void
+  onClearErrorAnimation: () => void
+}
+
+export const useTimerLogic = ({
+  autoStart,
+  hasError,
+  onPauseAnimation,
+  onErrorAnimation,
+  onClearErrorAnimation,
+}: UseTimerLogicProps) => {
+  const [timerState, setTimerState] = useState<TimerState>({
+    elapsedTime: 0,
+    isRunning: false,
+    isPausedState: false,
+    currentProgress: 0,
+    wasRunningBeforeError: false,
+  })
+
+  // Timer-related refs
+  const animationRef = useRef<number | null>(null)
+  const startTimeRef = useRef<number | null>(null)
+  const pausedTimeRef = useRef<number>(0)
+  const lastProgressRef = useRef<number>(0)
+
+  // Spring-based interpolator for smooth gauge progress animations
+  const [progressInterpolator] = useInterpolation([0], {
+    tension: 80,
+    friction: 18,
+    onChange: ([progress]) => {
+      setTimerState((prev) => ({ ...prev, currentProgress: progress }))
+    },
+  })
+
+  const start = useCallback(
+    (elapsedSeconds: number = 0) => {
+      const initialProgress = ((elapsedSeconds / 60) % 1) * 100
+      setTimerState((prev) => ({
+        ...prev,
+        elapsedTime: elapsedSeconds,
+        isPausedState: false,
+        currentProgress: initialProgress,
+      }))
+      pausedTimeRef.current = 0
+      lastProgressRef.current = initialProgress
+
+      progressInterpolator.setImmediate([initialProgress])
+
+      if (autoStart) {
+        startTimeRef.current = Date.now() - elapsedSeconds * 1000
+        setTimerState((prev) => ({ ...prev, isRunning: true }))
+      } else {
+        startTimeRef.current = null
+      }
+    },
+    [autoStart, progressInterpolator],
+  )
+
+  const pause = useCallback(() => {
+    if (startTimeRef.current && timerState.isRunning) {
+      const now = Date.now()
+      const totalElapsed =
+        (now - startTimeRef.current) / 1000 + pausedTimeRef.current
+      const currentProgress = ((totalElapsed / 60) % 1) * 100
+      progressInterpolator.setTarget([currentProgress])
+
+      setTimerState((prev) => ({
+        ...prev,
+        elapsedTime: Math.floor(totalElapsed),
+      }))
+    }
+
+    setTimerState((prev) => ({
+      ...prev,
+      isRunning: false,
+      isPausedState: true,
+    }))
+    onPauseAnimation()
+  }, [timerState.isRunning, progressInterpolator, onPauseAnimation])
+
+  const resume = useCallback(() => {
+    if (timerState.isPausedState) {
+      pausedTimeRef.current = timerState.elapsedTime
+      startTimeRef.current = Date.now()
+      setTimerState((prev) => ({
+        ...prev,
+        isRunning: true,
+        isPausedState: false,
+      }))
+    }
+  }, [timerState.isPausedState, timerState.elapsedTime])
+
+  const reset = useCallback(() => {
+    setTimerState((prev) => ({
+      ...prev,
+      elapsedTime: 0,
+      isRunning: false,
+      isPausedState: false,
+      currentProgress: 0,
+    }))
+    pausedTimeRef.current = 0
+    startTimeRef.current = null
+    lastProgressRef.current = 0
+    progressInterpolator.setImmediate([0])
+  }, [progressInterpolator])
+
+  const isPaused = useCallback(() => {
+    return timerState.isPausedState
+  }, [timerState.isPausedState])
+
+  // Handle error state changes
+  useEffect(() => {
+    if (hasError) {
+      if (timerState.isRunning) {
+        setTimerState((prev) => ({ ...prev, wasRunningBeforeError: true }))
+        pause()
+      }
+      onErrorAnimation()
+    } else {
+      if (timerState.wasRunningBeforeError && !timerState.isRunning) {
+        setTimerState((prev) => ({ ...prev, wasRunningBeforeError: false }))
+        resume()
+      }
+      onClearErrorAnimation()
+    }
+  }, [
+    hasError,
+    timerState.isRunning,
+    timerState.wasRunningBeforeError,
+    pause,
+    resume,
+    onErrorAnimation,
+    onClearErrorAnimation,
+  ])
+
+  // Main timer loop
+  useEffect(() => {
+    if (timerState.isRunning) {
+      const updateTimer = () => {
+        if (startTimeRef.current) {
+          const now = Date.now()
+          const totalElapsed =
+            (now - startTimeRef.current) / 1000 + pausedTimeRef.current
+          const currentProgress = ((totalElapsed / 60) % 1) * 100
+
+          setTimerState((prev) => ({
+            ...prev,
+            elapsedTime: Math.floor(totalElapsed),
+          }))
+
+          // Only update progress interpolator if progress changed significantly
+          const progressDiff = Math.abs(
+            currentProgress - lastProgressRef.current,
+          )
+          if (progressDiff > 0.1) {
+            progressInterpolator.setTarget([currentProgress])
+            lastProgressRef.current = currentProgress
+          }
+        }
+        animationRef.current = requestAnimationFrame(updateTimer)
+      }
+      animationRef.current = requestAnimationFrame(updateTimer)
+    } else {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+        animationRef.current = null
+      }
+    }
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+        animationRef.current = null
+      }
+    }
+  }, [timerState.isRunning, progressInterpolator])
+
+  // Interpolation animation loop
+  useEffect(() => {
+    let interpolationAnimationId: number | null = null
+
+    const animateInterpolation = () => {
+      progressInterpolator.update()
+      interpolationAnimationId = requestAnimationFrame(animateInterpolation)
+    }
+
+    interpolationAnimationId = requestAnimationFrame(animateInterpolation)
+
+    return () => {
+      if (interpolationAnimationId) {
+        cancelAnimationFrame(interpolationAnimationId)
+      }
+    }
+  }, [progressInterpolator])
+
+  return {
+    timerState,
+    controls: {
+      start,
+      pause,
+      resume,
+      reset,
+      isPaused,
+    },
+  }
+}

package/src/components/Timer/utils.ts

@@ -0,0 +1,87 @@
+/**
+ * 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 days = Math.floor(seconds / 86400)
+  const hours = Math.floor((seconds % 86400) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 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
+      // 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(" ")
+}
+
+/**
+ * Calculates progress percentage for timer (minute-based cycles)
+ */
+export const calculateTimerProgress = (elapsedTime: number): number => {
+  return ((elapsedTime / 60) % 1) * 100
+}

package/src/components/Timer.ts

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

package/src/components/TransparentOverlay.tsx

@@ -0,0 +1,28 @@
+import Stack from "@mui/material/Stack"
+import { omit } from "lodash-es"
+import type React from "react"
+
+export const TransparentOverlay = (
+  props: React.ComponentProps<typeof Stack>,
+) => {
+  return (
+    <Stack
+      position="absolute"
+      left={0}
+      top={0}
+      width="100%"
+      height="100%"
+      alignItems="center"
+      justifyContent="center"
+      sx={{
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+        backdropFilter: "blur(2px)",
+        zIndex: 100,
+        ...(props.sx || {}),
+      }}
+      {...omit(props, "sx")}
+    />
+  )
+}
+
+export default TransparentOverlay

package/src/components/VelocitySlider.tsx

@@ -0,0 +1,117 @@
+import Slider from "@mui/material/Slider"
+import Stack from "@mui/material/Stack"
+import { useTheme, type SxProps } from "@mui/material/styles"
+import Typography from "@mui/material/Typography"
+import isNumber from "lodash-es/isNumber.js"
+import { observer } from "mobx-react-lite"
+import type { ReactNode } from "react"
+import { useTranslation } from "react-i18next"
+import type { JoggingStore } from "./jogging/JoggingStore"
+
+type VelocitySliderProps = {
+  min: number
+  max: number
+  velocity: number
+  onVelocityChange: (newVelocity: number, useDegree: boolean) => void
+  disabled?: boolean
+  renderValue?: (value: number) => ReactNode
+  useDegree: boolean
+  store: JoggingStore
+}
+
+/** A slider for controlling the movement velocity of a robot */
+export const VelocitySlider = observer((props: VelocitySliderProps) => {
+  const theme = useTheme()
+  const { store } = props
+  const { t } = useTranslation()
+
+  function onSliderChange(_event: Event, newVelocity: number | number[]) {
+    if (newVelocity === props.velocity || !isNumber(newVelocity)) return
+
+    props.onVelocityChange(newVelocity, props.useDegree)
+  }
+
+  return (
+    <Stack
+      direction="row"
+      gap={2}
+      alignItems="center"
+      data-testid="velocity-slider"
+      aria-label="velocity-slider"
+    >
+      {store.showVelocityLegend && (
+        <Typography
+          sx={{
+            color:
+              theme.componentsExt?.JoggingPanel?.VelocitySlider
+                ?.sliderLegendColor,
+            fontSize: "14px",
+          }}
+        >
+          {t("Jogging.Velocity.bt")}
+        </Typography>
+      )}
+      <Slider
+        value={props.velocity}
+        color="secondary"
+        onChange={onSliderChange}
+        min={props.min}
+        max={props.max}
+        aria-labelledby="input-slider"
+        disabled={props.disabled}
+        sx={{
+          "& .MuiSlider-valueLabelOpen": {
+            zIndex: 100,
+            backgroundColor: "transparent",
+            top: "0px",
+          },
+        }}
+      />
+      {store.showVelocitySliderLabel &&
+        (props.renderValue ? (
+          props.renderValue(props.velocity)
+        ) : (
+          <VelocitySliderLabel value={props.velocity.toString()} />
+        ))}
+    </Stack>
+  )
+})
+
+type VelocitySliderLabelProps = {
+  value: string
+  sx?: SxProps
+}
+
+export function VelocitySliderLabel({ value, sx }: VelocitySliderLabelProps) {
+  const theme = useTheme()
+  return (
+    <Stack
+      direction={"row"}
+      justifyContent={"center"}
+      alignItems={"center"}
+      gap={"5px"}
+      sx={{
+        padding: "6px 12px",
+        background: theme.palette.backgroundPaperElevation?.[8],
+        borderRadius: "10px",
+        minWidth: "111px",
+        ...sx,
+      }}
+    >
+      <Typography
+        component="span"
+        sx={{
+          textAlign: "right",
+          fontSize: "14px",
+          opacity: 0.8,
+          color: theme.palette.text.primary,
+          whiteSpace: "nowrap",
+        }}
+      >
+        {value}
+      </Typography>
+    </Stack>
+  )
+}
+
+export default VelocitySlider

package/src/components/experimental/utils/AdornedSelect.tsx

@@ -0,0 +1,38 @@
+import FormControl from "@mui/material/FormControl"
+import InputLabel from "@mui/material/InputLabel"
+import Select, { type SelectProps } from "@mui/material/Select"
+import { styled } from "@mui/material/styles"
+const AdornedFormControl = styled(FormControl)(({ theme }) => ({
+  "&.MuiFormControl-root": {
+    ".MuiSelect-select": {
+      paddingTop: "20px",
+      paddingLeft: "12px",
+    },
+    label: {
+      pointerEvents: "none",
+      fontSize: "16px",
+    },
+    ".MuiInputLabel-root": {
+      "&.Mui-focused": {
+        color: theme.palette.text.primary,
+      },
+    },
+  },
+}))
+
+type AdornedSelectProps = {
+  labelValue: string
+  labelId: string
+} & SelectProps
+
+export default function AdornedSelect({
+  labelValue,
+  ...props
+}: AdornedSelectProps) {
+  return (
+    <AdornedFormControl fullWidth variant="filled">
+      <InputLabel id={props.labelId}>{labelValue}</InputLabel>
+      <Select {...props} />
+    </AdornedFormControl>
+  )
+}

package/src/components/jogging/JoggingBlocked.tsx

@@ -0,0 +1,43 @@
+import Alert from "@mui/material/Alert"
+import AlertTitle from "@mui/material/AlertTitle"
+import Backdrop from "@mui/material/Backdrop"
+import Button from "@mui/material/Button"
+import Stack from "@mui/material/Stack"
+import { observer } from "mobx-react-lite"
+import { useTranslation } from "react-i18next"
+import type { JoggingStore } from "./JoggingStore"
+
+export const JoggingBlocked = observer(({ store }: { store: JoggingStore }) => {
+  const { t } = useTranslation()
+
+  return (
+    <Backdrop
+      data-testid="jogging-blocked"
+      aria-label="jogging-blocked"
+      open={true}
+      sx={{
+        position: "absolute",
+        zIndex: (theme) => theme.zIndex.drawer + 1,
+        color: "#fff",
+        background: "rgba(15, 15, 15, 0.88)",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+      }}
+    >
+      <Stack sx={{ m: 2, width: "100%" }}>
+        <Alert severity="error" sx={{ mb: 2 }}>
+          <AlertTitle>{t("Jogging.Blocked.ti")}</AlertTitle>
+          {t("Jogging.Blocked.lb")}
+        </Alert>
+
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => store.unblock()}
+        >
+          {t("Jogging.Blocked.Reenable.bt")}
+        </Button>
+      </Stack>
+    </Backdrop>
+  )
+})