@dmitryvim/form-builder 0.1.35 → 0.1.37

package/dist/demo.js

@@ -113,7 +113,7 @@ const EXAMPLE_SCHEMA = {
       maxCount: 5,
       minLength: 2,
       maxLength: 20,
-      default: "popular"
+      default: "popular",
     },
     {
       type: "textarea",
@@ -127,13 +127,14 @@ const EXAMPLE_SCHEMA = {
       maxCount: 4,
       minLength: 10,
       maxLength: 200,
-      rows: 3
+      rows: 3,
     },
     {
       type: "number",
       key: "dimensions",
       label: "Размеры (см)",
-      description: "Укажите размеры товара в сантиметрах: длина, ширина, высота",
+      description:
+        "Укажите размеры товара в сантиметрах: длина, ширина, высота",
       placeholder: "0",
       required: false,
       multiple: true,
@@ -142,7 +143,7 @@ const EXAMPLE_SCHEMA = {
       min: 0,
       max: 500,
       step: 0.1,
-      decimals: 1
+      decimals: 1,
     },
     {
       type: "select",
@@ -159,9 +160,9 @@ const EXAMPLE_SCHEMA = {
         { value: "red", label: "Красный" },
         { value: "blue", label: "Синий" },
         { value: "green", label: "Зеленый" },
-        { value: "gray", label: "Серый" }
+        { value: "gray", label: "Серый" },
       ],
-      default: "white"
+      default: "white",
     },
     {
       type: "file",
@@ -214,7 +215,7 @@ const EXAMPLE_SCHEMA = {
       label: "Session ID",
       description: "Hidden session identifier for tracking purposes",
       hidden: true,
-      default: "session_" + Math.random().toString(36).substr(2, 9),
+      default: `session_${Math.random().toString(36).substr(2, 9)}`,
     },
   ],
 };
@@ -328,10 +329,10 @@ let actionLabelMap = new Map();
 // Build action value -> label mapping from schema for efficient lookup
 function buildActionLabelMap(schema) {
   const map = new Map();
-  
+
   function processElements(elements) {
     if (!Array.isArray(elements)) return;
-    
+
     for (const element of elements) {
       if (element.actions && Array.isArray(element.actions)) {
         for (const action of element.actions) {
@@ -340,18 +341,18 @@ function buildActionLabelMap(schema) {
           }
         }
       }
-      
+
       // Process nested group elements
       if (element.elements && Array.isArray(element.elements)) {
         processElements(element.elements);
       }
     }
   }
-  
+
   if (schema && schema.elements) {
     processElements(schema.elements);
   }
-  
+
   return map;
 }
 
@@ -372,6 +373,10 @@ const el = {
   copyDataBtn: document.getElementById("copyDataBtn"),
   downloadDataBtn: document.getElementById("downloadDataBtn"),
   dataErrors: document.getElementById("dataErrors"),
+  actionsTextarea: document.getElementById("actionsTextarea"),
+  formatActionsBtn: document.getElementById("formatActionsBtn"),
+  clearActionsBtn: document.getElementById("clearActionsBtn"),
+  actionsErrors: document.getElementById("actionsErrors"),
 };
 
 // Utility functions
@@ -405,6 +410,44 @@ function downloadFile(filename, content) {
   URL.revokeObjectURL(url);
 }
 
+// Parse and validate external actions
+function parseActions(actionsText) {
+  if (!actionsText || actionsText.trim() === "") {
+    return [];
+  }
+
+  try {
+    const actions = JSON.parse(actionsText);
+
+    if (!Array.isArray(actions)) {
+      throw new Error("Actions must be an array");
+    }
+
+    // Validate each action
+    for (let i = 0; i < actions.length; i++) {
+      const action = actions[i];
+      if (!action || typeof action !== "object") {
+        throw new Error(`Action at index ${i} must be an object`);
+      }
+      if (!action.related_field || typeof action.related_field !== "string") {
+        throw new Error(
+          `Action at index ${i} missing valid 'related_field' property`,
+        );
+      }
+      if (!action.value || typeof action.value !== "string") {
+        throw new Error(`Action at index ${i} missing valid 'value' property`);
+      }
+      if (!action.label || typeof action.label !== "string") {
+        throw new Error(`Action at index ${i} missing valid 'label' property`);
+      }
+    }
+
+    return actions;
+  } catch (error) {
+    throw new Error(`Actions JSON error: ${error.message}`);
+  }
+}
+
 // Configure FormBuilder with in-memory handlers
 function setupFormBuilder() {
   // Set form container
@@ -437,17 +480,44 @@ function setupFormBuilder() {
   });
 
   // Action handler - display message when action button is clicked
-  FormBuilder.setActionHandler((value) => {
-    // Use cached action map for O(1) lookup instead of re-parsing schema
-    const actionLabel = actionLabelMap.get(value) || value; // fallback to value
+  // Updated to support both old system (1 param) and new system (2 params)
+  FormBuilder.setActionHandler((relatedFieldOrValue, value) => {
+    let actionLabel, actionValue, relatedField;
+
+    // Determine if this is the old system (1 param) or new system (2 params)
+    if (arguments.length === 1) {
+      // Old system: only value parameter
+      actionValue = relatedFieldOrValue;
+      actionLabel = actionLabelMap.get(actionValue) || actionValue;
+      relatedField = null;
+    } else {
+      // New system: related_field and value parameters
+      relatedField = relatedFieldOrValue;
+      actionValue = value;
+      actionLabel = `Action for ${relatedField}`;
+    }
+
+    console.log("Action clicked:", {
+      label: actionLabel,
+      value: actionValue,
+      relatedField,
+      system: arguments.length === 1 ? "schema-based" : "external",
+    });
 
-    console.log("Action clicked:", { label: actionLabel, value });
-    
     // Show message to user (compatible with all environments)
     if (typeof window !== "undefined" && window.alert) {
-      window.alert(`${actionLabel} clicked: ${value}`);
+      if (relatedField) {
+        window.alert(
+          `External Action: "${actionLabel}" clicked for field "${relatedField}" with value: ${actionValue}`,
+        );
+      } else {
+        window.alert(`Schema Action: "${actionLabel}" clicked: ${actionValue}`);
+      }
     } else {
-      console.log(`Demo action: ${actionLabel} clicked: ${value}`);
+      console.log(
+        `Demo action: ${actionLabel} clicked: ${actionValue}`,
+        relatedField ? ` for field: ${relatedField}` : "",
+      );
     }
   });
 
@@ -460,6 +530,7 @@ function setupFormBuilder() {
 function applyCurrentSchema() {
   clearError(el.schemaErrors);
   clearError(el.formErrors);
+  clearError(el.actionsErrors);
 
   try {
     const schema = JSON.parse(el.schemaInput.value);
@@ -473,6 +544,15 @@ function applyCurrentSchema() {
       return false;
     }
 
+    // Parse external actions
+    let externalActions = [];
+    try {
+      externalActions = parseActions(el.actionsTextarea.value);
+    } catch (error) {
+      showError(el.actionsErrors, error.message);
+      return false;
+    }
+
     // Build action value -> label map for efficient lookup
     actionLabelMap = buildActionLabelMap(schema);
 
@@ -491,10 +571,12 @@ function applyCurrentSchema() {
       // Ignore errors when getting current data
     }
 
-    // Render form with current data
-    FormBuilder.renderForm(schema, currentData);
+    // Render form with current data and external actions
+    FormBuilder.renderForm(schema, currentData, externalActions);
 
     console.log(`Form rendered in ${isReadOnly ? "readonly" : "edit"} mode`);
+    console.log(`External actions:`, externalActions);
+
     return true;
   } catch (e) {
     showError(el.schemaErrors, `JSON parse error: ${e.message}`);
@@ -512,7 +594,9 @@ el.resetSchemaBtn.addEventListener("click", () => {
   clearError(el.schemaErrors);
   clearError(el.formErrors);
   clearError(el.dataErrors);
+  clearError(el.actionsErrors);
   el.dataTextarea.value = "";
+  el.actionsTextarea.value = "";
 
   // Clear file storage
   fileStorage.clear();
@@ -617,6 +701,15 @@ el.prefillBtn.addEventListener("click", () => {
     const prefillData = JSON.parse(el.dataTextarea.value || "{}");
     const currentSchema = JSON.parse(el.schemaInput.value);
 
+    // Parse external actions
+    let externalActions = [];
+    try {
+      externalActions = parseActions(el.actionsTextarea.value);
+    } catch (error) {
+      showError(el.actionsErrors, error.message);
+      return;
+    }
+
     // Convert enhanced data back to raw format for prefilling
     const processedData = JSON.parse(JSON.stringify(prefillData));
 
@@ -657,9 +750,10 @@ el.prefillBtn.addEventListener("click", () => {
     const isReadOnly = el.readOnlyToggle.checked;
     FormBuilder.setMode(isReadOnly ? "readonly" : "edit");
 
-    FormBuilder.renderForm(currentSchema, processedData);
+    FormBuilder.renderForm(currentSchema, processedData, externalActions);
     console.log("Form prefilled with data");
     console.log("Processed prefill data:", processedData);
+    console.log("External actions:", externalActions);
   } catch (e) {
     showError(el.dataErrors, `JSON parse error: ${e.message}`);
     console.error("Prefill error:", e);
@@ -684,6 +778,51 @@ el.downloadDataBtn.addEventListener("click", () => {
   console.log("Data downloaded");
 });
 
+// Actions management handlers
+el.formatActionsBtn.addEventListener("click", () => {
+  try {
+    const actions = parseActions(el.actionsTextarea.value);
+    el.actionsTextarea.value = pretty(actions);
+    clearError(el.actionsErrors);
+    console.log("Actions formatted");
+  } catch (e) {
+    showError(el.actionsErrors, e.message);
+    console.error("Format actions error:", e);
+  }
+});
+
+el.clearActionsBtn.addEventListener("click", () => {
+  el.actionsTextarea.value = "";
+  clearError(el.actionsErrors);
+  // Re-apply schema to remove external actions from the form
+  applyCurrentSchema();
+  console.log("Actions cleared");
+});
+
+// Example external actions for demonstration
+const EXAMPLE_ACTIONS = [
+  {
+    related_field: "title[0]",
+    value: "generate-title",
+    label: "🤖 Generate Title",
+  },
+  {
+    related_field: "description",
+    value: "improve-description",
+    label: "✨ Improve Description",
+  },
+  {
+    related_field: "slides[0].title",
+    value: "optimize-slide-title",
+    label: "🎯 Optimize Slide Title",
+  },
+  {
+    related_field: "cover",
+    value: "analyze-image",
+    label: "🔍 Analyze Image",
+  },
+];
+
 // Initialize demo application
 function initDemo() {
   // Set up FormBuilder
@@ -692,6 +831,9 @@ function initDemo() {
   // Initialize with example schema
   el.schemaInput.value = pretty(EXAMPLE_SCHEMA);
 
+  // Initialize with example actions
+  el.actionsTextarea.value = pretty(EXAMPLE_ACTIONS);
+
   // Apply initial schema
   applyCurrentSchema();