@dmitryvim/form-builder 0.1.27 → 0.1.29

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,16 +37,20 @@ 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
+- **💾 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
 {
   "version": "0.3",
@@ -56,36 +60,165 @@ 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 Groups
+```json
+{
+  "version": "0.3",
+  "title": "Product Registration",
+  "elements": [
+    {
+      "type": "file",
+      "key": "mainImage",
+      "label": "Product Image",
+      "required": true,
+      "accept": {
+        "extensions": ["jpg", "png", "webp"]
+      }
+    },
+    {
+      "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
+        }
+      ]
+    }
+  ]
+}
+```
 
-- **CDN**: Direct iframe embedding
-- **NPM**: Import as module
-- **Direct**: Self-hosted deployment
+## Integration Methods
 
-See [Integration Guide](docs/integration.md) for complete setup instructions.
+### 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.renderForm(schema, prefillData);
+```
+
+### 2. CDN Integration
+```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
 
 ## 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.