Feature/migrate forms list form builder to react#1827
Open
arifulhoque7 wants to merge 4 commits intoweDevsOfficial:developfrom
Open
Feature/migrate forms list form builder to react#1827arifulhoque7 wants to merge 4 commits intoweDevsOfficial:developfrom
arifulhoque7 wants to merge 4 commits intoweDevsOfficial:developfrom
Conversation
Introduce a React-based admin Form Builder and Forms List UI. Adds a large set of React components (canvas, column/repeat fields, sortable fields, previews, settings, sidebar, common utilities like Tooltip/Toast/TextEditor/ProFeatureAlert), hooks, store (actions/reducer/selectors), utils, extension registry, and tests configuration (jest + mocks). Adds webpack configs, forms-list app, new CSS, and integrates with PHP by updating admin views and assets. Updates Gruntfile to watch/build the React sources and add npm build tasks. These changes prepare the new React UI and test setup for the form builder and forms list.
Remove Vue 2.x components, mixins, LESS stylesheets, JS templates, and forms list Vue SPA that have been replaced by the React migration. Update Gruntfile.js to remove references to deleted assets.
- Fix Save Form button on settings page by using useFormSave hook instead of clicking non-existent #wpuf-form-builder-save-form element - Enable wp.hooks filter for field dependencies so Pro can register conditional visibility rules for multistep sub-settings
Introduce a SweetAlert2 wrapper (common/SwalModal.js) providing showAlert and showConfirm helpers. Add client-side validation to useFormSave: import showAlert, fetch formType from store, and validate required fields and payment settings (new helpers isOn, hasFieldTemplate, validateRequiredFields, validatePaymentSettings) to block invalid saves with user-friendly modals. Update SettingsSection to fallback to PHP-defined default (fieldDef.value) when a setting is undefined. Enhance PicRadioField to use asset_url and render a green checked icon overlay for the selected option.
|
Important Review skippedToo many files! This PR contains 255 files, which is 105 over the limit of 150. ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (4)
📒 Files selected for processing (255)
You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Migrate Forms List & Form Builder to React
Branch:
feature/migrate-forms-list-form-builder-to-reactAffects:
wp-user-frontend(free) +wpuf-pro(pro)Related PRO PR
Summary
This PR migrates the Forms List and Form Builder admin UIs from the legacy Vue 2 + jQuery architecture to a modern React + WordPress Data Store architecture. The old Vue-based components, Less stylesheets, and bundled JS files have been removed and replaced with a clean React implementation using webpack, Tailwind CSS, and the WordPress
@wordpress/dataand@wordpress/hooksAPIs.Detailed Changes
🆕 New: React Form Builder (
admin/form-builder/src/)A complete React rewrite of the form builder with the following modules:
Core Components
FormBuilder.jsx— Root component wiring canvas, sidebar, header, and settingsHeader/Header.jsx— Top bar with form name editing, save, and navigation actionsCanvas/BuilderCanvas.jsx— Drag-and-drop field canvas (using@dnd-kit)Canvas/SortableField.jsx— Individual sortable field wrapperCanvas/FieldActions.jsx— Per-field clone/delete/move actionsCanvas/ColumnField.jsx— Column layout field supportCanvas/RepeatField.jsx— Repeatable field group supportCanvas/EmptyState.jsx— Empty canvas placeholderSidebar
Sidebar/Sidebar.jsx— Field panel + searchSidebar/FieldPanel.jsx— Grouped field listing (Basic, Advanced, etc.)Sidebar/FieldItem.jsx— Draggable field item with Pro badge supportSidebar/FieldSearch.jsx— Real-time field search/filterField Previews (all free fields)
CheckboxPreview,RadioPreview,DropdownPreview,TextFieldPreview,TextareaPreview,EmailPreview,PasswordPreview,PostTitlePreview,PostContentPreview,PostExcerptPreview,PostTagsPreview,TaxonomyPreview,ImageUploadPreview,FeaturedImagePreview,MultiSelectPreview,SectionBreakPreview,TurnstilePreview,RecaptchaPreview,TextEditorPreview,HiddenFieldPreview,CustomHtmlPreview,WebsiteUrlPreview,ColumnFieldPreview,HelpTextField Settings Panel
FieldSettings/FieldOptionsPanel.jsx— Dynamic settings panel driven by field configFieldSettings/SettingInput.jsx— Routes each setting to the appropriate input componentTextInput,TextareaInput,CheckboxInput,RadioInput,SelectInput,MultiSelectInput,RangeInput,IconSelectorInput,OptionDataInput,VisibilityInput,TextMetaInput,HtmlHelpText,SettingHelpTextForm Settings
Settings/FormSettings.jsx— Multi-tab settings panel (General, Notifications, Integrations, etc.)Settings/SettingsSection.jsx— Section renderer driven by PHP-registered configSettings/SettingsField.jsx— Individual setting field rendererSettings/SettingsNav.jsx— Tab navigationSettings/NotificationSection.jsx— Email notification settingsSettings/ProPreviewWrapper.jsx— Pro feature lock overlaySettings/ModulesEmptyState.jsx— Empty state when modules are inactiveSettings/useFieldDependencies.js— Hook for conditional field visibilityTextField,TextareaField,CheckboxField,SelectField,MultiSelectField,ToggleField,NumberField,DateField,ColorPickerField,PicRadioField,InlineFieldsGroup,TrailingTextField,HelpTextIconConditional Logic
ConditionalLogic/FieldConditionalLogic.jsx— Per-field conditional rulesConditionalLogic/SubmitConditionalLogic.jsx— Submit button conditional rulesConditionalLogic/IntegrationConditionalLogic.jsx— Integration-level conditionsConditionalLogic/ConditionRow.jsx— Single condition rule rowConditionalLogic/conditionalUtils.js— Shared condition evaluation helpersIntegrations Tab
Integrations/IntegrationsTab.jsx— Lists and renders active integration settingsState Management (WordPress Data Store)
store/index.js— Store registrationstore/actions.js— Action creators (add/remove/reorder fields, update settings, etc.)store/selectors.js— Memoised selectorsstore/reducer.js— Pure reducer for all builder statestore/serialization.js— Form data serialization/deserializationstore/selectors.test.js,store/serialization.test.js— Unit tests (Jest)Extension API
extensions/hooks.js— WordPress hook integration (addFilter,applyFilters,addAction,doAction)extensions/registry.js— Field and settings section registry for extensibilityCommon Utilities
common/SwalModal.js— SweetAlert2-based confirmation modalcommon/ProFeatureAlert.jsx— Pro upgrade prompt componentcommon/TextEditor.jsx— TinyMCE-based rich text wrappercommon/Toast.jsx— Toast notification helpercommon/Tooltip.jsx— Tooltip wrapperutils/canvasHelpers.js— Drag-and-drop canvas utility functionsutils/fieldUtils.js— Field config helpersutils/globalHelpers.js— General-purpose helpersutils/i18n.js—__()wrapper🆕 New: React Forms List (
admin/forms-list/src/)A full React replacement for the Vue-based forms list page:
FormsListApp.jsx— Root componentcomponents/FormsList.jsx— Main list with search, filter, sort, bulk actionscomponents/FormsTable.jsx— Table rows renderercomponents/Header.jsx— Page header with "Add New" button and AI config triggercomponents/StatusTabs.jsx— All / Published / Draft / Trash tabscomponents/SearchBar.jsx— Live search inputcomponents/Pagination.jsx— Page controlscomponents/ActionMenu.jsx— Per-row action dropdown (Edit, Duplicate, Trash, etc.)components/BulkActions.jsx— Select-all + bulk action toolbarcomponents/EmptyState.jsx— Empty list illustration + CTAcomponents/ShortcodeCopy.jsx— One-click shortcode copy with clipboard feedbackcomponents/AIConfigModal.jsx— AI form builder configuration modal triggerhooks/useFormsFetch.js— Data fetching hook with cachinghooks/useClipboard.js— Clipboard copy hookutils/constants.js— Shared constants (statuses, per-page options, etc.)🆕 New: Pro Extensions (
wpuf-pro)Pro Field Previews
New React components for all Pro-only field previews in
admin/form-builder/src/components/FieldPreview/:AddressPreview,CountryListPreview,DatePreview,DateOfBirthPreview,FileUploadPreview,GoogleMapPreview,MathCaptchaPreview,NumericPreview,PhonePreview,RepeatPreview,SignaturePreview,StepStartPreview,AvatarPreview,CoverPhotoPreview,DisplayNamePreview,FirstNamePreview,LastNamePreview,NicknamePreview,PasswordPreview,EmbedPreview,FacebookUrlPreview,InstagramUrlPreview,LinkedinUrlPreview,GenderPreview,PriceFieldPreview,PricingCheckboxPreview,PricingDropdownPreview,PricingMultiselectPreview,CartTotalPreview,ActionHookPreview,SecondaryEmailPreviewPro Field Setting Inputs
New React input components for Pro-specific settings options:
AddressInput,BulkAddOptionsInput,CanvasHeightInput,CanvasWidthInput,ConditionalLogicInput,CountryListInput,DropdownInput,GmapSetPositionInput,MathCaptchaInput,OptionDataPriceInput,RepeaterColumnsInput,StepStartInputPro Forms List Extensions
admin/forms-list/src/filters.jsx— Pro-specific filters (e.g. User Role Badge column)admin/forms-list/src/components/UserRoleBadge.jsx— Displays assigned user role on registration formsadmin/forms-list/src/index.jsx— Pro entrypoint that registers filtersPro Form Builder Entry
admin/form-builder/src/index.jsx— Pro entrypoint that registers Pro fields, settings tabs, and hooks into the free builder via the extension APIValidation
admin/form-builder/src/hooks/useProfileFormValidation.js— Profile form-specific client-side validation hook🗑️ Removed: Legacy Vue/Less Files
Free plugin removed:
assets/js/forms-list.js/forms-list.min.js/forms-list.min.js.mapassets/js/components/FormsList.vueassets/js/wpuf-form-builder.js,wpuf-form-builder-components.js,wpuf-form-builder-mixins.js,wpuf-form-builder-wpuf-forms.jsassets/js-templates/form-components.phpadmin/form-builder/assets/js/components/Vue component directoriesadmin/form-builder/assets/less/Less stylesheets and mixinsadmin/form-builder/assets/js/mixins/Vue mixin filesadmin/form-builder/assets/js/form-builder.js,form-builder-assets.js,jquery-siaf-*.jsPro plugin removed:
assets/js/forms-list.js/forms-list.min.js/forms-list.min.js.mapassets/js/components/FormsList.vueassets/js/wpuf-form-builder-components-pro.js,wpuf-form-builder-mixins-pro.js,wpuf-form-builder-wpuf-forms-pro.js,wpuf-form-builder-wpuf-profile.js,wpuf-form-builder-field-option-data-pro.jsassets/js-templates/form-components.phpadmin/form-builder/assets/js/components/Pro Vue component directories⚙️ Build System Updates
Free plugin:
admin/form-builder/webpack.config.js— New webpack config for React form builder bundleadmin/forms-list/webpack.config.js— New webpack config for React forms list bundleadmin/form-builder/jest.config.js— Jest setup for unit testsadmin/form-builder/src/__mocks__/— WordPress package mocks for Jestpackage.json— Added React,@dnd-kit,@wordpress/data,@wordpress/hooks,sweetalert2, Jest, and webpack dependencies; removed Vue-related packagesGruntfile.js— Updated build tasks to use new webpack bundlestailwind.config.js— Updated content paths for React source filesvite.config.mjs— Updated to exclude new React build targetspostcss.config.js— Minor updatePro plugin:
admin/form-builder/webpack.config.js— Pro webpack config extending the free builderadmin/forms-list/webpack.config.js— Pro forms list webpack configpackage.json— Updated dependenciestailwind.config.js— Updated content paths🐛 Bug Fixes Included
enableMultiStep)🔧 PHP Side Changes
Free plugin:
includes/Admin/Forms/Admin_Form_Builder.php— Updated to enqueue React form builder assets and pass correct localized data (wpuf_form_builder)includes/Admin/Menu.php— Minor update to asset handlesincludes/Ajax/Admin_Form_Builder_Ajax.php— Minor adjustment for new asset handle referencesincludes/Assets.php— Registers React forms list and form builder asset bundlesadmin/form-builder/views/form-builder-v4.1.php— Updated mount point and data attributes for React appsrc/css/admin/form-builder.css/src/css/forms-list.css— CSS updates for React componentsassets/images/warning-circle.svg— New icon assetPro plugin:
includes/Admin/Menu.php— Updated Pro menu asset registrationincludes/Admin/Profile_Form.php— Updated to pass Pro field definitions to the React builderincludes/Admin/Posting_Profile.php— Minor hook adjustmentincludes/Admin/FormBuilder/Render_Form.php— Pass additional data for Pro fieldsincludes/Post_Form.php— Pass Pro post form field configincludes/Assets.php— Registers Pro React bundlesadmin/form-builder/views/profile-form-settings.php— Minor update for React mountingStats
wp-user-frontendwpuf-proTesting Checklist
npm run build, webpack) produce correct outputnpm test)