@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2-pr.fix-performance-issues.594.c24b644

package/src/components/Timer/useTimerLogic.ts

@@ -1,214 +0,0 @@
-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

@@ -1,87 +0,0 @@
-/**
- * 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

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

package/src/components/TransparentOverlay.tsx

@@ -1,28 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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>
-  )
-})