@wandelbots/wandelbots-js-react-components 2.27.1 → 2.28.0-pr.feature-add-program-control-component.367.28afd72

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.27.1",
+  "version": "2.28.0-pr.feature-add-program-control-component.367.28afd72",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -25,6 +25,8 @@
     "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 --workspace vitest.workspace.ts --project unit",
+    "test:unit:run": "vitest run --workspace vitest.workspace.ts --project unit",
     "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",
@@ -48,45 +50,44 @@
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@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",
+    "@mui/icons-material": "^7.1.1",
+    "@mui/material": "^7.1.1",
+    "@react-three/drei": "^10.2.0",
+    "@react-three/fiber": "^9.1.2",
     "@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": "^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",
+    "@storybook/addon-docs": "^9.0.8",
+    "@storybook/react-vite": "^9.0.8",
+    "@storybook/test-runner": "^0.23.0",
     "@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": "^18.3.12",
+    "@types/react": "^19.1.8",
     "@types/three": "^0.174.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@wandelbots/nova-js": "^2.0.1",
+    "@wandelbots/nova-js": "^2.1.0",
     "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": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.34.9",
     "rollup-plugin-dts": "^6.1.1",
@@ -94,8 +95,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.2.3",
-    "storybook": "^8.6.4",
-    "storybook-dark-mode": "^4.0.2",
+    "storybook": "^9.0.8",
     "storybook-preset-inline-svg": "^1.0.1",
     "three": "^0.174.0",
     "three-stdlib": "^2.35.14",
@@ -110,11 +110,12 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^6",
-    "@mui/material": "^6",
-    "@react-spring/three": "^9",
-    "@react-three/drei": "^9.122.0",
-    "@react-three/fiber": "^8.18.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",
     "three": ">=0.174",
     "three-stdlib": ">=2"
   },
@@ -122,9 +123,6 @@
     "react-dom": {
       "optional": true
     },
-    "@react-spring/three": {
-      "optional": true
-    },
     "@react-three/drei": {
       "optional": true
     },
@@ -145,8 +143,11 @@
     "lodash-es": "^4.17.21",
     "mobx": "^6.13.6",
     "mobx-react-lite": "^4.1.0",
-    "react-error-boundary": "^5.0.0",
-    "react-i18next": "^15.4.1",
+    "react-error-boundary": "^6.0.0",
+    "react-i18next": "^15.5.2",
     "shiki": "^3.1.0"
+  },
+  "overrides": {
+    "storybook": "$storybook"
   }
 }

package/src/Setup.tsx

@@ -1,5 +1,5 @@
 import { OrbitControls } from "@react-three/drei"
-import { Canvas, type Props as CanvasProps } from "@react-three/fiber"
+import { Canvas, type 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 GroupProps } from "@react-three/fiber"
+import { type ThreeElements } 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[]
-} & GroupProps
+} & ThreeElements["group"]
 
 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
-} & JSX.IntrinsicElements["group"]
+} & React.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.Start.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 = []
+  const joggingOptions: React.ReactElement[] = []
 
   function translateOrientation(orientation: OrientationId): string {
     switch (orientation) {

package/src/components/robots/DHRobot.tsx

@@ -1,5 +1,6 @@
 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"
@@ -17,6 +18,16 @@ 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(
@@ -49,7 +60,7 @@ export function DHRobot({
 
   function setJointLineRotation(
     jointIndex: number,
-    line: THREE.Line,
+    line: any, // Use any for drei Line component
     mesh: THREE.Mesh,
     jointValue: number,
   ) {
@@ -71,14 +82,20 @@ export function DHRobot({
 
   function setRotation(joints: THREE.Object3D[], jointValues: number[]) {
     accumulatedMatrix.identity()
-    joints.forEach((joint, jointIndex) => {
-      setJointLineRotation(
-        jointIndex,
-        joint.getObjectByName(CHILD_LINE) as THREE.Line,
-        joint.getObjectByName(CHILD_MESH) as THREE.Mesh,
-        jointValues[jointIndex]!,
-      )
-    })
+
+    // 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]!)
+      }
+    }
   }
 
   return (
@@ -103,12 +120,22 @@ 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 name={CHILD_MESH} key={"mesh_" + index} position={b}>
+                <mesh
+                  ref={(ref) => {
+                    meshRefs.current[index] = ref
+                  }}
+                  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,6 +1,5 @@
-import { animated } from "@react-spring/three"
 import { useGLTF } from "@react-three/drei"
-import type { GroupProps } from "@react-three/fiber"
+import type { ThreeElements } from "@react-three/fiber"
 import React, { useCallback } from "react"
 import type { Group, Mesh } from "three"
 import { type Object3D } from "three"
@@ -14,7 +13,7 @@ export type RobotModelProps = {
    */
   postModelRender?: () => void
   flangeRef?: React.Ref<Group>
-} & GroupProps
+} & ThreeElements["group"]
 
 function isMesh(node: Object3D): node is Mesh {
   return node.type === "Mesh"
@@ -54,7 +53,7 @@ export function GenericRobot({
       )
     } else {
       return (
-        <animated.group
+        <group
           name={node.name}
           key={node.uuid}
           position={node.position}
@@ -62,7 +61,7 @@ export function GenericRobot({
           ref={isFlange(node) ? flangeRef : undefined}
         >
           {node.children.map(renderNode)}
-        </animated.group>
+        </group>
       )
     }
   }

package/src/components/robots/Robot.tsx

@@ -1,4 +1,4 @@
-import { type GroupProps } from "@react-three/fiber"
+import { type ThreeElements } 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
-} & GroupProps
+} & ThreeElements["group"]
 
 /**
  * The Robot component is a wrapper around the SupportedRobot component

package/src/components/robots/RobotAnimator.test.tsx

@@ -0,0 +1,113 @@
+import type {
+  DHParameter,
+  MotionGroupStateResponse,
+} from "@wandelbots/nova-api/v1"
+import { describe, expect, it, vi } from "vitest"
+import RobotAnimator from "./RobotAnimator"
+
+// Mock the dependencies
+vi.mock("./robotModelLogic", () => ({
+  collectJoints: vi.fn(),
+}))
+
+vi.mock("../utils/interpolation", () => ({
+  ValueInterpolator: vi.fn().mockImplementation(() => ({
+    setTarget: vi.fn(),
+    getCurrentValues: vi.fn(() => []),
+    destroy: vi.fn(),
+  })),
+}))
+
+describe("RobotAnimator", () => {
+  it("should export the component correctly", () => {
+    expect(RobotAnimator).toBeDefined()
+    expect(typeof RobotAnimator).toBe("function")
+  })
+
+  it("should handle props with different numbers of joints", () => {
+    // Test that the component accepts different numbers of DH parameters
+    const mockMotionState4Joints: MotionGroupStateResponse = {
+      state: {
+        joint_position: {
+          joints: [0.1, 0.2, 0.3, 0.4],
+        },
+      },
+    } as any
+
+    const mockDHParameters4Joints: DHParameter[] = [
+      { theta: 0, reverse_rotation_direction: false },
+      { theta: 0, reverse_rotation_direction: false },
+      { theta: 0, reverse_rotation_direction: false },
+      { theta: 0, reverse_rotation_direction: false },
+    ]
+
+    const mockMotionState7Joints: MotionGroupStateResponse = {
+      state: {
+        joint_position: {
+          joints: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7],
+        },
+      },
+    } as any
+
+    const mockDHParameters7Joints: DHParameter[] = Array(7).fill({
+      theta: 0,
+      reverse_rotation_direction: false,
+    })
+
+    // These should not throw TypeScript errors
+    expect(() => {
+      const props4 = {
+        rapidlyChangingMotionState: mockMotionState4Joints,
+        dhParameters: mockDHParameters4Joints,
+        children: null,
+      }
+      // Verify props are correctly typed
+      expect(props4.dhParameters).toHaveLength(4)
+      expect(
+        props4.rapidlyChangingMotionState.state.joint_position.joints,
+      ).toHaveLength(4)
+    }).not.toThrow()
+
+    expect(() => {
+      const props7 = {
+        rapidlyChangingMotionState: mockMotionState7Joints,
+        dhParameters: mockDHParameters7Joints,
+        children: null,
+      }
+      expect(props7.dhParameters).toHaveLength(7)
+      expect(
+        props7.rapidlyChangingMotionState.state.joint_position.joints,
+      ).toHaveLength(7)
+    }).not.toThrow()
+  })
+
+  it("should use custom interpolation for smooth value transitions", () => {
+    // Test the rotation calculation logic
+    const dhParam1 = { theta: 0.1, reverse_rotation_direction: false }
+    const dhParam2 = { theta: -0.2, reverse_rotation_direction: true }
+    const jointValue1 = 0.5
+    const jointValue2 = 1.0
+
+    // Calculate expected rotations
+    const expectedRotation1 = 1 * jointValue1 + 0.1 // 0.6
+    const expectedRotation2 = -1 * jointValue2 + -0.2 // -1.2
+
+    expect(expectedRotation1).toBe(0.6)
+    expect(expectedRotation2).toBe(-1.2)
+
+    // Test edge cases
+    const dhParamReverse = { theta: 0, reverse_rotation_direction: true }
+    const jointValueZero = 0
+    const expectedRotationReverse = -1 * jointValueZero + 0 // 0
+
+    expect(expectedRotationReverse).toBe(0)
+
+    // Test rotation direction logic
+    const testValue = 1.5
+    const normalParam = { theta: 0, reverse_rotation_direction: false }
+    const reversedParam = { theta: 0, reverse_rotation_direction: true }
+
+    expect(1 * testValue + 0).toBe(1.5) // Normal direction
+    expect(-1 * testValue + 0).toBe(-1.5) // Reversed direction
+  })
+})