@wandelbots/wandelbots-js-react-components 2.32.0 → 2.33.0-pr.feature-robot-precondition-list.372.3ad6c62

package/src/components/RobotListItem.tsx

@@ -0,0 +1,152 @@
+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)",
+            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,124 @@
+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,
+          height: "auto",
+          "& .MuiChip-label": {
+            paddingX: 1.5,
+            paddingY: 0.5,
+          },
+        }}
+      />
+    )
+  }),
+)

package/src/components/robots/Robot.tsx

@@ -1,15 +1,16 @@
-import { type ThreeElements } from "@react-three/fiber"
+import type { ThreeElements } from "@react-three/fiber"
 
 import type { ConnectedMotionGroup } from "@wandelbots/nova-js/v1"
 import type { Group } from "three"
-import { SupportedRobot } from "./SupportedRobot"
 import { defaultGetModel } from "./robotModelLogic"
+import { SupportedRobot } from "./SupportedRobot"
 
 export type RobotProps = {
   connectedMotionGroup: ConnectedMotionGroup
   getModel?: (modelFromController: string) => string
   flangeRef?: React.Ref<Group>
   transparentColor?: string
+  postModelRender?: () => void
 } & ThreeElements["group"]
 
 /**
@@ -28,6 +29,7 @@ export function Robot({
   getModel = defaultGetModel,
   flangeRef,
   transparentColor,
+  postModelRender,
   ...props
 }: RobotProps) {
   if (!connectedMotionGroup.dhParameters) {
@@ -44,6 +46,7 @@ export function Robot({
       getModel={getModel}
       flangeRef={flangeRef}
       transparentColor={transparentColor}
+      postModelRender={postModelRender}
       {...props}
     />
   )

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

@@ -61,5 +61,10 @@
   "ProgramStateIndicator.Auto.lb": "Auto",
   "ProgramStateIndicator.Manual.lb": "Manuell",
   "ProgramStateIndicator.ManualT1.lb": "Manuell T1",
-  "ProgramStateIndicator.ManualT2.lb": "Manuell T2"
+  "ProgramStateIndicator.ManualT2.lb": "Manuell T2",
+  "RobotSetupReadinessIndicator.Ready.lb": "Bereit",
+  "RobotSetupReadinessIndicator.RobotDisconnected.lb": "Roboter getrennt",
+  "RobotSetupReadinessIndicator.PreconditionNotFulfilled.lb": "Voraussetzung nicht erfüllt",
+  "RobotCard.Runtime.lb": "Laufzeit",
+  "RobotCard.DriveToHome.bt": "Zur Home-Position fahren"
 }

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

@@ -62,5 +62,10 @@
   "ProgramStateIndicator.Auto.lb": "Auto",
   "ProgramStateIndicator.Manual.lb": "Manual",
   "ProgramStateIndicator.ManualT1.lb": "Manual T1",
-  "ProgramStateIndicator.ManualT2.lb": "Manual T2"
+  "ProgramStateIndicator.ManualT2.lb": "Manual T2",
+  "RobotSetupReadinessIndicator.Ready.lb": "Ready",
+  "RobotSetupReadinessIndicator.RobotDisconnected.lb": "Robot disconnected",
+  "RobotSetupReadinessIndicator.PreconditionNotFulfilled.lb": "Precondition not fulfilled",
+  "RobotCard.Runtime.lb": "Runtime",
+  "RobotCard.DriveToHome.bt": "Drive to Home"
 }

package/src/index.ts

@@ -2,6 +2,7 @@ export * from "./components/3d-viewport/PresetEnvironment"
 export * from "./components/3d-viewport/SafetyZonesRenderer"
 export * from "./components/3d-viewport/TrajectoryRenderer"
 export * from "./components/CycleTimer"
+export * from "./components/DataGrid"
 export * from "./components/jogging/JoggingCartesianAxisControl"
 export * from "./components/jogging/JoggingJointRotationControl"
 export * from "./components/jogging/JoggingPanel"
@@ -9,13 +10,19 @@ export { JoggingStore } from "./components/jogging/JoggingStore"
 export * from "./components/jogging/PoseCartesianValues"
 export * from "./components/jogging/PoseJointValues"
 export * from "./components/LoadingCover"
+export * from "./components/LogPanel"
+export { LogStore } from "./components/LogStore"
+export * from "./components/LogViewer"
 export * from "./components/modal/NoMotionGroupModal"
 export * from "./components/ProgramControl"
 export * from "./components/ProgramStateIndicator"
+export * from "./components/RobotCard"
+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"