Refactor: remove ClassicEditor from window.givewp.form.components and use the new @givewp/form-builder-library npm package

package.json

@@ -36,10 +36,11 @@
         }
     ],
     "devDependencies": {
+        "@givewp/form-builder-library": "^1.1.2",
         "@types/lodash": "^4.14.199",
-        "@types/react": "^18.0.27",
+        "@types/react": "^18.2.42",
         "@types/react-datepicker": "^4.15.0",
-        "@types/react-dom": "^18.0.10",
+        "@types/react-dom": "^18.2.17",
         "@types/wordpress__blocks": "^12.5.0",
         "@types/wordpress__components": "^23.0.1",
         "@wordpress/dependency-extraction-webpack-plugin": "^3.3.2",

src/DonationForms/resources/app/fields/GroupNode.tsx

@@ -1,9 +1,7 @@
-import {Node, Group, isField, isGroup} from '@givewp/forms/types';
+import {Group, Node} from '@givewp/forms/types';
 import {useTemplateWrapper} from '../templates';
 import type {GroupProps} from '@givewp/forms/propTypes';
-import {memo, useEffect} from '@wordpress/element';
 import SectionNode from './SectionNode';
-import useVisibilityCondition from '@givewp/forms/app/hooks/useVisibilityCondition';
 import memoNode from '@givewp/forms/app/utilities/memoNode';
 
 const formTemplates = window.givewp.form.templates;
@@ -16,10 +14,11 @@ const formTemplates = window.givewp.form.templates;
  *
  * @since 3.0.0
  */
-function GroupNode({node}: { node: Group }) {
+function GroupNode({node}: {node: Group}) {
     const Group = useTemplateWrapper<GroupProps>(formTemplates.groups[node.type], 'div', node.name);
 
     const nodeComponents = node.reduceNodes((nodes, node: Node) => {
+        // @ts-ignore
         nodes[node.name] = (props: Node) => <SectionNode node={{...node, ...props}} />;
 
         return nodes;

src/DonationForms/resources/app/fields/SectionNode.tsx

@@ -47,12 +47,16 @@ function SectionNode({node}: {node: Node}) {
 
     if (isField(node) && fieldTemplateExists(node)) {
         if (node.type === 'gateways') {
+            // @ts-ignore
             return <GatewayFieldNode node={node} />;
         }
+        // @ts-ignore
         return <FieldNode node={node} />;
     } else if (isElement(node) && elementTemplateExists(node)) {
+        // @ts-ignore
         return <ElementNode node={node} />;
     } else if (isGroup(node) && groupTemplateExists(node)) {
+        // @ts-ignore
         return <GroupNode node={node} />;
     } else {
         console.error(`Node: ${JSON.stringify(node)} does not exist in Form Design: ${JSON.stringify(formTemplates)}`);

src/DonationForms/resources/app/form/MultiStepForm/index.tsx

@@ -1,3 +1,4 @@
+import type {Form} from '@givewp/forms/types';
 import {Section} from '@givewp/forms/types';
 import {DonationFormMultiStepStateProvider} from './store';
 import {StepObject} from '@givewp/forms/app/form/MultiStepForm/types';
@@ -9,7 +10,6 @@ import SectionNode from '@givewp/forms/app/fields/SectionNode';
 import Steps from '@givewp/forms/app/form/MultiStepForm/components/Steps';
 import HeaderStep from '@givewp/forms/app/form/MultiStepForm/components/HeaderStep';
 import {DonationSummaryProvider} from '@givewp/forms/app/store/donation-summary';
-import type {Form} from '@givewp/forms/types';
 
 const FormSectionTemplate = withTemplateWrapper(window.givewp.form.templates.layouts.section, 'section');
 
@@ -33,7 +33,10 @@ const convertSectionsToSteps = (sections: Section[], hasFirstStep: boolean) => {
                     <FormSectionTemplate key={section.name} section={section} hideLabel>
                         {section.nodes.map((node) => (
                             <DonationFormErrorBoundary key={node.name}>
-                                <SectionNode key={node.name} node={node} />
+                                {
+                                    // @ts-ignore
+                                    <SectionNode key={node.name} node={node} />
+                                }
                             </DonationFormErrorBoundary>
                         ))}
                     </FormSectionTemplate>
@@ -72,7 +75,9 @@ export default function MultiStepForm({form}: {form: Form}) {
     }
 
     return (
-        <DonationFormMultiStepStateProvider initialState={{steps, currentStep: 0, showHeader: form.settings?.showHeader}}>
+        <DonationFormMultiStepStateProvider
+            initialState={{steps, currentStep: 0, showHeader: form.settings?.showHeader}}
+        >
             <DonationSummaryProvider>
                 <Steps steps={steps} />
             </DonationSummaryProvider>

src/DonationForms/resources/app/form/Section.tsx

@@ -30,7 +30,10 @@ export default function Section({section}: {section: SectionType}) {
         <FormSectionTemplate section={section}>
             {section.nodes.map((node) => (
                 <DonationFormErrorBoundary key={node.name}>
-                    <SectionNode node={node} />
+                    {
+                        // @ts-ignore
+                        <SectionNode node={node} />
+                    }
                 </DonationFormErrorBoundary>
             ))}
         </FormSectionTemplate>

src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/inspector/index.tsx

@@ -14,8 +14,8 @@ import periodLookup from '../period-lookup';
 import RecurringDonationsPromo from '@givewp/form-builder/promos/recurring-donations';
 import {getFormBuilderWindowData} from '@givewp/form-builder/common/getWindowData';
 import {useCallback, useState} from '@wordpress/element';
-import Options from '@givewp/form-builder/components/OptionsPanel';
-import {OptionProps} from '@givewp/form-builder/components/OptionsPanel/types';
+import {OptionsPanel} from '@givewp/form-builder-library';
+import {OptionProps} from '@givewp/form-builder-library/build/OptionsPanel/types';
 import {useEffect} from 'react';
 import {DonationAmountAttributes} from '@givewp/form-builder/blocks/fields/amount/types';
 import {subscriptionPeriod} from '@givewp/forms/registrars/templates/groups/DonationAmount/subscriptionPeriod';
@@ -184,6 +184,8 @@ const Inspector = ({attributes, setAttributes}) => {
         [recurringBillingPeriodOptions, recurringEnableOneTimeDonations]
     );
 
+    const {currency = 'USD'} = getFormBuilderWindowData();
+
     return (
         <InspectorControls>
             <PanelBody title={__('Field Settings', 'give')} initialOpen={true}>
@@ -248,8 +250,8 @@ const Inspector = ({attributes, setAttributes}) => {
 
             {priceOption === 'multi' && (
                 <PanelBody title={__('Donation Levels', 'give')} initialOpen={false}>
-                    <Options
-                        currency={true}
+                    <OptionsPanel
+                        currency={currency}
                         multiple={false}
                         options={donationLevels}
                         setOptions={handleLevelsChange}

src/FormBuilder/resources/js/form-builder/src/blocks/fields/donor-name/Edit.tsx

@@ -3,26 +3,25 @@ import {BlockEditProps} from '@wordpress/blocks';
 import {PanelBody, PanelRow, SelectControl, TextControl, ToggleControl} from '@wordpress/components';
 import {InspectorControls} from '@wordpress/block-editor';
 import {useState} from 'react';
-import Options from '@givewp/form-builder/components/OptionsPanel';
-import {OptionProps} from '@givewp/form-builder/components/OptionsPanel/types';
+import {OptionsPanel} from '@givewp/form-builder-library';
+import {OptionProps} from '@givewp/form-builder-library/build/OptionsPanel/types';
 
 const titleLabelTransform = (token = '') => token.charAt(0).toUpperCase() + token.slice(1);
 const titleValueTransform = (token = '') => token.trim().toLowerCase();
 
 export default function Edit({
-                                 attributes: {
-                                     showHonorific,
-                                     honorifics,
-                                     firstNameLabel,
-                                     firstNamePlaceholder,
-                                     lastNameLabel,
-                                     lastNamePlaceholder,
-                                     requireLastName,
-                                 },
-                                 setAttributes,
-                             }: BlockEditProps<any>) {
-
-    const [selectedTitle, setSelectedTitle] = useState<string>(Object.values(honorifics)[0] as string ?? '');
+    attributes: {
+        showHonorific,
+        honorifics,
+        firstNameLabel,
+        firstNamePlaceholder,
+        lastNameLabel,
+        lastNamePlaceholder,
+        requireLastName,
+    },
+    setAttributes,
+}: BlockEditProps<any>) {
+    const [selectedTitle, setSelectedTitle] = useState<string>((Object.values(honorifics)[0] as string) ?? '');
     const [honorificOptions, setHonorificOptions] = useState<OptionProps[]>(
         Object.values(honorifics).map((token: string) => {
             return {
@@ -38,12 +37,12 @@ export default function Edit({
 
         const filtered = {};
         // Filter options
-       Object.values(options).forEach((option) => {
-            Object.assign(filtered, {[option.label]: option.label})
+        Object.values(options).forEach((option) => {
+            Object.assign(filtered, {[option.label]: option.label});
         });
 
-        setAttributes({honorifics: filtered})
-    }
+        setAttributes({honorifics: filtered});
+    };
 
     return (
         <>
@@ -99,8 +98,7 @@ export default function Edit({
                                 />
                             </div>
                             {!!showHonorific && (
-                                <Options
-                                    currency={false}
+                                <OptionsPanel
                                     multiple={false}
                                     selectable={false}
                                     options={honorificOptions}

src/FormBuilder/resources/js/form-builder/src/blocks/fields/terms-and-conditions/Edit.tsx

@@ -10,7 +10,7 @@ import ControlForPopover from '@givewp/form-builder/components/settings/ControlF
 import StyledPopover from '@givewp/form-builder/blocks/fields/terms-and-conditions/StyledPopover';
 
 import './styles.scss';
-import ClassicEditor from '@givewp/form-builder/components/ClassicEditor';
+import {ClassicEditor} from '@givewp/form-builder-library';
 
 const DisplayTypeEnum = {
     SHOW_MODAL_TERMS: 'showModalTerms',