feat(RB-3031): ADD mobx watcher back eg. for storybook (#487)

(cherry picked from commit c6503e3d963f2e06ad438baa533c73affa30844a)
(cherry picked from commit 1addc59)

# Conflicts:
#	src/components/robots/RobotAnimator.tsx

[Storybook
Link](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/overview.html)

Co-authored-by: 3m5. Marcin Szalomski <marcin.szalomski@partner.wandelbots.com>

Author: MarcinSzalomski

src/components/robots/RobotAnimator.tsx

@@ -1,6 +1,6 @@
 import { useFrame, useThree } from "@react-three/fiber"
 import type { DHParameter, MotionGroupState } from "@wandelbots/nova-js/v2"
-import React, { useEffect, useRef } from "react"
+import React, { useEffect, useRef, useCallback } from "react"
 import type { Group, Object3D } from "three"
 import { useAutorun } from "../utils/hooks"
 import { ValueInterpolator } from "../utils/interpolation"
@@ -64,11 +64,6 @@ export default function RobotAnimator({
     invalidate()
   }
 
-  function updateJoints(newJointValues: number[]) {
-    jointValues.current = newJointValues
-    interpolatorRef.current?.setTarget(newJointValues)
-  }
-
   function setRotation() {
     const updatedJointValues = interpolatorRef.current?.getCurrentValues() || []
 
@@ -86,12 +81,32 @@ export default function RobotAnimator({
     }
   }
 
-  useAutorun(() => {
+  const updateJoints = useCallback(() => {
     const newJointValues = rapidlyChangingMotionState.joint_position.filter(
       (item) => item !== undefined,
     )
 
-    requestAnimationFrame(() => updateJoints(newJointValues))
+    requestAnimationFrame(() => {
+      jointValues.current = newJointValues
+      interpolatorRef.current?.setTarget(newJointValues)
+    })
+  }, [rapidlyChangingMotionState])
+
+  /**
+   * Fire an update joints call on every motion state change.
+   * requestAnimationFrame used to avoid blocking main thread
+   */
+  useEffect(() => {
+    updateJoints()
+  }, [rapidlyChangingMotionState, updateJoints])
+
+  /**
+   * As some consumer applications (eg. storybook) deliver
+   * mobx observable for rapidlyChangingMotionState, we need to
+   * register the watcher to get the newest value updates
+   */
+  useAutorun(() => {
+    updateJoints()
   })
 
   return <group ref={setGroupRef}>{children}</group>