@wandelbots/wandelbots-js-react-components 2.27.1-pr.feature-update-to-react-19.361.57aba09 → 2.27.1-pr.feature-add-program-control-component.367.8730636

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.27.1-pr.feature-update-to-react-19.361.57aba09",
+  "version": "2.27.1-pr.feature-add-program-control-component.367.8730636",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -25,8 +25,6 @@
     "dev:wbjs": "nodemon --watch $WBJS_PATH -e tgz --exec 'npm install file:$WBJS_PATH && storybook dev -p 6006 --no-open'",
     "tsc": "tsc --pretty --noEmit -p stories/tsconfig.json",
     "test": "test-storybook --url http://127.0.0.1:6006 --index-json --browsers chromium",
-    "test:unit": "vitest",
-    "test:unit:run": "vitest run",
     "ci:test": "run-s ci:test:build ci:test:built",
     "ci:test:build": "storybook build --quiet --test",
     "ci:test:built": "run-p --race ci:test:server ci:test:runner",
@@ -50,44 +48,45 @@
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^7.1.1",
-    "@mui/material": "^7.1.1",
-    "@react-three/drei": "^10.2.0",
-    "@react-three/fiber": "^9.1.2",
+    "@mui/icons-material": "^6.4.1",
+    "@mui/material": "^6.4.0",
+    "@react-spring/three": "^9.7.5",
+    "@react-three/drei": "^9.122.0",
+    "@react-three/fiber": "^8.18.0",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-docs": "^9.0.8",
-    "@storybook/react-vite": "^9.0.8",
-    "@storybook/test-runner": "^0.23.0",
+    "@storybook/addon-docs": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/csf-tools": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/test-runner": "^0.21.3",
+    "@storybook/types": "^8.6.4",
     "@svgr/rollup": "^8.1.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^19.1.8",
+    "@types/react": "^18.3.12",
     "@types/three": "^0.174.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@wandelbots/nova-js": "^2.1.0",
+    "@wandelbots/nova-js": "^2.0.1",
     "add": "^2.0.6",
-    "eslint-plugin-storybook": "^9.0.8",
     "glob": "^11.0.1",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
-    "i18next": "^25.2.1",
     "jest-simple-dot-reporter": "^1.0.5",
     "jest-summary-reporter": "^0.0.2",
-    "jsdom": "^26.1.0",
-    "monaco-editor": "^0.52.2",
     "nodemon": "^3.1.9",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.5.3",
     "prettier-eslint": "^16.3.0",
     "prop-types": "^15.8.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
     "rollup": "^4.34.9",
     "rollup-plugin-dts": "^6.1.1",
@@ -95,7 +94,8 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.2.3",
-    "storybook": "^9.0.8",
+    "storybook": "^8.6.4",
+    "storybook-dark-mode": "^4.0.2",
     "storybook-preset-inline-svg": "^1.0.1",
     "three": "^0.174.0",
     "three-stdlib": "^2.35.14",
@@ -110,12 +110,11 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^6 || ^7",
-    "@mui/material": "^6 || ^7",
-    "@react-three/drei": "^9.122.0 || ^10",
-    "@react-three/fiber": "^8 || ^9",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
+    "@mui/icons-material": "^6",
+    "@mui/material": "^6",
+    "@react-spring/three": "^9",
+    "@react-three/drei": "^9.122.0",
+    "@react-three/fiber": "^8.18.0",
     "three": ">=0.174",
     "three-stdlib": ">=2"
   },
@@ -123,6 +122,9 @@
     "react-dom": {
       "optional": true
     },
+    "@react-spring/three": {
+      "optional": true
+    },
     "@react-three/drei": {
       "optional": true
     },
@@ -143,11 +145,8 @@
     "lodash-es": "^4.17.21",
     "mobx": "^6.13.6",
     "mobx-react-lite": "^4.1.0",
-    "react-error-boundary": "^6.0.0",
-    "react-i18next": "^15.5.2",
+    "react-error-boundary": "^5.0.0",
+    "react-i18next": "^15.4.1",
     "shiki": "^3.1.0"
-  },
-  "overrides": {
-    "storybook": "$storybook"
   }
 }

package/src/Setup.tsx

@@ -1,5 +1,5 @@
 import { OrbitControls } from "@react-three/drei"
-import { Canvas, type CanvasProps } from "@react-three/fiber"
+import { Canvas, type Props as CanvasProps } from "@react-three/fiber"
 import * as React from "react"
 import { Vector3 } from "three"
 import { PresetEnvironment } from "./components/3d-viewport/PresetEnvironment"

package/src/components/3d-viewport/SafetyZonesRenderer.tsx

@@ -1,4 +1,4 @@
-import { type ThreeElements } from "@react-three/fiber"
+import { type GroupProps } from "@react-three/fiber"
 import type { Geometry } from "@wandelbots/nova-api/v1"
 import type { SafetySetupSafetyZone } from "@wandelbots/nova-js/v1"
 import * as THREE from "three"
@@ -6,7 +6,7 @@ import { ConvexGeometry } from "three-stdlib"
 
 export type SafetyZonesRendererProps = {
   safetyZones: SafetySetupSafetyZone[]
-} & ThreeElements["group"]
+} & GroupProps
 
 interface CoplanarityResult {
   isCoplanar: boolean

package/src/components/3d-viewport/TrajectoryRenderer.tsx

@@ -4,7 +4,7 @@ import * as THREE from "three"
 
 export type TrajectoryRendererProps = {
   trajectory: GetTrajectoryResponse
-} & React.JSX.IntrinsicElements["group"]
+} & JSX.IntrinsicElements["group"]
 
 export function TrajectoryRenderer({
   trajectory,

package/src/components/ProgramControl.tsx

@@ -0,0 +1,217 @@
+import { Pause, PlayArrow, Stop } from "@mui/icons-material"
+import { Box, Button, Typography, useTheme } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../externalizeComponent"
+
+export type ProgramState = "idle" | "running" | "paused" | "stopping"
+
+export interface ProgramControlProps {
+  /** The current state of the program control */
+  state: ProgramState
+  /** Callback fired when the run/resume button is clicked */
+  onRun: () => void
+  /** Callback fired when the pause button is clicked (only available in 'with_pause' variant) */
+  onPause?: () => void
+  /** Callback fired when the stop button is clicked */
+  onStop: () => void
+  /**
+   * Function to reset the component from 'stopping' state back to 'idle'.
+   * This must be called manually by the user when requiresManualReset is true.
+   */
+  onReset?: () => void
+  /**
+   * When true, the component will stay in 'stopping' state until onReset is called manually.
+   * When false (default), auto-resets to 'idle' after 2 seconds.
+   */
+  requiresManualReset?: boolean
+  /**
+   * Variant of the component:
+   * - 'with_pause': Shows run/pause/stop buttons (default)
+   * - 'without_pause': Shows only run/stop buttons
+   */
+  variant?: "with_pause" | "without_pause"
+  /** Additional CSS class name */
+  className?: string
+}
+
+interface ButtonConfig {
+  enabled: boolean
+  label: string
+  color: string
+  onClick: () => void
+}
+
+/**
+ * A control component for program execution with run, pause, and stop functionality.
+ *
+ * Features:
+ * - State machine with idle, running, paused, and stopping states
+ * - Two variants: with_pause (3 buttons) and without_pause (2 buttons)
+ * - Optional manual reset functionality
+ * - Responsive design with 110px circular buttons
+ * - Material-UI theming integration
+ */
+export const ProgramControl = externalizeComponent(
+  observer(
+    ({
+      state,
+      onRun,
+      onPause,
+      onStop,
+      onReset,
+      requiresManualReset = false,
+      variant = "with_pause",
+      className,
+    }: ProgramControlProps) => {
+      const theme = useTheme()
+      const { t } = useTranslation()
+
+      const getButtonConfigs = (): ButtonConfig[] => {
+        const baseConfigs: Record<string, ButtonConfig> = {
+          run: {
+            enabled: state === "idle" || state === "paused",
+            label:
+              state === "paused"
+                ? t("ProgramControl.Resume.bt")
+                : t("ProgramControl.Run.bt"),
+            color: theme.palette.success.main,
+            onClick: onRun,
+          },
+          pause: {
+            enabled: state === "running",
+            label: t("ProgramControl.Pause.bt"),
+            color: "#FFFFFF33",
+            onClick: onPause || (() => {}),
+          },
+          stop: {
+            enabled: state === "running" || state === "paused",
+            label: t("ProgramControl.Stop.bt"),
+            color: theme.palette.error.main,
+            onClick: onStop,
+          },
+        }
+
+        if (variant === "without_pause") {
+          return [baseConfigs.run, baseConfigs.stop]
+        }
+
+        return [baseConfigs.run, baseConfigs.pause, baseConfigs.stop]
+      }
+
+      const getButtonIcon = (index: number) => {
+        const iconProps = { sx: { fontSize: "55px" } }
+
+        if (variant === "without_pause") {
+          return index === 0 ? (
+            <PlayArrow {...iconProps} />
+          ) : (
+            <Stop {...iconProps} />
+          )
+        }
+
+        switch (index) {
+          case 0:
+            return <PlayArrow {...iconProps} />
+          case 1:
+            return <Pause {...iconProps} />
+          case 2:
+            return <Stop {...iconProps} />
+          default:
+            return null
+        }
+      }
+
+      const buttonConfigs = getButtonConfigs()
+
+      return (
+        <Box
+          className={className}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 2,
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              gap: "40px",
+              flexWrap: "wrap",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            {buttonConfigs.map((config, index) => (
+              <Box
+                key={config.label}
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
+                }}
+              >
+                <Button
+                  variant="contained"
+                  disabled={
+                    !config.enabled ||
+                    (state === "stopping" && !requiresManualReset)
+                  }
+                  onClick={config.onClick}
+                  sx={{
+                    width: "110px",
+                    height: "110px",
+                    borderRadius: "110px",
+                    backgroundColor: config.color,
+                    opacity:
+                      config.enabled &&
+                      !(state === "stopping" && !requiresManualReset)
+                        ? 1
+                        : 0.3,
+                    "&:hover": {
+                      backgroundColor: config.color,
+                      opacity:
+                        config.enabled &&
+                        !(state === "stopping" && !requiresManualReset)
+                          ? 0.8
+                          : 0.3,
+                    },
+                    "&:disabled": {
+                      backgroundColor: config.color,
+                      opacity: 0.3,
+                    },
+                    minWidth: "110px",
+                    flexShrink: 0,
+                  }}
+                >
+                  {getButtonIcon(index)}
+                </Button>
+
+                <Typography
+                  variant="body1"
+                  sx={{
+                    color:
+                      config.enabled &&
+                      !(state === "stopping" && !requiresManualReset)
+                        ? config.color
+                        : theme.palette.text.disabled,
+                    textAlign: "center",
+                    opacity:
+                      config.enabled &&
+                      !(state === "stopping" && !requiresManualReset)
+                        ? 1
+                        : 0.3,
+                  }}
+                >
+                  {config.label}
+                </Typography>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      )
+    },
+  ),
+)

package/src/components/jogging/JoggingOptions.tsx

@@ -11,7 +11,7 @@ import {
 
 export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
   const { t } = useTranslation()
-  const joggingOptions: React.ReactElement[] = []
+  const joggingOptions = []
 
   function translateOrientation(orientation: OrientationId): string {
     switch (orientation) {

package/src/components/robots/DHRobot.tsx

@@ -1,6 +1,5 @@
 import { Line } from "@react-three/drei"
 import type { DHParameter } from "@wandelbots/nova-api/v1"
-import React, { useRef } from "react"
 import type * as THREE from "three"
 import { Matrix4, Quaternion, Vector3 } from "three"
 import type { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js"
@@ -18,16 +17,6 @@ export function DHRobot({
   // reused in every update
   const accumulatedMatrix = new Matrix4()
 
-  // Store direct references to avoid searching by name
-  const lineRefs = useRef<any[]>([])
-  const meshRefs = useRef<(THREE.Mesh | null)[]>([])
-
-  // Initialize refs array when dhParameters change
-  React.useEffect(() => {
-    lineRefs.current = new Array(dhParameters.length).fill(null)
-    meshRefs.current = new Array(dhParameters.length).fill(null)
-  }, [dhParameters.length])
-
   // Updates accumulatedMatrix with every execution
   // Reset the matrix to identity if you start a new position update
   function getLinePoints(
@@ -60,7 +49,7 @@ export function DHRobot({
 
   function setJointLineRotation(
     jointIndex: number,
-    line: any, // Use any for drei Line component
+    line: THREE.Line,
     mesh: THREE.Mesh,
     jointValue: number,
   ) {
@@ -82,20 +71,14 @@ export function DHRobot({
 
   function setRotation(joints: THREE.Object3D[], jointValues: number[]) {
     accumulatedMatrix.identity()
-
-    // Use direct refs instead of searching by name
-    for (
-      let jointIndex = 0;
-      jointIndex < Math.min(joints.length, jointValues.length);
-      jointIndex++
-    ) {
-      const line = lineRefs.current[jointIndex]
-      const mesh = meshRefs.current[jointIndex]
-
-      if (line && mesh) {
-        setJointLineRotation(jointIndex, line, mesh, jointValues[jointIndex]!)
-      }
-    }
+    joints.forEach((joint, jointIndex) => {
+      setJointLineRotation(
+        jointIndex,
+        joint.getObjectByName(CHILD_LINE) as THREE.Line,
+        joint.getObjectByName(CHILD_MESH) as THREE.Mesh,
+        jointValues[jointIndex]!,
+      )
+    })
   }
 
   return (
@@ -120,22 +103,12 @@ export function DHRobot({
             return (
               <group name={jointName} key={jointName}>
                 <Line
-                  ref={(ref) => {
-                    lineRefs.current[index] = ref
-                  }}
                   name={CHILD_LINE}
                   points={[a, b]}
                   color={"white"}
                   lineWidth={5}
                 />
-                <mesh
-                  ref={(ref) => {
-                    meshRefs.current[index] = ref
-                  }}
-                  name={CHILD_MESH}
-                  key={"mesh_" + index}
-                  position={b}
-                >
+                <mesh name={CHILD_MESH} key={"mesh_" + index} position={b}>
                   <sphereGeometry args={[0.01, 32, 32]} />
                   <meshStandardMaterial color={"black"} depthTest={true} />
                 </mesh>

package/src/components/robots/GenericRobot.tsx

@@ -1,5 +1,6 @@
+import { animated } from "@react-spring/three"
 import { useGLTF } from "@react-three/drei"
-import type { ThreeElements } from "@react-three/fiber"
+import type { GroupProps } from "@react-three/fiber"
 import React, { useCallback } from "react"
 import type { Group, Mesh } from "three"
 import { type Object3D } from "three"
@@ -13,7 +14,7 @@ export type RobotModelProps = {
    */
   postModelRender?: () => void
   flangeRef?: React.Ref<Group>
-} & ThreeElements["group"]
+} & GroupProps
 
 function isMesh(node: Object3D): node is Mesh {
   return node.type === "Mesh"
@@ -53,7 +54,7 @@ export function GenericRobot({
       )
     } else {
       return (
-        <group
+        <animated.group
           name={node.name}
           key={node.uuid}
           position={node.position}
@@ -61,7 +62,7 @@ export function GenericRobot({
           ref={isFlange(node) ? flangeRef : undefined}
         >
           {node.children.map(renderNode)}
-        </group>
+        </animated.group>
       )
     }
   }

package/src/components/robots/Robot.tsx

@@ -1,4 +1,4 @@
-import { type ThreeElements } from "@react-three/fiber"
+import { type GroupProps } from "@react-three/fiber"
 
 import type { ConnectedMotionGroup } from "@wandelbots/nova-js/v1"
 import type { Group } from "three"
@@ -10,7 +10,7 @@ export type RobotProps = {
   getModel?: (modelFromController: string) => string
   flangeRef?: React.Ref<Group>
   transparentColor?: string
-} & ThreeElements["group"]
+} & GroupProps
 
 /**
  * The Robot component is a wrapper around the SupportedRobot component

package/src/components/robots/RobotAnimator.tsx

@@ -1,12 +1,12 @@
-import { useFrame, useThree } from "@react-three/fiber"
+import { Globals, useSpring } from "@react-spring/three"
+import { useThree } from "@react-three/fiber"
 import type {
   DHParameter,
   MotionGroupStateResponse,
 } from "@wandelbots/nova-api/v1"
-import React, { useEffect, useRef } from "react"
+import React, { useRef } from "react"
 import type { Group, Object3D } from "three"
 import { useAutorun } from "../utils/hooks"
-import { ValueInterpolator } from "../utils/interpolation"
 import { collectJoints } from "./robotModelLogic"
 
 type RobotAnimatorProps = {
@@ -22,42 +22,11 @@ export default function RobotAnimator({
   onRotationChanged,
   children,
 }: RobotAnimatorProps) {
+  Globals.assign({ frameLoop: "always" })
   const jointValues = useRef<number[]>([])
   const jointObjects = useRef<Object3D[]>([])
-  const interpolatorRef = useRef<ValueInterpolator | null>(null)
   const { invalidate } = useThree()
 
-  // Initialize interpolator
-  useEffect(() => {
-    const initialJointValues =
-      rapidlyChangingMotionState.state.joint_position.joints.filter(
-        (item) => item !== undefined,
-      )
-
-    interpolatorRef.current = new ValueInterpolator(initialJointValues, {
-      tension: 120, // Controls spring stiffness - higher values create faster, more responsive motion
-      friction: 20, // Controls damping - higher values reduce oscillation and create smoother settling
-      threshold: 0.001,
-    })
-
-    return () => {
-      interpolatorRef.current?.destroy()
-    }
-  }, [])
-
-  // Animation loop that runs at the display's refresh rate
-  useFrame((state, delta) => {
-    if (interpolatorRef.current) {
-      const isComplete = interpolatorRef.current.update(delta)
-      setRotation()
-
-      // Trigger a re-render only if the animation is still running
-      if (!isComplete) {
-        invalidate()
-      }
-    }
-  })
-
   function setGroupRef(group: Group | null) {
     if (!group) return
 
@@ -70,11 +39,13 @@ export default function RobotAnimator({
 
   function updateJoints(newJointValues: number[]) {
     jointValues.current = newJointValues
-    interpolatorRef.current?.setTarget(newJointValues)
+    setSpring.start(Object.assign({}, jointValues.current) as any)
   }
 
   function setRotation() {
-    const updatedJointValues = interpolatorRef.current?.getCurrentValues() || []
+    const updatedJointValues = jointObjects.current.map((_, objectIndex) =>
+      (axisValues as any)[objectIndex].get(),
+    )
 
     if (onRotationChanged) {
       onRotationChanged(jointObjects.current, updatedJointValues)
@@ -85,7 +56,7 @@ export default function RobotAnimator({
         const rotationSign = dhParam.reverse_rotation_direction ? -1 : 1
 
         object.rotation.y =
-          rotationSign * (updatedJointValues[index] || 0) + rotationOffset
+          rotationSign * updatedJointValues[index]! + rotationOffset
       }
     }
   }
@@ -99,5 +70,19 @@ export default function RobotAnimator({
     requestAnimationFrame(() => updateJoints(newJointValues))
   })
 
+  const [axisValues, setSpring] = useSpring(() => ({
+    ...Object.assign(
+      {},
+      rapidlyChangingMotionState.state.joint_position.joints,
+    ),
+    onChange: () => {
+      setRotation()
+      invalidate()
+    },
+    onResolve: () => {
+      setRotation()
+    },
+  }))
+
   return <group ref={setGroupRef}>{children}</group>
 }

package/src/components/robots/SupportedRobot.tsx

@@ -1,4 +1,4 @@
-import type { ThreeElements } from "@react-three/fiber"
+import type { GroupProps } from "@react-three/fiber"
 import type {
   DHParameter,
   MotionGroupStateResponse,
@@ -18,7 +18,7 @@ import { defaultGetModel } from "./robotModelLogic"
 export type DHRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
   dhParameters: Array<DHParameter>
-} & ThreeElements["group"]
+} & GroupProps
 
 export type SupportedRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
@@ -28,7 +28,7 @@ export type SupportedRobotProps = {
   getModel?: (modelFromController: string) => string
   postModelRender?: () => void
   transparentColor?: string
-} & ThreeElements["group"]
+} & GroupProps
 
 export const SupportedRobot = externalizeComponent(
   ({

package/src/components/utils/converters.ts

@@ -20,4 +20,4 @@ export function tryStringifyJson(json: unknown): string | undefined {
   } catch {
     return undefined
   }
-}
+}

package/src/externalizeComponent.tsx

@@ -7,7 +7,7 @@ import { i18n } from "./i18n/config"
  * be provided by the user application; this wrapper ensures
  * they can be used either way.
  */
-export function externalizeComponent<T extends React.JSX.ElementType>(
+export function externalizeComponent<T extends JSX.ElementType>(
   Component: T,
 ): T {
   const WrappedComponent = ((props: T) => (