@wandelbots/wandelbots-js-react-components 2.33.0-pr.feature-robot-precondition-list.372.56785bf → 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.56785bf",
+  "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/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"