feat: build React Form Builder (F2.7-F2.10)

Components:
- FieldPalette: drag-and-drop source for all field types
- FormCanvas: drop target with field list, reordering, CRUD
- FormField: individual field component with actions
- FieldSettingsPanel: edit field properties (label, ID, options, etc.)
- FormFieldOptions: manage select/radio/checkbox options
- FormPreview: live preview of rendered form
- FormFieldPreview: preview individual field types

Features:
- 16 field types (text, email, select, checkbox, radio, etc.)
- Categorized field palette
- Drag-and-drop field reordering
- Per-field settings panel
- Option management for choice fields
- Live form preview
- Save via AJAX

Config:
- fieldTypes.js: field definitions and constants
- Generate unique field IDs
- Field type categories (input, choice, layout, preset, advanced)
This commit is contained in:
dwindown
2026-04-18 11:34:13 +07:00
parent 9b2538bdd9
commit ec1f01ef24
18 changed files with 1434 additions and 4 deletions

View File

@@ -1,14 +1,32 @@
/**
* Forms Page - Placeholder
* Forms Page - List view and Form Builder
*/
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import FormBuilder from '../components/formBuilder/FormBuilder';
export default function FormsPage({ initialData }) {
const [isBuilder, setIsBuilder] = useState(false);
const [selectedFormId, setSelectedFormId] = useState(null);
if (isBuilder) {
return (
<div className="formipay-page-forms">
<FormBuilder
formId={selectedFormId}
initialData={initialData}
/>
</div>
);
}
return (
<div className="formipay-page-formipay-page">
<h1>{ __('Forms', 'formipay') }</h1>
<p>{ __('Page content coming soon...', 'formipay') }</p>
<div className="formipay-page-forms">
<div className="formipay-forms-list">
<h1>{ __('Forms', 'formipay') }</h1>
<p>{ __('Forms list coming soon. Use the classic editor for now.', 'formipay') }</p>
</div>
</div>
);
}