@wandelbots/wandelbots-js-react-components 5.4.1 → 5.4.2-pr.ci-pr-preview.586.f684aae

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

@@ -1,11 +1,7 @@
-import {
-  FormControl,
-  InputLabel,
-  Select,
-  styled,
-  type SelectProps,
-} from "@mui/material"
-
+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": {

package/src/components/jogging/JoggingBlocked.tsx

@@ -1,7 +1,11 @@
-import { Alert, AlertTitle, Backdrop, Button, Stack } from "@mui/material"
+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"
+import type { JoggingStore } from "./JoggingStore"
 
 export const JoggingBlocked = observer(({ store }: { store: JoggingStore }) => {
   const { t } = useTranslation()

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -1,4 +1,6 @@
-import { IconButton, Typography, useTheme } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import IconButton from "@mui/material/IconButton"
+import Typography from "@mui/material/Typography"
 import Stack from "@mui/material/Stack"
 import { observer } from "mobx-react-lite"
 import React, { useEffect, useRef, useState, type ReactNode } from "react"
@@ -46,6 +48,7 @@ export const JoggingCartesianAxisControl = externalizeComponent(
         useState<JoggingDirection | null>(null)
 
       // Trigger pointer "release" events because e.g. firefox does not trigger pointer events as soon as a component is disabled
+      // biome-ignore lint/correctness/useExhaustiveDependencies: pre-biome code
       useEffect(() => {
         if (!disabled) {
           return
@@ -137,12 +140,7 @@ export const JoggingCartesianAxisControl = externalizeComponent(
       }
 
       return (
-        <Stack
-          height="64px"
-          direction="row"
-          justifyContent="center"
-          {...rest}
-        >
+        <Stack height="64px" direction="row" justifyContent="center" {...rest}>
           <IconButton
             disabled={disabled}
             disableRipple

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -1,11 +1,8 @@
-import {
-  Divider,
-  Stack,
-  ToggleButton,
-  Typography,
-  useTheme,
-  type Theme,
-} from "@mui/material"
+import { useTheme, type Theme } from "@mui/material/styles"
+import Divider from "@mui/material/Divider"
+import Stack from "@mui/material/Stack"
+import ToggleButton from "@mui/material/ToggleButton"
+import Typography from "@mui/material/Typography"
 import {
   degreesToRadians,
   radiansToDegrees,
@@ -65,6 +62,7 @@ export const JoggingCartesianTab = observer(
           ),
         )
       },
+      // biome-ignore lint/suspicious/noExplicitAny: pre-biome code
       { fireImmediately: true } as any,
     )
 

package/src/components/jogging/JoggingFreedriveTab.tsx

@@ -1,5 +1,4 @@
-import { Stack } from "@mui/material"
-
+import Stack from "@mui/material/Stack"
 export const JoggingFreedriveTab = () => {
   return (
     <Stack height={"300px"} alignItems={"center"} justifyContent={"center"}>

package/src/components/jogging/JoggingJointLimitDetector.tsx

@@ -1,4 +1,4 @@
-import { Typography } from "@mui/material"
+import Typography from "@mui/material/Typography"
 import { observer } from "mobx-react-lite"
 import isEqual from "lodash-es/isEqual"
 import { useRef, useState } from "react"
@@ -10,50 +10,48 @@ import type { JoggingStore } from "./JoggingStore"
  * Monitors the active robot motion state and displays a message if
  * any joint limits are reached.
  */
-export const JoggingJointLimitDetector = observer(({
-  store,
-}: {
-  store: JoggingStore
-}) => {
-  const { t } = useTranslation()
+export const JoggingJointLimitDetector = observer(
+  ({ store }: { store: JoggingStore }) => {
+    const { t } = useTranslation()
 
-  const [jointLimitsReached, setJointLimitsReached] = useState(
-    store.jogger.motionStream.rapidlyChangingMotionState
-      .joint_limit_reached.limit_reached,
-  )
-  const jointLimitsReachedRef = useRef(jointLimitsReached)
+    const [jointLimitsReached, setJointLimitsReached] = useState(
+      store.jogger.motionStream.rapidlyChangingMotionState.joint_limit_reached
+        .limit_reached,
+    )
+    const jointLimitsReachedRef = useRef(jointLimitsReached)
 
-  useAnimationFrame(() => {
-    const newLimitsReached =
-      store.jogger.motionStream.rapidlyChangingMotionState
-        .joint_limit_reached.limit_reached
+    useAnimationFrame(() => {
+      const newLimitsReached =
+        store.jogger.motionStream.rapidlyChangingMotionState.joint_limit_reached
+          .limit_reached
 
-    if (!isEqual(jointLimitsReachedRef.current, newLimitsReached)) {
-      jointLimitsReachedRef.current = newLimitsReached
-      setJointLimitsReached(newLimitsReached)
-    }
-  })
+      if (!isEqual(jointLimitsReachedRef.current, newLimitsReached)) {
+        jointLimitsReachedRef.current = newLimitsReached
+        setJointLimitsReached(newLimitsReached)
+      }
+    })
 
-  const jointLimitReachedIndices: number[] = []
-  for (const [index, limitReached] of jointLimitsReached.entries()) {
-    if (limitReached) jointLimitReachedIndices.push(index)
-  }
+    const jointLimitReachedIndices: number[] = []
+    for (const [index, limitReached] of jointLimitsReached.entries()) {
+      if (limitReached) jointLimitReachedIndices.push(index)
+    }
 
-  return (
-    <Typography
-      data-testid="jogging-joint-limit-detector"
-      aria-label="jogging-joint-limit-detector"
-      color="error"
-      sx={{
-        margin: "0.5rem 1rem",
-        textAlign: "center",
-        minHeight: "1.5rem",
-        visibility: jointLimitReachedIndices.length ? "visible" : "hidden",
-      }}
-    >
-      {t("Jogging.JointLimitsReached.lb", {
-        jointNumbers: jointLimitReachedIndices.map((i) => i + 1).join(", "),
-      })}
-    </Typography>
-  )
-})
+    return (
+      <Typography
+        data-testid="jogging-joint-limit-detector"
+        aria-label="jogging-joint-limit-detector"
+        color="error"
+        sx={{
+          margin: "0.5rem 1rem",
+          textAlign: "center",
+          minHeight: "1.5rem",
+          visibility: jointLimitReachedIndices.length ? "visible" : "hidden",
+        }}
+      >
+        {t("Jogging.JointLimitsReached.lb", {
+          jointNumbers: jointLimitReachedIndices.map((i) => i + 1).join(", "),
+        })}
+      </Typography>
+    )
+  },
+)

package/src/components/jogging/JoggingJointTab.tsx

@@ -1,19 +1,21 @@
-import { Divider, Stack, Typography, useTheme } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import Divider from "@mui/material/Divider"
+import Stack from "@mui/material/Stack"
+import Typography from "@mui/material/Typography"
+import { JointTypeEnum } from "@wandelbots/nova-js/v2"
 import { observer } from "mobx-react-lite"
 import type { ReactNode } from "react"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
 import { JoggingJointValueControl } from "./JoggingJointValueControl"
-import { type JoggingStore } from "./JoggingStore"
+import type { JoggingStore } from "./JoggingStore"
 import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
-import { JointTypeEnum } from "@wandelbots/nova-js/v2"
-
 
 export const JoggingJointTab = observer(
-  ({ store, children }: { store: JoggingStore; children: ReactNode }) => {
+  ({ store, children }: { store: JoggingStore; children?: ReactNode }) => {
     const theme = useTheme()
     async function startJointJogging(opts: {
       joint: number
-      direction: "-" | "+",
+      direction: "-" | "+"
     }) {
       await store.activate()
 
@@ -21,14 +23,11 @@ export const JoggingJointTab = observer(
         joint: opts.joint,
         direction: opts.direction,
         velocityUnit:
-          store.jointType === JointTypeEnum.PrismaticJoint
-            ? "mm/s"
-            : "rad/s",
+          store.jointType === JointTypeEnum.PrismaticJoint ? "mm/s" : "rad/s",
         velocityValue:
           store.jointType === JointTypeEnum.PrismaticJoint
             ? store.translationVelocityMmPerSec
             : store.rotationVelocityRadsPerSec,
-
       })
     }
 
@@ -47,9 +46,7 @@ export const JoggingJointTab = observer(
       >
         <JoggingVelocitySlider
           store={store}
-          useDegree={
-            store.jointType === JointTypeEnum.RevoluteJoint
-          }
+          useDegree={store.jointType === JointTypeEnum.RevoluteJoint}
         />
 
         <Divider />
@@ -97,17 +94,12 @@ export const JoggingJointTab = observer(
                     disabled={store.isLocked}
                     lowerLimit={jointLimits?.lower_limit}
                     upperLimit={jointLimits?.upper_limit}
-                    useDegree={
-                      store.jointType === JointTypeEnum.RevoluteJoint
-                    }
-
+                    useDegree={store.jointType === JointTypeEnum.RevoluteJoint}
                     getValue={() => {
                       const value =
                         store.jogger.motionStream.rapidlyChangingMotionState
                           .joint_position[joint.index]
-                      return value !== undefined
-                        ? value
-                        : undefined
+                      return value !== undefined ? value : undefined
                     }}
                     startJogging={(direction: "-" | "+") =>
                       startJointJogging({

package/src/components/jogging/JoggingJointValueControl.tsx

@@ -1,8 +1,11 @@
 import ChevronLeft from "@mui/icons-material/ChevronLeft"
 import ChevronRight from "@mui/icons-material/ChevronRight"
-import { radiansToDegrees } from "@wandelbots/nova-js"
-import { IconButton, Slider, Typography, useTheme } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import IconButton from "@mui/material/IconButton"
+import Slider from "@mui/material/Slider"
+import Typography from "@mui/material/Typography"
 import Stack from "@mui/material/Stack"
+import { radiansToDegrees } from "@wandelbots/nova-js"
 import throttle from "lodash-es/throttle"
 import { observer, useLocalObservable } from "mobx-react-lite"
 import { useState } from "react"
@@ -24,15 +27,15 @@ type JoggingJointValueControlProps = {
 export const JoggingJointValueControl = externalizeComponent(
   observer(
     ({
-       startJogging,
-       stopJogging,
-       lowerLimit,
-       upperLimit,
-       useDegree,
-       getValue,
-       disabled,
-       ...rest
-     }: JoggingJointValueControlProps) => {
+      startJogging,
+      stopJogging,
+      lowerLimit,
+      upperLimit,
+      useDegree,
+      getValue,
+      disabled,
+      ...rest
+    }: JoggingJointValueControlProps) => {
       const { t } = useTranslation()
       const [currentValue, setCurrentValue] = useState<number | undefined>()
       const theme = useTheme()
@@ -57,19 +60,23 @@ export const JoggingJointValueControl = externalizeComponent(
       }))
 
       const updateValue = throttle(() => {
-        const newValue =useDegree ? convertToDegree(getValue()) : getValue();
-        if(newValue === undefined || currentValue === undefined || Math.abs(currentValue - newValue) > 1e-9) {
+        const newValue = useDegree ? convertToDegree(getValue()) : getValue()
+        if (
+          newValue === undefined ||
+          currentValue === undefined ||
+          Math.abs(currentValue - newValue) > 1e-9
+        ) {
           setCurrentValue(newValue)
         }
       }, 50)
 
       useAnimationFrame(updateValue)
 
-      function convertToDegree(value: number| undefined){
-        if (value == undefined){
-          return undefined;
+      function convertToDegree(value: number | undefined) {
+        if (value === undefined) {
+          return undefined
         }
-        return radiansToDegrees(value);
+        return radiansToDegrees(value)
       }
 
       function onPointerDownMinus(ev: React.PointerEvent) {
@@ -90,7 +97,7 @@ export const JoggingJointValueControl = externalizeComponent(
       }
 
       function formatDegrees(value: number | undefined, precision = 1) {
-        if (value === undefined || isNaN(value)) return ""
+        if (value === undefined || Number.isNaN(value)) return ""
 
         const output = t("General.degree.variable", {
           amount: value.toFixed(precision),
@@ -103,7 +110,7 @@ export const JoggingJointValueControl = externalizeComponent(
         }
       }
       function formatMm(value: number | undefined, precision = 1) {
-        if (value === undefined || isNaN(value)) return ""
+        if (value === undefined || Number.isNaN(value)) return ""
 
         const output = t("General.mm.variable", {
           amount: value.toFixed(precision),
@@ -116,7 +123,6 @@ export const JoggingJointValueControl = externalizeComponent(
         }
       }
 
-
       return (
         <Stack
           height="64px"
@@ -164,8 +170,8 @@ export const JoggingJointValueControl = externalizeComponent(
               sx={{
                 pointerEvents: "none",
                 color:
-                theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
-                  ?.arrowColor,
+                  theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
+                    ?.arrowColor,
               }}
             />
           </IconButton>
@@ -206,8 +212,8 @@ export const JoggingJointValueControl = externalizeComponent(
             <Slider
               disabled
               aria-label="Joint position"
-              min={ useDegree ? convertToDegree(lowerLimit) : lowerLimit}
-              max={ useDegree ? convertToDegree(upperLimit) : upperLimit}
+              min={useDegree ? convertToDegree(lowerLimit) : lowerLimit}
+              max={useDegree ? convertToDegree(upperLimit) : upperLimit}
               value={currentValue || 0}
               track={false}
               sx={{
@@ -238,12 +244,20 @@ export const JoggingJointValueControl = externalizeComponent(
                 lowerLimit !== undefined &&
                 upperLimit !== undefined && [
                   {
-                    value: (useDegree ? convertToDegree(lowerLimit) : lowerLimit) as number,
-                    label: useDegree ? formatDegrees(convertToDegree(lowerLimit),0) : formatMm(lowerLimit),
+                    value: (useDegree
+                      ? convertToDegree(lowerLimit)
+                      : lowerLimit) as number,
+                    label: useDegree
+                      ? formatDegrees(convertToDegree(lowerLimit), 0)
+                      : formatMm(lowerLimit),
                   },
                   {
-                    value: (useDegree ? convertToDegree(upperLimit) : upperLimit) as number,
-                    label: useDegree ?  formatDegrees(convertToDegree(upperLimit),0) : formatMm(upperLimit),
+                    value: (useDegree
+                      ? convertToDegree(upperLimit)
+                      : upperLimit) as number,
+                    label: useDegree
+                      ? formatDegrees(convertToDegree(upperLimit), 0)
+                      : formatMm(upperLimit),
                   },
                 ]
               }
@@ -265,8 +279,8 @@ export const JoggingJointValueControl = externalizeComponent(
               sx={{
                 pointerEvents: "none",
                 color:
-                theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
-                  ?.arrowColor,
+                  theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
+                    ?.arrowColor,
               }}
             />
           </IconButton>