@solidstarters/solid-core-ui 1.1.31 → 1.1.33

package/dist/helpers/registry.js

@@ -1,11 +1,25 @@
+import hanldeEmailFormTypeChange from "../components/core/extension/solid-core/emailTemplate/emailFormTypeChangeHandler";
+import hanldeEmailFormTypeLoad from "../components/core/extension/solid-core/emailTemplate/emailFormTypeLoad";
+import { RolePermissionsManyToManyFieldWidget } from "../components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget";
+import { SolidRelationManyToManyAutocompleteWidget } from "../components/core/form/fields/relations/widgets/SolidRelationManyToManyAutocompleteWidget";
+import { SolidRelationManyToManyCheckboxWidget } from "../components/core/form/fields/relations/widgets/SolidRelationManyToManyCheckboxWidget";
 import { CustomHtml } from "../components/core/form/widgets/CustomHtml";
+import { SolidBooleanFieldCheckboxWidget } from "../components/core/form/fields/widgets/SolidBooleanCheckboxFieldWidget";
+import { SolidBooleanFieldSelectWidget } from "../components/core/form/fields/widgets/SolidBooleanSelectFieldWidget";
+import { SolidSelectionStaticAutocompleteWidget } from "../components/core/form/fields/widgets/SolidSelectionStaticAutocompleteFieldWidget";
+import { SolidSelectionStaticRadioWidget } from "../components/core/form/fields/widgets/SolidSelectionStaticRadioFieldWidget";
 var extensionRegistry = {
     components: {},
     functions: {},
 };
-export var registerExtensionComponent = function (name, component) {
+export var registerExtensionComponent = function (name, component, aliases) {
+    if (aliases === void 0) { aliases = []; }
     // console.log(`registerExtensionComponent invoked... ${name}`);
     extensionRegistry.components[name] = component;
+    for (var i = 0; i < aliases.length; i++) {
+        var alias = aliases[i];
+        extensionRegistry.components[alias] = component;
+    }
 };
 export var registerExtensionFunction = function (name, fn) {
     // console.log(`registerExtensionFunction invoked... ${name}`);
@@ -37,7 +51,18 @@ export var getExtensionFunction = function (name) {
 };
 // Register all the dynamic widget & functions from inside solid-core-ui
 // Common
-registerExtensionComponent("CustomHtml", CustomHtml);
+registerExtensionComponent("CustomHtml", CustomHtml, []);
+registerExtensionComponent("SolidRelationManyToManyCheckboxWidget", SolidRelationManyToManyCheckboxWidget, ["checkbox"]);
+registerExtensionComponent("SolidRelationManyToManyAutocompleteWidget", SolidRelationManyToManyAutocompleteWidget, ["autocomplete"]);
+registerExtensionComponent("SolidBooleanFieldCheckboxWidget", SolidBooleanFieldCheckboxWidget, ["field-checkbox"]);
+registerExtensionComponent("SolidBooleanFieldSelectWidget", SolidBooleanFieldSelectWidget, ["field-selectbox"]);
+registerExtensionComponent("SolidSelectionStaticAutocompleteWidget", SolidSelectionStaticAutocompleteWidget, ["field-autocomplete"]);
+registerExtensionComponent("SolidSelectionStaticRadioWidget", SolidSelectionStaticRadioWidget, ["field-radio"]);
 // ModuleMetadata
 // ModelMetadata
+// Email Template
+registerExtensionFunction("emailFormTypeChangeHandler", hanldeEmailFormTypeChange);
+registerExtensionFunction("emailFormTypeLoad", hanldeEmailFormTypeLoad);
+// RoleMetadata
+registerExtensionComponent("RolePermissionsManyToManyFieldWidget", RolePermissionsManyToManyFieldWidget, ["inputSwitch"]);
 //# sourceMappingURL=registry.js.map

package/dist/helpers/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../src/helpers/registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAQvE,IAAM,iBAAiB,GAAsB;IACzC,UAAU,EAAE,EAAE;IACd,SAAS,EAAE,EAAE;CAChB,CAAC;AAEF,MAAM,CAAC,IAAM,0BAA0B,GAAG,UAAC,IAAY,EAAE,SAAmC;IACxF,gEAAgE;IAChE,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,yBAAyB,GAAG,UAAC,IAAY,EAAE,EAA2B;IAC/E,+DAA+D;IAC/D,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,IAAY;IAC9C,IAAI,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;QACpC,OAAO,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;KAC7C;IAED,OAAO,IAAI,CAAC;IAEZ,8EAA8E;IAE9E,4CAA4C;IAC5C,yBAAyB;IACzB,0EAA0E;IAC1E,+IAA+I;IAC/I,IAAI;IAEJ,QAAQ;IACR,+FAA+F;IAC/F,4FAA4F;IAC5F,oBAAoB;IACpB,wEAAwE;IACxE,IAAI;IAEJ,+BAA+B;IAC/B,qIAAqI;AACzI,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,IAAY;IAC7C,sDAAsD;IACtD,OAAO,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAC7C,CAAC,CAAC;AAGF,wEAAwE;AACxE,SAAS;AACT,0BAA0B,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAGrD,iBAAiB;AAGjB,gBAAgB"}
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../src/helpers/registry.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,MAAM,iFAAiF,CAAC;AACxH,OAAO,uBAAuB,MAAM,wEAAwE,CAAC;AAC7G,OAAO,EAAE,oCAAoC,EAAE,MAAM,0FAA0F,CAAC;AAChJ,OAAO,EAAE,yCAAyC,EAAE,MAAM,2FAA2F,CAAC;AACtJ,OAAO,EAAE,qCAAqC,EAAE,MAAM,uFAAuF,CAAC;AAC9I,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAEvE,OAAO,EAAE,+BAA+B,EAAE,MAAM,uEAAuE,CAAC;AACxH,OAAO,EAAE,6BAA6B,EAAE,MAAM,qEAAqE,CAAC;AACpH,OAAO,EAAE,sCAAsC,EAAE,MAAM,mFAAmF,CAAC;AAC3I,OAAO,EAAE,+BAA+B,EAAE,MAAM,4EAA4E,CAAC;AAO7H,IAAM,iBAAiB,GAAsB;IACzC,UAAU,EAAE,EAAE;IACd,SAAS,EAAE,EAAE;CAChB,CAAC;AAEF,MAAM,CAAC,IAAM,0BAA0B,GAAG,UAAC,IAAY,EAAE,SAAmC,EAAE,OAAsB;IAAtB,wBAAA,EAAA,YAAsB;IAChH,gEAAgE;IAChE,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;IAC/C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,IAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QACzB,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;KACnD;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,yBAAyB,GAAG,UAAC,IAAY,EAAE,EAA2B;IAC/E,+DAA+D;IAC/D,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,IAAY;IAC9C,IAAI,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;QACpC,OAAO,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;KAC7C;IAED,OAAO,IAAI,CAAC;IAEZ,8EAA8E;IAE9E,4CAA4C;IAC5C,yBAAyB;IACzB,0EAA0E;IAC1E,+IAA+I;IAC/I,IAAI;IAEJ,QAAQ;IACR,+FAA+F;IAC/F,4FAA4F;IAC5F,oBAAoB;IACpB,wEAAwE;IACxE,IAAI;IAEJ,+BAA+B;IAC/B,qIAAqI;AACzI,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,IAAY;IAC7C,sDAAsD;IACtD,OAAO,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAC7C,CAAC,CAAC;AAGF,wEAAwE;AACxE,SAAS;AACT,0BAA0B,CAAC,YAAY,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;AACzD,0BAA0B,CAAC,uCAAuC,EAAE,qCAAqC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;AACzH,0BAA0B,CAAC,2CAA2C,EAAE,yCAAyC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;AACrI,0BAA0B,CAAC,iCAAiC,EAAE,+BAA+B,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;AACnH,0BAA0B,CAAC,+BAA+B,EAAE,6BAA6B,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;AAChH,0BAA0B,CAAC,wCAAwC,EAAE,sCAAsC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;AACrI,0BAA0B,CAAC,iCAAiC,EAAE,+BAA+B,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AAGhH,iBAAiB;AAGjB,gBAAgB;AAGhB,iBAAiB;AACjB,yBAAyB,CAAC,4BAA4B,EAAE,yBAAyB,CAAC,CAAC;AACnF,yBAAyB,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,CAAC;AAExE,eAAe;AACf,0BAA0B,CAAC,sCAAsC,EAAE,oCAAoC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.31",
+  "version": "1.1.33",
   "scripts": {
     "prebuild": "npm run copy-styles",
     "build": "tsc && tsc-alias",

package/src/components/core/extension/solid-core/emailTemplate/emailFormTypeChangeHandler.ts

@@ -0,0 +1,18 @@
+import { SolidViewLayoutManager } from "@/components/core/common/SolidViewLayoutManager";
+
+const hanldeEmailFormTypeChange = (event: any) => {
+
+    const { modifiedField, modifiedFieldValue, viewMetadata, } = event;
+    const layout = viewMetadata.layout;
+    if (modifiedField === 'type') {
+        const layoutManager = new SolidViewLayoutManager(layout);
+        const renderMode = modifiedFieldValue.value === 'text' ? 'longText' : 'richText';
+        layoutManager.updateNodeAttributes('body', { "renderMode": renderMode});
+        return {
+            layoutChanged: true,
+            dataChanged: false,
+            newLayout: layoutManager.getLayout(), 
+        }
+    }
+}
+export default hanldeEmailFormTypeChange;

package/src/components/core/extension/solid-core/emailTemplate/emailFormTypeLoad.ts

@@ -0,0 +1,18 @@
+import { SolidViewLayoutManager } from "@/components/core/common/SolidViewLayoutManager";
+
+const hanldeEmailFormTypeLoad = (event: any) => {
+
+    const { formData, type, viewMetadata } = event;
+    const layout = viewMetadata.layout;
+    if (formData?.type && type === 'onFormLayoutLoad') {
+        const layoutManager = new SolidViewLayoutManager(layout);
+        const renderMode = formData.type === 'text' ? 'longText' : 'richText';
+        layoutManager.updateNodeAttributes('body', { "renderMode": renderMode});
+        return {
+            layoutChanged: true,
+            dataChanged: false,
+            newLayout: layoutManager.getLayout(), 
+        }
+    }
+}
+export default hanldeEmailFormTypeLoad;

package/src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx

@@ -0,0 +1,123 @@
+"use client";
+import { SolidRelationManyToManyFieldWidgetProps } from "@/types/solid-core";
+import { capitalize } from "lodash";
+import { Panel } from "primereact/panel";
+import { useEffect, useState } from "react";
+import { Button } from "primereact/button";
+import { InputSwitch } from "primereact/inputswitch";
+import { useRelationEntityHandler } from "@/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler";
+import { InlineRelationEntityDialog } from "@/components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog";
+import { Checkbox } from "primereact/checkbox";
+
+const groupByController = (items: any[]) => {
+    const grouped: { [key: string]: any[] } = {};
+    items.forEach((item) => {
+        const controllerName = item.label.split(".")[0];
+        if (!grouped[controllerName]) {
+            grouped[controllerName] = [];
+        }
+        grouped[controllerName].push(item);
+    });
+    return grouped;
+};
+
+export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidRelationManyToManyFieldWidgetProps) => {
+    const fieldLayoutInfo = fieldContext.field;
+
+    const readOnlyPermission = fieldContext.readOnly;
+    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
+    const { autoCompleteItems, fetchRelationEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });
+    const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});
+
+    useEffect(() => {
+        fetchRelationEntities();
+    }, []);
+
+    const handleCheckboxChange = (e: any) => {
+        if (formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === e.value)) {
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, formik.values[fieldLayoutInfo.attrs.name].filter((s: any) => s.value !== e.value));
+        } else {
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, [...formik.values[fieldLayoutInfo.attrs.name], e]);
+        }
+    };
+
+    const getHeaderTemplate = (controllerName: string) => (options: any) => {
+        const className = `${options.className} justify-content-space-between`;
+    
+        return (
+            <div className={className}>
+                <div className="flex align-items-center gap-3">
+                    <label className="form-field-label text-lg font-bold">
+                        {controllerName}
+                    </label>
+                    {fieldContext.field.attrs.inlineCreate && (
+                        <>
+                            <Button
+                                icon="pi pi-plus"
+                                rounded
+                                outlined
+                                aria-label="Add"
+                                type="button"
+                                size="small"
+                                onClick={() =>
+                                    setVisibleDialogs((prev) => ({
+                                        ...prev,
+                                        [controllerName]: true,
+                                    }))
+                                }
+                                className="custom-add-button"
+                            />
+                            <InlineRelationEntityDialog
+                                visible={visibleCreateDialog}
+                                setVisible={setVisibleCreateDialog}
+                                fieldContext={fieldContext}
+                                onCreate={addNewRelation}
+                            />
+                        </>
+                    )}
+                </div>
+                <div>{options.togglerElement}</div>
+            </div>
+        );
+    };
+    
+    const groupedEntities = groupByController(autoCompleteItems || []);
+    return (
+            <div>
+                {Object.keys(groupedEntities).map((controllerName) => (
+                    <Panel toggleable headerTemplate={getHeaderTemplate(controllerName)} key={controllerName} className="mt-4">
+                        <div className="formgrid grid">
+                            {groupedEntities[controllerName].map((entity: any, i: number) => {
+                                const isChecked = formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === entity.value);
+                                return (
+                                    <div key={entity.label} className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}>
+                                        <Checkbox
+                                            readOnly={readOnlyPermission}
+                                            inputId={entity.label}
+                                            checked={isChecked}
+                                            onChange={() => handleCheckboxChange(entity)}
+                                        />
+                                        <label htmlFor={entity.label} className="form-field-label m-0"> {entity.label}</label>
+                                    </div>
+                                )
+                            })}
+                        </div>
+                    </Panel>
+                ))}
+                {Object.keys(groupedEntities).map((controllerName) => (
+                    <InlineRelationEntityDialog
+                        key={`dialog-${controllerName}`}
+                        visible={visibleDialogs[controllerName] || false}
+                        setVisible={(visible: any) =>
+                            setVisibleDialogs((prev) => ({
+                                ...prev,
+                                [controllerName]: visible,
+                            }))
+                        }
+                        fieldContext={fieldContext}
+                        onCreate={addNewRelation}
+                    />
+                ))}
+            </div>
+        )
+};

package/src/components/core/form/SolidFormView.tsx

@@ -37,7 +37,7 @@ import { OverlayPanel } from "primereact/overlaypanel";
 import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
 import { SolidUiEvent } from "@/types";
 import { getExtensionComponent, getExtensionFunction } from "@/helpers/registry";
-import { SolidFormWidgetProps } from "@/types/solid-core";
+import { SolidFormWidgetProps, SolidLoadForm } from "@/types/solid-core";
 import { SolidPasswordField } from "./fields/SolidPasswordField";
 import { SolidEmailField } from "./fields/SolidEmailField";
 import { Panel } from "primereact/panel";
@@ -417,17 +417,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
         isLoading: solidFormViewMetaDataIsLoading
     } = useGetSolidViewLayoutQuery(formViewMetaDataQs);
 
-    useEffect(() => {
-        if (solidFormViewMetaData) {
-            setFormViewMetaData(solidFormViewMetaData);
-            if (params.customLayout) {
-                setFormViewLayout(params.customLayout);
-            } else {
-                setFormViewLayout(solidFormViewMetaData.data.solidView.layout);
-            }
-        }
-    }, [solidFormViewMetaData]);
-
     useEffect(() => {
         if (
             isEntityCreateSuccess == true ||
@@ -579,11 +568,11 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
         // errorFields.length = 0;
     };
-    useEffect(() => {
-        if (errorFields?.length > 0) {
-            showFieldError();
-        }
-    }, [errorFields])
+    // useEffect(() => {
+    //     if (errorFields?.length > 0) {
+    //         showFieldError();
+    //     }
+    // }, [errorFields])
 
     // - - - - - - - - - - - -- - - - - - - - - - - - DATA here
     // Fetch the actual data here. 
@@ -625,11 +614,76 @@ const SolidFormView = (params: SolidFormViewProps) => {
         }
     }, [formViewDataQs])
 
-
     useEffect(() => {
-        if (solidFormViewData) {
-            setInitialEntityData(solidFormViewData.data);
+        if (solidFormViewMetaData) {
+            let formLayout = solidFormViewMetaData; 
+            const dynamicHeader = solidFormViewMetaData?.data?.solidView?.layout?.onFormLayoutLoad;
+            let DynamicFunctionComponent = null;
+            const event: SolidLoadForm = {
+                fieldsMetadata: solidFormViewMetaData,
+                formData: solidFormViewData?.data,
+                type: dynamicHeader,
+                viewMetadata: solidFormViewMetaData?.data?.solidView
+            }
+            if (dynamicHeader) {
+                DynamicFunctionComponent = getExtensionFunction(dynamicHeader);
+                if (DynamicFunctionComponent) {
+                    const updatedFormLayout = DynamicFunctionComponent(event);
+                    if (updatedFormLayout && updatedFormLayout?.layoutChanged && updatedFormLayout?.newLayout) {
+                        const newFormLayout = {
+                            ...formLayout,
+                            data : {
+                                ...formLayout.data,
+                                solidView: {
+                                    ...formLayout.data.solidView,
+                                    layout: updatedFormLayout.newLayout
+                                }
+                            }
+                        };
+                        formLayout = newFormLayout;
+                    }
+                }
+            }
+            setFormViewMetaData(formLayout);
+            if (params.customLayout) {
+                setFormViewLayout(params.customLayout);
+            } else {
+                setFormViewLayout(formLayout.data.solidView.layout);
+            }
         }
+    }, [solidFormViewMetaData, solidFormViewData]);
+
+    useEffect(() => {
+        const handleDynamicFunction = async () => {
+            if (solidFormViewData) {
+                const dynamicHeader = solidFormViewMetaData?.data?.solidView?.layout?.onFormDataLoad;
+    
+                let DynamicFunctionComponent = null;
+                let formViewData = solidFormViewData?.data;
+    
+                const event: SolidLoadForm = {
+                    fieldsMetadata: solidFormViewMetaData,
+                    formData: solidFormViewData?.data,
+                    type: dynamicHeader,
+                    viewMetadata: solidFormViewMetaData?.data?.solidView
+                };
+    
+                if (dynamicHeader) {
+                    DynamicFunctionComponent = getExtensionFunction(dynamicHeader);
+    
+                    if (DynamicFunctionComponent) {
+                        const updatedFormData = await DynamicFunctionComponent(event);
+    
+                        if (updatedFormData && updatedFormData?.dataChanged && updatedFormData?.newFormData) {
+                            formViewData = updatedFormData.newFormData;
+                        }
+                    }
+                }
+                setInitialEntityData(formViewData);
+            }
+        };
+    
+        handleDynamicFunction();
     }, [solidFormViewData]);
 
     let formik: FormikObject;
@@ -726,7 +780,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
                     // Invoke the dynamic change handler: 
                     // TODO: encapsulate in try/catch, catch the exception render in the UI as an error & stop form rendering.
-                    const updatedFormInfo = dynamicChangeHandler(event);
+                    const updatedFormInfo = await dynamicChangeHandler(event);
                     // console.log(`${eventType}: formFieldOnXXX response received: `, updatedFormInfo);
 
                     // If dataChanged is true, update Formik values

package/src/components/core/form/fields/SolidBooleanField.tsx

@@ -6,6 +6,10 @@ import { useEffect } from "react";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { Panel } from "primereact/panel";
+import { Checkbox, CheckboxChangeEvent } from "primereact/checkbox";
+import { getExtensionComponent } from "@/helpers/registry";
+import { SolidBooleanFieldWidgetProps } from "@/types/solid-core";
 
 export class SolidBooleanField implements ISolidField {
 
@@ -28,7 +32,13 @@ export class SolidBooleanField implements ISolidField {
 
         const existingValue = this.fieldContext.data[fieldName];
 
-        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
+        // return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
+
+        // Ensure the value is always a string "true" or "false"
+        const result = existingValue
+        ? (existingValue === true || existingValue === "true" ? "true" : "false") 
+        : (fieldDefaultValue === true || fieldDefaultValue === "true" ? "true" : "false");
+        return result;
     }
 
     validationSchema(): Schema {
@@ -82,44 +92,42 @@ export class SolidBooleanField implements ISolidField {
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
+        let renderMode = fieldLayoutInfo.attrs.renderMode;
+        if (!renderMode) {
+            renderMode = 'field-selectbox';
+        }
         return (
-            <div className={className}>
-                <div className="relative">
-                    <div className="flex flex-column gap-2 mt-4">
-                        {showFieldLabel != false &&
-                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                            </label>
-                        }
-                        {/* <InputText
-                        id={fieldLayoutInfo.attrs.name}
-                        className="small-input"
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={formik.handleChange}
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                    /> */}
-                        <SelectButton
-                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                            disabled={formDisabled || fieldDisabled}
-                            id={fieldLayoutInfo.attrs.name}
-                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                            onChange={(e) => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)} // Custom handling for boolean input
-                            value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name].toString() : "false"}
-                            options={booleanOptions}
-                            className={classNames("", {
-                                "p-invalid": isFormFieldValid(formik, "defaultValue"),
-                            })}
-
-                        />
+            <>
+                {renderMode &&
+                    this.renderExtensionRenderMode(renderMode, formik) 
+                }
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                     </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                        </div>
-                    )}
-                </div>
-            </div>
+                )}
+            </>
         );
+
+        
     }
+
+
+    renderExtensionRenderMode(widgetName: string, formik: FormikObject) { 
+            let DynamicWidget = getExtensionComponent(widgetName);
+            if (!DynamicWidget) {
+                DynamicWidget = getExtensionComponent('field-selectbox');
+            }
+            const widgetProps: SolidBooleanFieldWidgetProps = {
+                formik: formik,
+                fieldContext: this.fieldContext,
+            }
+            return (
+                <>
+                    {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                </>
+            )
+        }
+
+    
 }

package/src/components/core/form/fields/SolidLongTextField.tsx

@@ -4,6 +4,8 @@ import { Message } from "primereact/message";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { Editor } from "primereact/editor";
+import { useState } from "react";
 
 export class SolidLongTextField implements ISolidField {
 
@@ -59,6 +61,64 @@ export class SolidLongTextField implements ISolidField {
     }
 
     render(formik: FormikObject) {
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+        return (
+            <>
+            {(!fieldLayoutInfo.attrs.renderMode ||fieldLayoutInfo.attrs.renderMode === 'longText') && 
+                <div className={className}>
+                    {this.renderLongText(formik)}
+                </div>
+            }
+            {fieldLayoutInfo.attrs.renderMode === 'richText' && 
+                <div className={className}>
+                    {this.renderRichText(formik)}
+                </div>
+            }
+            </>
+        );
+    }
+
+    renderLongText(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
+    
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+    
+        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+    
+        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+        return (
+            <div className="flex flex-column gap-2 mt-4">
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        {/* &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>} */}
+                    </label>
+                }
+                <InputTextarea
+                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                    disabled={formDisabled || fieldDisabled}
+                    id={fieldLayoutInfo.attrs.name}
+                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                    onChange={formik.handleChange}
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    rows={5}
+                    cols={30}
+                />
+            </div>
+        )
+    }
+
+    renderRichText(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
@@ -68,6 +128,8 @@ export class SolidLongTextField implements ISolidField {
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
         const readOnlyPermission = this.fieldContext.readOnly;
 
+        const [text, setText] = useState();
+
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
@@ -78,31 +140,28 @@ export class SolidLongTextField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="relative">
-                    <div className="flex flex-column gap-2 mt-4">
-                        {showFieldLabel != false &&
-                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>} */}
-                            </label>
-                        }
-                        <InputTextarea
-                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                            disabled={formDisabled || fieldDisabled}
-                            id={fieldLayoutInfo.attrs.name}
-                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                            onChange={formik.handleChange}
-                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                            rows={5}
-                            cols={30}
-                        />
-                    </div>
+                <div className="flex flex-column gap-2 mt-4">
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                        </label>
+                    }
+                    <Editor
+                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                        disabled={formDisabled || fieldDisabled}
+                        key={fieldLayoutInfo.attrs.name}  // React will re-render the component whenever this value changes
+                        id={fieldLayoutInfo.attrs.name}
+                        value={formik.values[fieldLayoutInfo.attrs.name]}
+                        onTextChange={e => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.htmlValue)}
+                        style={{ height: "320px" }}
+                    />
+                </div>
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                         <div className="absolute mt-1">
                             <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                         </div>
                     )}
-                </div>
             </div>
         );
     }