@btst/components 0.0.0-stage → 1.0.0

package/dist/ui/src/components/auto-form/common/tooltip.mjs

@@ -0,0 +1,7 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function AutoFormTooltip({ fieldConfigItem }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: fieldConfigItem?.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-white", children: fieldConfigItem.description }) });
+}
+
+export { AutoFormTooltip as default };

package/dist/ui/src/components/auto-form/config.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+const checkbox = require('./fields/checkbox.cjs');
+const date = require('./fields/date.cjs');
+const _enum = require('./fields/enum.cjs');
+const input = require('./fields/input.cjs');
+const number = require('./fields/number.cjs');
+const radioGroup = require('./fields/radio-group.cjs');
+const _switch = require('./fields/switch.cjs');
+const textarea = require('./fields/textarea.cjs');
+
+const INPUT_COMPONENTS = {
+  checkbox: checkbox,
+  date: date,
+  select: _enum,
+  radio: radioGroup,
+  switch: _switch,
+  textarea: textarea,
+  number: number,
+  fallback: input
+};
+const DEFAULT_ZOD_HANDLERS = {
+  // Zod v3 style type names
+  ZodBoolean: "checkbox",
+  ZodDate: "date",
+  ZodEnum: "select",
+  ZodNativeEnum: "select",
+  ZodNumber: "number",
+  // Zod v4 style type names (lowercase, no "Zod" prefix)
+  boolean: "checkbox",
+  date: "date",
+  enum: "select",
+  nativeEnum: "select",
+  number: "number",
+  int: "number",
+  float: "number"
+};
+
+exports.DEFAULT_ZOD_HANDLERS = DEFAULT_ZOD_HANDLERS;
+exports.INPUT_COMPONENTS = INPUT_COMPONENTS;

package/dist/ui/src/components/auto-form/config.mjs

@@ -0,0 +1,37 @@
+import AutoFormCheckbox from './fields/checkbox.mjs';
+import AutoFormDate from './fields/date.mjs';
+import AutoFormEnum from './fields/enum.mjs';
+import AutoFormInput from './fields/input.mjs';
+import AutoFormNumber from './fields/number.mjs';
+import AutoFormRadioGroup from './fields/radio-group.mjs';
+import AutoFormSwitch from './fields/switch.mjs';
+import AutoFormTextarea from './fields/textarea.mjs';
+
+const INPUT_COMPONENTS = {
+  checkbox: AutoFormCheckbox,
+  date: AutoFormDate,
+  select: AutoFormEnum,
+  radio: AutoFormRadioGroup,
+  switch: AutoFormSwitch,
+  textarea: AutoFormTextarea,
+  number: AutoFormNumber,
+  fallback: AutoFormInput
+};
+const DEFAULT_ZOD_HANDLERS = {
+  // Zod v3 style type names
+  ZodBoolean: "checkbox",
+  ZodDate: "date",
+  ZodEnum: "select",
+  ZodNativeEnum: "select",
+  ZodNumber: "number",
+  // Zod v4 style type names (lowercase, no "Zod" prefix)
+  boolean: "checkbox",
+  date: "date",
+  enum: "select",
+  nativeEnum: "select",
+  number: "number",
+  int: "number",
+  float: "number"
+};
+
+export { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS };

package/dist/ui/src/components/auto-form/dependencies.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+const types = require('./types.cjs');
+
+function resolveDependencies(dependencies, currentFieldName, watch) {
+  let isDisabled = false;
+  let isHidden = false;
+  let isRequired = false;
+  let overrideOptions;
+  const currentFieldValue = watch(currentFieldName);
+  const currentFieldDependencies = dependencies.filter(
+    (dependency) => dependency.targetField === currentFieldName
+  );
+  for (const dependency of currentFieldDependencies) {
+    const watchedValue = watch(dependency.sourceField);
+    const conditionMet = dependency.when(watchedValue, currentFieldValue);
+    switch (dependency.type) {
+      case types.DependencyType.DISABLES:
+        if (conditionMet) {
+          isDisabled = true;
+        }
+        break;
+      case types.DependencyType.REQUIRES:
+        if (conditionMet) {
+          isRequired = true;
+        }
+        break;
+      case types.DependencyType.HIDES:
+        if (conditionMet) {
+          isHidden = true;
+        }
+        break;
+      case types.DependencyType.SETS_OPTIONS:
+        if (conditionMet) {
+          overrideOptions = dependency.options;
+        }
+        break;
+    }
+  }
+  return {
+    isDisabled,
+    isHidden,
+    isRequired,
+    overrideOptions
+  };
+}
+
+module.exports = resolveDependencies;

package/dist/ui/src/components/auto-form/dependencies.mjs

@@ -0,0 +1,46 @@
+import { DependencyType } from './types.mjs';
+
+function resolveDependencies(dependencies, currentFieldName, watch) {
+  let isDisabled = false;
+  let isHidden = false;
+  let isRequired = false;
+  let overrideOptions;
+  const currentFieldValue = watch(currentFieldName);
+  const currentFieldDependencies = dependencies.filter(
+    (dependency) => dependency.targetField === currentFieldName
+  );
+  for (const dependency of currentFieldDependencies) {
+    const watchedValue = watch(dependency.sourceField);
+    const conditionMet = dependency.when(watchedValue, currentFieldValue);
+    switch (dependency.type) {
+      case DependencyType.DISABLES:
+        if (conditionMet) {
+          isDisabled = true;
+        }
+        break;
+      case DependencyType.REQUIRES:
+        if (conditionMet) {
+          isRequired = true;
+        }
+        break;
+      case DependencyType.HIDES:
+        if (conditionMet) {
+          isHidden = true;
+        }
+        break;
+      case DependencyType.SETS_OPTIONS:
+        if (conditionMet) {
+          overrideOptions = dependency.options;
+        }
+        break;
+    }
+  }
+  return {
+    isDisabled,
+    isHidden,
+    isRequired,
+    overrideOptions
+  };
+}
+
+export { resolveDependencies as default };

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

@@ -0,0 +1,266 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const accordion = require('../../accordion.cjs');
+const button = require('../../button.cjs');
+const form = require('../../form.cjs');
+const input = require('../../input.cjs');
+const separator = require('../../separator.cjs');
+const lucideReact = require('lucide-react');
+const reactHookForm = require('react-hook-form');
+const helpers = require('../helpers.cjs');
+const object = require('./object.cjs');
+
+function getDefType(schema) {
+  return schema._zod?.def?.type || "";
+}
+function getArrayElementType(item) {
+  const def = item._zod?.def;
+  const defType = getDefType(item);
+  if (defType === "array") {
+    return def?.element || null;
+  }
+  if (["default", "optional", "nullable"].includes(defType)) {
+    const innerType = def?.innerType;
+    if (innerType) {
+      return getArrayElementType(innerType);
+    }
+  }
+  return null;
+}
+function getPrimitiveDefault(itemSchema) {
+  const base = helpers.getBaseSchema(itemSchema);
+  if (!base) return "";
+  switch (helpers.getBaseType(base)) {
+    case "ZodBoolean":
+      return false;
+    case "ZodNumber":
+      return 0;
+    default:
+      return "";
+  }
+}
+function AutoFormArray({
+  name,
+  item,
+  form,
+  path = [],
+  fieldConfig
+}) {
+  const itemDefType = getArrayElementType(item);
+  const elementBaseSchema = itemDefType ? helpers.getBaseSchema(itemDefType) : null;
+  const elementPrimitiveType = elementBaseSchema ? helpers.getBaseType(elementBaseSchema) : "";
+  const isObjectArray = !!itemDefType && elementPrimitiveType === "ZodObject";
+  const title = fieldConfig?.label ?? helpers.beautifyObjectName(name);
+  if (isObjectArray) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ObjectAutoFormArray,
+      {
+        name,
+        item,
+        form,
+        path,
+        fieldConfig,
+        itemDefType,
+        title
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PrimitiveAutoFormArray,
+    {
+      name,
+      item,
+      form,
+      path,
+      fieldConfig,
+      itemDefType,
+      title
+    }
+  );
+}
+function ObjectAutoFormArray({
+  name,
+  form,
+  path = [],
+  fieldConfig,
+  itemDefType,
+  title
+}) {
+  const fieldPath = path.join(".");
+  const { fields, append, remove } = reactHookForm.useFieldArray({
+    control: form.control,
+    name: fieldPath
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(accordion.AccordionItem, { value: name, className: "border-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(accordion.AccordionTrigger, { children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs(accordion.AccordionContent, { children: [
+      fields.map((_field, index) => {
+        const key = _field.id;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            object,
+            {
+              schema: itemDefType,
+              form,
+              fieldConfig,
+              path: [...path, index.toString()]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-4 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "secondary",
+              size: "icon",
+              type: "button",
+              className: "hover:bg-zinc-300 hover:text-black focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-white dark:text-black dark:hover:bg-zinc-300 dark:hover:text-black dark:hover:ring-0 dark:hover:ring-offset-0 dark:focus-visible:ring-0 dark:focus-visible:ring-offset-0",
+              onClick: () => remove(index),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(separator.Separator, {})
+        ] }, key);
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          type: "button",
+          variant: "secondary",
+          onClick: () => append({}),
+          className: "mt-4 flex items-center",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "mr-2", size: 16 }),
+            "Add"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function PrimitiveAutoFormArray({
+  name,
+  item,
+  form,
+  path = [],
+  fieldConfig,
+  itemDefType,
+  title
+}) {
+  const fieldPath = path.join(".");
+  const rawValues = reactHookForm.useWatch({ control: form.control, name: fieldPath }) ?? [];
+  const values = Array.isArray(rawValues) ? rawValues : [];
+  const appendItem = () => {
+    const def = itemDefType ? getPrimitiveDefault(itemDefType) : "";
+    form.setValue(fieldPath, [...values, def], {
+      shouldDirty: true,
+      shouldValidate: false
+    });
+  };
+  const removeItem = (index) => {
+    const next = values.filter((_, i) => i !== index);
+    form.setValue(fieldPath, next, {
+      shouldDirty: true,
+      shouldValidate: false
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(accordion.AccordionItem, { value: name, className: "border-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(accordion.AccordionTrigger, { children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs(accordion.AccordionContent, { children: [
+      values.map((_, index) => {
+        const cellPath = `${fieldPath}.${index}`;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex flex-col", children: [
+          itemDefType ? /* @__PURE__ */ jsxRuntime.jsx(
+            PrimitiveArrayRow,
+            {
+              form,
+              itemSchema: itemDefType,
+              cellPath
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-4 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "secondary",
+              size: "icon",
+              type: "button",
+              className: "hover:bg-zinc-300 hover:text-black focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-white dark:text-black dark:hover:bg-zinc-300 dark:hover:text-black dark:hover:ring-0 dark:hover:ring-offset-0 dark:focus-visible:ring-0 dark:focus-visible:ring-offset-0",
+              onClick: () => removeItem(index),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(separator.Separator, {})
+        ] }, `${fieldPath}-${index}`);
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          type: "button",
+          variant: "secondary",
+          onClick: appendItem,
+          className: "mt-4 flex items-center",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "mr-2", size: 16 }),
+            "Add"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function PrimitiveArrayRow({
+  form: form$1,
+  itemSchema,
+  cellPath
+}) {
+  const baseSchema = helpers.getBaseSchema(itemSchema);
+  const t = baseSchema ? helpers.getBaseType(baseSchema) : "";
+  if (t === "ZodBoolean") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      form.FormField,
+      {
+        control: form$1.control,
+        name: cellPath,
+        render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { className: "flex flex-row items-center gap-2 space-y-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": "Toggle",
+              checked: Boolean(field.value),
+              onChange: (e) => field.onChange(e.target.checked)
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(form.FormLabel, { className: "font-normal cursor-pointer", children: field.value ? "Selected" : "Not selected" }),
+          /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+        ] })
+      }
+    );
+  }
+  const inputType = t === "ZodNumber" ? "number" : "text";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    form.FormField,
+    {
+      control: form$1.control,
+      name: cellPath,
+      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(form.FormLabel, { className: "sr-only", children: "Row value" }),
+        /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            type: inputType,
+            name: field.name,
+            ref: field.ref,
+            onBlur: field.onBlur,
+            value: field.value === void 0 || field.value === null ? "" : String(field.value),
+            onChange: (ev) => field.onChange(
+              inputType === "number" ? Number.isNaN(ev.target.valueAsNumber) ? void 0 : ev.target.valueAsNumber : ev.target.value
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+      ] })
+    }
+  );
+}
+
+module.exports = AutoFormArray;