@wandelbots/wandelbots-js-react-components 2.25.0 → 2.26.0-pr.feature-update-to-react-19.361.fe8f91b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.25.0",
+  "version": "2.26.0-pr.feature-update-to-react-19.361.fe8f91b",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -48,45 +48,41 @@
   "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-spring/three": "^10.0.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",
     "@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",
+    "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 +90,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 +105,13 @@
   "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-spring/three": "^9 || ^10",
+    "@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"
   },
@@ -145,8 +142,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/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/GenericRobot.tsx

@@ -1,6 +1,6 @@
 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 +14,7 @@ export type RobotModelProps = {
    */
   postModelRender?: () => void
   flangeRef?: React.Ref<Group>
-} & GroupProps
+} & ThreeElements["group"]
 
 function isMesh(node: Object3D): node is Mesh {
   return node.type === "Mesh"

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/SupportedRobot.tsx

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

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 JSX.ElementType>(
+export function externalizeComponent<T extends React.JSX.ElementType>(
   Component: T,
 ): T {
   const WrappedComponent = ((props: T) => (