@vention/machine-apps-components 0.3.18 → 0.3.20

package/README.md

@@ -95,10 +95,16 @@ const NAV_ITEMS = [
 A status bar component positioned at the top of the screen that displays:
 
 - Status indicator with label and colored dot
-- Configurable action buttons that can be shown/hidden
-- Button enable/disable states
+- Configurable action buttons with visibility and disabled states
 - Custom styling for buttons
 
+**Key Features:**
+
+- ✅ Declarative, config-based API
+- ✅ Fully controlled component (no internal state)
+- ✅ Type-safe button configurations
+- ✅ Easy to test and reason about
+
 #### Props
 
 ```typescript
@@ -106,6 +112,8 @@ interface ButtonConfig {
   id: string // Unique identifier for the button
   label: string // Button text
   onClick?: () => void // Click handler
+  visible?: boolean // Show/hide button (default: true)
+  disabled?: boolean // Enable/disable button (default: false)
   backgroundColor?: string // Button background color (e.g., "#4CAF50")
   backgroundColorHover?: string // Hover background color
   borderColor?: string // Border color
@@ -117,24 +125,11 @@ interface ButtonConfig {
 }
 
 interface StatusTopBarProps {
-  statusLabel?: string // Label for the status indicator
-  dotColor?: string // Color of the status dot
+  status?: {
+    label: string // Status label text
+    color: string // Color of the status dot
+  }
   buttonConfigs?: ButtonConfig[] // Array of button configurations
-  visibleButtons?: string[] // Button IDs to show (controlled)
-  disabledButtons?: string[] // Button IDs to disable (controlled)
-}
-```
-
-#### API Methods (via ref)
-
-```typescript
-interface StatusTopBarHandle {
-  showButtons: (buttonIds: string[]) => void // Show specific buttons
-  hideAllButtons: () => void // Hide all buttons
-  disableButton: (buttonId: string) => void // Disable a specific button
-  enableButton: (buttonId: string) => void // Enable a specific button
-  disableAllButtons: () => void // Disable all buttons
-  enableAllButtons: () => void // Enable all buttons
 }
 ```
 
@@ -143,137 +138,182 @@ interface StatusTopBarHandle {
 ##### Basic Usage
 
 ```tsx
-import { StatusTopBar } from "@vention/machine-apps-components"
-import { useRef } from "react"
-import type { StatusTopBarHandle } from "@vention/machine-apps-components"
-
-const BUTTON_CONFIGS = [
-  {
-    id: "enableFreeDrive",
-    label: "Enable Free Drive",
-    onClick: () => console.log("Free Drive enabled"),
-    backgroundColor: "#4CAF50",
-    backgroundColorHover: "#45A049",
-    textColor: "#FFFFFF",
-  },
-  {
-    id: "start",
-    label: "Start",
-    onClick: () => console.log("Start clicked"),
-    backgroundColor: "#2196F3",
-    textColor: "#FFFFFF",
-  },
-  {
-    id: "stop",
-    label: "Stop",
-    onClick: () => console.log("Stop clicked"),
-    backgroundColor: "#F44336",
-    textColor: "#FFFFFF",
-  },
-]
+import { StatusTopBar, ButtonConfig } from "@vention/machine-apps-components"
+import { VentionIcon } from "@ventionco/machine-ui"
 
 function App() {
-  const statusBarRef = useRef<StatusTopBarHandle>(null)
+  const buttonConfigs: ButtonConfig[] = [
+    {
+      id: "start",
+      label: "Start",
+      onClick: () => console.log("Start clicked"),
+      backgroundColor: "#2196F3",
+      textColor: "white",
+      icon: <VentionIcon size={32} type="player-play-filled" color="white" />,
+      visible: true,
+      disabled: false,
+    },
+    {
+      id: "stop",
+      label: "Stop",
+      onClick: () => console.log("Stop clicked"),
+      backgroundColor: "#F44336",
+      textColor: "white",
+      icon: <VentionIcon size={32} type="player-stop-filled" color="white" />,
+      visible: false, // Hidden by default
+      disabled: false,
+    },
+  ]
 
   return (
     <StatusTopBar
-      ref={statusBarRef}
-      statusLabel="Ready"
-      dotColor="#4CAF50"
-      buttonConfigs={BUTTON_CONFIGS}
-      visibleButtons={["start"]}
+      status={{
+        label: "Machine state: Ready",
+        color: "#4CAF50",
+      }}
+      buttonConfigs={buttonConfigs}
     />
   )
 }
 ```
 
-##### Controlling Buttons Programmatically
-
-```tsx
-const statusBarRef = useRef<StatusTopBarHandle>(null)
+##### Dynamic State Management
 
-// Show specific buttons
-statusBarRef.current?.showButtons(["enableFreeDrive", "start"])
+The component is fully controlled - all button states are derived from your application state:
 
-// Hide all buttons
-statusBarRef.current?.hideAllButtons()
+```tsx
+import { StatusTopBar, ButtonConfig } from "@vention/machine-apps-components"
+import { useMemo } from "react"
+
+function MachineApp() {
+  const { machineState, isRunning, canStart } = useMachineState()
+
+  const buttonConfigs: ButtonConfig[] = useMemo(() => {
+    const configs: ButtonConfig[] = []
+
+    // Start button - visible when not running
+    if (!isRunning) {
+      configs.push({
+        id: "start",
+        label: "Start",
+        onClick: handleStart,
+        backgroundColor: "#2196F3",
+        textColor: "white",
+        visible: true,
+        disabled: !canStart, // Disabled if prerequisites not met
+      })
+    }
 
-// Disable a specific button
-statusBarRef.current?.disableButton("start")
+    // Stop button - visible when running
+    if (isRunning) {
+      configs.push({
+        id: "stop",
+        label: "Stop",
+        onClick: handleStop,
+        backgroundColor: "#F44336",
+        textColor: "white",
+        visible: true,
+        disabled: false,
+      })
+    }
 
-// Enable a specific button
-statusBarRef.current?.enableButton("start")
+    // Home button - always visible
+    configs.push({
+      id: "home",
+      label: "Home",
+      onClick: handleHome,
+      borderColor: "#E2E8F0",
+      textColor: "#1A202C",
+      visible: true,
+      disabled: isRunning, // Can't home while running
+    })
 
-// Disable all buttons
-statusBarRef.current?.disableAllButtons()
+    return configs
+  }, [isRunning, canStart])
 
-// Enable all buttons
-statusBarRef.current?.enableAllButtons()
+  return (
+    <StatusTopBar
+      status={{
+        label: `Machine state: ${machineState}`,
+        color: getStatusColor(machineState),
+      }}
+      buttonConfigs={buttonConfigs}
+    />
+  )
+}
 ```
 
-#### Console Testing Commands
-
-For development and debugging, the StatusTopBar component exposes its API methods on the `window` object. You can test button visibility and states directly from the browser console:
-
-##### StatusTopBar Commands
-
-```javascript
-// Show specific buttons (pass an array of button IDs)
-window.showButtons(["enableFreeDrive", "start"])
-
-// Show a single button
-window.showButtons(["enableFreeDrive"])
-
-// Hide all buttons
-window.hideAllButtons()
+##### Conditional Buttons
 
-// Disable a specific button
-window.disableButton("start")
+Easily show/hide buttons based on application state:
 
-// Enable a specific button
-window.enableButton("start")
+```tsx
+const buttonConfigs: ButtonConfig[] = useMemo(() => {
+  const configs: ButtonConfig[] = []
+
+  // Operation page buttons
+  if (currentPage === "operation") {
+    configs.push({
+      id: "start",
+      label: isRunning ? "Stop" : "Start",
+      onClick: isRunning ? handleStop : handleStart,
+      backgroundColor: isRunning ? "#F44336" : "#2196F3",
+      textColor: "white",
+      visible: true,
+      disabled: false,
+    })
+  }
 
-// Disable all buttons
-window.disableAllButtons()
+  // Calibration page buttons
+  if (currentPage === "calibration") {
+    configs.push({
+      id: "freedrive",
+      label: isFreeDriveEnabled ? "Disable Free Drive" : "Enable Free Drive",
+      onClick: toggleFreeDrive,
+      backgroundColor: isFreeDriveEnabled ? "#CBD5E0" : undefined,
+      borderColor: !isFreeDriveEnabled ? "#E2E8F0" : undefined,
+      textColor: "black",
+      visible: true,
+      disabled: false,
+    })
+  }
 
-// Enable all buttons
-window.enableAllButtons()
+  return configs
+}, [currentPage, isRunning, isFreeDriveEnabled])
 ```
 
-**Important:** The `showButtons` function requires an **array** of button IDs, not a single string. This is a common mistake when testing in the console.
+#### Migration from Imperative API
 
-✅ **Correct:**
+If you're migrating from the old compound component pattern:
 
-```javascript
-window.showButtons(["enableFreeDrive"])
-window.showButtons(["enableFreeDrive", "start", "stop"])
-```
-
-❌ **Incorrect:**
+**Before (compound components):**
 
-```javascript
-window.showButtons("enableFreeDrive") // Will cause "visibleButtons.map is not a function" error
+```tsx
+<StatusTopBar statusLabel="Ready" dotColor="#4CAF50" visibleButtons={["start"]} disabledButtons={["stop"]}>
+  <StatusTopBar.Button id="start" label="Start" onClick={handleStart} backgroundColor="#2196F3" textColor="white" />
+  <StatusTopBar.Button id="stop" label="Stop" onClick={handleStop} backgroundColor="#F44336" textColor="white" />
+</StatusTopBar>
 ```
 
-##### NavigationBar Console Testing
+**After (config-based):**
 
-The NavigationBar doesn't expose window commands because it's controlled by React Router. To test navigation:
-
-```javascript
-// In browser console, navigate programmatically
-window.location.hash = "#/operation"
-window.location.hash = "#/settings"
-window.location.hash = "#/control-center"
+```tsx
+<StatusTopBar
+  status={{ label: "Ready", color: "#4CAF50" }}
+  buttonConfigs={[
+    { id: "start", label: "Start", onClick: handleStart, backgroundColor: "#2196F3", textColor: "white", visible: true },
+    { id: "stop", label: "Stop", onClick: handleStop, backgroundColor: "#F44336", textColor: "white", visible: false },
+  ]}
+/>
 ```
 
-Or use React Router's imperative navigation in your component:
+**Benefits of the new API:**
 
-```tsx
-import { useNavigate } from "react-router-dom"
-
-const navigate = useNavigate()
-navigate("/operation")
-```
+- Single source of truth for button state
+- No need for refs or imperative methods
+- Easier to test (just pass different configs)
+- Better TypeScript support
+- More predictable behavior
 
 ### Logs
 

package/index.esm.js

@@ -668,7 +668,7 @@ const StatusTopBarButton = props => {
     icon,
     iconDisabled,
     visible = true,
-    isDisabled = false
+    disabled = false
   } = props;
   const {
     classes
@@ -679,20 +679,20 @@ const StatusTopBarButton = props => {
   };
   const hasBackgroundColor = !!backgroundColor;
   const variant = hasBackgroundColor ? "filled-brand" : "outline";
-  const finalBackgroundColor = isDisabled && backgroundColor ? getFadedColor(backgroundColor) : backgroundColor;
-  const finalBackgroundColorHover = isDisabled && backgroundColorHover ? getFadedColor(backgroundColorHover) : backgroundColorHover;
-  const finalBorderColor = isDisabled && borderColor ? getFadedColor(borderColor) : borderColor;
-  const finalTextColor = isDisabled && textColor ? getFadedColor(textColor) : textColor;
-  const finalIcon = isDisabled && iconDisabled ? iconDisabled : icon;
+  const finalBackgroundColor = disabled && backgroundColor ? getFadedColor(backgroundColor) : backgroundColor;
+  const finalBackgroundColorHover = disabled && backgroundColorHover ? getFadedColor(backgroundColorHover) : backgroundColorHover;
+  const finalBorderColor = disabled && borderColor ? getFadedColor(borderColor) : borderColor;
+  const finalTextColor = disabled && textColor ? getFadedColor(textColor) : textColor;
+  const finalIcon = disabled && iconDisabled ? iconDisabled : icon;
   const handleClick = () => {
-    if (!isDisabled && onClick) {
+    if (!disabled && onClick) {
       onClick();
     }
   };
   return jsx(VentionButton, {
     variant: variant,
     onClick: handleClick,
-    disabled: isDisabled || !onClick,
+    disabled: disabled || !onClick,
     className: classes.actionButton,
     style: {
       width,
@@ -748,53 +748,30 @@ const useStyles$6 = tss.create(({
 
 const StatusTopBarRoot = props => {
   const {
-    children,
-    statusLabel,
-    dotColor,
-    visibleButtons,
-    disabledButtons = []
+    status,
+    buttonConfigs = []
   } = props;
   const {
     classes
   } = useStyles$5();
-  const visibleSet = visibleButtons ? new Set(visibleButtons) : null;
-  const disabledSet = new Set(disabledButtons);
-  const processedChildren = React.Children.map(children, child => {
-    if (!React.isValidElement(child)) return child;
-    if (child.type !== StatusTopBarButton) return child;
-    const buttonId = child.props.id;
-    const visible = visibleSet === null || visibleSet.has(buttonId);
-    const isDisabled = disabledSet.has(buttonId);
-    return React.cloneElement(child, Object.assign(Object.assign({}, child.props), {
-      visible: visible,
-      isDisabled: isDisabled
-    }));
-  });
-  const hasVisibleButtons = React.Children.toArray(children).some(child => {
-    if (!React.isValidElement(child) || child.type !== StatusTopBarButton) return false;
-    const buttonId = child.props.id;
-    const visible = visibleSet === null || visibleSet.has(buttonId);
-    return visible;
-  });
+  const visibleButtons = buttonConfigs.filter(config => config.visible !== false);
+  const hasVisibleButtons = visibleButtons.length > 0;
   return jsxs("header", {
     className: classes.root,
     children: [jsxs("div", {
       className: classes.content,
       children: [jsx("div", {
         className: classes.leftArea,
-        children: jsx(VentionStatusIndicator, {
+        children: status && jsx(VentionStatusIndicator, {
           size: "xx-large",
-          dotColor: dotColor,
-          label: statusLabel
+          dotColor: status.color,
+          label: status.label
         })
       }), hasVisibleButtons && jsx("div", {
         className: classes.rightArea,
-        children: processedChildren
-      }), !hasVisibleButtons && jsx("div", {
-        style: {
-          display: "none"
-        },
-        children: processedChildren
+        children: visibleButtons.map(config => jsx(StatusTopBarButton, Object.assign({}, config, {
+          visible: true
+        }), config.id))
       })]
     }), jsx("div", {
       className: classes.bottomBorder
@@ -838,9 +815,7 @@ const useStyles$5 = tss.create(({
     backgroundColor: theme.palette.divider
   }
 }));
-const StatusTopBar = Object.assign(StatusTopBarRoot, {
-  Button: StatusTopBarButton
-});
+const StatusTopBar = StatusTopBarRoot;
 
 const Sidebar = props => {
   const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-apps-components",
-  "version": "0.3.18",
+  "version": "0.3.20",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/index.d.ts

@@ -3,6 +3,7 @@ export * from "./lib/navigation-bar/navigation-confirmation-modal";
 export * from "./lib/navigation-bar/password-protection-modal";
 export * from "./lib/navigation-bar/time-label";
 export * from "./lib/status-top-bar/status-top-bar";
+export type { ButtonConfig, StatusTopBarProps } from "./lib/status-top-bar/status-top-bar";
 export * from "./lib/sidebar/sidebar";
 export type { SidebarItem, SidebarProps } from "./lib/sidebar/sidebar";
 export * from "./lib/logs/logs-table";

package/src/lib/status-top-bar/status-top-bar-button.d.ts

@@ -11,7 +11,7 @@ export interface StatusTopBarButtonProps {
     height?: number;
     icon?: ReactNode;
     iconDisabled?: ReactNode;
-    isDisabled?: boolean;
+    disabled?: boolean;
     visible?: boolean;
 }
 export declare const StatusTopBarButton: (props: StatusTopBarButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/status-top-bar/status-top-bar.d.ts

@@ -1,13 +1,25 @@
 import { ReactNode } from "react";
-import { StatusTopBarButtonProps } from "./status-top-bar-button";
+export interface ButtonConfig {
+    id: string;
+    label: string;
+    onClick?: () => void;
+    visible?: boolean;
+    disabled?: boolean;
+    backgroundColor?: string;
+    backgroundColorHover?: string;
+    borderColor?: string;
+    textColor?: string;
+    width?: number;
+    height?: number;
+    icon?: ReactNode;
+    iconDisabled?: ReactNode;
+}
 export interface StatusTopBarProps {
-    statusLabel?: string;
-    dotColor?: string;
-    children?: ReactNode;
-    visibleButtons?: string[];
-    disabledButtons?: string[];
+    status?: {
+        label: string;
+        color: string;
+    };
+    buttonConfigs?: ButtonConfig[];
 }
-export declare const StatusTopBar: ((props: StatusTopBarProps) => import("react/jsx-runtime").JSX.Element) & {
-    Button: (props: StatusTopBarButtonProps) => import("react/jsx-runtime").JSX.Element;
-};
+export declare const StatusTopBar: (props: StatusTopBarProps) => import("react/jsx-runtime").JSX.Element;
 export default StatusTopBar;