caixanegra 0.3.4 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 37e8a2fbf540c8bfe1f1c85cf1dd82638bde895abe10bf24369860a6996c1c7b
-  data.tar.gz: f65ae1c5c97c7cd8264c157d93748748ec7e8084e7baba2c3f3c7113adfd60d9
+  metadata.gz: 182cc119673359db756adcca903e137025ed5283bdae367d7d6c662fc5fdc061
+  data.tar.gz: f075d702d2f361678a7775d286cb7f3b9ec1cb556778b22c4180588efe32d830
 SHA512:
-  metadata.gz: 7eb792dd9e30f18921dd6ff8c4bab52a9c564f4f93204aeb8925bf5e0255093e64e00dfb9b16b9ac0f19991fccf9868157e17c788cafa66932ef5112f96b187d
-  data.tar.gz: '09b9f690181fd28e25f5a8cd25ee1e3588af0c9efdadcd3597676fb80d9b93cbec43563d73a4086314f73fab34b11c27653cab163f10521121dd04c85a53a756'
+  metadata.gz: 29c0edd8fab4949cab99f6d513b987cda6c87b2fb29fbeb33e447616ff580c0a9fbd3413a2fe4281828f28a8ac1123942fcecbdbeedf7511c64cb000384bd797
+  data.tar.gz: 23e9e398d71b3900759d8a944f20ddf1920ac1f38bb5961d3e36a34d112e36a488301d3c4709de8c9cfc48a8a9f995869ebfea90ed20acf72915b6c61ac48345

data/README.md

@@ -46,7 +46,7 @@ This will give you the UID that **caixanegra** designer will understand, using t
 
 ```ruby
 my_flow = somewhere.get_flow # get from your own persistence or transport solution
-uid = Caixanegra::Manager.handler(my_flow || {})
+uid = Caixanegra::Manager.handler(flow_definition: my_flow || {})
 ```
 
 You can then safely navigate to the designer.

data/app/assets/javascripts/caixanegra/api.js

@@ -66,4 +66,20 @@ window.Caixanegra.API = class {
       request.send(JSON.stringify(initialCarryOver));
     });
   }
+
+  evaluateRegex(expression, sample) {
+    return new Promise((resolve, reject) => {
+      const request = new XMLHttpRequest();
+
+      request.addEventListener("load", (event) => {
+        resolve(JSON.parse(event.target.response));
+      });
+      request.addEventListener("error", () => {
+        reject();
+      });
+
+      request.open("GET", `${this.mountedPath()}/api/designer/inputs/evaluate_regex?expression=${encodeURIComponent(expression)}&sample=${encodeURIComponent(sample)}`);
+      request.send();
+    });
+  }
 }

data/app/assets/javascripts/caixanegra/designer.js

@@ -303,6 +303,15 @@ window.Caixanegra.Designer = {
       document.querySelector("#console").addEventListener("click", this.toggleExecutionConsole.bind(this));
       document.querySelector("#clearCarryOverObject").addEventListener("click", this.clearCarryOverObject.bind(this));
       document.querySelector("#reset").addEventListener("click", this.resetExecution.bind(this));
+      document.querySelector("#duplicate").addEventListener("click", this.duplicateUnit.bind(this));
+      document.querySelector("#importFlow").addEventListener("click", this.#importFlow.bind(this));
+      document.querySelector("#exportFlow").addEventListener("click", this.#exportFlow.bind(this));
+      document.querySelector("#importFlowFile").addEventListener("change", this.#importFlowFileChanged.bind(this));
+      document.querySelector("#regexInput").addEventListener("keyup", this.#updateRegexInput.bind(this));
+      document.querySelector("#regexSample").addEventListener("keyup", this.#startRegexEvaluation.bind(this));
+      document.querySelector("#addRegexVariables").addEventListener("click", this.#addRegexVariablesRow.bind(this))
+      document.querySelector("#regexEditorToggleVars").addEventListener("click", this.#toggleRegexVariables.bind(this));
+      document.querySelector("#dismissRegexEditor").addEventListener("click", this.#dismissRegexEditor.bind(this));
       this.toggleBlocker(true, "loading your flow");
       window.addEventListener("resize", this.#windowResized.bind(drawingSurface));
       drawingSurface.addEventListener("update_start", this.#engineUpdate.bind(this));
@@ -315,7 +324,6 @@ window.Caixanegra.Designer = {
 
       this.gre.disable();
       this.getUnits();
-      this.loadFlow();
       this.gre.enable();
     }
 
@@ -385,6 +393,8 @@ window.Caixanegra.Designer = {
       }
 
       container.append(wrapper);
+
+      return wrapper;
     }
 
     deleteUnit() {
@@ -394,6 +404,12 @@ window.Caixanegra.Designer = {
       this.toggleDeleteConfirmation();
     }
 
+    duplicateUnit() {
+      this.unitDetailPane.classList.remove("-open");
+      this.unitDebugHitsPane.classList.remove("-open");
+      this.cloneUnit(this.selectedUnit.oid);
+    }
+
     flushToConsole(entries) {
       const container = document.querySelector("#executionConsole");
       container.innerHTML = "";
@@ -468,7 +484,8 @@ window.Caixanegra.Designer = {
     flowSnapshot() {
       const snapshot = {
         entrypoint: this.#units.find((unit) => {return unit.type === "starter"})?.oid,
-        units: []
+        units: [],
+        initialCarryover: this.digInitialCarryOver(document.querySelector("#carryOverObject"))
       };
 
       this.#units.forEach((unit) => {
@@ -587,33 +604,85 @@ window.Caixanegra.Designer = {
         });
 
         this.#loadedComponents.catalog = true;
-        this.#reveal();
+        this.loadFlow();
       });
     }
 
     loadFlow() {
       this.api.getFlow(this.flowId).then((response) => {
         const flowData = response;
-        this.gre.clear();
-        this.#units = [];
 
-        (flowData?.units || []).forEach((unit) => {
-          this.createUnit(unit);
-        });
-
-        this.#units.forEach((unit) => {
-          (unit?.exits || []).forEach((exit) => {
-            const object = this.#units.find((targetUnit) => targetUnit.oid === exit.target);
-            if (object) { exit.target = object; }
-          });
-        });
+        this.#loadFlowFromJSON(flowData);
 
         this.#loadedComponents.flow = true;
-        this.#reveal();
+        this.reveal();
+      });
+    }
+
+    #loadFlowFromJSON(flowData) {
+      this.gre.clear();
+      this.#units = [];
+
+      (flowData?.units || []).forEach((unit) => {
+        const catalogUnit = this.#catalog.find((cUnit) => cUnit.class === unit.class);
+        if (catalogUnit) {
+          unit.color = catalogUnit.color;
+        }
+        this.createUnit(unit);
+      });
+
+      this.#units.forEach((unit) => {
+        (unit?.exits || []).forEach((exit) => {
+          const object = this.#units.find((targetUnit) => targetUnit.oid === exit.target);
+          if (object) { exit.target = object; }
+        });
       });
+
+      this.buildInitialCarryover(flowData.initialCarryover);
     }
 
-    #reveal() {
+    digBuildInitialCarryover(container, key, objectPointer) {
+      const lastChild = container.childNodes[container.childNodes.length -1];
+
+      if (key !== null) {
+        container.childNodes[0].querySelector("input").value = key;
+      }
+
+      if (Array.isArray(objectPointer)) {
+        this.coeAssignType(lastChild, "array");
+
+        for (let idx = 0; idx < objectPointer.length; idx++) {
+          this.digBuildInitialCarryover(
+            this.coeAddRow(container.querySelector(".rows")),
+            null,
+            objectPointer[idx]
+          );
+        }
+      } else if (typeof objectPointer === "object") {
+        this.coeAssignType(lastChild, "object");
+
+        for (const key in objectPointer) {
+          this.digBuildInitialCarryover(this.coeAddRow(container.querySelector(".rows")), key, objectPointer[key]);
+        }
+      } else if (typeof objectPointer === "number") {
+        this.coeAssignType(lastChild, "number");
+        lastChild.querySelector("input").value = objectPointer;
+      } else {
+        this.coeAssignType(lastChild, "string");
+        lastChild.querySelector("input").value = objectPointer;
+      }
+    }
+
+    buildInitialCarryover(initialCarryover) {
+      this.clearCarryOverObject();
+      const base = document.querySelector("#carryOverObject > .rows");
+
+      for (const key in initialCarryover) {
+        this.digBuildInitialCarryover(this.coeAddRow(base), key, initialCarryover[key]);
+      }
+    }
+
+    reveal() {
       if (this.#loadedComponents.flow && this.#loadedComponents.catalog) {
         this.toggleBlocker(false);
       }
@@ -713,6 +782,21 @@ window.Caixanegra.Designer = {
       });
     }
 
+    cloneUnit(oid) {
+      const unit = this.#units.find((unit) => unit.oid === oid);
+      const dup = this.#dupObject(unit);
+      
+      dup.oid = Sabertooth.Utils.generateOId();
+      dup.position = { x: unit.position.x + 25, y: unit.position.y + 25 };
+      dup.title = `${dup.title} (copy)`;
+      
+      dup.exits.forEach(exit => {
+        delete exit.target;
+      });
+
+      this.createUnit(dup);
+    }
+
     showError(message) {
       this.actionMessage(true, message, "error");
       setTimeout(() => {this.actionMessage(false)}, 5000);
@@ -762,6 +846,73 @@ window.Caixanegra.Designer = {
       this.unitDebugHitsPane.classList.remove("-open");
     }
 
+    #dupObject(obj) {
+      if (typeof obj !== 'object' || obj === null) {
+        return obj;
+      }
+    
+      const clonedObject = Array.isArray(obj) ? [] : {};
+      
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          clonedObject[key] = this.#dupObject(obj[key]);
+        }
+      }
+    
+      return clonedObject;
+    }
+
+    #importFlow() {
+       document.querySelector("#importFlowFile").click();
+    }
+
+    #importFlowFileChanged() {
+      const fileInput = document.querySelector("#importFlowFile");
+
+      if (fileInput.files.length === 0) {
+        return;
+      }
+
+      const selectedFile = fileInput.files[0];
+      const reader = new FileReader();
+    
+      reader.onload = (event) => {
+        this.toggleBlocker(true, "importing your flow");
+        this.gre.disable();
+        const flowBackup = this.flowSnapshot();
+
+        try {
+          this.#loadFlowFromJSON(JSON.parse(event.target.result));
+
+          this.actionMessage(true, "Flow imported", "ok");
+          setTimeout(() => {this.actionMessage(false)}, 4000);
+        } catch (error) {
+          this.#loadFlowFromJSON(flowBackup);
+
+          this.actionMessage(true, "Failed to import flow. Rolled back", "error");
+          setTimeout(() => {this.actionMessage(false)}, 4000);
+        }
+        
+        this.gre.enable();
+        this.reveal();
+      };
+    
+      reader.readAsText(selectedFile);
+    }
+
+    #exportFlow() {
+      const blob = new Blob([JSON.stringify(this.flowSnapshot())], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = "flow_definition.cxn";
+      link.click();
+      URL.revokeObjectURL(url);
+
+      this.actionMessage(true, "Flow exported", "ok");
+      setTimeout(() => {this.actionMessage(false)}, 4000);
+    }
+
     #executeFlow() {
       this.toggleBlocker(true, "saving your flow");
 
@@ -1135,9 +1286,10 @@ window.Caixanegra.Designer = {
           case "regex":
             {
               valueInput = document.createElement("input");
-              if(matrix.type === "regex") { valueInput.classList.add("-monospace")}
+              if(matrix.type === "regex") { valueInput.classList.add("-regex")}
               valueInput.value = unit.mappings[input]?.value || matrix.default || "";
               valueInput.addEventListener("change", this.#unitInputValueChanged.bind(this));
+              valueInput.addEventListener("click", this.#regexEditor.bind(this));
             }
             break;
           case "dataset":
@@ -1237,6 +1389,125 @@ window.Caixanegra.Designer = {
       this.selectedUnit.mappings[input].value = ev.target.value;
     }
 
+    #toggleRegexVariables() {
+      const target = document.querySelector("#blocker .regexEditor > div:last-child");
+      if(target.classList.contains("-visible")) {
+        target.classList.remove("-visible");
+      } else {
+        target.classList.add("-visible");
+      }
+    }
+
+    #updateRegexInput() {
+      this.blocker.editorListener.value = this.blocker.querySelector("#regexInput").value;
+
+      this.#startRegexEvaluation();
+    }
+
+    #startRegexEvaluation() {
+      window.clearTimeout(this.blocker.evalTimeout);
+      this.blocker.querySelector("#regexResults").innerHTML = "wating input end...";
+      this.blocker.evalTimeout = window.setTimeout(this.#evaluateRegex.bind(this), 1500);
+    }
+
+    #evaluateRegex() {
+      this.blocker.querySelector("#regexResults").innerHTML = "evaluating...";
+      let expression = this.blocker.querySelector("#regexInput").value;
+      const sample = this.blocker.querySelector("#regexSample").value;
+      document.querySelectorAll("#regexVariablesList .regex-variable-entry").forEach((pair) => {
+        const placeholder = pair.querySelector("input.placeholder").value;
+        const value = pair.querySelector("input.value").value;
+        expression = expression.replace(new RegExp(placeholder, "g"), value);
+      });
+
+      this.api.evaluateRegex(expression, sample).then((response) => {
+        const tableEntries = Object.keys(response).length - 2 > 0;
+
+        this.blocker.querySelector("#regexResults").innerHTML = "";
+        const expression = document.createElement("div");
+        const full_match = document.createElement("div");
+        expression.innerHTML = `<strong>Expression: </strong><code>${response["_expression"] || "unable to get expression"}</code>`;
+        full_match.innerHTML = `<strong>Full Match: </strong><code>${response["_full"] || "unable to get full match"}</code>`;
+        
+        this.blocker.querySelector("#regexResults").append(expression, full_match);
+
+        if (tableEntries) {
+          const table = document.createElement("table");
+          let tr = document.createElement("tr");
+          let th = document.createElement("th");
+          th.innerHTML = "capture";
+          tr.append(th);
+          th = document.createElement("th");
+          th.innerHTML = "match";
+          tr.append(th);
+          table.append(tr);
+
+          for (const key of Object.keys(response)) {
+            if (key.startsWith("_")) { continue; }
+
+            tr = document.createElement("tr");
+            let td = document.createElement("td");
+            td.innerHTML = key;
+            tr.append(td);
+            td = document.createElement("td");
+            td.innerHTML = response[key];
+            tr.append(td);
+
+            table.append(tr);
+          }
+
+          this.blocker.querySelector("#regexResults").append(table);
+        }
+      }).catch((error) => {
+        this.blocker.querySelector("#regexResults").innerHTML = "unable to evaluate";
+      });
+    }
+
+    #regexEditor(ev) {
+      this.blocker.classList.add("-in-regex-editor");
+      this.blocker.classList.remove("-released");
+      this.blocker.editorListener = ev.target;
+      this.blocker.querySelector("#regexInput").value = ev.target.value;
+
+      this.#startRegexEvaluation();
+    }
+
+    #dismissRegexEditor() {
+      this.blocker.classList.remove("-in-regex-editor");
+      this.blocker.classList.add("-released");
+    }
+
+    #removeRegexVariable() {
+      this.parentElement.remove();
+    }
+
+    #addRegexVariablesRow() {
+      const list = document.querySelector("#regexVariablesList");
+
+      const wrapper = document.createElement("div");
+      const name = document.createElement("input");
+      const value = document.createElement("input");
+      const remove = document.createElement("button");
+
+      name.placeholder = "placeholder";
+      name.classList.add("placeholder");
+      value.classList.add("value");
+      name.autocomplete=false;
+      value.autocomplete=false;
+      value.placeholder = "value";
+      remove.innerHTML = "-";
+
+      remove.addEventListener("click", this.#removeRegexVariable.bind(remove));
+
+      name.addEventListener("keyup", this.#startRegexEvaluation.bind(this));
+      value.addEventListener("keyup", this.#startRegexEvaluation.bind(this));
+
+      wrapper.classList.add("regex-variable-entry");
+
+      wrapper.append(name, value, remove);
+      list.append(wrapper);
+    }
+
     #addUnitExitMapping(ev) {
       const unit = this.selectedUnit;
       const mapping = { use: "", as: "" };

data/app/assets/stylesheets/caixanegra/designer.scss

@@ -3,6 +3,10 @@ $accent-color: rgb(105, 105, 105);
 $accent-highlight-color: lighten($accent-color, 20%);
 $accent-contrast-color: darken($accent-color, 20%);
 
+#importFlowFile {
+  display: none;
+}
+
 #execution {
   position: fixed;
   display: flex;
@@ -37,6 +41,33 @@ $accent-contrast-color: darken($accent-color, 20%);
   }
 }
 
+#io {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  bottom: 8px;
+  right: 8px;
+
+  div {
+    cursor: pointer;
+    transition: all 250ms ease-in-out;
+    height: 18px;
+    width: 18px;
+    margin-left: 8px;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+
+    svg {
+      path, polygon, line, polyline {
+        fill: white;
+        stroke: white;
+      }
+    }
+  }
+}
+
 #addUnit {
   position: fixed;
   border-radius: 50%;
@@ -507,6 +538,7 @@ $accent-contrast-color: darken($accent-color, 20%);
     }
 
     input {
+      position: relative;
       width: 100%;
       box-sizing: border-box;
       background-color: $accent-highlight-color;
@@ -514,7 +546,7 @@ $accent-contrast-color: darken($accent-color, 20%);
       border: none;
       outline: none;
 
-      &.-monospace {
+      &.-regex {
         font-family: monospace;
       }
     }
@@ -649,10 +681,25 @@ $accent-contrast-color: darken($accent-color, 20%);
       flex-direction: row;
       justify-content: space-between;
 
-      .name {
-        font-size: 1em;
-        font-weight: bold;
+      .name-holder {
         width: 100%;
+        display: flex;
+        flex-direction: row;
+
+        .name {
+          font-size: 1em;
+          font-weight: bold;
+        }
+
+        #duplicate {
+          margin-left: 5px;
+          width: 10px;
+          cursor: pointer;
+
+          svg path {
+            fill: $accent-contrast-color;
+          }
+        }
       }
 
       .delete {
@@ -744,7 +791,7 @@ $accent-contrast-color: darken($accent-color, 20%);
   left:0;
   right:0;
   bottom:0;
-  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0, .5);
   transition: opacity 250ms ease-in-out;
   opacity: 1;
 
@@ -771,6 +818,155 @@ $accent-contrast-color: darken($accent-color, 20%);
     }
   }
 
+  .regexEditor {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    min-width: 70%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    & > div {
+      background-color: $accent-color;
+      box-shadow: $accent-shadow;
+      border-radius: 5px;
+      display: flex;
+      flex-direction: column;
+      padding: 12px;
+      position: relative;
+      font-size: 16px;
+
+      &:first-child {
+        margin-right: 15px;
+        width: 70%;
+        z-index: 10;
+        font-size: 0.8em;
+      }
+  
+      &:last-child {
+        font-size: 0.8em;
+        transform: translateX(-200%);
+        width: 0;
+        box-shadow: 0 0 0 rgba(0,0,0,0);
+        z-index: 9;
+        overflow: hidden;
+        transition: all 250ms ease-in-out;
+
+        &.-visible {
+          transform: translateX(0%);
+          width: 30%;
+        }
+      }
+    }
+
+    label {
+      margin-bottom: 4px;
+    }
+
+    input {
+      margin-bottom: 6px;
+      box-sizing: border-box;
+      background-color: #9c9c9c;
+      padding: 6px 4px;
+      border: none;
+      outline: none;
+    }
+
+    #regexInput {
+      font-family: monospace;
+      font-size: 1.1em;
+    }
+
+    #regexSample {
+      font-size: 0.8em;
+    }
+
+    #regexResults {
+      padding: 8px;
+      background-color:rgb(200, 200, 200);
+      color: black;
+      max-height: 50vh;
+      overflow: auto;
+      display: block;
+      margin-bottom: 30px;
+      font-size: 0.7em;
+
+      table {
+        margin-top: 15px;
+        width: 100%;
+        border-collapse: collapse;
+
+        th, td {
+          text-align: left;
+          border: 1px solid rgba(0,0,0,.3);
+          padding: 4px;
+        }
+
+        tr:nth-child(even) {
+          background-color: rgba(0,0,0,.15);
+        }
+      }
+    }
+
+    #regexVariables {
+      #regexVariablesList {
+        margin-bottom: 15px;
+      }
+
+      .regex-variable-entry {
+        display: flex;
+        flex-direction: row;
+        margin: 2px 0;
+        align-items: center;
+
+        input {
+          width: 100%;
+          margin-bottom: 0;
+
+          &:first-child {
+            margin-right: 5px;
+          }
+        }
+
+        button {
+          margin-left: 5px;
+        }
+      }
+    }
+
+    button {
+      background-color: $accent-highlight-color;
+      border: 1px solid $accent-color;
+      color: black;
+      padding: 3px 6px;
+      cursor: pointer;
+      transition: all 250ms ease-in-out;
+
+      &:hover {
+        background-color: $accent-contrast-color;
+        color: $accent-highlight-color;
+      }
+    }
+
+    #regexEditorToggleVars {
+      float: right;
+    }
+  }
+
+  &.-in-regex-editor {
+    .information {
+      display: none;
+    }
+
+    .regexEditor {
+      display: flex;
+    }
+  }
+
   &.-released {
     pointer-events: none;
     opacity: 0;

data/app/controllers/caixanegra/api/designer/inputs_controller.rb

@@ -0,0 +1,32 @@
+module Caixanegra
+  module API
+    module Designer
+      class InputsController < ::Caixanegra::APIController
+        def evaluate_regex
+          full_match = sample.match(Regexp.new(expression, Regexp::IGNORECASE))
+          direct = { "_full": full_match.to_s, "_expression": expression }
+          captures = {}
+
+          (full_match&.captures || []).each_with_index do |capture, index|
+            captures["c#{index}"] = capture
+          end
+          named_captures = full_match&.named_captures || {}
+
+          render json: direct.merge(captures).merge(named_captures).symbolize_keys
+        rescue RegexpError
+          head 422
+        end
+
+        private
+
+        def expression
+          @expression ||= params[:expression]
+        end
+
+        def sample
+          @sample ||= params[:sample]
+        end
+      end
+    end
+  end
+end

data/app/views/caixanegra/designer/index.html.erb

@@ -25,11 +25,28 @@
     </svg>
   </div>
   <div id="console">
-    <svg version="1.1" id="XMLID_75_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
       <path d="M24,24H0V0h24V24z M2,22h20V2H6v2h16v2H2V22z M2,4h2V2H2V4z M16,16h-6v-2h6V16z M5.7,15.7l-1.4-1.4L6.6,12L4.3,9.7 l1.4-1.4L9.4,12L5.7,15.7z"/>
     </svg>
   </div>
 </div>
+<div id="io">
+  <input type="file" id="importFlowFile" accept=".cxn">
+  <div id="importFlow">
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
+      <polyline id="primary" points="13 9 13 13 9 13" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline>
+      <line id="primary-2" data-name="primary" x1="3" y1="3" x2="13" y2="13" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+      <path id="primary-3" data-name="primary" d="M13.89,5H20a1,1,0,0,1,1,1V20a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V13.89" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+    </svg>
+  </div>
+  <div id="exportFlow">
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
+      <polyline id="primary" points="17 3 21 3 21 7" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline>
+      <line id="primary-2" data-name="primary" x1="11" y1="13" x2="21" y2="3" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+      <path id="primary-3" data-name="primary" d="M19,13.89V20a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V6A1,1,0,0,1,4,5h6.11" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+    </svg>
+  </div>
+</div>
 <div id="addUnit"><span>+</span></div>
 <div id="save"><span>save</span></div>
 <div id="unitMenu"></div>
@@ -51,7 +68,14 @@
   <div class="color-code"></div>
   <div class="content">
     <div id="unitDetailClass" class="unit-detail-headers">
-      <div class="name"></div>
+      <div class="name-holder">
+        <div class="name"></div>
+        <span id="duplicate">
+          <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6 6V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-4v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h4zm2 0h4a2 2 0 0 1 2 2v4h4V2H8v4zM2 8v10h10V8H2zm4 4v-2h2v2h2v2H8v2H6v-2H4v-2h2z"/>
+          </svg>
+        </span>
+      </div>
       <div class="delete">
         <div id="toggler">
           <svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
@@ -84,6 +108,27 @@
     <div>caixa<span>negra</span></div>
     <div class="message">loading your flow</div>
   </div>
+  <div class="regexEditor">
+    <div>
+      <label for="regexInput">Regular Expression</label>
+      <input id="regexInput" type="text" />
+      <label for="regexSample" placeholder="type sample text here">Sample</label>
+      <input id="regexSample" type="text" /> 
+      <label for="regexResults">Result</label>  
+      <div id="regexResults"></div>
+      <div>
+        <button id="dismissRegexEditor">dismiss</button>
+        <button id="regexEditorToggleVars">vars</button>
+      </div>
+    </div>
+    <div>
+      <label for="regexVariables">Variables</label>
+      <div id="regexVariables">
+        <div id="regexVariablesList"></div>
+        <button id="addRegexVariables">add</button>
+      </div>
+    </div>
+  </div>
 </div>
 <div id="action_messenger">
   <div class="icon icon-error">

data/app/views/layouts/caixanegra/application.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Caixanegra</title>
+  <title>caixanegra flow designer</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>

data/config/routes.rb

@@ -9,6 +9,9 @@ Caixanegra::Engine.routes.draw do
           patch :debug_run
         end
       end
+      namespace :inputs do
+        get :evaluate_regex
+      end
     end
   end
 end

data/lib/caixanegra/manager.rb

@@ -3,7 +3,7 @@
 module Caixanegra
   class Manager
     class << self
-      def handler(flow_definition = {})
+      def handler(flow_definition: {})
         transient_store = Caixanegra.transient_store
         uid = transient_store.new_uid
 

data/lib/caixanegra/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Caixanegra
-  VERSION = '0.3.4'
+  VERSION = '0.4.1'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: caixanegra
 version: !ruby/object:Gem::Version
-  version: 0.3.4
+  version: 0.4.1
 platform: ruby
 authors:
 - sergiorribeiro
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-20 00:00:00.000000000 Z
+date: 2023-10-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -57,6 +57,7 @@ files:
 - app/assets/stylesheets/caixanegra/application.css
 - app/assets/stylesheets/caixanegra/designer.scss
 - app/controllers/caixanegra/api/designer/flows_controller.rb
+- app/controllers/caixanegra/api/designer/inputs_controller.rb
 - app/controllers/caixanegra/api/designer/units_controller.rb
 - app/controllers/caixanegra/api_controller.rb
 - app/controllers/caixanegra/application_controller.rb