@dappworks/kit 0.4.82 → 0.4.83

package/dist/form.mjs

@@ -2,10 +2,10 @@ import { useStore } from './chunk-DZMNL4BZ.mjs';
 import { RootStore } from './chunk-HRWHDF2F.mjs';
 import { helper } from './chunk-XAIZMT2F.mjs';
 import { _ } from './chunk-MGU3KYGC.mjs';
-import { cn } from './chunk-6UHBBDKI.mjs';
+import { cn } from './chunk-TMFAGW4V.mjs';
 import { __objRest, __spreadValues, __spreadProps } from './chunk-6F7H4PAA.mjs';
-import React6, { useEffect, useMemo, useState, createRef } from 'react';
-import { Modal, ModalContent, ModalHeader, ModalBody, Checkbox, Input, Button, Textarea, Card, Tabs, Tab } from '@nextui-org/react';
+import React6, { useEffect, useMemo, useState, useCallback, useRef, createRef } from 'react';
+import { Modal, ModalContent, ModalHeader, ModalBody, Checkbox, Input, Select, SelectItem, Button, Textarea, DatePicker, Card, Tabs, Tab } from '@nextui-org/react';
 import { Check, ChevronUp, ChevronDown } from 'lucide-react';
 import MonacoEditor from '@monaco-editor/react';
 import validator from '@rjsf/validator-ajv8';
@@ -13,6 +13,7 @@ import { makeAutoObservable, makeObservable, computed, observable, action, toJS
 import Form from '@rjsf/core';
 import * as Utils from '@rjsf/utils';
 import { observer, useLocalObservable } from 'mobx-react-lite';
+import { parseAbsoluteToLocal } from '@internationalized/date';
 import Draggable from 'react-draggable';
 import EventEmitter from 'events';
 
@@ -22,19 +23,18 @@ function CheckboxWidget({
   label,
   value,
   disabled,
-  schema
+  uiSchema
 }) {
-  const { size = "sm", color = "primary" } = options;
-  const { description } = schema;
+  const { className, size = "sm", color = "primary", description, descriptionClassName } = options;
+  const { validate } = uiSchema;
+  const [errMsg, setErrMsg] = useState("");
+  const isInvalid = !!errMsg;
   return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
     Checkbox,
     {
+      className: cn("w-full", className),
       classNames: {
-        base: cn(
-          "m-0 flex items-center justify-start w-full",
-          "cursor-pointer rounded-lg gap-2 p-3 bg-content2 border-1 border-transparent",
-          value ? `border-${color}` : ""
-        )
+        base: cn("m-0 flex items-center justify-start w-full", "cursor-pointer rounded-lg gap-2 p-[13px] bg-content2 border-1 border-transparent", value ? `border-${color}` : "")
       },
       defaultSelected: value,
       isDisabled: disabled,
@@ -44,76 +44,152 @@ function CheckboxWidget({
       onChange: (e) => {
         const checked = e.target.checked;
         onChange(checked);
+      },
+      onBlur: () => {
+        if (validate) {
+          const errMsg2 = validate(value);
+          setErrMsg(errMsg2);
+          return;
+        }
+        setErrMsg("");
       }
     },
     label
-  ), description && /* @__PURE__ */ React6.createElement("div", { className: "mt-1 text-xs text-[#A1A1A9] dark:text-[#717179]" }, description));
+  ), description && /* @__PURE__ */ React6.createElement("div", { className: cn("mt-1 text-xs text-[#A1A1A9] dark:text-[#717179]", descriptionClassName) }, description), isInvalid && /* @__PURE__ */ React6.createElement("div", { className: "mt-2 text-xs text-[#DF3562]" }, errMsg));
 }
 function InputWidget(props) {
-  const {
-    onChange,
-    options,
-    label,
-    value,
-    required,
-    disabled,
-    schema
-  } = props;
-  const { className, labelPlacement = "inside", size = "sm" } = options;
-  const placeholder = props.placeholder || options.placeholder;
+  const { onChange, options, label, value, required, disabled, uiSchema } = props;
+  const { className, nextuiClassNames, labelPlacement = "inside", size = "sm", inputType = "text", placeholder, color, variant, radius, startContent, endContent, description } = options;
+  const { requiredErrMsg, validate } = uiSchema;
   return /* @__PURE__ */ React6.createElement(
     Input,
     {
       className: cn("w-full", className),
+      classNames: nextuiClassNames,
       label,
       placeholder,
       value,
-      defaultValue: "",
       isRequired: required,
       isDisabled: disabled,
       size,
       labelPlacement,
-      description: schema.description || "",
-      type: schema.inputType || "text",
-      onChange: (e) => onChange(e.target.value)
+      description,
+      type: inputType,
+      color,
+      variant,
+      radius,
+      startContent,
+      endContent,
+      onChange: (e) => onChange(e.target.value),
+      validate: () => {
+        if (value === "" && required) {
+          return requiredErrMsg || "This field is required";
+        }
+        if (validate) {
+          const errMsg = validate(value);
+          return errMsg;
+        }
+        return true;
+      }
     }
   );
 }
 function SelectWidget(props) {
-  const { onChange, options, label, value, required, disabled, schema } = props;
-  const { className, labelPlacement = "top", placeholder = "Select an option" } = options;
-  const { selectOptions = [], description } = schema;
-  const labelText = label == null ? void 0 : label.trim();
-  const placeholderText = props.placeholder || placeholder;
-  return /* @__PURE__ */ React6.createElement("div", { className: cn("", className) }, /* @__PURE__ */ React6.createElement(
-    "div",
+  const { onChange, options, label, value, required, disabled, uiSchema } = props;
+  const {
+    className,
+    nextuiClassNames = {
+      popoverContent: "rounded-lg shadow-md border dark:border-[#3e3e3e]"
+    },
+    listboxProps = {
+      itemClasses: {
+        base: [
+          "rounded-lg",
+          "text-default-500",
+          "transition-opacity",
+          "data-[hover=true]:text-foreground",
+          "data-[hover=true]:bg-default-100",
+          "dark:data-[hover=true]:bg-default-50",
+          "data-[selectable=true]:focus:bg-default-50",
+          "data-[pressed=true]:opacity-70",
+          "data-[focus-visible=true]:ring-default-500"
+        ]
+      }
+    },
+    labelPlacement = "inside",
+    size = "sm",
+    placeholder = "Select an option",
+    color,
+    variant,
+    radius,
+    description
+  } = options;
+  const { selectOptions = [], requiredErrMsg, validate } = uiSchema;
+  const [errMsg, setErrMsg] = useState("");
+  const isInvalid = !!errMsg;
+  const checkValue = useCallback((value2) => {
+    if (!value2 && required) {
+      setErrMsg(requiredErrMsg || "This field is required");
+      return;
+    }
+    if (validate) {
+      const errMsg2 = validate(value2);
+      setErrMsg(errMsg2);
+      return;
+    }
+    setErrMsg("");
+  }, []);
+  return /* @__PURE__ */ React6.createElement(
+    Select,
     {
-      className: cn("flex flex-col", {
-        "flex-row items-center": labelPlacement === "left"
-      })
+      label: label == null ? void 0 : label.trim(),
+      className: cn("w-full", className),
+      classNames: nextuiClassNames,
+      labelPlacement,
+      placeholder,
+      size,
+      isRequired: required,
+      isDisabled: disabled,
+      isInvalid,
+      description,
+      listboxProps,
+      variant,
+      radius,
+      color: isInvalid ? "danger" : color,
+      errorMessage: isInvalid && errMsg,
+      selectedKeys: [value],
+      onSelectionChange: (v) => {
+        const keys = Array.from(v);
+        const _v = keys[0];
+        onChange(_v);
+        checkValue(_v);
+      }
     },
-    labelText && /* @__PURE__ */ React6.createElement(
-      "label",
-      {
-        className: cn("flex items-center text-sm whitespace-nowrap", {
-          "mb-2": labelPlacement === "top",
-          "mr-2": labelPlacement === "left"
-        })
-      },
-      labelText,
-      required && /* @__PURE__ */ React6.createElement("span", { className: "ml-[2px] font-bold text-red-600" }, "*")
-    ),
-    description && labelPlacement === "top" && /* @__PURE__ */ React6.createElement("div", { className: "mb-2 text-xs text-[#A1A1A9] dark:text-[#717179]" }, description),
-    /* @__PURE__ */ React6.createElement("select", { className: "w-full py-3.5 px-2 text-sm rounded-md bg-[#F4F4F5] dark:bg-[#27272A]", defaultValue: value, disabled, onChange: (event) => onChange(event.target.value) }, /* @__PURE__ */ React6.createElement("option", { value: "", disabled: true, selected: true }, placeholderText), selectOptions.map((item) => {
-      return /* @__PURE__ */ React6.createElement("option", { key: item.value, value: item.value }, item.label);
-    }))
-  ));
+    selectOptions.map((item) => /* @__PURE__ */ React6.createElement(SelectItem, { key: item.value, value: item.value }, item.label))
+  );
 }
-var EditorWidget = ({ label, options = {}, value, required, schema, disabled, onChange }) => {
-  const { editorHeight = "200px", readOnly = false, language = "json", jsonStrSpace, languageSelectorOptions = [], onChangeLanguage, onRun, onMount } = options;
+var EditorWidget = ({ label, options = {}, value, required, uiSchema, disabled, onChange }) => {
+  const { editorHeight = "200px", readOnly = false, language = "json", jsonStrSpace, languageSelectorOptions = [], description, descriptionClassName, errMsgClassName, onChangeLanguage, onRun, onMount } = options;
+  const { requiredErrMsg, validate } = uiSchema;
   const [selectedLanguage, setSelectedLanguage] = useState("");
   const [runLoading, setRunLoading] = useState(false);
   const showLanguageSelector = languageSelectorOptions.length > 0;
+  const [errMsg, setErrMsg] = useState("");
+  const isInvalid = !!errMsg;
+  const debouncedCheckValue = useRef(
+    _.debounce(async (value2) => {
+      if (!value2 && required) {
+        setErrMsg(requiredErrMsg || "This field is required");
+        return;
+      }
+      if (validate) {
+        const errMsg2 = validate(value2);
+        setErrMsg(errMsg2);
+        return;
+      }
+      setErrMsg("");
+    }, 1e3)
+  ).current;
   return /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col relative" }, /* @__PURE__ */ React6.createElement("div", { className: cn("flex justify-between items-center", { "mb-[10px]": label.trim() || showLanguageSelector }) }, label && /* @__PURE__ */ React6.createElement(
     "label",
     {
@@ -135,7 +211,7 @@ var EditorWidget = ({ label, options = {}, value, required, schema, disabled, on
     languageSelectorOptions.map((item) => {
       return /* @__PURE__ */ React6.createElement("option", { key: item.value, value: item.value }, item.label);
     })
-  )), schema.description && /* @__PURE__ */ React6.createElement("div", { className: "mb-2 text-xs text-[#A1A1A9] dark:text-[#717179]" }, schema.description), /* @__PURE__ */ React6.createElement("div", { className: "rounded-lg overflow-hidden relative" }, /* @__PURE__ */ React6.createElement(
+  )), description && /* @__PURE__ */ React6.createElement("div", { className: cn("mb-2 text-xs text-[#A1A1A9] dark:text-[#717179]", descriptionClassName) }, description), /* @__PURE__ */ React6.createElement("div", { className: "rounded-lg overflow-hidden relative" }, /* @__PURE__ */ React6.createElement(
     MonacoEditor,
     {
       options: { readOnly: readOnly || disabled, minimap: { enabled: false } },
@@ -143,7 +219,10 @@ var EditorWidget = ({ label, options = {}, value, required, schema, disabled, on
       theme: "vs-dark",
       language: selectedLanguage ? selectedLanguage : language,
       value,
-      onChange,
+      onChange: (v) => {
+        onChange(v);
+        debouncedCheckValue(v);
+      },
       onMount: (editor, monaco) => {
         onMount && onMount(editor, monaco);
         if (language === "json" && jsonStrSpace && value) {
@@ -152,7 +231,7 @@ var EditorWidget = ({ label, options = {}, value, required, schema, disabled, on
         }
       }
     }
-  )), onRun && /* @__PURE__ */ React6.createElement(
+  )), isInvalid && /* @__PURE__ */ React6.createElement("div", { className: cn("mt-2 text-xs text-[#DF3562]", errMsgClassName) }, errMsg), onRun && /* @__PURE__ */ React6.createElement(
     Button,
     {
       className: "absolute bottom-2 right-4",
@@ -264,7 +343,7 @@ var getFormState = (props, formLayout = {}) => {
     const value = {};
     const required = [];
     const properties = Object.entries(metadata).reduce((p, c) => {
-      var _a2, _b, _c, _d, _e;
+      var _a2, _b, _c;
       const [k, v] = c;
       const type = typeof v;
       p[k] = {
@@ -274,15 +353,22 @@ var getFormState = (props, formLayout = {}) => {
       if (!formConfigData[k]) {
         formConfigData[k] = {};
       }
+      if ((_a2 = formConfigData[k]) == null ? void 0 : _a2.title) {
+        p[k].title = formConfigData[k].title || k;
+      }
+      if ((_b = formConfigData[k]) == null ? void 0 : _b.required) {
+        required.push(k);
+      }
       if (type === "string" || type === "number") {
-        if ((_a2 = formConfigData[k]) == null ? void 0 : _a2.selectOptions) {
+        if ((_c = formConfigData[k]) == null ? void 0 : _c.selectOptions) {
           formConfigData[k]["ui:widget"] = SelectWidget;
-          p[k].selectOptions = formConfigData[k].selectOptions;
         } else {
           if (!formConfigData[k]["ui:widget"]) {
             formConfigData[k]["ui:widget"] = InputWidget;
             if (type === "number") {
-              p[k].inputType = "number";
+              formConfigData[k]["ui:options"] = __spreadProps(__spreadValues({}, formConfigData[k]["ui:options"]), {
+                inputType: "number"
+              });
             }
             if (helper.json.isJsonString(v)) {
               formConfigData[k]["ui:widget"] = EditorWidget;
@@ -301,18 +387,6 @@ var getFormState = (props, formLayout = {}) => {
         value[k] = JSON.stringify(v, null, 2);
         formConfigData[k]["ui:widget"] = EditorWidget;
       }
-      if ((_b = formConfigData[k]) == null ? void 0 : _b.inputType) {
-        p[k].inputType = formConfigData[k].inputType;
-      }
-      if ((_c = formConfigData[k]) == null ? void 0 : _c.title) {
-        p[k].title = formConfigData[k].title || k;
-      }
-      if ((_d = formConfigData[k]) == null ? void 0 : _d.description) {
-        p[k].description = formConfigData[k].description;
-      }
-      if ((_e = formConfigData[k]) == null ? void 0 : _e.required) {
-        required.push(k);
-      }
       return p;
     }, {});
     const schema = {
@@ -373,23 +447,32 @@ var BatchSubmitButton = ({ formStates, onSubmit, buttonProps }) => {
       onClick: (e) => {
         const formData = {};
         const formKeys = Object.keys(formStates);
-        for (const key of formKeys) {
-          const form = formStates[key];
+        for (const formKey of formKeys) {
+          const form = formStates[formKey];
           const current = form.formRef.current;
           if (current) {
             current.submit();
             const data = current.state.formData;
-            const required = current.state.schema.required;
-            for (const i of required) {
-              if (!data[i]) {
-                return;
+            const uiSchema = current.state.uiSchema;
+            const keys = Object.keys(uiSchema);
+            for (const key of keys) {
+              const uiConfig = uiSchema[key];
+              if (uiConfig) {
+                const { required, validate } = uiConfig;
+                if (required) {
+                  if (data[key] === void 0 || data[key] === null || data[key] === "") {
+                    return;
+                  }
+                }
+                if (validate) {
+                  const errMsg = validate(data[key]);
+                  if (errMsg) {
+                    return;
+                  }
+                }
               }
             }
-            const errors = current.state.errors;
-            if (errors.length > 0) {
-              return;
-            }
-            formData[key] = data;
+            formData[formKey] = data;
           } else {
             console.error("formRef.current is null");
             return;
@@ -419,16 +502,25 @@ var SubmitButton = ({ formKey, formState, buttonProps }) => {
         if (current) {
           current.submit();
           formData = current.state.formData;
-          const required = current.state.schema.required;
-          for (const i of required) {
-            if (!formData[i]) {
-              return;
+          const uiSchema = current.state.uiSchema;
+          const keys = Object.keys(uiSchema);
+          for (const key of keys) {
+            const uiConfig = uiSchema[key];
+            if (uiConfig) {
+              const { required, validate } = uiConfig;
+              if (required) {
+                if (formData[key] === void 0 || formData[key] === null || formData[key] === "") {
+                  return;
+                }
+              }
+              if (validate) {
+                const errMsg = validate(formData[key]);
+                if (errMsg) {
+                  return;
+                }
+              }
             }
           }
-          const errors = current.state.errors;
-          if (errors.length > 0) {
-            return;
-          }
         }
         onAfterSubmit == null ? void 0 : onAfterSubmit(formKey, formData, setLoading);
       }
@@ -452,7 +544,7 @@ var renderLayout = (layout, fields, n = 1) => {
   return layout.map((item, index) => {
     if (Array.isArray(item)) {
       const even = (n & 1) === 0;
-      return /* @__PURE__ */ React6.createElement("div", { key: index, className: cn("w-full flex justify-between items-center space-x-2", even ? "flex-row items-end" : "flex-col") }, renderLayout(item, fields, n));
+      return /* @__PURE__ */ React6.createElement("div", { key: index, className: cn("w-full flex justify-between items-center space-x-2", even ? "flex-row items-start" : "flex-col") }, renderLayout(item, fields, n));
     } else {
       return /* @__PURE__ */ React6.createElement("div", { className: "w-full", key: index }, fields[item]);
     }
@@ -796,13 +888,14 @@ var JSONForm = (props) => {
   );
 };
 function TextareaWidget(props) {
-  const { onChange, options, label, value, required, disabled, schema } = props;
-  const { className, labelPlacement = "inside", size = "md", minRows = 2, maxRows = 8 } = options;
-  const placeholder = props.placeholder || options.placeholder;
+  const { onChange, options, label, value, required, disabled, uiSchema } = props;
+  const { className, nextuiClassNames, labelPlacement = "inside", size = "md", minRows = 3, maxRows = 8, placeholder, color, variant, radius, startContent, endContent, description } = options;
+  const { requiredErrMsg, validate } = uiSchema;
   return /* @__PURE__ */ React6.createElement(
     Textarea,
     {
       className: cn("w-full", className),
+      classNames: nextuiClassNames,
       label,
       placeholder,
       value,
@@ -812,8 +905,72 @@ function TextareaWidget(props) {
       maxRows,
       size,
       labelPlacement,
-      description: schema.description || "",
-      onChange: (e) => onChange(e.target.value)
+      description,
+      color,
+      variant,
+      radius,
+      startContent,
+      endContent,
+      onChange: (e) => onChange(e.target.value),
+      validate: () => {
+        if (value === "" && required) {
+          return requiredErrMsg || "This field is required";
+        }
+        if (validate) {
+          const errMsg = validate(value);
+          return errMsg;
+        }
+        return true;
+      }
+    }
+  );
+}
+function DatePickerWidget({ label, options, value, required, disabled, uiSchema, onChange }) {
+  const { className, nextuiClassNames = { calendarContent: "min-w-fit" }, labelPlacement = "inside", size = "sm", granularity = "day", color = "default", description } = options;
+  const [date, setDate] = useState();
+  const { requiredErrMsg, validate } = uiSchema;
+  useEffect(() => {
+    if (value) {
+      try {
+        const ISOStr = new Date(value).toISOString();
+        const v = parseAbsoluteToLocal(ISOStr);
+        setDate(v);
+      } catch (error) {
+        console.log("error", error.message);
+      }
+    }
+  }, [value]);
+  return /* @__PURE__ */ React6.createElement(
+    DatePicker,
+    {
+      showMonthAndYearPickers: true,
+      className: cn("w-full", className),
+      classNames: nextuiClassNames,
+      label,
+      size,
+      labelPlacement,
+      color,
+      granularity,
+      value: date,
+      isRequired: required,
+      description: description || "",
+      isDisabled: disabled,
+      onChange: (dateValue) => {
+        if (dateValue) {
+          const v = dateValue.toDate("GMT").toISOString();
+          onChange(v);
+        }
+      },
+      validate: () => {
+        if (value === "" && required) {
+          return requiredErrMsg || "This field is required";
+        }
+        if (validate) {
+          const errMsg = validate(value);
+          return errMsg;
+        }
+        return true;
+      }
     }
   );
 }
@@ -1159,6 +1316,6 @@ _JSONViewPlugin.JSONView = (props) => {
 };
 var JSONViewPlugin = _JSONViewPlugin;
 
-export { CheckboxWidget, ComplexFormModalStore, EditorWidget, FormModalStore, InputWidget, JSONForm, JSONSchemaForm, JSONViewPlugin, SelectWidget, TextareaWidget, getComplexFormData, getFormData, getFormState2 as getFormState, getSimpleFormData };
+export { CheckboxWidget, ComplexFormModalStore, DatePickerWidget, EditorWidget, FormModalStore, InputWidget, JSONForm, JSONSchemaForm, JSONViewPlugin, SelectWidget, TextareaWidget, getComplexFormData, getFormData, getFormState2 as getFormState, getSimpleFormData };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=form.mjs.map