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

package/src/components/RobotCard.tsx

@@ -0,0 +1,495 @@
+import { useTheme } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Button from "@mui/material/Button"
+import Card from "@mui/material/Card"
+import Divider from "@mui/material/Divider"
+import Typography from "@mui/material/Typography"
+import { Bounds } from "@react-three/drei"
+import { Canvas } from "@react-three/fiber"
+import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"
+import { observer } from "mobx-react-lite"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
+import type { Group } from "three"
+import { externalizeComponent } from "../externalizeComponent"
+import type { ConnectedMotionGroup } from "../lib/ConnectedMotionGroup"
+import { PresetEnvironment } from "./3d-viewport/PresetEnvironment"
+import type { ProgramState } from "./ProgramControl"
+import { ProgramStateIndicator } from "./ProgramStateIndicator"
+import { Robot } from "./robots/Robot"
+
+export interface RobotCardProps {
+  /** Name of the robot displayed at the top */
+  robotName: string
+  /** Current program state */
+  programState: ProgramState
+  /** Current safety state of the robot controller */
+  safetyState: SafetyStateType
+  /** Current operation mode of the robot controller */
+  operationMode: OperationMode
+  /** Whether the "Drive to Home" button should be enabled */
+  driveToHomeEnabled?: boolean
+  /** Callback fired when "Drive to Home" button is pressed */
+  onDriveToHomePress?: () => void
+  /** Callback fired when "Drive to Home" button is released */
+  onDriveToHomeRelease?: () => void
+  /**
+   * Callback fired when "Drive to Home" button is pressed, with the default home position.
+   * If provided, this will be called instead of onDriveToHomePress, providing the recommended
+   * home position joint configuration based on the robot manufacturer.
+   */
+  onDriveToHomePressWithConfig?: (homePosition: number[]) => void
+  /**
+   * Callback fired when "Drive to Home" button is released after using onDriveToHomePressWithConfig.
+   * If provided, this will be called instead of onDriveToHomeRelease.
+   */
+  onDriveToHomeReleaseWithConfig?: () => void
+  /**
+   * Custom default joint configuration to use if manufacturer-based defaults are not available.
+   * Joint values should be in radians.
+   */
+  defaultJointConfig?: number[]
+  /** Connected motion group for the robot */
+  connectedMotionGroup: ConnectedMotionGroup
+  /** Custom robot component to render (optional, defaults to Robot) */
+  robotComponent?: React.ComponentType<{
+    connectedMotionGroup: ConnectedMotionGroup
+    flangeRef?: React.Ref<Group>
+    postModelRender?: () => void
+    transparentColor?: string
+    getModel?: (modelFromController: string) => Promise<string>
+  }>
+  /** Custom component to render in the content area (optional) */
+  customContentComponent?: React.ComponentType<Record<string, unknown>>
+  /** Additional CSS class name */
+  className?: string
+}
+
+/**
+ * A responsive card component that displays a 3D robot with states and controls.
+ * The card automatically adapts to its container's size and aspect ratio.
+ *
+ * Features:
+ * - Fully responsive Material-UI Card that adapts to container dimensions
+ * - Automatic layout switching based on aspect ratio:
+ *   - Portrait mode: Vertical layout with robot in center
+ *   - Landscape mode: Horizontal layout with robot on left, content on right (left-aligned)
+ * - Responsive 3D robot rendering:
+ *   - Scales dynamically with container size
+ *   - Hides at very small sizes to preserve usability
+ *   - Adaptive margin based on available space
+ * - Smart spacing and padding that reduces at smaller sizes
+ * - Minimum size constraints for usability while maximizing content density
+ * - Robot name displayed in Typography h6 at top-left
+ * - Program state indicator below the name
+ * - Auto-fitting 3D robot model that scales with container size
+ * - Customizable content area for displaying custom React components
+ * - Transparent gray divider line
+ * - "Drive to Home" button with press-and-hold functionality
+ * - Localization support via react-i18next
+ * - Material-UI theming integration
+ *
+ * Usage with custom content:
+ * ```tsx
+ * // Example custom timer component
+ * const CustomTimer = () => (
+ *   <Box>
+ *     <Typography variant="body1" sx={{ color: "text.secondary" }}>
+ *       Runtime
+ *     </Typography>
+ *     <Typography variant="h6">05:23</Typography>
+ *   </Box>
+ * )
+ *
+ * <RobotCard
+ *   robotName="UR5e Robot"
+ *   programState={ProgramState.RUNNING}
+ *   customContentComponent={CustomTimer}
+ *   // ... other props
+ * />
+ * ```
+ */
+export const RobotCard = externalizeComponent(
+  observer(
+    ({
+      robotName,
+      programState,
+      safetyState,
+      operationMode,
+      driveToHomeEnabled = false,
+      onDriveToHomePress,
+      onDriveToHomeRelease,
+      connectedMotionGroup,
+      robotComponent: RobotComponent = Robot,
+      customContentComponent: CustomContentComponent,
+      className,
+    }: RobotCardProps) => {
+      const theme = useTheme()
+      const { t } = useTranslation()
+      const [isDriveToHomePressed, setIsDriveToHomePressed] = useState(false)
+      const driveButtonRef = useRef<HTMLButtonElement>(null)
+      const cardRef = useRef<HTMLDivElement>(null)
+      const [isLandscape, setIsLandscape] = useState(false)
+      const [cardSize, setCardSize] = useState<{
+        width: number
+        height: number
+      }>({ width: 400, height: 600 })
+      const [modelRenderTrigger, setModelRenderTrigger] = useState(0)
+
+      // Hook to detect aspect ratio and size changes
+      useEffect(() => {
+        const checkDimensions = () => {
+          if (cardRef.current) {
+            const { offsetWidth, offsetHeight } = cardRef.current
+            setIsLandscape(offsetWidth > offsetHeight)
+            setCardSize({ width: offsetWidth, height: offsetHeight })
+          }
+        }
+
+        // Initial check
+        checkDimensions()
+
+        // Set up ResizeObserver to watch for size changes
+        const resizeObserver = new ResizeObserver(checkDimensions)
+        if (cardRef.current) {
+          resizeObserver.observe(cardRef.current)
+        }
+
+        return () => {
+          resizeObserver.disconnect()
+        }
+      }, [])
+
+      const handleModelRender = useCallback(() => {
+        // Trigger bounds refresh when model renders
+        setModelRenderTrigger((prev) => prev + 1)
+      }, [])
+
+      const handleDriveToHomeMouseDown = useCallback(() => {
+        if (!driveToHomeEnabled || !onDriveToHomePress) return
+        setIsDriveToHomePressed(true)
+        onDriveToHomePress()
+      }, [driveToHomeEnabled, onDriveToHomePress])
+
+      const handleDriveToHomeMouseUp = useCallback(() => {
+        if (!driveToHomeEnabled || !onDriveToHomeRelease) return
+        setIsDriveToHomePressed(false)
+        onDriveToHomeRelease()
+      }, [driveToHomeEnabled, onDriveToHomeRelease])
+
+      const handleDriveToHomeMouseLeave = useCallback(() => {
+        if (isDriveToHomePressed && onDriveToHomeRelease) {
+          setIsDriveToHomePressed(false)
+          onDriveToHomeRelease()
+        }
+      }, [isDriveToHomePressed, onDriveToHomeRelease])
+
+      // Determine if robot should be hidden at small sizes to save space
+      const shouldHideRobot = isLandscape
+        ? cardSize.width < 350
+        : cardSize.height < 200 // Hide robot at height < 200px in portrait
+
+      // Determine if custom content should be hidden when height is too low
+      // Custom content should be hidden BEFORE the robot (at higher threshold)
+      const shouldHideCustomContent = isLandscape
+        ? cardSize.height < 310 // Landscape: hide custom content at height < 310px
+        : cardSize.height < 450 // Portrait: hide custom content at height < 450px
+
+      return (
+        <Card
+          ref={cardRef}
+          className={className}
+          sx={{
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            flexDirection: isLandscape ? "row" : "column",
+            position: "relative",
+            overflow: "hidden",
+            minWidth: { xs: 180, sm: 220, md: 250 },
+            minHeight: isLandscape
+              ? { xs: 200, sm: 240, md: 260 } // Allow runtime hiding at < 283px
+              : { xs: 150, sm: 180, md: 220 }, // Allow progressive hiding in portrait mode
+            border: `1px solid ${theme.palette.divider}`,
+            borderRadius: "18px",
+            boxShadow: "none",
+            backgroundColor:
+              theme.palette.backgroundPaperElevation?.[8] || "#2A2A3F",
+            backgroundImage: "none", // Override any gradient from elevation
+          }}
+        >
+          {isLandscape ? (
+            <>
+              {/* Landscape Layout: Robot on left, content on right */}
+              <Box
+                sx={{
+                  flex: "0 0 50%",
+                  position: "relative",
+                  height: "100%",
+                  minHeight: "100%",
+                  maxHeight: "100%",
+                  borderRadius: 1,
+                  m: { xs: 1.5, sm: 2, md: 3 },
+                  mr: { xs: 0.75, sm: 1, md: 1.5 },
+                  overflow: "hidden", // Prevent content from affecting container size
+                  display: shouldHideRobot ? "none" : "block",
+                }}
+              >
+                {!shouldHideRobot && (
+                  <Canvas
+                    orthographic
+                    camera={{
+                      position: [3, 2, 3],
+                      zoom: 1,
+                    }}
+                    shadows
+                    frameloop="demand"
+                    style={{
+                      borderRadius: theme.shape.borderRadius,
+                      width: "100%",
+                      height: "100%",
+                      background: "transparent",
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                    }}
+                    dpr={[1, 2]}
+                    gl={{ alpha: true, antialias: true }}
+                  >
+                    <PresetEnvironment />
+                    <Bounds fit observe margin={1} maxDuration={1}>
+                      <RobotComponent
+                        connectedMotionGroup={connectedMotionGroup}
+                        postModelRender={handleModelRender}
+                      />
+                    </Bounds>
+                  </Canvas>
+                )}
+              </Box>
+
+              {/* Content container on right */}
+              <Box
+                sx={{
+                  flex: shouldHideRobot ? "1" : "1",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "flex-start",
+                  width: shouldHideRobot ? "100%" : "50%",
+                }}
+              >
+                {/* Header section with robot name and program state */}
+                <Box
+                  sx={{
+                    p: { xs: 1.5, sm: 2, md: 3 },
+                    pb: { xs: 1, sm: 1.5, md: 2 },
+                    textAlign: "left",
+                  }}
+                >
+                  <Typography variant="h6" component="h2" sx={{ mb: 1 }}>
+                    {robotName}
+                  </Typography>
+                  <ProgramStateIndicator
+                    programState={programState}
+                    safetyState={safetyState}
+                    operationMode={operationMode}
+                  />
+                </Box>
+
+                {/* Bottom section with custom content and button */}
+                <Box
+                  sx={{
+                    p: { xs: 1.5, sm: 2, md: 3 },
+                    pt: 0,
+                    flex: "1",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                  }}
+                >
+                  {/* Custom content section - hidden if height is too low in landscape mode */}
+                  {!shouldHideCustomContent && CustomContentComponent && (
+                    <Box>
+                      <CustomContentComponent />
+
+                      {/* Divider */}
+                      <Divider
+                        sx={{
+                          mt: 1,
+                          mb: 0,
+                          borderColor: theme.palette.divider,
+                          opacity: 0.5,
+                        }}
+                      />
+                    </Box>
+                  )}
+
+                  <Box
+                    sx={{
+                      mt:
+                        !shouldHideCustomContent && CustomContentComponent
+                          ? "auto"
+                          : 0,
+                    }}
+                  >
+                    {/* Drive to Home button with some space */}
+                    <Box
+                      sx={{
+                        display: "flex",
+                        justifyContent: "flex-start",
+                        mt: { xs: 1, sm: 1.5, md: 2 },
+                        mb: { xs: 0.5, sm: 0.75, md: 1 },
+                      }}
+                    >
+                      <Button
+                        ref={driveButtonRef}
+                        variant="contained"
+                        color="secondary"
+                        size="small"
+                        disabled={!driveToHomeEnabled}
+                        onMouseDown={handleDriveToHomeMouseDown}
+                        onMouseUp={handleDriveToHomeMouseUp}
+                        onMouseLeave={handleDriveToHomeMouseLeave}
+                        onTouchStart={handleDriveToHomeMouseDown}
+                        onTouchEnd={handleDriveToHomeMouseUp}
+                        sx={{
+                          textTransform: "none",
+                          px: 1.5,
+                          py: 0.5,
+                        }}
+                      >
+                        {t("RobotCard.DriveToHome.bt")}
+                      </Button>
+                    </Box>
+                  </Box>
+                </Box>
+              </Box>
+            </>
+          ) : (
+            <>
+              {/* Portrait Layout: Header, Robot, Footer */}
+              <Box
+                sx={{
+                  p: 3,
+                  height: "100%",
+                  display: "flex",
+                  flexDirection: "column",
+                }}
+              >
+                {/* Header section with robot name and program state */}
+                <Box>
+                  <Typography variant="h6" component="h2" sx={{ mb: 1 }}>
+                    {robotName}
+                  </Typography>
+                  <ProgramStateIndicator
+                    programState={programState}
+                    safetyState={safetyState}
+                    operationMode={operationMode}
+                  />
+                </Box>
+
+                {/* 3D Robot viewport in center */}
+                <Box
+                  sx={{
+                    flex: shouldHideRobot ? 0 : 1,
+                    position: "relative",
+                    minHeight: shouldHideRobot
+                      ? 0
+                      : { xs: 120, sm: 150, md: 200 },
+                    height: shouldHideRobot ? 0 : "auto",
+                    borderRadius: 1,
+                    overflow: "hidden",
+                    display: shouldHideRobot ? "none" : "block",
+                  }}
+                >
+                  {!shouldHideRobot && (
+                    <Canvas
+                      orthographic
+                      camera={{
+                        position: [3, 2, 3],
+                        zoom: 1,
+                      }}
+                      shadows
+                      frameloop="demand"
+                      style={{
+                        borderRadius: theme.shape.borderRadius,
+                        width: "100%",
+                        height: "100%",
+                        background: "transparent",
+                        position: "absolute",
+                      }}
+                      dpr={[1, 2]}
+                      gl={{ alpha: true, antialias: true }}
+                    >
+                      <PresetEnvironment />
+                      <Bounds fit clip observe margin={1} maxDuration={1}>
+                        <RobotComponent
+                          connectedMotionGroup={connectedMotionGroup}
+                          postModelRender={handleModelRender}
+                        />
+                      </Bounds>
+                    </Canvas>
+                  )}
+                </Box>
+
+                {/* Bottom section with custom content and button */}
+                <Box>
+                  {/* Custom content section - hidden if height is too low */}
+                  {!shouldHideCustomContent && CustomContentComponent && (
+                    <>
+                      <CustomContentComponent />
+
+                      {/* Divider */}
+                      <Divider
+                        sx={{
+                          mt: 1,
+                          mb: 0,
+                          borderColor: theme.palette.divider,
+                          opacity: 0.5,
+                        }}
+                      />
+                    </>
+                  )}
+
+                  {/* Drive to Home button with some space */}
+                  <Box
+                    sx={{
+                      display: "flex",
+                      justifyContent: "flex-start",
+                      mt:
+                        !shouldHideCustomContent && CustomContentComponent
+                          ? { xs: 1, sm: 2, md: 5 }
+                          : { xs: 0.5, sm: 1, md: 2 },
+                      mb: { xs: 0.5, sm: 0.75, md: 1 },
+                    }}
+                  >
+                    <Button
+                      ref={driveButtonRef}
+                      variant="contained"
+                      color="secondary"
+                      size="small"
+                      disabled={!driveToHomeEnabled}
+                      onMouseDown={handleDriveToHomeMouseDown}
+                      onMouseUp={handleDriveToHomeMouseUp}
+                      onMouseLeave={handleDriveToHomeMouseLeave}
+                      onTouchStart={handleDriveToHomeMouseDown}
+                      onTouchEnd={handleDriveToHomeMouseUp}
+                      sx={{
+                        textTransform: "none",
+                        px: 1.5,
+                        py: 0.5,
+                      }}
+                    >
+                      {t("RobotCard.DriveToHome.bt")}
+                    </Button>
+                  </Box>
+                </Box>
+              </Box>
+            </>
+          )}
+        </Card>
+      )
+    },
+  ),
+)
+
+export default RobotCard

package/src/components/RobotListItem.tsx

@@ -0,0 +1,155 @@
+import ErrorIcon from "@mui/icons-material/Error"
+import { useTheme } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Divider from "@mui/material/Divider"
+import Typography from "@mui/material/Typography"
+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 ${theme.palette.divider}`,
+            background:
+              theme.palette.backgroundPaperElevation?.[8] || "#292B3F",
+            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: `${theme.palette.primary.main} !important`,
+                  },
+                  "& svg path": {
+                    fill: `${theme.palette.primary.main} !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>
+      )
+    },
+  ),
+)
+
+export default RobotListItem