@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.3

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

@@ -1,16 +1,15 @@
 
-import { InputNumber } from "primereact/inputnumber";
-import { Message } from "primereact/message";
-import * as Yup from 'yup';
+import * as Yup from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
-import { Slider } from "primereact/slider";
-import styles from './solidFields.module.css'
+import styles from "./solidFields.module.css";
 import { useState } from "react";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { Range } from "react-range";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
+import { SolidNumberInput } from "../../../shad-cn-ui";
+import { SolidMessage } from "../../../shad-cn-ui/SolidMessage";
 
 export class SolidIntegerField implements ISolidField {
 
@@ -120,12 +119,13 @@ export const DefaultIntegerFormViewWidget = ({ formik, fieldContext }: SolidForm
     const fieldLayoutInfo = fieldContext.field;
     const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const value = formik.values[fieldLayoutInfo.attrs.name];
     return (
-        <div className="mt-2 flex-column gap-2">
+        <div className={styles.fieldViewWrapper}>
             {showFieldLabel !== false && (
-                <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
             )}
-            <p className="m-0">{formik.values[fieldLayoutInfo.attrs.name] && typeof formik.values[fieldLayoutInfo.attrs.name] !== "object" && formik.values[fieldLayoutInfo.attrs.name]}</p>
+            <p className={styles.fieldViewValue}>{value != null && typeof value !== "object" ? value : ''}</p>
         </div>
     );
 }
@@ -152,30 +152,29 @@ export const DefaultIntegerFormEditWidget = ({ formik, fieldContext }: SolidForm
     const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
     return (
-        <div className="relative">
-            <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4">
-                {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        <SolidFieldTooltip fieldContext={fieldContext} />
-                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                    </label>
-                }
-                <InputNumber
+        <div className={styles.fieldWrapper}>
+            {showFieldLabel != false &&
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                    {fieldLabel}
+                    {fieldMetadata.required && <span className="text-red-500">*</span>}
+                    <SolidFieldTooltip fieldContext={fieldContext} />
+                </label>
+            }
+            <div className={styles.fieldNumberWrapper}>
+                <SolidNumberInput
                     readOnly={formReadonly || fieldReadonly || readOnlyPermission}
                     disabled={formDisabled || fieldDisabled}
                     id={fieldLayoutInfo.attrs.name}
                     aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
                     onChange={(e: any) => {
-                        formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
+                        const nextVal = typeof e.value === "number" ? e.value : null;
+                        formik.setFieldValue(fieldLayoutInfo.attrs.name, nextVal);
                     }}
                     value={formik.values[fieldLayoutInfo.attrs.name] || ''}
                 />
             </div>
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <div className="absolute mt-1">
-                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                </div>
+                <p className={styles.fieldError}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
             )}
         </div>
     );
@@ -273,10 +272,10 @@ export const SolidIntegerSliderStyleFormEditWidget = ({ formik, fieldContext }:
                 </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <div className="absolute mt-2">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        <SolidMessage severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                     </div>
                 )}
             </div>
         </div>
     );
-};
+};

package/dist/components/core/form/fields/SolidJsonField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidJsonField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidJsonField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAMzE,qBAAa,cAAe,YAAW,WAAW;IAE9C,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IAInB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAgB9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAoC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAGD,eAAO,MAAM,yBAAyB,6BAA8B,yBAAyB,4CA0C5F,CAAA;AAID,eAAO,MAAM,yBAAyB,6BAA8B,yBAAyB,4CAwC5F,CAAA"}
+{"version":3,"file":"SolidJsonField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidJsonField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAKzE,qBAAa,cAAe,YAAW,WAAW;IAE9C,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IAInB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAgB9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAoC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAGD,eAAO,MAAM,yBAAyB,6BAA8B,yBAAyB,4CA+C5F,CAAA;AAID,eAAO,MAAM,yBAAyB,6BAA8B,yBAAyB,4CAsC5F,CAAA"}

package/dist/components/core/form/fields/SolidJsonField.js

@@ -10,15 +10,13 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import CodeEditor from "../../../../components/common/CodeEditor";
-import { Message } from "primereact/message";
+import { SolidMessage } from "../../../shad-cn-ui/SolidMessage";
 import * as Yup from 'yup';
 import { getExtensionComponent } from "../../../../helpers/registry";
-import { javascript } from '@codemirror/lang-javascript';
-import { oneDark } from '@codemirror/theme-one-dark';
-import CodeMirror, { EditorView } from '@uiw/react-codemirror'; // Correct import
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
+import { SolidCodeEditor } from "../../../shad-cn-ui";
+import styles from "./solidFields.module.css";
 var SolidJsonField = /** @class */ (function () {
     function SolidJsonField(fieldContext) {
         Object.defineProperty(this, "fieldContext", {
@@ -124,11 +122,18 @@ export var DefaultJsonFormEditWidget = function (_a) {
     var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
     var fieldReadonly = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.readonly;
     var formReadonly = (_j = (_h = (_g = solidFormViewMetaData.data.solidView) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.attrs) === null || _j === void 0 ? void 0 : _j.readonly;
-    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4", children: [showFieldLabel != false &&
-                        _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsx(CodeEditor, { formik: formik, field: fieldLayoutInfo.attrs.name, height: (_k = fieldLayoutInfo.attrs) === null || _k === void 0 ? void 0 : _k.height, fontSize: (_l = fieldLayoutInfo.attrs) === null || _l === void 0 ? void 0 : _l.fontSize, readOnly: formReadonly || fieldReadonly || readOnlyPermission })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_m = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _m === void 0 ? void 0 : _m.toString() }) }))] }));
+    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: styles.fieldWrapper, children: [showFieldLabel != false &&
+                        _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "".concat(styles.fieldLabel, " form-field-label"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsx(SolidCodeEditor, { value: (function () {
+                            var val = formik.values[fieldLayoutInfo.attrs.name];
+                            if (val == null)
+                                return "";
+                            if (typeof val === "string")
+                                return val;
+                            return JSON.stringify(val, null, 2);
+                        })(), onChange: function (next) { return formik.setFieldValue(fieldLayoutInfo.attrs.name, next); }, height: (_k = fieldLayoutInfo.attrs) === null || _k === void 0 ? void 0 : _k.height, fontSize: (_l = fieldLayoutInfo.attrs) === null || _l === void 0 ? void 0 : _l.fontSize, readOnly: formReadonly || fieldReadonly || readOnlyPermission, language: "json" })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(SolidMessage, { severity: "error", text: (_m = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _m === void 0 ? void 0 : _m.toString() }) }))] }));
 };
 export var DefaultJsonFormViewWidget = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
     var formik = _a.formik, fieldContext = _a.fieldContext;
     var fieldMetadata = fieldContext.fieldMetadata;
     var fieldLayoutInfo = fieldContext.field;
@@ -149,7 +154,7 @@ export var DefaultJsonFormViewWidget = function (_a) {
     else {
         code = JSON.stringify(value, null, 2);
     }
-    return (_jsxs("div", { className: "mt-2 flex-column gap-2", children: [showFieldLabel != false &&
-                _jsx("p", { className: "m-0", children: _jsx("span", { className: "form-field-label font-medium", children: fieldLabel }) }), _jsx(CodeMirror, { id: fieldLabel, value: code, height: (_g = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : '300px', style: { fontSize: '10px' }, theme: oneDark, readOnly: true, extensions: [javascript(), EditorView.lineWrapping] })] }));
+    return (_jsxs("div", { className: styles.fieldViewWrapper, children: [showFieldLabel != false &&
+                _jsx("p", { className: "".concat(styles.fieldViewLabel, " form-field-label"), children: fieldLabel }), _jsx(SolidCodeEditor, { value: code, height: (_g = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : '300px', fontSize: (_j = (_h = fieldLayoutInfo.attrs) === null || _h === void 0 ? void 0 : _h.fontSize) !== null && _j !== void 0 ? _j : '10px', readOnly: true, language: "json" })] }));
 };
 //# sourceMappingURL=SolidJsonField.js.map

package/dist/components/core/form/fields/SolidJsonField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidJsonField.js","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidJsonField.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport CodeEditor from \"../../../../components/common/CodeEditor\";\nimport { Message } from \"primereact/message\";\nimport * as Yup from 'yup';\nimport { FormikObject, ISolidField, SolidFieldProps } from \"./ISolidField\";\nimport { getExtensionComponent } from \"../../../../helpers/registry\";\nimport { SolidFormFieldWidgetProps } from \"../../../../types/solid-core\";\nimport { javascript } from '@codemirror/lang-javascript';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport CodeMirror, { EditorView } from '@uiw/react-codemirror'; // Correct import\nimport { SolidFieldTooltip } from \"../../../../components/common/SolidFieldTooltip\";\nimport { ERROR_MESSAGES } from \"../../../../constants/error-messages\";\nexport class SolidJsonField implements ISolidField {\n\n    private fieldContext: SolidFieldProps;\n\n    constructor(fieldContext: SolidFieldProps) {\n        this.fieldContext = fieldContext;\n    }\n\n    updateFormData(value: any, formData: FormData): any {\n        const fieldLayoutInfo = this.fieldContext.field;\n        if (value !== undefined && value !== null) {\n            formData.append(fieldLayoutInfo.attrs.name, value);\n        }\n    }\n\n    initialValue(): any {\n        return this.fieldContext.data[this.fieldContext.field.attrs.name] ?? '';\n    }\n\n    validationSchema(): Yup.Schema {\n        let schema: Yup.StringSchema<string | null | undefined> = Yup.string();\n\n        const fieldMetadata = this.fieldContext.fieldMetadata;\n        const fieldLayoutInfo = this.fieldContext.field;\n        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n\n        // 1. required \n        if (fieldMetadata.required) {\n            schema = schema.required(ERROR_MESSAGES.FIELD_REUQIRED(fieldLabel));\n        } else {\n            schema = schema.nullable(); // Allow null when not required\n        }\n        return schema;\n    }\n\n    render(formik: FormikObject) {\n        const fieldMetadata = this.fieldContext.fieldMetadata;\n        const fieldLayoutInfo = this.fieldContext.field;\n        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;\n        const className = fieldLayoutInfo.attrs?.className || 'field col-12';\n\n        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];\n\n        let viewWidget = fieldLayoutInfo.attrs.viewWidget;\n        let editWidget = fieldLayoutInfo.attrs.editWidget;\n        if (!editWidget) {\n            editWidget = 'DefaultJsonFormEditWidget';\n        }\n        if (!viewWidget) {\n            viewWidget = 'DefaultJsonFormViewWidget';\n        }\n        const viewMode: string = this.fieldContext.viewMode;\n        return (\n            <>\n                <div className={className}>\n                    {viewMode === \"view\" &&\n                        this.renderExtensionRenderMode(viewWidget, formik)\n                    }\n                    {viewMode === \"edit\" && (\n                        <>\n                            {editWidget &&\n                                this.renderExtensionRenderMode(editWidget, formik)\n                            }\n                        </>\n                    )\n                    }\n                </div>\n            </>\n        );\n    }\n\n    renderExtensionRenderMode(widget: string, formik: FormikObject) {\n        let DynamicWidget = getExtensionComponent(widget);\n        const widgetProps: SolidFormFieldWidgetProps = {\n            formik: formik,\n            fieldContext: this.fieldContext,\n        }\n        return (\n            <>\n                {DynamicWidget && <DynamicWidget {...widgetProps} />}\n            </>\n        )\n    }\n}\n\n\nexport const DefaultJsonFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const className = fieldLayoutInfo.attrs?.className || 'field col-12';\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;\n    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;\n    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;\n    const readOnlyPermission = fieldContext.readOnly;\n\n    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];\n\n    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;\n    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;\n\n    return (\n        <div className=\"relative\">\n            <div className=\"flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4\">\n                {showFieldLabel != false &&\n                    <label htmlFor={fieldLayoutInfo.attrs.name} className=\"form-field-label\">{fieldLabel}\n                        {fieldMetadata.required && <span className=\"text-red-500\"> *</span>}\n                        <SolidFieldTooltip fieldContext={fieldContext} />\n                        {/* &nbsp;   {fieldDescription && <span className=\"form_field_help\">({fieldDescription}) </span>} */}\n                    </label>\n                }\n                <CodeEditor\n                    formik={formik}\n                    field={fieldLayoutInfo.attrs.name}\n                    height={fieldLayoutInfo.attrs?.height}\n                    fontSize={fieldLayoutInfo.attrs?.fontSize}\n                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}\n                >\n                </CodeEditor>\n            </div>\n            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (\n                <div className=\"absolute mt-1\">\n                    <Message severity=\"error\" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />\n                </div>\n            )}\n        </div>\n    );\n}\n\n\n\nexport const DefaultJsonFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const className = fieldLayoutInfo.attrs?.className || 'field col-12';\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;\n    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;\n\n    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;\n    let code;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n\n    if (value == null) {\n        // null or undefined → empty string\n        code = \"\";\n    } else if (typeof value === \"string\") {\n        code = value;\n    } else {\n        code = JSON.stringify(value, null, 2);\n    }\n\n    return (\n\n\n        <div className=\"mt-2 flex-column gap-2\">\n            {showFieldLabel != false &&\n                <p className=\"m-0\"><span className=\"form-field-label font-medium\">{fieldLabel}</span></p>\n            }\n            <CodeMirror\n                id={fieldLabel}\n                value={code}\n                height={fieldLayoutInfo.attrs?.height ?? '300px'}\n                style={{ fontSize: '10px' }}\n                theme={oneDark}\n                readOnly={true}\n                extensions={[javascript(), EditorView.lineWrapping]}\n            />\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"SolidJsonField.js","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidJsonField.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { SolidMessage } from \"../../../shad-cn-ui/SolidMessage\";\nimport * as Yup from 'yup';\nimport { FormikObject, ISolidField, SolidFieldProps } from \"./ISolidField\";\nimport { getExtensionComponent } from \"../../../../helpers/registry\";\nimport { SolidFormFieldWidgetProps } from \"../../../../types/solid-core\";\nimport { SolidFieldTooltip } from \"../../../../components/common/SolidFieldTooltip\";\nimport { ERROR_MESSAGES } from \"../../../../constants/error-messages\";\nimport { SolidCodeEditor } from \"../../../shad-cn-ui\";\nimport styles from \"./solidFields.module.css\";\nexport class SolidJsonField implements ISolidField {\n\n    private fieldContext: SolidFieldProps;\n\n    constructor(fieldContext: SolidFieldProps) {\n        this.fieldContext = fieldContext;\n    }\n\n    updateFormData(value: any, formData: FormData): any {\n        const fieldLayoutInfo = this.fieldContext.field;\n        if (value !== undefined && value !== null) {\n            formData.append(fieldLayoutInfo.attrs.name, value);\n        }\n    }\n\n    initialValue(): any {\n        return this.fieldContext.data[this.fieldContext.field.attrs.name] ?? '';\n    }\n\n    validationSchema(): Yup.Schema {\n        let schema: Yup.StringSchema<string | null | undefined> = Yup.string();\n\n        const fieldMetadata = this.fieldContext.fieldMetadata;\n        const fieldLayoutInfo = this.fieldContext.field;\n        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n\n        // 1. required \n        if (fieldMetadata.required) {\n            schema = schema.required(ERROR_MESSAGES.FIELD_REUQIRED(fieldLabel));\n        } else {\n            schema = schema.nullable(); // Allow null when not required\n        }\n        return schema;\n    }\n\n    render(formik: FormikObject) {\n        const fieldMetadata = this.fieldContext.fieldMetadata;\n        const fieldLayoutInfo = this.fieldContext.field;\n        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;\n        const className = fieldLayoutInfo.attrs?.className || 'field col-12';\n\n        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];\n\n        let viewWidget = fieldLayoutInfo.attrs.viewWidget;\n        let editWidget = fieldLayoutInfo.attrs.editWidget;\n        if (!editWidget) {\n            editWidget = 'DefaultJsonFormEditWidget';\n        }\n        if (!viewWidget) {\n            viewWidget = 'DefaultJsonFormViewWidget';\n        }\n        const viewMode: string = this.fieldContext.viewMode;\n        return (\n            <>\n                <div className={className}>\n                    {viewMode === \"view\" &&\n                        this.renderExtensionRenderMode(viewWidget, formik)\n                    }\n                    {viewMode === \"edit\" && (\n                        <>\n                            {editWidget &&\n                                this.renderExtensionRenderMode(editWidget, formik)\n                            }\n                        </>\n                    )\n                    }\n                </div>\n            </>\n        );\n    }\n\n    renderExtensionRenderMode(widget: string, formik: FormikObject) {\n        let DynamicWidget = getExtensionComponent(widget);\n        const widgetProps: SolidFormFieldWidgetProps = {\n            formik: formik,\n            fieldContext: this.fieldContext,\n        }\n        return (\n            <>\n                {DynamicWidget && <DynamicWidget {...widgetProps} />}\n            </>\n        )\n    }\n}\n\n\nexport const DefaultJsonFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const className = fieldLayoutInfo.attrs?.className || 'field col-12';\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;\n    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;\n    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;\n    const readOnlyPermission = fieldContext.readOnly;\n\n    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];\n\n    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;\n    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;\n\n    return (\n        <div className=\"relative\">\n            <div className={styles.fieldWrapper}>\n                {showFieldLabel != false &&\n                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}\n                        {fieldMetadata.required && <span className=\"text-red-500\"> *</span>}\n                        <SolidFieldTooltip fieldContext={fieldContext} />\n                        {/* &nbsp;   {fieldDescription && <span className=\"form_field_help\">({fieldDescription}) </span>} */}\n                    </label>\n                }\n                <SolidCodeEditor\n                    value={(() => {\n                        const val = formik.values[fieldLayoutInfo.attrs.name];\n                        if (val == null) return \"\";\n                        if (typeof val === \"string\") return val;\n                        return JSON.stringify(val, null, 2);\n                    })()}\n                    onChange={(next) => formik.setFieldValue(fieldLayoutInfo.attrs.name, next)}\n                    height={fieldLayoutInfo.attrs?.height}\n                    fontSize={fieldLayoutInfo.attrs?.fontSize}\n                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}\n                    language=\"json\"\n                />\n            </div>\n            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (\n                <div className=\"absolute mt-1\">\n                    <SolidMessage severity=\"error\" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />\n                </div>\n            )}\n        </div>\n    );\n}\n\n\n\nexport const DefaultJsonFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const className = fieldLayoutInfo.attrs?.className || 'field col-12';\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;\n    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;\n\n    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;\n    let code;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n\n    if (value == null) {\n        // null or undefined → empty string\n        code = \"\";\n    } else if (typeof value === \"string\") {\n        code = value;\n    } else {\n        code = JSON.stringify(value, null, 2);\n    }\n\n    return (\n\n\n        <div className={styles.fieldViewWrapper}>\n            {showFieldLabel != false &&\n                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>\n            }\n            <SolidCodeEditor\n                value={code}\n                height={fieldLayoutInfo.attrs?.height ?? '300px'}\n                fontSize={fieldLayoutInfo.attrs?.fontSize ?? '10px'}\n                readOnly={true}\n                language=\"json\"\n            />\n        </div>\n    );\n}\n"]}

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

@@ -1,15 +1,13 @@
 
-import CodeEditor from "../../../../components/common/CodeEditor";
-import { Message } from "primereact/message";
+import { SolidMessage } from "../../../shad-cn-ui/SolidMessage";
 import * as Yup from 'yup';
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
-import { javascript } from '@codemirror/lang-javascript';
-import { oneDark } from '@codemirror/theme-one-dark';
-import CodeMirror, { EditorView } from '@uiw/react-codemirror'; // Correct import
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
+import { SolidCodeEditor } from "../../../shad-cn-ui";
+import styles from "./solidFields.module.css";
 export class SolidJsonField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
@@ -114,26 +112,31 @@ export const DefaultJsonFormEditWidget = ({ formik, fieldContext }: SolidFormFie
 
     return (
         <div className="relative">
-            <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4">
+            <div className={styles.fieldWrapper}>
                 {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
                         {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                     </label>
                 }
-                <CodeEditor
-                    formik={formik}
-                    field={fieldLayoutInfo.attrs.name}
+                <SolidCodeEditor
+                    value={(() => {
+                        const val = formik.values[fieldLayoutInfo.attrs.name];
+                        if (val == null) return "";
+                        if (typeof val === "string") return val;
+                        return JSON.stringify(val, null, 2);
+                    })()}
+                    onChange={(next) => formik.setFieldValue(fieldLayoutInfo.attrs.name, next)}
                     height={fieldLayoutInfo.attrs?.height}
                     fontSize={fieldLayoutInfo.attrs?.fontSize}
                     readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                >
-                </CodeEditor>
+                    language="json"
+                />
             </div>
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                 <div className="absolute mt-1">
-                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    <SolidMessage severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 </div>
             )}
         </div>
@@ -167,18 +170,16 @@ export const DefaultJsonFormViewWidget = ({ formik, fieldContext }: SolidFormFie
     return (
 
 
-        <div className="mt-2 flex-column gap-2">
+        <div className={styles.fieldViewWrapper}>
             {showFieldLabel != false &&
-                <p className="m-0"><span className="form-field-label font-medium">{fieldLabel}</span></p>
+                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
             }
-            <CodeMirror
-                id={fieldLabel}
+            <SolidCodeEditor
                 value={code}
                 height={fieldLayoutInfo.attrs?.height ?? '300px'}
-                style={{ fontSize: '10px' }}
-                theme={oneDark}
+                fontSize={fieldLayoutInfo.attrs?.fontSize ?? '10px'}
                 readOnly={true}
-                extensions={[javascript(), EditorView.lineWrapping]}
+                language="json"
             />
         </div>
     );

package/dist/components/core/form/fields/SolidLongTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidLongTextField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidLongTextField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAI3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAUzE,qBAAa,kBAAmB,YAAW,WAAW;IAElD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IASnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IA6B9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAmC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAajE;AAED,eAAO,MAAM,6BAA6B,6BAA8B,yBAAyB,4CA8ChG,CAAA;AAED,eAAO,MAAM,+BAA+B,6BAA8B,yBAAyB,4CAwHlG,CAAA;AAED,eAAO,MAAM,+BAA+B,6BAA8B,yBAAyB,4CA2LlG,CAAC;AAEF,eAAO,MAAM,wBAAwB,6BAA8B,yBAAyB,4CAiD3F,CAAC;AAEF,eAAO,MAAM,gCAAgC,8BAG1C,yBAAyB,4CAkF3B,CAAC"}
+{"version":3,"file":"SolidLongTextField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidLongTextField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAQzE,qBAAa,kBAAmB,YAAW,WAAW;IAElD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IASnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IA6B9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAmC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAajE;AAED,eAAO,MAAM,6BAA6B,6BAA8B,yBAAyB,4CAyChG,CAAA;AAED,eAAO,MAAM,+BAA+B,6BAA8B,yBAAyB,4CAiHlG,CAAA;AAED,eAAO,MAAM,+BAA+B,6BAA8B,yBAAyB,4CAuLlG,CAAC;AAEF,eAAO,MAAM,wBAAwB,6BAA8B,yBAAyB,4CA0C3F,CAAC;AAEF,eAAO,MAAM,gCAAgC,8BAG1C,yBAAyB,4CAiF3B,CAAC"}

package/dist/components/core/form/fields/SolidLongTextField.js

@@ -19,19 +19,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InputTextarea } from "primereact/inputtextarea";
-import { Message } from "primereact/message";
 import * as Yup from 'yup';
-// import { Editor } from "primereact/editor";
+import styles from './solidFields.module.css';
 import { useState } from "react";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
-import Editor from '@monaco-editor/react';
-import { Calendar } from "primereact/calendar";
-import { Dropdown } from "primereact/dropdown";
-import { InputText } from "primereact/inputtext";
-import { Button } from "primereact/button";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
+import { SolidButton, SolidDatePicker, SolidSelect, SolidInput, SolidCodeEditor, SolidIcon } from "../../../shad-cn-ui";
+import { parseSolidIconMeta } from "../../../shad-cn-ui/SolidIcon";
+import { SolidMessage } from "../../../shad-cn-ui/SolidMessage";
 var SolidLongTextField = /** @class */ (function () {
     function SolidLongTextField(fieldContext) {
         Object.defineProperty(this, "fieldContext", {
@@ -150,10 +146,8 @@ export var DefaultLongTextFormEditWidget = function (_a) {
     var formDisabled = (_h = (_g = (_f = solidFormViewMetaData.data.solidView) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.attrs) === null || _h === void 0 ? void 0 : _h.disabled;
     var formReadonly = (_l = (_k = (_j = solidFormViewMetaData.data.solidView) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.attrs) === null || _l === void 0 ? void 0 : _l.readonly;
     var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
-    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4", children: [showFieldLabel != false &&
-                        _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsx(InputTextarea, { readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled, id: fieldLayoutInfo.attrs.name, "aria-describedby": "".concat(fieldLayoutInfo.attrs.name, "-help"), 
-                        // onChange={formik.handleChange}
-                        onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, value: formik.values[fieldLayoutInfo.attrs.name] || '', rows: 5, cols: 30 })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_m = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _m === void 0 ? void 0 : _m.toString() }) }))] }));
+    return (_jsxs("div", { className: styles.fieldWrapper, children: [showFieldLabel != false &&
+                _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: styles.fieldLabel, children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: "*" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsx("textarea", { readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled, id: fieldLayoutInfo.attrs.name, "aria-describedby": "".concat(fieldLayoutInfo.attrs.name, "-help"), onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, value: formik.values[fieldLayoutInfo.attrs.name] || '', rows: 5, className: styles.fieldTextarea }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("p", { className: styles.fieldError, children: (_m = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _m === void 0 ? void 0 : _m.toString() }))] }));
 };
 export var DynamicJsonEditorFormViewWidget = function (_a) {
     var _b, _c, _d, _e, _f;
@@ -163,9 +157,8 @@ export var DynamicJsonEditorFormViewWidget = function (_a) {
     var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
     var readOnly = ((_c = fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.readonly) || fieldContext.readOnly;
     var disabled = (_d = fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.disabled;
-    // Default to SQL
-    var language = fieldLayoutInfo.attrs.editorLanguage || 'ts';
     var value = formik.values[fieldLayoutInfo.attrs.name] || '';
+    var codeLanguage = fieldLayoutInfo.attrs.editorLanguage || 'ts';
     var isFormFieldValid = function (formik, fieldName) {
         return formik.touched[fieldName] && formik.errors[fieldName];
     };
@@ -188,7 +181,7 @@ export var DynamicJsonEditorFormViewWidget = function (_a) {
     // };
     var fieldJsonSchema = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.jsonSchema;
     if (!fieldJsonSchema) {
-        return _jsx(Message, { severity: "error", text: "Field Layout Attributes are missing jsonSchema, cannot render with widget jsonEditor without specifying the schema" });
+        return _jsx(SolidMessage, { severity: "error", text: "Field Layout Attributes are missing jsonSchema, cannot render with widget jsonEditor without specifying the schema" });
     }
     var _g = useState(JSON.parse(value || '[]')), data = _g[0], setData = _g[1];
     var renderInput = function (value, key, index) {
@@ -197,22 +190,22 @@ export var DynamicJsonEditorFormViewWidget = function (_a) {
         if (!meta)
             return null;
         if (meta.type === "string" || meta.type === "shortText") {
-            return (_jsx(InputText, { value: value, readOnly: true, disabled: true }));
+            return _jsx(SolidInput, { value: value, readOnly: true, disabled: true });
         }
         if (meta.type === "longText") {
-            return (_jsx(InputTextarea, { value: value, rows: 10, cols: 100, readOnly: true }));
+            return (_jsx("textarea", { value: value, rows: 10, cols: 100, readOnly: true, className: styles.fieldTextarea }));
         }
         if (meta.type === "date" || meta.type === "datetime") {
-            return (_jsx(Calendar, { value: value ? new Date(value) : null, showTime: meta.type === "datetime", dateFormat: "yy-mm-dd", readOnlyInput: true, disabled: true }));
+            return (_jsx(SolidDatePicker, { selected: value ? new Date(value) : null, onChange: function () { }, showTimeSelect: meta.type === "datetime", disabled: true }));
         }
         if (meta.type === "selectionStatic") {
-            return (_jsx(Dropdown, { value: value, 
+            return (_jsx(SolidSelect, { value: value, 
                 // @ts-ignore
-                options: meta.allowedValues.map(function (v) { return ({ label: v, value: v }); }), placeholder: "Select.", readOnly: true, disabled: true }));
+                options: meta.allowedValues.map(function (v) { return ({ label: v, value: v }); }), placeholder: "Select.", disabled: true }));
         }
         return null;
     };
-    return (_jsxs("div", { className: "mt-4", children: [((_f = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.showLabel) !== false && (_jsxs("label", { className: "form-field-label mb-10", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsx("div", { className: "p-4 border-round surface-card shadow-1", children: _jsx("div", { className: "flex flex-column gap-2", children: 
+    return (_jsxs("div", { className: "mt-4", children: [((_f = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.showLabel) !== false && (_jsxs("label", { className: "".concat(styles.fieldLabel, " form-field-label mb-10"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsx("div", { className: "p-4 border-round surface-card shadow-1", children: _jsx("div", { className: "flex flex-column gap-2", children: 
                     // @ts-ignore
                     data.map(function (row, idx) {
                         var _a, _b;
@@ -229,8 +222,6 @@ export var DynamicJsonEditorFormEditWidget = function (_a) {
     var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
     var readOnly = ((_c = fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.readonly) || fieldContext.readOnly;
     var disabled = (_d = fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.disabled;
-    // Default to SQL
-    var language = fieldLayoutInfo.attrs.editorLanguage || 'ts';
     var value = formik.values[fieldLayoutInfo.attrs.name] || '';
     var isFormFieldValid = function (formik, fieldName) {
         return formik.touched[fieldName] && formik.errors[fieldName];
@@ -254,7 +245,7 @@ export var DynamicJsonEditorFormEditWidget = function (_a) {
     // };
     var fieldJsonSchema = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.jsonSchema;
     if (!fieldJsonSchema) {
-        return _jsx(Message, { severity: "error", text: "Field Layout Attributes are missing jsonSchema, cannot render with widget jsonEditor without specifying the schema" });
+        return _jsx(SolidMessage, { severity: "error", text: "Field Layout Attributes are missing jsonSchema, cannot render with widget jsonEditor without specifying the schema" });
     }
     var _h = useState(JSON.parse(value || '[]')), data = _h[0], setData = _h[1];
     var handleAllChange = function (updated) {
@@ -287,52 +278,45 @@ export var DynamicJsonEditorFormEditWidget = function (_a) {
         if (!meta)
             return null;
         if (meta.type === "string" || meta.type === "shortText") {
-            return (_jsx(InputText, { value: value, onChange: function (e) { return handleChange(index, key, e.target.value); }, disabled: !!disabled, readOnly: !!readOnly }));
+            return (_jsx(SolidInput, { value: value, onChange: function (e) { return handleChange(index, key, e.target.value); }, disabled: !!disabled, readOnly: !!readOnly }));
         }
         if (meta.type === "longText") {
-            return (_jsx(InputTextarea, { onChange: function (e) { return handleChange(index, key, e.target.value); }, value: value, rows: 10, cols: 100 }));
+            return (_jsx("textarea", { onChange: function (e) { return handleChange(index, key, e.target.value); }, value: value, rows: 10, cols: 100, className: styles.fieldTextarea }));
         }
         if (meta.type === "date" || meta.type === "datetime") {
-            return (_jsx(Calendar, { value: value ? new Date(value) : null, onChange: function (e) { return handleChange(index, key, e.value); }, showTime: meta.type === "datetime", dateFormat: "yy-mm-dd", disabled: !!disabled, readOnlyInput: !!readOnly }));
+            return (_jsx(SolidDatePicker, { selected: value ? new Date(value) : null, onChange: function (date) { return handleChange(index, key, date); }, showTimeSelect: meta.type === "datetime", disabled: !!disabled }));
         }
         if (meta.type === "selectionStatic") {
-            return (_jsx(Dropdown, { value: value, 
+            return (_jsx(SolidSelect, { value: value, 
                 // @ts-ignore
-                options: meta.allowedValues.map(function (v) { return ({ label: v, value: v }); }), onChange: function (e) { return handleChange(index, key, e.value); }, placeholder: "Select.", disabled: !!disabled, readOnly: !!readOnly }));
+                options: meta.allowedValues.map(function (v) { return ({ label: v, value: v }); }), onChange: function (e) { return handleChange(index, key, e.value); }, placeholder: "Select.", disabled: !!disabled }));
         }
         return null;
     };
-    return (_jsxs("div", { className: "mt-4", children: [((_f = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.showLabel) !== false && (_jsxs("label", { className: "form-field-label mb-10", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsxs("div", { className: "p-4 border-round surface-card shadow-1", children: [_jsx("div", { className: "flex justify-content-between align-items-center mb-3", children: !disabled && !readOnly ? (_jsx(Button, { type: "button", label: "Add", icon: "pi pi-plus", onClick: handleAdd })) : null }), _jsx("div", { className: "flex flex-column gap-2", children: 
+    return (_jsxs("div", { className: "mt-4", children: [((_f = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.showLabel) !== false && (_jsxs("label", { className: "".concat(styles.fieldLabel, " form-field-label mb-10"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsxs("div", { className: "p-4 border-round surface-card shadow-1", children: [_jsx("div", { className: "flex justify-content-between align-items-center mb-3", children: !disabled && !readOnly ? (_jsx(SolidButton, { type: "button", leftIcon: _jsx(SolidIcon, { name: "si-plus", "aria-hidden": true }), onClick: handleAdd, children: "Add" })) : null }), _jsx("div", { className: "flex flex-column gap-2", children: 
                         // @ts-ignore
                         data.map(function (row, idx) {
                             var _a, _b;
                             return (_jsxs("div", { className: "flex ".concat(((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) ? "flex-".concat((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) : 'flex-row', " border-1 border-round p-3 gap-2"), children: [_jsx("div", { className: "flex gap-3 align-items-center", children: Object.keys(fieldJsonSchema).map(function (key) { return (_jsxs("div", { className: "flex flex-column gap-1", children: [_jsx("label", { children: key.charAt(0).toUpperCase() + key.slice(1) }), 
                                                 // @ts-ignore
-                                                renderInput(row[key], key, idx)] }, key)); }) }), !disabled && !readOnly ? (_jsx(Button, { type: "button", icon: "pi pi-minus", className: "ml-2 h-2rem w-2rem rounded-circle", onClick: function () { return handleRemove(idx); } })) : null] }, idx));
+                                                renderInput(row[key], key, idx)] }, key)); }) }), !disabled && !readOnly ? (_jsx(SolidButton, { type: "button", leftIcon: _jsx(SolidIcon, { name: "si-minus", "aria-hidden": true }), className: "ml-2 h-2rem w-2rem rounded-circle", onClick: function () { return handleRemove(idx); } })) : null] }, idx));
                         }) }), ((_g = fieldLayoutInfo.attrs) === null || _g === void 0 ? void 0 : _g.jsonSchemaShowPreview) &&
                         _jsx("pre", { className: "mt-4 bg-gray-100 p-3 border-round overflow-auto", children: JSON.stringify(data, null, 2) })] })] }));
 };
 export var CodeEditorFormEditWidget = function (_a) {
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var formik = _a.formik, fieldContext = _a.fieldContext;
     var fieldMetadata = fieldContext.fieldMetadata;
     var fieldLayoutInfo = fieldContext.field;
     var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
     var readOnly = ((_c = fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.readonly) || fieldContext.readOnly;
     var disabled = (_d = fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.disabled;
-    // Default to SQL
-    var language = fieldLayoutInfo.attrs.editorLanguage || 'ts';
+    var codeLanguage = fieldLayoutInfo.attrs.editorLanguage || 'ts';
     var value = formik.values[fieldLayoutInfo.attrs.name] || '';
     var isFormFieldValid = function (formik, fieldName) {
         return formik.touched[fieldName] && formik.errors[fieldName];
     };
-    return (_jsxs("div", { className: "mt-4", children: [((_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.showLabel) !== false && (_jsxs("label", { className: "form-field-label mb-10", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsx("div", { className: "border border-gray-300 rounded overflow-hidden", children: _jsx(Editor, { height: "200px", defaultLanguage: language, value: value, onChange: function (val) { return formik.setFieldValue(fieldLayoutInfo.attrs.name, val); }, options: {
-                        readOnly: readOnly,
-                        minimap: { enabled: false },
-                        lineNumbers: 'on',
-                        fontSize: 14,
-                        scrollBeyondLastLine: false,
-                    } }) }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "mt-1", children: _jsx(Message, { text: (_f = formik.errors[fieldLayoutInfo.attrs.name]) === null || _f === void 0 ? void 0 : _f.toString() }) }))] }));
+    return (_jsxs("div", { className: "mt-4", children: [((_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.showLabel) !== false && (_jsxs("label", { className: "".concat(styles.fieldLabel, " form-field-label mb-10"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsx("div", { className: "border border-gray-300 rounded overflow-hidden", children: _jsx(SolidCodeEditor, { value: value, onChange: function (val) { return formik.setFieldValue(fieldLayoutInfo.attrs.name, val); }, height: (_g = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : "200px", fontSize: (_j = (_h = fieldLayoutInfo.attrs) === null || _h === void 0 ? void 0 : _h.fontSize) !== null && _j !== void 0 ? _j : "14px", readOnly: readOnly || disabled, language: codeLanguage }) }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "mt-1", children: _jsx(SolidMessage, { text: (_k = formik.errors[fieldLayoutInfo.attrs.name]) === null || _k === void 0 ? void 0 : _k.toString() }) }))] }));
 };
 export var DynamicSelectionStaticEditWidget = function (_a) {
     var _b, _c;
@@ -354,10 +338,10 @@ export var DynamicSelectionStaticEditWidget = function (_a) {
         var meta = fieldJsonSchema[key];
         var val = data[key];
         if ((meta === null || meta === void 0 ? void 0 : meta.type) === "selectionStatic") {
-            return (_jsx(Dropdown, { value: val, options: meta.allowedValues.map(function (v) { return ({
+            return (_jsx(SolidSelect, { value: val, options: meta.allowedValues.map(function (v) { return ({
                     label: v,
                     value: v,
-                }); }), onChange: function (e) { return handleChange(key, e.value); }, placeholder: meta.placeHolder || "Select.", disabled: !!disabled, readOnly: !!readOnly, className: "w-full" }));
+                }); }), onChange: function (e) { return handleChange(key, e.value); }, placeholder: meta.placeHolder || "Select.", disabled: !!disabled, className: "w-full" }));
         }
         return null;
     };
@@ -376,7 +360,7 @@ export var DynamicSelectionStaticEditWidget = function (_a) {
             var meta = fieldJsonSchema[key];
             if (!shouldShowField(key))
                 return null;
-            return (_jsxs("div", { className: "flex flex-column gap-2 " + (meta.className || ''), children: [(meta.headerText || meta.headerIcon) && (_jsxs("div", { className: "flex align-items-center gap-2", children: [meta.headerIcon && _jsx("i", { className: meta.headerIcon }), _jsx("span", { className: "font-semibold form-field-label font-medium", children: (_a = meta.headerText) !== null && _a !== void 0 ? _a : key })] })), meta.noteText && (_jsx("small", { className: "text-secondary mt-2", children: meta.noteText })), _jsxs("label", { className: "form-field-label font-medium", children: [key.charAt(0).toUpperCase() + key.slice(1), " ", meta.required && _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("div", { className: "w-full mt-1 flex flex-row gap-2", children: renderInput(key) })] }, key));
+            return (_jsxs("div", { className: "flex flex-column gap-2 " + (meta.className || ''), children: [(meta.headerText || meta.headerIcon) && (_jsxs("div", { className: "flex align-items-center gap-2", children: [meta.headerIcon && (function () { var m = parseSolidIconMeta(meta.headerIcon); return m ? _jsx(SolidIcon, { name: m.name, spin: m.spin }) : _jsx("i", { className: meta.headerIcon }); })(), _jsx("span", { className: "font-semibold form-field-label font-medium", children: (_a = meta.headerText) !== null && _a !== void 0 ? _a : key })] })), meta.noteText && (_jsx("small", { className: "text-secondary mt-2", children: meta.noteText })), _jsxs("label", { className: "form-field-label font-medium", children: [key.charAt(0).toUpperCase() + key.slice(1), " ", meta.required && _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("div", { className: "w-full mt-1 flex flex-row gap-2", children: renderInput(key) })] }, key));
         }) }));
 };
 //# sourceMappingURL=SolidLongTextField.js.map