@enerjisaformlibrary/formbuilder-react 1.0.9 → 1.0.22

package/README.md

@@ -1,27 +1,22 @@
 # @enerjisaformlibrary/formbuilder-react
 
-A comprehensive, standalone drag-and-drop form builder React component. All UI components, styles, and dependencies are bundled - only React is required as a peer dependency.
-
-## Table of Contents
-
-- [Installation](#installation)
-- [Quick Start](#quick-start)
-- [FormBuilder Props](#formbuilder-props)
-- [Exported Components](#exported-components)
-- [Form Schema Structure](#form-schema-structure)
-- [Field Types](#field-types)
-- [Validation Rules](#validation-rules)
-- [Conditional Logic](#conditional-logic)
-- [Multi-Step Forms](#multi-step-forms)
-- [Container Fields](#container-fields)
-- [Custom Styling](#custom-styling)
-- [Events & Actions](#events--actions)
-- [Zustand Store API](#zustand-store-api)
-- [TypeScript Types](#typescript-types)
-- [Complete JSON Example](#complete-json-example)
-- [Extracting Form Values](#extracting-form-values)
-
----
+Professional drag-and-drop form builder React component with 20+ field types, multi-step wizard support, conditional logic, undo/redo history, and JSON export/import.
+
+## Features
+
+- **20+ Field Types**: Text, textarea, number, email, phone, URL, password, date, time, date range, dropdown, checkbox, radio, toggle, multi-select, file upload, signature pad, star rating, slider, color picker, rich text editor, autocomplete, QR code, pattern format, and more
+- **Drag & Drop**: Intuitive drag-and-drop interface for building forms
+- **Multi-Step Wizard**: Create multi-step forms with progress indicator
+- **Conditional Logic**: Show/hide/enable/disable fields based on conditions
+- **Undo/Redo**: Full undo/redo support with 50-state history
+- **Grid Layout**: 12-column responsive grid system
+- **Containers**: Nested row/column layouts within containers
+- **JSON Export/Import**: Export forms as JSON and import them back
+- **Custom Styling**: Per-field CSS class customization
+- **Form Versioning**: Save and restore form versions
+- **Tooltips**: Help text support for fields
+- **Actions System**: onClick, onChange, onFocus, onBlur event handlers
+- **Tab Index**: Keyboard navigation order for form fields
 
 ## Installation
 
@@ -29,700 +24,290 @@ A comprehensive, standalone drag-and-drop form builder React component. All UI c
 npm install @enerjisaformlibrary/formbuilder-react
 ```
 
-**Peer Dependencies:**
-- `react`: ^18.0.0
-- `react-dom`: ^18.0.0
-
----
-
 ## Quick Start
 
 ```tsx
-import { FormBuilder, useFormStore } from '@enerjisaformlibrary/formbuilder-react';
+import { FormBuilder } from '@enerjisaformlibrary/formbuilder-react';
 import '@enerjisaformlibrary/formbuilder-react/styles.css';
 
 function App() {
-  const handleChange = (form) => {
-    // Called on every form schema change
-    console.log('Form schema updated:', form);
+  const handleSave = (formSchema) => {
+    console.log('Form saved:', formSchema);
+    // Save to your database
   };
 
-  const handleSave = (form) => {
-    // Save form JSON to your database
-    const jsonString = JSON.stringify(form, null, 2);
-    saveToDatabase(jsonString);
+  const handleChange = (formSchema) => {
+    console.log('Form changed:', formSchema);
   };
 
   return (
-    <div style={{ height: '100vh', width: '100%' }}>
-      <FormBuilder 
-        onChange={handleChange}
-        onSave={handleSave}
-        theme="light"
-        showToolbar={true}
-        showComponentLibrary={true}
-        showPropertiesPanel={true}
-      />
-    </div>
-  );
-}
-```
-
-### Loading Existing Form
-
-```tsx
-import { FormBuilder } from '@enerjisaformlibrary/formbuilder-react';
-import '@enerjisaformlibrary/formbuilder-react/styles.css';
-
-function EditForm({ existingFormJson }) {
-  // Parse JSON string if needed
-  const initialForm = typeof existingFormJson === 'string' 
-    ? JSON.parse(existingFormJson) 
-    : existingFormJson;
-
-  return (
-    <FormBuilder 
-      initialForm={initialForm}
-      onSave={(form) => updateInDatabase(form)}
+    <FormBuilder
+      onSave={handleSave}
+      onChange={handleChange}
     />
   );
 }
 ```
 
----
-
-## FormBuilder Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `initialForm` | `FormSchema` | `undefined` | Pre-existing form schema to load |
-| `onSave` | `(form: FormSchema) => void` | `undefined` | Callback when save button clicked |
-| `onChange` | `(form: FormSchema) => void` | `undefined` | Callback on every form change |
-| `className` | `string` | `''` | Additional CSS class for container |
-| `theme` | `'light' \| 'dark'` | `'light'` | Color theme |
-| `showToolbar` | `boolean` | `true` | Show/hide top toolbar |
-| `showComponentLibrary` | `boolean` | `true` | Show/hide left component panel |
-| `showPropertiesPanel` | `boolean` | `true` | Show/hide right properties panel |
-
----
-
-## Exported Components
-
-```tsx
-// Main wrapper component (recommended)
-import { FormBuilder } from '@enerjisaformlibrary/formbuilder-react';
-
-// Individual components for custom layouts
-import { 
-  FormCanvas,           // Central form editing canvas
-  PropertiesPanel,      // Right-side property editor
-  ComponentLibrary,     // Left-side component palette
-  Toolbar,              // Top toolbar with actions
-  CanvasField,          // Individual field renderer
-  DragOverlayContent,   // Drag preview overlay
-  JsonViewerModal,      // JSON preview modal
-} from '@enerjisaformlibrary/formbuilder-react';
-
-// Zustand store for state management
-import { useFormStore } from '@enerjisaformlibrary/formbuilder-react';
-
-// All TypeScript types and schemas
-import type {
-  FormSchema,
-  FormField,
-  FormRow,
-  FormColumn,
-  Step,
-  FieldProps,
-  Validation,
-  ConditionalLogic,
-  CustomStyle,
-  SubmissionConfig,
-} from '@enerjisaformlibrary/formbuilder-react';
-```
+## Props
 
----
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `initialSchema` | `FormSchema` | No | Initial form schema to load |
+| `onSave` | `(schema: FormSchema) => void` | No | Called when user clicks Save button |
+| `onChange` | `(schema: FormSchema) => void` | No | Called on every form change |
 
 ## Form Schema Structure
 
-The form is represented as a hierarchical JSON structure:
-
 ```typescript
 interface FormSchema {
-  id: string;                          // Unique form identifier
-  name: string;                        // Form display name
-  description?: string;                // Optional description
-  rows: FormRow[];                     // Array of rows (single-page mode)
-  steps?: Step[];                      // Array of steps (multi-step mode)
-  isMultiStep?: boolean;               // Enable multi-step wizard
-  submissionConfig?: SubmissionConfig; // Webhook/submission settings
-  settings?: FormSettings;             // Global form settings
-  versions?: FormVersion[];            // Version history
-  currentVersion?: number;             // Current version number
-  createdAt?: string;                  // ISO date string
-  updatedAt?: string;                  // ISO date string
+  id: string;
+  name: string;
+  description?: string;
+  isMultiStep: boolean;
+  currentVersion: number;
+  rows: FormRow[];           // For single-page forms
+  steps?: FormStep[];        // For multi-step forms
+  settings?: FormSettings;
+  submissionConfig?: SubmissionConfig;
+  versions?: FormVersion[];
 }
 
 interface FormRow {
   id: string;
-  columns: FormColumn[];               // 12-column grid system
-  conditionalLogic?: ConditionalLogic; // Row-level conditions
-  fieldSize?: 'compact' | 'normal' | 'comfortable';
-  spacing?: number;                    // 0-16
-  padding?: number;                    // 0-16
+  columns: FormColumn[];
+  conditionalLogic?: ConditionalLogic;
 }
 
 interface FormColumn {
   id: string;
-  width: number;                       // 1-12 (grid columns)
-  responsiveWidth?: ResponsiveWidth;   // Mobile/tablet overrides
-  fields: FormField[];                 // Fields in this column
+  width: number;  // 1-12 (grid columns)
+  fields: FormField[];
+  responsiveWidth?: ResponsiveWidth;
 }
 
 interface FormField {
-  id: string;                          // Unique field identifier
-  type: string;                        // Field type (see Field Types)
-  props: FieldProps;                   // Field properties
-  validation?: Validation;             // Validation rules
-  conditionalLogic?: ConditionalLogic; // Field conditions
-  customStyle?: CustomStyle;           // CSS customization
-  localization?: Localization;         // Multi-language support
-  computed?: ComputedField;            // Calculated fields
-  responsiveWidth?: ResponsiveWidth;   // Responsive breakpoints
-  events?: FieldEvents;                // Event handlers
+  id: string;
+  type: FieldType;
+  props: FieldProps;
+  validation?: FieldValidation;
+  conditionalLogic?: ConditionalLogic;
+  customStyle?: CustomStyle;
 }
 ```
 
----
-
 ## Field Types
 
-### Basic Input Fields
+### Basic Fields
+- `input` - Single line text input
+- `textarea` - Multi-line text area
+- `number` - Numeric input
+- `email` - Email input with validation
+- `password` - Password input
+- `phone` - Phone number input
+- `url` - URL input
 
-| Type | Description | Key Props |
-|------|-------------|-----------|
-| `input` | Single-line text input | `placeholder`, `maxLength` |
-| `textarea` | Multi-line text area | `placeholder`, `rows` |
-| `number` | Numeric input | `min`, `max`, `step` |
-| `email` | Email input with validation | `placeholder` |
-| `password` | Password input (masked) | `placeholder` |
-| `phone` | Phone number input | `placeholder` |
-| `url` | URL input with validation | `placeholder` |
+### Date & Time
+- `date` - Date picker
+- `time` - Time picker
+- `daterange` - Date range picker
 
 ### Selection Fields
-
-| Type | Description | Key Props |
-|------|-------------|-----------|
-| `dropdown` | Single select dropdown | `options`, `optionsString` |
-| `checkbox` | Single checkbox | `defaultValue` |
-| `radio` | Radio button group | `options`, `optionsString` |
-| `toggle` | On/off toggle switch | `defaultValue` |
-| `multiselect` | Multi-select with tags | `options`, `multiSelectConfig` |
-
-### Date & Time Fields
-
-| Type | Description | Key Props |
-|------|-------------|-----------|
-| `date` | Date picker | `defaultValue` |
-| `time` | Time picker | `timeConfig.format` |
-| `daterange` | Date range picker | `dateRangeConfig` |
+- `dropdown` - Single select dropdown
+- `checkbox` - Checkbox field
+- `radio` - Radio button group
+- `toggle` - Toggle switch
+- `multiselect` - Multi-select with tags
 
 ### Advanced Fields
-
-| Type | Description | Key Props |
-|------|-------------|-----------|
-| `file` | File upload with drag-drop | `fileConfig` |
-| `signature` | Signature pad (canvas) | `signatureConfig` |
-| `rating` | Star rating | `ratingConfig.maxRating` |
-| `richtext` | Rich text editor | `richTextConfig` |
-| `autocomplete` | Autocomplete input | `autocompleteConfig`, `options` |
-| `slider` | Range slider | `min`, `max`, `step` |
-| `pattern` | Input masking | `patternConfig.format` |
-| `qrcode` | QR code display | `qrCodeConfig.value`, `qrCodeConfig.size` |
-| `table` | Data table input | `tableConfig` |
-| `color` | Color picker | `defaultValue` |
-
-### Static/Display Elements
-
-| Type | Description | Key Props |
-|------|-------------|-----------|
-| `header` | H1 heading | `label` |
-| `subheader` | H2/H3 heading | `label` |
-| `label` | Text label | `label` |
-| `paragraph` | Paragraph text | `label` |
-| `divider` | Horizontal divider | `dividerMargin` |
-| `spacer` | Vertical spacer | `spacerHeight` |
-| `image` | Image display | `imageUrl`, `imageWidth`, `imageHeight` |
-| `button` | Action button | `buttonConfig` |
-
-### Structure Elements
-
-| Type | Description | Key Props |
-|------|-------------|-----------|
-| `container` | Grouping container | `containerConfig` |
-| `row` | Grid row | - |
-
----
-
-## Field Props (FieldProps)
+- `file` - File upload with drag-drop
+- `signature` - Signature pad with canvas drawing
+- `rating` - Star rating (configurable max stars)
+- `slider` - Range slider with min/max
+- `color` - Color picker with hex input
+- `richtext` - Rich text editor
+- `autocomplete` - Autocomplete input
+- `pattern` - Pattern format input (phone, credit card, etc.)
+- `qrcode` - Static QR code display
+
+### Static Elements
+- `header` - Section header
+- `label` - Static label text
+- `paragraph` - Paragraph text
+- `divider` - Horizontal divider
+- `spacer` - Vertical spacer
+- `alert` - Alert/notification box
+- `image` - Image placeholder
+- `button` - Submit/reset/custom action buttons
+
+### Structure
+- `container` - Grouping element with nested rows/columns
+
+## Field Props
 
 ```typescript
 interface FieldProps {
-  key: string;                  // Unique field key (for form values)
-  label: string;                // Display label
-  placeholder?: string;         // Input placeholder
-  value?: any;                  // Current value
-  defaultValue?: any;           // Default value
-  helpText?: string;            // Help text below field
-  tooltip?: string;             // Tooltip on hover
+  key: string;              // Unique field key for form data
+  label?: string;           // Field label
+  placeholder?: string;     // Placeholder text
+  tooltip?: string;         // Help tooltip text
+  optionsString?: string;   // Options for dropdown/radio/checkbox (one per line)
   size?: 'small' | 'medium' | 'large';
-  containerWidth?: 'auto' | '25' | '33' | '50' | '66' | '75' | '100';
-  disabled?: boolean;           // Disable field
-  readOnly?: boolean;           // Read-only mode
-  hidden?: boolean;             // Hide field
-  autoFocus?: boolean;          // Auto-focus on mount
-  tabIndex?: number;            // Tab order
-  htmlAttributes?: Record<string, string>; // Custom HTML attributes
+  autoFocus?: boolean;
+  tabIndex?: number;        // Keyboard navigation order (positive = order, -1 = skip, 0 = natural order)
+  htmlAttributes?: Record<string, string>;
   
-  // Options for selection fields
-  options?: Array<{ label: string; value: string }>;
-  optionsString?: string[];     // Simple string array for options
+  // Button specific
+  buttonConfig?: {
+    buttonType: 'submit' | 'reset' | 'button';
+    variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+    actionType?: 'submit' | 'reset' | 'navigate' | 'custom';
+    navigateUrl?: string;
+    customAction?: string;
+  };
   
-  // Field-specific configs
-  fileConfig?: FileUploadConfig;
-  ratingConfig?: RatingConfig;
-  autocompleteConfig?: AutocompleteConfig;
-  richTextConfig?: RichTextConfig;
-  dateRangeConfig?: DateRangeConfig;
-  timeConfig?: TimeConfig;
-  signatureConfig?: SignatureConfig;
-  multiSelectConfig?: MultiSelectConfig;
-  patternConfig?: PatternConfig;
-  buttonConfig?: ButtonConfig;
-  qrCodeConfig?: QRCodeConfig;
-  containerConfig?: ContainerConfig;
-  tableConfig?: TableConfig;
+  // Pattern format specific
+  patternConfig?: {
+    format: 'phone' | 'creditCard' | 'date' | 'ssn' | 'custom';
+    mask?: string;
+    customPattern?: string;
+  };
   
-  // Layout
-  spacerHeight?: number;        // For spacer type
-  dividerMargin?: number;       // For divider type
-  imageUrl?: string;            // For image type
-  imageWidth?: string;
-  imageHeight?: string;
-}
-```
-
----
-
-## Validation Rules
-
-```typescript
-interface Validation {
-  required?: boolean;           // Field is required
-  minLength?: number;           // Minimum text length
-  maxLength?: number;           // Maximum text length
-  min?: number;                 // Minimum numeric value
-  max?: number;                 // Maximum numeric value
-  pattern?: string;             // Regex pattern
-  errorMessage?: string;        // Custom error message
-  customValidation?: string;    // Custom validation code
-  validationType?: 'email' | 'url' | 'phone' | 'creditCard' | 'custom';
-  autoValidate?: boolean;       // Validate automatically
-  validateOnBlur?: boolean;     // Validate on blur
-  validateOnChange?: boolean;   // Validate on change
-}
-```
-
-**Example:**
-```json
-{
-  "validation": {
-    "required": true,
-    "minLength": 3,
-    "maxLength": 100,
-    "pattern": "^[a-zA-Z]+$",
-    "errorMessage": "Only letters allowed, 3-100 characters"
-  }
+  // QR Code specific
+  qrCodeConfig?: {
+    value: string;
+    size: number;
+  };
+  
+  // Container specific
+  containerConfig?: {
+    rows: ContainerRow[];
+    gap?: number;
+    padding?: number;
+    borderStyle?: 'none' | 'solid' | 'dashed';
+  };
+  
+  // Rating specific
+  maxRating?: number;
+  
+  // Slider specific
+  min?: number;
+  max?: number;
+  step?: number;
 }
 ```
 
----
-
-## Conditional Logic
-
-Show, hide, enable, disable, or require fields based on other field values:
-
-```typescript
-interface ConditionalLogic {
-  enabled: boolean;             // Enable/disable conditional logic
-  action: 'show' | 'hide' | 'enable' | 'disable' | 'require';
-  logicType: 'all' | 'any';     // Match all or any condition
-  conditions: Condition[];
-}
+## Tab Index Usage
 
-interface Condition {
-  fieldKey: string;             // Key of field to check
-  operator: ConditionOperator;  // Comparison operator
-  value?: any;                  // Value to compare against
-}
+The `tabIndex` property controls keyboard navigation order when users press Tab to move between form fields:
 
-type ConditionOperator = 
-  | 'equals' 
-  | 'notEquals' 
-  | 'contains' 
-  | 'notContains'
-  | 'greaterThan' 
-  | 'lessThan' 
-  | 'greaterThanOrEqual' 
-  | 'lessThanOrEqual'
-  | 'isEmpty' 
-  | 'isNotEmpty' 
-  | 'startsWith' 
-  | 'endsWith';
-```
+| Value | Behavior |
+|-------|----------|
+| Positive (1, 2, 3...) | Field is focused in order from lowest to highest tabIndex |
+| 0 | Field follows natural DOM order |
+| -1 | Field is skipped during Tab navigation |
 
-**Example: Show field when another field equals "yes":**
-```json
-{
-  "conditionalLogic": {
-    "enabled": true,
-    "action": "show",
-    "logicType": "all",
-    "conditions": [
-      {
-        "fieldKey": "has_experience",
-        "operator": "equals",
-        "value": "yes"
-      }
-    ]
-  }
-}
-```
+**Example:** To create a custom tab order:
+- First Name: tabIndex = 1
+- Email: tabIndex = 2  
+- Last Name: tabIndex = 3
+- Phone: tabIndex = 4
 
----
+When user presses Tab, they'll move: First Name → Email → Last Name → Phone
 
-## Multi-Step Forms
+**Important:** tabIndex only works in **Preview Mode**. In editor mode, fields don't receive focus in the same way.
 
-Enable wizard-style forms with multiple steps:
+## Validation
 
 ```typescript
-interface Step {
-  id: string;
-  title: string;                // Step title
-  description?: string;         // Step description
-  icon?: string;                // Lucide icon name
-  rows: FormRow[];              // Rows in this step
-  validation?: {
-    validateOnNext?: boolean;   // Validate before next step
-    allowSkip?: boolean;        // Allow skipping this step
-  };
+interface FieldValidation {
+  required?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  min?: number;
+  max?: number;
+  pattern?: string;
+  customMessage?: string;
 }
 ```
 
-**Example Multi-Step Form:**
-```json
-{
-  "id": "registration-form",
-  "name": "User Registration",
-  "isMultiStep": true,
-  "steps": [
-    {
-      "id": "step-1",
-      "title": "Personal Info",
-      "description": "Enter your personal details",
-      "rows": [...]
-    },
-    {
-      "id": "step-2", 
-      "title": "Contact",
-      "description": "How can we reach you?",
-      "rows": [...]
-    },
-    {
-      "id": "step-3",
-      "title": "Preferences",
-      "validation": { "allowSkip": true },
-      "rows": [...]
-    }
-  ],
-  "rows": []
-}
-```
-
----
-
-## Container Fields
-
-Containers allow nested layouts with their own grid system:
+## Conditional Logic
 
 ```typescript
-interface ContainerConfig {
-  direction?: 'row' | 'column';
-  gap?: number;                 // Gap between items
-  padding?: number;             // Internal padding
-  background?: string;          // Background color
-  border?: boolean;             // Show border
-  flexWrap?: 'wrap' | 'nowrap';
-  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-  fieldSize?: 'compact' | 'normal' | 'comfortable';
-  rows?: ContainerRow[];        // Nested rows structure
-}
-
-interface ContainerRow {
-  id: string;
-  width: number;                // 1-12 grid width
-  height?: number;              // 40-500 pixels or auto
-  columns: ContainerColumn[];
+interface ConditionalLogic {
+  enabled: boolean;
+  action: 'show' | 'hide' | 'enable' | 'disable' | 'require';
+  conditions: Condition[];
+  logicOperator: 'and' | 'or';
 }
 
-interface ContainerColumn {
-  id: string;
-  width: number;                // 1-12 grid width
-  fieldId?: string;             // ID of field in this column
-  fields?: FormField[];         // Fields in this column
+interface Condition {
+  fieldKey: string;
+  operator: 'equals' | 'notEquals' | 'contains' | 'notContains' | 
+            'greaterThan' | 'lessThan' | 'isEmpty' | 'isNotEmpty';
+  value: string;
 }
 ```
 
----
-
 ## Custom Styling
 
-Per-field CSS customization:
-
 ```typescript
 interface CustomStyle {
-  className?: string;           // Additional CSS class
+  containerClassName?: string;  // CSS class for field container
   labelClassName?: string;      // CSS class for label
-  inputClassName?: string;      // CSS class for input
-  containerClassName?: string;  // CSS class for container
-  css?: string;                 // Custom inline CSS
-  wrapperCss?: string;          // Wrapper element CSS
-  deviceTarget?: 'any' | 'mobile' | 'tablet' | 'desktop';
-  width?: { value?: number; unit?: string };
-  height?: string;
-  marginTop?: string;
-  marginRight?: string;
-  marginBottom?: string;
-  marginLeft?: string;
-  color?: string;
-  backgroundColor?: string;
-}
-```
-
-**Example:**
-```json
-{
-  "customStyle": {
-    "containerClassName": "my-field-wrapper",
-    "labelClassName": "text-lg font-bold",
-    "inputClassName": "border-2 border-blue-500",
-    "backgroundColor": "#f0f0f0"
-  }
+  inputClassName?: string;      // CSS class for input element
+  css?: string;                 // Custom CSS (applied inline)
 }
 ```
 
----
+## Actions System
 
-## Events & Actions
-
-Define event handlers for field interactions:
+Each field can have event handlers:
 
 ```typescript
-interface FieldEvents {
-  onClick?: EventAction[];
-  onChange?: EventAction[];
-  onFocus?: EventAction[];
-  onBlur?: EventAction[];
-  onMount?: EventAction[];
-  onUnmount?: EventAction[];
+interface FieldActions {
+  onClick?: FieldAction;
+  onChange?: FieldAction;
+  onFocus?: FieldAction;
+  onBlur?: FieldAction;
 }
 
-interface EventAction {
-  type: 'common' | 'code' | 'custom';
-  name: string;                 // Action name
-  code?: string;                // JavaScript code (for code type)
-  args?: Record<string, any>;   // Action arguments
+interface FieldAction {
+  type: 'showMessage' | 'hideField' | 'showField' | 'clearField' | 
+        'setFieldValue' | 'focusField' | 'submitForm' | 'custom' | 'code';
+  args?: {
+    message?: string;
+    targetFieldKey?: string;
+    value?: string;
+    code?: string;
+  };
 }
 ```
 
----
-
-## Submission Config
-
-Configure form submission behavior:
+## Multi-Step Forms
 
 ```typescript
-interface SubmissionConfig {
-  enabled: boolean;
-  webhookUrl?: string;          // Webhook endpoint
-  webhookMethod?: 'POST' | 'PUT' | 'PATCH';
-  webhookHeaders?: Record<string, string>;
-  emailNotification?: {
-    enabled?: boolean;
-    to?: string[];
-    subject?: string;
-    template?: string;
-  };
-  apiEndpoint?: {
-    url?: string;
-    method?: 'POST' | 'PUT' | 'PATCH';
-    headers?: Record<string, string>;
+interface FormStep {
+  id: string;
+  title: string;
+  description?: string;
+  order: number;
+  rows: FormRow[];
+  validation?: {
+    validateOnNext?: boolean;
+    allowSkip?: boolean;
   };
-  redirectUrl?: string;         // Redirect after submit
-  successMessage?: string;      // Success message
-  errorMessage?: string;        // Error message
-}
-```
-
----
-
-## Zustand Store API
-
-Access and manipulate form state programmatically:
-
-```tsx
-import { useFormStore } from '@enerjisaformlibrary/formbuilder-react';
-
-function MyComponent() {
-  const {
-    // State
-    form,                       // Current FormSchema
-    selection,                  // Selected element
-    previewMode,                // Preview mode state
-    formValues,                 // Form values (in preview)
-    
-    // Form Actions
-    loadForm,                   // Load form schema
-    setFormName,                // Set form name
-    resetForm,                  // Reset to empty form
-    
-    // Row Actions
-    addRow,                     // Add empty row
-    addRowWithField,            // Add row with a field
-    updateRow,                  // Update row properties
-    deleteRow,                  // Delete row
-    moveRow,                    // Move/reorder row
-    
-    // Column Actions
-    addColumn,                  // Add column to row
-    updateColumn,               // Update column properties
-    deleteColumn,               // Delete column
-    
-    // Field Actions
-    addField,                   // Add field to column
-    updateField,                // Update field properties
-    deleteField,                // Delete field
-    moveField,                  // Move field between columns
-    
-    // Container Actions
-    addFieldToContainer,        // Add field to container column
-    addFieldToContainerDirect,  // Add field to container
-    
-    // Selection
-    setSelection,               // Set selected element
-    clearSelection,             // Clear selection
-    
-    // Preview
-    setPreviewMode,             // Toggle preview mode
-    setFormValue,               // Set field value in preview
-    
-    // Multi-step
-    addStep,                    // Add wizard step
-    updateStep,                 // Update step
-    deleteStep,                 // Delete step
-    moveStep,                   // Reorder step
-    setCurrentStep,             // Navigate to step
-    
-    // Version Control
-    saveVersion,                // Save form version
-    restoreVersion,             // Restore previous version
-    
-    // Undo/Redo
-    undo,                       // Undo last action
-    redo,                       // Redo undone action
-    canUndo,                    // Check if undo available
-    canRedo,                    // Check if redo available
-    
-  } = useFormStore();
-  
-  // Example: Get current form JSON
-  const formJson = JSON.stringify(form, null, 2);
-  
-  // Example: Load existing form
-  useEffect(() => {
-    loadForm(existingFormData);
-  }, []);
 }
 ```
 
----
-
-## TypeScript Types
-
-All types are exported for TypeScript usage:
-
-```typescript
-import type {
-  // Core Types
-  FormSchema,
-  FormField,
-  FormRow,
-  FormColumn,
-  Step,
-  
-  // Field Configuration
-  FieldProps,
-  Validation,
-  ConditionalLogic,
-  Condition,
-  ConditionOperator,
-  CustomStyle,
-  ResponsiveWidth,
-  FieldEvents,
-  EventAction,
-  
-  // Field-Specific Configs
-  FileUploadConfig,
-  RatingConfig,
-  AutocompleteConfig,
-  SignatureConfig,
-  PatternConfig,
-  ButtonConfig,
-  QRCodeConfig,
-  ContainerConfig,
-  TableConfig,
-  
-  // Form Settings
-  FormSettings,
-  SubmissionConfig,
-  FormVersion,
-  Localization,
-  ComputedField,
-  
-  // Selection
-  Selection,
-  SelectionType,
-  
-  // Field Type Constants
-  FieldType,
-  StructureType,
-  StaticType,
-} from '@enerjisaformlibrary/formbuilder-react';
-```
-
----
-
-## Complete JSON Example
-
-Here's a complete form with various field types:
+## Example: Complete Form Schema
 
 ```json
 {
-  "id": "contact-form-001",
+  "id": "contact-form",
   "name": "Contact Form",
-  "description": "A sample contact form",
   "isMultiStep": false,
+  "currentVersion": 1,
   "rows": [
     {
       "id": "row-1",
@@ -735,9 +320,10 @@ Here's a complete form with various field types:
               "id": "field-1",
               "type": "input",
               "props": {
-                "key": "first_name",
+                "key": "firstName",
                 "label": "First Name",
-                "placeholder": "Enter your first name"
+                "placeholder": "Enter your first name",
+                "tabIndex": 1
               },
               "validation": {
                 "required": true,
@@ -754,9 +340,10 @@ Here's a complete form with various field types:
               "id": "field-2",
               "type": "input",
               "props": {
-                "key": "last_name",
+                "key": "lastName",
                 "label": "Last Name",
-                "placeholder": "Enter your last name"
+                "placeholder": "Enter your last name",
+                "tabIndex": 2
               },
               "validation": {
                 "required": true
@@ -779,11 +366,12 @@ Here's a complete form with various field types:
               "props": {
                 "key": "email",
                 "label": "Email Address",
-                "placeholder": "you@example.com"
+                "placeholder": "you@example.com",
+                "tooltip": "We'll never share your email",
+                "tabIndex": 3
               },
               "validation": {
-                "required": true,
-                "validationType": "email"
+                "required": true
               }
             }
           ]
@@ -801,17 +389,10 @@ Here's a complete form with various field types:
               "id": "field-4",
               "type": "dropdown",
               "props": {
-                "key": "inquiry_type",
-                "label": "Inquiry Type",
-                "options": [
-                  { "label": "General Question", "value": "general" },
-                  { "label": "Technical Support", "value": "support" },
-                  { "label": "Sales", "value": "sales" },
-                  { "label": "Other", "value": "other" }
-                ]
-              },
-              "validation": {
-                "required": true
+                "key": "country",
+                "label": "Country",
+                "optionsString": "USA\nCanada\nUK\nGermany\nFrance\nOther",
+                "tabIndex": 4
               }
             }
           ]
@@ -831,23 +412,13 @@ Here's a complete form with various field types:
               "props": {
                 "key": "message",
                 "label": "Message",
-                "placeholder": "Type your message here..."
+                "placeholder": "How can we help you?",
+                "tabIndex": 5
               },
               "validation": {
                 "required": true,
                 "minLength": 10,
-                "maxLength": 1000
-              },
-              "conditionalLogic": {
-                "enabled": true,
-                "action": "show",
-                "logicType": "all",
-                "conditions": [
-                  {
-                    "fieldKey": "inquiry_type",
-                    "operator": "isNotEmpty"
-                  }
-                ]
+                "maxLength": 500
               }
             }
           ]
@@ -863,36 +434,14 @@ Here's a complete form with various field types:
           "fields": [
             {
               "id": "field-6",
-              "type": "checkbox",
-              "props": {
-                "key": "agree_terms",
-                "label": "I agree to the terms and conditions"
-              },
-              "validation": {
-                "required": true,
-                "errorMessage": "You must agree to continue"
-              }
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "id": "row-6",
-      "columns": [
-        {
-          "id": "col-7",
-          "width": 12,
-          "fields": [
-            {
-              "id": "field-7",
               "type": "button",
               "props": {
-                "key": "submit_btn",
+                "key": "submit",
                 "label": "Submit",
                 "buttonConfig": {
-                  "action": "submit",
-                  "variant": "default"
+                  "buttonType": "submit",
+                  "variant": "primary",
+                  "actionType": "submit"
                 }
               }
             }
@@ -900,192 +449,65 @@ Here's a complete form with various field types:
         }
       ]
     }
-  ],
-  "submissionConfig": {
-    "enabled": true,
-    "webhookUrl": "https://api.example.com/forms/submit",
-    "webhookMethod": "POST",
-    "successMessage": "Thank you! Your message has been sent.",
-    "redirectUrl": "/thank-you"
-  },
-  "settings": {
-    "defaultLanguage": "en",
-    "layout": {
-      "labelPosition": "top",
-      "spacing": "normal"
-    }
-  }
+  ]
 }
 ```
 
----
-
-## Extracting Form Values
+## Integration with JetDesk
 
-When rendering this form to end users, you'll need to:
-
-1. **Parse the JSON** to get field structure
-2. **Render fields** based on their `type`
-3. **Collect values** using field `props.key` as the key
-4. **Apply validation** from `validation` object
-5. **Handle conditional logic** to show/hide fields
+```tsx
+import { FormBuilder } from '@enerjisaformlibrary/formbuilder-react';
+import '@enerjisaformlibrary/formbuilder-react/styles.css';
 
-**Expected form values output:**
-```json
-{
-  "first_name": "John",
-  "last_name": "Doe",
-  "email": "john@example.com",
-  "inquiry_type": "support",
-  "message": "I need help with...",
-  "agree_terms": true
-}
-```
+function FormEditor({ formId }) {
+  const [initialSchema, setInitialSchema] = useState(null);
 
-**Iterating through fields:**
-```typescript
-function extractFieldsFromForm(form: FormSchema): FormField[] {
-  const fields: FormField[] = [];
-  
-  const processRows = (rows: FormRow[]) => {
-    for (const row of rows) {
-      for (const column of row.columns) {
-        for (const field of column.fields) {
-          fields.push(field);
-          
-          // Handle container fields (nested)
-          if (field.type === 'container' && field.props.containerConfig?.rows) {
-            for (const containerRow of field.props.containerConfig.rows) {
-              for (const containerCol of containerRow.columns) {
-                if (containerCol.fields) {
-                  fields.push(...containerCol.fields);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
+  useEffect(() => {
+    // Load existing form from database
+    fetch(`/api/forms/${formId}`)
+      .then(res => res.json())
+      .then(data => setInitialSchema(data.schema));
+  }, [formId]);
+
+  const handleSave = async (schema) => {
+    await fetch(`/api/forms/${formId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ schema })
+    });
   };
-  
-  if (form.isMultiStep && form.steps) {
-    for (const step of form.steps) {
-      processRows(step.rows);
-    }
-  } else {
-    processRows(form.rows);
-  }
-  
-  return fields;
-}
-
-// Get field keys for form values
-const fields = extractFieldsFromForm(formSchema);
-const fieldKeys = fields
-  .filter(f => !['header', 'subheader', 'label', 'paragraph', 'divider', 'spacer', 'image', 'button'].includes(f.type))
-  .map(f => f.props.key);
-```
-
----
 
-## Responsive Width
+  if (!initialSchema) return <div>Loading...</div>;
 
-Fields support responsive grid widths:
-
-```typescript
-interface ResponsiveWidth {
-  mobile?: number;   // 1-12 columns on mobile
-  tablet?: number;   // 1-12 columns on tablet
-  desktop?: number;  // 1-12 columns on desktop
-}
-```
-
-**Example:**
-```json
-{
-  "responsiveWidth": {
-    "mobile": 12,
-    "tablet": 6,
-    "desktop": 4
-  }
-}
-```
-
----
-
-## Version History
-
-The form supports versioning:
-
-```typescript
-interface FormVersion {
-  id: string;
-  version: number;
-  createdAt: string;      // ISO date
-  createdBy?: string;     // User identifier
-  changelog?: string;     // Description of changes
-  snapshot: FormSchema;   // Complete form state
+  return (
+    <FormBuilder
+      initialSchema={initialSchema}
+      onSave={handleSave}
+    />
+  );
 }
 ```
 
----
+## Keyboard Shortcuts
 
-## Localization
+- **Ctrl/Cmd + Z**: Undo
+- **Ctrl/Cmd + Shift + Z**: Redo
 
-Multi-language support per field:
+## Browser Support
 
-```typescript
-interface Localization {
-  translations?: Record<string, {
-    label?: string;
-    placeholder?: string;
-    helpText?: string;
-    errorMessages?: Record<string, string>;
-  }>;
-}
-```
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
 
-**Example:**
-```json
-{
-  "localization": {
-    "translations": {
-      "tr": {
-        "label": "Ad",
-        "placeholder": "Adınızı girin"
-      },
-      "de": {
-        "label": "Vorname",
-        "placeholder": "Geben Sie Ihren Vornamen ein"
-      }
-    }
-  }
-}
-```
-
----
+## Changelog
 
-## Supported Languages
-
-```typescript
-const SUPPORTED_LANGUAGES = [
-  { code: 'en', name: 'English' },
-  { code: 'tr', name: 'Turkish' },
-  { code: 'de', name: 'German' },
-  { code: 'fr', name: 'French' },
-  { code: 'es', name: 'Spanish' },
-  { code: 'pt', name: 'Portuguese' },
-  { code: 'it', name: 'Italian' },
-  { code: 'nl', name: 'Dutch' },
-  { code: 'ru', name: 'Russian' },
-  { code: 'zh', name: 'Chinese' },
-  { code: 'ja', name: 'Japanese' },
-  { code: 'ko', name: 'Korean' },
-  { code: 'ar', name: 'Arabic' },
-];
-```
+### 1.0.22
+- Fixed: tabIndex now properly applied to all interactive field types (dropdown, checkbox, radio, toggle, slider, autocomplete, daterange)
 
----
+### 1.0.21
+- Added: Comprehensive undo/redo functionality with 50-state history
+- Each form modification creates a separate history entry
 
 ## License