@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2

package/src/components/LoadingCover.tsx

@@ -1,91 +0,0 @@
-import CircularProgress from "@mui/material/CircularProgress"
-import Stack from "@mui/material/Stack"
-import { useTheme } from "@mui/material/styles"
-import { capitalize } from "@mui/material/utils"
-import { lowerFirst } from "lodash-es"
-import { useEffect, useState } from "react"
-import { makeErrorMessage } from "./utils/errorHandling"
-
-export const LoadingCover = (props: {
-  message?: string
-  error?: unknown
-  softTimeout?: number
-}) => {
-  const softTimeout = props.softTimeout || 3000
-
-  const [showSlowLoadingMessage, setShowSlowLoadingMessage] = useState(false)
-  const theme = useTheme()
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setShowSlowLoadingMessage(true)
-    }, softTimeout)
-
-    return () => clearTimeout(timeout)
-  })
-
-  return (
-    <Stack
-      width="100%"
-      height="100%"
-      alignItems="center"
-      justifyContent="center"
-      sx={{ color: theme.palette.text.primary }}
-    >
-      {props.error ? (
-        <LoadingErrorMessage
-          loadingMessage={props.message}
-          error={props.error}
-        />
-      ) : (
-        <>
-          <CircularProgress sx={{ marginBottom: "24px" }} />
-          {!!props.message && <div>{props.message}</div>}
-          <Stack
-            sx={{
-              visibility: showSlowLoadingMessage ? "visible" : "hidden",
-              marginTop: "1rem",
-              color: theme.palette.text.secondary,
-            }}
-          >
-            {"This is taking longer than expected..."}
-          </Stack>
-        </>
-      )}
-    </Stack>
-  )
-}
-
-export const LoadingErrorMessage = (props: {
-  loadingMessage?: string
-  error: unknown
-}) => {
-  const errorMessage = makeErrorMessage(props.error)
-  const stack = props.error instanceof Error ? props.error.stack : null
-  const theme = useTheme()
-
-  return (
-    <Stack
-      sx={{
-        maxHeight: "100%",
-        maxWidth: "min(100%, 800px)",
-        padding: 2,
-        overflow: "auto",
-        color: theme.palette.error.main,
-        "& pre": {
-          whiteSpace: "pre-wrap",
-          wordBreak: "break-word",
-          paddingBottom: "3rem",
-        },
-      }}
-    >
-      {(props.loadingMessage
-        ? `Error while ${lowerFirst(capitalize(props.loadingMessage))} - `
-        : "") + errorMessage}
-      <br />
-      {stack && <pre>{stack}</pre>}
-    </Stack>
-  )
-}
-
-export default LoadingCover

package/src/components/LogPanel.tsx

@@ -1,71 +0,0 @@
-import type { SxProps } from "@mui/material/styles"
-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}
-      />
-    )
-  }),
-)
-
-export default LogPanel

package/src/components/LogStore.ts

@@ -1,46 +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")
-  }
-
-  addDebug = (message: string) => {
-    this.addMessage(message, "debug")
-  }
-}
-
-export default LogStore

package/src/components/LogViewer.tsx

@@ -1,368 +0,0 @@
-import ContentCopy from "@mui/icons-material/ContentCopy"
-import DocumentIcon from "@mui/icons-material/DescriptionOutlined"
-import ExpandLess from "@mui/icons-material/ExpandLess"
-import ExpandMore from "@mui/icons-material/ExpandMore"
-import type { SxProps } from "@mui/material/styles"
-import { useTheme } from "@mui/material/styles"
-import Box from "@mui/material/Box"
-import Button from "@mui/material/Button"
-import IconButton from "@mui/material/IconButton"
-import Paper from "@mui/material/Paper"
-import Typography from "@mui/material/Typography"
-import { observer } from "mobx-react-lite"
-import { useEffect, useRef, useState } from "react"
-import { externalizeComponent } from "../externalizeComponent"
-
-export type LogLevel = "info" | "error" | "warning" | "debug"
-
-export type LogMessage = {
-  id: string
-  timestamp: Date
-  message: string
-  level: LogLevel
-}
-
-export type LogViewerProps = {
-  /** Log messages to display */
-  messages: LogMessage[]
-  /** Callback when clear button is clicked */
-  onClear?: () => void
-  /** Height of the component */
-  height?: string | number
-  /** Additional styles */
-  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).substring(2, 11)}`,
-  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.
- */
-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
-    useEffect(() => {
-      if (messages.length === 0) return
-
-      const scrollContainer = scrollContainerRef.current
-      if (!scrollContainer) return
-
-      // Use a timeout to scroll after the DOM updates
-      const timeoutId = setTimeout(() => {
-        // Scroll the container to the bottom, not the entire browser
-        scrollContainer.scrollTop = scrollContainer.scrollHeight
-      }, 10)
-
-      return () => clearTimeout(timeoutId)
-    }, [messages.length])
-
-    const formatTimestamp = (timestamp: Date) => {
-      return timestamp.toLocaleTimeString("en-US", {
-        hour12: false,
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-      })
-    }
-
-    const getMessageColor = (level: LogLevel) => {
-      switch (level) {
-        case "error":
-          return theme.palette.error.main
-        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
-      }
-    }
-
-    // Component for individual log messages with expand/copy functionality
-    const LogMessage = ({ message }: { message: LogMessage }) => {
-      const [isExpanded, setIsExpanded] = useState(false)
-      const [copyTooltip, setCopyTooltip] = useState(false)
-      const [isHovered, setIsHovered] = useState(false)
-      const isLongMessage = message.message.length > 150
-
-      const handleCopy = async () => {
-        try {
-          await navigator.clipboard.writeText(message.message)
-          setCopyTooltip(true)
-          setTimeout(() => setCopyTooltip(false), 2000)
-        } catch (err) {
-          console.error("Failed to copy message:", err)
-        }
-      }
-
-      const displayMessage =
-        isLongMessage && !isExpanded
-          ? `${message.message.substring(0, 150)}...`
-          : message.message
-
-      return (
-        <Box
-          key={message.id}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-          sx={{
-            display: "flex",
-            gap: 1,
-            fontFamily: "monospace",
-            flexDirection: "column",
-            "&:hover": {
-              backgroundColor: theme.palette.action.hover,
-            },
-            borderRadius: "4px",
-            padding: "2px 4px",
-            margin: "-2px -4px",
-          }}
-        >
-          <Box sx={{ display: "flex", gap: 1 }}>
-            {/* Timestamp */}
-            <Typography
-              component="span"
-              sx={{
-                fontWeight: 400,
-                fontSize: "12px",
-                lineHeight: "18px",
-                letterSpacing: "0.4px",
-                color: theme.palette.text.disabled,
-                whiteSpace: "nowrap",
-                flexShrink: 0,
-              }}
-            >
-              [{formatTimestamp(message.timestamp)}]
-            </Typography>
-
-            {/* Message */}
-            <Typography
-              component="span"
-              sx={{
-                fontWeight: 400,
-                fontSize: "12px",
-                lineHeight: "18px",
-                letterSpacing: "0.4px",
-                color: getMessageColor(message.level),
-                wordBreak: "break-word",
-                overflowWrap: "anywhere",
-                hyphens: "auto",
-                flex: 1,
-                whiteSpace: "pre-wrap",
-              }}
-            >
-              {displayMessage}
-            </Typography>
-
-            {/* Action buttons - only visible on hover */}
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "flex-start",
-                gap: 0.5,
-                opacity: isHovered ? 1 : 0,
-                transition: "opacity 0.2s ease-in-out",
-                visibility: isHovered ? "visible" : "hidden",
-              }}
-            >
-              <IconButton
-                size="small"
-                onClick={handleCopy}
-                sx={{
-                  padding: "2px",
-                  color: theme.palette.text.secondary,
-                  "&:hover": {
-                    backgroundColor: theme.palette.action.hover,
-                  },
-                }}
-                title={copyTooltip ? "Copied!" : "Copy message"}
-              >
-                <ContentCopy sx={{ fontSize: 12 }} />
-              </IconButton>
-
-              {isLongMessage && (
-                <IconButton
-                  size="small"
-                  onClick={() => setIsExpanded(!isExpanded)}
-                  sx={{
-                    padding: "2px",
-                    color: theme.palette.text.secondary,
-                    "&:hover": {
-                      backgroundColor: theme.palette.action.hover,
-                    },
-                  }}
-                  title={isExpanded ? "Collapse" : "Expand"}
-                >
-                  {isExpanded ? (
-                    <ExpandLess sx={{ fontSize: 12 }} />
-                  ) : (
-                    <ExpandMore sx={{ fontSize: 12 }} />
-                  )}
-                </IconButton>
-              )}
-            </Box>
-          </Box>
-        </Box>
-      )
-    }
-
-    return (
-      <Paper
-        sx={{
-          backgroundColor:
-            theme.palette.backgroundPaperElevation?.[2] || "#171927",
-          backgroundImage: "none", // Override any gradient from elevation
-          height,
-          display: "flex",
-          flexDirection: "column",
-          overflow: "hidden",
-          ...sx,
-        }}
-      >
-        {/* Header */}
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "12px 16px",
-          }}
-        >
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-            <DocumentIcon
-              sx={{
-                fontSize: 16,
-                color: theme.palette.action.active,
-                opacity: 0.56,
-              }}
-            />
-            <Typography
-              sx={{
-                fontWeight: 500,
-                fontSize: "14px",
-                lineHeight: "143%",
-                letterSpacing: "0.17px",
-                color: theme.palette.text.primary,
-              }}
-            >
-              Log
-            </Typography>
-          </Box>
-          <Button
-            onClick={onClear}
-            variant="text"
-            sx={{
-              fontWeight: 500,
-              fontSize: "13px",
-              lineHeight: "22px",
-              letterSpacing: "0.46px",
-              color: theme.palette.primary.main,
-              textTransform: "none",
-              minWidth: "auto",
-              padding: "4px 8px",
-              "&:hover": {
-                backgroundColor: `${theme.palette.primary.main}14`, // 8% opacity
-              },
-            }}
-          >
-            Clear
-          </Button>
-        </Box>
-
-        {/* Messages Container */}
-        <Box
-          ref={scrollContainerRef}
-          sx={{
-            flex: 1,
-            overflow: "auto",
-            padding: "8px 16px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "2px",
-            // Custom scrollbar styling to keep it consistently dark
-            scrollbarWidth: "thin",
-            scrollbarColor: `${theme.palette.divider} transparent`,
-            "&::-webkit-scrollbar": {
-              width: "6px",
-            },
-            "&::-webkit-scrollbar-track": {
-              background: "transparent",
-            },
-            "&::-webkit-scrollbar-thumb": {
-              backgroundColor: theme.palette.divider,
-              borderRadius: "3px",
-              "&:hover": {
-                backgroundColor: theme.palette.divider,
-              },
-            },
-          }}
-        >
-          {messages.length === 0 ? (
-            <Typography
-              sx={{
-                color: theme.palette.text.disabled,
-                fontSize: "12px",
-                fontStyle: "italic",
-                textAlign: "center",
-                marginTop: 2,
-              }}
-            >
-              No log messages
-            </Typography>
-          ) : (
-            messages.map((message) => (
-              <LogMessage key={message.id} message={message} />
-            ))
-          )}
-        </Box>
-      </Paper>
-    )
-  }),
-)
-
-export default LogViewer