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

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,161 @@
+import { useTheme } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Chip from "@mui/material/Chip"
+import Typography from "@mui/material/Typography"
+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",
+  /** Safety cell is open and robot cannot operate */
+  CELL_OPEN = "CELL_OPEN",
+  /** Emergency stop is active and robot cannot operate */
+  E_STOP = "E_STOP",
+  /** Robot is in manual mode and requires manual intervention */
+  MANUAL_MODE = "MANUAL_MODE",
+  /** 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 six states: Precondition not fulfilled, Robot disconnected, Cell open, E-Stop, Manual mode, 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.CELL_OPEN:
+          return {
+            label: t("RobotSetupReadinessIndicator.CellOpen.lb"),
+            indicatorColor: theme.palette.error.main,
+            backgroundColor:
+              theme.palette.backgroundPaperElevation?.[11] ||
+              theme.palette.background.paper,
+            textColor: theme.palette.secondary.contrastText,
+          }
+        case RobotSetupReadinessState.E_STOP:
+          return {
+            label: t("RobotSetupReadinessIndicator.EStop.lb"),
+            indicatorColor: theme.palette.error.main,
+            backgroundColor:
+              theme.palette.backgroundPaperElevation?.[11] ||
+              theme.palette.background.paper,
+            textColor: theme.palette.secondary.contrastText,
+          }
+        case RobotSetupReadinessState.MANUAL_MODE:
+          return {
+            label: t("RobotSetupReadinessIndicator.ManualMode.lb"),
+            indicatorColor: theme.palette.error.main,
+            backgroundColor:
+              theme.palette.backgroundPaperElevation?.[11] ||
+              theme.palette.background.paper,
+            textColor: theme.palette.secondary.contrastText,
+          }
+        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,
+          },
+        }}
+      />
+    )
+  }),
+)
+
+export default RobotSetupReadinessIndicator

package/src/components/SelectableFab.tsx

@@ -0,0 +1,52 @@
+import { styled } from "@mui/material/styles"
+import Fab, { type FabProps } from "@mui/material/Fab"
+const StyledSelectableFab = styled(Fab, {
+  shouldForwardProp: (prop) => prop !== "selected",
+})<CodeFabProps>(({ theme }) => ({
+  borderRadius: "20px",
+
+  "&:hover": {
+    background: theme.palette.backgroundPaperElevation?.[7],
+  },
+
+  variants: [
+    {
+      props: ({ selected }) => !selected,
+      style: {
+        background: theme.palette.backgroundPaperElevation?.[0],
+        color: theme.palette.action.disabled,
+        "> img": {
+          opacity: 0.4,
+        },
+      },
+    },
+    {
+      props: ({ selected }) => selected,
+      style: {
+        background: theme.palette.backgroundPaperElevation?.[11],
+        border: `1px solid ${theme.palette.divider}`,
+        color: theme.palette.primary.contrastText,
+      },
+    },
+  ],
+}))
+
+type CodeFabProps = {
+  selected?: boolean
+  ref?: React.Ref<HTMLButtonElement>
+} & Omit<FabProps, "variant" | "color">
+
+export const SelectableFab = (props: CodeFabProps) => {
+  const { ref, ...otherProps } = props
+  return (
+    <StyledSelectableFab
+      ref={ref}
+      selected={props.selected}
+      {...otherProps}
+      color={"secondary"}
+      variant="circular"
+    />
+  )
+}
+
+export default SelectableFab

package/src/components/TabBar.tsx

@@ -0,0 +1,325 @@
+import type { SxProps } from "@mui/material/styles"
+import Badge from "@mui/material/Badge"
+import Box from "@mui/material/Box"
+import Tab from "@mui/material/Tab"
+import Tabs from "@mui/material/Tabs"
+import { observer } from "mobx-react-lite"
+import { useEffect, 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
+  /** Optional badge configuration */
+  badge?: {
+    /** Badge content (number or string) */
+    content: React.ReactNode
+    /** Badge color variant */
+    color?:
+      | "default"
+      | "primary"
+      | "secondary"
+      | "error"
+      | "info"
+      | "success"
+      | "warning"
+    /** Maximum number to display (e.g., 99+) */
+    max?: number
+    /** Show badge even when content is zero */
+    showZero?: boolean
+  }
+}
+
+export interface TabBarProps {
+  /** Array of tab items to display */
+  items: TabItem[]
+  /** Controlled active tab index */
+  activeTab?: number
+  /** Default active tab index */
+  defaultActiveTab?: number
+  /** Callback when tab changes */
+  onTabChange?: (index: number) => void
+  /** Additional styling */
+  sx?: SxProps
+  /** Ref to the root container element */
+  ref?: React.Ref<HTMLDivElement>
+}
+
+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>
+  )
+}
+
+/**
+ * Wrapper component that filters out MUI Tabs internal props
+ * to prevent them from being passed to DOM elements
+ */
+interface TabWrapperProps {
+  children: React.ReactNode
+  // biome-ignore lint/suspicious/noExplicitAny: pre-biome code
+  [key: string]: any
+}
+
+function TabWrapper({ children, ...props }: TabWrapperProps) {
+  // Filter out MUI Tabs internal props that shouldn't reach the DOM
+  const {
+    fullWidth,
+    indicator,
+    onChange,
+    orientation,
+    scrollButtons,
+    selectionFollowsFocus,
+    textColor,
+    value,
+    variant,
+    ...cleanProps
+  } = props
+
+  return <Box {...cleanProps}>{children}</Box>
+}
+
+/**
+ * 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,
+      activeTab,
+      defaultActiveTab = 0,
+      onTabChange,
+      sx,
+      ref,
+    } = props
+    const isControlled = activeTab !== undefined
+    const [uncontrolledActiveTab, setUncontrolledActiveTab] =
+      useState(defaultActiveTab)
+
+    // biome-ignore lint/style/noNonNullAssertion: pre-biome code
+    const currentValue = isControlled ? activeTab! : uncontrolledActiveTab
+
+    // Keep uncontrolled state in range when items change
+    useEffect(() => {
+      if (isControlled) return
+      if (items.length === 0) return
+      if (
+        uncontrolledActiveTab < 0 ||
+        uncontrolledActiveTab > items.length - 1
+      ) {
+        setUncontrolledActiveTab(0)
+      }
+    }, [items.length, isControlled, uncontrolledActiveTab])
+
+    const handleTabChange = (
+      _event: React.SyntheticEvent,
+      newValue: number,
+    ) => {
+      if (!isControlled) {
+        setUncontrolledActiveTab(newValue)
+      }
+      onTabChange?.(newValue)
+    }
+
+    return (
+      <Box
+        ref={ref}
+        sx={{ height: "100%", display: "flex", flexDirection: "column", ...sx }}
+      >
+        {/* Tabs */}
+        <Box
+          sx={{
+            px: 0,
+            py: 0,
+            overflow: "visible",
+            position: "relative",
+            // Extra padding to prevent badge clipping
+            // Top: accommodates badge positioned at top: -6px with 20px height
+            // Right: accommodates badge positioned at right: -8px with 20px width
+            paddingTop: (theme) => theme.spacing(2), // 16px
+            paddingRight: (theme) => theme.spacing(2.5), // 20px
+          }}
+        >
+          <Tabs
+            value={currentValue}
+            onChange={handleTabChange}
+            sx={{
+              minHeight: "32px",
+              backgroundColor: "transparent",
+              overflow: "visible",
+              "& .MuiTabs-indicator": {
+                display: "none", // Hide the default indicator
+              },
+              "& .MuiTabs-flexContainer": {
+                gap: 2,
+                overflow: "visible",
+                paddingTop: 0,
+                paddingBottom: 0,
+              },
+              "& .MuiTabs-scroller": {
+                overflow: "visible !important",
+              },
+              "& .MuiTab-root": {
+                overflow: "visible",
+              },
+            }}
+          >
+            {items.map((item, index) => {
+              // Helper functions for badge logic
+              const getBadgeContent = () => {
+                if (!item.badge) return undefined
+                const content = item.badge.content
+                const max = item.badge.max
+
+                // Handle numeric content with max limit
+                if (typeof content === "number" && max && content > max) {
+                  return `${max}+`
+                }
+
+                return content
+              }
+
+              const shouldShowBadge = () => {
+                if (!item.badge) return false
+                const content = item.badge.content
+                const showZero = item.badge.showZero
+
+                // If content is 0 and showZero is false, hide badge
+                if (content === 0 && !showZero) return false
+
+                return true
+              }
+
+              const badgeContent = getBadgeContent()
+              const showBadge = shouldShowBadge()
+
+              const handleTabClick = () => {
+                if (!isControlled) {
+                  setUncontrolledActiveTab(index)
+                }
+                onTabChange?.(index)
+              }
+
+              const tab = (
+                <Tab
+                  key={item.id}
+                  label={item.label}
+                  icon={item.icon}
+                  iconPosition="start"
+                  disableRipple
+                  onClick={handleTabClick}
+                  sx={{
+                    minHeight: "32px",
+                    height: "32px",
+                    padding: "0px 10px",
+                    borderRadius: "12px",
+                    backgroundColor: (theme) =>
+                      theme.palette.backgroundPaperElevation?.[11] || "#32344B",
+                    color: "text.primary",
+                    opacity: currentValue === index ? 1 : 0.38,
+                    fontSize: "13px",
+                    transition: "all 0.2s ease-in-out",
+                    position: "relative",
+                    overflow: "visible",
+                    "&:hover": {
+                      opacity: currentValue === index ? 1 : 0.6,
+                    },
+                    "&.Mui-selected": {
+                      opacity: 1,
+                      backgroundColor: (theme) =>
+                        theme.palette.backgroundPaperElevation?.[11] ||
+                        "#32344B",
+                      color: "text.primary",
+                    },
+                    "&:focus": {
+                      outline: "none",
+                    },
+                    "&:active": {
+                      transform: "none",
+                    },
+                  }}
+                />
+              )
+
+              if (!showBadge) {
+                return tab
+              }
+
+              return (
+                <TabWrapper
+                  key={item.id}
+                  component="span"
+                  sx={{ display: "inline-flex" }}
+                >
+                  <Badge
+                    badgeContent={badgeContent}
+                    color={item.badge?.color || "error"}
+                    max={item.badge?.max}
+                    showZero={item.badge?.showZero}
+                    anchorOrigin={{
+                      vertical: "top",
+                      horizontal: "right",
+                    }}
+                    overlap="rectangular"
+                    sx={{
+                      "& .MuiBadge-badge": {
+                        // Ensure badge doesn't inherit tab opacity
+                        opacity: "1 !important",
+                      },
+                    }}
+                  >
+                    {tab}
+                  </Badge>
+                </TabWrapper>
+              )
+            })}
+          </Tabs>
+        </Box>
+
+        {/* Border line */}
+        <Box
+          sx={{
+            mt: (theme) => theme.spacing(2),
+            borderBottom: 1,
+            borderColor: "divider",
+          }}
+        />
+
+        {/* Tab Content */}
+        <Box sx={{ flex: 1, overflow: "auto" }}>
+          {items.map((item, index) => (
+            <TabPanel key={item.id} value={currentValue} index={index}>
+              {item.content}
+            </TabPanel>
+          ))}
+        </Box>
+      </Box>
+    )
+  }),
+)
+
+export default TabBar

package/src/components/ThemeSelect.tsx

@@ -0,0 +1,51 @@
+// TODO implement this as part of theme?
+
+import Select from "@mui/material/Select"
+import { useTheme, type SxProps } from "@mui/material/styles"
+import defaultsDeep from "lodash-es/defaultsDeep.js"
+
+type ThemeSelectProps = {
+  kind: "filled" | "outlined" | "text"
+} & React.ComponentProps<typeof Select>
+
+export const ThemeSelect = ({ kind, sx, ...rest }: ThemeSelectProps) => {
+  const theme = useTheme()
+
+  let style: SxProps = defaultsDeep(sx, {
+    backgroundColor: theme.palette.background.default,
+    borderRadius: "10px",
+    borderStyle: "none",
+    color: "currentColor",
+    "& > div": {
+      padding: "4px 16px",
+    },
+    "& fieldset": {
+      border: "none",
+    },
+  })
+
+  if (kind === "outlined") {
+    style = defaultsDeep(
+      {
+        backgroundColor: "transparent",
+      },
+      style,
+    )
+  } else if (kind === "text") {
+    style = defaultsDeep(
+      {
+        backgroundColor: "transparent",
+
+        "& .MuiSvgIcon-root": {
+          borderStyle: "none",
+          color: "inherit",
+        },
+      },
+      style,
+    )
+  }
+
+  return <Select sx={style} {...rest} />
+}
+
+export default ThemeSelect

package/src/components/Timer/Timer.ts

@@ -0,0 +1,4 @@
+export { Timer } from "./index"
+export type { TimerControls, TimerProps } from "./types"
+
+export { Timer as default } from "./index"