@wandelbots/wandelbots-js-react-components 2.35.0 → 2.36.0-pr.feature-design-pass.378.e01a6c5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.35.0",
+  "version": "2.36.0-pr.feature-design-pass.378.e01a6c5",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -59,8 +59,8 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-docs": "^9.1.2",
-    "@storybook/react-vite": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/react-vite": "^9.1.3",
     "@storybook/test-runner": "^0.23.0",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -72,7 +72,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@wandelbots/nova-js": "^2.1.0",
     "add": "^2.0.6",
-    "eslint-plugin-storybook": "^9.1.2",
+    "eslint-plugin-storybook": "^9.1.3",
     "glob": "^11.0.1",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -95,7 +95,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.2.3",
-    "storybook": "^9.1.2",
+    "storybook": "^9.1.3",
     "storybook-preset-inline-svg": "^1.0.1",
     "three": "^0.174.0",
     "three-stdlib": "^2.35.14",

package/src/components/AppHeader.tsx

@@ -85,7 +85,7 @@ export const AppHeader = externalizeComponent(
             ...sx,
           }}
         >
-          <Toolbar sx={{ minHeight: "64px !important" }}>
+          <Toolbar sx={{ minHeight: "62px !important" }}>
             {/* App Icon */}
             <Box sx={{ mr: 2, display: "flex", alignItems: "center" }}>
               {appIcon}

package/src/components/CopyableText.tsx

@@ -1,87 +1,84 @@
 import { Stack, Tooltip, Typography, useTheme } from "@mui/material"
-import { forwardRef, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 
-export const CopyableText = forwardRef(
-  (
-    {
-      label,
-      value,
-    }: {
-      label?: string
-      value: string
-    },
-    ref: React.ForwardedRef<HTMLDivElement>,
-  ) => {
-    const theme = useTheme()
-    const [tooltipOpen, setTooltipOpen] = useState(false)
+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)
+  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()!
+      // 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 as any)
+        range.selectNodeContents(ref.current)
         selection.removeAllRanges()
         selection.addRange(range)
       }
-      return false
     }
+    return false
+  }
 
-    useEffect(() => {
-      if (!tooltipOpen) {
-        return
-      }
-      const timeoutId = setTimeout(() => setTooltipOpen(false), 3000)
-      return () => {
-        timeoutId ? clearTimeout(timeoutId) : {}
-      }
-    }, [tooltipOpen])
+  useEffect(() => {
+    if (!tooltipOpen) {
+      return
+    }
+    const timeoutId = setTimeout(() => setTooltipOpen(false), 3000)
+    return () => {
+      timeoutId ? clearTimeout(timeoutId) : {}
+    }
+  }, [tooltipOpen])
 
-    return (
-      <Tooltip open={tooltipOpen} title="Copied!">
-        <Stack
-          justifyContent="center"
+  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={{
-            height: "100%",
-            boxSizing: "border-box",
-            padding: "6px 12px",
-            background: theme.palette.backgroundPaperElevation?.[8],
-            borderRadius: "10px",
-            minWidth: "0",
-            cursor: "pointer",
+            pointerEvents: "none",
+            fontSize: "12px",
+            color: theme.palette.text.primary,
+            whiteSpace: "nowrap",
+            minWidth: 0,
+            textOverflow: "ellipsis",
+            width: "100%",
+            overflow: "hidden",
           }}
-          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>
-    )
-  },
-)
+          {value}
+        </Typography>
+      </Stack>
+    </Tooltip>
+  )
+}

package/src/components/LogViewer.tsx

@@ -45,7 +45,7 @@ export const createLogMessage = (
   level: LogLevel,
   id?: string,
 ): LogMessage => ({
-  id: id || `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+  id: id || `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
   timestamp: new Date(),
   message,
   level,

package/src/components/ProgramControl.tsx

@@ -173,9 +173,9 @@ export const ProgramControl = externalizeComponent(
                   }
                   onClick={config.onClick}
                   sx={{
-                    width: "110px",
-                    height: "110px",
-                    borderRadius: "110px",
+                    width: "88px",
+                    height: "88px",
+                    borderRadius: "88px",
                     backgroundColor: config.color,
                     opacity:
                       config.enabled &&
@@ -197,7 +197,7 @@ export const ProgramControl = externalizeComponent(
                       backgroundColor: config.color,
                       opacity: 0.3,
                     },
-                    minWidth: "110px",
+                    minWidth: "88px",
                     flexShrink: 0,
                   }}
                 >

package/src/components/SelectableFab.tsx

@@ -1,5 +1,4 @@
-import { Fab, styled, type FabProps } from "@mui/material"
-import { forwardRef, type Ref } from "react"
+import { Fab, type FabProps, styled } from "@mui/material"
 
 const StyledSelectableFab = styled(Fab, {
   shouldForwardProp: (prop) => prop !== "selected",
@@ -34,18 +33,18 @@ const StyledSelectableFab = styled(Fab, {
 
 type CodeFabProps = {
   selected?: boolean
+  ref?: React.Ref<HTMLButtonElement>
 } & Omit<FabProps, "variant" | "color">
 
-export const SelectableFab = forwardRef(
-  (props: CodeFabProps, ref: Ref<HTMLButtonElement>) => {
-    return (
-      <StyledSelectableFab
-        ref={ref}
-        selected={props.selected}
-        {...props}
-        color={"secondary"}
-        variant="circular"
-      />
-    )
-  },
-)
+export const SelectableFab = (props: CodeFabProps) => {
+  const { ref, ...otherProps } = props
+  return (
+    <StyledSelectableFab
+      ref={ref}
+      selected={props.selected}
+      {...otherProps}
+      color={"secondary"}
+      variant="circular"
+    />
+  )
+}

package/src/components/TabBar.tsx

@@ -24,6 +24,8 @@ export interface TabBarProps {
   onTabChange?: (index: number) => void
   /** Additional styling */
   sx?: SxProps
+  /** Ref to the root container element */
+  ref?: React.Ref<HTMLDivElement>
 }
 
 interface TabPanelProps {
@@ -55,7 +57,7 @@ function TabPanel(props: TabPanelProps) {
  */
 export const TabBar = externalizeComponent(
   observer((props: TabBarProps) => {
-    const { items, defaultActiveTab = 0, onTabChange, sx } = props
+    const { items, defaultActiveTab = 0, onTabChange, sx, ref } = props
     const [activeTab, setActiveTab] = useState(defaultActiveTab)
 
     const handleTabChange = (
@@ -68,17 +70,17 @@ export const TabBar = externalizeComponent(
 
     return (
       <Box
+        ref={ref}
         sx={{ height: "100%", display: "flex", flexDirection: "column", ...sx }}
       >
         {/* Tabs */}
-        <Box sx={{ px: 3, pt: 3, pb: 3 }}>
+        <Box sx={{ px: 0, py: 0 }}>
           <Tabs
             value={activeTab}
             onChange={handleTabChange}
             sx={{
-              minHeight: "auto",
+              minHeight: "32px",
               backgroundColor: "transparent",
-              mt: 3,
               "& .MuiTabs-indicator": {
                 display: "none", // Hide the default indicator
               },
@@ -95,16 +97,15 @@ export const TabBar = externalizeComponent(
                 iconPosition="start"
                 disableRipple
                 sx={{
-                  minHeight: "auto",
-                  minWidth: "auto",
-                  padding: "4px 8px",
-                  borderRadius: "10px",
+                  minHeight: "32px",
+                  height: "32px",
+                  padding: "0px 10px",
+                  borderRadius: "12px",
                   backgroundColor: (theme) =>
                     theme.palette.backgroundPaperElevation?.[11] || "#32344B",
                   color: "text.primary",
                   opacity: activeTab === index ? 1 : 0.38,
-                  textTransform: "none",
-                  fontWeight: 500,
+                  fontSize: "13px",
                   transition: "all 0.2s ease-in-out",
                   "&:hover": {
                     opacity: activeTab === index ? 1 : 0.6,
@@ -128,7 +129,7 @@ export const TabBar = externalizeComponent(
         </Box>
 
         {/* Border line */}
-        <Box sx={{ mx: 3, borderBottom: 1, borderColor: "divider" }} />
+        <Box sx={{ mt: "32px", borderBottom: 1, borderColor: "divider" }} />
 
         {/* Tab Content */}
         <Box sx={{ flex: 1, overflow: "auto" }}>