@dreamtree-org/twreact-ui 1.3.0 → 1.3.1

package/dist/esm/components/navigation/Navbar.js

@@ -0,0 +1,437 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cn } from '../../utils/cn.js';
+import React, { useState, useCallback, useEffect } from 'react';
+import { ChevronLeft, Search, LogIn, LogOut, X, Menu, User, Bell } from 'lucide-react';
+import { Dropdown } from './Dropdown.js';
+import Avatar from '../utility/Avatar.js';
+import PropTypes from '../../_vendor/prop-types/index.js';
+
+var _excluded = ["emitter", "content", "notifications"],
+  _excluded2 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen"];
+var NO_NOTIFICATIONS = [];
+// Simplified Notifications, uses notifications from props and a single effect for fetch/update
+var NotificationsDropdown = function NotificationsDropdown(_ref) {
+  var emitter = _ref.emitter,
+    _ref$notifications = _ref.notifications,
+    initialNotifications = _ref$notifications === void 0 ? NO_NOTIFICATIONS : _ref$notifications,
+    _ref$onFetch = _ref.onFetch,
+    onFetch = _ref$onFetch === void 0 ? function () {
+      return console.log("invoked onFetch notifications");
+    } : _ref$onFetch;
+  var _useState = useState(initialNotifications),
+    _useState2 = _slicedToArray(_useState, 2),
+    notifications = _useState2[0],
+    setNotifications = _useState2[1];
+  var onView = function onView() {
+    emitter.emit("notification:view", notifications);
+  };
+  var reloadNotifications = function reloadNotifications() {
+    onFetch({
+      setNotifications: setNotifications
+    });
+  };
+  var onMarkAsRead = function onMarkAsRead() {
+    emitter.emit("notification:markAsRead", notifications).then(reloadNotifications);
+  };
+  var onMarkAsUnread = function onMarkAsUnread() {
+    emitter.emit("notification:markAsUnread", notifications).then(reloadNotifications);
+  };
+  var onClearAll = function onClearAll() {
+    emitter.emit("notification:clearAll", notifications).then(reloadNotifications);
+  };
+  var onDelete = function onDelete() {
+    emitter.emit("notification:delete", notifications).then(reloadNotifications);
+  };
+  // Reset to the `notifications` prop when it changes (adjust-during-render
+  // pattern), then let onFetch refresh from the server.
+  var _useState3 = useState(initialNotifications),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prevInitial = _useState4[0],
+    setPrevInitial = _useState4[1];
+  if (initialNotifications !== prevInitial) {
+    setPrevInitial(initialNotifications);
+    setNotifications(initialNotifications);
+  }
+  // Fetch notifications: initial mount or if initialNotifications changes
+  useEffect(function () {
+    onFetch({
+      setNotifications: setNotifications
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialNotifications]);
+  var unreadCount = notifications.filter(function (n) {
+    return !n.read;
+  }).length;
+  // For simplicity, shows notifications in the dropdown, can be expanded
+  return jsx(Dropdown, {
+    trigger: jsxs("button", {
+      className: "relative rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100",
+      "aria-label": "notifications",
+      children: [jsx(Bell, {
+        className: "h-5 w-5"
+      }), unreadCount > 0 && jsx("span", {
+        className: "absolute -top-1 -right-1 h-4 w-4 rounded-full bg-error-500 text-xs text-white flex items-center justify-center",
+        children: unreadCount
+      })]
+    }),
+    placement: "bottom-end",
+    children: jsxs("div", {
+      className: "py-2 min-w-56 max-h-80 overflow-y-auto",
+      children: [jsxs("div", {
+        className: "px-4 py-2 border-b border-gray-100 flex items-center justify-between",
+        children: [jsx("span", {
+          className: "font-medium text-primary-800 text-sm",
+          children: "Notifications"
+        }), jsx("button", {
+          className: "text-xs text-primary-400 hover:text-error-600",
+          onClick: function onClick() {
+            onClearAll();
+            setNotifications([]);
+          },
+          type: "button",
+          children: "Clear all"
+        })]
+      }), notifications.length === 0 ? jsx("div", {
+        className: "px-4 py-4 text-sm text-primary-500 text-center",
+        children: "No notifications"
+      }) : notifications.map(function (n) {
+        return jsxs("div", {
+          className: cn("flex items-start gap-3 px-4 py-2 hover:bg-gray-50 cursor-pointer group", !n.read ? "bg-primary-50" : ""),
+          onClick: function onClick() {
+            return onView();
+          },
+          children: [jsx("span", {
+            className: cn("h-2 w-2 mt-2 rounded-full", !n.read ? "bg-primary-500" : "bg-gray-300")
+          }), jsxs("div", {
+            className: "flex-1",
+            children: [jsx("div", {
+              className: "text-sm text-primary-800",
+              children: n.title
+            }), n.message && jsx("div", {
+              className: "text-xs text-primary-500",
+              children: n.message
+            }), jsxs("div", {
+              className: "flex gap-2 mt-1",
+              children: [!n.read ? jsx("button", {
+                onClick: function onClick(e) {
+                  e.stopPropagation();
+                  onMarkAsRead();
+                },
+                className: "text-xs text-primary-600 hover:underline",
+                children: "Mark as Read"
+              }) : jsx("button", {
+                onClick: function onClick(e) {
+                  e.stopPropagation();
+                  onMarkAsUnread();
+                },
+                className: "text-xs text-primary-400 hover:underline",
+                children: "Mark as Unread"
+              }), jsx("button", {
+                onClick: function onClick(e) {
+                  e.stopPropagation();
+                  onDelete();
+                },
+                className: "text-xs text-error-500 hover:underline",
+                children: "Delete"
+              })]
+            })]
+          })]
+        }, n.id);
+      })]
+    })
+  });
+};
+// Renders the (optional) right menu content, including notifications
+var RightMenuContent = function RightMenuContent(_ref2) {
+  var emitter = _ref2.emitter;
+    _ref2.content;
+    var _ref2$notifications = _ref2.notifications,
+    notifications = _ref2$notifications === void 0 ? [] : _ref2$notifications,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return jsx("div", {
+    className: "relative",
+    children: jsx(NotificationsDropdown, _objectSpread2({
+      emitter: emitter,
+      notifications: notifications
+    }, props))
+  });
+};
+var styledClassNames = {
+  button: "rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100",
+  mobileItem: "md:hidden",
+  icon: "h-6 w-6",
+  dropdown: "w-56 rounded-md border border-gray-200 bg-white py-1 shadow-lg"
+};
+var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var emitter = _ref3.emitter,
+    logo = _ref3.logo,
+    center = _ref3.center,
+    _ref3$items = _ref3.items,
+    items = _ref3$items === void 0 ? [] : _ref3$items,
+    user = _ref3.user,
+    _ref3$notifications = _ref3.notifications,
+    notifications = _ref3$notifications === void 0 ? [] : _ref3$notifications,
+    _ref3$searchable = _ref3.searchable,
+    searchable = _ref3$searchable === void 0 ? false : _ref3$searchable,
+    onSearch = _ref3.onSearch,
+    _ref3$leftIcon = _ref3.leftIcon,
+    leftIcon = _ref3$leftIcon === void 0 ? jsx(ChevronLeft, {}) : _ref3$leftIcon,
+    RightMenuContentProp = _ref3.rightMenuContent,
+    onLeftIconClick = _ref3.onLeftIconClick,
+    _ref3$onLoginClick = _ref3.onLoginClick,
+    onLoginClick = _ref3$onLoginClick === void 0 ? function () {
+      return console.log("invoked onLoginClick");
+    } : _ref3$onLoginClick,
+    _ref3$onLogoutClick = _ref3.onLogoutClick,
+    onLogoutClick = _ref3$onLogoutClick === void 0 ? function () {
+      return console.log("invoked onLogoutClick");
+    } : _ref3$onLogoutClick,
+    className = _ref3.className,
+    onFetch = _ref3.onFetch;
+    _ref3.isMobileOpen;
+    _ref3.setIsMobileOpen;
+    var props = _objectWithoutProperties(_ref3, _excluded2);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isMobileMenuOpen = _useState6[0],
+    setIsMobileMenuOpen = _useState6[1];
+  var _useState7 = useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchTerm = _useState8[0],
+    setSearchTerm = _useState8[1];
+  var _useState9 = useState(typeof window !== "undefined" ? window.innerWidth < 768 : false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isMobile = _useState0[0],
+    setIsMobile = _useState0[1];
+  // Responsive flag update
+  var handleResize = useCallback(function () {
+    setIsMobile(window.innerWidth < 768);
+  }, []);
+  useEffect(function () {
+    window.addEventListener("resize", handleResize);
+    setIsMobile(window.innerWidth < 768);
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [handleResize]);
+  // Handle search submit
+  var handleSearch = function handleSearch(e) {
+    e.preventDefault();
+    onSearch === null || onSearch === void 0 || onSearch(searchTerm);
+  };
+  var handleLoginClick = function handleLoginClick() {
+    onLoginClick === null || onLoginClick === void 0 || onLoginClick();
+  };
+  var handleLogoutClick = function handleLogoutClick() {
+    onLogoutClick === null || onLogoutClick === void 0 || onLogoutClick();
+  };
+  // Render navigation items as either <a> or <button>
+  var renderNavItems = function renderNavItems() {
+    var asButtons = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    return jsx(Fragment, {
+      children: items.map(function (item) {
+        return item.href && !asButtons ? jsx("a", {
+          href: item.href,
+          className: cn("text-sm font-medium transition-colors", {
+            "text-primary-600": item.active,
+            "hover:text-primary-600": !item.active
+          }),
+          children: item.label
+        }, item.id) : jsx("button", {
+          onClick: function onClick() {
+            var _item$onClick;
+            (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, item);
+            setIsMobileMenuOpen(false);
+          },
+          className: cn("block w-full text-left px-4 py-2 text-sm", {
+            "text-primary-600": item.active,
+            "hover:bg-gray-50": !item.active
+          }),
+          children: item.label
+        }, item.id);
+      })
+    });
+  };
+  // RightMenuContent: prefer prop if provided, else fallback
+  var RightMenuComponent = typeof RightMenuContentProp === "function" ? RightMenuContentProp : function (rest) {
+    return jsx(RightMenuContent, _objectSpread2({
+      emitter: emitter
+    }, rest));
+  };
+  return jsxs("nav", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("bg-white border-b border-gray-200 px-4 sm:px-6 lg:px-8", className)
+  }, props), {}, {
+    children: [jsxs("div", {
+      className: "flex h-16 min-w-0 items-center justify-between gap-2 sm:gap-4",
+      children: [jsxs("div", {
+        className: "flex min-w-0 shrink items-center",
+        children: [leftIcon !== false && jsx("div", {
+          className: "mr-2 hidden md:block md:mr-4",
+          "aria-hidden": true
+        }), jsxs("div", {
+          className: "flex min-w-0 items-center",
+          children: [leftIcon !== false && jsx("button", {
+            onClick: onLeftIconClick,
+            className: "shrink-0 md:hidden rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100",
+            "aria-label": "back",
+            children: leftIcon
+          }), logo && jsx("div", {
+            className: "ml-2 min-w-0 truncate sm:ml-4 md:ml-0",
+            children: logo
+          })]
+        })]
+      }), center && jsx("div", {
+        className: "flex min-w-0 flex-1 items-center justify-center",
+        "data-navbar-slot": "center",
+        children: center
+      }), items.length > 0 && jsx("div", {
+        className: "hidden md:flex md:shrink-0 md:items-center md:space-x-8",
+        children: renderNavItems(false)
+      }), jsxs("div", {
+        className: "flex shrink-0 items-center gap-1 sm:gap-4",
+        children: [searchable && jsx("form", {
+          onSubmit: handleSearch,
+          className: "hidden sm:block",
+          children: jsxs("div", {
+            className: "relative",
+            children: [jsx(Search, {
+              className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary-400"
+            }), jsx("input", {
+              type: "text",
+              placeholder: "Search...",
+              className: "w-64 rounded-md border border-gray-300 bg-white pl-10 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent",
+              value: searchTerm,
+              onChange: function onChange(e) {
+                return setSearchTerm(e.target.value);
+              }
+            })]
+          })
+        }), jsx(RightMenuComponent, {
+          notifications: notifications,
+          onFetch: onFetch
+        }), !user && jsx("button", {
+          className: styledClassNames.button,
+          onClick: handleLoginClick,
+          "aria-label": "Sign in",
+          children: jsx(LogIn, {
+            className: styledClassNames.icon
+          })
+        }), user &&
+        // Secondary on phones: hidden below `sm` (it moves into the user
+        // menu as "Sign out") so the header fits a 390px viewport.
+        jsx("button", {
+          className: cn(styledClassNames.button, "hidden sm:inline-flex"),
+          onClick: handleLogoutClick,
+          "aria-label": "Sign out",
+          children: jsx(LogOut, {
+            className: styledClassNames.icon
+          })
+        }), jsx("div", {
+          className: "relative",
+          children: !user ? jsx("button", {
+            className: cn(styledClassNames.button, styledClassNames.mobileItem),
+            onClick: function onClick() {
+              return setIsMobileMenuOpen(function (s) {
+                return !s;
+              });
+            },
+            "aria-label": "menu",
+            children: isMobileMenuOpen ? jsx(X, {
+              className: styledClassNames.icon
+            }) : jsx(Menu, {
+              className: styledClassNames.icon
+            })
+          }) : jsx(Dropdown, {
+            trigger: jsx("button", {
+              className: styledClassNames.button,
+              "aria-label": "user menu",
+              children: user.avatar || user.name ?
+              // Image when `avatar` is set; otherwise initials from
+              // `name` (Avatar's own fallback logic).
+              jsx(Avatar, {
+                src: user.avatar || undefined,
+                name: user.name,
+                alt: user.name,
+                size: "sm"
+              }) : jsx(User, {
+                className: styledClassNames.icon
+              })
+            }),
+            placement: "bottom-end",
+            className: "z-50",
+            children: jsxs("div", {
+              className: styledClassNames.dropdown,
+              children: [jsxs("div", {
+                className: "px-4 py-2 border-b border-gray-200",
+                children: [jsx("p", {
+                  className: "text-sm font-medium text-primary-900",
+                  children: user.name
+                }), jsx("p", {
+                  className: "text-xs text-primary-500",
+                  children: user.email
+                })]
+              }), isMobile && jsx("div", {
+                className: "py-1",
+                children: renderNavItems(true)
+              }), user.menuItems && user.menuItems.length > 0 && jsx("div", {
+                className: "border-t border-gray-100",
+                children: user.menuItems.map(function (mi) {
+                  return jsx("button", {
+                    onClick: function onClick(e) {
+                      var _mi$onClick;
+                      return mi === null || mi === void 0 || (_mi$onClick = mi.onClick) === null || _mi$onClick === void 0 ? void 0 : _mi$onClick.call(mi, e);
+                    },
+                    className: "block w-full px-4 py-2 text-left text-sm hover:bg-gray-100",
+                    children: mi.label
+                  }, mi.id);
+                })
+              }), jsx("div", {
+                className: "border-t border-gray-100 sm:hidden",
+                children: jsxs("button", {
+                  type: "button",
+                  onClick: handleLogoutClick,
+                  className: "flex w-full items-center gap-2 px-4 py-2 text-left text-sm hover:bg-gray-100",
+                  children: [jsx(LogOut, {
+                    className: "h-4 w-4",
+                    "aria-hidden": "true"
+                  }), "Sign out"]
+                })
+              })]
+            })
+          })
+        })]
+      })]
+    }), isMobileMenuOpen && !user && jsx("div", {
+      className: "md:hidden h-full",
+      children: jsx("div", {
+        className: "space-y-1 border-t border-gray-200 px-2 pt-4 pb-3",
+        children: items.map(function (item) {
+          return jsx("a", {
+            href: item.href,
+            className: cn("block rounded-md px-3 py-2 text-base font-medium", {
+              "bg-primary-50 text-primary-700": item.active,
+              "hover:bg-gray-50": !item.active
+            }),
+            children: item.label
+          }, item.id);
+        })
+      })
+    })]
+  }));
+});
+Navbar.displayName = "Navbar";
+Navbar.propTypes = {
+  emitter: PropTypes.object.isRequired,
+  logo: PropTypes.node,
+  center: PropTypes.node,
+  items: PropTypes.array.isRequired,
+  user: PropTypes.object,
+  notifications: PropTypes.array,
+  searchable: PropTypes.bool,
+  onSearch: PropTypes.func
+};
+
+export { Navbar, Navbar as default };