@wandelbots/wandelbots-js-react-components 5.5.1-pr.fix-standardize-output.591.60112ee → 5.5.1

package/src/components/LoadingCover.tsx

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

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

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

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