@btst/plugin-cms 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,270 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+require('zod');
+
+const BUILTIN_FIELD_TYPES = [
+  "checkbox",
+  "date",
+  "select",
+  "radio",
+  "switch",
+  "textarea",
+  "number",
+  "fallback"
+];
+function getDefTypeName(schema) {
+  const def = schema._zod?.def;
+  return def?.type || "";
+}
+function beautifyObjectName(string) {
+  let output = string.replace(/([A-Z])/g, " $1");
+  output = output.charAt(0).toUpperCase() + output.slice(1);
+  return output;
+}
+function getBaseSchema(schema) {
+  if (!schema) return null;
+  const def = schema._zod?.def;
+  if (!def) return schema;
+  if (def.innerType) {
+    return getBaseSchema(def.innerType);
+  }
+  if (def.out) {
+    return getBaseSchema(def.out);
+  }
+  if (def.schema) {
+    return getBaseSchema(def.schema);
+  }
+  return schema;
+}
+function getBaseType(schema) {
+  const baseSchema = getBaseSchema(schema);
+  if (!baseSchema) return "";
+  const typeName = getDefTypeName(baseSchema);
+  const typeMap = {
+    object: "ZodObject",
+    array: "ZodArray",
+    string: "ZodString",
+    number: "ZodNumber",
+    int: "ZodNumber",
+    float: "ZodNumber",
+    boolean: "ZodBoolean",
+    date: "ZodDate",
+    enum: "ZodEnum",
+    nativeEnum: "ZodNativeEnum",
+    literal: "ZodLiteral",
+    union: "ZodUnion"
+  };
+  return typeMap[typeName] || typeName;
+}
+function getDefaultValueInZodStack(schema) {
+  const def = schema._zod?.def;
+  if (!def) return void 0;
+  if (def.type === "default") {
+    const defaultValue = def.defaultValue;
+    if (typeof defaultValue === "function") {
+      return defaultValue();
+    }
+    return defaultValue;
+  }
+  if (def.innerType) {
+    return getDefaultValueInZodStack(def.innerType);
+  }
+  if (def.schema) {
+    return getDefaultValueInZodStack(def.schema);
+  }
+  return void 0;
+}
+function getDefaultValues(schema, fieldConfig) {
+  if (!schema) return null;
+  const { shape } = schema;
+  const defaultValues = {};
+  if (!shape) return defaultValues;
+  for (const key of Object.keys(shape)) {
+    const item = shape[key];
+    if (getBaseType(item) === "ZodObject") {
+      const defaultItems = getDefaultValues(
+        getBaseSchema(item),
+        fieldConfig?.[key]
+      );
+      if (defaultItems !== null) {
+        for (const defaultItemKey of Object.keys(defaultItems)) {
+          const pathKey = `${key}.${defaultItemKey}`;
+          defaultValues[pathKey] = defaultItems[defaultItemKey];
+        }
+      }
+    } else {
+      let defaultValue = getDefaultValueInZodStack(item);
+      if ((defaultValue === void 0 || defaultValue === null || defaultValue === "") && fieldConfig?.[key]?.inputProps) {
+        defaultValue = (fieldConfig?.[key]?.inputProps).defaultValue;
+      }
+      if (defaultValue !== void 0) {
+        defaultValues[key] = defaultValue;
+      }
+    }
+  }
+  return defaultValues;
+}
+function getObjectFormSchema(schema) {
+  if (!schema) return schema;
+  const def = schema._zod?.def;
+  if (!def) return schema;
+  if (def.type === "pipe") {
+    return getObjectFormSchema(def.in);
+  }
+  if (def.innerType) {
+    return getObjectFormSchema(def.innerType);
+  }
+  if (def.schema) {
+    return getObjectFormSchema(def.schema);
+  }
+  return schema;
+}
+function zodToHtmlInputProps(schema) {
+  const def = schema._zod?.def;
+  const defType = def?.type || "";
+  if (["optional", "nullable"].includes(defType)) {
+    return {
+      ...zodToHtmlInputProps(def.innerType),
+      required: false
+    };
+  }
+  if (defType === "default") {
+    return {
+      ...zodToHtmlInputProps(def.innerType),
+      required: false
+    };
+  }
+  const inputProps = {
+    required: true
+  };
+  const checks = def?.checks;
+  if (!checks || !Array.isArray(checks)) {
+    return inputProps;
+  }
+  const type = getBaseType(schema);
+  for (const check of checks) {
+    const checkKind = check.kind || check.type;
+    if (checkKind === "min" || checkKind === "min_length") {
+      if (type === "ZodString") {
+        inputProps.minLength = check.value ?? check.minimum;
+      } else {
+        inputProps.min = check.value ?? check.minimum;
+      }
+    }
+    if (checkKind === "max" || checkKind === "max_length") {
+      if (type === "ZodString") {
+        inputProps.maxLength = check.value ?? check.maximum;
+      } else {
+        inputProps.max = check.value ?? check.maximum;
+      }
+    }
+  }
+  return inputProps;
+}
+function sortFieldsByOrder(fieldConfig, keys) {
+  const sortedFields = keys.sort((a, b) => {
+    const fieldA = fieldConfig?.[a]?.order ?? 0;
+    const fieldB = fieldConfig?.[b]?.order ?? 0;
+    return fieldA - fieldB;
+  });
+  return sortedFields;
+}
+function buildFieldConfigFromJsonSchema(jsonSchema, fieldComponents) {
+  const fieldConfig = {};
+  const properties = jsonSchema.properties;
+  if (!properties) return fieldConfig;
+  for (const [key, value] of Object.entries(properties)) {
+    const config = {};
+    if (value.label) {
+      config.label = value.label;
+    } else if (value.title) {
+      config.label = value.title;
+    }
+    if (value.description) {
+      config.description = value.description;
+    }
+    const inputProps = value.inputProps ? { ...value.inputProps } : {};
+    if (value.placeholder) {
+      inputProps.placeholder = value.placeholder;
+    }
+    if (value.default !== void 0) {
+      inputProps.defaultValue = value.default;
+      inputProps.required = false;
+    }
+    if (Object.keys(inputProps).length > 0) {
+      config.inputProps = inputProps;
+    }
+    if (value.order !== void 0) {
+      config.order = value.order;
+    }
+    let fieldType = value.fieldType;
+    if (!fieldType && value.type === "string" && value.format === "date-time") {
+      fieldType = "date";
+    }
+    if (fieldType) {
+      const CustomComponent = fieldComponents?.[fieldType];
+      if (CustomComponent) {
+        config.fieldType = (props) => /* @__PURE__ */ jsxRuntime.jsx(CustomComponent, { ...props });
+      } else if (BUILTIN_FIELD_TYPES.includes(
+        fieldType
+      )) {
+        config.fieldType = fieldType;
+      }
+    }
+    const reservedProps = /* @__PURE__ */ new Set([
+      "description",
+      "label",
+      "inputProps",
+      "fieldType",
+      "renderParent",
+      "order"
+    ]);
+    if (value.properties) {
+      const nestedConfig = buildFieldConfigFromJsonSchema(
+        { properties: value.properties },
+        fieldComponents
+      );
+      for (const [nestedKey, nestedValue] of Object.entries(nestedConfig)) {
+        if (!reservedProps.has(nestedKey)) {
+          config[nestedKey] = nestedValue;
+        } else {
+          console.warn(
+            `Field "${key}" has a nested field named "${nestedKey}" which conflicts with a reserved FieldConfigItem property. The nested field's config will not be accessible at the parent level.`
+          );
+        }
+      }
+    }
+    const items = value.items;
+    if (items?.properties) {
+      const itemConfig = buildFieldConfigFromJsonSchema(
+        { properties: items.properties },
+        fieldComponents
+      );
+      for (const [itemKey, itemValue] of Object.entries(itemConfig)) {
+        if (!reservedProps.has(itemKey)) {
+          config[itemKey] = itemValue;
+        } else {
+          console.warn(
+            `Array field "${key}" has an item property named "${itemKey}" which conflicts with a reserved FieldConfigItem property. The item field's config will not be accessible inside array items.`
+          );
+        }
+      }
+    }
+    if (Object.keys(config).length > 0) {
+      fieldConfig[key] = config;
+    }
+  }
+  return fieldConfig;
+}
+
+exports.BUILTIN_FIELD_TYPES = BUILTIN_FIELD_TYPES;
+exports.beautifyObjectName = beautifyObjectName;
+exports.buildFieldConfigFromJsonSchema = buildFieldConfigFromJsonSchema;
+exports.getBaseSchema = getBaseSchema;
+exports.getBaseType = getBaseType;
+exports.getDefaultValueInZodStack = getDefaultValueInZodStack;
+exports.getDefaultValues = getDefaultValues;
+exports.getObjectFormSchema = getObjectFormSchema;
+exports.sortFieldsByOrder = sortFieldsByOrder;
+exports.zodToHtmlInputProps = zodToHtmlInputProps;

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

@@ -0,0 +1,259 @@
+import { jsx } from 'react/jsx-runtime';
+import 'zod';
+
+const BUILTIN_FIELD_TYPES = [
+  "checkbox",
+  "date",
+  "select",
+  "radio",
+  "switch",
+  "textarea",
+  "number",
+  "fallback"
+];
+function getDefTypeName(schema) {
+  const def = schema._zod?.def;
+  return def?.type || "";
+}
+function beautifyObjectName(string) {
+  let output = string.replace(/([A-Z])/g, " $1");
+  output = output.charAt(0).toUpperCase() + output.slice(1);
+  return output;
+}
+function getBaseSchema(schema) {
+  if (!schema) return null;
+  const def = schema._zod?.def;
+  if (!def) return schema;
+  if (def.innerType) {
+    return getBaseSchema(def.innerType);
+  }
+  if (def.out) {
+    return getBaseSchema(def.out);
+  }
+  if (def.schema) {
+    return getBaseSchema(def.schema);
+  }
+  return schema;
+}
+function getBaseType(schema) {
+  const baseSchema = getBaseSchema(schema);
+  if (!baseSchema) return "";
+  const typeName = getDefTypeName(baseSchema);
+  const typeMap = {
+    object: "ZodObject",
+    array: "ZodArray",
+    string: "ZodString",
+    number: "ZodNumber",
+    int: "ZodNumber",
+    float: "ZodNumber",
+    boolean: "ZodBoolean",
+    date: "ZodDate",
+    enum: "ZodEnum",
+    nativeEnum: "ZodNativeEnum",
+    literal: "ZodLiteral",
+    union: "ZodUnion"
+  };
+  return typeMap[typeName] || typeName;
+}
+function getDefaultValueInZodStack(schema) {
+  const def = schema._zod?.def;
+  if (!def) return void 0;
+  if (def.type === "default") {
+    const defaultValue = def.defaultValue;
+    if (typeof defaultValue === "function") {
+      return defaultValue();
+    }
+    return defaultValue;
+  }
+  if (def.innerType) {
+    return getDefaultValueInZodStack(def.innerType);
+  }
+  if (def.schema) {
+    return getDefaultValueInZodStack(def.schema);
+  }
+  return void 0;
+}
+function getDefaultValues(schema, fieldConfig) {
+  if (!schema) return null;
+  const { shape } = schema;
+  const defaultValues = {};
+  if (!shape) return defaultValues;
+  for (const key of Object.keys(shape)) {
+    const item = shape[key];
+    if (getBaseType(item) === "ZodObject") {
+      const defaultItems = getDefaultValues(
+        getBaseSchema(item),
+        fieldConfig?.[key]
+      );
+      if (defaultItems !== null) {
+        for (const defaultItemKey of Object.keys(defaultItems)) {
+          const pathKey = `${key}.${defaultItemKey}`;
+          defaultValues[pathKey] = defaultItems[defaultItemKey];
+        }
+      }
+    } else {
+      let defaultValue = getDefaultValueInZodStack(item);
+      if ((defaultValue === void 0 || defaultValue === null || defaultValue === "") && fieldConfig?.[key]?.inputProps) {
+        defaultValue = (fieldConfig?.[key]?.inputProps).defaultValue;
+      }
+      if (defaultValue !== void 0) {
+        defaultValues[key] = defaultValue;
+      }
+    }
+  }
+  return defaultValues;
+}
+function getObjectFormSchema(schema) {
+  if (!schema) return schema;
+  const def = schema._zod?.def;
+  if (!def) return schema;
+  if (def.type === "pipe") {
+    return getObjectFormSchema(def.in);
+  }
+  if (def.innerType) {
+    return getObjectFormSchema(def.innerType);
+  }
+  if (def.schema) {
+    return getObjectFormSchema(def.schema);
+  }
+  return schema;
+}
+function zodToHtmlInputProps(schema) {
+  const def = schema._zod?.def;
+  const defType = def?.type || "";
+  if (["optional", "nullable"].includes(defType)) {
+    return {
+      ...zodToHtmlInputProps(def.innerType),
+      required: false
+    };
+  }
+  if (defType === "default") {
+    return {
+      ...zodToHtmlInputProps(def.innerType),
+      required: false
+    };
+  }
+  const inputProps = {
+    required: true
+  };
+  const checks = def?.checks;
+  if (!checks || !Array.isArray(checks)) {
+    return inputProps;
+  }
+  const type = getBaseType(schema);
+  for (const check of checks) {
+    const checkKind = check.kind || check.type;
+    if (checkKind === "min" || checkKind === "min_length") {
+      if (type === "ZodString") {
+        inputProps.minLength = check.value ?? check.minimum;
+      } else {
+        inputProps.min = check.value ?? check.minimum;
+      }
+    }
+    if (checkKind === "max" || checkKind === "max_length") {
+      if (type === "ZodString") {
+        inputProps.maxLength = check.value ?? check.maximum;
+      } else {
+        inputProps.max = check.value ?? check.maximum;
+      }
+    }
+  }
+  return inputProps;
+}
+function sortFieldsByOrder(fieldConfig, keys) {
+  const sortedFields = keys.sort((a, b) => {
+    const fieldA = fieldConfig?.[a]?.order ?? 0;
+    const fieldB = fieldConfig?.[b]?.order ?? 0;
+    return fieldA - fieldB;
+  });
+  return sortedFields;
+}
+function buildFieldConfigFromJsonSchema(jsonSchema, fieldComponents) {
+  const fieldConfig = {};
+  const properties = jsonSchema.properties;
+  if (!properties) return fieldConfig;
+  for (const [key, value] of Object.entries(properties)) {
+    const config = {};
+    if (value.label) {
+      config.label = value.label;
+    } else if (value.title) {
+      config.label = value.title;
+    }
+    if (value.description) {
+      config.description = value.description;
+    }
+    const inputProps = value.inputProps ? { ...value.inputProps } : {};
+    if (value.placeholder) {
+      inputProps.placeholder = value.placeholder;
+    }
+    if (value.default !== void 0) {
+      inputProps.defaultValue = value.default;
+      inputProps.required = false;
+    }
+    if (Object.keys(inputProps).length > 0) {
+      config.inputProps = inputProps;
+    }
+    if (value.order !== void 0) {
+      config.order = value.order;
+    }
+    let fieldType = value.fieldType;
+    if (!fieldType && value.type === "string" && value.format === "date-time") {
+      fieldType = "date";
+    }
+    if (fieldType) {
+      const CustomComponent = fieldComponents?.[fieldType];
+      if (CustomComponent) {
+        config.fieldType = (props) => /* @__PURE__ */ jsx(CustomComponent, { ...props });
+      } else if (BUILTIN_FIELD_TYPES.includes(
+        fieldType
+      )) {
+        config.fieldType = fieldType;
+      }
+    }
+    const reservedProps = /* @__PURE__ */ new Set([
+      "description",
+      "label",
+      "inputProps",
+      "fieldType",
+      "renderParent",
+      "order"
+    ]);
+    if (value.properties) {
+      const nestedConfig = buildFieldConfigFromJsonSchema(
+        { properties: value.properties },
+        fieldComponents
+      );
+      for (const [nestedKey, nestedValue] of Object.entries(nestedConfig)) {
+        if (!reservedProps.has(nestedKey)) {
+          config[nestedKey] = nestedValue;
+        } else {
+          console.warn(
+            `Field "${key}" has a nested field named "${nestedKey}" which conflicts with a reserved FieldConfigItem property. The nested field's config will not be accessible at the parent level.`
+          );
+        }
+      }
+    }
+    const items = value.items;
+    if (items?.properties) {
+      const itemConfig = buildFieldConfigFromJsonSchema(
+        { properties: items.properties },
+        fieldComponents
+      );
+      for (const [itemKey, itemValue] of Object.entries(itemConfig)) {
+        if (!reservedProps.has(itemKey)) {
+          config[itemKey] = itemValue;
+        } else {
+          console.warn(
+            `Array field "${key}" has an item property named "${itemKey}" which conflicts with a reserved FieldConfigItem property. The item field's config will not be accessible inside array items.`
+          );
+        }
+      }
+    }
+    if (Object.keys(config).length > 0) {
+      fieldConfig[key] = config;
+    }
+  }
+  return fieldConfig;
+}
+
+export { BUILTIN_FIELD_TYPES, beautifyObjectName, buildFieldConfigFromJsonSchema, getBaseSchema, getBaseType, getDefaultValueInZodStack, getDefaultValues, getObjectFormSchema, sortFieldsByOrder, zodToHtmlInputProps };

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

@@ -0,0 +1,92 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const form = require('../form.cjs');
+const React = require('react');
+const reactHookForm = require('react-hook-form');
+require('../button.cjs');
+const utils = require('../../lib/utils.cjs');
+const zod = require('@hookform/resolvers/zod');
+const object = require('./fields/object.cjs');
+const helpers = require('./helpers.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+function AutoForm({
+  formSchema,
+  values: valuesProp,
+  onValuesChange: onValuesChangeProp,
+  onParsedValuesChange,
+  onSubmit: onSubmitProp,
+  fieldConfig,
+  children,
+  className,
+  dependencies
+}) {
+  const objectFormSchema = helpers.getObjectFormSchema(formSchema);
+  const defaultValues = helpers.getDefaultValues(objectFormSchema, fieldConfig);
+  const form$1 = reactHookForm.useForm({
+    // Cast to any to handle Zod v4 type compatibility with @hookform/resolvers
+    resolver: zod.zodResolver(formSchema),
+    defaultValues: defaultValues ?? void 0,
+    values: valuesProp
+  });
+  const [schemaSubmitError, setSchemaSubmitError] = React.useState(null);
+  function onSubmit(values) {
+    setSchemaSubmitError(null);
+    const parsedValues = formSchema.safeParse(values);
+    if (parsedValues.success) {
+      onSubmitProp?.(parsedValues.data, form$1);
+    } else {
+      const message = parsedValues.error.issues.map(
+        (issue) => `${issue.path.length ? `${issue.path.join(".")}: ` : ""}${issue.message}`
+      ).join(" \xB7 ");
+      setSchemaSubmitError(message);
+    }
+  }
+  React__default.useEffect(() => {
+    const subscription = form$1.watch((values) => {
+      onValuesChangeProp?.(values, form$1);
+      const parsedValues = formSchema.safeParse(values);
+      if (parsedValues.success) {
+        onParsedValuesChange?.(parsedValues.data, form$1);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [form$1, formSchema, onValuesChangeProp, onParsedValuesChange]);
+  const renderChildren = typeof children === "function" ? children(form$1.formState) : children;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(form.Form, { ...form$1, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      onSubmit: (e) => {
+        form$1.handleSubmit(onSubmit, () => setSchemaSubmitError(null))(e);
+      },
+      className: utils.cn("space-y-5", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          object,
+          {
+            schema: objectFormSchema,
+            form: form$1,
+            dependencies,
+            fieldConfig
+          }
+        ),
+        schemaSubmitError ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "alert",
+            className: "rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive",
+            children: schemaSubmitError
+          }
+        ) : null,
+        renderChildren
+      ]
+    }
+  ) }) });
+}
+
+module.exports = AutoForm;

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

@@ -0,0 +1,86 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Form } from '../form.mjs';
+import React__default, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import '../button.mjs';
+import { cn } from '../../lib/utils.mjs';
+import { zodResolver } from '@hookform/resolvers/zod';
+import AutoFormObject from './fields/object.mjs';
+import { getObjectFormSchema, getDefaultValues } from './helpers.mjs';
+
+function AutoForm({
+  formSchema,
+  values: valuesProp,
+  onValuesChange: onValuesChangeProp,
+  onParsedValuesChange,
+  onSubmit: onSubmitProp,
+  fieldConfig,
+  children,
+  className,
+  dependencies
+}) {
+  const objectFormSchema = getObjectFormSchema(formSchema);
+  const defaultValues = getDefaultValues(objectFormSchema, fieldConfig);
+  const form = useForm({
+    // Cast to any to handle Zod v4 type compatibility with @hookform/resolvers
+    resolver: zodResolver(formSchema),
+    defaultValues: defaultValues ?? void 0,
+    values: valuesProp
+  });
+  const [schemaSubmitError, setSchemaSubmitError] = useState(null);
+  function onSubmit(values) {
+    setSchemaSubmitError(null);
+    const parsedValues = formSchema.safeParse(values);
+    if (parsedValues.success) {
+      onSubmitProp?.(parsedValues.data, form);
+    } else {
+      const message = parsedValues.error.issues.map(
+        (issue) => `${issue.path.length ? `${issue.path.join(".")}: ` : ""}${issue.message}`
+      ).join(" \xB7 ");
+      setSchemaSubmitError(message);
+    }
+  }
+  React__default.useEffect(() => {
+    const subscription = form.watch((values) => {
+      onValuesChangeProp?.(values, form);
+      const parsedValues = formSchema.safeParse(values);
+      if (parsedValues.success) {
+        onParsedValuesChange?.(parsedValues.data, form);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [form, formSchema, onValuesChangeProp, onParsedValuesChange]);
+  const renderChildren = typeof children === "function" ? children(form.formState) : children;
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => {
+        form.handleSubmit(onSubmit, () => setSchemaSubmitError(null))(e);
+      },
+      className: cn("space-y-5", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          AutoFormObject,
+          {
+            schema: objectFormSchema,
+            form,
+            dependencies,
+            fieldConfig
+          }
+        ),
+        schemaSubmitError ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "alert",
+            className: "rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive",
+            children: schemaSubmitError
+          }
+        ) : null,
+        renderChildren
+      ]
+    }
+  ) }) });
+}
+
+export { AutoForm as default };