@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2-pr.fix-performance-issues.594.d053ea2

package/src/components/AppHeader.tsx

@@ -1,197 +0,0 @@
-import { alpha, type SxProps } from "@mui/material/styles"
-import AppBar from "@mui/material/AppBar"
-import Backdrop from "@mui/material/Backdrop"
-import Box from "@mui/material/Box"
-import IconButton from "@mui/material/IconButton"
-import Menu from "@mui/material/Menu"
-import MenuItem from "@mui/material/MenuItem"
-import Toolbar from "@mui/material/Toolbar"
-import Typography from "@mui/material/Typography"
-import { observer } from "mobx-react-lite"
-import { type MouseEvent, type ReactNode, useState } from "react"
-import { externalizeComponent } from "../externalizeComponent"
-import { DropdownArrowIcon } from "../icons/DropdownArrowIcon"
-
-export type AppItem = {
-  /** Unique identifier for the app */
-  id: string
-  /** Display name of the app */
-  name: string
-  /** Icon component to display */
-  icon: ReactNode
-  /** URL or callback to navigate to the app */
-  href?: string
-  /** Click handler for the app */
-  onClick?: () => void
-}
-
-export type AppHeaderProps = {
-  /** Current app icon */
-  appIcon: ReactNode
-  /** Current app name */
-  appName: string
-  /** List of other available apps */
-  apps?: AppItem[]
-  /** Callback when an app is selected */
-  onAppSelect?: (app: AppItem) => void
-  /** Disable the menu button */
-  disabled?: boolean
-  /** Additional styling */
-  sx?: SxProps
-}
-
-/**
- * A top navigation header component that displays the current app and provides
- * a dropdown menu to navigate to other apps.
- */
-export const AppHeader = externalizeComponent(
-  observer((props: AppHeaderProps) => {
-    const {
-      appIcon,
-      appName,
-      apps = [],
-      onAppSelect,
-      disabled = false,
-      sx,
-    } = props
-    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-    const isMenuOpen = Boolean(anchorEl)
-
-    const handleMenuOpen = (event: MouseEvent<HTMLElement>) => {
-      setAnchorEl(event.currentTarget)
-    }
-
-    const handleMenuClose = () => {
-      setAnchorEl(null)
-    }
-
-    const handleAppSelect = (app: AppItem) => {
-      handleMenuClose()
-
-      if (app.onClick) {
-        app.onClick()
-      } else if (app.href) {
-        window.location.href = app.href
-      }
-
-      onAppSelect?.(app)
-    }
-
-    return (
-      <>
-        <AppBar
-          position="static"
-          sx={{
-            boxShadow: "none",
-            backgroundImage: "none",
-            "& .MuiAppBar-root": {
-              backgroundImage: "none",
-              backgroundColor: "transparent",
-            },
-            ...sx,
-          }}
-        >
-          <Toolbar sx={{ minHeight: "62px !important" }}>
-            {/* App Icon */}
-            <Box sx={{ mr: 1, display: "flex", alignItems: "center" }}>
-              {appIcon}
-            </Box>
-
-            {/* App Name and Dropdown */}
-            <Box sx={{ display: "flex", alignItems: "center", flexGrow: 1 }}>
-              <Typography
-                component="h1"
-                sx={{
-                  fontWeight: "bold",
-                  fontSize: "1rem",
-                }}
-              >
-                {appName}
-              </Typography>
-
-              {/* Dropdown Button */}
-              {apps.length > 0 && (
-                <IconButton
-                  color="inherit"
-                  aria-label="switch app"
-                  aria-controls="app-menu"
-                  aria-haspopup="true"
-                  onClick={handleMenuOpen}
-                  disabled={disabled}
-                  sx={{
-                    ml: 1,
-                    width: 28,
-                    height: 28,
-                    borderRadius: "6px",
-                    padding: 0,
-                    backgroundColor: (theme) =>
-                      alpha(theme.palette.common.white, 0.1),
-                    opacity: 1,
-                    "&:hover": {
-                      backgroundColor: (theme) =>
-                        alpha(theme.palette.common.white, 0.16),
-                    },
-                    "& .MuiSvgIcon-root": {
-                      fontSize: "8px",
-                      width: "8px",
-                      height: "6px",
-                    },
-                  }}
-                >
-                  <DropdownArrowIcon />
-                </IconButton>
-              )}
-            </Box>
-          </Toolbar>
-        </AppBar>
-
-        {/* Backdrop for blur effect */}
-        <Backdrop
-          open={isMenuOpen}
-          onClick={handleMenuClose}
-          sx={{
-            backdropFilter: "blur(4px)",
-            backgroundColor: "rgba(0, 0, 0, 0.3)",
-            zIndex: (theme) => theme.zIndex.modal - 1,
-          }}
-        />
-
-        {/* Dropdown Menu */}
-        <Menu
-          id="app-menu"
-          anchorEl={anchorEl}
-          open={isMenuOpen}
-          onClose={handleMenuClose}
-          anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "left",
-          }}
-          transformOrigin={{
-            vertical: "top",
-            horizontal: "left",
-          }}
-          sx={{
-            zIndex: (theme) => theme.zIndex.modal,
-            "& .MuiPaper-root": {
-              minWidth: 200,
-              mt: 1,
-            },
-          }}
-        >
-          {apps.map((app) => (
-            <MenuItem key={app.id} onClick={() => handleAppSelect(app)}>
-              <Box sx={{ display: "flex", alignItems: "center" }}>
-                {app.icon}
-              </Box>
-              <Typography variant="body1" sx={{ ml: 2 }}>
-                {app.name}
-              </Typography>
-            </MenuItem>
-          ))}
-        </Menu>
-      </>
-    )
-  }),
-)
-
-export default AppHeader

package/src/components/ConsoleFilter.tsx

@@ -1,24 +0,0 @@
-"use client"
-import { useEffect } from "react"
-
-const defaultWarn = console.warn
-
-export default function ConsoleFilter() {
-  useEffect(() => {
-    console.warn = (data) => {
-      // This message is caused by a bug from useSpring in combination with Canvas "demand" frameloop.
-      // For now we can only suppress this warning there are no sideeffects yet
-      // See https://github.com/pmndrs/react-spring/issues/1586#issuecomment-915051856
-      if (
-        data ===
-        "Cannot call the manual advancement of rafz whilst frameLoop is not set as demand"
-      ) {
-        return
-      }
-
-      defaultWarn(data)
-    }
-  }, [])
-
-  return null
-}

package/src/components/CopyableText.tsx

@@ -1,89 +0,0 @@
-import { useTheme } from "@mui/material/styles"
-import Stack from "@mui/material/Stack"
-import Tooltip from "@mui/material/Tooltip"
-import Typography from "@mui/material/Typography"
-import { useEffect, useState } from "react"
-
-export const CopyableText = (props: {
-  label?: string
-  value: string
-  ref?: React.Ref<HTMLDivElement>
-}) => {
-  const { value, ref } = props
-  // Note: label prop is available but not currently used in the component
-  const theme = useTheme()
-  const [tooltipOpen, setTooltipOpen] = useState(false)
-
-  async function onCopyText(): Promise<boolean> {
-    if (!ref || !("current" in ref)) {
-      console.warn("No copy target found")
-      return false
-    }
-    try {
-      await navigator.clipboard.writeText(value)
-      console.log("Copied!")
-      setTooltipOpen(true)
-      return true
-    } catch (err) {
-      // Direct clipboard copy is not available in non-secure contexts
-      console.error(err)
-
-      // Let's fall back to selecting the text so the user can manually copy easily
-      const selection = window.getSelection()
-      if (selection && ref && "current" in ref && ref.current) {
-        const range = document.createRange()
-        range.selectNodeContents(ref.current)
-        selection.removeAllRanges()
-        selection.addRange(range)
-      }
-    }
-    return false
-  }
-
-  useEffect(() => {
-    if (!tooltipOpen) {
-      return
-    }
-    const timeoutId = setTimeout(() => setTooltipOpen(false), 3000)
-    return () => {
-      timeoutId ? clearTimeout(timeoutId) : {}
-    }
-  }, [tooltipOpen])
-
-  return (
-    <Tooltip open={tooltipOpen} title="Copied!">
-      <Stack
-        justifyContent="center"
-        sx={{
-          height: "100%",
-          boxSizing: "border-box",
-          padding: "6px 12px",
-          background: theme.palette.backgroundPaperElevation?.[8],
-          borderRadius: "10px",
-          minWidth: "0",
-          cursor: "pointer",
-        }}
-        onClick={() => onCopyText()}
-      >
-        <Typography
-          ref={ref}
-          align="center"
-          sx={{
-            pointerEvents: "none",
-            fontSize: "12px",
-            color: theme.palette.text.primary,
-            whiteSpace: "nowrap",
-            minWidth: 0,
-            textOverflow: "ellipsis",
-            width: "100%",
-            overflow: "hidden",
-          }}
-        >
-          {value}
-        </Typography>
-      </Stack>
-    </Tooltip>
-  )
-}
-
-export default CopyableText

package/src/components/CycleTimer/CycleTimer.ts

@@ -1,8 +0,0 @@
-export { CycleTimer } from "./index"
-export type {
-  CycleTimerControls,
-  CycleTimerProps,
-  CycleTimerState,
-} from "./types"
-
-export { CycleTimer as default } from "./index"

package/src/components/CycleTimer/DefaultVariant.tsx

@@ -1,326 +0,0 @@
-import { useTheme } from "@mui/material/styles"
-import Box from "@mui/material/Box"
-import Fade from "@mui/material/Fade"
-import Typography from "@mui/material/Typography"
-import { Gauge } from "@mui/x-charts/Gauge"
-import { useTranslation } from "react-i18next"
-import type { AnimationState, TimerState } from "./types"
-import { formatTime, formatTimeLocalized } from "./utils"
-
-interface DefaultVariantProps {
-  timerState: TimerState
-  animationState: AnimationState
-  hasError: boolean
-  className?: string
-}
-
-export const DefaultVariant = ({
-  timerState,
-  animationState,
-  hasError,
-  className,
-}: DefaultVariantProps) => {
-  const { t, i18n } = useTranslation()
-  const theme = useTheme()
-  const { currentState, remainingTime, maxTime, currentProgress } = timerState
-  const {
-    showErrorAnimation,
-    showPauseAnimation,
-    showPulsatingText,
-    pulsatingFinished,
-    showLabels,
-    showMainText,
-    showIdlePulsating,
-    idleDotsCount,
-  } = animationState
-
-  return (
-    <Box
-      className={className}
-      sx={{
-        position: "relative",
-        width: 264,
-        height: 264,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <Gauge
-        width={264}
-        height={264}
-        value={currentState === "idle" ? 0 : currentProgress}
-        valueMin={0}
-        valueMax={100}
-        innerRadius="85%"
-        outerRadius="100%"
-        margin={0}
-        skipAnimation={true}
-        text={() => ""}
-        sx={{
-          opacity: showPauseAnimation || showErrorAnimation ? 0.6 : 1,
-          transition: "opacity 0.5s ease-out",
-          "& .MuiGauge-valueArc": {
-            fill: hasError
-              ? theme.palette.error.light
-              : theme.palette.success.main,
-            transition: "fill 0.5s ease-out",
-          },
-          "& .MuiGauge-referenceArc": {
-            fill: currentState === "idle" ? "#171927" : "#171927",
-            stroke: "transparent",
-            strokeWidth: 0,
-            transition:
-              "fill 0.5s ease-out, stroke 0.5s ease-out, stroke-width 0.5s ease-out",
-          },
-          "& .MuiGauge-valueText": {
-            display: "none",
-          },
-          "& .MuiGauge-text": {
-            display: "none",
-          },
-        }}
-      />
-
-      {/* Center content overlay */}
-      <Box
-        sx={{
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          width: 225,
-          height: 225,
-          borderRadius: "50%",
-          backgroundColor: "#292B3F",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          gap: 1,
-          transition: "background-color 0.5s ease-out",
-        }}
-      >
-        {/* Top label */}
-        <Box
-          sx={{
-            height: "16px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            marginBottom: 1,
-          }}
-        >
-          <Fade
-            in={
-              showLabels &&
-              !hasError &&
-              currentState !== "idle" &&
-              currentState !== "success"
-            }
-            timeout={300}
-          >
-            <Typography
-              variant="body2"
-              sx={{
-                fontSize: "12px",
-                color:
-                  currentState === "measured"
-                    ? showPulsatingText || pulsatingFinished
-                      ? theme.palette.success.main
-                      : theme.palette.text.secondary
-                    : theme.palette.text.secondary,
-                transition: "color 0.8s ease-in-out",
-              }}
-            >
-              <span
-                style={{
-                  opacity:
-                    currentState === "measured" && pulsatingFinished
-                      ? showPulsatingText
-                        ? 1
-                        : 0.6
-                      : 1,
-                  transition: "opacity 2s ease-in-out",
-                }}
-              >
-                {currentState === "measuring"
-                  ? t("CycleTimer.CycleTime.lb", "Cycle Time")
-                  : currentState === "measured"
-                    ? t("CycleTimer.CycleTime.lb", "Cycle Time")
-                    : currentState === "countdown"
-                      ? t("CycleTimer.RemainingTime.lb", "Remaining Time")
-                      : ""}
-              </span>
-            </Typography>
-          </Fade>
-        </Box>
-
-        {/* Main display */}
-        <Box
-          sx={{
-            position: "relative",
-            height: "48px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            marginBottom: 0.5,
-          }}
-        >
-          {/* Idle state text */}
-          <Fade
-            in={showMainText && currentState === "idle" && !hasError}
-            timeout={200}
-          >
-            <Typography
-              variant="body2"
-              sx={{
-                position: "absolute",
-                fontSize: "12px",
-                fontWeight: 400,
-                color: "rgba(255, 255, 255, 0.7)",
-                lineHeight: "166%",
-                letterSpacing: "0.17px",
-                textAlign: "center",
-                width: "200px",
-                height: "20px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <span
-                style={{
-                  opacity: showIdlePulsating ? 1 : 0.6,
-                  transition: "opacity 2s ease-in-out",
-                }}
-              >
-                {t(
-                  "CycleTimer.WaitingForCycle.lb",
-                  "Waiting for program cycle",
-                )}
-              </span>
-              <span
-                style={{
-                  display: "inline-block",
-                  width: "18px",
-                  textAlign: "left",
-                  opacity: showIdlePulsating ? 1 : 0.6,
-                  transition: "opacity 2s ease-in-out",
-                }}
-              >
-                {".".repeat(idleDotsCount)}
-              </span>
-            </Typography>
-          </Fade>
-
-          {/* Error text */}
-          <Fade in={showMainText && hasError} timeout={200}>
-            <Typography
-              variant="h3"
-              sx={{
-                position: "absolute",
-                fontSize: "40px",
-                fontWeight: 400,
-                color: "#FFFFFF",
-                lineHeight: "116.7%",
-              }}
-            >
-              {t("CycleTimer.Error.lb", "Error")}
-            </Typography>
-          </Fade>
-
-          {/* Normal timer text */}
-          <Fade
-            in={
-              showMainText &&
-              !hasError &&
-              currentState !== "idle" &&
-              currentState !== "success"
-            }
-            timeout={300}
-          >
-            <Typography
-              variant="h1"
-              sx={{
-                position: "absolute",
-                fontSize: "48px",
-                fontWeight: 500,
-                color: theme.palette.text.primary,
-                lineHeight: 1,
-                transition: "color 0.8s ease-in-out",
-              }}
-            >
-              <span
-                style={{
-                  opacity: 1,
-                  transition: "opacity 2s ease-in-out",
-                }}
-              >
-                {formatTime(remainingTime)}
-              </span>
-            </Typography>
-          </Fade>
-        </Box>
-
-        {/* Bottom label */}
-        <Box
-          sx={{
-            height: "16px",
-            display: "flex",
-            marginTop: 0.5,
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <Fade
-            in={
-              showLabels &&
-              !hasError &&
-              currentState !== "idle" &&
-              currentState !== "success"
-            }
-            timeout={300}
-          >
-            <Typography
-              variant="body2"
-              sx={{
-                fontSize: "12px",
-                color:
-                  currentState === "measured"
-                    ? showPulsatingText || pulsatingFinished
-                      ? theme.palette.success.main
-                      : theme.palette.text.secondary
-                    : theme.palette.text.secondary,
-                transition: "color 0.8s ease-in-out",
-              }}
-            >
-              <span
-                style={{
-                  opacity:
-                    currentState === "measured" && pulsatingFinished
-                      ? showPulsatingText
-                        ? 1
-                        : 0.6
-                      : 1,
-                  transition: "opacity 2s ease-in-out",
-                }}
-              >
-                {currentState === "measuring"
-                  ? t("CycleTimer.Measuring.lb", "measuring...")
-                  : currentState === "measured"
-                    ? t("CycleTimer.Determined.lb", "determined")
-                    : currentState === "countdown" && maxTime !== null
-                      ? t("CycleTimer.OfTime.lb", {
-                          time: formatTimeLocalized(maxTime, i18n.language),
-                        })
-                      : ""}
-              </span>
-            </Typography>
-          </Fade>
-        </Box>
-      </Box>
-    </Box>
-  )
-}