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

package/dist/components/RobotListItem.d.ts

@@ -1,34 +0,0 @@
-import type { ComponentType } from "react";
-import { RobotSetupReadinessState } from "./RobotSetupReadinessIndicator";
-export interface RobotListItemProps {
-    /** The name of the robot */
-    robotName: string;
-    /** The type/model of the robot (will try to derive from nova if not provided) */
-    robotType?: string;
-    /** The current setup readiness state of the robot */
-    setupState: RobotSetupReadinessState;
-    /**
-     * Component to render for the precondition indicator.
-     * Defaults to RobotSetupReadinessIndicator.
-     * Pass null or undefined to hide the indicator.
-     */
-    PreconditionComponent?: ComponentType<{
-        setupState: RobotSetupReadinessState;
-    }> | null;
-    /** Additional CSS class name */
-    className?: string;
-}
-/**
- * A list item component that displays robot information and setup readiness state.
- *
- * Features:
- * - Shows robot name, type, and customizable precondition component
- * - Color-coded icon based on readiness state (robot icon for ready, warning for issues)
- * - Styled with consistent border, background, and spacing
- * - Responsive layout with proper spacing and alignment
- * - Flexible precondition component that can be customized or hidden
- */
-export declare const RobotListItem: (({ robotName, robotType, setupState, PreconditionComponent, className, }: RobotListItemProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-//# sourceMappingURL=RobotListItem.d.ts.map

package/dist/components/RobotListItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RobotListItem.d.ts","sourceRoot":"","sources":["../../src/components/RobotListItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG1C,OAAO,EAEL,wBAAwB,EACzB,MAAM,gCAAgC,CAAA;AAEvC,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qDAAqD;IACrD,UAAU,EAAE,wBAAwB,CAAA;IACpC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,aAAa,CAAC;QACpC,UAAU,EAAE,wBAAwB,CAAA;KACrC,CAAC,GAAG,IAAI,CAAA;IACT,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,6EAQnB,kBAAkB;;CAuGxB,CAAA"}

package/dist/components/RobotSetupReadinessIndicator.d.ts

@@ -1,31 +0,0 @@
-/**
- * Enum representing the robot setup readiness state
- */
-export declare enum RobotSetupReadinessState {
-    /** Preconditions are not fulfilled for robot operation */
-    PRECONDITION_NOT_FULFILLED = "PRECONDITION_NOT_FULFILLED",
-    /** Robot is disconnected from the system */
-    ROBOT_DISCONNECTED = "ROBOT_DISCONNECTED",
-    /** Robot is ready for operation */
-    READY = "READY"
-}
-export interface RobotSetupReadinessIndicatorProps {
-    /** The current setup readiness state of the robot */
-    setupState: RobotSetupReadinessState;
-    /** Additional CSS class name */
-    className?: string;
-}
-/**
- * A state indicator component that displays the current robot setup readiness state.
- *
- * Features:
- * - Shows three states: Precondition not fulfilled, Robot disconnected, Ready
- * - Color-coded based on state (ready: tertiary/main, others: error/main)
- * - Rendered as Material-UI filled chip with paper-elevation-11 background
- * - Includes colored circle indicator (8px width)
- * - Localization support via react-i18next
- */
-export declare const RobotSetupReadinessIndicator: (({ setupState, className }: RobotSetupReadinessIndicatorProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-//# sourceMappingURL=RobotSetupReadinessIndicator.d.ts.map

package/dist/components/RobotSetupReadinessIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RobotSetupReadinessIndicator.d.ts","sourceRoot":"","sources":["../../src/components/RobotSetupReadinessIndicator.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,oBAAY,wBAAwB;IAClC,0DAA0D;IAC1D,0BAA0B,+BAA+B;IACzD,4CAA4C;IAC5C,kBAAkB,uBAAuB;IACzC,mCAAmC;IACnC,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,iCAAiC;IAChD,qDAAqD;IACrD,UAAU,EAAE,wBAAwB,CAAA;IACpC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,4BAA4B,+BACF,iCAAiC;;CAwFvE,CAAA"}

package/dist/components/RobotSetupReadinessIndicator.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=RobotSetupReadinessIndicator.test.d.ts.map

package/dist/components/RobotSetupReadinessIndicator.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RobotSetupReadinessIndicator.test.d.ts","sourceRoot":"","sources":["../../src/components/RobotSetupReadinessIndicator.test.tsx"],"names":[],"mappings":""}

package/src/components/DataGrid.tsx

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

@@ -1,85 +0,0 @@
-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
- * // Simple usage with automatic state management
- * 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")
- * ```
- *
- * @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) => {
-    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}
-      />
-    )
-  }),
-)

package/src/components/LogStore.ts

@@ -1,40 +0,0 @@
-import { action, makeObservable, observable } from "mobx"
-import type { LogLevel, LogMessage } from "./LogViewer"
-
-export class LogStore {
-  messages: LogMessage[] = []
-
-  constructor() {
-    makeObservable(this, {
-      messages: observable,
-      addMessage: action,
-      clearMessages: action,
-    })
-  }
-
-  addMessage = (message: string, level: LogLevel = "info") => {
-    const logMessage: LogMessage = {
-      id: Math.random().toString(36).substring(2, 11),
-      timestamp: new Date(),
-      message,
-      level,
-    }
-    this.messages.push(logMessage)
-  }
-
-  clearMessages = () => {
-    this.messages = []
-  }
-
-  addInfo = (message: string) => {
-    this.addMessage(message, "info")
-  }
-
-  addWarning = (message: string) => {
-    this.addMessage(message, "warning")
-  }
-
-  addError = (message: string) => {
-    this.addMessage(message, "error")
-  }
-}