form-schema-lib 🚀

A high-performance, professional-grade Angular library for building and rendering dynamic forms using a standardized JSON schema. Designed for flexibility, speed, and premium aesthetics.

✨ Features

• Intuitive Visual Designer: A spacious "Big Canvas" designer with smooth drag-and-drop mechanics.
• Dynamic Render Engine: Instant form generation from JSON schemas with full Reactive Forms support.
• Side-Drawer Properties: Context-aware configuration panel that slides in for a focused editing experience.
• Smart Validation: Built-in logic for field uniqueness, mandatory metadata, and real-time error highlighting.
• Responsive Layouts: Direct integration with the Bootstrap Grid system (col-12, col-6, etc.).
• Zero-Flicker Typing: Optimized change detection for ultra-smooth user interaction in preview mode.

🛠️ Installation

npm install form-schema-lib

Note: This library depends on @angular/forms, @angular/cdk, and Bootstrap 5 (CSS) for layout. Ensure they are available in your project.

🚀 Quick Start

1. The Form Builder

Perfect for administrative panels where users need to design custom forms.

import { SchemaFormBuilderComponent } from 'form-schema-lib';

@Component({
  selector: 'app-designer',
  standalone: true,
  imports: [SchemaFormBuilderComponent],
  template: `
    <lib-schema-form-builder 
      [initialSchema]="mySchema" 
      (schemaChange)="handleUpdate($event)">
    </lib-schema-form-builder>
  `
})
export class DesignerComponent {
  mySchema = { fields: [] };

  handleUpdate(newSchema: any) {
    console.log('Schema updated:', newSchema);
  }
}

2. The Form Viewer

Used to display and collect data from the forms you've built.

import { SchemaFormViewerComponent } from 'form-schema-lib';

@Component({
  selector: 'app-form-page',
  standalone: true,
  imports: [SchemaFormViewerComponent],
  template: `
    <lib-schema-form-viewer 
      [schema]="savedSchema" 
      (formSubmit)="handleSubmit($event)">
    </lib-schema-form-viewer>
  `
})
export class FormPageComponent {
  handleSubmit(formData: any) {
    console.log('User Input:', formData);
  }
}

📝 Schema Structure

The library uses a simple, flat JSON object to represent your form:

{
  "title": "Registration Form",
  "fields": [
    {
      "key": "user_name",
      "label": "Full Name",
      "type": "input",
      "placeholder": "Enter your name...",
      "width": "col-6",
      "required": true
    },
    {
      "key": "role",
      "label": "User Role",
      "type": "select",
      "options": [
        { "label": "Admin", "value": "1" },
        { "label": "Editor", "value": "2" }
      ],
      "width": "col-6"
    }
  ]
}

🎨 Styling and Customization

The library is designed to inherit your project's typography and colors. You can easily override the designer's internal styles using CSS Variables (coming soon) or global selectors:

/* Customizing the field wrappers in the designer */
.lib-field-wrapper {
  border-radius: 12px;
  background: #ffffff;
}

/* Customizing the properties drawer width */
.properties-drawer {
  width: 450px;
}

🧱 Supported Field Types

• Input: Text, Email, Passwords.
• Number: Numeric inputs with validation.
• Date: Standard HTML5 date pickers.
• Checkbox: Simple toggles for boolean data.
• Select: Dropdown menus for single choice.
• MultiSelect: Tags or lists for multiple choices.
• Radio: Mutually exclusive selection buttons.
• File: Standard local file selection.

📦 Building and Publishing

# Build the package
ng build form-schema-lib

# Navigate to build output
cd dist/form-schema-lib

# Publish to the registry
npm publish --access public

📄 License

MIT © ITWays