@wandelbots/wandelbots-js-react-components 2.33.0-pr.feature-robot-precondition-list.372.cb78a22 → 2.33.0

package/src/components/RobotListItem.tsx

@@ -1,152 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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,
-          },
-        }}
-      />
-    )
-  }),
-)