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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.32.0",
+  "version": "2.33.0-pr.feature-robot-precondition-list.372.3ad6c62",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -139,6 +139,7 @@
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "@mui/x-charts": "^8.9.0",
+    "@mui/x-data-grid": "^8.10.1",
     "@shikijs/monaco": "^3.1.0",
     "i18next-browser-languagedetector": "^8.0.4",
     "lodash-es": "^4.17.21",

package/src/components/CycleTimer.tsx

@@ -301,77 +301,56 @@ export const CycleTimer = externalizeComponent(
             sx={{
               display: "flex",
               alignItems: "center",
-              gap: 0.125, // Minimal gap - 1px
+              m: 0,
+              gap: 1, // 8px gap between circle and text
             }}
           >
-            {/* Animated progress gauge icon */}
+            {/* Animated progress ring icon */}
             <Box
               sx={{
-                position: "relative",
-                width: 40,
-                height: 40,
+                width: 20,
+                height: 20,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                borderRadius: "50%",
-                overflow: "visible",
+                opacity: isPausedState ? 0.6 : 1,
+                transition: "opacity 0.2s ease",
               }}
             >
-              <Gauge
-                width={40}
-                height={40}
-                value={progressValue}
-                valueMin={0}
-                valueMax={100}
-                innerRadius="70%"
-                outerRadius="95%"
-                skipAnimation={true}
-                sx={{
-                  opacity: isPausedState ? 0.6 : 1,
-                  transition: "opacity 0.2s ease",
-                  [`& .MuiGauge-valueArc`]: {
-                    fill: theme.palette.success.main,
-                  },
-                  [`& .MuiGauge-referenceArc`]: {
-                    fill: theme.palette.success.main,
-                    opacity: 0.3,
-                  },
-                  [`& .MuiGauge-valueText`]: {
-                    display: "none",
-                  },
-                  [`& .MuiGauge-text`]: {
-                    display: "none",
-                  },
-                  [`& text`]: {
-                    display: "none",
-                  },
-                  // Hide any inner circle elements that might flash
-                  [`& .MuiGauge-referenceArcBackground`]: {
-                    display: "none",
-                  },
-                  [`& .MuiGauge-valueArcBackground`]: {
-                    display: "none",
-                  },
-                  [`& circle`]: {
-                    display: "none",
-                  },
-                }}
-              />
-
-              {/* Inner circle overlay to prevent flashing */}
-              <Box
-                sx={{
-                  position: "absolute",
-                  top: "50%",
-                  left: "50%",
-                  transform: "translate(-50%, -50%)",
-                  width: 13,
-                  height: 13,
-                  borderRadius: "50%",
-                  backgroundColor: theme.palette.background?.paper || "white",
-                  pointerEvents: "none",
-                }}
-              />
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                style={{ transform: "rotate(-90deg)" }}
+                role="img"
+                aria-label="Timer progress"
+              >
+                {/* Background ring */}
+                <circle
+                  cx="10"
+                  cy="10"
+                  r="8"
+                  fill="none"
+                  stroke={theme.palette.success.main}
+                  strokeWidth="2"
+                  opacity={0.3}
+                />
+                {/* Progress ring */}
+                <circle
+                  cx="10"
+                  cy="10"
+                  r="8"
+                  fill="none"
+                  stroke={theme.palette.success.main}
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeDasharray={`${2 * Math.PI * 8}`}
+                  strokeDashoffset={`${2 * Math.PI * 8 * (1 - progressValue / 100)}`}
+                  style={{
+                    transition: "stroke-dashoffset 0.1s ease-out",
+                  }}
+                />
+              </svg>
             </Box>
 
             {/* Timer text display */}
@@ -383,8 +362,8 @@ export const CycleTimer = externalizeComponent(
               }}
             >
               {compact
-                ? // Compact mode: show only remaining time
-                  formatTime(remainingTime)
+                ? // Compact mode: show remaining time with "min." suffix
+                  `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
                 : // Full mode: show "remaining / of total min." format
                   `${formatTime(remainingTime)} / ${t("CycleTimer.Time.lb", { time: formatTime(maxTime) })}`}
             </Typography>

package/src/components/DataGrid.tsx

@@ -0,0 +1,454 @@
+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 {
+  DataGrid,
+  type DataGridProps,
+  FilterPanelTrigger,
+  type GridColDef,
+  type GridRowParams,
+  QuickFilter,
+  QuickFilterClear,
+  QuickFilterControl,
+  QuickFilterTrigger,
+  Toolbar,
+  ToolbarButton,
+} from "@mui/x-data-grid"
+import { observer } from "mobx-react-lite"
+import { useMemo, useState } from "react"
+import { externalizeComponent } from "../externalizeComponent"
+
+export interface WandelbotsDataGridProps<T = Record<string, unknown>> {
+  /**
+   * Array of data items to display in the grid
+   */
+  data: T[]
+
+  /**
+   * Column definitions for the DataGrid
+   */
+  columns: GridColDef[]
+
+  /**
+   * Function to transform data items into DataGrid rows
+   * Should return an object with an 'id' field and other fields matching column definitions
+   */
+  getRowData: (item: T) => Record<string, unknown> & { id: string | number }
+
+  /**
+   * Callback when a row is clicked
+   */
+  onRowClick?: (item: T, params: GridRowParams) => void
+
+  /**
+   * Currently selected item (for highlighting)
+   */
+  selectedItem?: T | null
+
+  /**
+   * Function to get the ID of an item (used for selection highlighting)
+   */
+  getItemId?: (item: T) => string | number
+
+  /**
+   * Title displayed in the toolbar
+   */
+  title?: string
+
+  /**
+   * Show item count in title
+   * @default true
+   */
+  showCount?: boolean
+
+  /**
+   * Placeholder text for the search input
+   * @default "Search"
+   */
+  searchPlaceholder?: string
+
+  /**
+   * Additional DataGrid props to pass through
+   */
+  dataGridProps?: Partial<DataGridProps>
+
+  /**
+   * Custom toolbar component to replace the default one
+   */
+  CustomToolbar?: React.ComponentType
+
+  /**
+   * Select the first item by default
+   * @default false
+   */
+  selectFirstByDefault?: boolean
+}
+
+export const WandelbotsDataGrid = externalizeComponent(
+  observer(
+    <T,>({
+      data,
+      columns,
+      getRowData,
+      onRowClick,
+      selectedItem,
+      getItemId,
+      title,
+      showCount = true,
+      searchPlaceholder = "Search",
+      dataGridProps,
+      CustomToolbar,
+      selectFirstByDefault = false,
+    }: WandelbotsDataGridProps<T>) => {
+      // Internal state for selection when not controlled
+      const [internalSelectedItem, setInternalSelectedItem] =
+        useState<T | null>(null)
+
+      // Prepare rows for the DataGrid
+      const rows = useMemo(() => data.map(getRowData), [data, getRowData])
+
+      // Handle default selection - only use if no selectedItem is explicitly provided
+      const effectiveSelectedItem = useMemo(() => {
+        // If selectedItem is explicitly provided, use it (including null)
+        if (selectedItem !== undefined) {
+          return selectedItem
+        }
+        // If we have an internal selection, use it
+        if (internalSelectedItem !== null) {
+          return internalSelectedItem
+        }
+        // Otherwise, use first item if selectFirstByDefault is true
+        if (selectFirstByDefault && data.length > 0) {
+          const firstItem = data[0]
+          // Set internal state to first item on initial load
+          setInternalSelectedItem(firstItem)
+          return firstItem
+        }
+        return null
+      }, [selectFirstByDefault, data, selectedItem, internalSelectedItem])
+
+      // Handle row click
+      const handleRowClick = (params: GridRowParams) => {
+        const item = data.find((item) => {
+          const rowData = getRowData(item)
+          return rowData.id === params.id
+        })
+
+        if (item) {
+          // Update internal selection state if not controlled by props
+          if (selectedItem === undefined) {
+            setInternalSelectedItem(item)
+          }
+
+          // Call the user's onRowClick callback
+          if (onRowClick) {
+            onRowClick(item, params)
+          }
+        }
+      }
+
+      // Get selected row ID for highlighting
+      const selectedRowId = useMemo(() => {
+        if (!effectiveSelectedItem || !getItemId) return null
+        return getItemId(effectiveSelectedItem)
+      }, [effectiveSelectedItem, getItemId])
+
+      // Default toolbar with filter and quick filter
+      function DefaultToolbar() {
+        return (
+          <Toolbar>
+            <Box
+              sx={{
+                display: "flex",
+                width: "100%",
+                gap: 1,
+                p: 1,
+                alignItems: "center",
+              }}
+            >
+              {title && (
+                <Typography
+                  variant="h6"
+                  sx={{
+                    fontWeight: 500,
+                    color: "white",
+                  }}
+                >
+                  {title}
+                  {showCount && ` (${data.length})`}
+                </Typography>
+              )}
+              <Box
+                sx={{
+                  ml: "auto",
+                  display: "flex",
+                  gap: 1,
+                  alignItems: "center",
+                }}
+              >
+                <FilterPanelTrigger
+                  render={
+                    <ToolbarButton aria-label="Show filters">
+                      <FilterListIcon fontSize="small" />
+                    </ToolbarButton>
+                  }
+                />
+                <Divider
+                  orientation="vertical"
+                  flexItem
+                  sx={{
+                    height: "24px",
+                    alignSelf: "center",
+                  }}
+                />
+                <QuickFilter
+                  render={(props, state) => (
+                    <Box
+                      {...props}
+                      sx={{
+                        display: "flex",
+                        overflow: "hidden",
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          borderRadius: state.expanded ? "4px 0 0 4px" : "4px",
+                          borderRight: state.expanded ? "none" : undefined,
+                        }}
+                      >
+                        <QuickFilterTrigger
+                          render={
+                            <ToolbarButton aria-label="Search">
+                              <SearchIcon fontSize="small" />
+                            </ToolbarButton>
+                          }
+                        />
+                      </Box>
+                      <Box
+                        sx={{
+                          display: "flex",
+                          overflow: "hidden",
+                          transition: "all 0.3s ease-in-out",
+                          width: state.expanded ? "192px" : "0px",
+                        }}
+                      >
+                        <Box
+                          sx={{
+                            flex: 1,
+                            "& .MuiInputBase-root": {
+                              height: "32px",
+                              borderRadius:
+                                state.expanded && state.value !== ""
+                                  ? "0"
+                                  : "0 4px 4px 0",
+                            },
+                          }}
+                        >
+                          <QuickFilterControl placeholder={searchPlaceholder} />
+                        </Box>
+                        {state.expanded && state.value !== "" && (
+                          <QuickFilterClear
+                            render={
+                              <Box sx={{ borderRadius: "0 4px 4px 0" }}>
+                                <ToolbarButton aria-label="Clear">
+                                  <ClearIcon fontSize="small" />
+                                </ToolbarButton>
+                              </Box>
+                            }
+                          />
+                        )}
+                      </Box>
+                    </Box>
+                  )}
+                />
+              </Box>
+            </Box>
+          </Toolbar>
+        )
+      }
+
+      const ToolbarComponent = CustomToolbar || DefaultToolbar
+
+      return (
+        <Box
+          sx={{
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            background: "var(--background-paper-elevation-5, #202233)",
+          }}
+        >
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            onRowClick={handleRowClick}
+            disableColumnMenu={false}
+            disableRowSelectionOnClick={true}
+            disableMultipleRowSelection={true}
+            hideFooterSelectedRowCount={true}
+            filterMode="client"
+            sortingOrder={["desc", "asc"]}
+            hideFooter={false}
+            showToolbar={true}
+            slots={{
+              toolbar: ToolbarComponent,
+            }}
+            initialState={{
+              sorting: {
+                sortModel: [],
+              },
+              filter: {
+                filterModel: {
+                  items: [],
+                },
+              },
+              ...dataGridProps?.initialState,
+            }}
+            {...dataGridProps}
+            // Ensure autosize properties are not overridden by dataGridProps
+            autosizeOnMount={dataGridProps?.autosizeOnMount ?? true}
+            autosizeOptions={{
+              includeOutliers: true,
+              includeHeaders: true,
+              expand: true,
+              ...dataGridProps?.autosizeOptions,
+            }}
+            sx={{
+              border: "none",
+              backgroundColor: "transparent",
+              width: "100%",
+              "& .MuiDataGrid-main": {
+                border: "none",
+                backgroundColor: "transparent",
+              },
+              "& .MuiDataGrid-container--top [role=row]": {
+                backgroundColor: "transparent !important",
+              },
+              "& .MuiDataGrid-topContainer": {
+                borderBottom: "none !important",
+              },
+              "& .MuiDataGrid-columnHeaders": {
+                border: "none",
+                borderBottom: "none !important",
+                backgroundColor: "var(--background-paper-elevation-5, #202233)",
+              },
+              "& .MuiDataGrid-row": {
+                cursor: onRowClick ? "pointer" : "default",
+                border: "none",
+                margin: "0px 0",
+                position: "relative",
+                "&:hover": {
+                  backgroundColor: "transparent !important",
+                  "&::before": {
+                    content: '""',
+                    position: "absolute",
+                    top: 0,
+                    left: "16px",
+                    right: "16px",
+                    bottom: 0,
+                    backgroundColor: "action.hover",
+                    borderRadius: "16px",
+                    zIndex: 0,
+                  },
+                },
+                // Disable MUI's built-in selection styling completely
+                "&.Mui-selected": {
+                  backgroundColor: "transparent !important",
+                  "&:hover": {
+                    backgroundColor: "transparent !important",
+                  },
+                },
+                // Highlight selected row with a distinct color using data attribute
+                ...(selectedRowId !== null && {
+                  [`&[data-id="${selectedRowId}"]`]: {
+                    "&::before": {
+                      content: '""',
+                      position: "absolute",
+                      top: 0,
+                      left: "16px",
+                      right: "16px",
+                      bottom: 0,
+                      backgroundColor: "rgba(255, 255, 255, 0.08) !important",
+                      borderRadius: "16px",
+                      zIndex: 0,
+                    },
+                    "&:hover::before": {
+                      backgroundColor: "rgba(255, 255, 255, 0.12) !important",
+                    },
+                  },
+                }),
+              },
+              "& .MuiDataGrid-cell--textLeft": {
+                paddingLeft: "40px",
+              },
+              "& .MuiDataGrid-cell": {
+                border: "none",
+                position: "relative",
+                zIndex: 1,
+                "&:focus": {
+                  outline: "none",
+                },
+                "&:focus-within": {
+                  outline: "none",
+                },
+              },
+              "& .MuiDataGrid-columnHeader": {
+                border: "none",
+                paddingLeft: "40px",
+                paddingRight: "40px",
+                backgroundColor: "transparent !important",
+                "& .MuiDataGrid-columnHeaderTitle": {
+                  color: "rgba(255, 255, 255, 0.6)",
+                },
+              },
+              "& .MuiDataGrid-toolbarContainer": {
+                padding: "8px",
+                border: "none !important",
+                borderBottom: "none !important",
+                "& .MuiBox-root": {
+                  backgroundColor: "transparent !important",
+                },
+                "& .MuiFormControl-root": {
+                  backgroundColor: "transparent !important",
+                },
+                "& .MuiInputBase-root": {
+                  backgroundColor: "transparent !important",
+                },
+                "& *": {
+                  borderBottom: "none !important",
+                },
+              },
+              "& .MuiDataGrid-toolbar": {
+                borderBottom: "none !important",
+              },
+              "& .MuiDataGrid-toolbarFilterList": {
+                border: "none",
+              },
+              "& .MuiDataGrid-withBorderColor": {
+                borderColor: "transparent !important",
+              },
+              "& .MuiDataGrid-columnSeparator": {
+                display: "none",
+              },
+              "& .MuiDataGrid-footerContainer": {
+                display: "none",
+              },
+              "& .MuiDataGrid-filler": {
+                border: "none !important",
+                borderTop: "none !important",
+                borderBottom: "none !important",
+                borderLeft: "none !important",
+                borderRight: "none !important",
+                "--rowBorderColor": "none !important",
+              },
+              ...dataGridProps?.sx,
+            }}
+          />
+        </Box>
+      )
+    },
+  ),
+)
+
+WandelbotsDataGrid.displayName = "WandelbotsDataGrid"

package/src/components/LogPanel.tsx

@@ -0,0 +1,69 @@
+import type { SxProps } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { useEffect, useMemo, useRef } from "react"
+import { externalizeComponent } from "../externalizeComponent"
+import { LogStore } from "./LogStore"
+import { LogViewer } from "./LogViewer"
+
+export type LogPanelProps = {
+  /** Log store instance to use, or create one automatically if not provided */
+  store?: LogStore
+  /** Height of the component */
+  height?: string | number
+  /** Additional styles */
+  sx?: SxProps
+  /** Ref to the log store for external access */
+  onStoreReady?: (store: LogStore) => void
+}
+
+/**
+ * A complete log panel component with built-in state management.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const [logStore, setLogStore] = useState<LogStore>()
+ *
+ *   return (
+ *     <LogPanel
+ *       height={400}
+ *       onStoreReady={setLogStore}
+ *     />
+ *   )
+ * }
+ *
+ * // Then use the store to add messages
+ * logStore?.addInfo("Operation completed successfully")
+ * logStore?.addError("Something went wrong")
+ * logStore?.addWarning("Warning message")
+ * ```
+ */
+export const LogPanel = externalizeComponent(
+  observer((props: LogPanelProps) => {
+    const { store: externalStore, onStoreReady, ...logViewerProps } = props
+    const onStoreReadyRef = useRef(onStoreReady)
+
+    // Update ref when callback changes
+    useEffect(() => {
+      onStoreReadyRef.current = onStoreReady
+    }, [onStoreReady])
+
+    const store = useMemo(() => {
+      const logStore = externalStore || new LogStore()
+      onStoreReadyRef.current?.(logStore)
+      return logStore
+    }, [externalStore])
+
+    const handleClear = () => {
+      store.clearMessages()
+    }
+
+    return (
+      <LogViewer
+        {...logViewerProps}
+        messages={store.messages}
+        onClear={handleClear}
+      />
+    )
+  }),
+)