@dmitryvim/form-builder 0.1.35 → 0.1.38

package/README.md

@@ -105,9 +105,9 @@ npm install @dmitryvim/form-builder
         "extensions": ["jpg", "png", "webp"]
       },
       "actions": [
-        { "value": "enhance", "label": "Enhance Quality" },
-        { "value": "crop", "label": "Auto Crop" },
-        { "value": "retry", "label": "Try Again" }
+        { "key": "enhance", "label": "Enhance Quality" },
+        { "key": "crop", "label": "Auto Crop" },
+        { "key": "retry", "label": "Try Again" }
       ]
     },
     {
@@ -152,9 +152,14 @@ FormBuilder.setUploadHandler(async (file) => {
   // Your upload logic - return resource ID
   return "resource-123";
 });
-FormBuilder.setActionHandler((value) => {
+FormBuilder.setActionHandler((value, key, relatedField) => {
   // Handle action button clicks
-  console.log("Action clicked:", value);
+  console.log("Action clicked:", { value, key, relatedField });
+  if (relatedField) {
+    // Field-level action
+  } else {
+    // Form-level action
+  }
 });
 FormBuilder.renderForm(schema, prefillData);
 ```

package/dist/demo.js

@@ -19,9 +19,9 @@ const EXAMPLE_SCHEMA = {
       },
       maxSizeMB: 10,
       actions: [
-        { value: "cover1.retry", label: "А давай ещё разок" },
-        { value: "cover1.enhance", label: "Улучшить качество" },
-        { value: "cover1.crop", label: "Обрезать изображение" },
+        { key: "retry", label: "А давай ещё разок" },
+        { key: "enhance", label: "Улучшить качество" },
+        { key: "crop", label: "Обрезать изображение" },
       ],
     },
     {
@@ -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)}`,
     },
   ],
 };
@@ -322,38 +323,6 @@ class InMemoryFileStorage {
 // Initialize file storage
 const fileStorage = new InMemoryFileStorage();
 
-// Cache for action value -> label mapping for efficient lookup
-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) {
-          if (action.value && action.label) {
-            map.set(action.value, action.label);
-          }
-        }
-      }
-      
-      // Process nested group elements
-      if (element.elements && Array.isArray(element.elements)) {
-        processElements(element.elements);
-      }
-    }
-  }
-  
-  if (schema && schema.elements) {
-    processElements(schema.elements);
-  }
-  
-  return map;
-}
 
 // DOM element references
 const el = {
@@ -372,6 +341,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 +378,49 @@ 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.key || typeof action.key !== "string") {
+        throw new Error(
+          `Action at index ${i} missing valid 'key' property`,
+        );
+      }
+      if (!action.value || typeof action.value !== "string") {
+        throw new Error(`Action at index ${i} missing valid 'value' property`);
+      }
+      // related_field is optional - if not provided, action is form-level
+      if (action.related_field && typeof action.related_field !== "string") {
+        throw new Error(`Action at index ${i} has invalid 'related_field' property type`);
+      }
+      // Label is optional - will be resolved from schema or key
+      if (action.label && typeof action.label !== "string") {
+        throw new Error(`Action at index ${i} has invalid 'label' property type`);
+      }
+    }
+
+    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 +453,29 @@ 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
+  // New system: value, key, related_field parameters
+  FormBuilder.setActionHandler((value, key, relatedField) => {
+    console.log("Action clicked:", {
+      value,
+      key,
+      relatedField,
+      type: relatedField ? "field-level" : "form-level",
+    });
 
-    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(
+          `Field Action: "${key}" clicked for field "${relatedField}" with value: ${value}`,
+        );
+      } else {
+        window.alert(`Form Action: "${key}" clicked with value: ${value}`);
+      }
     } else {
-      console.log(`Demo action: ${actionLabel} clicked: ${value}`);
+      console.log(
+        `Demo action: ${key} clicked with value: ${value}`,
+        relatedField ? ` for field: ${relatedField}` : " (form-level)",
+      );
     }
   });
 
@@ -460,6 +488,7 @@ function setupFormBuilder() {
 function applyCurrentSchema() {
   clearError(el.schemaErrors);
   clearError(el.formErrors);
+  clearError(el.actionsErrors);
 
   try {
     const schema = JSON.parse(el.schemaInput.value);
@@ -473,8 +502,15 @@ function applyCurrentSchema() {
       return false;
     }
 
-    // Build action value -> label map for efficient lookup
-    actionLabelMap = buildActionLabelMap(schema);
+    // Parse external actions
+    let externalActions = [];
+    try {
+      externalActions = parseActions(el.actionsTextarea.value);
+    } catch (error) {
+      showError(el.actionsErrors, error.message);
+      return false;
+    }
+
 
     // Set mode based on toggle
     const isReadOnly = el.readOnlyToggle.checked;
@@ -491,10 +527,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 +550,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 +657,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 +706,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 +734,81 @@ 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 = [
+  // Field-level actions using predefined labels from schema
+  {
+    related_field: "cover",
+    key: "retry",
+    value: "regenerate_cover_image", // Specific action value for handler
+  },
+  {
+    related_field: "cover",
+    key: "enhance",
+    value: "enhance_cover_quality", // Specific action value for handler
+  },
+  {
+    related_field: "cover",
+    key: "crop",
+    value: "auto_crop_cover", // Specific action value for handler
+  },
+  // Field-level actions with custom labels
+  {
+    related_field: "title[0]",
+    key: "generate",
+    value: "ai_generate_title",
+    label: "🤖 Generate Title", // Custom label overrides schema
+  },
+  {
+    related_field: "description",
+    key: "improve",
+    value: "ai_improve_description", // Key will be used as fallback label
+  },
+  {
+    related_field: "slides[0].title",
+    key: "optimize",
+    value: "ai_optimize_slide_title",
+    label: "🎯 Optimize Slide Title", // Custom label
+  },
+  // Form-level actions (no related_field)
+  {
+    key: "save-draft",
+    value: "save_form_draft",
+    label: "💾 Save Draft",
+  },
+  {
+    key: "preview",
+    value: "preview_infographic",
+    label: "👁️ Preview",
+  },
+  {
+    key: "export",
+    value: "export_json_data",
+    label: "📄 Export JSON",
+  },
+];
+
 // Initialize demo application
 function initDemo() {
   // Set up FormBuilder
@@ -692,6 +817,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();