Form Builder Package

A comprehensive, production-ready form builder for React applications with drag-and-drop functionality, conditional logic, multi-page support, and extensive field types.

Features

🚀 Core Capabilities

• Drag & Drop Interface: Intuitive form building with visual field arrangement
• Multi-Page Forms: Support for complex forms with pagination and navigation
• Conditional Logic: Show/hide fields based on user responses with visual logic builder
• Rich Field Types: 20+ field types including text, choice, file upload, interactive elements
• Schema Export/Import: JSON-based form definitions for easy portability
• Form Validation: Built-in validation rules with custom error messages
• Responsive Design: Works seamlessly across desktop, tablet, and mobile devices

📋 Supported Field Types

Basic Fields

• Short Text, Long Text (Textarea), Number, Email, Phone, Password, URL
• Date, Time, Color Picker
• Slider/Range, Star Rating

Choice Fields

• Dropdown (Select), Multi-Select, Radio Buttons, Checkboxes, Toggle Switch

File & Media

• File Upload, Image Upload

Interactive Elements

• Signature Field, Drawing Pad, Star Rating, Slider

Layout & Control

• Section Headers, Paragraph Text, Page Breaks

🧠 Smart Features

• Conditional Logic Engine: IF-THEN rules with multiple operators
• Form Validation: Required fields, min/max length, pattern matching
• Multi-Page Navigation: Previous/Next with progress tracking
• Auto-Save: Optional localStorage persistence
• Theme Support: Light/dark mode ready
• TypeScript: Full type safety throughout

Installation

npm install @your-org/form-builder
# or
yarn add @your-org/form-builder

Quick Start

Form Builder (Editor)

import React from 'react';
import { FormBuilder } from '@your-org/form-builder';

function App() {
  const handleExport = (schema) => {
    console.log('Form Schema:', schema);
    // Save to database or file
  };

  const handleSchemaChange = (schema) => {
    // Real-time schema updates
    console.log('Schema updated:', schema);
  };

  return (
    <FormBuilder 
      onExport={handleExport}
      onSchemaChange={handleSchemaChange}
    />
  );
}

Form Renderer (Display)

import React from 'react';
import { FormRenderer } from '@your-org/form-builder';

function MyForm({ formSchema }) {
  const handleSubmit = (formData) => {
    console.log('Form submitted:', formData);
    // Process form submission
  };

  const handlePageChange = (pageIndex) => {
    console.log('User navigated to page:', pageIndex);
  };

  return (
    <FormRenderer
      schema={formSchema}
      onSubmit={handleSubmit}
      onPageChange={handlePageChange}
      initialValues={{}} // Pre-populate form
    />
  );
}

API Reference

FormBuilder Props

| Prop | Type | Description | |------|------|-------------| | initialSchema | FormSchema | Pre-load existing form schema | | onSchemaChange | (schema: FormSchema) => void | Real-time schema updates | | onExport | (schema: FormSchema) => void | Handle schema export | | className | string | Additional CSS classes |

FormRenderer Props

| Prop | Type | Description | |------|------|-------------| | schema | FormSchema | Form schema to render | | onSubmit | (values: Record<string, any>) => void | Form submission handler | | onPageChange | (pageIndex: number) => void | Page navigation callback | | initialValues | Record<string, any> | Pre-populate form fields | | className | string | Additional CSS classes |

FormSchema Structure

interface FormSchema {
  id: string;
  title: string;
  description?: string;
  pages: FormPage[];
  fields: Record<string, FormField>;
  settings: FormSettings;
  version: string;
  createdAt: string;
  updatedAt: string;
}

Field Types & Configuration

Text Fields

{
  type: 'text' | 'textarea' | 'email' | 'phone' | 'password' | 'url',
  label: 'Field Label',
  placeholder: 'Enter text...',
  required: true,
  validation: [
    { type: 'required', message: 'This field is required' },
    { type: 'minLength', value: 3, message: 'Minimum 3 characters' }
  ]
}

Choice Fields

{
  type: 'select' | 'radio' | 'checkbox',
  label: 'Choose Options',
  options: [
    { id: '1', label: 'Option 1', value: 'option1' },
    { id: '2', label: 'Option 2', value: 'option2' }
  ]
}

Interactive Fields

{
  type: 'slider',
  label: 'Rate this',
  settings: {
    min: 0,
    max: 100,
    step: 1
  }
}

Conditional Logic

Basic Conditions

{
  conditionalLogic: [{
    id: 'logic1',
    operator: 'AND',
    conditions: [{
      fieldId: 'user_type',
      operator: 'equals',
      value: 'premium'
    }],
    actions: [{
      type: 'show',
      targetFieldId: 'premium_features'
    }]
  }]
}

Supported Operators

• equals, notEquals
• contains, notContains
• greaterThan, lessThan
• isEmpty, isNotEmpty

Available Actions

• show / hide - Control field visibility
• enable / disable - Control field interaction
• setValue - Set field values programmatically

Multi-Page Forms

Page Configuration

{
  pages: [
    {
      id: 'page1',
      title: 'Personal Information',
      description: 'Tell us about yourself',
      fields: ['name', 'email', 'phone']
    },
    {
      id: 'page2', 
      title: 'Preferences',
      description: 'Your preferences',
      fields: ['interests', 'notifications']
    }
  ]
}

Navigation Settings

{
  settings: {
    navigation: {
      showProgress: true,      // Show progress bar
      allowBackward: true      // Allow previous page navigation
    }
  }
}

Advanced Usage

Custom Validation

const customValidation = {
  type: 'pattern',
  value: '^[A-Z]{2}[0-9]{4}$',
  message: 'Format must be XX0000'
};

Form State Management

import { useFormBuilderStore, useFormStore } from '@your-org/form-builder';

function CustomComponent() {
  const { schema, updateField } = useFormBuilderStore();
  const { formValues, updateFormValue } = useFormStore();
  
  // Access and modify form state
}

Styling & Theming

The package uses Tailwind CSS for styling. You can customize the appearance by:

1. CSS Custom Properties: Override color schemes
2. Tailwind Configuration: Extend default theme
3. Custom CSS Classes: Use the className prop

/* Custom theme variables */
:root {
  --form-primary: #3B82F6;
  --form-secondary: #10B981;
  --form-background: #F9FAFB;
}

TypeScript Support

Full TypeScript support with comprehensive type definitions:

import type { 
  FormSchema, 
  FormField, 
  ConditionalLogic,
  ValidationRule 
} from '@your-org/form-builder';

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - see LICENSE file for details.

Changelog

v1.0.0

• Initial release with full form builder functionality
• Drag & drop interface
• Multi-page support
• Conditional logic engine
• 20+ field types
• TypeScript support
• Comprehensive validation system