@wandelbots/wandelbots-js-react-components 2.33.0-pr.feature-robot-precondition-list.372.b6e19a9 → 2.33.0-pr.feature-robot-precondition-list.372.e4998c8

package/package.json

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

package/src/components/{AppTopBar.md → AppHeader.md}

@@ -1,6 +1,6 @@
-# AppTopBar Component
+# AppHeader Component
 
-A navigation bar component that displays the current application's icon and name, with an optional dropdown menu for switching between different applications.
+A navigation header component that displays the current application's icon and name, with an optional dropdown menu for switching between different applications.
 
 ## Features
 
@@ -14,7 +14,7 @@ A navigation bar component that displays the current application's icon and name
 
 ```tsx
 import {
-  AppTopBar,
+  AppHeader,
   type AppItem,
 } from "@wandelbots/wandelbots-js-react-components"
 import { Home, Settings, Person } from "@mui/icons-material"
@@ -36,7 +36,7 @@ const apps: AppItem[] = [
 
 function MyApp() {
   return (
-    <AppTopBar
+    <AppHeader
       appIcon={<Person />}
       appName="Robot Control Studio"
       apps={apps}
@@ -48,7 +48,7 @@ function MyApp() {
 
 ## Props
 
-### AppTopBarProps
+### AppHeaderProps
 
 - **appIcon** (`ReactNode`): Icon component for the current application
 - **appName** (`string`): Display name of the current application

package/src/components/{AppTopBar.tsx → AppHeader.tsx}

@@ -28,7 +28,7 @@ export type AppItem = {
   onClick?: () => void
 }
 
-export type AppTopBarProps = {
+export type AppHeaderProps = {
   /** Current app icon */
   appIcon: ReactNode
   /** Current app name */
@@ -42,11 +42,11 @@ export type AppTopBarProps = {
 }
 
 /**
- * A top navigation bar component that displays the current app and provides
+ * A top navigation header component that displays the current app and provides
  * a dropdown menu to navigate to other apps.
  */
-export const AppTopBar = externalizeComponent(
-  observer((props: AppTopBarProps) => {
+export const AppHeader = externalizeComponent(
+  observer((props: AppHeaderProps) => {
     const { appIcon, appName, apps = [], onAppSelect, sx } = props
     const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
     const isMenuOpen = Boolean(anchorEl)
@@ -73,7 +73,18 @@ export const AppTopBar = externalizeComponent(
 
     return (
       <>
-        <AppBar position="static" sx={sx}>
+        <AppBar 
+          position="static" 
+          sx={{
+            boxShadow: "none",
+            backgroundImage: "none",
+            "& .MuiAppBar-root": {
+              backgroundImage: "none",
+              backgroundColor: "transparent",
+            },
+            ...sx,
+          }}
+        >
           <Toolbar sx={{ minHeight: "64px !important" }}>
             {/* App Icon */}
             <Box sx={{ mr: 2, display: "flex", alignItems: "center" }}>

package/src/components/DataGrid.tsx

@@ -298,9 +298,7 @@ export const WandelbotsDataGrid = externalizeComponent(
             height: "100%",
             display: "flex",
             flexDirection: "column",
-            backgroundColor:
-              theme.palette.backgroundPaperElevation?.[5] || "#202233",
-            ...sx, // Your custom styles will override the theme default
+            ...sx,
           }}
         >
           <DataGrid
@@ -347,35 +345,26 @@ export const WandelbotsDataGrid = externalizeComponent(
             }}
             sx={{
               border: "none",
-              backgroundColor: "transparent",
+
               width: "100%",
               // Remove any MUI overlays and elevation effects
               "& .MuiPaper-root": {
-                backgroundColor: "transparent !important",
                 boxShadow: "none !important",
               },
-              "& .MuiDataGrid-overlay": {
-                backgroundColor: "transparent !important",
-              },
+              "& .MuiDataGrid-overlay": {},
               "& .MuiDataGrid-main": {
                 border: "none",
-                backgroundColor: "transparent",
+
                 // Remove any surface or paper overlays
-                "& .MuiPaper-root": {
-                  backgroundColor: "transparent !important",
-                },
-              },
-              "& .MuiDataGrid-container--top [role=row]": {
-                backgroundColor: "transparent !important",
+                "& .MuiPaper-root": {},
               },
+              "& .MuiDataGrid-container--top [role=row]": {},
               "& .MuiDataGrid-topContainer": {
                 borderBottom: "none !important",
               },
               "& .MuiDataGrid-columnHeaders": {
                 border: "none",
                 borderBottom: "none !important",
-                backgroundColor:
-                  theme.palette.backgroundPaperElevation?.[5] || "#202233",
               },
               "& .MuiDataGrid-row": {
                 cursor: onRowClick ? "pointer" : "default",
@@ -383,7 +372,6 @@ export const WandelbotsDataGrid = externalizeComponent(
                 margin: "1px 0",
                 position: "relative",
                 "&:hover": {
-                  backgroundColor: "transparent !important",
                   "&::before": {
                     content: '""',
                     position: "absolute",
@@ -398,10 +386,7 @@ export const WandelbotsDataGrid = externalizeComponent(
                 },
                 // Disable MUI's built-in selection styling completely
                 "&.Mui-selected": {
-                  backgroundColor: "transparent !important",
-                  "&:hover": {
-                    backgroundColor: "transparent !important",
-                  },
+                  "&:hover": {},
                 },
                 // Highlight selected row with a distinct color using data attribute
                 ...(selectedRowId !== null && {
@@ -441,7 +426,7 @@ export const WandelbotsDataGrid = externalizeComponent(
                 border: "none",
                 paddingLeft: "40px",
                 paddingRight: "40px",
-                backgroundColor: "transparent !important",
+
                 "& .MuiDataGrid-columnHeaderTitle": {
                   color: "rgba(255, 255, 255, 0.6)",
                 },
@@ -450,18 +435,11 @@ export const WandelbotsDataGrid = externalizeComponent(
                 padding: "8px",
                 border: "none !important",
                 borderBottom: "none !important",
-                backgroundColor: "transparent !important",
-                "& .MuiBox-root": {
-                  backgroundColor: "transparent !important",
-                },
-                "& .MuiFormControl-root": {
-                  backgroundColor: "transparent !important",
-                },
-                "& .MuiInputBase-root": {
-                  backgroundColor: "transparent !important",
-                },
+
+                "& .MuiBox-root": {},
+                "& .MuiFormControl-root": {},
+                "& .MuiInputBase-root": {},
                 "& .MuiPaper-root": {
-                  backgroundColor: "transparent !important",
                   boxShadow: "none !important",
                 },
                 "& *": {
@@ -489,16 +467,12 @@ export const WandelbotsDataGrid = externalizeComponent(
                 borderBottom: "none !important",
                 borderLeft: "none !important",
                 borderRight: "none !important",
-                backgroundColor: "transparent !important",
+
                 "--rowBorderColor": "none !important",
               },
               // Remove any remaining MUI background overlays
-              "& .MuiBackdrop-root": {
-                backgroundColor: "transparent !important",
-              },
-              "& .MuiModal-backdrop": {
-                backgroundColor: "transparent !important",
-              },
+              "& .MuiBackdrop-root": {},
+              "& .MuiModal-backdrop": {},
               ...dataGridProps?.sx,
             }}
           />

package/src/components/LogStore.ts

@@ -37,4 +37,8 @@ export class LogStore {
   addError = (message: string) => {
     this.addMessage(message, "error")
   }
+
+  addDebug = (message: string) => {
+    this.addMessage(message, "debug")
+  }
 }

package/src/components/LogViewer.tsx

@@ -17,7 +17,7 @@ import { observer } from "mobx-react-lite"
 import { useEffect, useRef, useState } from "react"
 import { externalizeComponent } from "../externalizeComponent"
 
-export type LogLevel = "info" | "error" | "warning"
+export type LogLevel = "info" | "error" | "warning" | "debug"
 
 export type LogMessage = {
   id: string
@@ -37,6 +37,46 @@ export type LogViewerProps = {
   sx?: SxProps
 }
 
+/**
+ * Utility function to create a log message
+ */
+export const createLogMessage = (
+  message: string,
+  level: LogLevel,
+  id?: string,
+): LogMessage => ({
+  id: id || `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+  timestamp: new Date(),
+  message,
+  level,
+})
+
+/**
+ * Utility function to create a debug log message
+ */
+export const createDebugMessage = (message: string, id?: string): LogMessage =>
+  createLogMessage(message, "debug", id)
+
+/**
+ * Utility function to create an info log message
+ */
+export const createInfoMessage = (message: string, id?: string): LogMessage =>
+  createLogMessage(message, "info", id)
+
+/**
+ * Utility function to create a warning log message
+ */
+export const createWarningMessage = (
+  message: string,
+  id?: string,
+): LogMessage => createLogMessage(message, "warning", id)
+
+/**
+ * Utility function to create an error log message
+ */
+export const createErrorMessage = (message: string, id?: string): LogMessage =>
+  createLogMessage(message, "error", id)
+
 /**
  * A log viewer component that displays timestamped log messages with different levels.
  * Features a header with document icon and clear button, and scrollable message area.
@@ -79,6 +119,9 @@ export const LogViewer = externalizeComponent(
         case "warning":
           return theme.palette.warning.main
         case "info":
+          return theme.palette.info.main
+        case "debug":
+          return theme.palette.text.disabled
         default:
           return theme.palette.text.secondary
       }

package/src/components/TabBar.tsx

@@ -83,7 +83,7 @@ export const TabBar = externalizeComponent(
                 display: "none", // Hide the default indicator
               },
               "& .MuiTabs-flexContainer": {
-                gap: 4,
+                gap: 2,
               },
             }}
           >

package/src/index.ts

@@ -1,7 +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/AppHeader"
 export * from "./components/CycleTimer"
 export * from "./components/DataGrid"
 export * from "./components/jogging/JoggingCartesianAxisControl"