wyreframe 0.1.0

package/src/parser/__tests__/fixtures/alignment-test.txt

@@ -0,0 +1,9 @@
++--Alignment--------------+
+|                         |
+|  Left Aligned           |
+|                         |
+|      Center Aligned     |
+|                         |
+|      Right Aligned      |
+|                         |
++-------------------------+

package/src/parser/__tests__/fixtures/all-elements.txt

@@ -0,0 +1,16 @@
++--Elements---------------+
+|                         |
+|  * Emphasis Text        |
+|                         |
+|  [ Button ]             |
+|                         |
+|  #input-field           |
+|                         |
+|  "Link Text"            |
+|                         |
+|  [x] Checked Item       |
+|  [ ] Unchecked Item     |
+|                         |
+|  Regular text           |
+|                         |
++-------------------------+

package/src/parser/__tests__/fixtures/login-scene.txt

@@ -0,0 +1,17 @@
+@scene: login
+@title: Login Page
+
++--Login------------------+
+|                         |
+|     Welcome Back!       |
+|                         |
+|  Email:                 |
+|  #email                 |
+|                         |
+|  Password:              |
+|  #password              |
+|                         |
+|     [ Sign In ]         |
+|                         |
+|  "Forgot Password?"     |
++-------------------------+

package/src/parser/__tests__/fixtures/multi-scene.txt

@@ -0,0 +1,25 @@
+@scene: home
+@title: Home
+
++--Home-------------------+
+|                         |
+|     Welcome!            |
+|                         |
+|  [ Get Started ]        |
+|                         |
++-------------------------+
+
+---
+
+@scene: profile
+@title: Profile
+
++--Profile----------------+
+|                         |
+|  User Profile           |
+|                         |
+|  #username              |
+|                         |
+|  [ Save ]               |
+|                         |
++-------------------------+

package/src/parser/__tests__/fixtures/nested-boxes.txt

@@ -0,0 +1,15 @@
++--Container--------------+
+|                         |
+|  +--Header-----------+  |
+|  |                  |  |
+|  |  * Dashboard     |  |
+|  |                  |  |
+|  +------------------+  |
+|                         |
+|  +--Content----------+  |
+|  |                  |  |
+|  |  Main Content    |  |
+|  |                  |  |
+|  +------------------+  |
+|                         |
++-------------------------+

package/src/parser/__tests__/fixtures/simple-box.txt

@@ -0,0 +1,5 @@
++----------+
+|          |
+|  Hello   |
+|          |
++----------+

package/src/parser/__tests__/fixtures/with-dividers.txt

@@ -0,0 +1,14 @@
++--Form-------------------+
+|                         |
+|  Personal Info          |
+|                         |
+|=========================|
+|                         |
+|  #name                  |
+|  #email                 |
+|                         |
+|=========================|
+|                         |
+|     [ Submit ]          |
+|                         |
++-------------------------+

package/src/renderer/Renderer.gen.tsx

@@ -0,0 +1,32 @@
+/* TypeScript file generated from Renderer.res by genType. */
+
+/* eslint-disable */
+/* tslint:disable */
+
+import * as RendererJS from './Renderer.mjs';
+
+import type {ast as Types_ast} from '../../src/parser/Core/Types.gen';
+
+export abstract class DomBindings_element { protected opaque!: any }; /* simulate opaque types */
+
+/** * Configuration for the rendering process. */
+export type renderOptions = {
+  readonly theme: (undefined | string); 
+  readonly interactive: boolean; 
+  readonly injectStyles: boolean; 
+  readonly containerClass: (undefined | string)
+};
+
+/** * Scene management interface returned by render function. */
+export type sceneManager = {
+  readonly goto: (_1:string) => void; 
+  readonly getCurrentScene: () => (undefined | string); 
+  readonly getSceneIds: () => string[]
+};
+
+/** * Render result containing the root element and scene manager. */
+export type renderResult = { readonly root: DomBindings_element; readonly sceneManager: sceneManager };
+
+export const render: (ast:Types_ast, options:(undefined | renderOptions)) => renderResult = RendererJS.render as any;
+
+export const toHTMLString: (_ast:Types_ast, _options:(undefined | renderOptions)) => string = RendererJS.toHTMLString as any;

package/src/renderer/Renderer.mjs

@@ -0,0 +1,391 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Core__Option from "@rescript/core/src/Core__Option.mjs";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+
+let DomBindings = {};
+
+let defaultOptions = {
+  theme: undefined,
+  interactive: true,
+  injectStyles: true,
+  containerClass: undefined
+};
+
+let defaultStyles = `
+  .wf-app { font-family: monospace; position: relative; overflow: hidden; background: #fff; color: #333; font-size: 14px; margin: 0 auto; }
+  .wf-app.wf-device-desktop { width: 1440px; height: 900px; max-width: 100%; aspect-ratio: 16/10; }
+  .wf-app.wf-device-laptop { width: 1280px; height: 800px; max-width: 100%; aspect-ratio: 16/10; }
+  .wf-app.wf-device-tablet { width: 768px; height: 1024px; max-width: 100%; aspect-ratio: 3/4; }
+  .wf-app.wf-device-tablet-landscape { width: 1024px; height: 768px; max-width: 100%; aspect-ratio: 4/3; }
+  .wf-app.wf-device-mobile { width: 375px; height: 812px; max-width: 100%; aspect-ratio: 375/812; }
+  .wf-app.wf-device-mobile-landscape { width: 812px; height: 375px; max-width: 100%; aspect-ratio: 812/375; }
+  .wf-scene { position: absolute; top:0; left:0; width:100%; height:100%; padding:16px; box-sizing:border-box; opacity:0; pointer-events:none; transition: opacity 0.3s ease, transform 0.3s ease; overflow-y: auto; }
+  .wf-scene.active { opacity:1; pointer-events:auto; }
+  .wf-box { border:1px solid #333; padding:12px; margin:8px 0; background:#fff; }
+  .wf-box-named { position: relative; margin-top: 16px; }
+  .wf-box-named::before { content: attr(data-name); position: absolute; top: -10px; left: 8px; background: #fff; padding: 0 4px; font-size: 12px; color: #666; }
+  .wf-row { display:flex; gap:12px; align-items:center; margin:4px 0; }
+  .wf-column { flex:1; display:flex; flex-direction:column; gap:4px; }
+  .wf-button { display:block; width:fit-content; padding:8px 16px; background:#fff; color:#333; border:1px solid #333; font: inherit; cursor:pointer; margin:4px 0; }
+  .wf-button.secondary { background:#eee; }
+  .wf-button.ghost { background:transparent; border:1px dashed #999; color:#666; }
+  .wf-input { width:100%; padding:8px; border:1px solid #333; font: inherit; box-sizing:border-box; margin:4px 0; }
+  .wf-link { display:block; color:#333; text-decoration:underline; cursor:pointer; margin:4px 0; }
+  .wf-row .wf-button { display:inline-block; margin:0; }
+  .wf-row .wf-link { display:inline; margin:0 8px; }
+  .wf-text { margin:4px 0; line-height:1.4; }
+  .wf-text.emphasis { font-weight:bold; }
+  .wf-divider { border:none; border-top:1px solid #333; margin:12px 0; }
+  .wf-section { border:1px solid #333; margin:8px 0; }
+  .wf-section-header { background:#fff; padding:4px 8px; font-size:12px; color:#666; border-bottom:1px solid #333; }
+  .wf-section-content { padding:8px; }
+  .wf-checkbox { display:flex; align-items:center; gap:8px; margin:4px 0; cursor:pointer; }
+  .align-center { text-align:center; }
+  .align-right { text-align:right; }
+  .wf-row.align-center { justify-content:center; }
+  .wf-row.align-right { justify-content:flex-end; }
+  .wf-button.align-center, .wf-link.align-center { margin-left:auto; margin-right:auto; }
+  .wf-button.align-right, .wf-link.align-right { margin-left:auto; margin-right:0; }
+`;
+
+function isNoiseText(content) {
+  let trimmed = content.trim();
+  if (trimmed === "") {
+    return true;
+  }
+  let borderPattern = /^[+|=\-\s]+$/;
+  let hasPipeOrPlus = /[+|]/;
+  if (borderPattern.test(trimmed)) {
+    return true;
+  } else {
+    return hasPipeOrPlus.test(trimmed);
+  }
+}
+
+function isInputOnlyBox(elem) {
+  if (elem.TAG !== "Box") {
+    return false;
+  }
+  if (elem.name !== undefined) {
+    return false;
+  }
+  let children = elem.children;
+  if (children.length > 0) {
+    return children.every(child => child.TAG === "Input");
+  } else {
+    return false;
+  }
+}
+
+function getInputsFromBox(elem) {
+  if (elem.TAG === "Box") {
+    if (elem.name !== undefined) {
+      return [];
+    } else {
+      return elem.children;
+    }
+  } else {
+    return [];
+  }
+}
+
+function alignmentToClass(align) {
+  switch (align) {
+    case "Left" :
+      return;
+    case "Center" :
+      return "align-center";
+    case "Right" :
+      return "align-right";
+  }
+}
+
+function applyAlignment(el, align) {
+  let cls = alignmentToClass(align);
+  if (cls !== undefined) {
+    el.classList.add(cls);
+    return;
+  }
+}
+
+function deviceTypeToClass(device) {
+  if (typeof device === "object") {
+    return "wf-device-custom-" + device._0.toString() + "x" + device._1.toString();
+  }
+  switch (device) {
+    case "Desktop" :
+      return "wf-device-desktop";
+    case "Laptop" :
+      return "wf-device-laptop";
+    case "Tablet" :
+      return "wf-device-tablet";
+    case "TabletLandscape" :
+      return "wf-device-tablet-landscape";
+    case "Mobile" :
+      return "wf-device-mobile";
+    case "MobileLandscape" :
+      return "wf-device-mobile-landscape";
+  }
+}
+
+function renderElement(_elem, onAction) {
+  while (true) {
+    let elem = _elem;
+    if (isInputOnlyBox(elem)) {
+      let inputs = getInputsFromBox(elem);
+      let input = inputs[0];
+      if (input === undefined) {
+        return;
+      }
+      _elem = input;
+      continue;
+    }
+    switch (elem.TAG) {
+      case "Box" :
+        let name = elem.name;
+        let div = document.createElement("div");
+        div.className = "wf-box";
+        if (name !== undefined) {
+          div.classList.add("wf-box-named");
+          div.dataset["name"] = name;
+        }
+        elem.children.forEach(child => {
+          let el = renderElement(child, onAction);
+          if (el !== undefined) {
+            div.appendChild(Primitive_option.valFromOption(el));
+            return;
+          }
+        });
+        return Primitive_option.some(div);
+      case "Button" :
+        let actions = elem.actions;
+        let btn = document.createElement("button");
+        btn.className = "wf-button";
+        btn.id = elem.id;
+        btn.textContent = elem.text;
+        applyAlignment(btn, elem.align);
+        if (actions.length > 0 && onAction !== undefined) {
+          btn.addEventListener("click", _event => {
+            let action = actions[0];
+            if (action !== undefined) {
+              return onAction(action);
+            }
+          });
+        }
+        return Primitive_option.some(btn);
+      case "Input" :
+        let placeholder = elem.placeholder;
+        let input$1 = document.createElement("input");
+        input$1.className = "wf-input";
+        input$1.id = elem.id;
+        if (placeholder !== undefined) {
+          input$1.placeholder = placeholder;
+        }
+        return Primitive_option.some(input$1);
+      case "Link" :
+        let actions$1 = elem.actions;
+        let link = document.createElement("a");
+        link.className = "wf-link";
+        link.id = elem.id;
+        link.href = "#";
+        link.textContent = elem.text;
+        applyAlignment(link, elem.align);
+        if (actions$1.length > 0 && onAction !== undefined) {
+          link.addEventListener("click", event => {
+            event.preventDefault();
+            let action = actions$1[0];
+            if (action !== undefined) {
+              return onAction(action);
+            }
+          });
+        }
+        return Primitive_option.some(link);
+      case "Checkbox" :
+        let labelEl = document.createElement("label");
+        labelEl.className = "wf-checkbox";
+        let input$2 = document.createElement("input");
+        input$2.type = "checkbox";
+        input$2.checked = elem.checked;
+        let span = document.createElement("span");
+        span.textContent = elem.label;
+        labelEl.appendChild(input$2);
+        labelEl.appendChild(span);
+        return Primitive_option.some(labelEl);
+      case "Text" :
+        let content = elem.content;
+        if (isNoiseText(content)) {
+          return;
+        }
+        let p = document.createElement("p");
+        p.className = "wf-text";
+        if (elem.emphasis) {
+          p.classList.add("emphasis");
+        }
+        applyAlignment(p, elem.align);
+        p.textContent = content;
+        return Primitive_option.some(p);
+      case "Divider" :
+        let hr = document.createElement("hr");
+        hr.className = "wf-divider";
+        return Primitive_option.some(hr);
+      case "Row" :
+        let row = document.createElement("div");
+        row.className = "wf-row";
+        applyAlignment(row, elem.align);
+        elem.children.forEach(child => {
+          let el = renderElement(child, onAction);
+          if (el !== undefined) {
+            row.appendChild(Primitive_option.valFromOption(el));
+            return;
+          }
+        });
+        return Primitive_option.some(row);
+      case "Section" :
+        let section = document.createElement("div");
+        section.className = "wf-section";
+        let header = document.createElement("div");
+        header.className = "wf-section-header";
+        header.textContent = elem.name;
+        let contentEl = document.createElement("div");
+        contentEl.className = "wf-section-content";
+        elem.children.forEach(child => {
+          let el = renderElement(child, onAction);
+          if (el !== undefined) {
+            contentEl.appendChild(Primitive_option.valFromOption(el));
+            return;
+          }
+        });
+        section.appendChild(header);
+        section.appendChild(contentEl);
+        return Primitive_option.some(section);
+    }
+  };
+}
+
+function renderScene(scene, onAction) {
+  let sceneEl = document.createElement("div");
+  sceneEl.className = "wf-scene";
+  sceneEl.dataset["scene"] = scene.id;
+  scene.elements.forEach(elem => {
+    let el = renderElement(elem, onAction);
+    if (el !== undefined) {
+      sceneEl.appendChild(Primitive_option.valFromOption(el));
+      return;
+    }
+  });
+  return sceneEl;
+}
+
+function createSceneManager(scenes) {
+  let currentScene = {
+    contents: undefined
+  };
+  let goto = id => {
+    let currentId = currentScene.contents;
+    if (currentId !== undefined) {
+      let el = scenes.get(currentId);
+      if (el !== undefined) {
+        Primitive_option.valFromOption(el).classList.remove("active");
+      }
+    }
+    let el$1 = scenes.get(id);
+    if (el$1 !== undefined) {
+      Primitive_option.valFromOption(el$1).classList.add("active");
+      currentScene.contents = id;
+      return;
+    }
+  };
+  let getCurrentScene = () => currentScene.contents;
+  let getSceneIds = () => Array.from(scenes.keys());
+  return {
+    goto: goto,
+    getCurrentScene: getCurrentScene,
+    getSceneIds: getSceneIds
+  };
+}
+
+function injectStyles() {
+  let match = document.getElementById("wf-styles");
+  if (!(match == null)) {
+    return;
+  }
+  let style = document.createElement("style");
+  style.id = "wf-styles";
+  style.textContent = defaultStyles;
+  document.head.appendChild(style);
+}
+
+function render(ast, options) {
+  let opts = Core__Option.getOr(options, defaultOptions);
+  if (opts.injectStyles) {
+    injectStyles();
+  }
+  let app = document.createElement("div");
+  app.className = "wf-app";
+  let cls = opts.containerClass;
+  if (cls !== undefined) {
+    app.classList.add(cls);
+  }
+  let firstScene = ast.scenes[0];
+  if (firstScene !== undefined) {
+    let deviceClass = deviceTypeToClass(firstScene.device);
+    app.classList.add(deviceClass);
+  }
+  let gotoRef = {
+    contents: undefined
+  };
+  let handleAction = action => {
+    if (typeof action !== "object") {
+      return;
+    }
+    if (action.TAG !== "Goto") {
+      return;
+    }
+    let goto = gotoRef.contents;
+    if (goto !== undefined) {
+      return goto(action.target);
+    }
+  };
+  let sceneMap = new Map();
+  ast.scenes.forEach(scene => {
+    let sceneEl = renderScene(scene, handleAction);
+    app.appendChild(sceneEl);
+    sceneMap.set(scene.id, sceneEl);
+  });
+  let manager = createSceneManager(sceneMap);
+  gotoRef.contents = manager.goto;
+  if (ast.scenes.length > 0) {
+    let firstScene$1 = ast.scenes[0];
+    if (firstScene$1 !== undefined) {
+      manager.goto(firstScene$1.id);
+    }
+  }
+  return {
+    root: app,
+    sceneManager: manager
+  };
+}
+
+function toHTMLString(_ast, _options) {
+  return "<!-- Static HTML generation not yet implemented -->";
+}
+
+export {
+  DomBindings,
+  defaultOptions,
+  defaultStyles,
+  isNoiseText,
+  isInputOnlyBox,
+  getInputsFromBox,
+  alignmentToClass,
+  applyAlignment,
+  deviceTypeToClass,
+  renderElement,
+  renderScene,
+  createSceneManager,
+  injectStyles,
+  render,
+  toHTMLString,
+}
+/* No side effect */