testeranto 0.189.0 → 0.198.0

package/src/components/DesignEditorPage.tsx

@@ -0,0 +1,202 @@
+import React, { useRef, useState } from 'react';
+import { DesignEditor, DesignEditorRef } from '../../design-editor/DesignEditor';
+import { Button, Container, Row, Col } from 'react-bootstrap';
+import { saveAs } from 'file-saver';
+
+export const DesignEditorPage = () => {
+  const [projectId, setProjectId] = useState('default-project');
+  const [fileHandle, setFileHandle] = useState<any>(null);
+
+  const handleSave = async () => {
+    try {
+      if (!designEditorRef.current) {
+        console.warn('Design editor ref not available');
+        return;
+      }
+
+      // Get and save current design state
+      const designData = designEditorRef.current.saveDesign();
+      if (!designData) {
+        console.warn('No design data to save');
+        return;
+      }
+
+      // Include projectId in the saved data
+      const fullDesign = {
+        ...designData,
+        projectId
+      };
+
+      // Force immediate render after save
+      if (designEditorRef.current) {
+        designEditorRef.current.loadDesign(fullDesign);
+      }
+
+      let newHandle;
+      if ('showSaveFilePicker' in window && (window as any).showSaveFilePicker) {
+        try {
+          newHandle = await (window as any).showSaveFilePicker({
+            types: [{
+              description: 'Design Files',
+              accept: {
+                'application/json': ['.json'],
+              },
+            }],
+            suggestedName: `${projectId}.json`
+          });
+        } catch (err) {
+          console.warn('Error using showSaveFilePicker:', err);
+          // Fall back to traditional download
+          const jsonData = JSON.stringify(fullDesign, null, 2);
+          const blob = new Blob([jsonData], { type: 'application/json' });
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = `${projectId}.json`;
+          a.click();
+          URL.revokeObjectURL(url);
+          return;
+        }
+      } else {
+        // Fall back to traditional download
+        const jsonData = JSON.stringify(fullDesign, null, 2);
+        const blob = new Blob([jsonData], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${projectId}.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+        return;
+      }
+
+      const jsonData = JSON.stringify(fullDesign, null, 2);
+      const writable = await newHandle.createWritable();
+      await writable.write(jsonData);
+      await writable.close();
+      setFileHandle(newHandle);
+      console.log('Design saved successfully:', fullDesign);
+    } catch (err) {
+      console.error('Error saving file:', err);
+      if (err instanceof Error) {
+        console.error('Error details:', {
+          name: err.name,
+          message: err.message,
+          stack: err.stack
+        });
+      }
+    }
+  };
+
+  const [design, setDesign] = useState<any>(null);
+  const designEditorRef = useRef<DesignEditorRef>(null);
+
+  const handleOpen = async () => {
+    console.log('handleOpen triggered');
+    try {
+      if (!window.showOpenFilePicker) {
+        throw new Error('File System Access API not supported in this browser');
+      }
+
+      console.log('Attempting to show file picker...');
+      let handle;
+      if ('showOpenFilePicker' in window) {
+        // @ts-ignore
+        [handle] = await window.showOpenFilePicker({
+          types: [{
+            description: 'Design Files',
+            accept: {
+              'application/json': ['.json'],
+            },
+          }],
+          multiple: false
+        });
+      } else {
+        throw new Error('File System Access API not supported');
+      }
+
+      if (!handle) {
+        throw new Error('No file selected');
+      }
+      console.log('File handle obtained:', handle);
+
+      const file = await handle.getFile();
+      console.log('File object obtained:', file);
+
+      const contents = await file.text();
+      console.log('File contents loaded, length:', contents.length);
+
+      let loadedDesign = JSON.parse(contents);
+      console.log('Design parsed successfully:', loadedDesign);
+
+      // Ensure design has proper structure
+      if (!loadedDesign.objects || !loadedDesign.version) {
+        loadedDesign = {
+          version: '1.0',
+          background: '#ffffff',
+          objects: [],
+          ...loadedDesign
+        };
+      }
+
+      // Validate objects array exists
+      if (!Array.isArray(loadedDesign.objects)) {
+        loadedDesign.objects = [];
+      }
+
+      const newProjectId = loadedDesign.projectId || 'default-project';
+      console.log('Setting projectId to:', newProjectId);
+      setProjectId(newProjectId);
+
+      console.log('Setting design state...');
+      setDesign(loadedDesign);
+      setFileHandle(handle);
+
+      // Load the design into the editor
+      if (designEditorRef.current) {
+        console.log('Calling loadDesign on editor ref with:', loadedDesign);
+        designEditorRef.current.loadDesign(loadedDesign);
+      } else {
+        console.warn('designEditorRef.current is null');
+      }
+    } catch (err) {
+      console.error('Error opening file:', err);
+      if (err instanceof Error) {
+        console.error('Error details:', {
+          name: err.name,
+          message: err.message,
+          stack: err.stack
+        });
+      }
+    }
+  };
+
+  const handleExport = () => {
+    const designData = JSON.stringify({ projectId }, null, 2);
+    const blob = new Blob([designData], { type: 'application/json' });
+    saveAs(blob, `${projectId}.json`);
+  };
+
+  return (
+    <Container fluid>
+      <Row className="mb-3">
+        <Col>
+          <h1>Design Editor</h1>
+          <div className="d-flex gap-2">
+            <Button variant="primary" onClick={handleOpen}>Open</Button>
+            <Button variant="success" onClick={handleSave}>Save</Button>
+            <Button variant="secondary" onClick={handleExport}>Export</Button>
+          </div>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <DesignEditor
+            projectId={projectId}
+            ref={designEditorRef}
+          />
+        </Col>
+      </Row>
+    </Container>
+  );
+};

package/src/components/pure/AppFrame.tsx

@@ -1,29 +1,134 @@
-import React from 'react';
-import { Container } from 'react-bootstrap';
-import { SettingsButton } from './SettingsButton';
+/* 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';
 
 type AppFrameProps = {
   children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
   'data-testid'?: string;
+  title?: string;
+  rightContent?: React.ReactNode;
 };
 
-export const AppFrame = ({ children }: AppFrameProps) => {
+export const AppFrame = ({ children, title, rightContent }: AppFrameProps) => {
+  const location = useLocation();
+  const [isExpanded, setIsExpanded] = useState(true);
+
   return (
-    <div className="d-flex flex-column min-vh-100" key={window.location.pathname}>
+    <div className="d-flex min-vh-100" style={{ backgroundColor: '#f8f9fa' }}>
+      {/* Sidebar */}
+      <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)}
+      >
+        <div className="p-3 border-bottom d-flex align-items-center justify-content-center">
+          {isExpanded ? (
+            <img
+              src="/logo.svg"
+              alt="Testeranto Logo"
+              style={{ width: '128px', height: '128px' }}
+            />
+          ) : (
+            <img
+              src="/logo.svg"
+              alt="Testeranto Logo"
+              style={{ width: '40px', height: '40px' }}
+            />
+          )}
+        </div>
+        <Nav variant="pills" className="flex-column p-2 flex-grow-1">
+          <Nav.Link
+            as={NavLink}
+            to="/"
+            className={`${location.pathname === '/' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Projects"
+          >
+            <span className="me-2">📁</span>
+            {isExpanded && 'Projects'}
+          </Nav.Link>
+
+          {/* temporarily disabled */}
+          {/* <Nav.Link
+            as={NavLink}
+            to="/features-reporter"
+            className={`${location.pathname === '/features-reporter' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Features Reporter"
+          >
+            <span className="me-2">📊</span>
+            {isExpanded && 'Features Reporter'}
+          </Nav.Link>
+          <Nav.Link
+            as={NavLink}
+            to="/design-editor"
+            className={`${location.pathname === '/design-editor' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Design Editor"
+          >
+            <span className="me-2">🎨</span>
+            {isExpanded && 'Design Editor'}
+          </Nav.Link>
+          <Nav.Link
+            as={NavLink}
+            to="/text-editor"
+            className={`${location.pathname === '/text-editor' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Text Editor"
+          >
+            <span className="me-2">📝</span>
+            {isExpanded && 'Text Editor'}
+          </Nav.Link> */}
+
+          <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"
+          >
+            <span className="me-2">📊</span>
+            {isExpanded && 'Process Manager'}
+          </Nav.Link>
+          <Nav.Link
+            as={NavLink}
+            to="/settings"
+            className={`${location.pathname === '/settings' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Settings"
+          >
+            <span className="me-2">⚙️</span>
+            {isExpanded && 'Settings'}
+          </Nav.Link>
+        </Nav>
+
+        <div className="p-3 border-top text-center mt-auto">
+          {isExpanded ? (
+            <small className="text-muted">
+              made with ❤️ and <a href="https://www.npmjs.com/package/testeranto">testeranto</a>
+            </small>
+          ) : (
+            <small className="text-muted">❤️</small>
+          )}
+        </div>
+      </div>
 
-      <main className="flex-grow-1 p-3">
-        <Container fluid>
-          {children}
-        </Container>
-      </main>
-      <footer className="bg-light py-2 d-flex justify-content-between align-items-center">
-        <SettingsButton />
-        <Container className="text-end" fluid={true}>
-          made with ❤️ and <a href="https://www.npmjs.com/package/testeranto">testeranto</a>
-        </Container>
-      </footer>
+      <div className="flex-grow-1 d-flex flex-column">
+        <main className="flex-grow-1 p-4" style={{ overflow: 'auto' }}>
+          <Container fluid className="h-100">
+            {children}
+          </Container>
+        </main>
+      </div>
     </div>
   );
 };

package/src/components/pure/ModalContent.test/implementation.tsx

@@ -1,6 +1,8 @@
 import { assert } from "chai";
 import { ITestImplementation } from "../../../CoreTypes";
 import { I, M, O } from "./types";
+import { IModalContentProps } from "../ModalContent";
+import { IPM } from "../../../lib/types";
 
 export const implementation: ITestImplementation<I, O, M> = {
   suites: {
@@ -8,7 +10,7 @@ export const implementation: ITestImplementation<I, O, M> = {
   },
 
   givens: {
-    Default: () => ({
+    Default: (): IModalContentProps => ({
       theme: "light",
       handleThemeChange: () => {},
     }),
@@ -18,26 +20,26 @@ export const implementation: ITestImplementation<I, O, M> = {
   thens: {
     hasModalHeader:
       () =>
-        async ({ htmlElement }) => {
-          const header = htmlElement.querySelector('.modal-header');
+        (state) => {
+          const header = state.htmlElement?.querySelector('.modal-header');
           assert.exists(header, 'Should have Modal.Header');
-          return { htmlElement };
+          return state;
         },
 
     hasThemeCards:
       () =>
-        async ({ htmlElement }) => {
-          const themeCards = htmlElement.querySelectorAll('.theme-card');
-          assert.isAtLeast(themeCards.length, 1, 'Should render ThemeCard components');
-          return { htmlElement };
+        (state) => {
+          const themeCards = state.htmlElement?.querySelectorAll('.theme-card');
+          assert.isAtLeast(themeCards?.length, 1, 'Should render ThemeCard components');
+          return state;
         },
 
     takeScreenshot:
       (name: string) =>
-        async ({ htmlElement }, pm) => {
-          const p = await pm.page();
-          await pm.customScreenShot({ path: name }, p);
-          return { htmlElement };
+        async (state, pm: IPM) => {
+          // For web tests, we can use the PM's screenshot capability
+          // The actual implementation will be handled by the test runner
+          return state;
         },
   },
 };

package/src/components/pure/ModalContent.test/index.tsx

@@ -3,13 +3,65 @@ import { implementation } from "./implementation";
 import { specification } from "./specification";
 import { ModalContent } from "../ModalContent";
 import React from "react";
+import ReactDOM from "react-dom/client";
+import { I, O, M } from "./types";
+import { ITestInterface } from "../../../CoreTypes";
+import { IPM } from "../../../lib/types";
 
-const WrappedModalContent = (props) => (
-  <ModalContent {...props} />
-);
+const testAdapter: ITestInterface<I> = {
+  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(
-  implementation,
+export default Testeranto<I, O, M>(
+  ModalContent,
   specification,
-  WrappedModalContent
+  implementation,
+  testAdapter
 );

package/src/components/pure/ModalContent.test/specification.ts

@@ -17,8 +17,8 @@ export const specification: ITestSpecification<I, O> = (
         ],
         [],
         [
-          Then.hasModalHeader(),
-          Then.hasThemeCards(),
+          Then.hasModalHeader(undefined),
+          Then.hasThemeCards(undefined),
           Then.takeScreenshot("modal-content.png"),
         ]
       ),

package/src/components/pure/NavBar.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Navbar, Container, Nav, Badge } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { Navbar, Container, Nav, Badge, Button } from 'react-bootstrap';
+import { Link, useLocation } from 'react-router-dom';
 
 type NavItem = {
   to?: string;
@@ -11,6 +11,7 @@ type NavItem = {
     variant: string;
     text: string;
   };
+  icon?: React.ReactNode;
 };
 
 type NavBarProps = {
@@ -18,17 +19,28 @@ type NavBarProps = {
   backLink?: string;
   navItems?: NavItem[];
   rightContent?: React.ReactNode;
+  showProcessManagerLink?: boolean;
+  onToggleCollapse?: () => void;
+  isCollapsed?: boolean;
 };
 
 export const NavBar: React.FC<NavBarProps> = ({
   title,
   backLink,
   navItems = [],
-  rightContent
+  rightContent,
 }) => {
+  const location = useLocation();
+
   return (
-    <Navbar bg="light" expand="lg" className="mb-4" sticky="top">
-      <Container fluid={true}>
+    <Navbar
+      bg="light"
+      expand="lg"
+      className="mb-2"
+      sticky="top"
+      expanded={false}
+    >
+      <Container fluid>
         {backLink && (
           <Nav.Link
             as={Link}
@@ -49,10 +61,13 @@ export const NavBar: React.FC<NavBarProps> = ({
             ↑
           </Nav.Link>
         )}
+
         <Navbar.Brand className={backLink ? 'ms-2' : ''}>
           {title}
         </Navbar.Brand>
-        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        
+        <Navbar.Toggle aria-controls="basic-navbar-nav" style={{ display: 'none' }} />
+        
         <Navbar.Collapse id="basic-navbar-nav">
           {navItems.length > 0 && (
             <Nav className="me-auto">
@@ -72,16 +87,15 @@ export const NavBar: React.FC<NavBarProps> = ({
                     to={item.to}
                     active={item.active}
                     className={className}
-                    style={{
-                      ':hover': {
-                        color: 'var(--bs-primary)',
-                        textDecoration: 'none'
-                      }
-                    }}
+                    title={typeof item.label === 'string' ? item.label : undefined}
                   >
+                    {item.icon && <span className="me-2">{item.icon}</span>}
                     {item.label}
                     {item.badge && (
-                      <Badge bg={item.badge.variant} className="ms-2">
+                      <Badge
+                        bg={item.badge.variant}
+                        className="ms-2"
+                      >
                         {item.badge.text}
                       </Badge>
                     )}
@@ -92,7 +106,9 @@ export const NavBar: React.FC<NavBarProps> = ({
           )}
           {rightContent && (
             <Nav>
-              {rightContent}
+              {React.Children.map(rightContent, (child) => {
+                return child;
+              })}
             </Nav>
           )}
         </Navbar.Collapse>