@dmitryvim/form-builder 0.1.22 → 0.1.24

package/docs/integration.md

@@ -7,18 +7,26 @@ Complete guide for integrating Form Builder into your application.
 ### Basic Iframe Embedding
 
 ```html
-<iframe src="https://picazru.github.io/form-builder/dist/index.html" 
-        width="100%" height="600px" frameborder="0"></iframe>
+<iframe
+  src="https://picazru.github.io/form-builder/dist/index.html"
+  width="100%"
+  height="600px"
+  frameborder="0"
+></iframe>
 ```
 
 ### With Custom Schema
 
 ```html
-<iframe src="https://picazru.github.io/form-builder/dist/index.html?schema=BASE64_SCHEMA" 
-        width="100%" height="600px"></iframe>
+<iframe
+  src="https://picazru.github.io/form-builder/dist/index.html?schema=BASE64_SCHEMA"
+  width="100%"
+  height="600px"
+></iframe>
 ```
 
 **Encoding Schema:**
+
 ```javascript
 const schema = { version: "0.3", title: "My Form", elements: [...] };
 const encodedSchema = btoa(JSON.stringify(schema));
@@ -38,10 +46,10 @@ npm install @dmitryvim/form-builder
 Copy the form builder HTML directly into your application:
 
 ```javascript
-import formBuilderHTML from '@dmitryvim/form-builder/dist/index.html';
+import formBuilderHTML from "@dmitryvim/form-builder/dist/index.html";
 
 // Insert into your page
-document.getElementById('form-container').innerHTML = formBuilderHTML;
+document.getElementById("form-container").innerHTML = formBuilderHTML;
 ```
 
 ## Configuration
@@ -51,35 +59,38 @@ document.getElementById('form-container').innerHTML = formBuilderHTML;
 The upload handler **must return a resource ID** that can be used for downloads and form submission:
 
 ```javascript
-window.addEventListener('message', (event) => {
-    if (event.origin !== 'https://picazru.github.io') return;
-    
-    if (event.data.type === 'formBuilderReady') {
-        const iframe = document.getElementById('formBuilder');
-        iframe.contentWindow.postMessage({
-            type: 'configure',
-            config: {
-                uploadHandler: 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; // Return ID, not URL
-                },
-                downloadHandler: async (resourceId) => {
-                    window.open(`/api/download/${resourceId}`, '_blank');
-                },
-                thumbnailHandler: async (resourceId) => {
-                    return `/api/thumbnail/${resourceId}`;
-                }
-            }
-        }, 'https://picazru.github.io');
-    }
+window.addEventListener("message", (event) => {
+  if (event.origin !== "https://picazru.github.io") return;
+
+  if (event.data.type === "formBuilderReady") {
+    const iframe = document.getElementById("formBuilder");
+    iframe.contentWindow.postMessage(
+      {
+        type: "configure",
+        config: {
+          uploadHandler: 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; // Return ID, not URL
+          },
+          downloadHandler: async (resourceId) => {
+            window.open(`/api/download/${resourceId}`, "_blank");
+          },
+          thumbnailHandler: async (resourceId) => {
+            return `/api/thumbnail/${resourceId}`;
+          },
+        },
+      },
+      "https://picazru.github.io",
+    );
+  }
 });
 ```
 
@@ -88,12 +99,15 @@ window.addEventListener('message', (event) => {
 Display form data without editing capabilities:
 
 ```javascript
-iframe.contentWindow.postMessage({
-    type: 'configure',
+iframe.contentWindow.postMessage(
+  {
+    type: "configure",
     options: {
-        readonly: true
-    }
-}, 'https://picazru.github.io');
+      readonly: true,
+    },
+  },
+  "https://picazru.github.io",
+);
 ```
 
 ### Tailwind CSS Integration
@@ -103,14 +117,14 @@ Always uses Tailwind CSS styling. Add to your CSS:
 ```css
 /* Custom properties for consistent styling */
 :root {
-    --form-primary: 59 130 246;      /* Blue */
-    --form-secondary: 100 116 139;   /* Gray */ 
-    --form-accent: 16 185 129;       /* Green */
+  --form-primary: 59 130 246; /* Blue */
+  --form-secondary: 100 116 139; /* Gray */
+  --form-accent: 16 185 129; /* Green */
 }
 
 /* Override form builder styles if needed */
 .form-builder-container {
-    @apply max-w-none; /* Remove max-width constraints */
+  @apply max-w-none; /* Remove max-width constraints */
 }
 ```
 
@@ -121,14 +135,14 @@ Always uses Tailwind CSS styling. Add to your CSS:
 Listen for form submissions:
 
 ```javascript
-window.addEventListener('message', (event) => {
-    if (event.data.type === 'formSubmit') {
-        const { data, schema } = event.data;
-        console.log('Form submitted:', data);
-        
-        // Handle the submission
-        handleFormSubmission(data);
-    }
+window.addEventListener("message", (event) => {
+  if (event.data.type === "formSubmit") {
+    const { data, schema } = event.data;
+    console.log("Form submitted:", data);
+
+    // Handle the submission
+    handleFormSubmission(data);
+  }
 });
 ```
 
@@ -137,14 +151,14 @@ window.addEventListener('message', (event) => {
 Listen for draft save events:
 
 ```javascript
-window.addEventListener('message', (event) => {
-    if (event.data.type === 'draftSave') {
-        const { data, schema } = event.data;
-        console.log('Draft saved:', data);
-        
-        // Save draft without validation
-        saveDraft(data);
-    }
+window.addEventListener("message", (event) => {
+  if (event.data.type === "draftSave") {
+    const { data, schema } = event.data;
+    console.log("Draft saved:", data);
+
+    // Save draft without validation
+    saveDraft(data);
+  }
 });
 ```
 
@@ -166,28 +180,34 @@ iframe.contentWindow.postMessage({
 ### Prefill Form Data
 
 ```javascript
-iframe.contentWindow.postMessage({
-    type: 'setData',
+iframe.contentWindow.postMessage(
+  {
+    type: "setData",
     data: {
-        name: "John Doe",
-        email: "john@example.com"
-    }
-}, 'https://picazru.github.io');
+      name: "John Doe",
+      email: "john@example.com",
+    },
+  },
+  "https://picazru.github.io",
+);
 ```
 
 ### Get Current Data
 
 ```javascript
 // Request data
-iframe.contentWindow.postMessage({
-    type: 'getData'
-}, 'https://picazru.github.io');
+iframe.contentWindow.postMessage(
+  {
+    type: "getData",
+  },
+  "https://picazru.github.io",
+);
 
 // Listen for response
-window.addEventListener('message', (event) => {
-    if (event.data.type === 'currentData') {
-        console.log('Current form data:', event.data.data);
-    }
+window.addEventListener("message", (event) => {
+  if (event.data.type === "currentData") {
+    console.log("Current form data:", event.data.data);
+  }
 });
 ```
 
@@ -195,15 +215,18 @@ window.addEventListener('message', (event) => {
 
 ```javascript
 // Request validation
-iframe.contentWindow.postMessage({
-    type: 'validate'
-}, 'https://picazru.github.io');
+iframe.contentWindow.postMessage(
+  {
+    type: "validate",
+  },
+  "https://picazru.github.io",
+);
 
 // Listen for result
-window.addEventListener('message', (event) => {
-    if (event.data.type === 'validationResult') {
-        console.log('Form is valid:', event.data.isValid);
-    }
+window.addEventListener("message", (event) => {
+  if (event.data.type === "validationResult") {
+    console.log("Form is valid:", event.data.isValid);
+  }
 });
 ```
 
@@ -215,58 +238,61 @@ Your backend must handle file uploads and return resource IDs:
 
 ```javascript
 // Express.js example
-app.post('/api/upload', upload.single('file'), (req, res) => {
-    const file = req.file;
-    
-    // Store file (S3, local storage, etc.)
-    const resourceId = generateResourceId();
-    storeFile(resourceId, file);
-    
-    res.json({
-        resourceId: resourceId,
-        filename: file.originalname,
-        size: file.size,
-        mimetype: file.mimetype
-    });
+app.post("/api/upload", upload.single("file"), (req, res) => {
+  const file = req.file;
+
+  // Store file (S3, local storage, etc.)
+  const resourceId = generateResourceId();
+  storeFile(resourceId, file);
+
+  res.json({
+    resourceId: resourceId,
+    filename: file.originalname,
+    size: file.size,
+    mimetype: file.mimetype,
+  });
 });
 ```
 
 ### File Download Endpoint
 
 ```javascript
-app.get('/api/download/:resourceId', (req, res) => {
-    const { resourceId } = req.params;
-    
-    // Retrieve file info
-    const fileInfo = getFileInfo(resourceId);
-    if (!fileInfo) {
-        return res.status(404).json({ error: 'File not found' });
-    }
-    
-    // Stream file to client
-    const fileStream = getFileStream(resourceId);
-    res.setHeader('Content-Disposition', `attachment; filename="${fileInfo.filename}"`);
-    res.setHeader('Content-Type', fileInfo.mimetype);
-    fileStream.pipe(res);
+app.get("/api/download/:resourceId", (req, res) => {
+  const { resourceId } = req.params;
+
+  // Retrieve file info
+  const fileInfo = getFileInfo(resourceId);
+  if (!fileInfo) {
+    return res.status(404).json({ error: "File not found" });
+  }
+
+  // Stream file to client
+  const fileStream = getFileStream(resourceId);
+  res.setHeader(
+    "Content-Disposition",
+    `attachment; filename="${fileInfo.filename}"`,
+  );
+  res.setHeader("Content-Type", fileInfo.mimetype);
+  fileStream.pipe(res);
 });
 ```
 
 ### Form Submission Handler
 
 ```javascript
-app.post('/api/forms/submit', (req, res) => {
-    const { schema, data } = req.body;
-    
-    // Process form data
-    // File fields will contain resource IDs
-    
-    console.log('Received form:', data);
-    // Example: { name: "John", avatar: "res_abc123", documents: ["res_def456", "res_ghi789"] }
-    
-    // Validate and save
-    const result = processFormSubmission(schema, data);
-    
-    res.json({ success: true, id: result.id });
+app.post("/api/forms/submit", (req, res) => {
+  const { schema, data } = req.body;
+
+  // Process form data
+  // File fields will contain resource IDs
+
+  console.log("Received form:", data);
+  // Example: { name: "John", avatar: "res_abc123", documents: ["res_def456", "res_ghi789"] }
+
+  // Validate and save
+  const result = processFormSubmission(schema, data);
+
+  res.json({ success: true, id: result.id });
 });
 ```
 
@@ -275,39 +301,42 @@ app.post('/api/forms/submit', (req, res) => {
 ### React Integration
 
 ```jsx
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";
 
 function FormBuilder({ schema, onSubmit }) {
-    const iframeRef = useRef(null);
-    
-    useEffect(() => {
-        const handleMessage = (event) => {
-            if (event.data.type === 'formBuilderReady') {
-                // Configure form builder
-                iframeRef.current.contentWindow.postMessage({
-                    type: 'setSchema',
-                    schema: schema
-                }, 'https://picazru.github.io');
-            }
-            
-            if (event.data.type === 'formSubmit') {
-                onSubmit(event.data.data);
-            }
-        };
-        
-        window.addEventListener('message', handleMessage);
-        return () => window.removeEventListener('message', handleMessage);
-    }, [schema, onSubmit]);
-    
-    return (
-        <iframe
-            ref={iframeRef}
-            src="https://picazru.github.io/form-builder/dist/index.html"
-            width="100%"
-            height="600px"
-            frameBorder="0"
-        />
-    );
+  const iframeRef = useRef(null);
+
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (event.data.type === "formBuilderReady") {
+        // Configure form builder
+        iframeRef.current.contentWindow.postMessage(
+          {
+            type: "setSchema",
+            schema: schema,
+          },
+          "https://picazru.github.io",
+        );
+      }
+
+      if (event.data.type === "formSubmit") {
+        onSubmit(event.data.data);
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [schema, onSubmit]);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      src="https://picazru.github.io/form-builder/dist/index.html"
+      width="100%"
+      height="600px"
+      frameBorder="0"
+    />
+  );
 }
 ```
 
@@ -315,42 +344,45 @@ function FormBuilder({ schema, onSubmit }) {
 
 ```vue
 <template>
-    <iframe
-        ref="formBuilder"
-        src="https://picazru.github.io/form-builder/dist/index.html"
-        width="100%"
-        height="600px"
-        frameborder="0"
-        @load="onIframeLoad"
-    />
+  <iframe
+    ref="formBuilder"
+    src="https://picazru.github.io/form-builder/dist/index.html"
+    width="100%"
+    height="600px"
+    frameborder="0"
+    @load="onIframeLoad"
+  />
 </template>
 
 <script>
 export default {
-    props: ['schema'],
-    
-    mounted() {
-        window.addEventListener('message', this.handleMessage);
+  props: ["schema"],
+
+  mounted() {
+    window.addEventListener("message", this.handleMessage);
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("message", this.handleMessage);
+  },
+
+  methods: {
+    handleMessage(event) {
+      if (event.data.type === "formBuilderReady") {
+        this.$refs.formBuilder.contentWindow.postMessage(
+          {
+            type: "setSchema",
+            schema: this.schema,
+          },
+          "https://picazru.github.io",
+        );
+      }
+
+      if (event.data.type === "formSubmit") {
+        this.$emit("submit", event.data.data);
+      }
     },
-    
-    beforeUnmount() {
-        window.removeEventListener('message', this.handleMessage);
-    },
-    
-    methods: {
-        handleMessage(event) {
-            if (event.data.type === 'formBuilderReady') {
-                this.$refs.formBuilder.contentWindow.postMessage({
-                    type: 'setSchema',
-                    schema: this.schema
-                }, 'https://picazru.github.io');
-            }
-            
-            if (event.data.type === 'formSubmit') {
-                this.$emit('submit', event.data.data);
-            }
-        }
-    }
+  },
 };
 </script>
 ```
@@ -362,20 +394,20 @@ export default {
 Always validate message origins:
 
 ```javascript
-window.addEventListener('message', (event) => {
-    // Only accept messages from form builder origin
-    if (event.origin !== 'https://picazru.github.io') {
-        return;
-    }
-    
-    // Process message...
+window.addEventListener("message", (event) => {
+  // Only accept messages from form builder origin
+  if (event.origin !== "https://picazru.github.io") {
+    return;
+  }
+
+  // Process message...
 });
 ```
 
 ### File Upload Security
 
 - **Validate file types** on server
-- **Limit file sizes** appropriately  
+- **Limit file sizes** appropriately
 - **Scan for viruses** if possible
 - **Use secure file storage** (S3 with proper permissions)
 - **Generate secure resource IDs** (UUID, crypto.randomUUID())
@@ -385,9 +417,9 @@ window.addEventListener('message', (event) => {
 Add to your CSP headers:
 
 ```
-Content-Security-Policy: 
-    default-src 'self'; 
-    frame-src https://picazru.github.io; 
+Content-Security-Policy:
+    default-src 'self';
+    frame-src https://picazru.github.io;
     connect-src 'self' https://your-api.com;
 ```
 
@@ -408,12 +440,15 @@ Content-Security-Policy:
 Enable console logging in iframe:
 
 ```javascript
-iframe.contentWindow.postMessage({
-    type: 'configure',
+iframe.contentWindow.postMessage(
+  {
+    type: "configure",
     config: {
-        debug: true
-    }
-}, 'https://picazru.github.io');
+      debug: true,
+    },
+  },
+  "https://picazru.github.io",
+);
 ```
 
 This will log all form builder events to the browser console.
@@ -431,15 +466,15 @@ This will log all form builder events to the browser console.
 ```javascript
 // Old (v0.1.x)
 uploadHandler: async (file) => {
-    // ... upload logic
-    return result.fileUrl; // URL
-}
+  // ... upload logic
+  return result.fileUrl; // URL
+};
 
-// New (v0.2.x)  
+// New (v0.2.x)
 uploadHandler: async (file) => {
-    // ... upload logic
-    return result.resourceId; // ID
-}
+  // ... upload logic
+  return result.resourceId; // ID
+};
 ```
 
-This integration guide covers all aspects of using Form Builder in production applications.
+This integration guide covers all aspects of using Form Builder in production applications.