@wandelbots/wandelbots-js-react-components 2.53.0 → 2.54.0-pr.fix-always-show-full-badge.399.7adae47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.53.0",
+  "version": "2.54.0-pr.fix-always-show-full-badge.399.7adae47",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -59,9 +59,9 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-docs": "^9.1.6",
-    "@storybook/react-vite": "^9.1.6",
-    "@storybook/test-runner": "^0.23.0",
+    "@storybook/addon-docs": "^10.0.1",
+    "@storybook/react-vite": "^10.0.1",
+    "@storybook/test-runner": "^0.24.1",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -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.6",
+    "eslint-plugin-storybook": "^10.0.1",
     "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.6",
+    "storybook": "^10.0.1",
     "storybook-preset-inline-svg": "^1.0.1",
     "three": "^0.174.0",
     "three-stdlib": "^2.35.14",

package/src/components/TabBar.tsx

@@ -1,5 +1,5 @@
 import type { SxProps } from "@mui/material"
-import { Box, Tab, Tabs } from "@mui/material"
+import { Badge, Box, Tab, Tabs } from "@mui/material"
 import { observer } from "mobx-react-lite"
 import { useEffect, useState } from "react"
 import { externalizeComponent } from "../externalizeComponent"
@@ -13,6 +13,24 @@ export interface TabItem {
   content: React.ReactNode
   /** Optional icon component to display with the tab */
   icon?: React.ReactElement
+  /** Optional badge configuration */
+  badge?: {
+    /** Badge content (number or string) */
+    content: React.ReactNode
+    /** Badge color variant */
+    color?:
+      | "default"
+      | "primary"
+      | "secondary"
+      | "error"
+      | "info"
+      | "success"
+      | "warning"
+    /** Maximum number to display (e.g., 99+) */
+    max?: number
+    /** Show badge even when content is zero */
+    showZero?: boolean
+  }
 }
 
 export interface TabBarProps {
@@ -71,6 +89,8 @@ export const TabBar = externalizeComponent(
     const [uncontrolledActiveTab, setUncontrolledActiveTab] =
       useState(defaultActiveTab)
 
+    const currentValue = isControlled ? activeTab! : uncontrolledActiveTab
+
     // Keep uncontrolled state in range when items change
     useEffect(() => {
       if (isControlled) return
@@ -83,8 +103,6 @@ export const TabBar = externalizeComponent(
       }
     }, [items.length, isControlled, uncontrolledActiveTab])
 
-    const currentValue = isControlled ? activeTab! : uncontrolledActiveTab
-
     const handleTabChange = (
       _event: React.SyntheticEvent,
       newValue: number,
@@ -101,62 +119,161 @@ export const TabBar = externalizeComponent(
         sx={{ height: "100%", display: "flex", flexDirection: "column", ...sx }}
       >
         {/* Tabs */}
-        <Box sx={{ px: 0, py: 0 }}>
+        <Box
+          sx={{
+            px: 0,
+            py: 0,
+            overflow: "visible",
+            position: "relative",
+            // Extra padding to prevent badge clipping
+            // Top: accommodates badge positioned at top: -6px with 20px height
+            // Right: accommodates badge positioned at right: -8px with 20px width
+            paddingTop: (theme) => theme.spacing(2), // 16px
+            paddingRight: (theme) => theme.spacing(2.5), // 20px
+          }}
+        >
           <Tabs
             value={currentValue}
             onChange={handleTabChange}
             sx={{
               minHeight: "32px",
               backgroundColor: "transparent",
+              overflow: "visible",
               "& .MuiTabs-indicator": {
                 display: "none", // Hide the default indicator
               },
               "& .MuiTabs-flexContainer": {
                 gap: 2,
+                overflow: "visible",
+                paddingTop: 0,
+                paddingBottom: 0,
+              },
+              "& .MuiTabs-scroller": {
+                overflow: "visible !important",
+              },
+              "& .MuiTab-root": {
+                overflow: "visible",
               },
             }}
           >
-            {items.map((item, index) => (
-              <Tab
-                key={item.id}
-                label={item.label}
-                icon={item.icon}
-                iconPosition="start"
-                disableRipple
-                sx={{
-                  minHeight: "32px",
-                  height: "32px",
-                  padding: "0px 10px",
-                  borderRadius: "12px",
-                  backgroundColor: (theme) =>
-                    theme.palette.backgroundPaperElevation?.[11] || "#32344B",
-                  color: "text.primary",
-                  opacity: currentValue === index ? 1 : 0.38,
-                  fontSize: "13px",
-                  transition: "all 0.2s ease-in-out",
-                  "&:hover": {
-                    opacity: currentValue === index ? 1 : 0.6,
-                  },
-                  "&.Mui-selected": {
-                    opacity: 1,
+            {items.map((item, index) => {
+              // Helper functions for badge logic
+              const getBadgeContent = () => {
+                if (!item.badge) return undefined
+                const content = item.badge.content
+                const max = item.badge.max
+
+                // Handle numeric content with max limit
+                if (typeof content === "number" && max && content > max) {
+                  return `${max}+`
+                }
+
+                return content
+              }
+
+              const shouldShowBadge = () => {
+                if (!item.badge) return false
+                const content = item.badge.content
+                const showZero = item.badge.showZero
+
+                // If content is 0 and showZero is false, hide badge
+                if (content === 0 && !showZero) return false
+
+                return true
+              }
+
+              const badgeContent = getBadgeContent()
+              const showBadge = shouldShowBadge()
+
+              const handleTabClick = () => {
+                if (!isControlled) {
+                  setUncontrolledActiveTab(index)
+                }
+                onTabChange?.(index)
+              }
+
+              const tab = (
+                <Tab
+                  label={item.label}
+                  icon={item.icon}
+                  iconPosition="start"
+                  disableRipple
+                  onClick={handleTabClick}
+                  sx={{
+                    minHeight: "32px",
+                    height: "32px",
+                    padding: "0px 10px",
+                    borderRadius: "12px",
                     backgroundColor: (theme) =>
                       theme.palette.backgroundPaperElevation?.[11] || "#32344B",
                     color: "text.primary",
-                  },
-                  "&:focus": {
-                    outline: "none",
-                  },
-                  "&:active": {
-                    transform: "none",
-                  },
-                }}
-              />
-            ))}
+                    opacity: currentValue === index ? 1 : 0.38,
+                    fontSize: "13px",
+                    transition: "all 0.2s ease-in-out",
+                    position: "relative",
+                    overflow: "visible",
+                    "&:hover": {
+                      opacity: currentValue === index ? 1 : 0.6,
+                    },
+                    "&.Mui-selected": {
+                      opacity: 1,
+                      backgroundColor: (theme) =>
+                        theme.palette.backgroundPaperElevation?.[11] ||
+                        "#32344B",
+                      color: "text.primary",
+                    },
+                    "&:focus": {
+                      outline: "none",
+                    },
+                    "&:active": {
+                      transform: "none",
+                    },
+                  }}
+                />
+              )
+
+              if (!showBadge) {
+                return (
+                  <Box key={item.id} sx={{ display: "inline-flex" }}>
+                    {tab}
+                  </Box>
+                )
+              }
+
+              return (
+                <Badge
+                  key={item.id}
+                  badgeContent={badgeContent}
+                  color={item.badge?.color || "error"}
+                  max={item.badge?.max}
+                  showZero={item.badge?.showZero}
+                  anchorOrigin={{
+                    vertical: "top",
+                    horizontal: "right",
+                  }}
+                  overlap="rectangular"
+                  sx={{
+                    "& .MuiBadge-badge": {
+                      // Ensure badge doesn't inherit tab opacity
+                      opacity: "1 !important",
+                    },
+                  }}
+                >
+                  {tab}
+                </Badge>
+              )
+            })}
           </Tabs>
         </Box>
 
         {/* Border line */}
-        <Box sx={{ mt: "32px", borderBottom: 1, borderColor: "divider" }} />
+        <Box
+          sx={{
+            mt: (theme) => theme.spacing(2),
+            borderBottom: 1,
+            borderColor: "divider",
+          }}
+        />
 
         {/* Tab Content */}
         <Box sx={{ flex: 1, overflow: "auto" }}>