@solidstarters/solid-core-ui 1.1.74 → 1.1.75

package/dist/components/core/form/fields/SolidPasswordField.tsx

@@ -1,187 +0,0 @@
-'use client';
-import { InputText } from "primereact/inputtext";
-import { Message } from "primereact/message";
-import * as Yup from 'yup';
-import { Schema } from "yup";
-import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
-import { Password } from "primereact/password";
-import { getExtensionComponent } from "@/helpers/registry";
-import { SolidFormFieldWidgetProps } from "@/types/solid-core";
-import { useState } from "react";
-
-export class SolidPasswordField implements ISolidField {
-
-    private fieldContext: SolidFieldProps;
-
-    constructor(fieldContext: SolidFieldProps) {
-        this.fieldContext = fieldContext;
-    }
-
-    updateFormData(value: any, formData: FormData): any {
-        const fieldLayoutInfo = this.fieldContext.field;
-        if (value) {
-            formData.append(fieldLayoutInfo.attrs.name, value);
-        }
-    }
-
-    initialValue(): any {
-        const fieldName = this.fieldContext.field.attrs.name;
-        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
-
-        const existingValue = this.fieldContext.data[fieldName];
-
-        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
-    }
-
-    validationSchema(): Schema {
-        let schema: Yup.StringSchema<string | null | undefined> = Yup.string();
-
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-
-        // 1. required 
-        // 1. required
-        if (fieldMetadata.required) {
-            schema = schema.required(`${fieldLabel} is required.`);
-        } else {
-            schema = schema.nullable(); // Allow null when not required
-        }
-
-        // 2. length (min/max)
-        if (fieldMetadata.min && fieldMetadata.min > 0) {
-            schema = schema.min(fieldMetadata.min, `${fieldLabel} should be at-least ${fieldMetadata.min} characters long.`);
-        }
-        if (fieldMetadata.max && fieldMetadata.max > 0) {
-            schema = schema.max(fieldMetadata.max, `${fieldLabel} should not be more than ${fieldMetadata.max} characters long.`);
-        }
-        // 3. regular expression
-        if (fieldMetadata.regexPattern) {
-            const regexPatternNotMatchingErrorMsg = fieldMetadata.regexPatternNotMatchingErrorMsg ?? `${fieldLabel} has invalid data.`
-            schema = schema.matches(fieldMetadata.regexPattern, regexPatternNotMatchingErrorMsg);
-        }
-
-        return schema;
-    }
-
-    render(formik: FormikObject) {
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
-        let editWidget = fieldLayoutInfo.attrs.editWidget;
-        if (!editWidget) {
-            editWidget = 'DefaultPasswordFormEditWidget';
-        }
-        if (!viewWidget) {
-            viewWidget = 'DefaultPasswordFormViewWidget';
-        }
-        const viewMode: string = this.fieldContext.viewMode;
-
-        return (
-            <>
-                <div className={className}>
-                    {viewMode === "view" &&
-                        this.renderExtensionRenderMode(viewWidget, formik)
-                    }
-                    {viewMode === "edit" &&
-                        <>
-                            {editWidget &&
-                                this.renderExtensionRenderMode(editWidget, formik)
-                            }
-                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                <div className="absolute mt-1">
-                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                                </div>
-                            )}
-                        </>
-                    }
-                </div>
-            </>
-        );
-    }
-
-    renderExtensionRenderMode(widget: string, formik: FormikObject) {
-        let DynamicWidget = getExtensionComponent(widget);
-        const widgetProps: SolidFormFieldWidgetProps = {
-            formik: formik,
-            fieldContext: this.fieldContext,
-        }
-        return (
-            <>
-                {DynamicWidget && <DynamicWidget {...widgetProps} />}
-            </>
-        )
-    }
-}
-
-export const DefaultPasswordFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    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 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="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>
-                }
-                <Password
-                    id={fieldLayoutInfo.attrs.name}
-                    name={fieldMetadata.name}
-                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                    onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
-                    onBlur={(e) => fieldContext.onBlur(e, 'onFieldBlur')}
-                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                    disabled={formDisabled || fieldDisabled}
-                    toggleMask
-                />
-
-            </div>
-        </div>
-    );
-}
-
-export const DefaultPasswordFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-
-    const [isText, setIsText] = useState(false)
-    return (
-        <div className="mt-2 flex-column gap-2">
-            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
-            <div className="flex align-items-center gap-4">
-                <p className="m-0">
-                    {isText ? formik.values[fieldLayoutInfo.attrs.name] : "••••••••"}
-                </p>
-                <i
-                    className={`pi ${isText ? 'pi-eye' : 'pi-eye-slash'}`}
-                    onClick={() => setIsText(!isText)}
-                    style={{ cursor: 'pointer' }}
-                />
-            </div>
-
-        </div>
-    );
-}
-
-

package/dist/components/core/form/fields/SolidRelationField.tsx

@@ -1,54 +0,0 @@
-'use client';
-import { Schema } from "yup";
-import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
-import { SolidRelationManyToManyField } from "./relations/SolidRelationManyToManyField";
-import { SolidRelationManyToOneField } from "./relations/SolidRelationManyToOneField";
-import { SolidRelationOneToManyField } from "./relations/SolidRelationOneToManyField";
-
-
-export class SolidRelationField implements ISolidField {
-
-    private fieldContext: SolidFieldProps;
-
-    constructor(fieldContext: SolidFieldProps) {
-        this.fieldContext = fieldContext;
-    }
-
-    relationField(): ISolidField {
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        let relationField = null;
-
-        if (fieldMetadata.relationType === 'many-to-one') {
-            relationField = new SolidRelationManyToOneField(this.fieldContext);
-        }
-        if (fieldMetadata.relationType === 'many-to-many') {
-            relationField = new SolidRelationManyToManyField(this.fieldContext);
-        }
-        if (fieldMetadata.relationType === 'one-to-many') {
-            relationField = new SolidRelationOneToManyField(this.fieldContext);
-        }
-
-        if (!relationField) {
-            throw new Error(`Invalid relationType ${fieldMetadata.relationType} on field ${this.fieldContext.field.attrs.name}`)
-        }
-
-        return relationField;
-    }
-
-    initialValue(): any {
-        return this.relationField()?.initialValue();
-    }
-
-    updateFormData(value: any, formData: FormData): any {
-        return this.relationField().updateFormData(value, formData);
-
-    }
-
-    validationSchema(): Schema {
-        return this.relationField().validationSchema();
-    }
-
-    render(formik: FormikObject) {
-        return this.relationField().render(formik);
-    }
-}

package/dist/components/core/form/fields/SolidRichTextField.tsx

@@ -1,177 +0,0 @@
-'use client';
-import { Editor } from "primereact/editor";
-import { Message } from "primereact/message";
-import { useState } from "react";
-import * as Yup from 'yup';
-import { Schema } from "yup";
-import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
-import { getExtensionComponent } from "@/helpers/registry";
-import { SolidFormFieldWidgetProps } from "@/types/solid-core";
-
-export class SolidRichTextField implements ISolidField {
-
-    private fieldContext: SolidFieldProps;
-
-    constructor(fieldContext: SolidFieldProps) {
-        this.fieldContext = fieldContext;
-    }
-
-    updateFormData(value: any, formData: FormData): any {
-        const fieldLayoutInfo = this.fieldContext.field;
-        if (value) {
-            formData.append(fieldLayoutInfo.attrs.name, value);
-        }
-    }
-
-    initialValue(): any {
-        return this.fieldContext.data[this.fieldContext.field.attrs.name];
-    }
-
-    validationSchema(): Schema {
-        let schema: Yup.StringSchema<string | null | undefined> = Yup.string();
-
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-
-        // 1. required 
-        if (fieldMetadata.required) {
-            schema = schema.required(`${fieldLabel} is required.`);
-        } else {
-            schema = schema.nullable(); // Allow null when not required
-        }
-        // 2. length (min/max)
-        if (fieldMetadata.min && fieldMetadata.min > 0) {
-            schema = schema.min(fieldMetadata.min, `${fieldLabel} should be at-least ${fieldMetadata.min} characters long.`);
-        }
-        if (fieldMetadata.max && fieldMetadata.max > 0) {
-            schema = schema.max(fieldMetadata.max, `${fieldLabel} should not be more than ${fieldMetadata.max} characters long.`);
-        }
-        // 3. regular expression
-        if (fieldMetadata.regexPattern) {
-            const regexPatternNotMatchingErrorMsg = fieldMetadata.regexPatternNotMatchingErrorMsg ?? `${fieldLabel} has invalid data.`
-            schema = schema.matches(fieldMetadata.regexPattern, regexPatternNotMatchingErrorMsg);
-        }
-
-        return schema;
-    }
-
-    render(formik: FormikObject) {
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-
-
-        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
-        let editWidget = fieldLayoutInfo.attrs.editWidget;
-        if (!editWidget) {
-            editWidget = 'DefaultRichTextFormEditWidget';
-        }
-        if (!viewWidget) {
-            viewWidget = 'DefaultRichTextFormViewWidget';
-        }
-        const viewMode: string = this.fieldContext.viewMode;
-
-
-        return (
-            <>
-                <div className={className}>
-                    {viewMode === "view" &&
-                        this.renderExtensionRenderMode(viewWidget, formik)
-                    }
-                    {viewMode === "edit" &&
-                        <>
-                            {editWidget &&
-                                this.renderExtensionRenderMode(editWidget, formik)
-                            }
-                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                <div className="absolute mt-1">
-                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                                </div>
-                            )}
-                        </>
-                    }
-                </div>
-            </>
-        );
-    }
-
-    renderExtensionRenderMode(widget: string, formik: FormikObject) {
-        let DynamicWidget = getExtensionComponent(widget);
-        const widgetProps: SolidFormFieldWidgetProps = {
-            formik: formik,
-            fieldContext: this.fieldContext,
-        }
-        return (
-            <>
-                {DynamicWidget && <DynamicWidget {...widgetProps} />}
-            </>
-        )
-    }
-}
-
-
-
-export const DefaultRichTextFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    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 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="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>
-                }
-                <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" }}
-                    className="solid-custom-editor"
-                />
-            </div>
-        </div>
-    );
-}
-
-export const DefaultRichTextFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-
-    const [isText, setIsText] = useState(false)
-    return (
-        <div>
-            <Editor
-                readOnly={true}
-                key={fieldLabel}  // React will re-render the component whenever this value changes
-                id={fieldLabel}
-                value={formik.values[fieldLayoutInfo.attrs.name]}
-                style={{ height: "320px" }}
-                className="solid-custom-editor"
-            />
-        </div>
-    );
-}

package/dist/components/core/form/fields/SolidSelectionDynamicField.tsx

@@ -1,204 +0,0 @@
-'use client';
-import { useLazyGetSelectionDynamicValuesQuery } from "@/redux/api/fieldApi";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { Message } from "primereact/message";
-import qs from "qs";
-import { useState } from "react";
-import * as Yup from 'yup';
-import { Schema } from "yup";
-import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
-import { getExtensionComponent } from "@/helpers/registry";
-import { SolidFormFieldWidgetProps } from "@/types/solid-core";
-
-
-export class SolidSelectionDynamicField implements ISolidField {
-
-    private fieldContext: SolidFieldProps;
-
-    constructor(fieldContext: SolidFieldProps) {
-        this.fieldContext = fieldContext;
-    }
-
-    initialValue(): any {
-        // TODO: Use the field metadata to re-create the object in the valid format 
-        // {label: '', value: ''}
-        const optionValue = this.fieldContext.data[this.fieldContext.field.attrs.name];
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-
-        return { label: optionValue || '', value: optionValue || '' };
-    }
-
-    updateFormData(value: any, formData: FormData): any {
-        const fieldLayoutInfo = this.fieldContext.field;
-        if (value) {
-            formData.append(fieldLayoutInfo.attrs.name, value.value);
-        }
-    }
-
-    validationSchema(): Schema {
-        let schema = Yup.object();
-
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-
-        // 1. required 
-        if (fieldMetadata.required) {
-            schema = schema.required(`${fieldLabel} is required.`);
-        }
-
-        return schema;
-    }
-
-    render(formik: FormikObject) {
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-
-        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
-        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
-        let editWidget = fieldLayoutInfo.attrs.editWidget;
-        if (!editWidget) {
-            editWidget = 'DefaultSelectionDynamicFormEditWidget';
-        }
-        if (!viewWidget) {
-            viewWidget = 'DefaultSelectionDynamicFormViewWidget';
-        }
-        const viewMode: string = this.fieldContext.viewMode;
-        return (
-            <>
-                <div className={className}>
-                    {viewMode === "view" &&
-                        this.renderExtensionRenderMode(viewWidget, formik)
-                    }
-                    {viewMode === "edit" &&
-                        <>
-                            {editWidget &&
-                                this.renderExtensionRenderMode(editWidget, formik)
-                            }
-                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                <div className="absolute mt-1">
-                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                                </div>
-                            )}
-                        </>
-                    }
-                </div>
-            </>
-        );
-    }
-    renderExtensionRenderMode(widget: string, formik: FormikObject) {
-        let DynamicWidget = getExtensionComponent(widget);
-        const widgetProps: SolidFormFieldWidgetProps = {
-            formik: formik,
-            fieldContext: this.fieldContext,
-        }
-        return (
-            <>
-                {DynamicWidget && <DynamicWidget {...widgetProps} />}
-            </>
-        )
-    }
-}
-
-
-
-
-export const DefaultSelectionDynamicFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    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 whereClause = fieldLayoutInfo.attrs.whereClause;
-
-    // selection dynamic specific code. 
-    const [triggerGetSelectionDynamicValues] = useLazyGetSelectionDynamicValuesQuery();
-    const [selectionDynamicItems, setSelectionDynamicItems] = useState([]);
-    const selectionDynamicSearch = async (event: AutoCompleteCompleteEvent) => {
-
-        // Get the list view layout & metadata first. 
-        const queryData = {
-            offset: 0,
-            limit: 10,
-            query: event.query,
-            fieldId: fieldMetadata.id
-        };
-        if (whereClause) {
-            queryData.query = whereClause;
-        }
-        let sdQs = qs.stringify(queryData, {
-            encodeValuesOnly: true,
-            encoder: (str, defaultEncoder, charset, type) => {
-                if (type === 'key' || type === 'value') {
-                    if (str === queryData.query) return str;
-                }
-                return defaultEncoder(str);
-            }
-        });
-        // TODO: do error handling here, possible errors like modelname is incorrect etc...
-        const sdResponse = await triggerGetSelectionDynamicValues(sdQs);
-
-        // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
-        const sdData = sdResponse.data.data;
-
-        // @ts-ignore
-        setSelectionDynamicItems(sdData);
-    }
-
-
-    return (
-        <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}
-                    field="label"
-                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                    dropdown
-                    suggestions={selectionDynamicItems}
-                    completeMethod={selectionDynamicSearch}
-                    // onChange={(e) => updateInputs(index, e.value)} />
-                    // onChange={formik.handleChange}
-                    onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
-                    className="solid-standard-autocomplete"
-                />
-            </div>
-        </div>
-    );
-}
-
-
-export const DefaultSelectionDynamicFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const value  =formik.values[fieldLayoutInfo.attrs.name];
-    
-    return (
-        <div className="mt-2 flex-column gap-2">
-            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
-            <p className="m-0">{value && value.label && value.label}</p>
-        </div>
-    );
-}
-