@wandelbots/wandelbots-js-react-components 2.34.2-pr.feature-robot-precondition-list.372.9dfd57e → 2.34.2

package/src/components/RobotListItem.tsx

@@ -1,150 +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 ${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>
-      )
-    },
-  ),
-)

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: theme.palette.secondary.contrastText,
-          }
-        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: theme.palette.secondary.contrastText,
-          }
-        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: theme.palette.secondary.contrastText,
-          }
-      }
-    }
-
-    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/TabBar.tsx

@@ -1,144 +0,0 @@
-import type { SxProps } from "@mui/material"
-import { Box, Tab, Tabs } from "@mui/material"
-import { observer } from "mobx-react-lite"
-import { useState } from "react"
-import { externalizeComponent } from "../externalizeComponent"
-
-export interface TabItem {
-  /** Unique identifier for the tab */
-  id: string
-  /** Label text for the tab */
-  label: string
-  /** Content to display when tab is active */
-  content: React.ReactNode
-  /** Optional icon component to display with the tab */
-  icon?: React.ReactElement
-}
-
-export interface TabBarProps {
-  /** Array of tab items to display */
-  items: TabItem[]
-  /** Default active tab index */
-  defaultActiveTab?: number
-  /** Callback when tab changes */
-  onTabChange?: (index: number) => void
-  /** Additional styling */
-  sx?: SxProps
-}
-
-interface TabPanelProps {
-  children?: React.ReactNode
-  index: number
-  value: number
-}
-
-function TabPanel(props: TabPanelProps) {
-  const { children, value, index, ...other } = props
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`tabpanel-${index}`}
-      aria-labelledby={`tab-${index}`}
-      {...other}
-    >
-      {value === index && <Box>{children}</Box>}
-    </div>
-  )
-}
-
-/**
- * A styled tab bar component with configurable tabs and content.
- * Features the same styling as the Wandelbots design system with rounded tabs
- * and smooth transitions.
- */
-export const TabBar = externalizeComponent(
-  observer((props: TabBarProps) => {
-    const { items, defaultActiveTab = 0, onTabChange, sx } = props
-    const [activeTab, setActiveTab] = useState(defaultActiveTab)
-
-    const handleTabChange = (
-      _event: React.SyntheticEvent,
-      newValue: number,
-    ) => {
-      setActiveTab(newValue)
-      onTabChange?.(newValue)
-    }
-
-    return (
-      <Box
-        sx={{ height: "100%", display: "flex", flexDirection: "column", ...sx }}
-      >
-        {/* Tabs */}
-        <Box sx={{ px: 3, pt: 3, pb: 3 }}>
-          <Tabs
-            value={activeTab}
-            onChange={handleTabChange}
-            sx={{
-              minHeight: "auto",
-              backgroundColor: "transparent",
-              mt: 3,
-              "& .MuiTabs-indicator": {
-                display: "none", // Hide the default indicator
-              },
-              "& .MuiTabs-flexContainer": {
-                gap: 2,
-              },
-            }}
-          >
-            {items.map((item, index) => (
-              <Tab
-                key={item.id}
-                label={item.label}
-                icon={item.icon}
-                iconPosition="start"
-                disableRipple
-                sx={{
-                  minHeight: "auto",
-                  minWidth: "auto",
-                  padding: "4px 8px",
-                  borderRadius: "10px",
-                  backgroundColor: (theme) =>
-                    theme.palette.backgroundPaperElevation?.[11] || "#32344B",
-                  color: "text.primary",
-                  opacity: activeTab === index ? 1 : 0.38,
-                  textTransform: "none",
-                  fontWeight: 500,
-                  transition: "all 0.2s ease-in-out",
-                  "&:hover": {
-                    opacity: activeTab === index ? 1 : 0.6,
-                  },
-                  "&.Mui-selected": {
-                    opacity: 1,
-                    backgroundColor: (theme) =>
-                      theme.palette.backgroundPaperElevation?.[11] || "#32344B",
-                    color: "text.primary",
-                  },
-                  "&:focus": {
-                    outline: "none",
-                  },
-                  "&:active": {
-                    transform: "none",
-                  },
-                }}
-              />
-            ))}
-          </Tabs>
-        </Box>
-
-        {/* Border line */}
-        <Box sx={{ mx: 3, borderBottom: 1, borderColor: "divider" }} />
-
-        {/* Tab Content */}
-        <Box sx={{ flex: 1, overflow: "auto" }}>
-          {items.map((item, index) => (
-            <TabPanel key={item.id} value={activeTab} index={index}>
-              {item.content}
-            </TabPanel>
-          ))}
-        </Box>
-      </Box>
-    )
-  }),
-)

package/src/components/robots/manufacturerHomePositions.ts

@@ -1,76 +0,0 @@
-import { Manufacturer } from "@wandelbots/nova-api/v1"
-
-/**
- * Default home configs for different robot manufacturers.
- * These joint configurations represent safe home configs for each manufacturer's robots.
- * All angles are in radians.
- */
-export const MANUFACTURER_HOME_CONFIGS: Record<Manufacturer, number[]> = {
-  [Manufacturer.Abb]: [0.0, 0.0, 0.0, 0.0, Math.PI / 2, 0.0, 0.0],
-  [Manufacturer.Fanuc]: [0.0, 0.0, 0.0, 0.0, -Math.PI / 2, 0.0, 0.0],
-  [Manufacturer.Yaskawa]: [0.0, 0.0, 0.0, 0.0, -Math.PI / 2, 0.0, 0.0],
-  [Manufacturer.Kuka]: [
-    0.0,
-    -Math.PI / 2,
-    Math.PI / 2,
-    0.0,
-    Math.PI / 2,
-    0.0,
-    0.0,
-  ],
-  [Manufacturer.Universalrobots]: [
-    0.0,
-    -Math.PI / 2,
-    -Math.PI / 2,
-    -Math.PI / 2,
-    Math.PI / 2,
-    -Math.PI / 2,
-    0.0,
-  ],
-}
-
-/**
- * Extracts manufacturer from modelFromController string.
- * @param modelFromController - String in format "Manufacturer_ModelName"
- * @returns Manufacturer enum value or null if not recognized
- */
-export function extractManufacturer(
-  modelFromController: string,
-): Manufacturer | null {
-  const [manufacturerString] = modelFromController.split("_")
-
-  // Handle the mapping from string to enum
-  switch (manufacturerString) {
-    case "ABB":
-      return Manufacturer.Abb
-    case "FANUC":
-      return Manufacturer.Fanuc
-    case "YASKAWA":
-      return Manufacturer.Yaskawa
-    case "KUKA":
-      return Manufacturer.Kuka
-    case "UniversalRobots":
-      return Manufacturer.Universalrobots
-    default:
-      return null
-  }
-}
-
-/**
- * Gets the default home config for a robot based on its model identifier.
- * @param modelFromController - String in format "Manufacturer_ModelName"
- * @param defaultJointConfig - Optional custom default configuration to use if manufacturer not found
- * @returns Array of joint positions in radians, or null if no configuration available
- */
-export function getDefaultHomeConfig(
-  modelFromController: string,
-  defaultJointConfig?: number[],
-): number[] | null {
-  const manufacturer = extractManufacturer(modelFromController)
-
-  if (manufacturer && manufacturer in MANUFACTURER_HOME_CONFIGS) {
-    return MANUFACTURER_HOME_CONFIGS[manufacturer]
-  }
-
-  return defaultJointConfig || null
-}

package/src/icons/DropdownArrowIcon.tsx

@@ -1,13 +0,0 @@
-import { SvgIcon, type SvgIconProps } from "@mui/material"
-
-export const DropdownArrowIcon = (props: SvgIconProps) => {
-  return (
-    <SvgIcon {...props} viewBox="0 0 10 8">
-      <path
-        d="M8.825 0.9125L5 4.72917L1.175 0.9125L0 2.0875L5 7.0875L10 2.0875L8.825 0.9125Z"
-        fill="currentColor"
-        fillOpacity="0.56"
-      />
-    </SvgIcon>
-  )
-}

package/src/icons/chevronDown.svg

@@ -1,3 +0,0 @@
-<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.825 0.9125L5 4.72917L1.175 0.9125L0 2.0875L5 7.0875L10 2.0875L8.825 0.9125Z" fill="currentColor"/>
-</svg>