@wandelbots/wandelbots-js-react-components 2.31.0 → 2.32.0-pr.feature-robot-precondition-list.372.8c2beb0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.31.0",
+  "version": "2.32.0-pr.feature-robot-precondition-list.372.8c2beb0",
   "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/components/RobotListItem.tsx

@@ -0,0 +1,153 @@
+import ErrorIcon from "@mui/icons-material/Error"
+import { Box, Divider, Typography, useTheme } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import type { ComponentType } from "react"
+import { externalizeComponent } from "../externalizeComponent"
+import { RobotIcon } from "../icons"
+import {
+  RobotSetupReadinessIndicator,
+  RobotSetupReadinessState,
+} from "./RobotSetupReadinessIndicator"
+
+export interface RobotListItemProps {
+  /** The name of the robot */
+  robotName: string
+  /** The type/model of the robot (will try to derive from nova if not provided) */
+  robotType?: string
+  /** The current setup readiness state of the robot */
+  setupState: RobotSetupReadinessState
+  /**
+   * Component to render for the precondition indicator.
+   * Defaults to RobotSetupReadinessIndicator.
+   * Pass null or undefined to hide the indicator.
+   */
+  PreconditionComponent?: ComponentType<{
+    setupState: RobotSetupReadinessState
+  }> | null
+  /** Additional CSS class name */
+  className?: string
+}
+
+/**
+ * A list item component that displays robot information and setup readiness state.
+ *
+ * Features:
+ * - Shows robot name, type, and customizable precondition component
+ * - Color-coded icon based on readiness state (robot icon for ready, warning for issues)
+ * - Styled with consistent border, background, and spacing
+ * - Responsive layout with proper spacing and alignment
+ * - Flexible precondition component that can be customized or hidden
+ */
+export const RobotListItem = externalizeComponent(
+  observer(
+    ({
+      robotName,
+      robotType,
+      setupState,
+      PreconditionComponent = RobotSetupReadinessIndicator,
+      className,
+    }: RobotListItemProps) => {
+      const theme = useTheme()
+
+      // Use provided robot type or default
+      const displayRobotType = robotType || "Robot"
+
+      const isReady = setupState === RobotSetupReadinessState.READY
+
+      return (
+        <Box
+          className={className}
+          sx={{
+            border:
+              "1px solid var(--secondary-_states-outlinedBorder, #FFFFFF1F)",
+            background: "var(--background-paper-elevation-8, #292B3E)",
+            width: 732,
+            height: 80,
+            minHeight: "80px",
+            borderRadius: "8px",
+            padding: "20px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            opacity: 1,
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              flex: 1,
+            }}
+          >
+            {/* Robot/Warning Icon */}
+            {isReady ? (
+              <Box
+                sx={{
+                  fontSize: 24,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 24,
+                  height: 24,
+                  "& svg": {
+                    fill: "var(--primary-main, #8E56FC) !important",
+                  },
+                  "& svg path": {
+                    fill: "var(--primary-main, #8E56FC) !important",
+                  },
+                }}
+              >
+                <RobotIcon />
+              </Box>
+            ) : (
+              <ErrorIcon
+                sx={{
+                  color: theme.palette.error.main,
+                  fontSize: 24,
+                }}
+              />
+            )}
+
+            {/* Robot Name */}
+            <Typography
+              variant="body1"
+              sx={{
+                fontWeight: 500,
+                color: theme.palette.text.primary,
+              }}
+            >
+              {robotName}
+            </Typography>
+
+            {/* Divider */}
+            <Divider
+              orientation="vertical"
+              flexItem
+              sx={{
+                backgroundColor: theme.palette.text.secondary,
+                opacity: 0.3,
+                width: "1px",
+              }}
+            />
+
+            {/* Robot Type */}
+            <Typography
+              variant="body2"
+              sx={{
+                color: theme.palette.text.secondary,
+              }}
+            >
+              {displayRobotType}
+            </Typography>
+          </Box>
+
+          {/* Setup Readiness Indicator */}
+          {PreconditionComponent && (
+            <PreconditionComponent setupState={setupState} />
+          )}
+        </Box>
+      )
+    },
+  ),
+)

package/src/components/RobotSetupReadinessIndicator.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import {
+  RobotSetupReadinessIndicator,
+  RobotSetupReadinessState,
+} from "./RobotSetupReadinessIndicator"
+
+describe("RobotSetupReadinessIndicator", () => {
+  it("renders ready state correctly", () => {
+    render(
+      <RobotSetupReadinessIndicator
+        setupState={RobotSetupReadinessState.READY}
+      />,
+    )
+
+    expect(screen.getByText("Ready")).toBeInTheDocument()
+  })
+
+  it("renders robot disconnected state correctly", () => {
+    render(
+      <RobotSetupReadinessIndicator
+        setupState={RobotSetupReadinessState.ROBOT_DISCONNECTED}
+      />,
+    )
+
+    expect(screen.getByText("Robot disconnected")).toBeInTheDocument()
+  })
+
+  it("renders precondition not fulfilled state correctly", () => {
+    render(
+      <RobotSetupReadinessIndicator
+        setupState={RobotSetupReadinessState.PRECONDITION_NOT_FULFILLED}
+      />,
+    )
+
+    expect(screen.getByText("Precondition not fulfilled")).toBeInTheDocument()
+  })
+
+  it("applies correct CSS class when provided", () => {
+    const { container } = render(
+      <RobotSetupReadinessIndicator
+        setupState={RobotSetupReadinessState.READY}
+        className="test-class"
+      />,
+    )
+
+    expect(container.firstChild).toHaveClass("test-class")
+  })
+
+  it("renders indicator circle", () => {
+    render(
+      <RobotSetupReadinessIndicator
+        setupState={RobotSetupReadinessState.READY}
+      />,
+    )
+
+    // Check if the component is rendered - it's a chip, not a button
+    expect(screen.getByText("Ready")).toBeInTheDocument()
+  })
+})

package/src/components/RobotSetupReadinessIndicator.tsx

@@ -0,0 +1,122 @@
+import { Box, Chip, Typography, useTheme } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../externalizeComponent"
+
+/**
+ * Enum representing the robot setup readiness state
+ */
+export enum RobotSetupReadinessState {
+  /** Preconditions are not fulfilled for robot operation */
+  PRECONDITION_NOT_FULFILLED = "PRECONDITION_NOT_FULFILLED",
+  /** Robot is disconnected from the system */
+  ROBOT_DISCONNECTED = "ROBOT_DISCONNECTED",
+  /** Robot is ready for operation */
+  READY = "READY",
+}
+
+export interface RobotSetupReadinessIndicatorProps {
+  /** The current setup readiness state of the robot */
+  setupState: RobotSetupReadinessState
+  /** Additional CSS class name */
+  className?: string
+}
+
+/**
+ * A state indicator component that displays the current robot setup readiness state.
+ *
+ * Features:
+ * - Shows three states: Precondition not fulfilled, Robot disconnected, Ready
+ * - Color-coded based on state (ready: tertiary/main, others: error/main)
+ * - Rendered as Material-UI filled chip with paper-elevation-11 background
+ * - Includes colored circle indicator (8px width)
+ * - Localization support via react-i18next
+ */
+export const RobotSetupReadinessIndicator = externalizeComponent(
+  observer(({ setupState, className }: RobotSetupReadinessIndicatorProps) => {
+    const theme = useTheme()
+    const { t } = useTranslation()
+
+    const getStateInfo = () => {
+      switch (setupState) {
+        case RobotSetupReadinessState.READY:
+          return {
+            label: t("RobotSetupReadinessIndicator.Ready.lb"),
+            indicatorColor:
+              theme.palette.tertiary?.main || theme.palette.primary.main,
+            backgroundColor:
+              theme.palette.backgroundPaperElevation?.[11] ||
+              theme.palette.background.paper,
+            textColor: "var(--secondary-contrast, #FFFFFFDE)",
+          }
+        case RobotSetupReadinessState.ROBOT_DISCONNECTED:
+          return {
+            label: t("RobotSetupReadinessIndicator.RobotDisconnected.lb"),
+            indicatorColor: theme.palette.error.main,
+            backgroundColor:
+              theme.palette.backgroundPaperElevation?.[11] ||
+              theme.palette.background.paper,
+            textColor: "var(--secondary-contrast, #FFFFFFDE)",
+          }
+        case RobotSetupReadinessState.PRECONDITION_NOT_FULFILLED:
+        default:
+          return {
+            label: t(
+              "RobotSetupReadinessIndicator.PreconditionNotFulfilled.lb",
+            ),
+            indicatorColor: theme.palette.error.main,
+            backgroundColor:
+              theme.palette.backgroundPaperElevation?.[11] ||
+              theme.palette.background.paper,
+            textColor: "var(--secondary-contrast, #FFFFFFDE)",
+          }
+      }
+    }
+
+    const { label, indicatorColor, backgroundColor, textColor } = getStateInfo()
+
+    return (
+      <Chip
+        className={className}
+        label={
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+            }}
+          >
+            <Box
+              sx={{
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                backgroundColor: indicatorColor,
+                flexShrink: 0,
+              }}
+            />
+            <Typography
+              variant="body2"
+              sx={{
+                color: textColor,
+                fontSize: "0.75rem", // Smaller than body2
+                lineHeight: 1.2,
+              }}
+            >
+              {label}
+            </Typography>
+          </Box>
+        }
+        variant="filled"
+        sx={{
+          backgroundColor,
+          color: theme.palette.getContrastText(backgroundColor),
+          fontWeight: 500,
+          "& .MuiChip-label": {
+            paddingX: 1.5,
+          },
+        }}
+      />
+    )
+  }),
+)

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

@@ -50,5 +50,19 @@
   "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",
+  "RobotSetupReadinessIndicator.Ready.lb": "Bereit",
+  "RobotSetupReadinessIndicator.RobotDisconnected.lb": "Roboter getrennt",
+  "RobotSetupReadinessIndicator.PreconditionNotFulfilled.lb": "Voraussetzung nicht erfüllt"
 }

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

@@ -51,5 +51,19 @@
   "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",
+  "RobotSetupReadinessIndicator.Ready.lb": "Ready",
+  "RobotSetupReadinessIndicator.RobotDisconnected.lb": "Robot disconnected",
+  "RobotSetupReadinessIndicator.PreconditionNotFulfilled.lb": "Precondition not fulfilled"
 }

package/src/index.ts

@@ -11,10 +11,13 @@ 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/RobotListItem"
 export * from "./components/robots/AxisConfig"
 export * from "./components/robots/Robot"
 export { defaultGetModel } from "./components/robots/robotModelLogic"
 export * from "./components/robots/SupportedRobot"
+export * from "./components/RobotSetupReadinessIndicator"
 export * from "./components/safetyBar/SafetyBar"
 export * from "./components/SelectableFab"
 export * from "./components/utils/hooks"