testeranto 0.177.0 → 0.197.0

package/src/app.scss

@@ -0,0 +1,169 @@
+@use "./style.scss";
+
+:root {
+  --bs-heading-color: rgba(0, 0, 0, 0.9);
+  --bs-modal-color: rgba(0, 0, 0, 0.9);
+  --frosted-bg: rgba(255, 255, 255, 0.2);
+  --frosted-border: rgba(255, 255, 255, 0.3);
+  --frosted-text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.3),
+    1px 1px 0 rgba(0, 0, 0, 0.3);
+  --frosted-inset-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+}
+
+[data-bs-theme="dark"] {
+  --bs-heading-color: rgba(255, 255, 255, 0.9);
+  --bs-modal-color: rgba(255, 255, 255, 0.9);
+  --frosted-bg: rgba(0, 0, 0, 0.2);
+  --frosted-border: rgba(0, 0, 0, 0.3);
+  --frosted-text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.3),
+    1px 1px 0 rgba(0, 0, 0, 0.3);
+  --frosted-inset-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+}
+
+pre,
+code,
+.modal-content,
+.accordion-button,
+.theme-card {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  max-width: 80ch;
+  overflow-x: auto;
+  display: block;
+  padding: 1rem;
+  border-radius: 8px;
+  font-family: monospace;
+  line-height: 1.4;
+  color: var(--bs-modal-color);
+  background-color: var(--frosted-bg);
+  backdrop-filter: blur(16px) saturate(180%);
+  border: 1px solid var(--frosted-border);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), var(--frosted-inset-shadow);
+  isolation: isolate;
+  // text-shadow:
+  //   0 1px 3px rgba(0,0,0,0.8),
+  //   0 0 10px rgba(0,0,0,0.6),
+  //   0 0 20px rgba(0,0,0,0.3),
+  //   0 0 40px rgba(0,0,0,0.1);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--light-text);
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  backdrop-filter: var(--text-panel-blur);
+  background-color: var(--text-panel-bg);
+  border-radius: 8px;
+  text-shadow: var(--text-shadow-heavy);
+  box-shadow: var(--panel-border), 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin: 0.5rem 0;
+}
+
+p,
+.lead {
+  color: var(--light-text);
+  text-shadow: var(--text-shadow-light);
+  backdrop-filter: var(--text-panel-blur);
+  background-color: var(--text-panel-bg);
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: var(--panel-border);
+  margin: 1rem 0;
+}
+
+.modal-content {
+  --bs-modal-color: var(--bs-heading-color);
+  background-color: var(--frosted-bg);
+  backdrop-filter: blur(24px) saturate(200%);
+  border: 1px solid var(--frosted-border);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), var(--frosted-inset-shadow);
+}
+
+
+.theme-card {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(12px);
+
+    &::before {
+      opacity: 0.1;
+    }
+  }
+
+  &.border-primary {
+    box-shadow: 0 0 0 2px var(--primary);
+    background-color: rgba(var(--primary-rgb), 0.2);
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(
+      circle at center,
+      rgba(255, 255, 255, 0.3) 0%,
+      transparent 70%
+    );
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .card-body {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.accordion-button {
+  font-weight: 500;
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  &:not(.collapsed) {
+    background-color: rgba(var(--primary-rgb), 0.2);
+    color: var(--dark);
+    backdrop-filter: blur(12px);
+  }
+}
+
+.modal-content {
+  border-radius: 12px;
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(24px) saturate(200%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  isolation: isolate;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.gear-icon {
+  transition: transform 0.3s ease;
+}

package/src/build.ts

@@ -6,25 +6,15 @@ import path from "path";
 import readline from "readline";
 import esbuild from "esbuild";
 
-import esbuildNodeConfiger from "./esbuildConfigs/node.js";
-import esbuildWebConfiger from "./esbuildConfigs/web.js";
-import esbuildImportConfiger from "./esbuildConfigs/pure.js";
-import webHtmlFrame from "./web.html.js";
-
-import { getRunnables } from "./utils.js";
-import {
-  ITestconfig,
-  IBuiltConfig,
-  IProject,
-  IRunTime,
-  ITestTypes,
-} from "./Types.js";
-
-import {
-  // TestPageHtml,
-  // ProjectPageHtml,
-  AppHtml,
-} from "./utils/buildTemplates.js";
+import { ITestconfig, IRunTime, ITestTypes, IBuiltConfig } from "./lib";
+import { IProject } from "./Types";
+import { getRunnables } from "./utils";
+import { AppHtml } from "./utils/buildTemplates";
+
+import esbuildNodeConfiger from "./esbuildConfigs/node";
+import esbuildWebConfiger from "./esbuildConfigs/web";
+import esbuildImportConfiger from "./esbuildConfigs/pure";
+import webHtmlFrame from "./web.html";
 
 readline.emitKeypressEvents(process.stdin);
 if (process.stdin.isTTY) process.stdin.setRawMode(true);
@@ -69,23 +59,23 @@ import(process.cwd() + "/" + "testeranto.config.ts").then(async (module) => {
     return Array.from(meta(config.tests, new Set()));
   };
 
-  const getSideCars = (runtime?: IRunTime): string[] => {
-    return Array.from(
-      new Set(
-        config.tests
-          .reduce((mm, t) => {
-            mm = mm.concat(t[3]);
-            return mm;
-          }, [] as ITestTypes[])
-          .filter((t) => {
-            return t[1] === runtime;
-          })
-          .map((t) => {
-            return t[0];
-          })
-      )
-    );
-  };
+  // const getSideCars = (runtime?: IRunTime): string[] => {
+  //   return Array.from(
+  //     new Set(
+  //       config.tests
+  //         .reduce((mm, t) => {
+  //           mm = mm.concat(t[3]);
+  //           return mm;
+  //         }, [] as ITestTypes[])
+  //         .filter((t) => {
+  //           return t[1] === runtime;
+  //         })
+  //         .map((t) => {
+  //           return t[0];
+  //         })
+  //     )
+  //   );
+  // };
 
   const config: IBuiltConfig = {
     ...rawConfig,
@@ -144,15 +134,17 @@ import(process.cwd() + "/" + "testeranto.config.ts").then(async (module) => {
       status = "built";
     }
     if (nodeDone && webDone && importDone && mode === "once") {
-      console.log(ansiC.inverse(`${testName} has been built. Goodbye.`));
+      console.log(
+        ansiC.inverse(
+          `${testName} was built and the builder exited successfully.`
+        )
+      );
       process.exit();
     }
   };
 
-  // Write HTML files
   fs.writeFileSync(`${process.cwd()}/testeranto/projects.html`, AppHtml());
 
-  // Create project-specific HTML files
   Object.keys(bigConfig.projects).forEach((projectName) => {
     console.log(`testeranto/reports/${projectName}`);
     if (!fs.existsSync(`testeranto/reports/${projectName}`)) {
@@ -163,19 +155,6 @@ import(process.cwd() + "/" + "testeranto.config.ts").then(async (module) => {
       `testeranto/reports/${projectName}/config.json`,
       JSON.stringify(config, null, 2)
     );
-
-    // fs.writeFileSync(
-    //   `${process.cwd()}/testeranto/reports/${projectName}/index.html`,
-    //   ProjectPageHtml(projectName)
-    // );
-
-    // Create runtime-specific HTML files
-    // ["node", "web", "pure"].forEach((runtime) => {
-    //   // fs.writeFileSync(
-    //   //   `${process.cwd()}/testeranto/reports/${projectName}/${runtime}.html`,
-    //   //   TestPageHtml(`${projectName} - ${runtime}`)
-    //   // );
-    // });
   });
 
   Promise.resolve(
@@ -195,13 +174,14 @@ import(process.cwd() + "/" + "testeranto.config.ts").then(async (module) => {
           )}/${sourceFileNameMinusJs}.html`
         );
         const jsfilePath = `./${sourceFileNameMinusJs}.mjs`;
+        const cssFilePath = `./${sourceFileNameMinusJs}.css`;
 
         return fs.promises
           .mkdir(path.dirname(htmlFilePath), { recursive: true })
           .then((x) =>
             fs.writeFileSync(
               htmlFilePath,
-              webHtmlFrame(jsfilePath, htmlFilePath)
+              webHtmlFrame(jsfilePath, htmlFilePath, cssFilePath)
             )
           );
       })
@@ -230,8 +210,6 @@ import(process.cwd() + "/" + "testeranto.config.ts").then(async (module) => {
         .join(".")}/${runtime}`;
 
       await fs.mkdirSync(folder, { recursive: true });
-
-      // fs.writeFileSync(`${folder}/index.html`, TestPageHtml(testName));
     });
   });
 

package/src/components/DesignEditorPage.tsx

@@ -0,0 +1,169 @@
+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<FileSystemFileHandle | null>(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);
+      }
+
+      // @ts-ignore - File System Access API
+      const newHandle = await window.showSaveFilePicker({
+        types: [{
+          description: 'Design Files',
+          accept: {
+            'application/json': ['.json'],
+          },
+        }],
+        suggestedName: `${projectId}.json`
+      });
+
+      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<Design | null>(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...');
+      const [handle] = await window.showOpenFilePicker({
+        types: [{
+          description: 'Design Files',
+          accept: {
+            'application/json': ['.json'],
+          },
+        }],
+        multiple: false
+      });
+
+      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/ProjectPageView.test/index.ts → SunriseAnimation.test/index.tsx}

@@ -1,8 +1,11 @@
 import Testeranto from "testeranto-react/src/react-dom/component/web";
-
 import { implementation } from "./implementation";
 import { specification } from "./specification";
-import { I, O } from "./types";
-import { ProjectPageView } from "../ProjectPageView";
+import { SunriseAnimation } from "./SunriseAnimation";
+import React from "react";
 
-export default Testeranto<I, O>(implementation, specification, ProjectPageView);
+export default Testeranto(
+  implementation,
+  specification,
+  SunriseAnimation
+);

package/src/components/SunriseAnimation.test/interface.ts

@@ -0,0 +1,49 @@
+import { IInput, ISelection, ISubject } from './types';
+import { ITestInterface } from "../../CoreTypes";
+import * as React from 'react';
+import * as ReactDom from 'react-dom/client';
+import { SunriseAnimation } from './SunriseAnimation';
+
+export const interface: ITestInterface<{
+  iinput: IInput;
+  isubject: ISubject;
+  istore: ISelection;
+  iselection: ISelection;
+  given: (props: IInput) => ISelection;
+  when: (sel: ISelection) => ISelection;
+  then: (sel: ISelection) => Promise<ISelection>;
+}> = {
+  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/src/components/SunriseAnimation.test/types.ts

@@ -0,0 +1,53 @@
+import { Ibdd_in, Ibdd_out } from "../../CoreTypes";
+import * as React from 'react';
+import * as ReactDom from 'react-dom/client';
+
+export type IInput = {
+  active: boolean;
+  duration?: number;
+  color?: string;
+};
+
+export type ISelection = {
+  container: HTMLDivElement;
+  reactElement: React.ReactElement;
+  domRoot: ReactDom.Root;
+  animationElement: HTMLElement | null;
+};
+
+export type IStore = ISelection;
+
+export type ISubject = {
+  container: HTMLDivElement;
+  domRoot: ReactDom.Root;
+};
+
+export type O = Ibdd_out<
+  // Suites
+  {
+    Default: [string];
+    AnimationBehavior: [string];
+    Customization: [string];
+  },
+  // Givens
+  {
+    Default: [];
+    Active: [];
+    Inactive: [];
+    WithCustomDuration: [number];
+    WithCustomColor: [string];
+  },
+  // Whens
+  {
+    ToggleActive: [];
+  },
+  // Thens
+  {
+    RendersContainer: [];
+    ShowsWhenActive: [];
+    HidesWhenInactive: [];
+    HasAnimation: [];
+    HasDuration: [number];
+    HasColor: [string];
+  }
+>;

package/src/components/TestStatusBadge.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import { Badge } from 'react-bootstrap';
 
@@ -16,50 +17,28 @@ type TestStatusBadgeProps = {
 };
 
 export const TestStatusBadge = (props: TestStatusBadgeProps) => {
-  // 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 <Badge bg={bddStatus.variant}>{bddStatus.text}</Badge>;
   }
 
-  console.log('Rendering full badge set with:', {
-    bddStatus,
-    typeErrors: props.typeErrors,
-    staticErrors: props.staticErrors
-  });
-  console.groupEnd();
 
   return (
     <div className="d-flex gap-2">