testeranto 0.200.1 → 0.203.0

package/src/components/stateful/DratoPage.tsx

@@ -0,0 +1,457 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState, useCallback } from "react";
+import { XMLNode, GenericXMLEditorPage } from "./GenericXMLEditorPage";
+
+export interface BootstrapNode {
+  id: string;
+  type: string;
+  attributes: Record<string, string>;
+  children: BootstrapNode[];
+  textContent?: string;
+}
+
+export const DratoPage = () => {
+  const initialTree: XMLNode = {
+    id: "root",
+    type: "Container",
+    attributes: {
+      fluid: "true"
+    },
+    children: [],
+  };
+
+  const [bootstrapTree, setBootstrapTree] = useState<BootstrapNode>(initialTree);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<string>("preview");
+  const [history, setHistory] = useState<BootstrapNode[]>([initialTree]);
+  const [historyIndex, setHistoryIndex] = useState<number>(0);
+  const [hiddenNodes, setHiddenNodes] = useState<Set<string>>(new Set());
+
+  // Find a node by ID
+  const findNode = useCallback((node: BootstrapNode, id: string): BootstrapNode | null => {
+    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 = useCallback(
+    (newTree: BootstrapNode) => {
+      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 = useCallback(
+    (nodeId: string, attributes: Record<string, string>) => {
+      setBootstrapTree((prevTree) => {
+        const newTree = JSON.parse(JSON.stringify(prevTree));
+        const node = findNode(newTree, nodeId);
+        if (node) {
+          node.attributes = { ...node.attributes, ...attributes };
+        }
+        updateTree(newTree);
+        return newTree;
+      });
+    },
+    [findNode, updateTree]
+  );
+
+  // Update node text content
+  const updateNodeTextContent = useCallback(
+    (nodeId: string, textContent: string) => {
+      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 = useCallback((nodeId: string) => {
+    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 = useCallback(
+    (parentId: string, nodeType: string) => {
+      setBootstrapTree((prevTree) => {
+        const newTree = JSON.parse(JSON.stringify(prevTree));
+        const parent = findNode(newTree, parentId);
+        if (parent) {
+          // Default attributes based on node type
+          let defaultAttributes: Record<string, string> = {};
+          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: BootstrapNode = {
+            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 = useCallback(
+    (nodeId: string) => {
+      setBootstrapTree((prevTree) => {
+        const newTree = JSON.parse(JSON.stringify(prevTree));
+        const removeFromParent = (node: BootstrapNode, targetId: string): boolean => {
+          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 = useCallback(() => {
+    if (historyIndex > 0) {
+      setHistoryIndex((prevIndex) => prevIndex - 1);
+      setBootstrapTree(history[historyIndex - 1]);
+    }
+  }, [history, historyIndex]);
+
+  const handleRedo = 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: string, nodeType: string): XMLNode => {
+    // Default attributes based on node type
+    let defaultAttributes: Record<string, string> = {};
+    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: XMLNode, isSelected: boolean, eventHandlers: any) => {
+    // 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 (
+          <div 
+            key={node.id}
+            className={`container${attributes.fluid === 'true' ? '-fluid' : ''}`}
+            style={style}
+            {...eventHandlers}
+          >
+            {childElements}
+            {textContent}
+          </div>
+        );
+      case 'Row':
+        return (
+          <div 
+            key={node.id}
+            className="row"
+            style={style}
+            {...eventHandlers}
+          >
+            {childElements}
+            {textContent}
+          </div>
+        );
+      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 (
+          <div 
+            key={node.id}
+            className={colClasses || 'col'}
+            style={style}
+            {...eventHandlers}
+          >
+            {childElements}
+            {textContent}
+          </div>
+        );
+      case 'Button':
+        return (
+          <button 
+            key={node.id}
+            className={`btn btn-${attributes.variant || 'primary'}`}
+            style={style}
+            {...eventHandlers}
+          >
+            {textContent || 'Button'}
+          </button>
+        );
+      case 'Card':
+        return (
+          <div 
+            key={node.id}
+            className="card"
+            style={style}
+            {...eventHandlers}
+          >
+            <div className="card-body">
+              {childElements}
+              {textContent}
+            </div>
+          </div>
+        );
+      case 'Text':
+        return (
+          <div 
+            key={node.id}
+            className={attributes.class || ''}
+            style={style}
+            {...eventHandlers}
+          >
+            {textContent}
+            {childElements}
+          </div>
+        );
+      default:
+        return (
+          <div key={node.id} style={style} {...eventHandlers}>
+            {type} element
+            {childElements}
+            {textContent}
+          </div>
+        );
+    }
+  };
+
+  // Attribute editor for Bootstrap
+  const renderBootstrapAttributeEditor = (node: XMLNode, onUpdateAttributes: (attrs: Record<string, string>) => void, onUpdateTextContent: (text: string) => void) => {
+    const handleAttributeChange = (key: string, value: string) => {
+      const newAttributes = { ...node.attributes, [key]: value };
+      onUpdateAttributes(newAttributes);
+    };
+
+    const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onUpdateTextContent(e.target.value);
+    };
+
+    // Render different attribute editors based on node type
+    return (
+      <div>
+        {/* Text content editor for nodes that can have text */}
+        {(node.type === 'Button' || node.type === 'Card' || node.type === 'Text') && (
+          <div className="mb-3">
+            <label className="form-label">Text Content</label>
+            <input
+              type="text"
+              className="form-control"
+              value={node.textContent || ''}
+              onChange={handleTextChange}
+            />
+          </div>
+        )}
+        
+        {/* Type-specific attribute editors */}
+        {node.type === 'Container' && (
+          <div className="mb-3">
+            <label className="form-label">Fluid</label>
+            <select
+              className="form-select"
+              value={node.attributes.fluid || 'false'}
+              onChange={(e) => handleAttributeChange('fluid', e.target.value)}
+            >
+              <option value="true">True</option>
+              <option value="false">False</option>
+            </select>
+          </div>
+        )}
+        
+        {node.type === 'Col' && (
+          <div>
+            {['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map(breakpoint => (
+              <div key={breakpoint} className="mb-2">
+                <label className="form-label">{breakpoint.toUpperCase()}</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={node.attributes[breakpoint] || ''}
+                  onChange={(e) => handleAttributeChange(breakpoint, e.target.value)}
+                  placeholder="1-12"
+                />
+              </div>
+            ))}
+          </div>
+        )}
+        
+        {node.type === 'Button' && (
+          <div className="mb-3">
+            <label className="form-label">Variant</label>
+            <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 => (
+                <option key={variant} value={variant}>{variant}</option>
+              ))}
+            </select>
+          </div>
+        )}
+        
+        {node.type === 'Text' && (
+          <div className="mb-3">
+            <label className="form-label">CSS Classes</label>
+            <input
+              type="text"
+              className="form-control"
+              value={node.attributes.class || ''}
+              onChange={(e) => handleAttributeChange('class', e.target.value)}
+              placeholder="e.g., text-primary fs-4"
+            />
+          </div>
+        )}
+        
+        {/* Generic attribute editor for other attributes */}
+        <div className="mb-3">
+          <label className="form-label">Other Attributes</label>
+          {Object.entries(node.attributes)
+            .filter(([key]) => !['fluid', 'variant'].includes(key) && !['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key))
+            .map(([key, value]) => (
+              <div key={key} className="input-group mb-2">
+                <span className="input-group-text">{key}</span>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={value}
+                  onChange={(e) => handleAttributeChange(key, e.target.value)}
+                />
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <GenericXMLEditorPage
+      initialTree={initialTree}
+      renderPreview={renderBootstrapPreview}
+      attributeEditor={renderBootstrapAttributeEditor}
+      nodeTypes={bootstrapNodeTypes}
+      onAddNode={createBootstrapNode}
+    />
+  );
+};

package/src/components/stateful/FeaturesReporter.tsx

@@ -1,4 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useState } from 'react';
+
 import { FeaturesReporterView } from '../pure/FeaturesReporterView';
 import { buildTree } from '../../types/features';
 
@@ -8,7 +10,7 @@ export const FeaturesReporter: React.FC = () => {
   useEffect(() => {
     const fetchProjects = async () => {
       try {
-        const response = await fetch('/projects.json');
+        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));

package/src/components/stateful/FileTree.tsx

@@ -1,66 +1,66 @@
-import React from 'react';
-import { FileType } from './TextEditorPage';
+// import React from 'react';
+// import { FileType } from './TextEditorPage';
 
-type FileTreeProps = {
-  files: FileType[];
-  onSelect: (path: string) => void;
-  activeFile: string | null;
-};
+// type FileTreeProps = {
+//   files: FileType[];
+//   onSelect: (path: string) => void;
+//   activeFile: string | null;
+// };
 
-export const FileTree = ({ files, onSelect, activeFile }: FileTreeProps) => {
-  // Group files by directory
-  const fileGroups = files.reduce((acc, file) => {
-    const dir = file.path.split('/').slice(0, -1).join('/');
-    if (!acc[dir]) {
-      acc[dir] = [];
-    }
-    acc[dir].push(file);
-    return acc;
-  }, {} as Record<string, FileType[]>);
+// export const FileTree = ({ files, onSelect, activeFile }: FileTreeProps) => {
+//   // Group files by directory
+//   const fileGroups = files.reduce((acc, file) => {
+//     const dir = file.path.split('/').slice(0, -1).join('/');
+//     if (!acc[dir]) {
+//       acc[dir] = [];
+//     }
+//     acc[dir].push(file);
+//     return acc;
+//   }, {} as Record<string, FileType[]>);
 
-  const fileTreeStyle = {
-    padding: '8px',
-    fontFamily: 'monospace'
-  };
+//   const fileTreeStyle = {
+//     padding: '8px',
+//     fontFamily: 'monospace'
+//   };
 
-  const directoryStyle = {
-    marginBottom: '8px'
-  };
+//   const directoryStyle = {
+//     marginBottom: '8px'
+//   };
 
-  const directoryNameStyle = {
-    fontWeight: 'bold',
-    padding: '4px 0',
-    color: '#555'
-  };
+//   const directoryNameStyle = {
+//     fontWeight: 'bold',
+//     padding: '4px 0',
+//     color: '#555'
+//   };
 
-  const fileStyle = {
-    padding: '4px 8px',
-    cursor: 'pointer',
-    borderRadius: '4px'
-  };
+//   const fileStyle = {
+//     padding: '4px 8px',
+//     cursor: 'pointer',
+//     borderRadius: '4px'
+//   };
 
-  const activeFileStyle = {
-    ...fileStyle,
-    backgroundColor: '#e0e0e0',
-    fontWeight: 'bold'
-  };
+//   const activeFileStyle = {
+//     ...fileStyle,
+//     backgroundColor: '#e0e0e0',
+//     fontWeight: 'bold'
+//   };
 
-  return (
-    <div style={fileTreeStyle}>
-      {Object.entries(fileGroups).map(([dir, dirFiles]) => (
-        <div key={dir} style={directoryStyle}>
-          <div style={directoryNameStyle}>{dir || '/'}</div>
-          {dirFiles.map(file => (
-            <div 
-              key={file.path}
-              style={activeFile === file.path ? activeFileStyle : fileStyle}
-              onClick={() => onSelect(file.path)}
-            >
-              {file.path.split('/').pop()}
-            </div>
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-};
+//   return (
+//     <div style={fileTreeStyle}>
+//       {Object.entries(fileGroups).map(([dir, dirFiles]) => (
+//         <div key={dir} style={directoryStyle}>
+//           <div style={directoryNameStyle}>{dir || '/'}</div>
+//           {dirFiles.map(file => (
+//             <div 
+//               key={file.path}
+//               style={activeFile === file.path ? activeFileStyle : fileStyle}
+//               onClick={() => onSelect(file.path)}
+//             >
+//               {file.path.split('/').pop()}
+//             </div>
+//           ))}
+//         </div>
+//       ))}
+//     </div>
+//   );
+// };

package/src/components/stateful/GenericXMLEditor/AttributeEditor.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Form } from 'react-bootstrap';
+import { XMLNode } from '../GenericXMLEditorPage';
+
+interface AttributeEditorProps {
+  selectedNode: XMLNode | null;
+  onUpdateNode: (nodeId: string, attributes: Record<string, string>) => void;
+}
+
+export const AttributeEditor: React.FC<AttributeEditorProps> = ({
+  selectedNode,
+  onUpdateNode
+}) => {
+  if (!selectedNode) {
+    return (
+      <div className="p-3 text-muted">
+        Select a node to edit its attributes
+      </div>
+    );
+  }
+
+  const handleAttributeChange = (key: string, value: string) => {
+    const newAttributes = { ...selectedNode.attributes };
+    if (value === '') {
+      delete newAttributes[key];
+    } else {
+      newAttributes[key] = value;
+    }
+    onUpdateNode(selectedNode.id, newAttributes);
+  };
+
+  const handleAddAttribute = () => {
+    const newKey = prompt('Enter attribute name:');
+    if (newKey && newKey.trim() !== '') {
+      const newAttributes = { ...selectedNode.attributes, [newKey]: '' };
+      onUpdateNode(selectedNode.id, newAttributes);
+    }
+  };
+
+  const handleRemoveAttribute = (key: string) => {
+    const newAttributes = { ...selectedNode.attributes };
+    delete newAttributes[key];
+    onUpdateNode(selectedNode.id, newAttributes);
+  };
+
+  return (
+    <div className="p-3">
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <h6>Attributes for {selectedNode.type}</h6>
+        <button
+          className="btn btn-sm btn-outline-success"
+          onClick={handleAddAttribute}
+        >
+          + Add
+        </button>
+      </div>
+      
+      {Object.entries(selectedNode.attributes).map(([key, value]) => (
+        <div key={key} className="mb-2 d-flex align-items-center">
+          <Form.Group className="flex-grow-1 me-2">
+            <Form.Label className="small mb-0">{key}</Form.Label>
+            <Form.Control
+              type="text"
+              size="sm"
+              value={value}
+              onChange={(e) => handleAttributeChange(key, e.target.value)}
+              placeholder="Value"
+            />
+          </Form.Group>
+          <button
+            className="btn btn-sm btn-outline-danger"
+            onClick={() => handleRemoveAttribute(key)}
+            style={{ marginTop: '1.5rem' }}
+          >
+            ×
+          </button>
+        </div>
+      ))}
+      
+      {Object.keys(selectedNode.attributes).length === 0 && (
+        <div className="text-muted small">
+          No attributes defined
+        </div>
+      )}
+    </div>
+  );
+};