@dmitryvim/form-builder 0.1.9 → 0.1.12

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.9",
+  "version": "0.1.12",
   "description": "A reusable JSON schema form builder library",
   "main": "dist/form-builder.js",
   "files": [
@@ -11,10 +11,8 @@
     "docs"
   ],
   "scripts": {
-    "build": "mkdir -p dist && cp public/index.html dist/sample.html",
-    "build:lib": "echo 'Library already built at dist/form-builder.js'",
-    "dev": "serve public",
-    "dev:sample": "serve dist --single",
+    "build": "mkdir -p dist && cp public/index.html dist/index.html && cp src/form-builder.js dist/form-builder.js && cp public/demo.js dist/demo.js && cp -r public/images dist/",
+    "dev": "npm run build && serve dist --single",
     "test": "jest",
     "format": "prettier --write ."
   },

package/dist/README.md

@@ -1,284 +0,0 @@
-# Form Builder Library
-
-A reusable JavaScript library for generating dynamic forms from JSON schemas.
-
-## Quick Start
-
-### 1. Include the Library
-
-```html
-<script src="https://unpkg.com/@dmitryvim/form-builder@latest/dist/form-builder.js"></script>
-```
-
-Or via npm:
-```bash
-npm install @dmitryvim/form-builder
-```
-
-### 2. Basic Usage
-
-```javascript
-// Define your schema
-const schema = {
-  "version": "0.3",
-  "title": "User Registration",
-  "elements": [
-    {
-      "type": "text",
-      "key": "name",
-      "label": "Full Name",
-      "required": true
-    },
-    {
-      "type": "text", 
-      "key": "email",
-      "label": "Email",
-      "required": true
-    }
-  ]
-};
-
-// Get container element
-const container = document.getElementById('form-container');
-
-// Render the form
-const form = FormBuilder.renderForm(schema, container, {
-  onSubmit: (data) => {
-    console.log('Form submitted:', data);
-  },
-  onDraft: (data) => {
-    console.log('Draft saved:', data);
-  },
-  onError: (errors) => {
-    console.log('Validation errors:', errors);
-  }
-});
-```
-
-## API Reference
-
-### FormBuilder.renderForm(schema, container, options)
-
-Renders a form in the specified container.
-
-**Parameters:**
-- `schema` - JSON schema object (v0.3)
-- `container` - DOM element to render form in
-- `options` - Configuration object (optional)
-
-**Options:**
-- `prefill` - Object with prefilled values
-- `readonly` - Boolean, renders form in read-only mode (hides buttons)
-- `debug` - Boolean, enables debug logging to console
-- `onSubmit` - Callback for form submission `(data) => {}`
-- `onDraft` - Callback for draft saving `(data) => {}`  
-- `onError` - Callback for validation errors `(errors) => {}`
-- `buttons` - Custom button text: `{ submit: "Start Workflow", draft: "Save Progress" }`
-
-**Important:** Upload handlers must return a **string** resourceId, not an object.
-
-### FormBuilder.validateSchema(schema)
-
-Validates a JSON schema and returns array of errors.
-
-**Returns:** `string[]` - Array of error messages (empty if valid)
-
-### FormBuilder.collectAndValidate(schema, formElement, skipValidation)
-
-⚠️ **Direct API for advanced users only**
-
-Collects form data and validates it. Most users should use `onSubmit`/`onDraft` callbacks instead.
-
-**Parameters:**
-- `schema` - The form schema
-- `formElement` - The form DOM element
-- `skipValidation` - Boolean, skip validation (for drafts)
-
-**Returns:** `{ result: object, errors: string[] }`
-
-**Important:** This is the correct destructuring format - there is no `.valid` or `.data` property.
-
-### FormBuilder.setUploadHandler(uploadFn)
-
-Sets custom file upload handler:
-```javascript
-FormBuilder.setUploadHandler(async (file) => {
-  // Upload file to your backend
-  const response = await fetch('/upload', {
-    method: 'POST',
-    body: file
-  });
-  const result = await response.json();
-  return result.resourceId; // Return resource ID
-});
-```
-
-### FormBuilder.setDownloadHandler(downloadFn)
-
-Sets custom file download handler:
-```javascript
-FormBuilder.setDownloadHandler(async (resourceId, fileName) => {
-  window.open(`/download/${resourceId}`, '_blank');
-});
-```
-
-## Supported Field Types
-
-- `text` - Single line text input
-- `textarea` - Multi-line text input  
-- `number` - Numeric input with constraints
-- `select` - Dropdown selection
-- `file` - Single file upload
-- `files` - Multiple file upload
-- `group` - Nested objects with optional repeat and custom element titles
-
-## Troubleshooting Common Issues
-
-### ❌ Upload Handler Returns Object
-```javascript
-// Wrong - causes "resourceId.slice is not a function"
-FormBuilder.setUploadHandler(async (file) => {
-  const response = await uploadFile(file);
-  return { reference: response.id, name: file.name }; // ❌ Object
-});
-
-// Correct - return string only
-FormBuilder.setUploadHandler(async (file) => {
-  const response = await uploadFile(file);
-  return response.id; // ✅ String resourceId
-});
-```
-
-### ❌ Wrong API Usage
-```javascript
-// Wrong - no .valid or .data properties
-const result = FormBuilder.collectAndValidate(schema, form);
-if (result.valid) { // ❌ Property doesn't exist
-  console.log(result.data); // ❌ Property doesn't exist
-}
-
-// Correct - use destructuring
-const { result, errors } = FormBuilder.collectAndValidate(schema, form);
-if (errors.length === 0) { // ✅ Check errors array
-  console.log(result); // ✅ Data is in result
-}
-```
-
-### ❌ Group Elements Missing Elements Array
-```javascript
-// Wrong - causes "group.elements must be array"
-{
-  type: 'group',
-  key: 'address',
-  // Missing elements array ❌
-}
-
-// Correct - always include elements
-{
-  type: 'group', 
-  key: 'address',
-  label: 'Address Information',
-  element_label: 'Address #$index', // ✅ Optional custom title
-  elements: [ // ✅ Required array
-    { type: 'text', key: 'street', label: 'Street' }
-  ]
-}
-```
-
-### ❌ Readonly Mode Confusion
-```javascript
-// This only hides the default buttons, fields remain editable
-FormBuilder.renderForm(schema, container, { readonly: true });
-
-// For true read-only, you need to disable inputs manually or use a different approach
-```
-
-## Complete Example
-
-```javascript
-const schema = {
-  "version": "0.3",
-  "title": "Video Cover Generation",
-  "elements": [
-    {
-      "type": "text",
-      "key": "concept",
-      "label": "Animation Concept (Optional)",
-      "required": false,
-      "maxLength": 100,
-      "placeholder": "e.g., fun, elegant, dynamic, cozy..."
-    },
-    {
-      "type": "group",
-      "key": "slides_input",
-      "label": "Video Slides",
-      "element_label": "Slide $index", // 🆕 Custom title for each item
-      "repeat": {
-        "min": 1,
-        "max": 10
-      },
-      "elements": [
-        {
-          "type": "file",
-          "key": "main_image",
-          "label": "Main Image",
-          "required": true,
-          "accept": {
-            "extensions": ["png", "jpg", "jpeg", "webp"],
-            "mime": ["image/png", "image/jpeg", "image/webp"]
-          },
-          "maxSizeMB": 25
-        },
-        {
-          "type": "files",
-          "key": "elements",
-          "label": "Element Images (Optional)",
-          "required": false,
-          "accept": {
-            "extensions": ["png", "jpg", "jpeg", "webp"],
-            "mime": ["image/png", "image/jpeg", "image/webp"]
-          },
-          "minCount": 0,
-          "maxCount": 10,
-          "maxSizeMB": 10
-        }
-      ]
-    }
-  ]
-};
-
-// Configure file upload
-FormBuilder.setUploadHandler(async (file) => {
-  const formData = new FormData();
-  formData.append('file', file);
-  
-  const response = await fetch('/api/upload', {
-    method: 'POST',
-    body: formData
-  });
-  
-  const result = await response.json();
-  return result.resourceId;
-});
-
-// Render form
-FormBuilder.renderForm(schema, document.getElementById('form'), {
-  onSubmit: async (data) => {
-    const response = await fetch('/api/submit', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    });
-    
-    if (response.ok) {
-      alert('Form submitted successfully!');
-    }
-  }
-});
-```
-
-## Files
-
-- `form-builder.js` - Main library file
-- `sample.html` - Interactive demo page
-- Complete documentation at `/docs/`

package/dist/example.html

@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Form Builder - Simple Example</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-</head>
-<body class="bg-gray-50 p-8">
-    <div class="max-w-2xl mx-auto">
-        <h1 class="text-3xl font-bold mb-8">Form Builder Library Example</h1>
-        
-        <div class="bg-white rounded-lg shadow p-6 mb-8">
-            <h2 class="text-xl font-semibold mb-4">Generated Form</h2>
-            <div id="form-container"></div>
-        </div>
-
-        <div class="bg-white rounded-lg shadow p-6">
-            <h2 class="text-xl font-semibold mb-4">Form Output</h2>
-            <pre id="output" class="bg-gray-100 p-4 rounded text-sm overflow-auto">Submit the form to see output...</pre>
-        </div>
-    </div>
-
-    <script src="form-builder.js"></script>
-    <script>
-        // Example schema demonstrating element_label feature
-        const schema = {
-            "version": "0.3",
-            "title": "Video Cover Generation",
-            "elements": [
-                {
-                    "type": "text",
-                    "key": "concept",
-                    "label": "Animation Concept (Optional)",
-                    "required": false,
-                    "maxLength": 100,
-                    "placeholder": "e.g., fun, elegant, dynamic, cozy..."
-                },
-                {
-                    "type": "group",
-                    "key": "slides_input",
-                    "label": "Video Slides",
-                    "element_label": "Slide $index",
-                    "repeat": {
-                        "min": 1,
-                        "max": 5
-                    },
-                    "elements": [
-                        {
-                            "type": "file",
-                            "key": "main_image",
-                            "label": "Main Image",
-                            "required": true,
-                            "accept": {
-                                "extensions": ["png", "jpg", "jpeg", "webp"],
-                                "mime": ["image/png", "image/jpeg", "image/webp"]
-                            },
-                            "maxSizeMB": 25
-                        },
-                        {
-                            "type": "files",
-                            "key": "elements",
-                            "label": "Element Images (Optional)",
-                            "required": false,
-                            "accept": {
-                                "extensions": ["png", "jpg", "jpeg", "webp"],
-                                "mime": ["image/png", "image/jpeg", "image/webp"]
-                            },
-                            "minCount": 0,
-                            "maxCount": 5,
-                            "maxSizeMB": 10
-                        }
-                    ]
-                }
-            ]
-        };
-
-        // Configure file upload simulation
-        FormBuilder.setUploadHandler(async (file) => {
-            // Simulate upload delay
-            await new Promise(resolve => setTimeout(resolve, 1000));
-            
-            // Generate fake resource ID
-            const resourceId = 'res_' + Math.random().toString(36).substr(2, 12);
-            console.log(`File "${file.name}" uploaded with ID: ${resourceId}`);
-            return resourceId;
-        });
-
-        // Render the form
-        const container = document.getElementById('form-container');
-        const output = document.getElementById('output');
-        
-        FormBuilder.renderForm(schema, container, {
-            onSubmit: (data) => {
-                output.textContent = JSON.stringify(data, null, 2);
-                alert('Form submitted successfully! Check the output below.');
-            },
-            onDraft: (data) => {
-                output.textContent = 'DRAFT:\n' + JSON.stringify(data, null, 2);
-                console.log('Draft saved:', data);
-            },
-            onError: (errors) => {
-                alert('Validation errors: ' + errors.join(', '));
-            }
-        });
-    </script>
-</body>
-</html>