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

package/package.json

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

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/LogPanel.tsx

@@ -21,7 +21,6 @@ export type LogPanelProps = {
  *
  * @example
  * ```tsx
- * // Simple usage with automatic state management
  * function MyComponent() {
  *   const [logStore, setLogStore] = useState<LogStore>()
  *
@@ -38,21 +37,6 @@ export type LogPanelProps = {
  * logStore?.addError("Something went wrong")
  * logStore?.addWarning("Warning message")
  * ```
- *
- * @example
- * ```tsx
- * // Usage with external store for shared state
- * function MyApp() {
- *   const logStore = useMemo(() => new LogStore(), [])
- *
- *   return (
- *     <div>
- *       <LogPanel store={logStore} height={300} />
- *       <SomeOtherComponent onError={(msg) => logStore.addError(msg)} />
- *     </div>
- *   )
- * }
- * ```
  */
 export const LogPanel = externalizeComponent(
   observer((props: LogPanelProps) => {

package/src/components/LogViewer.tsx

@@ -5,7 +5,14 @@ import {
   ExpandMore,
 } from "@mui/icons-material"
 import type { SxProps } from "@mui/material"
-import { Box, Button, IconButton, Paper, Typography } from "@mui/material"
+import {
+  Box,
+  Button,
+  IconButton,
+  Paper,
+  Typography,
+  useTheme,
+} from "@mui/material"
 import { observer } from "mobx-react-lite"
 import { useEffect, useRef, useState } from "react"
 import { externalizeComponent } from "../externalizeComponent"
@@ -37,6 +44,7 @@ export type LogViewerProps = {
 export const LogViewer = externalizeComponent(
   observer((props: LogViewerProps) => {
     const { messages = [], onClear, height = 400, sx } = props
+    const theme = useTheme()
     const scrollContainerRef = useRef<HTMLDivElement>(null)
 
     // Auto-scroll to bottom when new messages are added
@@ -67,12 +75,12 @@ export const LogViewer = externalizeComponent(
     const getMessageColor = (level: LogLevel) => {
       switch (level) {
         case "error":
-          return "var(--error-main, #EF5350)"
+          return theme.palette.error.main
         case "warning":
-          return "var(--warning-main, #FF9800)"
+          return theme.palette.warning.main
         case "info":
         default:
-          return "var(--text-secondary, #FFFFFFB2)"
+          return theme.palette.text.secondary
       }
     }
 
@@ -109,7 +117,7 @@ export const LogViewer = externalizeComponent(
             fontFamily: "monospace",
             flexDirection: "column",
             "&:hover": {
-              backgroundColor: "rgba(255, 255, 255, 0.03)",
+              backgroundColor: theme.palette.action.hover,
             },
             borderRadius: "4px",
             padding: "2px 4px",
@@ -125,7 +133,7 @@ export const LogViewer = externalizeComponent(
                 fontSize: "12px",
                 lineHeight: "18px",
                 letterSpacing: "0.4px",
-                color: "var(--text-disabled, #FFFFFF61)",
+                color: theme.palette.text.disabled,
                 whiteSpace: "nowrap",
                 flexShrink: 0,
               }}
@@ -168,9 +176,9 @@ export const LogViewer = externalizeComponent(
                 onClick={handleCopy}
                 sx={{
                   padding: "2px",
-                  color: "var(--text-secondary, #FFFFFFB2)",
+                  color: theme.palette.text.secondary,
                   "&:hover": {
-                    backgroundColor: "rgba(255, 255, 255, 0.08)",
+                    backgroundColor: theme.palette.action.hover,
                   },
                 }}
                 title={copyTooltip ? "Copied!" : "Copy message"}
@@ -184,9 +192,9 @@ export const LogViewer = externalizeComponent(
                   onClick={() => setIsExpanded(!isExpanded)}
                   sx={{
                     padding: "2px",
-                    color: "var(--text-secondary, #FFFFFFB2)",
+                    color: theme.palette.text.secondary,
                     "&:hover": {
-                      backgroundColor: "rgba(255, 255, 255, 0.08)",
+                      backgroundColor: theme.palette.action.hover,
                     },
                   }}
                   title={isExpanded ? "Collapse" : "Expand"}
@@ -207,7 +215,9 @@ export const LogViewer = externalizeComponent(
     return (
       <Paper
         sx={{
-          background: "var(--background-paper-elevation-2, #171927)",
+          backgroundColor:
+            theme.palette.backgroundPaperElevation?.[2] || "#171927",
+          backgroundImage: "none", // Override any gradient from elevation
           height,
           display: "flex",
           flexDirection: "column",
@@ -226,7 +236,11 @@ export const LogViewer = externalizeComponent(
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
             <DocumentIcon
-              sx={{ fontSize: 16, color: "var(--text-secondary, #FFFFFFB2)" }}
+              sx={{
+                fontSize: 16,
+                color: theme.palette.action.active,
+                opacity: 0.56,
+              }}
             />
             <Typography
               sx={{
@@ -234,7 +248,7 @@ export const LogViewer = externalizeComponent(
                 fontSize: "14px",
                 lineHeight: "143%",
                 letterSpacing: "0.17px",
-                color: "var(--text-primary, #FFFFFF)",
+                color: theme.palette.text.primary,
               }}
             >
               Log
@@ -248,12 +262,12 @@ export const LogViewer = externalizeComponent(
               fontSize: "13px",
               lineHeight: "22px",
               letterSpacing: "0.46px",
-              color: "var(--primary-main, #8E56FC)",
+              color: theme.palette.primary.main,
               textTransform: "none",
               minWidth: "auto",
               padding: "4px 8px",
               "&:hover": {
-                backgroundColor: "rgba(142, 86, 252, 0.08)",
+                backgroundColor: theme.palette.primary.main + "14", // 8% opacity
               },
             }}
           >
@@ -276,7 +290,7 @@ export const LogViewer = externalizeComponent(
           {messages.length === 0 ? (
             <Typography
               sx={{
-                color: "var(--text-disabled, #FFFFFF61)",
+                color: theme.palette.text.disabled,
                 fontSize: "12px",
                 fontStyle: "italic",
                 textAlign: "center",

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,
           }
       }
     }