@robosystems/core 0.9.2 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosystems/core",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "Shared RoboSystems frontend core library (auth, contexts, task monitoring, UI components) for the RoboSystems Next.js apps",
   "license": "MIT",
   "private": false,

package/ui-components/layout/CoreNavbar.d.ts

@@ -4,6 +4,12 @@ export interface CoreNavbarProps {
     currentApp: 'roboledger' | 'roboinvestor' | 'robosystems';
     apiUrl?: string;
     homeHref?: string;
+    /**
+     * Where the user menu's Documentation item points. Defaults to this app's own
+     * `/docs`; an app without docs of its own passes an absolute URL. `null` drops
+     * the item.
+     */
+    docsHref?: string | null;
     logoAltText?: string;
     additionalComponents?: React.ReactNode;
     className?: string;
@@ -11,4 +17,4 @@ export interface CoreNavbarProps {
     useCustomThemeToggle?: boolean;
     showAppSwitcherFirst?: boolean;
 }
-export declare function CoreNavbar({ appName, currentApp, apiUrl, homeHref, logoAltText, additionalComponents, className, borderColorClass, useCustomThemeToggle, showAppSwitcherFirst, }: CoreNavbarProps): React.JSX.Element;
+export declare function CoreNavbar({ appName, currentApp, apiUrl, homeHref, docsHref, logoAltText, additionalComponents, className, borderColorClass, useCustomThemeToggle, showAppSwitcherFirst, }: CoreNavbarProps): React.JSX.Element;

package/ui-components/layout/CoreNavbar.js

@@ -12,7 +12,7 @@ import { LogoBadge } from '../Logo';
 import { useAccountSettingsLink } from './account-settings';
 import { ThemeToggle } from './ThemeToggle';
 export function CoreNavbar({ appName, currentApp, apiUrl = process.env.NEXT_PUBLIC_ROBOSYSTEMS_API_URL ||
-    'http://localhost:8000', homeHref = '/home', logoAltText, additionalComponents, className = '', borderColorClass = 'dark:border-gray-700', useCustomThemeToggle = true, showAppSwitcherFirst = false, }) {
+    'http://localhost:8000', homeHref = '/home', docsHref = '/docs', logoAltText, additionalComponents, className = '', borderColorClass = 'dark:border-gray-700', useCustomThemeToggle = true, showAppSwitcherFirst = false, }) {
     const sidebar = useSidebarContext();
     const isDesktop = useMediaQuery('(min-width: 1024px)');
     const { user } = useUser();
@@ -44,13 +44,18 @@ export function CoreNavbar({ appName, currentApp, apiUrl = process.env.NEXT_PUBL
         return (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden dark:block", children: _jsx(Tooltip, { content: "Toggle light mode", theme: customTheme.tooltip, children: _jsx(DarkThemeToggle, {}) }) }), _jsx("div", { className: "dark:hidden", children: _jsx(Tooltip, { content: "Toggle dark mode", theme: customTheme.tooltip, children: _jsx(DarkThemeToggle, {}) }) })] }));
     };
     const renderAppSwitcher = () => (_jsx(Tooltip, { content: "Switch apps", theme: customTheme.tooltip, children: _jsx(AppSwitcher, { apiUrl: apiUrl, currentApp: currentApp }) }));
-    return (_jsx(FlowbiteNavbar, { fluid: true, theme: customTheme.navbar, className: `fixed top-0 z-30 w-full border-b border-gray-200 p-0 ${borderColorClass} bg-white sm:p-0 dark:bg-black ${className}`, children: _jsx("div", { className: "w-full p-3 pr-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("button", { onClick: handleToggleSidebar, className: "mr-3 cursor-pointer rounded-sm p-2 text-gray-600 hover:bg-zinc-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-zinc-700 dark:hover:text-white", children: [_jsx("span", { className: "sr-only", children: "Toggle sidebar" }), _jsx("div", { className: "lg:hidden", children: sidebar.mobile.isOpen ? (_jsx(HiX, { className: "h-6 w-6" })) : (_jsx(HiMenuAlt1, { className: "h-6 w-6" })) }), _jsx("div", { className: "hidden lg:block", children: _jsx(HiMenuAlt1, { className: "h-6 w-6" }) })] }), _jsxs(NavbarBrand, { as: Link, href: homeHref, className: "mr-14", children: [_jsx(LogoBadge, { app: currentApp, animate: "once", className: "mr-2 h-10 w-10" }), _jsx("span", { className: "font-heading mt-2 ml-1 self-center text-2xl font-semibold whitespace-nowrap text-gray-900 dark:text-white", children: appName })] })] }), _jsx("div", { className: "flex items-center lg:gap-3", children: _jsxs("div", { className: "flex items-center", children: [additionalComponents && (_jsx("div", { className: "mr-2 hidden md:block", children: additionalComponents })), _jsxs("div", { className: "flex items-center space-x-2", children: [showAppSwitcherFirst && renderAppSwitcher(), renderThemeToggle(), !showAppSwitcherFirst && renderAppSwitcher(), _jsx(UserDropdown, { user: user, apiUrl: apiUrl, onLogout: handleLogout })] })] }) })] }) }) }));
+    return (_jsx(FlowbiteNavbar, { fluid: true, theme: customTheme.navbar, className: `fixed top-0 z-30 w-full border-b border-gray-200 p-0 ${borderColorClass} bg-white sm:p-0 dark:bg-black ${className}`, children: _jsx("div", { className: "w-full p-3 pr-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("button", { onClick: handleToggleSidebar, className: "mr-3 cursor-pointer rounded-sm p-2 text-gray-600 hover:bg-zinc-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-zinc-700 dark:hover:text-white", children: [_jsx("span", { className: "sr-only", children: "Toggle sidebar" }), _jsx("div", { className: "lg:hidden", children: sidebar.mobile.isOpen ? (_jsx(HiX, { className: "h-6 w-6" })) : (_jsx(HiMenuAlt1, { className: "h-6 w-6" })) }), _jsx("div", { className: "hidden lg:block", children: _jsx(HiMenuAlt1, { className: "h-6 w-6" }) })] }), _jsxs(NavbarBrand, { as: Link, href: homeHref, className: "mr-14", children: [_jsx(LogoBadge, { app: currentApp, animate: "once", className: "mr-2 h-10 w-10" }), _jsx("span", { className: "font-heading mt-2 ml-1 self-center text-2xl font-semibold whitespace-nowrap text-gray-900 dark:text-white", children: appName })] })] }), _jsx("div", { className: "flex items-center lg:gap-3", children: _jsxs("div", { className: "flex items-center", children: [additionalComponents && (_jsx("div", { className: "mr-2 hidden md:block", children: additionalComponents })), _jsxs("div", { className: "flex items-center space-x-2", children: [showAppSwitcherFirst && renderAppSwitcher(), renderThemeToggle(), !showAppSwitcherFirst && renderAppSwitcher(), _jsx(UserDropdown, { user: user, apiUrl: apiUrl, docsHref: docsHref, onLogout: handleLogout })] })] }) })] }) }) }));
 }
-function UserDropdown({ user, apiUrl, onLogout }) {
+function UserDropdown({ user, apiUrl, docsHref, onLogout }) {
     const settings = useAccountSettingsLink(apiUrl);
     return (_jsx("div", { className: "relative", children: _jsxs(Dropdown, { theme: Object.assign(Object.assign({}, customTheme.dropdown), { floating: Object.assign(Object.assign({}, customTheme.dropdown.floating), { base: `${customTheme.dropdown.floating.base} z-50! w-64` }) }), arrowIcon: false, inline: true, label: _jsxs("span", { className: "inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm text-gray-500 hover:bg-zinc-100 focus:ring-2 focus:ring-gray-200 focus:outline-hidden dark:text-gray-400 dark:hover:bg-zinc-700 dark:focus:ring-gray-600", children: [_jsx("span", { className: "sr-only", children: "User menu" }), _jsx(HiUserCircle, { className: "h-6 w-6" })] }), children: [_jsxs(DropdownHeader, { theme: { header: customTheme.dropdown.floating.header }, className: "px-4 py-3", children: [_jsx("div", { className: "block text-sm font-medium text-gray-900 dark:text-white", children: (user === null || user === void 0 ? void 0 : user.name) || 'User' }), (user === null || user === void 0 ? void 0 : user.email) && (_jsx("div", { className: "block truncate text-sm text-gray-500 dark:text-gray-400", children: user.email }))] }), settings.isCrossApp ? (_jsxs(DropdownItem, { theme: customTheme.dropdown.floating.item, onClick: () => {
                         void settings.open();
-                    }, title: settings.description, className: "flex w-full items-center justify-between p-3", children: [_jsx("span", { children: "User Settings" }), _jsx(HiExternalLink, { "aria-hidden": "true", className: "ml-3 h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" }), _jsx("span", { className: "sr-only", children: ` (opens ${settings.hostAppName} in a new tab)` })] })) : (_jsx(DropdownItem, { theme: customTheme.dropdown.floating.item, as: Link, href: settings.href, className: "flex w-full items-center space-x-3 p-3", children: "User Settings" })), _jsx(DropdownDivider, { theme: { divider: customTheme.dropdown.floating.divider } }), _jsx(DropdownItem, { theme: customTheme.dropdown.floating.item, onClick: () => {
+                    }, title: settings.description, className: "flex w-full items-center justify-between p-3", children: [_jsx("span", { children: "User Settings" }), _jsx(HiExternalLink, { "aria-hidden": "true", className: "ml-3 h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" }), _jsx("span", { className: "sr-only", children: ` (opens ${settings.hostAppName} in a new tab)` })] })) : (_jsx(DropdownItem, { theme: customTheme.dropdown.floating.item, as: Link, href: settings.href, className: "flex w-full items-center space-x-3 p-3", children: "User Settings" })), docsHref && (
+                // The docs wear the public site's chrome, so they open in a new tab and
+                // the app keeps its place. This is the app's only global route to them:
+                // a signed-in visitor to / is sent to /home and never sees the public
+                // header's links.
+                _jsxs(DropdownItem, { theme: customTheme.dropdown.floating.item, as: Link, href: docsHref, target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-between p-3", children: [_jsx("span", { children: "Documentation" }), _jsx(HiExternalLink, { "aria-hidden": "true", className: "ml-3 h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] })), _jsx(DropdownDivider, { theme: { divider: customTheme.dropdown.floating.divider } }), _jsx(DropdownItem, { theme: customTheme.dropdown.floating.item, onClick: () => {
                         onLogout();
                     }, className: "flex w-full items-center space-x-3 p-3", children: "Sign out" })] }) }));
 }

package/ui-components/layout/CoreSidebar.js

@@ -23,13 +23,25 @@ function MobileSidebar({ navigationItems, features, bottomMenuActions, additiona
         return null;
     return (_jsxs(_Fragment, { children: [_jsx(Sidebar, { "aria-label": "Sidebar with multi-level dropdown example", theme: customTheme.sidebar, className: twMerge(`fixed inset-y-0 left-0 z-20 hidden h-full shrink-0 flex-col border-r border-gray-200 pt-16 ${borderColorClass} lg:flex`, isOpen && 'flex'), id: "sidebar", children: _jsxs("div", { className: "flex h-full flex-col justify-between", children: [_jsxs("div", { className: "py-2", children: [additionalMobileComponents && (_jsx("div", { className: "hidden pb-2 max-md:block", children: additionalMobileComponents })), _jsxs(SidebarItems, { children: [_jsx(OrgSection, { isCollapsed: false, showOrgSection: features.showOrgSection }), _jsx(SidebarItemGroup, { className: "mt-0 border-t-0 pt-2 pb-1", children: navigationItems.map((item) => (_jsx(CustomSidebarItem, Object.assign({}, item, { pathname: pathname }), item.label))) })] })] }), _jsx(BottomMenu, { isCollapsed: false, features: features, bottomMenuActions: bottomMenuActions })] }) }), _jsx("div", { onClick: close, "aria-hidden": "true", className: "fixed inset-0 z-10 h-full w-full bg-zinc-900/50 pt-16 dark:bg-zinc-900/90" })] }));
 }
+// SidebarItem renders an <a> for an href and forwards these, but its props are typed
+// as a div's, so they are spread rather than written as attributes. A link that opens a
+// new tab gets noopener and noreferrer, so the page it opens can't reach back into the
+// app's window through window.opener.
+function newTabProps(target) {
+    return target
+        ? {
+            target,
+            rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+        }
+        : {};
+}
 function CustomSidebarItem({ href, target, icon: Icon, label, items, badge, pathname, }) {
     if (!(items === null || items === void 0 ? void 0 : items.length)) {
         const isExternal = target === '_blank' || (href === null || href === void 0 ? void 0 : href.startsWith('http'));
         if (isExternal) {
-            return (_jsx(SidebarItem, { href: href || '#', icon: Icon, active: pathname === href, theme: customTheme.sidebar.item, className: pathname === href
+            return (_jsx(SidebarItem, Object.assign({ href: href || '#' }, newTabProps(target), { icon: Icon, active: pathname === href, theme: customTheme.sidebar.item, className: pathname === href
                     ? 'bg-primary-50 text-primary-700 dark:bg-primary-200 dark:text-primary-800'
-                    : '', children: label }));
+                    : '', children: label })));
         }
         return (_jsx(SidebarItem, { as: Link, href: href || '#', icon: Icon, active: pathname === href, theme: customTheme.sidebar.item, className: pathname === href
                 ? 'bg-zinc-100 text-gray-900 dark:bg-zinc-800 dark:text-gray-200'
@@ -39,9 +51,9 @@ function CustomSidebarItem({ href, target, icon: Icon, label, items, badge, path
             var _a;
             const isExternal = item.target === '_blank' || ((_a = item.href) === null || _a === void 0 ? void 0 : _a.startsWith('http'));
             if (isExternal) {
-                return (_jsx(SidebarItem, { href: item.href || '#', active: pathname === item.href, theme: customTheme.sidebar.item, className: pathname === item.href
+                return (_jsx(SidebarItem, Object.assign({ href: item.href || '#' }, newTabProps(item.target), { active: pathname === item.href, theme: customTheme.sidebar.item, className: pathname === item.href
                         ? 'bg-primary-50 text-primary-700 dark:bg-primary-200 dark:text-primary-800'
-                        : '', children: item.label }, item.label));
+                        : '', children: item.label }), item.label));
             }
             return (_jsx(SidebarItem, { as: Link, href: item.href || '#', active: pathname === item.href, theme: customTheme.sidebar.item, className: pathname === item.href
                     ? 'bg-primary-50 text-primary-700 dark:bg-primary-200 dark:text-primary-800'