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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.33.0-pr.feature-robot-precondition-list.372.3ad6c62",
+  "version": "2.33.0-pr.feature-robot-precondition-list.372.cb3db34",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/AppTopBar.md

@@ -0,0 +1,84 @@
+# AppTopBar Component
+
+A navigation bar component that displays the current application's icon and name, with an optional dropdown menu for switching between different applications.
+
+## Features
+
+- **App Branding**: Displays the current app's icon and name with custom typography
+- **App Switching**: Dropdown menu with blur backdrop for navigating to other apps
+- **Responsive Design**: Uses MUI AppBar for consistent styling
+- **Accessibility**: Proper ARIA labels and keyboard navigation
+- **Flexible Navigation**: Supports both URL navigation and custom click handlers
+
+## Usage
+
+```tsx
+import {
+  AppTopBar,
+  type AppItem,
+} from "@wandelbots/wandelbots-js-react-components"
+import { Home, Settings, Person } from "@mui/icons-material"
+
+const apps: AppItem[] = [
+  {
+    id: "dashboard",
+    name: "Dashboard",
+    icon: <Home />,
+    href: "/dashboard",
+  },
+  {
+    id: "settings",
+    name: "Settings",
+    icon: <Settings />,
+    onClick: () => navigateToSettings(),
+  },
+]
+
+function MyApp() {
+  return (
+    <AppTopBar
+      appIcon={<Person />}
+      appName="Robot Control Studio"
+      apps={apps}
+      onAppSelect={(app) => console.log("Selected:", app.name)}
+    />
+  )
+}
+```
+
+## Props
+
+### AppTopBarProps
+
+- **appIcon** (`ReactNode`): Icon component for the current application
+- **appName** (`string`): Display name of the current application
+- **apps** (`AppItem[]`, optional): Array of available apps for the dropdown menu
+- **onAppSelect** (`(app: AppItem) => void`, optional): Callback when an app is selected
+- **sx** (`SxProps`, optional): Additional MUI styling
+
+### AppItem
+
+- **id** (`string`): Unique identifier for the app
+- **name** (`string`): Display name of the app
+- **icon** (`ReactNode`): Icon component to display
+- **href** (`string`, optional): URL to navigate to
+- **onClick** (`() => void`, optional): Custom click handler
+
+## Styling
+
+The component uses the specified typography:
+
+- Font weight: 700 (Bold)
+- Font size: 20px
+- Line height: 24px
+- Letter spacing: 0px
+
+The dropdown arrow uses a custom SVG icon with 56% opacity.
+
+## Behavior
+
+- When apps are provided, a dropdown arrow appears on the right side
+- Clicking the arrow opens a menu with available apps
+- The background blurs when the menu is open to focus attention
+- Apps can navigate via URL (`href`) or custom handler (`onClick`)
+- The menu closes automatically when an app is selected or when clicking outside

package/src/components/AppTopBar.tsx

@@ -0,0 +1,188 @@
+import {
+  alpha,
+  AppBar,
+  Backdrop,
+  Box,
+  IconButton,
+  Menu,
+  MenuItem,
+  type SxProps,
+  Toolbar,
+  Typography,
+} from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { type MouseEvent, type ReactNode, useState } from "react"
+import { externalizeComponent } from "../externalizeComponent"
+import { DropdownArrowIcon } from "../icons/DropdownArrowIcon"
+
+export type AppItem = {
+  /** Unique identifier for the app */
+  id: string
+  /** Display name of the app */
+  name: string
+  /** Icon component to display */
+  icon: ReactNode
+  /** URL or callback to navigate to the app */
+  href?: string
+  /** Click handler for the app */
+  onClick?: () => void
+}
+
+export type AppTopBarProps = {
+  /** Current app icon */
+  appIcon: ReactNode
+  /** Current app name */
+  appName: string
+  /** List of other available apps */
+  apps?: AppItem[]
+  /** Callback when an app is selected */
+  onAppSelect?: (app: AppItem) => void
+  /** Additional styling */
+  sx?: SxProps
+}
+
+/**
+ * A top navigation bar component that displays the current app and provides
+ * a dropdown menu to navigate to other apps.
+ */
+export const AppTopBar = externalizeComponent(
+  observer((props: AppTopBarProps) => {
+    const { appIcon, appName, apps = [], onAppSelect, sx } = props
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+    const isMenuOpen = Boolean(anchorEl)
+
+    const handleMenuOpen = (event: MouseEvent<HTMLElement>) => {
+      setAnchorEl(event.currentTarget)
+    }
+
+    const handleMenuClose = () => {
+      setAnchorEl(null)
+    }
+
+    const handleAppSelect = (app: AppItem) => {
+      handleMenuClose()
+
+      if (app.onClick) {
+        app.onClick()
+      } else if (app.href) {
+        window.location.href = app.href
+      }
+
+      onAppSelect?.(app)
+    }
+
+    return (
+      <>
+        <AppBar position="static" sx={sx}>
+          <Toolbar sx={{ minHeight: "64px !important" }}>
+            {/* App Icon */}
+            <Box sx={{ mr: 2, display: "flex", alignItems: "center" }}>
+              {appIcon}
+            </Box>
+
+            {/* App Name and Dropdown */}
+            <Box sx={{ display: "flex", alignItems: "center", flexGrow: 1 }}>
+              <Typography
+                variant="h6"
+                component="div"
+                sx={{
+                  fontWeight: 700,
+                  fontSize: "20px",
+                  lineHeight: "24px",
+                  letterSpacing: 0,
+                }}
+              >
+                {appName}
+              </Typography>
+
+              {/* Dropdown Button */}
+              {apps.length > 0 && (
+                <IconButton
+                  color="inherit"
+                  aria-label="switch app"
+                  aria-controls="app-menu"
+                  aria-haspopup="true"
+                  onClick={handleMenuOpen}
+                  sx={{
+                    ml: 2,
+                    width: 30,
+                    height: 30,
+                    borderRadius: "8px",
+                    padding: "5px",
+                    backgroundColor: (theme) =>
+                      alpha(theme.palette.common.white, 0.1),
+                    opacity: 1,
+                    "&:hover": {
+                      backgroundColor: (theme) =>
+                        alpha(theme.palette.common.white, 0.16),
+                    },
+                    "& .MuiSvgIcon-root": {
+                      fontSize: "10px",
+                      width: "10px",
+                      height: "8px",
+                    },
+                  }}
+                >
+                  <DropdownArrowIcon />
+                </IconButton>
+              )}
+            </Box>
+          </Toolbar>
+        </AppBar>
+
+        {/* Backdrop for blur effect */}
+        <Backdrop
+          open={isMenuOpen}
+          onClick={handleMenuClose}
+          sx={{
+            backdropFilter: "blur(4px)",
+            backgroundColor: "rgba(0, 0, 0, 0.3)",
+            zIndex: (theme) => theme.zIndex.modal - 1,
+          }}
+        />
+
+        {/* Dropdown Menu */}
+        <Menu
+          id="app-menu"
+          anchorEl={anchorEl}
+          open={isMenuOpen}
+          onClose={handleMenuClose}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "left",
+          }}
+          transformOrigin={{
+            vertical: "top",
+            horizontal: "left",
+          }}
+          sx={{
+            zIndex: (theme) => theme.zIndex.modal,
+            "& .MuiPaper-root": {
+              minWidth: 200,
+              mt: 1,
+            },
+          }}
+        >
+          {apps.map((app) => (
+            <MenuItem
+              key={app.id}
+              onClick={() => handleAppSelect(app)}
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+                py: 1.5,
+                px: 2,
+              }}
+            >
+              <Box sx={{ display: "flex", alignItems: "center" }}>
+                {app.icon}
+              </Box>
+              <Typography variant="body1">{app.name}</Typography>
+            </MenuItem>
+          ))}
+        </Menu>
+      </>
+    )
+  }),
+)

package/src/components/DataGrid.tsx

@@ -1,7 +1,7 @@
 import ClearIcon from "@mui/icons-material/Clear"
 import FilterListIcon from "@mui/icons-material/FilterList"
 import SearchIcon from "@mui/icons-material/Search"
-import { Box, Divider, Typography } from "@mui/material"
+import { Box, Divider, Typography, useTheme } from "@mui/material"
 import {
   DataGrid,
   type DataGridProps,
@@ -101,6 +101,8 @@ export const WandelbotsDataGrid = externalizeComponent(
       CustomToolbar,
       selectFirstByDefault = false,
     }: WandelbotsDataGridProps<T>) => {
+      const theme = useTheme()
+
       // Internal state for selection when not controlled
       const [internalSelectedItem, setInternalSelectedItem] =
         useState<T | null>(null)
@@ -276,7 +278,8 @@ export const WandelbotsDataGrid = externalizeComponent(
             height: "100%",
             display: "flex",
             flexDirection: "column",
-            background: "var(--background-paper-elevation-5, #202233)",
+            background:
+              theme.palette.backgroundPaperElevation?.[5] || "#202233",
           }}
         >
           <DataGrid
@@ -331,12 +334,13 @@ export const WandelbotsDataGrid = externalizeComponent(
               "& .MuiDataGrid-columnHeaders": {
                 border: "none",
                 borderBottom: "none !important",
-                backgroundColor: "var(--background-paper-elevation-5, #202233)",
+                backgroundColor:
+                  theme.palette.backgroundPaperElevation?.[5] || "#202233",
               },
               "& .MuiDataGrid-row": {
                 cursor: onRowClick ? "pointer" : "default",
                 border: "none",
-                margin: "0px 0",
+                margin: "1px 0",
                 position: "relative",
                 "&:hover": {
                   backgroundColor: "transparent !important",

package/src/components/RobotCard.tsx

@@ -252,7 +252,6 @@ export const RobotCard = externalizeComponent(
         <Card
           ref={cardRef}
           className={className}
-          elevation={5}
           sx={{
             width: "100%",
             height: "100%",
@@ -264,10 +263,12 @@ export const RobotCard = externalizeComponent(
             minHeight: isLandscape
               ? { xs: 160, sm: 200, md: 250 }
               : { xs: 200, sm: 280, md: 350 },
-            border:
-              "1px solid var(--secondary-_states-outlinedBorder, #FFFFFF1F)",
+            border: `1px solid ${theme.palette.divider}`,
             borderRadius: "18px",
             boxShadow: "none",
+            backgroundColor:
+              theme.palette.backgroundPaperElevation?.[8] || "#2A2A3F",
+            backgroundImage: "none", // Override any gradient from elevation
           }}
         >
           {isLandscape ? (
@@ -367,7 +368,7 @@ export const RobotCard = externalizeComponent(
                       variant="body1"
                       sx={{
                         mb: 0,
-                        color: "var(--text-secondary, #FFFFFFB2)",
+                        color: theme.palette.text.secondary,
                         textAlign: "left",
                       }}
                     >
@@ -511,7 +512,7 @@ export const RobotCard = externalizeComponent(
                     variant="body1"
                     sx={{
                       mb: 0,
-                      color: "var(--text-secondary, #FFFFFFB2)",
+                      color: theme.palette.text.secondary,
                     }}
                   >
                     {t("RobotCard.Runtime.lb")}

package/src/components/RobotListItem.tsx

@@ -58,9 +58,9 @@ export const RobotListItem = externalizeComponent(
         <Box
           className={className}
           sx={{
-            border:
-              "1px solid var(--secondary-_states-outlinedBorder, #FFFFFF1F)",
-            background: "var(--background-paper-elevation-8, #292B3E)",
+            border: `1px solid ${theme.palette.divider}`,
+            background:
+              theme.palette.backgroundPaperElevation?.[8] || "#292B3F",
             height: 80,
             minHeight: "80px",
             borderRadius: "8px",
@@ -90,10 +90,10 @@ export const RobotListItem = externalizeComponent(
                   width: 24,
                   height: 24,
                   "& svg": {
-                    fill: "var(--primary-main, #8E56FC) !important",
+                    fill: `${theme.palette.primary.main} !important`,
                   },
                   "& svg path": {
-                    fill: "var(--primary-main, #8E56FC) !important",
+                    fill: `${theme.palette.primary.main} !important`,
                   },
                 }}
               >

package/src/components/RobotSetupReadinessIndicator.tsx

@@ -47,7 +47,7 @@ export const RobotSetupReadinessIndicator = externalizeComponent(
             backgroundColor:
               theme.palette.backgroundPaperElevation?.[11] ||
               theme.palette.background.paper,
-            textColor: "var(--secondary-contrast, #FFFFFFDE)",
+            textColor: theme.palette.secondary.contrastText,
           }
         case RobotSetupReadinessState.ROBOT_DISCONNECTED:
           return {
@@ -56,7 +56,7 @@ export const RobotSetupReadinessIndicator = externalizeComponent(
             backgroundColor:
               theme.palette.backgroundPaperElevation?.[11] ||
               theme.palette.background.paper,
-            textColor: "var(--secondary-contrast, #FFFFFFDE)",
+            textColor: theme.palette.secondary.contrastText,
           }
         case RobotSetupReadinessState.PRECONDITION_NOT_FULFILLED:
         default:
@@ -68,7 +68,7 @@ export const RobotSetupReadinessIndicator = externalizeComponent(
             backgroundColor:
               theme.palette.backgroundPaperElevation?.[11] ||
               theme.palette.background.paper,
-            textColor: "var(--secondary-contrast, #FFFFFFDE)",
+            textColor: theme.palette.secondary.contrastText,
           }
       }
     }

package/src/components/TabBar.tsx

@@ -0,0 +1,144 @@
+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: 4,
+              },
+            }}
+          >
+            {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/icons/DropdownArrowIcon.tsx

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

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

package/src/icons/index.ts

@@ -1,4 +1,5 @@
 export { default as ArrowForwardFilledIcon } from "./arrowForwardFilled.svg"
+export { default as ChevronDownIcon } from "./chevronDown.svg"
 export { default as ExpandFilledIcon } from "./expandFilled.svg"
 export { default as HomeIcon } from "./home.svg"
 export { default as InfoOutlinedIcon } from "./infoOutlined.svg"

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./components/3d-viewport/PresetEnvironment"
 export * from "./components/3d-viewport/SafetyZonesRenderer"
 export * from "./components/3d-viewport/TrajectoryRenderer"
+export * from "./components/AppTopBar"
 export * from "./components/CycleTimer"
 export * from "./components/DataGrid"
 export * from "./components/jogging/JoggingCartesianAxisControl"
@@ -25,6 +26,7 @@ export * from "./components/robots/SupportedRobot"
 export * from "./components/RobotSetupReadinessIndicator"
 export * from "./components/safetyBar/SafetyBar"
 export * from "./components/SelectableFab"
+export * from "./components/TabBar"
 export * from "./components/utils/hooks"
 export * from "./components/utils/interpolation"
 export * from "./components/VelocitySlider"