@wandelbots/wandelbots-js-react-components 2.34.2 → 2.35.0

package/dist/themes/createDarkTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createDarkTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createDarkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,eAAe,CAAA;AAEjE,wBAAgB,eAAe,IAAI,KAAK,CAgSvC"}
+{"version":3,"file":"createDarkTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createDarkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,eAAe,CAAA;AAEjE,wBAAgB,eAAe,IAAI,KAAK,CA0WvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.34.2",
+  "version": "2.35.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -139,6 +139,7 @@
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "@mui/x-charts": "^8.9.0",
+    "@mui/x-data-grid": "^8.10.1",
     "@shikijs/monaco": "^3.1.0",
     "i18next-browser-languagedetector": "^8.0.4",
     "lodash-es": "^4.17.21",

package/src/components/AppHeader.md

@@ -0,0 +1,84 @@
+# AppHeader Component
+
+A navigation header component that displays the current application's icon and name, with an optional dropdown menu for switching between different applications.
+
+## Features
+
+- **App Branding**: Displays the current app's icon and name with custom typography
+- **App Switching**: Dropdown menu with blur backdrop for navigating to other apps
+- **Responsive Design**: Uses MUI AppBar for consistent styling
+- **Accessibility**: Proper ARIA labels and keyboard navigation
+- **Flexible Navigation**: Supports both URL navigation and custom click handlers
+
+## Usage
+
+```tsx
+import {
+  AppHeader,
+  type AppItem,
+} from "@wandelbots/wandelbots-js-react-components"
+import { Home, Settings, Person } from "@mui/icons-material"
+
+const apps: AppItem[] = [
+  {
+    id: "dashboard",
+    name: "Dashboard",
+    icon: <Home />,
+    href: "/dashboard",
+  },
+  {
+    id: "settings",
+    name: "Settings",
+    icon: <Settings />,
+    onClick: () => navigateToSettings(),
+  },
+]
+
+function MyApp() {
+  return (
+    <AppHeader
+      appIcon={<Person />}
+      appName="Robot Control Studio"
+      apps={apps}
+      onAppSelect={(app) => console.log("Selected:", app.name)}
+    />
+  )
+}
+```
+
+## Props
+
+### AppHeaderProps
+
+- **appIcon** (`ReactNode`): Icon component for the current application
+- **appName** (`string`): Display name of the current application
+- **apps** (`AppItem[]`, optional): Array of available apps for the dropdown menu
+- **onAppSelect** (`(app: AppItem) => void`, optional): Callback when an app is selected
+- **sx** (`SxProps`, optional): Additional MUI styling
+
+### AppItem
+
+- **id** (`string`): Unique identifier for the app
+- **name** (`string`): Display name of the app
+- **icon** (`ReactNode`): Icon component to display
+- **href** (`string`, optional): URL to navigate to
+- **onClick** (`() => void`, optional): Custom click handler
+
+## Styling
+
+The component uses the specified typography:
+
+- Font weight: 700 (Bold)
+- Font size: 20px
+- Line height: 24px
+- Letter spacing: 0px
+
+The dropdown arrow uses a custom SVG icon with 56% opacity.
+
+## Behavior
+
+- When apps are provided, a dropdown arrow appears on the right side
+- Clicking the arrow opens a menu with available apps
+- The background blurs when the menu is open to focus attention
+- Apps can navigate via URL (`href`) or custom handler (`onClick`)
+- The menu closes automatically when an app is selected or when clicking outside

package/src/components/AppHeader.tsx

@@ -0,0 +1,199 @@
+import {
+  alpha,
+  AppBar,
+  Backdrop,
+  Box,
+  IconButton,
+  Menu,
+  MenuItem,
+  type SxProps,
+  Toolbar,
+  Typography,
+} from "@mui/material"
+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
+  /** 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, 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: "64px !important" }}>
+            {/* App Icon */}
+            <Box sx={{ mr: 2, display: "flex", alignItems: "center" }}>
+              {appIcon}
+            </Box>
+
+            {/* App Name and Dropdown */}
+            <Box sx={{ display: "flex", alignItems: "center", flexGrow: 1 }}>
+              <Typography
+                variant="h6"
+                component="div"
+                sx={{
+                  fontWeight: 700,
+                  fontSize: "20px",
+                  lineHeight: "24px",
+                  letterSpacing: 0,
+                }}
+              >
+                {appName}
+              </Typography>
+
+              {/* Dropdown Button */}
+              {apps.length > 0 && (
+                <IconButton
+                  color="inherit"
+                  aria-label="switch app"
+                  aria-controls="app-menu"
+                  aria-haspopup="true"
+                  onClick={handleMenuOpen}
+                  sx={{
+                    ml: 2,
+                    width: 30,
+                    height: 30,
+                    borderRadius: "8px",
+                    padding: "5px",
+                    backgroundColor: (theme) =>
+                      alpha(theme.palette.common.white, 0.1),
+                    opacity: 1,
+                    "&:hover": {
+                      backgroundColor: (theme) =>
+                        alpha(theme.palette.common.white, 0.16),
+                    },
+                    "& .MuiSvgIcon-root": {
+                      fontSize: "10px",
+                      width: "10px",
+                      height: "8px",
+                    },
+                  }}
+                >
+                  <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)}
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+                py: 1.5,
+                px: 2,
+              }}
+            >
+              <Box sx={{ display: "flex", alignItems: "center" }}>
+                {app.icon}
+              </Box>
+              <Typography variant="body1">{app.name}</Typography>
+            </MenuItem>
+          ))}
+        </Menu>
+      </>
+    )
+  }),
+)