@wandelbots/wandelbots-js-react-components 2.31.0 → 2.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.31.0",
+  "version": "2.32.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -59,8 +59,8 @@
     "@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/addon-docs": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
     "@storybook/test-runner": "^0.23.0",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -72,7 +72,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@wandelbots/nova-js": "^2.1.0",
     "add": "^2.0.6",
-    "eslint-plugin-storybook": "^9.0.8",
+    "eslint-plugin-storybook": "^9.1.2",
     "glob": "^11.0.1",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -95,7 +95,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.2.3",
-    "storybook": "^9.0.8",
+    "storybook": "^9.1.2",
     "storybook-preset-inline-svg": "^1.0.1",
     "three": "^0.174.0",
     "three-stdlib": "^2.35.14",

package/src/components/ProgramStateIndicator.tsx

@@ -0,0 +1,148 @@
+import { Chip, useTheme } from "@mui/material"
+import type {
+  RobotControllerStateOperationModeEnum,
+  RobotControllerStateSafetyStateEnum,
+} from "@wandelbots/nova-js/v1"
+import { observer } from "mobx-react-lite"
+import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../externalizeComponent"
+import type { ProgramState } from "./ProgramControl"
+
+export interface ProgramStateIndicatorProps {
+  /** The current state of the program */
+  programState: ProgramState
+  /** The current safety state of the robot controller */
+  safetyState: RobotControllerStateSafetyStateEnum
+  /** The current operation mode of the robot controller */
+  operationMode: RobotControllerStateOperationModeEnum
+  /** Additional CSS class name */
+  className?: string
+}
+
+/**
+ * A state indicator component that displays the current program execution state
+ * combined with robot controller safety and operation mode states.
+ *
+ * Features:
+ * - Combines program state with safety and operation mode states
+ * - Color-coded based on state severity (success, warning, error)
+ * - Rendered as Material-UI filled chip
+ * - Localization support via react-i18next
+ */
+export const ProgramStateIndicator = externalizeComponent(
+  observer(
+    ({
+      programState,
+      safetyState,
+      operationMode,
+      className,
+    }: ProgramStateIndicatorProps) => {
+      const theme = useTheme()
+      const { t } = useTranslation()
+
+      const getStateInfo = () => {
+        // First check for emergency stop or critical safety states
+        if (
+          safetyState === "SAFETY_STATE_DEVICE_EMERGENCY_STOP" ||
+          safetyState === "SAFETY_STATE_ROBOT_EMERGENCY_STOP" ||
+          safetyState === "SAFETY_STATE_STOP_0" ||
+          safetyState === "SAFETY_STATE_STOP_1" ||
+          safetyState === "SAFETY_STATE_STOP_2" ||
+          safetyState === "SAFETY_STATE_PROTECTIVE_STOP" ||
+          safetyState === "SAFETY_STATE_STOP" ||
+          safetyState === "SAFETY_STATE_REDUCED" ||
+          safetyState === "SAFETY_STATE_MASTERING" ||
+          safetyState === "SAFETY_STATE_CONFIRM_SAFETY" ||
+          safetyState === "SAFETY_STATE_OPERATOR_SAFETY" ||
+          safetyState === "SAFETY_STATE_RECOVERY" ||
+          safetyState === "SAFETY_STATE_VIOLATION"
+        ) {
+          return {
+            label: t("ProgramStateIndicator.EStop.lb"),
+            color: theme.palette.error.main,
+          }
+        }
+
+        // Check for error states
+        if (
+          safetyState === "SAFETY_STATE_UNKNOWN" ||
+          safetyState === "SAFETY_STATE_FAULT"
+        ) {
+          return {
+            label: t("ProgramStateIndicator.Error.lb"),
+            color: theme.palette.error.main,
+          }
+        }
+
+        // For normal safety states, check program state
+        if (safetyState === "SAFETY_STATE_NORMAL") {
+          switch (programState) {
+            case "running":
+              return {
+                label: t("ProgramStateIndicator.Running.lb"),
+                color: theme.palette.success.main,
+              }
+            case "paused":
+              return {
+                label: t("ProgramStateIndicator.Paused.lb"),
+                color: theme.palette.grey[600],
+              }
+            case "stopping":
+              return {
+                label: t("ProgramStateIndicator.Stopped.lb"),
+                color: theme.palette.error.main,
+              }
+            case "idle":
+            default:
+              return {
+                label: t("ProgramStateIndicator.Ready.lb"),
+                color: theme.palette.success.main,
+              }
+          }
+        }
+
+        // Default fallback
+        return {
+          label: t("ProgramStateIndicator.Idle.lb"),
+          color: theme.palette.grey[600],
+        }
+      }
+
+      const { label, color } = getStateInfo()
+
+      // Add operation mode suffix if not automatic
+      const getOperationModeText = () => {
+        switch (operationMode) {
+          case "OPERATION_MODE_AUTO":
+            return t("ProgramStateIndicator.Auto.lb")
+          case "OPERATION_MODE_MANUAL":
+            return t("ProgramStateIndicator.Manual.lb")
+          case "OPERATION_MODE_MANUAL_T1":
+            return t("ProgramStateIndicator.ManualT1.lb")
+          case "OPERATION_MODE_MANUAL_T2":
+            return t("ProgramStateIndicator.ManualT2.lb")
+          default:
+            return t("ProgramStateIndicator.Auto.lb") // Default to Auto for unknown modes
+        }
+      }
+
+      const fullLabel = `${label} / ${getOperationModeText()}`
+
+      return (
+        <Chip
+          className={className}
+          label={fullLabel}
+          variant="filled"
+          sx={{
+            backgroundColor: color,
+            color: theme.palette.getContrastText(color),
+            fontWeight: 500,
+            "& .MuiChip-label": {
+              paddingX: 2,
+            },
+          }}
+        />
+      )
+    },
+  ),
+)

package/src/i18n/locales/de/translations.json

@@ -50,5 +50,16 @@
   "ProgramControl.Start.bt": "Start",
   "ProgramControl.Resume.bt": "Weiter",
   "ProgramControl.Pause.bt": "Pause",
-  "ProgramControl.Stop.bt": "Stopp"
+  "ProgramControl.Stop.bt": "Stopp",
+  "ProgramStateIndicator.Running.lb": "In Betrieb",
+  "ProgramStateIndicator.Error.lb": "Fehler",
+  "ProgramStateIndicator.EStop.lb": "Not-Aus",
+  "ProgramStateIndicator.Idle.lb": "Leerlauf",
+  "ProgramStateIndicator.Paused.lb": "Pausiert",
+  "ProgramStateIndicator.Ready.lb": "Bereit",
+  "ProgramStateIndicator.Stopped.lb": "Gestoppt",
+  "ProgramStateIndicator.Auto.lb": "Auto",
+  "ProgramStateIndicator.Manual.lb": "Manuell",
+  "ProgramStateIndicator.ManualT1.lb": "Manuell T1",
+  "ProgramStateIndicator.ManualT2.lb": "Manuell T2"
 }

package/src/i18n/locales/en/translations.json

@@ -51,5 +51,16 @@
   "ProgramControl.Start.bt": "Start",
   "ProgramControl.Resume.bt": "Resume",
   "ProgramControl.Pause.bt": "Pause",
-  "ProgramControl.Stop.bt": "Stop"
+  "ProgramControl.Stop.bt": "Stop",
+  "ProgramStateIndicator.Running.lb": "Running",
+  "ProgramStateIndicator.Error.lb": "Error",
+  "ProgramStateIndicator.EStop.lb": "E-Stop",
+  "ProgramStateIndicator.Idle.lb": "Idle",
+  "ProgramStateIndicator.Paused.lb": "Paused",
+  "ProgramStateIndicator.Ready.lb": "Ready",
+  "ProgramStateIndicator.Stopped.lb": "Stopped",
+  "ProgramStateIndicator.Auto.lb": "Auto",
+  "ProgramStateIndicator.Manual.lb": "Manual",
+  "ProgramStateIndicator.ManualT1.lb": "Manual T1",
+  "ProgramStateIndicator.ManualT2.lb": "Manual T2"
 }

package/src/index.ts

@@ -11,6 +11,7 @@ export * from "./components/jogging/PoseJointValues"
 export * from "./components/LoadingCover"
 export * from "./components/modal/NoMotionGroupModal"
 export * from "./components/ProgramControl"
+export * from "./components/ProgramStateIndicator"
 export * from "./components/robots/AxisConfig"
 export * from "./components/robots/Robot"
 export { defaultGetModel } from "./components/robots/robotModelLogic"