@wandelbots/wandelbots-js-react-components 5.5.1-pr.fix-standardize-output.591.60112ee → 5.5.1

package/src/components/ProgramControl.tsx

@@ -0,0 +1,267 @@
+import Pause from "@mui/icons-material/Pause"
+import PlayArrow from "@mui/icons-material/PlayArrow"
+import Stop from "@mui/icons-material/Stop"
+import { useTheme } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Button from "@mui/material/Button"
+import Typography from "@mui/material/Typography"
+import { observer } from "mobx-react-lite"
+import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../externalizeComponent"
+
+export enum ProgramState {
+  IDLE = "idle",
+  PREPARING = "preparing",
+  STARTING = "starting",
+  RUNNING = "running",
+  PAUSING = "pausing",
+  PAUSED = "paused",
+  STOPPING = "stopping",
+  COMPLETED = "completed",
+  FAILED = "failed",
+  STOPPED = "stopped",
+  ERROR = "error",
+}
+
+export interface ProgramControlProps {
+  /** The current state of the program control */
+  state: ProgramState
+  /** Callback fired when the run/resume button is clicked */
+  onRun: () => void
+  /** Callback fired when the pause button is clicked (only available in 'with_pause' variant) */
+  onPause?: () => void
+  /** Callback fired when the stop button is clicked */
+  onStop: () => void
+  /**
+   * Function to reset the component from 'stopping' state back to 'idle'.
+   * This must be called manually by the user when requiresManualReset is true.
+   */
+  onReset?: () => void
+  /**
+   * When true, the component will stay in 'stopping' state until onReset is called manually.
+   * When false (default), auto-resets to 'idle' after 2 seconds.
+   */
+  requiresManualReset?: boolean
+  /**
+   * Variant of the component:
+   * - 'with_pause': Shows run/pause/stop buttons (default)
+   * - 'without_pause': Shows only run/stop buttons
+   */
+  variant?: "with_pause" | "without_pause"
+  /** Additional CSS class name */
+  className?: string
+}
+
+interface ButtonConfig {
+  enabled: boolean
+  label: string
+  color: string
+  onClick: () => void
+}
+
+/**
+ * A control component for program execution with run, pause, and stop functionality.
+ *
+ * Features:
+ * - State machine with idle, preparing, starting, running, pausing, paused, stopping, completed, failed, stopped, and error states
+ * - Two variants: with_pause (3 buttons) and without_pause (2 buttons)
+ * - Optional manual reset functionality
+ * - Responsive design with 110px circular buttons
+ * - Material-UI theming integration
+ */
+export const ProgramControl = externalizeComponent(
+  observer(
+    ({
+      state,
+      onRun,
+      onPause,
+      onStop,
+      onReset,
+      requiresManualReset = false,
+      variant = "with_pause",
+      className,
+    }: ProgramControlProps) => {
+      const theme = useTheme()
+      const { t } = useTranslation()
+
+      const getButtonConfigs = (): ButtonConfig[] => {
+        const baseConfigs: Record<string, ButtonConfig> = {
+          run: {
+            enabled:
+              state === ProgramState.IDLE ||
+              state === ProgramState.STOPPED ||
+              state === ProgramState.PAUSED ||
+              state === ProgramState.COMPLETED ||
+              state === ProgramState.FAILED ||
+              state === ProgramState.ERROR,
+            label:
+              state === ProgramState.PAUSED
+                ? t("ProgramControl.Resume.bt")
+                : state === ProgramState.ERROR || state === ProgramState.FAILED
+                  ? t("ProgramControl.Retry.bt")
+                  : t("ProgramControl.Start.bt"),
+            color: theme.palette.success.main,
+            onClick: onRun,
+          },
+          pause: {
+            enabled: state === ProgramState.RUNNING,
+            label: t("ProgramControl.Pause.bt"),
+            color: "#FFFFFF33",
+            onClick: onPause || (() => {}),
+          },
+          stop: {
+            enabled:
+              state === ProgramState.PREPARING ||
+              state === ProgramState.STARTING ||
+              state === ProgramState.RUNNING ||
+              state === ProgramState.PAUSING ||
+              state === ProgramState.PAUSED,
+            label: t("ProgramControl.Stop.bt"),
+            color: theme.palette.error.main,
+            onClick: onStop,
+          },
+        }
+
+        if (variant === "without_pause") {
+          return [baseConfigs.run, baseConfigs.stop]
+        }
+
+        return [baseConfigs.run, baseConfigs.pause, baseConfigs.stop]
+      }
+
+      const getButtonIcon = (index: number) => {
+        const iconProps = { sx: { fontSize: "55px" } }
+
+        if (variant === "without_pause") {
+          return index === 0 ? (
+            <PlayArrow {...iconProps} />
+          ) : (
+            <Stop {...iconProps} />
+          )
+        }
+
+        switch (index) {
+          case 0:
+            return <PlayArrow {...iconProps} />
+          case 1:
+            return <Pause {...iconProps} />
+          case 2:
+            return <Stop {...iconProps} />
+          default:
+            return null
+        }
+      }
+
+      const buttonConfigs = getButtonConfigs()
+
+      return (
+        <Box
+          className={className}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 2,
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              gap: "40px",
+              flexWrap: "wrap",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            {buttonConfigs.map((config, index) => (
+              <Box
+                key={config.label}
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
+                }}
+              >
+                <Button
+                  variant="contained"
+                  disabled={
+                    !config.enabled ||
+                    state === ProgramState.PREPARING ||
+                    state === ProgramState.STARTING ||
+                    state === ProgramState.PAUSING ||
+                    (state === ProgramState.STOPPING && !requiresManualReset)
+                  }
+                  onClick={config.onClick}
+                  sx={{
+                    width: "88px",
+                    height: "88px",
+                    borderRadius: "88px",
+                    backgroundColor: config.color,
+                    opacity:
+                      config.enabled &&
+                      state !== ProgramState.PREPARING &&
+                      state !== ProgramState.STARTING &&
+                      state !== ProgramState.PAUSING &&
+                      !(state === ProgramState.STOPPING && !requiresManualReset)
+                        ? 1
+                        : 0.3,
+                    "&:hover": {
+                      backgroundColor: config.color,
+                      opacity:
+                        config.enabled &&
+                        state !== ProgramState.PREPARING &&
+                        state !== ProgramState.STARTING &&
+                        state !== ProgramState.PAUSING &&
+                        !(
+                          state === ProgramState.STOPPING &&
+                          !requiresManualReset
+                        )
+                          ? 0.8
+                          : 0.3,
+                    },
+                    "&:disabled": {
+                      backgroundColor: config.color,
+                      opacity: 0.3,
+                    },
+                    minWidth: "88px",
+                    flexShrink: 0,
+                  }}
+                >
+                  {getButtonIcon(index)}
+                </Button>
+
+                <Typography
+                  variant="body1"
+                  sx={{
+                    color:
+                      config.enabled &&
+                      state !== ProgramState.PREPARING &&
+                      state !== ProgramState.STARTING &&
+                      state !== ProgramState.PAUSING &&
+                      !(state === ProgramState.STOPPING && !requiresManualReset)
+                        ? config.color
+                        : theme.palette.text.disabled,
+                    textAlign: "center",
+                    opacity:
+                      config.enabled &&
+                      state !== ProgramState.PREPARING &&
+                      state !== ProgramState.STARTING &&
+                      state !== ProgramState.PAUSING &&
+                      !(state === ProgramState.STOPPING && !requiresManualReset)
+                        ? 1
+                        : 0.3,
+                  }}
+                >
+                  {config.label}
+                </Typography>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      )
+    },
+  ),
+)
+
+export default ProgramControl

package/src/components/ProgramStateIndicator.tsx

@@ -0,0 +1,195 @@
+import { useTheme } from "@mui/material/styles"
+import Chip from "@mui/material/Chip"
+import Typography from "@mui/material/Typography"
+import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"
+import { observer } from "mobx-react-lite"
+import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../externalizeComponent"
+import { ProgramState } from "./ProgramControl"
+
+export interface ProgramStateIndicatorProps {
+  /** The current state of the program */
+  programState: ProgramState
+  /** The current safety state of the robot controller */
+  safetyState: SafetyStateType
+  /** The current operation mode of the robot controller */
+  operationMode: OperationMode
+  /** 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 ProgramState.PREPARING:
+              return {
+                label: t("ProgramStateIndicator.Preparing.lb"),
+                color: theme.palette.warning.main,
+              }
+            case ProgramState.STARTING:
+              return {
+                label: t("ProgramStateIndicator.Starting.lb"),
+                color: theme.palette.warning.main,
+              }
+            case ProgramState.RUNNING:
+              return {
+                label: t("ProgramStateIndicator.Running.lb"),
+                color: theme.palette.success.main,
+              }
+            case ProgramState.PAUSING:
+              return {
+                label: t("ProgramStateIndicator.Pausing.lb"),
+                color: theme.palette.warning.main,
+              }
+            case ProgramState.PAUSED:
+              return {
+                label: t("ProgramStateIndicator.Paused.lb"),
+                color: theme.palette.grey[600],
+              }
+            case ProgramState.STOPPING:
+              return {
+                label: t("ProgramStateIndicator.Stopping.lb"),
+                color: theme.palette.warning.main,
+              }
+            case ProgramState.COMPLETED:
+              return {
+                label: t("ProgramStateIndicator.Completed.lb"),
+                color: theme.palette.success.main,
+              }
+            case ProgramState.FAILED:
+              return {
+                label: t("ProgramStateIndicator.Failed.lb"),
+                color: theme.palette.error.main,
+              }
+            case ProgramState.STOPPED:
+              return {
+                label: t("ProgramStateIndicator.Stopped.lb"),
+                color: theme.palette.warning.main,
+              }
+            case ProgramState.ERROR:
+              return {
+                label: t("ProgramStateIndicator.Error.lb"),
+                color: theme.palette.error.main,
+              }
+            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={
+            <Typography
+              variant="body2"
+              sx={{
+                fontSize: "0.75rem", // Smaller than body2
+                lineHeight: 1.2,
+              }}
+            >
+              {fullLabel}
+            </Typography>
+          }
+          variant="filled"
+          sx={{
+            backgroundColor: color,
+            color: theme.palette.getContrastText(color),
+            fontWeight: 500,
+            height: "auto",
+            "& .MuiChip-label": {
+              paddingX: 1.5,
+              paddingY: 0.5,
+            },
+          }}
+        />
+      )
+    },
+  ),
+)
+
+export default ProgramStateIndicator