testeranto 0.203.0 → 0.206.0

package/dist/common/src/app/frontend/components/pure/TerminalInput.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TerminalInput = void 0;
+const react_1 = __importStar(require("react"));
+const TerminalInput = ({ onInput }) => {
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const inputRef = (0, react_1.useRef)(null);
+    const handleSubmit = (0, react_1.useCallback)(() => {
+        if (inputValue.trim()) {
+            onInput(inputValue + '\n');
+            setInputValue('');
+        }
+    }, [inputValue, onInput]);
+    const handleKeyPress = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Enter') {
+            handleSubmit();
+            e.preventDefault();
+        }
+    }, [handleSubmit]);
+    const handleInputChange = (0, react_1.useCallback)((e) => {
+        setInputValue(e.target.value);
+    }, []);
+    // Focus the input after submission
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [inputValue]);
+    // const handleButtonClick = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+    //   e.stopPropagation();
+    //   handleSubmit();
+    // }, [handleSubmit]);
+    return (react_1.default.createElement("div", { className: "border-top bg-white p-2 mt-2", style: { flexShrink: 0 } },
+        react_1.default.createElement("div", { className: "input-group" },
+            react_1.default.createElement("input", { ref: inputRef, type: "text", className: "form-control", placeholder: "Type input and press Enter...", value: inputValue, onChange: handleInputChange, onKeyPress: handleKeyPress, autoFocus: true, onClick: (e) => {
+                    e.stopPropagation();
+                    e.currentTarget.focus();
+                }, onFocus: (e) => {
+                    e.target.select();
+                }, style: { cursor: 'text' } }),
+            react_1.default.createElement("button", { className: "btn btn-primary", type: "button", onClick: handleSubmit, disabled: !inputValue.trim() }, "Send"))));
+};
+exports.TerminalInput = TerminalInput;

package/dist/common/src/app/frontend/components/pure/TerminalLogs.js

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TerminalLogs = void 0;
+const react_1 = __importStar(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const TerminalLogs = ({ logs }) => {
+    const [autoScroll, setAutoScroll] = (0, react_1.useState)(true);
+    const logsContainerRef = (0, react_1.useRef)(null);
+    // Auto-scroll to bottom when new logs arrive and autoScroll is enabled
+    (0, react_1.useEffect)(() => {
+        if (autoScroll && logsContainerRef.current) {
+            logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight;
+        }
+    }, [logs, autoScroll]);
+    // Handle scroll events to determine if we should auto-scroll
+    const handleLogsScroll = (0, react_1.useCallback)(() => {
+        if (logsContainerRef.current) {
+            const { scrollTop, scrollHeight, clientHeight } = logsContainerRef.current;
+            const isAtBottom = scrollHeight - scrollTop <= clientHeight + 10;
+            setAutoScroll(isAtBottom);
+        }
+    }, []);
+    const handleScrollToBottom = (0, react_1.useCallback)(() => {
+        setAutoScroll(true);
+        if (logsContainerRef.current) {
+            logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight;
+        }
+    }, []);
+    return (react_1.default.createElement("div", { ref: logsContainerRef, className: "bg-dark text-light flex-grow-1", style: {
+            overflowY: "auto",
+            fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+            fontSize: "14px",
+            lineHeight: "1.4",
+            padding: "0.5rem"
+        }, onScroll: handleLogsScroll },
+        logs.length > 0 ? (react_1.default.createElement("pre", { className: "mb-0", style: {
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-word",
+                backgroundColor: "transparent",
+                border: "none",
+                color: "inherit",
+            } }, logs.join(""))) : (react_1.default.createElement("div", { className: "text-muted text-center py-4" },
+            react_1.default.createElement("i", null, "No output yet"))),
+        !autoScroll && (react_1.default.createElement("div", { className: "position-sticky bottom-0 d-flex justify-content-center mb-2" },
+            react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary", size: "sm", onClick: handleScrollToBottom }, "Scroll to Bottom")))));
+};
+exports.TerminalLogs = TerminalLogs;

package/dist/common/src/app/frontend/components/pure/TestTable.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestTable = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const TestStatusBadge_1 = require("../TestStatusBadge");
+const TestTable = ({ testStatuses, projectName, }) => {
+    return (react_1.default.createElement(react_bootstrap_1.Table, { striped: true, bordered: true, hover: true },
+        react_1.default.createElement("thead", null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("th", null, "Test"),
+                react_1.default.createElement("th", null, "Runtime"),
+                react_1.default.createElement("th", null, "Status"),
+                react_1.default.createElement("th", null, "Total Tests"),
+                react_1.default.createElement("th", null, "Type Errors"),
+                react_1.default.createElement("th", null, "Lint Errors"))),
+        react_1.default.createElement("tbody", null, testStatuses.map((test) => (react_1.default.createElement("tr", { key: test.testName, "data-testid": `test-row-${test.testName}` },
+            react_1.default.createElement("td", null,
+                react_1.default.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}` }, test.testName)),
+            react_1.default.createElement("td", null,
+                react_1.default.createElement(react_bootstrap_1.Badge, { bg: "secondary", className: "ms-2" }, test.runTime)),
+            react_1.default.createElement("td", null,
+                react_1.default.createElement(TestStatusBadge_1.TestStatusBadge, { testName: test.testName, testsExist: test.testsExist, runTimeErrors: test.runTimeErrors, typeErrors: test.typeErrors, staticErrors: test.staticErrors })),
+            react_1.default.createElement("td", null, test.runTimeTests >= 0 ? test.runTimeTests : "N/A"),
+            react_1.default.createElement("td", null,
+                react_1.default.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#types` }, test.typeErrors > 0 ? `❌ ${test.typeErrors}` : "✅")),
+            react_1.default.createElement("td", null,
+                react_1.default.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#lint` }, test.staticErrors > 0 ? `❌ ${test.staticErrors}` : "✅"))))))));
+};
+exports.TestTable = TestTable;

package/dist/common/src/app/frontend/components/pure/ThemeCard.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeCard = void 0;
+const react_1 = __importDefault(require("react"));
+const ThemeCard = ({ theme, handleThemeChange, value, title, description, style, }) => (react_1.default.createElement("div", { className: "col-md-4" },
+    react_1.default.createElement("div", { className: `card theme-card ${theme === value ? "border-primary" : ""}`, onClick: () => handleThemeChange({
+            target: { value },
+        }), style: style },
+        react_1.default.createElement("div", { className: "card-body text-center p-3" },
+            react_1.default.createElement("h5", { className: "card-title mb-1" }, title),
+            react_1.default.createElement("p", { className: "small text-muted mb-0" }, description)))));
+exports.ThemeCard = ThemeCard;

package/dist/common/src/app/frontend/components/pure/ToastNotification.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastNotification = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const ToastNotification = ({ showToast, setShowToast, toastVariant, toastMessage }) => (react_1.default.createElement(react_bootstrap_1.ToastContainer, { position: "top-end", className: "p-3" },
+    react_1.default.createElement(react_bootstrap_1.Toast, { show: showToast, onClose: () => setShowToast(false), delay: 3000, autohide: true, bg: toastVariant },
+        react_1.default.createElement(react_bootstrap_1.Toast.Header, null,
+            react_1.default.createElement("strong", { className: "me-auto" }, "Command Status")),
+        react_1.default.createElement(react_bootstrap_1.Toast.Body, { className: "text-white" }, toastMessage))));
+exports.ToastNotification = ToastNotification;

package/dist/common/src/app/frontend/components/pure/UserProfile.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserProfile = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const GitHubAuthService_1 = require("../../services/GitHubAuthService");
+const UserProfile = () => {
+    const user = GitHubAuthService_1.githubAuthService.userInfo;
+    if (!GitHubAuthService_1.githubAuthService.isAuthenticated || !user) {
+        return null;
+    }
+    const handleLogout = () => {
+        GitHubAuthService_1.githubAuthService.logout();
+    };
+    return (react_1.default.createElement(react_bootstrap_1.Dropdown, { align: "end" },
+        react_1.default.createElement(react_bootstrap_1.Dropdown.Toggle, { variant: "outline-light", id: "user-profile-dropdown", className: "d-flex align-items-center" },
+            react_1.default.createElement(react_bootstrap_1.Image, { src: user.avatar_url, roundedCircle: true, width: "32", height: "32", className: "me-2" }),
+            user.login),
+        react_1.default.createElement(react_bootstrap_1.Dropdown.Menu, null,
+            react_1.default.createElement(react_bootstrap_1.Dropdown.Item, { href: `https://github.com/${user.login}`, target: "_blank" }, "View on GitHub"),
+            react_1.default.createElement(react_bootstrap_1.Dropdown.Divider, null),
+            react_1.default.createElement(react_bootstrap_1.Dropdown.Item, { onClick: handleLogout }, "Sign out"))));
+};
+exports.UserProfile = UserProfile;

package/dist/common/src/app/frontend/components/stateful/AuthCallbackPage.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthCallbackPage = void 0;
+const react_1 = __importStar(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const AuthCallbackPage = () => {
+    (0, react_1.useEffect)(() => {
+        // This page is only used in the popup window
+        // The actual authentication handling is done via the message listener in App.tsx
+        // This component just shows a loading spinner and will be closed automatically
+    }, []);
+    return (react_1.default.createElement(react_bootstrap_1.Container, { className: "d-flex justify-content-center align-items-center", style: { minHeight: '50vh' } },
+        react_1.default.createElement("div", { className: "text-center" },
+            react_1.default.createElement(react_bootstrap_1.Spinner, { animation: "border", role: "status", className: "mb-3" },
+                react_1.default.createElement("span", { className: "visually-hidden" }, "Authenticating...")),
+            react_1.default.createElement("h4", null, "Completing GitHub authentication..."))));
+};
+exports.AuthCallbackPage = AuthCallbackPage;

package/dist/common/src/app/frontend/components/stateful/DratoPage.js

@@ -0,0 +1,319 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DratoPage = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const react_1 = __importStar(require("react"));
+const GenericXMLEditorPage_1 = require("./GenericXMLEditorPage");
+const DratoPage = () => {
+    const initialTree = {
+        id: "root",
+        type: "Container",
+        attributes: {
+            fluid: "true"
+        },
+        children: [],
+    };
+    const [bootstrapTree, setBootstrapTree] = (0, react_1.useState)(initialTree);
+    const [selectedNodeId, setSelectedNodeId] = (0, react_1.useState)(null);
+    const [activeTab, setActiveTab] = (0, react_1.useState)("preview");
+    const [history, setHistory] = (0, react_1.useState)([initialTree]);
+    const [historyIndex, setHistoryIndex] = (0, react_1.useState)(0);
+    const [hiddenNodes, setHiddenNodes] = (0, react_1.useState)(new Set());
+    // Find a node by ID
+    const findNode = (0, react_1.useCallback)((node, id) => {
+        if (node.id === id)
+            return node;
+        for (const child of node.children) {
+            const found = findNode(child, id);
+            if (found)
+                return found;
+        }
+        return null;
+    }, []);
+    // Helper to update tree and manage history
+    const updateTree = (0, react_1.useCallback)((newTree) => {
+        setBootstrapTree(newTree);
+        setHistory((prevHistory) => {
+            const newHistory = prevHistory.slice(0, historyIndex + 1);
+            newHistory.push(newTree);
+            return newHistory;
+        });
+        setHistoryIndex((prevIndex) => prevIndex + 1);
+    }, [historyIndex]);
+    // Update node attributes
+    const updateNodeAttributes = (0, react_1.useCallback)((nodeId, attributes) => {
+        setBootstrapTree((prevTree) => {
+            const newTree = JSON.parse(JSON.stringify(prevTree));
+            const node = findNode(newTree, nodeId);
+            if (node) {
+                node.attributes = Object.assign(Object.assign({}, node.attributes), attributes);
+            }
+            updateTree(newTree);
+            return newTree;
+        });
+    }, [findNode, updateTree]);
+    // Update node text content
+    const updateNodeTextContent = (0, react_1.useCallback)((nodeId, textContent) => {
+        setBootstrapTree((prevTree) => {
+            const newTree = JSON.parse(JSON.stringify(prevTree));
+            const node = findNode(newTree, nodeId);
+            if (node) {
+                node.textContent = textContent;
+            }
+            updateTree(newTree);
+            return newTree;
+        });
+    }, [findNode, updateTree]);
+    // Toggle node visibility
+    const toggleNodeVisibility = (0, react_1.useCallback)((nodeId) => {
+        setHiddenNodes((prev) => {
+            const newHidden = new Set(prev);
+            if (newHidden.has(nodeId)) {
+                newHidden.delete(nodeId);
+            }
+            else {
+                newHidden.add(nodeId);
+            }
+            return newHidden;
+        });
+    }, []);
+    // Add a new child node
+    const addChildNode = (0, react_1.useCallback)((parentId, nodeType) => {
+        setBootstrapTree((prevTree) => {
+            const newTree = JSON.parse(JSON.stringify(prevTree));
+            const parent = findNode(newTree, parentId);
+            if (parent) {
+                // Default attributes based on node type
+                let defaultAttributes = {};
+                switch (nodeType) {
+                    case "Container":
+                        defaultAttributes = { fluid: "true" };
+                        break;
+                    case "Row":
+                        defaultAttributes = {};
+                        break;
+                    case "Col":
+                        defaultAttributes = { xs: "12" };
+                        break;
+                    case "Button":
+                        defaultAttributes = { variant: "primary" };
+                        break;
+                    case "Card":
+                        defaultAttributes = {};
+                        break;
+                    default:
+                        defaultAttributes = {};
+                }
+                const newNode = {
+                    id: `${nodeType}-${Date.now()}`,
+                    type: nodeType,
+                    attributes: defaultAttributes,
+                    children: [],
+                };
+                parent.children = [...parent.children, newNode];
+                setSelectedNodeId(newNode.id);
+                updateTree(newTree);
+            }
+            return newTree;
+        });
+    }, [findNode, updateTree]);
+    // Remove a node
+    const removeNode = (0, react_1.useCallback)((nodeId) => {
+        setBootstrapTree((prevTree) => {
+            const newTree = JSON.parse(JSON.stringify(prevTree));
+            const removeFromParent = (node, targetId) => {
+                for (let i = 0; i < node.children.length; i++) {
+                    if (node.children[i].id === targetId) {
+                        node.children.splice(i, 1);
+                        return true;
+                    }
+                    if (removeFromParent(node.children[i], targetId)) {
+                        return true;
+                    }
+                }
+                return false;
+            };
+            removeFromParent(newTree, nodeId);
+            if (selectedNodeId === nodeId) {
+                setSelectedNodeId(null);
+            }
+            updateTree(newTree);
+            return newTree;
+        });
+    }, [selectedNodeId, updateTree]);
+    // Undo/Redo handlers
+    const handleUndo = (0, react_1.useCallback)(() => {
+        if (historyIndex > 0) {
+            setHistoryIndex((prevIndex) => prevIndex - 1);
+            setBootstrapTree(history[historyIndex - 1]);
+        }
+    }, [history, historyIndex]);
+    const handleRedo = (0, react_1.useCallback)(() => {
+        if (historyIndex < history.length - 1) {
+            setHistoryIndex((prevIndex) => prevIndex + 1);
+            setBootstrapTree(history[historyIndex + 1]);
+        }
+    }, [history, historyIndex]);
+    const selectedNode = selectedNodeId
+        ? findNode(bootstrapTree, selectedNodeId)
+        : null;
+    // Define node types for Bootstrap
+    const bootstrapNodeTypes = [
+        { label: 'Container', type: 'Container' },
+        { label: 'Row', type: 'Row' },
+        { label: 'Column', type: 'Col' },
+        { label: 'Button', type: 'Button' },
+        { label: 'Card', type: 'Card' },
+        { label: 'Text', type: 'Text' }
+    ];
+    // Function to create new Bootstrap nodes
+    const createBootstrapNode = (parentId, nodeType) => {
+        // Default attributes based on node type
+        let defaultAttributes = {};
+        switch (nodeType) {
+            case "Container":
+                defaultAttributes = { fluid: "true" };
+                break;
+            case "Row":
+                defaultAttributes = {};
+                break;
+            case "Col":
+                defaultAttributes = { xs: "12" };
+                break;
+            case "Button":
+                defaultAttributes = { variant: "primary" };
+                break;
+            case "Card":
+                defaultAttributes = {};
+                break;
+            case "Text":
+                defaultAttributes = { class: "" };
+                break;
+            default:
+                defaultAttributes = {};
+        }
+        return {
+            id: `${nodeType}-${Date.now()}`,
+            type: nodeType,
+            attributes: defaultAttributes,
+            children: [],
+        };
+    };
+    // Render preview for Bootstrap
+    const renderBootstrapPreview = (node, isSelected, eventHandlers) => {
+        // Render Bootstrap components based on node type
+        const { type, attributes, children, textContent } = node;
+        const style = isSelected ? { outline: '2px dashed blue' } : {};
+        // Convert children to React elements
+        const childElements = children.map(child => renderBootstrapPreview(child, selectedNodeId === child.id, {}));
+        // Handle different Bootstrap component types
+        switch (type) {
+            case 'Container':
+                return (react_1.default.createElement("div", Object.assign({ key: node.id, className: `container${attributes.fluid === 'true' ? '-fluid' : ''}`, style: style }, eventHandlers),
+                    childElements,
+                    textContent));
+            case 'Row':
+                return (react_1.default.createElement("div", Object.assign({ key: node.id, className: "row", style: style }, eventHandlers),
+                    childElements,
+                    textContent));
+            case 'Col':
+                // Generate column classes based on attributes
+                const colClasses = Object.entries(attributes)
+                    .filter(([key]) => ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key))
+                    .map(([breakpoint, size]) => `col-${breakpoint}-${size}`)
+                    .join(' ');
+                return (react_1.default.createElement("div", Object.assign({ key: node.id, className: colClasses || 'col', style: style }, eventHandlers),
+                    childElements,
+                    textContent));
+            case 'Button':
+                return (react_1.default.createElement("button", Object.assign({ key: node.id, className: `btn btn-${attributes.variant || 'primary'}`, style: style }, eventHandlers), textContent || 'Button'));
+            case 'Card':
+                return (react_1.default.createElement("div", Object.assign({ key: node.id, className: "card", style: style }, eventHandlers),
+                    react_1.default.createElement("div", { className: "card-body" },
+                        childElements,
+                        textContent)));
+            case 'Text':
+                return (react_1.default.createElement("div", Object.assign({ key: node.id, className: attributes.class || '', style: style }, eventHandlers),
+                    textContent,
+                    childElements));
+            default:
+                return (react_1.default.createElement("div", Object.assign({ key: node.id, style: style }, eventHandlers),
+                    type,
+                    " element",
+                    childElements,
+                    textContent));
+        }
+    };
+    // Attribute editor for Bootstrap
+    const renderBootstrapAttributeEditor = (node, onUpdateAttributes, onUpdateTextContent) => {
+        const handleAttributeChange = (key, value) => {
+            const newAttributes = Object.assign(Object.assign({}, node.attributes), { [key]: value });
+            onUpdateAttributes(newAttributes);
+        };
+        const handleTextChange = (e) => {
+            onUpdateTextContent(e.target.value);
+        };
+        // Render different attribute editors based on node type
+        return (react_1.default.createElement("div", null,
+            (node.type === 'Button' || node.type === 'Card' || node.type === 'Text') && (react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "form-label" }, "Text Content"),
+                react_1.default.createElement("input", { type: "text", className: "form-control", value: node.textContent || '', onChange: handleTextChange }))),
+            node.type === 'Container' && (react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "form-label" }, "Fluid"),
+                react_1.default.createElement("select", { className: "form-select", value: node.attributes.fluid || 'false', onChange: (e) => handleAttributeChange('fluid', e.target.value) },
+                    react_1.default.createElement("option", { value: "true" }, "True"),
+                    react_1.default.createElement("option", { value: "false" }, "False")))),
+            node.type === 'Col' && (react_1.default.createElement("div", null, ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map(breakpoint => (react_1.default.createElement("div", { key: breakpoint, className: "mb-2" },
+                react_1.default.createElement("label", { className: "form-label" }, breakpoint.toUpperCase()),
+                react_1.default.createElement("input", { type: "text", className: "form-control", value: node.attributes[breakpoint] || '', onChange: (e) => handleAttributeChange(breakpoint, e.target.value), placeholder: "1-12" })))))),
+            node.type === 'Button' && (react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "form-label" }, "Variant"),
+                react_1.default.createElement("select", { className: "form-select", value: node.attributes.variant || 'primary', onChange: (e) => handleAttributeChange('variant', e.target.value) }, ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map(variant => (react_1.default.createElement("option", { key: variant, value: variant }, variant)))))),
+            node.type === 'Text' && (react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "form-label" }, "CSS Classes"),
+                react_1.default.createElement("input", { type: "text", className: "form-control", value: node.attributes.class || '', onChange: (e) => handleAttributeChange('class', e.target.value), placeholder: "e.g., text-primary fs-4" }))),
+            react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "form-label" }, "Other Attributes"),
+                Object.entries(node.attributes)
+                    .filter(([key]) => !['fluid', 'variant'].includes(key) && !['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key))
+                    .map(([key, value]) => (react_1.default.createElement("div", { key: key, className: "input-group mb-2" },
+                    react_1.default.createElement("span", { className: "input-group-text" }, key),
+                    react_1.default.createElement("input", { type: "text", className: "form-control", value: value, onChange: (e) => handleAttributeChange(key, e.target.value) })))))));
+    };
+    return (react_1.default.createElement(GenericXMLEditorPage_1.GenericXMLEditorPage, { initialTree: initialTree, renderPreview: renderBootstrapPreview, attributeEditor: renderBootstrapAttributeEditor, nodeTypes: bootstrapNodeTypes, onAddNode: createBootstrapNode }));
+};
+exports.DratoPage = DratoPage;

package/dist/common/src/app/frontend/components/stateful/FeaturesReporter.js

@@ -0,0 +1,22 @@
+"use strict";
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+// import React, { useEffect, useState } from 'react';
+// import { FeaturesReporterView } from '../pure/FeaturesReporterView';
+// import { buildTree } from '../../../types/features';
+// export const FeaturesReporter: React.FC = () => {
+//   const [treeData, setTreeData] = useState<any[]>([]);
+//   useEffect(() => {
+//     const fetchProjects = async () => {
+//       try {
+//         const response = await fetch('projects.json');
+//         if (!response.ok) throw new Error('Failed to fetch projects');
+//         const projectNames: string[] = await response.json();
+//         setTreeData(buildTree(projectNames));
+//       } catch (error) {
+//         console.error('Error loading projects:', error);
+//       }
+//     };
+//     fetchProjects();
+//   }, []);
+//   return <FeaturesReporterView treeData={treeData} />;
+// };