testeranto 0.177.0 → 0.197.0

package/dist/module/src/components/SunriseAnimation.test/interface.js

@@ -1 +1,32 @@
-"use strict";
+import * as React from 'react';
+import * as ReactDom from 'react-dom/client';
+export const interface = {
+    beforeEach: async (subject, initializer) => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = ReactDom.createRoot(container);
+        const props = initializer();
+        const reactElement = React.createElement(subject, props);
+        root.render(reactElement);
+        return {
+            container,
+            reactElement,
+            domRoot: root,
+            animationElement: container.querySelector('.sunrise-animation')
+        };
+    },
+    afterEach: async (store) => {
+        store.domRoot.unmount();
+        document.body.removeChild(store.container);
+        return store;
+    },
+    andWhen: async (store, whenCB) => {
+        return whenCB(store);
+    },
+    butThen: async (store, thenCB) => {
+        return thenCB(store);
+    },
+    afterAll: () => { },
+    beforeAll: () => ({}),
+    assertThis: (x) => x,
+};

package/dist/module/src/components/SunriseAnimation.test/types.js

@@ -0,0 +1 @@
+export {};

package/dist/module/src/components/TestStatusBadge.js

@@ -1,48 +1,28 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import { Badge } from 'react-bootstrap';
 export const TestStatusBadge = (props) => {
-    // Enhanced logging
-    console.groupCollapsed(`[TestStatusBadge] Rendering for ${props.testName}`);
-    console.log('Raw props:', JSON.parse(JSON.stringify(props)));
     // Simplified status determination
     const hasTests = props.testsExist !== false;
     const testCompleted = props.runTimeErrors !== -1;
     const hasRuntimeErrors = props.runTimeErrors > 0;
-    console.log('Status flags:', {
-        hasTests,
-        testCompleted,
-        hasRuntimeErrors,
-        typeErrors: props.typeErrors,
-        staticErrors: props.staticErrors
-    });
     let bddStatus;
     if (!hasTests) {
-        console.warn('No tests.json found - marking as failed');
         bddStatus = { text: '❌ No Tests', variant: 'danger' };
     }
     else if (!testCompleted) {
-        console.warn('Test did not complete (runTimeErrors=-1) - marking as failed');
         bddStatus = { text: '❌ No Tests', variant: 'danger' };
     }
     else if (hasRuntimeErrors) {
-        console.warn(`Test failed with ${props.runTimeErrors} runtime errors`);
         bddStatus = { text: `❌ BDD (${props.runTimeErrors})`, variant: 'danger' };
     }
     else {
-        console.log('Test passed all runtime checks');
         bddStatus = { text: '✅ BDD', variant: 'success' };
     }
     if (props.variant === 'compact') {
-        console.log('Rendering compact badge:', bddStatus);
         console.groupEnd();
         return React.createElement(Badge, { bg: bddStatus.variant }, bddStatus.text);
     }
-    console.log('Rendering full badge set with:', {
-        bddStatus,
-        typeErrors: props.typeErrors,
-        staticErrors: props.staticErrors
-    });
-    console.groupEnd();
     return (React.createElement("div", { className: "d-flex gap-2" },
         React.createElement(Badge, { bg: bddStatus.variant }, bddStatus.text)));
 };

package/dist/module/src/components/pure/AppFrame.js

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState } from 'react';
+import { Container, Nav } from 'react-bootstrap';
+import { NavLink } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+export const AppFrame = ({ children, title, rightContent }) => {
+    const location = useLocation();
+    const [isExpanded, setIsExpanded] = useState(true);
+    return (React.createElement("div", { className: "d-flex min-vh-100", style: { backgroundColor: '#f8f9fa' } },
+        React.createElement("div", { className: "bg-light border-end d-flex flex-column", style: {
+                width: isExpanded ? '250px' : '60px',
+                minHeight: '100vh',
+                transition: 'width 0.3s ease'
+            }, onMouseEnter: () => setIsExpanded(true), onMouseLeave: () => setIsExpanded(false) },
+            React.createElement("div", { className: "p-3 border-bottom d-flex align-items-center justify-content-center" }, isExpanded ? (React.createElement("img", { src: "/logo.svg", alt: "Testeranto Logo", style: { width: '128px', height: '128px' } })) : (React.createElement("img", { src: "/logo.svg", alt: "Testeranto Logo", style: { width: '40px', height: '40px' } }))),
+            React.createElement(Nav, { variant: "pills", className: "flex-column p-2 flex-grow-1" },
+                React.createElement(Nav.Link, { as: NavLink, to: "/", className: `${location.pathname === '/' ? 'active' : ''} text-truncate d-flex align-items-center`, style: { width: '100%' }, title: "Projects" },
+                    React.createElement("span", { className: "me-2" }, "\uD83D\uDCC1"),
+                    isExpanded && 'Projects'),
+                React.createElement(Nav.Link, { as: NavLink, to: "/processes", className: `${location.pathname.startsWith('/processes') ? 'active' : ''} text-truncate d-flex align-items-center`, style: { width: '100%' }, title: "Process Manager" },
+                    React.createElement("span", { className: "me-2" }, "\uD83D\uDCCA"),
+                    isExpanded && 'Process Manager'),
+                React.createElement(Nav.Link, { as: NavLink, to: "/settings", className: `${location.pathname === '/settings' ? 'active' : ''} text-truncate d-flex align-items-center`, style: { width: '100%' }, title: "Settings" },
+                    React.createElement("span", { className: "me-2" }, "\u2699\uFE0F"),
+                    isExpanded && 'Settings')),
+            React.createElement("div", { className: "p-3 border-top text-center mt-auto" }, isExpanded ? (React.createElement("small", { className: "text-muted" },
+                "made with \u2764\uFE0F and ",
+                React.createElement("a", { href: "https://www.npmjs.com/package/testeranto" }, "testeranto"))) : (React.createElement("small", { className: "text-muted" }, "\u2764\uFE0F")))),
+        React.createElement("div", { className: "flex-grow-1 d-flex flex-column" },
+            React.createElement("main", { className: "flex-grow-1 p-4", style: { overflow: 'auto' } },
+                React.createElement(Container, { fluid: true, className: "h-100" }, children)))));
+};

package/dist/module/src/components/pure/AppFrame.test/implementation.js

@@ -0,0 +1,57 @@
+import { assert } from "chai";
+import React from "react";
+export const implementation = {
+    suites: {
+        Default: "AppFrame basic rendering",
+        Layout: "AppFrame layout structure",
+    },
+    givens: {
+        Default: () => (selection) => (Object.assign(Object.assign({}, selection), { children: React.createElement("div", null, "Test Content") })),
+        WithChildren: (children) => () => (selection) => (Object.assign(Object.assign({}, selection), { children })),
+    },
+    whens: {},
+    thens: {
+        takeScreenshot: (name) => async ({ htmlElement, container }, pm) => {
+            if (!container)
+                throw new Error('Container not found');
+            const p = await pm.page();
+            await pm.customScreenShot({ path: `${name}.png` }, p);
+            return {
+                htmlElement,
+                reactElement: React.createElement('div'),
+                domRoot: container,
+                container
+            };
+        },
+        RendersContainer: () => async ({ htmlElement, container }) => {
+            // const container = htmlElement.querySelector('.min-vh-100');
+            assert.exists(container, 'Should have min-vh-100 container');
+            return {
+                htmlElement,
+                reactElement: React.createElement('div'),
+                domRoot: container,
+                container: container
+            };
+        },
+        HasMainContent: () => async ({ htmlElement }) => {
+            const main = htmlElement.querySelector('main.flex-grow-1');
+            assert.exists(main, 'Should have main content area');
+            return { htmlElement };
+        },
+        HasFooter: () => async ({ htmlElement }) => {
+            const footer = htmlElement.querySelector('footer');
+            assert.exists(footer, 'Should have footer');
+            return { htmlElement };
+        },
+        HasSettingsButton: () => async ({ htmlElement }) => {
+            const button = htmlElement.querySelector('footer button');
+            assert.exists(button, 'Should have settings button in footer');
+            return { htmlElement };
+        },
+        HasTesterantoLink: () => async ({ htmlElement }) => {
+            const link = htmlElement.querySelector('footer a[href*="testeranto"]');
+            assert.exists(link, 'Should have testeranto link in footer');
+            return { htmlElement };
+        },
+    },
+};

package/dist/module/src/components/pure/AppFrame.test/index.js

@@ -0,0 +1,9 @@
+import React from "react";
+import Testeranto from "testeranto-react/src/react-dom/component/web";
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { AppFrame } from "../AppFrame";
+import "../../../App.scss";
+const WrappedAppFrame = ({ children }) => (React.createElement("div", { id: "test-root" },
+    React.createElement(AppFrame, { "data-testid": "app-frame" }, children)));
+export default Testeranto(implementation, specification, WrappedAppFrame);

package/dist/module/src/components/pure/AppFrame.test/specification.js

@@ -0,0 +1,21 @@
+export const specification = (Suite, Given, When, Then) => {
+    return [
+        Suite.Default("AppFrame basic rendering", {
+            "renders container": Given.Default([], [], [Then.RendersContainer()]),
+            "has main content area": Given.Default([], [], [Then.HasMainContent()]),
+            has_footer: Given.Default([], [], [Then.HasFooter(), Then.takeScreenshot("hello.png")]),
+        }),
+        // Suite.Layout("AppFrame layout structure", {
+        //   "contains settings button": Given.Default(
+        //     [],
+        //     [],
+        //     [Then.HasSettingsButton()]
+        //   ),
+        //   "contains testeranto link": Given.Default(
+        //     [],
+        //     [],
+        //     [Then.HasTesterantoLink(), Then.takeScreenshot("hello.png")]
+        //   ),
+        // }),
+    ];
+};

package/dist/module/src/components/pure/AppFrame.test/types.js

@@ -0,0 +1,2 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+export {};

package/dist/module/src/components/pure/FeaturesReporterView.js

@@ -0,0 +1,16 @@
+import React from 'react';
+export const FeaturesReporterView = ({ treeData }) => {
+    return (React.createElement("div", { className: "features-reporter" },
+        React.createElement("h1", null, "File Structure"),
+        React.createElement("div", { className: "tree-container" }, treeData.map(project => {
+            var _a;
+            return (React.createElement("div", { key: project.name, className: "project" },
+                React.createElement("h3", null, project.name),
+                React.createElement("ul", { className: "file-tree" }, (_a = project.children) === null || _a === void 0 ? void 0 : _a.map(file => renderFile(file)))));
+        }))));
+};
+function renderFile(node) {
+    return (React.createElement("li", { key: node.name },
+        React.createElement("span", null, node.name),
+        node.children && (React.createElement("ul", null, node.children.map(child => renderFile(child))))));
+}

package/dist/module/src/components/pure/FeaturesReporterView.test/implementation.js

@@ -0,0 +1,81 @@
+import { assert } from "chai";
+const mockTreeData = [
+    {
+        name: "project-1",
+        type: "project",
+        children: [
+            {
+                name: "src/file1.test.ts",
+                type: "file",
+                path: "src/file1.test.ts",
+                children: [
+                    {
+                        name: "test1",
+                        type: "test",
+                        status: "passed",
+                        children: [
+                            {
+                                name: "given1",
+                                type: "given",
+                                status: "passed",
+                                children: [
+                                    {
+                                        name: "then1",
+                                        type: "then",
+                                        status: "passed"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+];
+export const implementation = {
+    suites: {
+        Default: "Features Reporter View Tests",
+    },
+    givens: {
+        Default: () => ({
+            treeData: mockTreeData
+        }),
+        WithEmptyData: () => ({
+            treeData: []
+        }),
+    },
+    whens: {},
+    thens: {
+        hasProjectNames: () => async ({ htmlElement }) => {
+            const projectNodes = htmlElement.querySelectorAll('.tree-node.project');
+            assert.isAtLeast(projectNodes.length, 1, 'Should show project names');
+            return { htmlElement };
+        },
+        hasFilePaths: () => async ({ htmlElement }) => {
+            const fileNodes = htmlElement.querySelectorAll('.tree-node.file');
+            assert.isAtLeast(fileNodes.length, 1, 'Should show file paths');
+            return { htmlElement };
+        },
+        hasTestNames: () => async ({ htmlElement }) => {
+            const testNodes = htmlElement.querySelectorAll('.tree-node.test');
+            assert.isAtLeast(testNodes.length, 1, 'Should show test names');
+            return { htmlElement };
+        },
+        hasStatusBadges: () => async ({ htmlElement }) => {
+            const statusBadges = htmlElement.querySelectorAll('.status-badge');
+            assert.isAtLeast(statusBadges.length, 1, 'Should show status badges');
+            return { htmlElement };
+        },
+        showsEmptyMessage: () => async ({ htmlElement }) => {
+            const emptyMessage = htmlElement.querySelector('.empty-message');
+            assert.exists(emptyMessage, 'Should show empty message');
+            return { htmlElement };
+        },
+        takeScreenshot: (name) => async ({ htmlElement }, pm) => {
+            const p = await pm.page();
+            await pm.customScreenShot({ path: name }, p);
+            return { htmlElement };
+        },
+    },
+};

package/dist/module/src/components/pure/FeaturesReporterView.test/index.js

@@ -0,0 +1,9 @@
+import Testeranto from "testeranto-react/src/react-dom/component/web";
+import { MemoryRouter } from "react-router-dom";
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { FeaturesReporterView } from "../FeaturesReporterView";
+import React from "react";
+const WrappedFeaturesReporterView = (props) => (React.createElement(MemoryRouter, null,
+    React.createElement(FeaturesReporterView, Object.assign({}, props))));
+export default Testeranto(implementation, specification, WrappedFeaturesReporterView);

package/dist/module/src/components/pure/FeaturesReporterView.test/specification.js

@@ -0,0 +1,23 @@
+export const specification = (Suite, Given, When, Then) => {
+    return [
+        Suite.Default("FeaturesReporterView Component Tests", {
+            basicRender: Given.Default([
+                "FeaturesReporterView should render",
+                "It should show project names",
+                "It should show file paths",
+                "It should show test names",
+                "It should show test statuses"
+            ], [], [
+                Then.hasProjectNames(),
+                Then.hasFilePaths(),
+                Then.hasTestNames(),
+                Then.hasStatusBadges(),
+                Then.takeScreenshot("features-reporter.png")
+            ]),
+            emptyState: Given.WithEmptyData([
+                "FeaturesReporterView should handle empty state",
+                "It should show empty message when no projects exist"
+            ], [], [Then.showsEmptyMessage()]),
+        }),
+    ];
+};

package/dist/module/src/components/pure/FeaturesReporterView.test/types.js

@@ -0,0 +1 @@
+export {};

package/dist/module/src/components/pure/ModalContent.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { Modal } from "react-bootstrap";
+import { ThemeCard } from "./ThemeCard";
+import "../../App.scss";
+export const ModalContent = ({ theme, handleThemeChange, }) => (React.createElement(React.Fragment, null,
+    React.createElement(Modal.Header, { closeButton: true, className: "border-0" },
+        React.createElement(Modal.Title, { className: "d-flex align-items-center" },
+            React.createElement("i", { className: "bi bi-palette-fill me-2" }),
+            React.createElement("span", null, "Settings"))),
+    React.createElement("div", { className: "alert alert-warning mx-3 mt-2 mb-0" },
+        React.createElement("i", { className: "bi bi-exclamation-triangle-fill me-2" }),
+        React.createElement("strong", null, "Warning:"),
+        " Themes are an experimental feature. Only \"Business casual\" is fully supported at this time."),
+    React.createElement(Modal.Body, { className: "p-0" },
+        React.createElement("div", { className: "p-3" },
+            React.createElement("div", { className: "row g-3" },
+                React.createElement(ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "system", title: "9 to 5", description: "Follows your OS theme", style: {
+                        background: "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
+                        borderColor: "#adb5bd",
+                    } }),
+                React.createElement(ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "light", title: "Business casual", description: "Clean & professional", style: {
+                        background: "linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%)",
+                        borderColor: "#ced4da",
+                        color: "#212529",
+                        borderWidth: "2px",
+                    } }),
+                React.createElement(ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "dark", title: "Business formal", description: "Premium & focused", style: {
+                        background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
+                        borderColor: "#4ecdc4",
+                        color: "#f8f9fa",
+                        borderWidth: "2px",
+                    } }),
+                React.createElement(ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "light-vibrant", title: "Office Party", description: "Colorful & fun", style: {
+                        background: "linear-gradient(135deg, #ff2d75 0%, #00e5ff 100%)",
+                        borderColor: "#ffeb3b",
+                        color: "#fff",
+                    } }),
+                React.createElement(ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "dark-vibrant", title: "After Party", description: "Neon nightlife", style: {
+                        background: "linear-gradient(135deg, #16213e 0%, #e94560 100%)",
+                        borderColor: "#00e5ff",
+                        color: "#fff",
+                    } }),
+                React.createElement(ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "sepia", title: "WFH", description: "Vintage warmth", style: {
+                        background: "linear-gradient(135deg, #f4ecd8 0%, #d0b88f 100%)",
+                        borderColor: "#8b6b4a",
+                        color: "#3a3226",
+                    } }),
+                React.createElement(ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "light-grayscale", title: "Serious Business", description: "Simple & distraction-free", style: {
+                        background: "linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%)",
+                        borderColor: "#666",
+                        color: "#333",
+                        borderWidth: "2px",
+                    } }),
+                React.createElement(ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "dark-grayscale", title: "Very Serious business", description: "Maximum readability", style: {
+                        background: "linear-gradient(135deg, #111 0%, #333 100%)",
+                        borderColor: "#ff6b6b",
+                        color: "#e0e0e0",
+                        borderWidth: "2px",
+                    } }),
+                React.createElement(ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "daily", title: "Dreaming of PTO", description: "Sunrise, sunset", style: {
+                        background: "linear-gradient(135deg, #6eafff 0%, #f9fbf0 100%)",
+                        borderColor: "#f7d62e",
+                        color: "#00192d",
+                    } }),
+                React.createElement(ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "protanopia", title: "Protanopia", description: "Red-blind mode", style: {
+                        background: "linear-gradient(135deg, #f8f9fa 0%, #e0e8ff 100%)",
+                        borderColor: "#3366cc",
+                        color: "#333",
+                    } }),
+                React.createElement(ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "deuteranopia", title: "Deuteranopia", description: "Green-blind mode", style: {
+                        background: "linear-gradient(135deg, #f8f9fa 0%, #ffe0e0 100%)",
+                        borderColor: "#cc6633",
+                        color: "#333",
+                    } }),
+                React.createElement(ThemeCard, { theme: theme, handleThemeChange: handleThemeChange, value: "tritanopia", title: "Tritanopia", description: "Blue-blind mode", style: {
+                        background: "linear-gradient(135deg, #f8f9fa 0%, #e0ffe0 100%)",
+                        borderColor: "#00aa66",
+                        color: "#333",
+                    } }))))));

package/dist/module/src/components/pure/ModalContent.test/implementation.js

@@ -0,0 +1,32 @@
+import { assert } from "chai";
+export const implementation = {
+    suites: {
+        Default: "Modal Content Tests",
+    },
+    givens: {
+        Default: () => ({
+            theme: "light",
+            handleThemeChange: () => { },
+        }),
+    },
+    whens: {},
+    thens: {
+        hasModalHeader: () => (state) => {
+            var _a;
+            const header = (_a = state.htmlElement) === null || _a === void 0 ? void 0 : _a.querySelector('.modal-header');
+            assert.exists(header, 'Should have Modal.Header');
+            return state;
+        },
+        hasThemeCards: () => (state) => {
+            var _a;
+            const themeCards = (_a = state.htmlElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.theme-card');
+            assert.isAtLeast(themeCards === null || themeCards === void 0 ? void 0 : themeCards.length, 1, 'Should render ThemeCard components');
+            return state;
+        },
+        takeScreenshot: (name) => async (state, pm) => {
+            // For web tests, we can use the PM's screenshot capability
+            // The actual implementation will be handled by the test runner
+            return state;
+        },
+    },
+};

package/dist/module/src/components/pure/ModalContent.test/index.js

@@ -0,0 +1,53 @@
+import Testeranto from "testeranto-react/src/react-dom/component/web";
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { ModalContent } from "../ModalContent";
+import React from "react";
+import ReactDOM from "react-dom/client";
+const testAdapter = {
+    beforeAll: async (input, testResource, pm) => {
+        // The subject is the component itself, which we'll use to create instances
+        return ModalContent;
+    },
+    beforeEach: async (subject, initializer, testResource, initialValues, pm) => {
+        // Create a container and mount the component
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const props = initializer();
+        const root = ReactDOM.createRoot(container);
+        const reactElement = React.createElement(subject, props);
+        root.render(reactElement);
+        // Wait for the component to render
+        await new Promise(resolve => setTimeout(resolve, 0));
+        return {
+            htmlElement: container,
+            reactElement: reactElement,
+            domRoot: root
+        };
+    },
+    andWhen: async (store, whenCB, testResource, pm) => {
+        return whenCB(store, pm);
+    },
+    butThen: async (store, thenCB, testResource, pm) => {
+        return thenCB(store, pm);
+    },
+    afterEach: async (store, key, pm) => {
+        // Cleanup
+        if (store.domRoot) {
+            store.domRoot.unmount();
+        }
+        if (store.htmlElement && store.htmlElement.parentNode) {
+            store.htmlElement.parentNode.removeChild(store.htmlElement);
+        }
+        return store;
+    },
+    afterAll: async (store, pm) => {
+        // No-op for now
+    },
+    assertThis: (assertion) => {
+        // The assertions are handled in the then implementations
+        // This can be a no-op or can wrap the assertion if needed
+        return assertion;
+    }
+};
+export default Testeranto(ModalContent, specification, implementation, testAdapter);

package/dist/module/src/components/pure/ModalContent.test/specification.js

@@ -0,0 +1,15 @@
+export const specification = (Suite, Given, When, Then) => {
+    return [
+        Suite.Default("ModalContent Component Tests", {
+            basicRender: Given.Default([
+                "ModalContent should render",
+                "It should contain a Modal.Header",
+                "It should render the ThemeCard components",
+            ], [], [
+                Then.hasModalHeader(undefined),
+                Then.hasThemeCards(undefined),
+                Then.takeScreenshot("modal-content.png"),
+            ]),
+        }),
+    ];
+};

package/dist/module/src/components/pure/ModalContent.test/types.js

@@ -0,0 +1,3 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export {};

package/dist/module/src/{NavBar.js → components/pure/NavBar.js}

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Navbar, Container, Nav, Badge } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
-export const NavBar = ({ title, backLink, navItems = [], rightContent }) => {
-    return (React.createElement(Navbar, { bg: "light", expand: "lg", className: "mb-4", sticky: "top" },
+import { Link, useLocation } from 'react-router-dom';
+export const NavBar = ({ title, backLink, navItems = [], rightContent, }) => {
+    const location = useLocation();
+    return (React.createElement(Navbar, { bg: "light", expand: "lg", className: "mb-2", sticky: "top", expanded: false },
         React.createElement(Container, { fluid: true },
             backLink && (React.createElement(Nav.Link, { as: Link, to: backLink, className: "me-2 fs-3 text-primary", style: {
                     padding: '0.25rem 0.75rem',
@@ -15,7 +16,7 @@ export const NavBar = ({ title, backLink, navItems = [], rightContent }) => {
                     height: '2.5rem'
                 }, title: "Go up one level" }, "\u2191")),
             React.createElement(Navbar.Brand, { className: backLink ? 'ms-2' : '' }, title),
-            React.createElement(Navbar.Toggle, { "aria-controls": "basic-navbar-nav" }),
+            React.createElement(Navbar.Toggle, { "aria-controls": "basic-navbar-nav", style: { display: 'none' } }),
             React.createElement(Navbar.Collapse, { id: "basic-navbar-nav" },
                 navItems.length > 0 && (React.createElement(Nav, { className: "me-auto" }, navItems.map((item, i) => {
                     const className = [
@@ -25,14 +26,12 @@ export const NavBar = ({ title, backLink, navItems = [], rightContent }) => {
                         typeof item.label === 'string' && item.label.includes('✅') ? 'text-success fw-bold' : '',
                         !item.active && typeof item.label !== 'string' ? 'text-secondary' : ''
                     ].filter(Boolean).join(' ');
-                    return (React.createElement(Nav.Link, { key: i, as: item.to ? Link : 'div', to: item.to, active: item.active, className: className, style: {
-                            ':hover': {
-                                color: 'var(--bs-primary)',
-                                textDecoration: 'none'
-                            }
-                        } },
+                    return (React.createElement(Nav.Link, { key: i, as: item.to ? Link : 'div', to: item.to, active: item.active, className: className, title: typeof item.label === 'string' ? item.label : undefined },
+                        item.icon && React.createElement("span", { className: "me-2" }, item.icon),
                         item.label,
                         item.badge && (React.createElement(Badge, { bg: item.badge.variant, className: "ms-2" }, item.badge.text))));
                 }))),
-                rightContent && (React.createElement(Nav, null, rightContent))))));
+                rightContent && (React.createElement(Nav, null, React.Children.map(rightContent, (child) => {
+                    return child;
+                })))))));
 };