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

package/src/components/AppHeader.tsx

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

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

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

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

package/src/components/CycleTimer/DefaultVariant.tsx

@@ -0,0 +1,326 @@
+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>
+  )
+}