testeranto 0.202.0 → 0.205.0

package/src/app/frontend/app.scss

@@ -0,0 +1,119 @@
+@use "../../style.scss";
+@import "testeranto-stilo/src/gradients.scss";
+
+// Custom tooltip styles if needed
+.tooltip {
+  .tooltip-inner {
+    background-color: #333;
+    color: white;
+    border-radius: 4px;
+    padding: 8px 12px;
+    font-size: 14px;
+  }
+
+  .tooltip-arrow::before {
+    border-right-color: #333;
+  }
+}
+
+// Navbar attention animation - More pronounced
+@keyframes pronounced-pulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 rgba(59, 130, 246, 0);
+    background-color: transparent;
+  }
+  25% {
+    transform: scale(1.15);
+    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
+    background-color: rgba(59, 130, 246, 0.1);
+  }
+  50% {
+    transform: scale(1.1);
+    box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
+    background-color: rgba(59, 130, 246, 0.2);
+  }
+  75% {
+    transform: scale(1.05);
+    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
+    background-color: rgba(59, 130, 246, 0.1);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 rgba(59, 130, 246, 0);
+    background-color: transparent;
+  }
+}
+
+// Wave effect classes for each link - More pronounced
+.navbar-attention-1 {
+  animation: pronounced-pulse 1s ease-in-out 0s;
+  animation-iteration-count: 1;
+  border-radius: 8px;
+}
+
+.navbar-attention-2 {
+  animation: pronounced-pulse 1s ease-in-out 0.4s;
+  animation-iteration-count: 1;
+  border-radius: 8px;
+}
+
+.navbar-attention-3 {
+  animation: pronounced-pulse 1s ease-in-out 0.6s;
+  animation-iteration-count: 1;
+  border-radius: 8px;
+}
+
+.navbar-attention-4 {
+  animation: pronounced-pulse 1s ease-in-out 0.8s;
+  animation-iteration-count: 1;
+  border-radius: 8px;
+}
+
+.navbar-attention-5 {
+  animation: pronounced-pulse 1s ease-in-out 1s;
+  animation-iteration-count: 1;
+  border-radius: 8px;
+}
+
+.navbar-attention-6 {
+  animation: pronounced-pulse 1s ease-in-out 1.2s;
+  animation-iteration-count: 1;
+  border-radius: 8px;
+}
+
+// For the sidebar container - More pronounced
+// .sidebar-attention {
+//   animation: pronounced-pulse 2s ease-in-out;
+//   animation-iteration-count: 1;
+//   border-right: 3px solid #3b82f6 !important;
+//   border-radius: 0 12px 12px 0;
+// }
+
+// Gradient animation for helpo drawer
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+// Helpo drawer styles
+.helpo-drawer {
+  z-index: 1000; // Same as main content
+  transition: width 0.3s ease;
+}
+
+// Ensure proper z-indexing
+.sidebar {
+  z-index: 1010; // Higher than helpo
+}
+
+.main-content {
+  z-index: 1000; // Same as helpo
+}

package/src/app/frontend/components/DesignEditorPage.tsx

@@ -0,0 +1,210 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useRef, useState } from 'react';
+
+import { Button, Container, Row, Col } from 'react-bootstrap';
+import { saveAs } from 'file-saver';
+
+import {
+  DesignEditor,
+  // DesignEditorRef
+} from '../../../../design-editor/DesignEditor';
+
+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/app/frontend/components/SunriseAnimation.test/interface.ts

@@ -0,0 +1,50 @@
+import { IInput, ISelection, ISubject } from "./types";
+
+import * as React from "react";
+import * as ReactDom from "react-dom/client";
+import { SunriseAnimation } from "./SunriseAnimation";
+import { ITestAdapter } from "../../../../CoreTypes";
+
+export const interface: ITestAdapter<{
+  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/app/frontend/components/SunriseAnimation.test/types.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as ReactDom from "react-dom/client";
+import { Ibdd_out } from "../../../../CoreTypes";
+
+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];
+  }
+>;