@dmitryvim/form-builder 0.1.28 → 0.1.31

package/README.md

@@ -2,7 +2,7 @@
 
 JSON Schema → Dynamic Forms → Structured Output
 
-A reusable, zero-dependency form generation library that converts JSON schemas into dynamic, interactive forms with real-time validation and file upload support.
+A comprehensive, zero-dependency form generation library that converts JSON Schema v0.3 into dynamic, interactive HTML forms with advanced file handling, real-time validation, internationalization, and extensive field type support.
 
 ## Live Demo
 
@@ -37,15 +37,21 @@ npm install @dmitryvim/form-builder
 
 ## Core Features
 
-- **Schema-driven forms**: JSON Schema v0.3 → Interactive forms
-- **File uploads**: Built-in support with configurable handlers
-- **Real-time validation**: Client-side validation with error display
-- **Framework agnostic**: Works with any web stack
-- **Zero dependencies**: Self-contained HTML/CSS/JavaScript
-- **Read-only mode**: Display form data without editing
-- **Draft saving**: Save incomplete forms without validation
+- **🎯 Schema-driven forms**: JSON Schema v0.3 → Interactive forms with live preview
+- **📁 Advanced file handling**: Images, videos, documents with drag-and-drop and grid preview
+- **✅ Real-time validation**: Client-side validation with visual feedback and error display
+- **🌍 Internationalization**: Built-in English/Russian support with extensible translation system
+- **🎨 Rich field types**: Text, textarea, number, select, file, files, and nested groups
+- **👁️ Read-only mode**: Display form data without editing capabilities
+- **🔘 Action buttons**: Configurable buttons in readonly mode for custom interactions
+- **💾 Draft saving**: Save incomplete forms without validation
+- **🔧 Framework agnostic**: Works with any web stack (React, Vue, Angular, vanilla JS)
+- **📦 Zero dependencies**: Self-contained HTML/CSS/JavaScript
+- **📱 Responsive design**: Mobile-friendly with Tailwind CSS styling
 
-## Basic Example
+## Quick Examples
+
+### Simple Contact Form
 
 ```json
 {
@@ -56,36 +62,186 @@ npm install @dmitryvim/form-builder
       "type": "text",
       "key": "name",
       "label": "Full Name",
-      "required": true
+      "required": true,
+      "minLength": 2,
+      "maxLength": 50
+    },
+    {
+      "type": "textarea",
+      "key": "message",
+      "label": "Message",
+      "placeholder": "Your message here...",
+      "required": true,
+      "rows": 4
     },
     {
       "type": "files",
       "key": "attachments",
       "label": "Attachments",
+      "description": "Upload supporting documents or images",
       "maxCount": 3,
+      "maxSizeMB": 10,
       "accept": {
-        "extensions": ["pdf", "jpg", "png"]
+        "extensions": ["pdf", "jpg", "png", "docx"]
       }
     }
   ]
 }
 ```
 
-## Integration Options
+### Advanced Product Form with Actions
 
-- **CDN**: Direct iframe embedding
-- **NPM**: Import as module
-- **Direct**: Self-hosted deployment
+```json
+{
+  "version": "0.3",
+  "title": "Product Registration",
+  "elements": [
+    {
+      "type": "file",
+      "key": "mainImage",
+      "label": "Product Image",
+      "required": true,
+      "accept": {
+        "extensions": ["jpg", "png", "webp"]
+      },
+      "actions": [
+        { "value": "enhance", "label": "Enhance Quality" },
+        { "value": "crop", "label": "Auto Crop" },
+        { "value": "retry", "label": "Try Again" }
+      ]
+    },
+    {
+      "type": "group",
+      "key": "specifications",
+      "label": "Product Specifications",
+      "repeat": { "min": 1, "max": 10 },
+      "elements": [
+        {
+          "type": "text",
+          "key": "name",
+          "label": "Specification Name",
+          "required": true
+        },
+        {
+          "type": "text",
+          "key": "value",
+          "label": "Value",
+          "required": true
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Integration Methods
+
+### 1. NPM Package (Recommended)
+
+```bash
+npm install @dmitryvim/form-builder
+```
+
+```javascript
+// ES6 imports
+import FormBuilder from "@dmitryvim/form-builder";
+
+// Configure and use
+FormBuilder.setFormRoot(document.getElementById("form-container"));
+FormBuilder.setUploadHandler(async (file) => {
+  // Your upload logic - return resource ID
+  return "resource-123";
+});
+FormBuilder.setActionHandler((value) => {
+  // Handle action button clicks
+  console.log("Action clicked:", value);
+});
+FormBuilder.renderForm(schema, prefillData);
+```
+
+### 2. CDN Integration
 
-See [Integration Guide](docs/integration.md) for complete setup instructions.
+```html
+<!-- Direct script include (npm CDN) -->
+<script src="https://cdn.jsdelivr.net/npm/@dmitryvim/form-builder@latest/dist/form-builder.js"></script>
+<script>
+  window.FormBuilder.renderForm(schema);
+</script>
+
+<!-- Or use our S3 CDN -->
+<script src="https://picaz-form-builder.website.yandexcloud.net/form-builder/latest/form-builder.js"></script>
+
+<!-- Embed complete demo -->
+<iframe
+  src="https://picaz-form-builder.website.yandexcloud.net/form-builder/latest/index.html"
+  width="100%"
+  height="600px"
+  frameborder="0"
+>
+</iframe>
+```
+
+### 3. Self-Hosted Deployment
+
+Download and serve the `dist/` folder contents.
+
+See [Integration Guide](docs/integration.md) for detailed setup instructions.
+
+## Complete Feature Set
+
+### Field Types
+
+- **Text**: Single-line with pattern validation, length limits
+- **Textarea**: Multi-line with configurable rows
+- **Number**: Numeric input with min/max/step/decimals
+- **Select**: Dropdown with options and default values
+- **File**: Single file upload with preview and type restrictions
+- **Files**: Multiple file upload with grid layout and drag-and-drop
+- **Group**: Nested objects with repeatable array support
+
+### File Handling
+
+- **Supported formats**: Images (jpg, png, gif, webp), Videos (mp4, webm, mov), Documents (pdf, docx, etc.)
+- **Preview system**: Thumbnails for images, video players, document icons
+- **Drag-and-drop**: Visual feedback and multi-file support
+- **Validation**: File size, type, and count restrictions
+- **Resource management**: Metadata tracking and automatic cleanup
+
+### Validation & UX
+
+- **Real-time validation**: As-you-type with visual feedback
+- **Schema validation**: Comprehensive error reporting
+- **Internationalization**: English/Russian built-in, extensible
+- **Tooltips**: Field descriptions and hints
+- **Responsive design**: Mobile-friendly interface
+- **Read-only mode**: Display data without editing
+- **Action buttons**: Custom buttons in readonly mode with configurable handlers
 
 ## Documentation
 
-- [Integration Guide](docs/integration.md) - How to use and integrate
-- [Schema Reference](docs/schema.md) - Complete schema documentation
-- [Requirements](docs/requirements.md) - Product and business requirements
-- [Development Guide](development.md) - Development and testing
+- [Integration Guide](docs/integration.md) - Complete setup and usage
+- [Schema Reference](docs/schema.md) - Field types and validation rules
+- [API Documentation](docs/api.md) - Method reference and examples
+- [Development Guide](CLAUDE.md) - Architecture and development workflow
+
+## Live Demo
+
+**Try it now**: [https://picaz-form-builder.website.yandexcloud.net/form-builder/latest/index.html](https://picaz-form-builder.website.yandexcloud.net/form-builder/latest/index.html)
+
+**Version Index**: [https://picaz-form-builder.website.yandexcloud.net/index.html](https://picaz-form-builder.website.yandexcloud.net/index.html)
+
+Features a 3-column interface:
+
+- **Schema Editor**: Edit JSON schema with validation
+- **Live Preview**: See form render in real-time
+- **Data Output**: View/export form data as JSON
+
+## Support & Contributing
 
-## License
+- **GitHub**: [picazru/form-builder](https://github.com/picazru/form-builder)
+- **NPM Package**: [@dmitryvim/form-builder](https://www.npmjs.com/package/@dmitryvim/form-builder)
+- **CDN**: [picaz-form-builder.website.yandexcloud.net](https://picaz-form-builder.website.yandexcloud.net/)
+- **Version**: 0.1.28
+- **License**: MIT - see [LICENSE](LICENSE) file
 
-MIT - see [LICENSE](LICENSE) file.
+Built with ❤️ for the web development community.

package/dist/demo.js

@@ -18,6 +18,11 @@ const EXAMPLE_SCHEMA = {
         mime: ["image/png", "image/jpeg", "image/gif"],
       },
       maxSizeMB: 10,
+      actions: [
+        { value: "cover1.retry", label: "А давай ещё разок" },
+        { value: "cover1.enhance", label: "Улучшить качество" },
+        { value: "cover1.crop", label: "Обрезать изображение" },
+      ],
     },
     {
       type: "files",
@@ -241,6 +246,39 @@ 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 = {
   schemaInput: document.getElementById("schemaInput"),
@@ -322,7 +360,24 @@ function setupFormBuilder() {
     return thumbnailUrl;
   });
 
-  console.log("FormBuilder configured with in-memory file handlers");
+  // 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
+
+    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}`);
+    } else {
+      console.log(`Demo action: ${actionLabel} clicked: ${value}`);
+    }
+  });
+
+  console.log(
+    "FormBuilder configured with in-memory file handlers and action handler",
+  );
 }
 
 // Schema management functions
@@ -342,6 +397,9 @@ function applyCurrentSchema() {
       return false;
     }
 
+    // Build action value -> label map for efficient lookup
+    actionLabelMap = buildActionLabelMap(schema);
+
     // Set mode based on toggle
     const isReadOnly = el.readOnlyToggle.checked;
     FormBuilder.setMode(isReadOnly ? "readonly" : "edit");

package/dist/form-builder.js

@@ -11,6 +11,8 @@ const state = {
     downloadFile: null,
     getThumbnail: null,
     getDownloadUrl: null,
+    // Action handler
+    actionHandler: null,
     // Default implementations
     enableFilePreview: true,
     maxPreviewSize: "200px",
@@ -242,6 +244,43 @@ function renderElement(element, ctx) {
     }
   }
 
+  // Add action buttons in readonly mode
+  if (
+    state.config.readonly &&
+    element.actions &&
+    Array.isArray(element.actions) &&
+    element.actions.length > 0
+  ) {
+    const actionsContainer = document.createElement("div");
+    actionsContainer.className = "mt-3 flex flex-wrap gap-2";
+
+    element.actions.forEach((action) => {
+      if (action.value && action.label) {
+        const actionBtn = document.createElement("button");
+        actionBtn.type = "button";
+        actionBtn.className =
+          "px-3 py-1.5 text-sm bg-blue-50 border border-blue-200 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors";
+        actionBtn.textContent = action.label;
+
+        actionBtn.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (
+            state.config.actionHandler &&
+            typeof state.config.actionHandler === "function"
+          ) {
+            state.config.actionHandler(action.value);
+          }
+        });
+
+        actionsContainer.appendChild(actionBtn);
+      }
+    });
+
+    wrapper.appendChild(actionsContainer);
+  }
+
   return wrapper;
 }
 
@@ -1817,6 +1856,10 @@ function setThumbnailHandler(thumbnailFn) {
   state.config.getThumbnail = thumbnailFn;
 }
 
+function setActionHandler(actionFn) {
+  state.config.actionHandler = actionFn;
+}
+
 function setMode(mode) {
   state.config.readonly = mode === "readonly";
 }
@@ -1879,6 +1922,7 @@ const formBuilderAPI = {
   setUploadHandler,
   setDownloadHandler,
   setThumbnailHandler,
+  setActionHandler,
   setMode,
   setLocale,
   getFormData,
@@ -1903,6 +1947,7 @@ export {
   setUploadHandler,
   setDownloadHandler,
   setThumbnailHandler,
+  setActionHandler,
   setMode,
   setLocale,
   getFormData,

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.28",
+  "version": "0.1.31",
   "description": "A reusable JSON schema form builder library",
   "main": "dist/form-builder.js",
   "module": "dist/form-builder.js",