@btst/plugin-form-builder 0.0.0-stage → 1.0.0

package/dist/ui/src/components/auto-form/fields/date.mjs

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { DatePicker } from '../../date-picker.mjs';
+import { FormItem, FormControl, FormMessage } from '../../form.mjs';
+import { z } from 'zod';
+import AutoFormLabel from '../common/label.mjs';
+import AutoFormTooltip from '../common/tooltip.mjs';
+import { getBaseType, getBaseSchema } from '../helpers.mjs';
+
+function toDate(value, dateOnly) {
+  if (!value) return void 0;
+  if (value instanceof Date) return value;
+  if (typeof value === "string") {
+    const date = new Date(dateOnly && /^\d{4}-\d{2}-\d{2}$/.test(value) ? `${value}T00:00:00` : value);
+    return isNaN(date.getTime()) ? void 0 : date;
+  }
+  return void 0;
+}
+function AutoFormDate({
+  label,
+  isRequired,
+  field,
+  fieldConfigItem,
+  fieldProps,
+  zodItem
+}) {
+  const baseType = getBaseType(zodItem);
+  const expectsDateObject = baseType === "ZodDate";
+  const baseSchema = getBaseSchema(zodItem);
+  const dateSchema = baseSchema instanceof z.ZodUnion && baseSchema.options.length === 2 && baseSchema.options.some((option) => option instanceof z.ZodNull) ? baseSchema.options.find((option) => !(option instanceof z.ZodNull)) : baseSchema;
+  const expectsDateOnly = !!dateSchema && ("format" in dateSchema && dateSchema.format === "date" || dateSchema instanceof z.ZodString && !!dateSchema._zod.def.checks?.some((check) => "format" in check._zod.def && check._zod.def.format === "date"));
+  const handleChange = (date) => {
+    if (!date) {
+      field.onChange(expectsDateOnly && zodItem.isNullable() ? null : void 0);
+      return;
+    }
+    if (expectsDateObject) {
+      field.onChange(date);
+    } else if (expectsDateOnly) {
+      field.onChange(`${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`);
+    } else {
+      field.onChange(date.toISOString());
+    }
+  };
+  return /* @__PURE__ */ jsxs(FormItem, { children: [
+    /* @__PURE__ */ jsx(
+      AutoFormLabel,
+      {
+        label: fieldConfigItem?.label || label,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        date: toDate(field.value, expectsDateOnly),
+        setDate: handleChange,
+        ...fieldProps
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] });
+}
+
+export { AutoFormDate as default };

package/dist/ui/src/components/auto-form/fields/enum.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const form = require('../../form.cjs');
+const select = require('../../select.cjs');
+const label = require('../common/label.cjs');
+const tooltip = require('../common/tooltip.cjs');
+const helpers = require('../helpers.cjs');
+
+function getEnumValues(schema) {
+  if (Array.isArray(schema.options)) {
+    return schema.options;
+  }
+  if (schema.enum) {
+    return Object.values(schema.enum);
+  }
+  const def = schema._zod?.def;
+  if (def?.entries) {
+    return Object.values(def.entries);
+  }
+  return [];
+}
+function AutoFormEnum({
+  label: label$1,
+  isRequired,
+  field,
+  fieldConfigItem,
+  zodItem,
+  fieldProps
+}) {
+  const baseSchema = helpers.getBaseSchema(zodItem);
+  const baseValues = getEnumValues(baseSchema);
+  let values = [];
+  if (!baseValues || baseValues.length === 0) {
+    values = [];
+  } else {
+    values = baseValues.map((value) => [value, value]);
+  }
+  function findItem(value) {
+    return values.find((item) => item[0] === value);
+  }
+  const handleValueChange = (val) => {
+    if (val === "" && field.value && field.value !== "") {
+      return;
+    }
+    field.onChange(val);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      label,
+      {
+        label: fieldConfigItem?.label || label$1,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select,
+      {
+        onValueChange: handleValueChange,
+        value: field.value ?? "",
+        ...fieldProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { className: fieldProps.className, children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: fieldConfigItem.inputProps?.placeholder, children: field.value ? findItem(field.value)?.[1] : "Select an option" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: values.map(([value, label2]) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: label2, children: label2 }, value)) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+  ] });
+}
+
+module.exports = AutoFormEnum;

package/dist/ui/src/components/auto-form/fields/enum.mjs

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormItem, FormControl, FormMessage } from '../../form.mjs';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../select.mjs';
+import AutoFormLabel from '../common/label.mjs';
+import AutoFormTooltip from '../common/tooltip.mjs';
+import { getBaseSchema } from '../helpers.mjs';
+
+function getEnumValues(schema) {
+  if (Array.isArray(schema.options)) {
+    return schema.options;
+  }
+  if (schema.enum) {
+    return Object.values(schema.enum);
+  }
+  const def = schema._zod?.def;
+  if (def?.entries) {
+    return Object.values(def.entries);
+  }
+  return [];
+}
+function AutoFormEnum({
+  label,
+  isRequired,
+  field,
+  fieldConfigItem,
+  zodItem,
+  fieldProps
+}) {
+  const baseSchema = getBaseSchema(zodItem);
+  const baseValues = getEnumValues(baseSchema);
+  let values = [];
+  if (!baseValues || baseValues.length === 0) {
+    values = [];
+  } else {
+    values = baseValues.map((value) => [value, value]);
+  }
+  function findItem(value) {
+    return values.find((item) => item[0] === value);
+  }
+  const handleValueChange = (val) => {
+    if (val === "" && field.value && field.value !== "") {
+      return;
+    }
+    field.onChange(val);
+  };
+  return /* @__PURE__ */ jsxs(FormItem, { children: [
+    /* @__PURE__ */ jsx(
+      AutoFormLabel,
+      {
+        label: fieldConfigItem?.label || label,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(
+      Select,
+      {
+        onValueChange: handleValueChange,
+        value: field.value ?? "",
+        ...fieldProps,
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: fieldProps.className, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: fieldConfigItem.inputProps?.placeholder, children: field.value ? findItem(field.value)?.[1] : "Select an option" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: values.map(([value, label2]) => /* @__PURE__ */ jsx(SelectItem, { value: label2, children: label2 }, value)) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] });
+}
+
+export { AutoFormEnum as default };

package/dist/ui/src/components/auto-form/fields/input.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const form = require('../../form.cjs');
+const input = require('../../input.cjs');
+const label = require('../common/label.cjs');
+const tooltip = require('../common/tooltip.cjs');
+
+function AutoFormInput({
+  label: label$1,
+  isRequired,
+  fieldConfigItem,
+  fieldProps
+}) {
+  const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
+  const showLabel = _showLabel === void 0 ? true : _showLabel;
+  const type = fieldProps.type || "text";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row  items-center space-x-2", children: /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { className: "flex w-full flex-col justify-start", children: [
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+      label,
+      {
+        label: fieldConfigItem?.label || label$1,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(input.Input, { type, ...fieldPropsWithoutShowLabel }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+  ] }) });
+}
+
+module.exports = AutoFormInput;

package/dist/ui/src/components/auto-form/fields/input.mjs

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { FormItem, FormControl, FormMessage } from '../../form.mjs';
+import { Input } from '../../input.mjs';
+import AutoFormLabel from '../common/label.mjs';
+import AutoFormTooltip from '../common/tooltip.mjs';
+
+function AutoFormInput({
+  label,
+  isRequired,
+  fieldConfigItem,
+  fieldProps
+}) {
+  const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
+  const showLabel = _showLabel === void 0 ? true : _showLabel;
+  const type = fieldProps.type || "text";
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-row  items-center space-x-2", children: /* @__PURE__ */ jsxs(FormItem, { className: "flex w-full flex-col justify-start", children: [
+    showLabel && /* @__PURE__ */ jsx(
+      AutoFormLabel,
+      {
+        label: fieldConfigItem?.label || label,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { type, ...fieldPropsWithoutShowLabel }) }),
+    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] }) });
+}
+
+export { AutoFormInput as default };

package/dist/ui/src/components/auto-form/fields/number.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const form = require('../../form.cjs');
+const input = require('../../input.cjs');
+const label = require('../common/label.cjs');
+const tooltip = require('../common/tooltip.cjs');
+
+function AutoFormNumber({
+  label: label$1,
+  isRequired,
+  fieldConfigItem,
+  fieldProps
+}) {
+  const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
+  const showLabel = _showLabel === void 0 ? true : _showLabel;
+  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { children: [
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+      label,
+      {
+        label: fieldConfigItem?.label || label$1,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(input.Input, { type: "number", ...fieldPropsWithoutShowLabel }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+  ] });
+}
+
+module.exports = AutoFormNumber;

package/dist/ui/src/components/auto-form/fields/number.mjs

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormItem, FormControl, FormMessage } from '../../form.mjs';
+import { Input } from '../../input.mjs';
+import AutoFormLabel from '../common/label.mjs';
+import AutoFormTooltip from '../common/tooltip.mjs';
+
+function AutoFormNumber({
+  label,
+  isRequired,
+  fieldConfigItem,
+  fieldProps
+}) {
+  const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
+  const showLabel = _showLabel === void 0 ? true : _showLabel;
+  return /* @__PURE__ */ jsxs(FormItem, { children: [
+    showLabel && /* @__PURE__ */ jsx(
+      AutoFormLabel,
+      {
+        label: fieldConfigItem?.label || label,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { type: "number", ...fieldPropsWithoutShowLabel }) }),
+    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] });
+}
+
+export { AutoFormNumber as default };

package/dist/ui/src/components/auto-form/fields/object.cjs

@@ -0,0 +1,233 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const accordion = require('../../accordion.cjs');
+const form = require('../../form.cjs');
+const reactHookForm = require('react-hook-form');
+const z = require('zod');
+const config = require('../config.cjs');
+const helpers = require('../helpers.cjs');
+const array = require('./array.cjs');
+const dependencies = require('../dependencies.cjs');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const z__namespace = /*#__PURE__*/_interopNamespaceCompat(z);
+
+function DefaultParent({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
+function AutoFormObject({
+  schema,
+  form: form$1,
+  fieldConfig,
+  path = [],
+  dependencies: dependencies$1 = []
+}) {
+  const { watch } = reactHookForm.useFormContext();
+  if (!schema) {
+    return null;
+  }
+  const { shape } = helpers.getBaseSchema(schema) || {};
+  if (!shape) {
+    return null;
+  }
+  const handleIfZodNumber = (item) => {
+    const def = item._zod?.def;
+    const defType = def?.type;
+    const innerDefType = def?.innerType?._zod?.def?.type;
+    const isZodNumber = defType === "number" || defType === "int" || defType === "float";
+    const isInnerZodNumber = innerDefType === "number" || innerDefType === "int" || innerDefType === "float";
+    if (isZodNumber && def) {
+      def.coerce = true;
+    } else if (isInnerZodNumber && def?.innerType?._zod?.def) {
+      def.innerType._zod.def.coerce = true;
+    }
+    return item;
+  };
+  const sortedFieldKeys = helpers.sortFieldsByOrder(fieldConfig, Object.keys(shape));
+  return /* @__PURE__ */ jsxRuntime.jsx(accordion.Accordion, { type: "multiple", className: "space-y-5 border-none", children: sortedFieldKeys.map((name) => {
+    let item = shape[name];
+    item = handleIfZodNumber(item);
+    const zodBaseType = helpers.getBaseType(item);
+    const itemName = helpers.beautifyObjectName(name);
+    const key = [...path, name].join(".");
+    const {
+      isHidden,
+      isDisabled,
+      isRequired: isRequiredByDependency,
+      overrideOptions
+    } = dependencies(dependencies$1, name, watch);
+    if (isHidden) {
+      return null;
+    }
+    if (zodBaseType === "ZodObject") {
+      const objectFieldConfig = fieldConfig?.[name] ?? {};
+      if (typeof objectFieldConfig.fieldType === "function") {
+        const zodInputProps2 = helpers.zodToHtmlInputProps(item);
+        let isRequired2 = isRequiredByDependency || zodInputProps2.required || false;
+        if (objectFieldConfig.inputProps?.required !== void 0) {
+          isRequired2 = objectFieldConfig.inputProps.required;
+        }
+        const CustomComponent = objectFieldConfig.fieldType;
+        const ParentElement = objectFieldConfig.renderParent ?? DefaultParent;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          form.FormField,
+          {
+            control: form$1.control,
+            name: key,
+            render: ({ field }) => {
+              const fieldProps = {
+                ...zodInputProps2,
+                ...field,
+                ...objectFieldConfig.inputProps,
+                disabled: objectFieldConfig.inputProps?.disabled || isDisabled,
+                ref: void 0,
+                value: field.value
+              };
+              return /* @__PURE__ */ jsxRuntime.jsx(ParentElement, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                CustomComponent,
+                {
+                  zodInputProps: zodInputProps2,
+                  field,
+                  fieldConfigItem: objectFieldConfig,
+                  label: objectFieldConfig.label || itemName,
+                  isRequired: isRequired2,
+                  zodItem: item,
+                  fieldProps
+                }
+              ) }, `${key}.parent`);
+            }
+          },
+          key
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(accordion.AccordionItem, { value: name, className: "border-none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(accordion.AccordionTrigger, { children: itemName }),
+        /* @__PURE__ */ jsxRuntime.jsx(accordion.AccordionContent, { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          AutoFormObject,
+          {
+            schema: item,
+            form: form$1,
+            fieldConfig: fieldConfig?.[name] ?? {},
+            path: [...path, name]
+          }
+        ) })
+      ] }, key);
+    }
+    if (zodBaseType === "ZodArray") {
+      const arrayFieldConfig = fieldConfig?.[name] ?? {};
+      if (typeof arrayFieldConfig.fieldType === "function") {
+        const zodInputProps2 = helpers.zodToHtmlInputProps(item);
+        let isRequired2 = isRequiredByDependency || zodInputProps2.required || false;
+        if (arrayFieldConfig.inputProps?.required !== void 0) {
+          isRequired2 = arrayFieldConfig.inputProps.required;
+        }
+        const CustomComponent = arrayFieldConfig.fieldType;
+        const ParentElement = arrayFieldConfig.renderParent ?? DefaultParent;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          form.FormField,
+          {
+            control: form$1.control,
+            name: key,
+            render: ({ field }) => {
+              const fieldProps = {
+                ...zodInputProps2,
+                ...field,
+                ...arrayFieldConfig.inputProps,
+                disabled: arrayFieldConfig.inputProps?.disabled || isDisabled,
+                ref: void 0,
+                value: field.value
+              };
+              return /* @__PURE__ */ jsxRuntime.jsx(ParentElement, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                CustomComponent,
+                {
+                  zodInputProps: zodInputProps2,
+                  field,
+                  fieldConfigItem: arrayFieldConfig,
+                  label: arrayFieldConfig.label || itemName,
+                  isRequired: isRequired2,
+                  zodItem: item,
+                  fieldProps
+                }
+              ) }, `${key}.parent`);
+            }
+          },
+          key
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        array,
+        {
+          name,
+          item,
+          form: form$1,
+          fieldConfig: arrayFieldConfig,
+          path: [...path, name]
+        },
+        key
+      );
+    }
+    const fieldConfigItem = fieldConfig?.[name] ?? {};
+    const zodInputProps = helpers.zodToHtmlInputProps(item);
+    let isRequired = isRequiredByDependency || zodInputProps.required || false;
+    if (fieldConfigItem.inputProps?.required !== void 0) {
+      isRequired = fieldConfigItem.inputProps.required;
+    }
+    if (overrideOptions) {
+      item = z__namespace.enum(overrideOptions);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      form.FormField,
+      {
+        control: form$1.control,
+        name: key,
+        render: ({ field }) => {
+          const inputType = fieldConfigItem.fieldType ?? config.DEFAULT_ZOD_HANDLERS[zodBaseType] ?? "fallback";
+          const InputComponent = typeof inputType === "function" ? inputType : config.INPUT_COMPONENTS[inputType];
+          const ParentElement = fieldConfigItem.renderParent ?? DefaultParent;
+          const defaultValue = fieldConfigItem.inputProps?.defaultValue;
+          const value = field.value ?? defaultValue ?? "";
+          const { defaultValue: _omitDV, ...safeInputProps } = fieldConfigItem.inputProps ?? {};
+          const fieldProps = {
+            ...helpers.zodToHtmlInputProps(item),
+            ...field,
+            ...safeInputProps,
+            disabled: safeInputProps.disabled || isDisabled,
+            ref: void 0,
+            value
+          };
+          if (InputComponent === void 0) {
+            return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ParentElement, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            InputComponent,
+            {
+              zodInputProps,
+              field,
+              fieldConfigItem,
+              label: itemName,
+              isRequired,
+              zodItem: item,
+              fieldProps,
+              className: fieldProps.className
+            }
+          ) }, `${key}.parent`);
+        }
+      },
+      key
+    );
+  }) });
+}
+
+module.exports = AutoFormObject;