@solidstarters/solid-core-ui 1.1.31 → 1.1.33

package/src/components/core/form/fields/relations/widgets/SolidRelationManyToManyCheckboxWidget.tsx

@@ -0,0 +1,103 @@
+"use client";
+import { SolidRelationManyToManyFieldWidgetProps } from "@/types/solid-core";
+import { capitalize } from "lodash";
+import { Checkbox } from "primereact/checkbox";
+import { Panel } from "primereact/panel";
+import { useEffect, useState } from "react";
+import { Button } from "primereact/button";
+import { useRelationEntityHandler } from "./helpers/useRelationEntityHandler";
+import { InlineRelationEntityDialog } from "./helpers/InlineRelationEntityDialog";
+
+export const SolidRelationManyToManyCheckboxWidget = ({formik, fieldContext }: SolidRelationManyToManyFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+
+    const readOnlyPermission = fieldContext.readOnly;
+    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
+    const { autoCompleteItems, fetchRelationEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });
+  
+    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 headerTemplate = (options: any) => {
+        const className = `${options.className} justify-content-space-between`;
+
+        return (
+            <div className={className}>
+                <div className="flex align-items-center gap-3">
+                    {showFieldLabel != false &&
+                        <label className="form-field-label">
+                            {capitalize(fieldLayoutInfo.attrs.name)}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        </label>
+                    }
+                    {fieldContext.field.attrs.inlineCreate && (
+                        <>
+                        <Button
+                            icon="pi pi-plus"
+                            rounded
+                            outlined
+                            aria-label="Filter"
+                            type="button"
+                            size="small"
+                            onClick={() => setVisibleCreateDialog(true)}
+                            className="custom-add-button"
+                        />
+                        <InlineRelationEntityDialog
+                            visible={visibleCreateDialog}
+                            setVisible={setVisibleCreateDialog}
+                            fieldContext={fieldContext}
+                            onCreate={addNewRelation}
+                        />
+                        </>
+                    )}
+                    {/* <div className="many-to-many-add" >
+                        <Button icon="pi pi-plus"
+                            rounded
+                            outlined
+                            aria-label="Filter"
+                            type="button"
+                            onClick={() => autoCompleteSearch()}
+                        />
+                    </div> */}
+                </div>
+                <div>
+                    {options.togglerElement}
+                </div>
+            </div>
+        );
+    };
+    return (
+        <div>
+
+            <Panel toggleable headerTemplate={headerTemplate}>
+                <div className="formgrid grid">
+                    {autoCompleteItems && autoCompleteItems.map((a: any, i: number) => {
+                        return (
+                            <div key={a.label} className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}>
+                                <Checkbox
+                                    readOnly={readOnlyPermission}
+                                    inputId={a.label}
+                                    checked={formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.label === a.label)}
+                                    onChange={() => handleCheckboxChange(a)}
+                                />
+                                <label htmlFor={a.label} className="form-field-label m-0"> {a.label}</label>
+                            </div>
+                        )
+                    })}
+                </div>
+            </Panel>
+        </div>
+    )
+        
+}

package/src/components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog.tsx

@@ -0,0 +1,33 @@
+import { Dialog } from "primereact/dialog";
+import { camelCase } from "lodash";
+import SolidFormView from "@/components/core/form/SolidFormView";
+
+export const InlineRelationEntityDialog = ({ visible, setVisible, fieldContext, onCreate }: any) => {
+  const fieldLayoutInfo = fieldContext.field;
+
+  const params = {
+    moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+    id: "new",
+    embeded: true,
+    layout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
+    customCreateHandler: (values: any) => {
+      setVisible(false);
+      onCreate(values);
+    },
+    inlineCreateAutoSave: fieldLayoutInfo?.attrs?.inlineCreateAutoSave,
+    handlePopupClose: () => setVisible(false),
+    modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName)
+  };
+
+  return (
+    <Dialog
+      visible={visible}
+      showHeader={false}
+      style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "60vw" }}
+      onHide={() => setVisible(false)}
+      className="solid-dialog"
+    >
+      <SolidFormView {...params} />
+    </Dialog>
+  );
+};

package/src/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.ts

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import qs from "qs";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+
+export const useRelationEntityHandler = ({ fieldContext, formik, autoCompleteLimit = 1000 }: any) => {
+  const fieldMetadata = fieldContext.fieldMetadata;
+  const fieldLayoutInfo = fieldContext.field;
+
+  const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
+  const { useLazyGetSolidEntitiesQuery } = entityApi;
+  const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
+
+  const [autoCompleteItems, setAutoCompleteItems] = useState([]);
+
+  const fetchRelationEntities = async (query = "", limit = autoCompleteLimit) => {
+    const queryData = {
+      offset: 0,
+      limit: limit,
+      filters: {
+        [fieldMetadata?.relationModel?.userKeyField?.name]: {
+          '$containsi': query
+        }
+      }
+    };
+
+    const autocompleteQs = qs.stringify(queryData, { encodeValuesOnly: true });
+
+    const response = await triggerGetSolidEntities(autocompleteQs);
+    const data = response.data;
+
+    if (data) {
+      const mappedItems = data.records.map((item: any) => ({
+        label: item[fieldMetadata?.relationModel?.userKeyField?.name],
+        value: item['id'],
+        original: item
+      }));
+      setAutoCompleteItems(mappedItems);
+    }
+  };
+
+  const addNewRelation = (values: any) => {
+    const currentData = formik.values[fieldLayoutInfo.attrs.name] || [];
+    const jsonValues = Object.fromEntries(values.entries());
+    const newItem = {
+      label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],
+      value: "new",
+      original: jsonValues,
+    };
+
+    formik.setFieldValue(fieldLayoutInfo.attrs.name, [...currentData, newItem]);
+
+    // Optionally add to autocomplete list
+    setAutoCompleteItems((prev: any) => {
+      const exists = prev.some((item: any) => item.label === newItem.label);
+      return exists ? prev : [...prev, newItem];
+    });
+  };
+
+  return {
+    autoCompleteItems,
+    fetchRelationEntities,
+    addNewRelation
+  };
+};

package/src/components/core/form/fields/widgets/SolidBooleanCheckboxFieldWidget.tsx

@@ -0,0 +1,79 @@
+"use client";
+import { SolidBooleanFieldWidgetProps } from "@/types/solid-core";
+import { useEffect, useState } from "react";
+import { Checkbox, CheckboxChangeEvent } from "primereact/checkbox";
+import { Message } from "primereact/message";
+import { classNames } from "primereact/utils";
+
+export const SolidBooleanFieldCheckboxWidget = ({ formik, fieldContext }: SolidBooleanFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || "field col-12";
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    // Set default value to false on mount
+    useEffect(() => {
+        if (formik.values[fieldLayoutInfo.attrs.name] === undefined) {
+            console.log("Setting default value:", false);
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, false);
+        }
+    }, []);
+
+    const handleChange = (e: CheckboxChangeEvent) => {
+        const newValue = e.checked; // This returns `true` or `false`
+        console.log(`${fieldLayoutInfo.attrs.name}, new value:`, newValue);
+        
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, newValue === true ? 'true' : 'false');
+        formik.setTouched({ ...formik.touched, [fieldLayoutInfo.attrs.name]: true }); // Ensure Formik registers the change
+        // ✅ Check if Formik updated the value correctly
+    setTimeout(() => {
+        console.log("Formik values after update:", formik.values);
+    }, 0);
+    };
+
+    const isFormFieldValid = (formik:any, fieldName:any) => 
+        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={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>}
+                        </label>
+                    )}
+
+                    <div className="flex align-items-center">
+                        <Checkbox
+                            id={fieldLayoutInfo.attrs.name}
+                            checked={formik.values[fieldLayoutInfo.attrs.name] === 'true' || formik.initialValues[fieldLayoutInfo.attrs.name] === 'true'}
+                            onChange={handleChange}
+                            disabled={formDisabled || fieldDisabled}
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            className={classNames("", {
+                                "p-invalid": isFormFieldValid(formik, fieldLayoutInfo.attrs.name),
+                            })}
+                        />
+                        <span className="ml-2">{fieldLabel || "Yes"}</span>
+                    </div>
+                </div>
+
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/core/form/fields/widgets/SolidBooleanSelectFieldWidget.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { SolidBooleanFieldWidgetProps } from "@/types/solid-core";
+import { useEffect, useState } from "react";
+import { Message } from "primereact/message";
+import { classNames } from "primereact/utils";
+import { SelectButton } from "primereact/selectbutton";
+
+export const SolidBooleanFieldSelectWidget = ({ formik, fieldContext }: SolidBooleanFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = 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 booleanOptions = ["false", "true"];
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
+
+    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={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); console.log("value is",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"),
+                        })}
+
+                    />
+                </div>
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/core/form/fields/widgets/SolidSelectionStaticAutocompleteFieldWidget.tsx

@@ -0,0 +1,72 @@
+"use client";
+import { SolidSelectionStaticFieldWidgetProps } from "@/types/solid-core";
+import { useEffect, useState } from "react";
+import { Message } from "primereact/message";
+import { classNames } from "primereact/utils";
+import { SelectButton } from "primereact/selectbutton";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+
+export const SolidSelectionStaticAutocompleteWidget = ({ formik, fieldContext }: SolidSelectionStaticFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = 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 = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+    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;
+    
+    const [selectionStaticItems, setSelectionStaticItems] = useState([]);
+    const selectionStaticSearch = (event: AutoCompleteCompleteEvent) => {
+        const selectionStaticData = fieldMetadata.selectionStaticValues.map((i: string) => {
+            return {
+                label: i.split(":")[1],
+                value: i.split(":")[0]
+            }
+        });
+        const suggestionData = selectionStaticData.filter((t: any) => t.value.toLowerCase().startsWith(event.query.toLowerCase()));
+        setSelectionStaticItems(suggestionData)
+    }
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+    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>
+                    }
+                    <AutoComplete
+                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                        disabled={formDisabled || fieldDisabled}
+                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                        id={fieldLayoutInfo.attrs.name}
+                        name={fieldLayoutInfo.attrs.name}
+                        field="label"
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        dropdown
+                        suggestions={selectionStaticItems}
+                        completeMethod={selectionStaticSearch}
+                        // onChange={(e) => updateInputs(index, e.value)} />
+                        // onChange={formik.handleChange}
+                        onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
+                        className="solid-standard-autocomplete"
+                    />
+                </div>
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/core/form/fields/widgets/SolidSelectionStaticRadioFieldWidget.tsx

@@ -0,0 +1,71 @@
+"use client";
+import { SolidSelectionStaticFieldWidgetProps } from "@/types/solid-core";
+import { useEffect, useState } from "react";
+import { Message } from "primereact/message";
+import { classNames } from "primereact/utils";
+import { SelectButton } from "primereact/selectbutton";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { RadioButton } from "primereact/radiobutton";
+
+export const SolidSelectionStaticRadioWidget = ({ formik, fieldContext }: SolidSelectionStaticFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+    const formDisabled = fieldContext.solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    const formReadonly = fieldContext.solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+    const fieldName = fieldLayoutInfo.attrs.name;
+
+    // Convert selectionStaticValues to usable radio options
+    const radioOptions = fieldMetadata.selectionStaticValues.map((i: string) => {
+        const [value, label] = i.split(":");
+        return { label, value };
+    });
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <div className={className}>
+            <div className="relative">
+                <div className="flex flex-column gap-2 mt-4">
+                    {showFieldLabel !== false && (
+                        <label htmlFor={fieldName} className="form-field-label">
+                            {fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        </label>
+                    )}
+                    <div className="flex flex-wrap gap-3">
+                    {radioOptions.map((option: any) => (
+                        <div key={option.value} className="flex items-center">
+                            <RadioButton
+                                id={`${fieldName}-${option.value}`}
+                                name={fieldName}
+                                value={option} 
+                                checked={formik.values[fieldName]?.value === option.value} 
+                                onChange={(e) => formik.setFieldValue(fieldName, e.value)} 
+                                disabled={formReadonly || fieldReadonly || readOnlyPermission || formDisabled || fieldDisabled}
+                                className="mr-2"
+                            />
+                            <label htmlFor={`${fieldName}-${option.value}`} className="cursor-pointer">
+                                {option.label}
+                            </label>
+                        </div>
+                    ))}
+                    </div>
+                </div>
+                {isFormFieldValid(formik, fieldName) && (
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldName]?.toString()} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/helpers/registry.ts

@@ -1,5 +1,14 @@
+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 React from "react";
+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";
 
 type ExtensionRegistry = {
     components: Record<string, React.ComponentType<any>>;
@@ -11,9 +20,13 @@ const extensionRegistry: ExtensionRegistry = {
     functions: {},
 };
 
-export const registerExtensionComponent = (name: string, component: React.ComponentType<any>) => {
+export const registerExtensionComponent = (name: string, component: React.ComponentType<any>, aliases: string[] = []) => {
     // console.log(`registerExtensionComponent invoked... ${name}`);
     extensionRegistry.components[name] = component;
+    for (let i = 0; i < aliases.length; i++) {
+        const alias = aliases[i];
+        extensionRegistry.components[alias] = component;
+    }
 };
 
 export const registerExtensionFunction = (name: string, fn: (...args: any[]) => any) => {
@@ -55,10 +68,24 @@ export const getExtensionFunction = (name: string) => {
 
 // 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"]);

package/src/types/solid-core.d.ts

@@ -67,6 +67,7 @@ export type LayoutAttribute = {
     label?: string;
     className?: string;
     inlineCreate?: string;
+    renderMode?: string;
 };
 
 // Generic representation of any node in our layout 
@@ -78,7 +79,7 @@ export type LayoutNode = {
 };
 
 // Event type
-export type SolidUiEvents = "onFieldChange" | "onFieldBlur" | "onCustomWidgetRender";
+export type SolidUiEvents = "onFieldChange" | "onFieldBlur" | "onCustomWidgetRender" | "onFormDataLoad" | "onFormLayoutLoad";
 export type SolidUiEvent = {
     type: SolidUiEvents;
     modifiedField?: string;
@@ -89,6 +90,13 @@ export type SolidUiEvent = {
     fieldsMetadata: FieldsMetadata;
 };
 
+export type SolidLoadForm = {
+    type: SolidUiEvents;
+    formData: Record<string, any>;
+    viewMetadata: SolidView;
+    fieldsMetadata: FieldsMetadata;
+}
+
 export type SolidFormWidgetProps = {
     field: any;
     // This comes from Formik...
@@ -96,3 +104,17 @@ export type SolidFormWidgetProps = {
     viewMetadata: SolidView;
     fieldsMetadata: FieldsMetadata;
 };
+
+export type SolidRelationManyToManyFieldWidgetProps = {
+    formik: any;
+    fieldContext?: SolidFieldProps;
+};
+
+export type SolidBooleanFieldWidgetProps = {
+    formik: any;
+    fieldContext?: SolidFieldProps;
+};
+export type SolidSelectionStaticFieldWidgetProps = {
+    formik: any;
+    fieldContext?: SolidFieldProps;
+};