@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2-pr.fix-performance-issues.594.c24b644

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

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

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

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

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