@solidstarters/solid-core-ui 0.1.26

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

@@ -0,0 +1,64 @@
+import { FieldConfig, FieldHelperProps, FieldInputProps, FieldMetaProps, FormikConfig, FormikErrors, FormikState, FormikTouched, FormikValues } from "formik";
+import { Schema } from "yup";
+
+export type SolidFieldProps = {
+    solidFormViewMetaData: any;
+    fieldMetadata: any,
+    field: any,
+    data: any,
+    modelName?: any
+};
+
+export type FormikObject = {
+    initialValues: FormikValues;
+    initialErrors: FormikErrors<unknown>;
+    initialTouched: FormikTouched<unknown>;
+    initialStatus: any;
+    handleBlur: {
+        (e: React.FocusEvent<any, Element>): void;
+        <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
+    };
+    handleChange: {
+        (e: React.ChangeEvent<any>): void;
+        <T_1 = string | React.ChangeEvent<any>>(field: T_1): T_1 extends React.ChangeEvent<any> ? void : (e: string | React.ChangeEvent<any>) => void;
+    };
+    handleReset: (e: any) => void;
+    handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void;
+    resetForm: (nextState?: Partial<FormikState<FormikValues>>) => void;
+    setErrors: (errors: FormikErrors<FormikValues>) => void;
+    setFormikState: (stateOrCb: FormikState<FormikValues> | ((state: FormikState<FormikValues>) => FormikState<FormikValues>)) => void;
+    setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => Promise<FormikErrors<FormikValues>> | Promise<void>;
+    setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise<FormikErrors<FormikValues>> | Promise<void>;
+    setFieldError: (field: string, value: string | undefined) => void;
+    setStatus: (status: any) => void;
+    setSubmitting: (isSubmitting: boolean) => void;
+    setTouched: (touched: FormikTouched<FormikValues>, shouldValidate?: boolean) => Promise<FormikErrors<FormikValues>> | Promise<void>;
+    setValues: (values: React.SetStateAction<FormikValues>, shouldValidate?: boolean) => Promise<FormikErrors<FormikValues>> | Promise<void>;
+    submitForm: () => Promise<any>;
+    validateForm: (values?: FormikValues) => Promise<FormikErrors<FormikValues>>;
+    validateField: (name: string) => Promise<void> | Promise<string | undefined>;
+    isValid: boolean;
+    dirty: boolean;
+    unregisterField: (name: string) => void;
+    registerField: (name: string, { validate }: any) => void;
+    getFieldProps: (nameOrOptions: string | FieldConfig<any>) => FieldInputProps<any>;
+    getFieldMeta: (name: string) => FieldMetaProps<any>;
+    getFieldHelpers: (name: string) => FieldHelperProps<any>;
+    validateOnBlur: boolean;
+    validateOnChange: boolean;
+    validateOnMount: boolean;
+    values: FormikValues;
+    errors: FormikErrors<FormikValues>;
+    touched: FormikTouched<FormikValues>;
+    isSubmitting: boolean;
+    isValidating: boolean;
+    status?: any;
+    submitCount: number;
+}
+
+export interface ISolidField {
+    initialValue(): any;
+    validationSchema(): Schema;
+    render(formik: FormikObject): React.JSX.Element;
+    updateFormData(value: any, formData: FormData): any;
+}

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

@@ -0,0 +1,112 @@
+import { Message } from "primereact/message";
+import { SelectButton } from "primereact/selectbutton";
+import { classNames } from "primereact/utils";
+import { useEffect } from "react";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidBooleanField 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 === "true" ? "true" : "");
+        }
+    }
+
+    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 className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const booleanOptions = ["false", "true"];
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        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="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="s-input">
+                    {/* <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}
+                        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-inputtext-sm w-full small-input flex boolean-switch", {
+                            "p-invalid": isFormFieldValid(formik, "defaultValue"),
+                        })}
+
+                    />
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,89 @@
+import { Calendar } from "primereact/calendar";
+import { Message } from "primereact/message";
+import { useRef } from "react";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidDateField 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.DateSchema = Yup.date();
+        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 || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const calendarRef = useRef<any>(null); // Reference for the Calendar component
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        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="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="flex-auto">
+                    <Calendar
+                        disabled={formDisabled || fieldDisabled}
+                        ref={calendarRef} // Attach ref to Calendar
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={formik.handleChange}
+                        //@ts-ignore
+                        value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
+                        // dateFormat="mm/dd/yy"
+                        // placeholder="mm/dd/yyyy hh:mm"
+                        mask="99/99/9999 99:99"
+                        hideOnDateTimeSelect
+                        className=""
+
+
+                    />
+                </div>
+
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,87 @@
+import { Calendar } from "primereact/calendar";
+import { Message } from "primereact/message";
+import { useRef } from "react";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidDateTimeField 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.DateSchema = Yup.date();
+        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 || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const calendarRef = useRef<any>(null); // Reference for the Calendar component
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+
+        return (
+            <div className={className}>
+                <div className="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="flex-auto">
+                    <Calendar
+                        disabled={formDisabled || fieldDisabled}
+                        ref={calendarRef} // Attach ref to Calendar
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={formik.handleChange}
+                        //@ts-ignore
+                        value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
+                        // dateFormat="mm/dd/yy"
+                        // placeholder="mm/dd/yyyy hh:mm"
+                        mask="99/99/9999 99:99"
+                        hideOnDateTimeSelect
+                        showTime className=""
+                        hourFormat="24"
+
+                    />
+                </div>
+
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,85 @@
+import { InputNumber } from "primereact/inputnumber";
+import { Message } from "primereact/message";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidDecimalField 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.NumberSchema<number | null | undefined> = Yup.number();
+
+        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
+        }
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        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="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="s-input">
+                    <InputNumber
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        id={fieldLayoutInfo.attrs.name}
+                        minFractionDigits={2}
+                        className="small-input"
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={(e: any) => {
+                            formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
+                        }}
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    />
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,85 @@
+import { InputNumber } from "primereact/inputnumber";
+import { Message } from "primereact/message";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidIntegerField 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.NumberSchema<number | null | undefined> = Yup.number();
+
+
+        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
+        }
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        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="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="s-input">
+                    <InputNumber
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        id={fieldLayoutInfo.attrs.name}
+                        className="small-input"
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={(e: any) => {
+                            formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
+                        }}
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    />
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,79 @@
+import CodeEditor from "@/components/common/CodeEditor";
+import { Message } from "primereact/message";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidJsonField 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
+        }
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+        return (
+            <div className={className}>
+                <div className="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="s-input">
+                    <CodeEditor
+                        formik={formik}
+                        field={fieldLayoutInfo.attrs.name}
+                        height={fieldLayoutInfo.attrs?.height}
+                        fontSize={fieldLayoutInfo.attrs?.fontSize}
+                        readOnly={formReadonly || fieldReadonly}
+                    >
+                    </CodeEditor>
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                </div>
+            </div>
+        );
+    }
+}