@wandelbots/wandelbots-js-react-components 2.12.0 → 2.13.0-pr.feature-switch-to-nova-js.277.9e225d8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.12.0",
+  "version": "2.13.0-pr.feature-switch-to-nova-js.277.9e225d8",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -55,20 +55,20 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-docs": "^8.6.2",
-    "@storybook/addon-essentials": "^8.6.2",
-    "@storybook/addon-interactions": "^8.6.2",
-    "@storybook/blocks": "^8.6.2",
-    "@storybook/react": "^8.6.2",
-    "@storybook/csf-tools": "^8.6.2",
-    "@storybook/react-vite": "^8.6.2",
-    "@storybook/test": "^8.6.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/react": "^8.6.4",
+    "@storybook/csf-tools": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/test": "^8.6.4",
     "@storybook/test-runner": "^0.21.3",
-    "@storybook/types": "^8.6.2",
+    "@storybook/types": "^8.6.4",
     "@svgr/rollup": "^8.1.0",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.12",
-    "@types/three": "^0.173.0",
+    "@types/three": "^0.174.0",
     "@vitejs/plugin-react": "^4.3.4",
     "add": "^2.0.6",
     "glob": "^11.0.1",
@@ -84,23 +84,23 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.34.8",
+    "rollup": "^4.34.9",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-gltf": "^4.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.2.3",
-    "storybook": "^8.6.2",
+    "storybook": "^8.6.4",
     "storybook-dark-mode": "^4.0.2",
     "storybook-preset-inline-svg": "^1.0.1",
     "ts-dedent": "^2.2.0",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
     "unplugin": "^1.15.0",
     "vite": "~6.2.0",
     "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.0.7",
     "wait-on": "^8.0.2",
-    "@wandelbots/wandelbots-js": "^1.17.1"
+    "@wandelbots/nova-js": "^2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",

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

@@ -1,6 +1,6 @@
-import type { CoordinateSystem } from "@wandelbots/wandelbots-api-client"
+import type { CoordinateSystem } from "@wandelbots/nova-js/v1"
 import type { ReactNode } from "react"
-import { Vector3, Quaternion } from "three"
+import { Quaternion, Vector3 } from "three"
 
 /**
  * Applies a API coordinate system transformation to

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

@@ -1,6 +1,5 @@
 import { type GroupProps } from "@react-three/fiber"
-import type { Geometry } from "@wandelbots/wandelbots-api-client"
-import type { SafetySetupSafetyZone } from "@wandelbots/wandelbots-js"
+import type { Geometry, SafetySetupSafetyZone } from "@wandelbots/nova-js/v1"
 import * as THREE from "three"
 import { ConvexGeometry } from "three-stdlib"
 

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

@@ -1,5 +1,5 @@
 import { Line } from "@react-three/drei"
-import type { GetTrajectoryResponse } from "@wandelbots/wandelbots-js"
+import type { GetTrajectoryResponse } from "@wandelbots/nova-js/v1"
 import * as THREE from "three"
 
 export type TrajectoryRendererProps = {

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -5,7 +5,7 @@ import {
   Typography,
   useTheme,
 } from "@mui/material"
-import { degreesToRadians, radiansToDegrees } from "@wandelbots/wandelbots-js"
+import { degreesToRadians, radiansToDegrees } from "@wandelbots/nova-js"
 import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import XAxisIcon from "../../icons/axis-x.svg"

package/src/components/jogging/JoggingJointTab.tsx

@@ -1,5 +1,5 @@
 import { Divider, Stack } from "@mui/material"
-import { radiansToDegrees } from "@wandelbots/wandelbots-js"
+import { radiansToDegrees } from "@wandelbots/nova-js"
 import { observer } from "mobx-react-lite"
 import type { ReactNode } from "react"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"

package/src/components/jogging/JoggingPanel.tsx

@@ -1,5 +1,5 @@
 import { Stack, Tab, Tabs, type SxProps } from "@mui/material"
-import { NovaClient } from "@wandelbots/wandelbots-js"
+import { NovaClient } from "@wandelbots/nova-js/v1"
 import { isString } from "lodash-es"
 import { runInAction } from "mobx"
 import { observer, useLocalObservable } from "mobx-react-lite"

package/src/components/jogging/JoggingStore.ts

@@ -1,10 +1,10 @@
+import { tryParseJson } from "@wandelbots/nova-js"
 import type {
   CoordinateSystem,
   JoggerConnection,
   MotionGroupSpecification,
   RobotTcp,
-} from "@wandelbots/wandelbots-js"
-import { tryParseJson } from "@wandelbots/wandelbots-js"
+} from "@wandelbots/nova-js/v1"
 import { countBy } from "lodash-es"
 import keyBy from "lodash-es/keyBy"
 import uniqueId from "lodash-es/uniqueId"

package/src/components/jogging/PoseCartesianValues.tsx

@@ -1,6 +1,6 @@
 import { Stack } from "@mui/material"
-import type { MotionStreamConnection } from "@wandelbots/wandelbots-js"
-import { poseToWandelscriptString } from "@wandelbots/wandelbots-js"
+import { poseToWandelscriptString } from "@wandelbots/nova-js"
+import type { MotionStreamConnection } from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
 import { useRef } from "react"
 import { CopyableText } from "../CopyableText"

package/src/components/jogging/PoseJointValues.tsx

@@ -1,5 +1,5 @@
 import { Stack } from "@mui/material"
-import type { MotionStreamConnection } from "@wandelbots/wandelbots-js"
+import type { MotionStreamConnection } from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
 import { useRef } from "react"
 import { CopyableText } from "../CopyableText"

package/src/components/robots/DHRobot.tsx

@@ -1,5 +1,5 @@
 import { Line } from "@react-three/drei"
-import type { DHParameter } from "@wandelbots/wandelbots-api-client"
+import type { DHParameter } from "@wandelbots/nova-js/v1"
 import type * as THREE from "three"
 import { Matrix4, Quaternion, Vector3 } from "three"
 import type { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js"

package/src/components/robots/Robot.tsx

@@ -1,6 +1,6 @@
 import { type GroupProps } from "@react-three/fiber"
 
-import type { ConnectedMotionGroup } from "@wandelbots/wandelbots-js"
+import type { ConnectedMotionGroup } from "@wandelbots/nova-js/v1"
 import type { Group } from "three"
 import { SupportedRobot } from "./SupportedRobot"
 import { defaultGetModel } from "./robotModelLogic"

package/src/components/robots/RobotAnimator.tsx

@@ -3,7 +3,7 @@ import { useThree } from "@react-three/fiber"
 import type {
   DHParameter,
   MotionGroupStateResponse,
-} from "@wandelbots/wandelbots-api-client"
+} from "@wandelbots/nova-js/v1"
 import React, { useRef } from "react"
 import type { Group, Object3D } from "three"
 import { useAutorun } from "../utils/hooks"

package/src/components/robots/SupportedRobot.tsx

@@ -2,7 +2,7 @@ import type { GroupProps } from "@react-three/fiber"
 import type {
   DHParameter,
   MotionGroupStateResponse,
-} from "@wandelbots/wandelbots-api-client"
+} from "@wandelbots/nova-js/v1"
 import { Suspense, useCallback, useEffect, useState } from "react"
 import { DHRobot } from "./DHRobot"
 

package/src/components/safetyBar/ControllerTypeIndicator.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material"
+import { useTheme, type PopoverOrigin } from "@mui/material"
 import { observer } from "mobx-react-lite"
 import { Trans, useTranslation } from "react-i18next"
 import ControllerTypePhysicalIcon from "./icons/controller-type-physical.svg"
@@ -8,10 +8,17 @@ import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
 interface ControllerTypeIndicatorProps {
   isVirtual: boolean
   motionGroupId: string
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
 }
 
 export const ControllerTypeIndicator = observer(
-  ({ isVirtual, motionGroupId }: ControllerTypeIndicatorProps) => {
+  ({
+    isVirtual,
+    motionGroupId,
+    anchorOrigin,
+    transformOrigin,
+  }: ControllerTypeIndicatorProps) => {
     const theme = useTheme()
     const { t } = useTranslation()
 
@@ -34,6 +41,8 @@ export const ControllerTypeIndicator = observer(
               without special safety precautions.
             </Trans>
           }
+          anchorOrigin={anchorOrigin}
+          transformOrigin={transformOrigin}
         />
       )
     }
@@ -53,6 +62,8 @@ export const ControllerTypeIndicator = observer(
             components={{ code: <code />, strong: <strong /> }}
           />
         }
+        anchorOrigin={anchorOrigin}
+        transformOrigin={transformOrigin}
       />
     )
   },

package/src/components/safetyBar/IndicatorWithExplanation.tsx

@@ -3,6 +3,7 @@ import {
   Stack,
   SvgIcon,
   Typography,
+  type PopoverOrigin,
   type TypographyProps,
 } from "@mui/material"
 import { observer, useLocalObservable } from "mobx-react-lite"
@@ -16,6 +17,8 @@ export type IndicatorWithExplanationProps = {
   name: ReactNode
   explanation: ReactNode
   literalValue?: string
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
 }
 
 export const IndicatorWithExplanation = observer(
@@ -27,6 +30,8 @@ export const IndicatorWithExplanation = observer(
     name,
     explanation,
     literalValue,
+    anchorOrigin,
+    transformOrigin,
   }: IndicatorWithExplanationProps) => {
     const state = useLocalObservable(() => ({
       anchorEl: null as HTMLElement | null,
@@ -69,14 +74,18 @@ export const IndicatorWithExplanation = observer(
           }}
           open={state.isPopoverOpen}
           anchorEl={state.anchorEl}
-          anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "left",
-          }}
-          transformOrigin={{
-            vertical: "top",
-            horizontal: "left",
-          }}
+          anchorOrigin={
+            anchorOrigin ?? {
+              vertical: "bottom",
+              horizontal: "left",
+            }
+          }
+          transformOrigin={
+            transformOrigin ?? {
+              vertical: "top",
+              horizontal: "left",
+            }
+          }
           onClose={state.closePopover}
           disableRestoreFocus
         >

package/src/components/safetyBar/OperationModeIndicator.tsx

@@ -1,5 +1,5 @@
-import { useTheme } from "@mui/material"
-import type { RobotControllerStateOperationModeEnum } from "@wandelbots/wandelbots-js"
+import { useTheme, type PopoverOrigin } from "@mui/material"
+import type { RobotControllerStateOperationModeEnum } from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
 import { Trans, useTranslation } from "react-i18next"
 import OperationModeAutomaticIcon from "./icons/operation-mode-automatic.svg"
@@ -9,10 +9,16 @@ import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
 
 interface OperationModeIndicatorProps {
   operationMode: RobotControllerStateOperationModeEnum
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
 }
 
 export const OperationModeIndicator = observer(
-  ({ operationMode }: OperationModeIndicatorProps) => {
+  ({
+    operationMode,
+    anchorOrigin,
+    transformOrigin,
+  }: OperationModeIndicatorProps) => {
     const { t } = useTranslation()
     const theme = useTheme()
 
@@ -31,6 +37,8 @@ export const OperationModeIndicator = observer(
                 movement without manual confirmation is possible in this mode.
               </Trans>
             }
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
       case "OPERATION_MODE_MANUAL":
@@ -51,6 +59,8 @@ export const OperationModeIndicator = observer(
               </Trans>
             }
             literalValue={operationMode}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
       }
@@ -69,6 +79,8 @@ export const OperationModeIndicator = observer(
               </Trans>
             }
             literalValue={operationMode}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
     }

package/src/components/safetyBar/SafetyBar.tsx

@@ -1,8 +1,8 @@
-import { Divider, Stack } from "@mui/material"
+import { Divider, Stack, type PopoverOrigin } from "@mui/material"
 import type {
   RobotControllerStateOperationModeEnum,
   RobotControllerStateSafetyStateEnum,
-} from "@wandelbots/wandelbots-js"
+} from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
 import { externalizeComponent } from "../../externalizeComponent"
 import { ControllerTypeIndicator } from "./ControllerTypeIndicator"
@@ -14,6 +14,8 @@ export interface SafetyBarProps {
   motionGroupId: string
   operationMode: RobotControllerStateOperationModeEnum
   safetyState: RobotControllerStateSafetyStateEnum
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
 }
 
 export const SafetyBar = externalizeComponent(
@@ -25,17 +27,27 @@ export const SafetyBar = externalizeComponent(
         alignItems="center"
         sx={{ height: "24px" }}
       >
-        <SafetyStateIndicator safetyState={props.safetyState} />
+        <SafetyStateIndicator
+          safetyState={props.safetyState}
+          anchorOrigin={props.anchorOrigin}
+          transformOrigin={props.transformOrigin}
+        />
 
         <Divider orientation="vertical" flexItem />
 
-        <OperationModeIndicator operationMode={props.operationMode} />
+        <OperationModeIndicator
+          operationMode={props.operationMode}
+          anchorOrigin={props.anchorOrigin}
+          transformOrigin={props.transformOrigin}
+        />
 
         <Divider orientation="vertical" flexItem />
 
         <ControllerTypeIndicator
           isVirtual={props.isVirtual}
           motionGroupId={props.motionGroupId}
+          anchorOrigin={props.anchorOrigin}
+          transformOrigin={props.transformOrigin}
         />
       </Stack>
     )

package/src/components/safetyBar/SafetyStateIndicator.tsx

@@ -1,5 +1,5 @@
-import { useTheme } from "@mui/material"
-import type { RobotControllerStateSafetyStateEnum } from "@wandelbots/wandelbots-js"
+import { useTheme, type PopoverOrigin } from "@mui/material"
+import type { RobotControllerStateSafetyStateEnum } from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
 import { Trans, useTranslation } from "react-i18next"
 import { assertUnreachable } from "../utils/errorHandling"
@@ -12,10 +12,16 @@ import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
 
 interface SafetyStateIndicatorProps {
   safetyState: RobotControllerStateSafetyStateEnum
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
 }
 
 export const SafetyStateIndicator = observer(
-  ({ safetyState }: SafetyStateIndicatorProps) => {
+  ({
+    safetyState,
+    anchorOrigin,
+    transformOrigin,
+  }: SafetyStateIndicatorProps) => {
     const { t } = useTranslation()
     const theme = useTheme()
 
@@ -35,6 +41,8 @@ export const SafetyStateIndicator = observer(
                 not prevented by this state.
               </Trans>
             }
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
 
@@ -56,6 +64,8 @@ export const SafetyStateIndicator = observer(
               </Trans>
             }
             literalValue={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
 
@@ -79,6 +89,8 @@ export const SafetyStateIndicator = observer(
               </Trans>
             }
             literalValue={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
 
@@ -103,6 +115,8 @@ export const SafetyStateIndicator = observer(
               </Trans>
             }
             literalValue={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
 
@@ -122,6 +136,8 @@ export const SafetyStateIndicator = observer(
               </Trans>
             }
             literalValue={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
       default: