@wandelbots/wandelbots-js-react-components 2.38.1-pr.feature-remove-timer-from-robot-card.381.54703fe → 2.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.38.1-pr.feature-remove-timer-from-robot-card.381.54703fe",
+  "version": "2.38.1",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/CycleTimer/DefaultVariant.tsx

@@ -117,7 +117,7 @@ export const DefaultVariant = ({
               currentState !== "countup" &&
               currentState !== "success"
             }
-            timeout={300}
+            timeout={200}
           >
             <Typography
               variant="body2"
@@ -237,7 +237,7 @@ export const DefaultVariant = ({
               currentState !== "idle" &&
               currentState !== "success"
             }
-            timeout={300}
+            timeout={200}
           >
             <Typography
               variant="h1"
@@ -280,7 +280,7 @@ export const DefaultVariant = ({
               currentState !== "countup" &&
               currentState !== "success"
             }
-            timeout={300}
+            timeout={200}
           >
             <Typography
               variant="body2"

package/src/components/CycleTimer/useTimerLogic.ts

@@ -53,10 +53,10 @@ export const useTimerLogic = ({
       ...prev,
       currentState: "idle",
       maxTime: null,
-      // Don't reset remainingTime - keep the last value
+      remainingTime: 0,
       isRunning: false,
       isPausedState: false,
-      currentProgress: 0, // Reset progress to 0 for gauge
+      currentProgress: 0, // Immediately reset progress to 0
     }))
     pausedTimeRef.current = 0
     startTimeRef.current = null

package/src/components/RobotCard.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next"
 import type { Group } from "three"
 import { externalizeComponent } from "../externalizeComponent"
 import { PresetEnvironment } from "./3d-viewport/PresetEnvironment"
+import { CycleTimer } from "./CycleTimer"
 import type { ProgramState } from "./ProgramControl"
 import { ProgramStateIndicator } from "./ProgramStateIndicator"
 import { Robot } from "./robots/Robot"
@@ -57,8 +58,34 @@ export interface RobotCardProps {
     transparentColor?: string
     getModel?: (modelFromController: string) => string
   }>
-  /** Custom component to render in the content area (optional) */
-  customContentComponent?: React.ComponentType<Record<string, unknown>>
+  /** Custom cycle timer component (optional, defaults to CycleTimer) */
+  cycleTimerComponent?: React.ComponentType<{
+    variant?: "default" | "small"
+    compact?: boolean
+    onCycleComplete: (controls: {
+      startNewCycle: (maxTimeSeconds?: number, elapsedSeconds?: number) => void
+      pause: () => void
+      resume: () => void
+      isPaused: () => boolean
+    }) => void
+    onCycleEnd?: () => void
+    autoStart?: boolean
+    hasError?: boolean
+    className?: string
+  }>
+  /** Callback to receive cycle timer controls for external timer management */
+  onCycleTimerReady?: (controls: {
+    startNewCycle: (maxTimeSeconds?: number, elapsedSeconds?: number) => void
+    pause: () => void
+    resume: () => void
+    isPaused: () => boolean
+  }) => void
+  /** Callback fired when a cycle completes (reaches zero) */
+  onCycleEnd?: () => void
+  /** Whether the cycle timer should auto-start when a new cycle is set */
+  cycleTimerAutoStart?: boolean
+  /** Whether the cycle timer is in an error state (pauses timer and shows error styling) */
+  cycleTimerHasError?: boolean
   /** Additional CSS class name */
   className?: string
 }
@@ -81,31 +108,11 @@ export interface RobotCardProps {
  * - Robot name displayed in Typography h6 at top-left
  * - Program state indicator below the name
  * - Auto-fitting 3D robot model that scales with container size
- * - Customizable content area for displaying custom React components
+ * - Compact cycle time component with small variant, error state, and count-up/count-down mode support
  * - Transparent gray divider line
  * - "Drive to Home" button with press-and-hold functionality
  * - Localization support via react-i18next
  * - Material-UI theming integration
- *
- * Usage with custom content:
- * ```tsx
- * // Example custom timer component
- * const CustomTimer = () => (
- *   <Box>
- *     <Typography variant="body1" sx={{ color: "text.secondary" }}>
- *       Runtime
- *     </Typography>
- *     <Typography variant="h6">05:23</Typography>
- *   </Box>
- * )
- *
- * <RobotCard
- *   robotName="UR5e Robot"
- *   programState={ProgramState.RUNNING}
- *   customContentComponent={CustomTimer}
- *   // ... other props
- * />
- * ```
  */
 export const RobotCard = externalizeComponent(
   observer(
@@ -119,7 +126,11 @@ export const RobotCard = externalizeComponent(
       onDriveToHomeRelease,
       connectedMotionGroup,
       robotComponent: RobotComponent = Robot,
-      customContentComponent: CustomContentComponent,
+      cycleTimerComponent: CycleTimerComponent = CycleTimer,
+      onCycleTimerReady,
+      onCycleEnd,
+      cycleTimerAutoStart = true,
+      cycleTimerHasError = false,
       className,
     }: RobotCardProps) => {
       const theme = useTheme()
@@ -134,6 +145,17 @@ export const RobotCard = externalizeComponent(
       }>({ width: 400, height: 600 })
       const [modelRenderTrigger, setModelRenderTrigger] = useState(0)
 
+      // Store cycle timer controls for external control
+      const cycleControlsRef = useRef<{
+        startNewCycle: (
+          maxTimeSeconds?: number,
+          elapsedSeconds?: number,
+        ) => void
+        pause: () => void
+        resume: () => void
+        isPaused: () => boolean
+      } | null>(null)
+
       // Hook to detect aspect ratio and size changes
       useEffect(() => {
         const checkDimensions = () => {
@@ -182,16 +204,38 @@ export const RobotCard = externalizeComponent(
         }
       }, [isDriveToHomePressed, onDriveToHomeRelease])
 
+      // Store and provide cycle timer controls for external use
+      const handleCycleComplete = useCallback(
+        (controls: {
+          startNewCycle: (
+            maxTimeSeconds?: number,
+            elapsedSeconds?: number,
+          ) => void
+          pause: () => void
+          resume: () => void
+          isPaused: () => boolean
+        }) => {
+          // Store the controls for potential future use
+          cycleControlsRef.current = controls
+
+          // Notify parent component that timer controls are ready
+          if (onCycleTimerReady) {
+            onCycleTimerReady(controls)
+          }
+        },
+        [onCycleTimerReady],
+      )
+
       // Determine if robot should be hidden at small sizes to save space
       const shouldHideRobot = isLandscape
         ? cardSize.width < 350
         : cardSize.height < 200 // Hide robot at height < 200px in portrait
 
-      // Determine if custom content should be hidden when height is too low
-      // Custom content should be hidden BEFORE the robot (at higher threshold)
-      const shouldHideCustomContent = isLandscape
-        ? cardSize.height < 310 // Landscape: hide custom content at height < 310px
-        : cardSize.height < 450 // Portrait: hide custom content at height < 450px
+      // Determine if runtime view should be hidden when height is too low
+      // Runtime should be hidden BEFORE the robot (at higher threshold)
+      const shouldHideRuntime = isLandscape
+        ? cardSize.height < 310 // Landscape: hide runtime at height < 350px
+        : cardSize.height < 450 // Portrait: hide runtime at height < 450px
 
       return (
         <Card
@@ -293,7 +337,7 @@ export const RobotCard = externalizeComponent(
                   />
                 </Box>
 
-                {/* Bottom section with custom content and button */}
+                {/* Bottom section with runtime, cycle time, and button */}
                 <Box
                   sx={{
                     p: { xs: 1.5, sm: 2, md: 3 },
@@ -304,10 +348,32 @@ export const RobotCard = externalizeComponent(
                     justifyContent: "space-between",
                   }}
                 >
-                  {/* Custom content section - hidden if height is too low in landscape mode */}
-                  {!shouldHideCustomContent && CustomContentComponent && (
+                  {/* Runtime view - hidden if height is too low in landscape mode */}
+                  {!shouldHideRuntime && (
                     <Box>
-                      <CustomContentComponent />
+                      {/* Runtime display */}
+                      <Typography
+                        variant="body1"
+                        sx={{
+                          mb: 0,
+                          color: theme.palette.text.secondary,
+                          textAlign: "left",
+                        }}
+                      >
+                        {t("RobotCard.Runtime.lb")}
+                      </Typography>
+
+                      {/* Compact cycle time component directly below runtime */}
+                      <Box sx={{ textAlign: "left" }}>
+                        <CycleTimerComponent
+                          variant="small"
+                          compact
+                          onCycleComplete={handleCycleComplete}
+                          onCycleEnd={onCycleEnd}
+                          autoStart={cycleTimerAutoStart}
+                          hasError={cycleTimerHasError}
+                        />
+                      </Box>
 
                       {/* Divider */}
                       <Divider
@@ -321,14 +387,7 @@ export const RobotCard = externalizeComponent(
                     </Box>
                   )}
 
-                  <Box
-                    sx={{
-                      mt:
-                        !shouldHideCustomContent && CustomContentComponent
-                          ? "auto"
-                          : 0,
-                    }}
-                  >
+                  <Box sx={{ mt: !shouldHideRuntime ? "auto" : 0 }}>
                     {/* Drive to Home button with some space */}
                     <Box
                       sx={{
@@ -429,12 +488,31 @@ export const RobotCard = externalizeComponent(
                   )}
                 </Box>
 
-                {/* Bottom section with custom content and button */}
+                {/* Bottom section with runtime, cycle time, and button */}
                 <Box>
-                  {/* Custom content section - hidden if height is too low */}
-                  {!shouldHideCustomContent && CustomContentComponent && (
+                  {/* Runtime view - hidden if height is too low */}
+                  {!shouldHideRuntime && (
                     <>
-                      <CustomContentComponent />
+                      {/* Runtime display */}
+                      <Typography
+                        variant="body1"
+                        sx={{
+                          mb: 0,
+                          color: theme.palette.text.secondary,
+                        }}
+                      >
+                        {t("RobotCard.Runtime.lb")}
+                      </Typography>
+
+                      {/* Compact cycle time component directly below runtime */}
+                      <CycleTimerComponent
+                        variant="small"
+                        compact
+                        onCycleComplete={handleCycleComplete}
+                        onCycleEnd={onCycleEnd}
+                        autoStart={cycleTimerAutoStart}
+                        hasError={cycleTimerHasError}
+                      />
 
                       {/* Divider */}
                       <Divider
@@ -453,10 +531,9 @@ export const RobotCard = externalizeComponent(
                     sx={{
                       display: "flex",
                       justifyContent: "flex-start",
-                      mt:
-                        !shouldHideCustomContent && CustomContentComponent
-                          ? { xs: 1, sm: 2, md: 5 }
-                          : { xs: 0.5, sm: 1, md: 2 },
+                      mt: !shouldHideRuntime
+                        ? { xs: 1, sm: 2, md: 5 }
+                        : { xs: 0.5, sm: 1, md: 2 },
                       mb: { xs: 0.5, sm: 0.75, md: 1 },
                     }}
                   >