alepha 0.22.0 → 0.24.0

package/dist/react/form/index.js

@@ -1,4 +1,4 @@
-import { $inject, $module, Alepha, TypeBoxError, t } from "alepha";
+import { $inject, $module, Alepha, TypeBoxError, coerceObject, z } from "alepha";
 import { useAlepha } from "alepha/react";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { $logger } from "alepha/logger";
@@ -80,8 +80,6 @@ var FormValidationError = class extends TypeBoxError {
 		super({
 			message: options.message,
 			instancePath: options.path,
-			schemaPath: "",
-			keyword: "not",
 			params: {}
 		});
 	}
@@ -127,9 +125,6 @@ var FormModel = class {
 	initialValues = {};
 	submitInProgress = false;
 	input;
-	get submitting() {
-		return this.submitInProgress;
-	}
 	constructor(id, options) {
 		this.id = id;
 		this.options = options;
@@ -137,7 +132,7 @@ var FormModel = class {
 		const schemaDefaults = this.extractSchemaDefaults(options.schema);
 		if (Object.keys(schemaDefaults).length > 0) Object.assign(this.values, schemaDefaults);
 		if (options.initialValues) {
-			const decoded = this.alepha.codec.decode(t.partial(options.schema), options.initialValues);
+			const decoded = this.alepha.codec.decode(options.schema.partial(), options.initialValues);
 			Object.assign(this.values, decoded);
 		}
 		this.initialValues = { ...this.values };
@@ -147,19 +142,31 @@ var FormModel = class {
 		});
 	}
 	/**
-	* Extract default values from a TypeBox schema.
-	* Recursively handles nested objects.
+	* Extract default values from a zod object schema.
+	* Recursively handles nested objects, unwrapping optional/nullable/default.
 	*/
 	extractSchemaDefaults(schema, prefix = "") {
 		const defaults = {};
-		if (!schema.properties) return defaults;
-		for (const [key, propSchema] of Object.entries(schema.properties)) {
+		const shape = schema.shape;
+		if (!shape) return defaults;
+		for (const [key, propSchema] of Object.entries(shape)) {
 			const fullKey = prefix ? `${prefix}.${key}` : key;
-			if ("default" in propSchema && propSchema.default !== void 0) defaults[fullKey] = propSchema.default;
-			else if (propSchema && "type" in propSchema && propSchema.type === "object" && "properties" in propSchema) {
-				const nestedDefaults = this.extractSchemaDefaults(propSchema, fullKey);
-				Object.assign(defaults, nestedDefaults);
+			let inner = propSchema;
+			let defaultValue;
+			while (inner) {
+				if (z.schema.isDefault(inner)) {
+					const dv = inner._zod.def.defaultValue;
+					defaultValue = typeof dv === "function" ? dv() : dv;
+					break;
+				}
+				if (z.schema.isOptional(inner) || z.schema.isNullable(inner)) {
+					inner = inner.unwrap();
+					continue;
+				}
+				break;
 			}
+			if (defaultValue !== void 0) defaults[fullKey] = defaultValue;
+			else if (z.schema.isObject(inner)) Object.assign(defaults, this.extractSchemaDefaults(inner, fullKey));
 		}
 		return defaults;
 	}
@@ -178,13 +185,13 @@ var FormModel = class {
 		};
 	}
 	setInitialValues = (values) => {
-		const decoded = this.alepha.codec.decode(t.partial(this.options.schema), values);
+		const decoded = this.alepha.codec.decode(this.options.schema.partial(), values);
 		const oldKeys = new Set(Object.keys(this.values));
 		for (const key in this.initialValues) delete this.initialValues[key];
 		Object.assign(this.initialValues, decoded);
 		for (const key in this.values) delete this.values[key];
 		Object.assign(this.values, { ...this.initialValues });
-		const keys = new Set([...oldKeys, ...Object.keys(this.values)]);
+		const keys = /* @__PURE__ */ new Set([...oldKeys, ...Object.keys(this.values)]);
 		for (const key of keys) {
 			const path = `/${key.replaceAll(".", "/")}`;
 			this.alepha.events.emit("form:change", {
@@ -197,7 +204,7 @@ var FormModel = class {
 	};
 	reset = (event) => {
 		event?.preventDefault?.();
-		const keys = new Set([...Object.keys(this.values), ...Object.keys(this.initialValues)]);
+		const keys = /* @__PURE__ */ new Set([...Object.keys(this.values), ...Object.keys(this.initialValues)]);
 		for (const key in this.values) delete this.values[key];
 		Object.assign(this.values, { ...this.initialValues });
 		for (const key of keys) {
@@ -219,42 +226,46 @@ var FormModel = class {
 		await this.alepha.events.emit("react:action:begin", {
 			type: "form",
 			id: this.id
-		});
-		await this.alepha.events.emit("form:submit:begin", { id: this.id });
+		}, { catch: true });
+		await this.alepha.events.emit("form:submit:begin", { id: this.id }, { catch: true });
 		this.submitInProgress = true;
 		const options = this.options;
 		try {
 			let values = this.restructureValues(this.values);
-			if (t.schema.isSchema(options.schema)) values = this.alepha.codec.decode(options.schema, values);
+			if (z.schema.isSchema(options.schema)) values = this.alepha.codec.decode(options.schema, coerceObject(options.schema, values));
 			await options.handler(values);
 			await this.alepha.events.emit("react:action:success", {
 				type: "form",
 				id: this.id
-			});
+			}, { catch: true });
 			await this.alepha.events.emit("form:submit:success", {
 				id: this.id,
 				values
-			});
+			}, { catch: true });
 		} catch (error) {
 			this.log.error("Form submission error:", error);
-			options.onError?.(error);
+			try {
+				options.onError?.(error);
+			} catch (handlerError) {
+				this.log.error("Form onError handler threw:", handlerError);
+			}
 			await this.alepha.events.emit("react:action:error", {
 				type: "form",
 				id: this.id,
 				error
-			});
+			}, { catch: true });
 			await this.alepha.events.emit("form:submit:error", {
 				error,
 				id: this.id
-			});
+			}, { catch: true });
 		} finally {
 			this.submitInProgress = false;
+			await this.alepha.events.emit("react:action:end", {
+				type: "form",
+				id: this.id
+			}, { catch: true });
+			await this.alepha.events.emit("form:submit:end", { id: this.id }, { catch: true });
 		}
-		await this.alepha.events.emit("react:action:end", {
-			type: "form",
-			id: this.id
-		});
-		await this.alepha.events.emit("form:submit:end", { id: this.id });
 	};
 	/**
 	* Restructures flat keys like "address.city" into nested objects like { address: { city: ... } }
@@ -284,14 +295,14 @@ var FormModel = class {
 	createProxyFromSchema(options, schema, context) {
 		context.parent;
 		return new Proxy({}, { get: (_, prop) => {
-			if (!options.schema || !t.schema.isObject(schema)) return {};
-			if (prop in schema.properties) return this.createInputFromSchema(prop, options, schema, schema.required?.includes(prop) || false, context);
+			if (!options.schema || !z.schema.isObject(schema)) return {};
+			if (prop in schema.properties) return this.createInputFromSchema(prop, options, schema, z.schema.requiredKeys(schema).includes(prop) || false, context);
 		} });
 	}
 	createInputFromSchema(name, options, schema, required, context) {
 		const parent = context.parent || "";
-		const field = schema.properties?.[name];
-		if (!field) return {
+		const rawField = schema.properties?.[name];
+		if (!rawField) return {
 			path: "",
 			required,
 			initialValue: void 0,
@@ -300,7 +311,8 @@ var FormModel = class {
 			set: () => {},
 			form: this
 		};
-		const isRequired = schema.required?.includes(name) ?? false;
+		const field = z.schema.unwrap(rawField);
+		const isRequired = z.schema.requiredKeys(schema).includes(name) ?? false;
 		const key = parent ? `${parent}.${name}` : name;
 		const path = `/${key.replaceAll(".", "/")}`;
 		const set = (value) => {
@@ -316,27 +328,27 @@ var FormModel = class {
 		const attr = { name: key };
 		attr.id = `${this.id}-${key}`;
 		attr["data-testid"] = attr.id;
-		if (t.schema.isString(field)) {
+		if (z.schema.isString(field)) {
 			if (field.maxLength != null) attr.maxLength = Number(field.maxLength);
 			if (field.minLength != null) attr.minLength = Number(field.minLength);
 		}
 		if (isRequired) attr.required = true;
 		if ("description" in field && typeof field.description === "string") attr["aria-label"] = field.description;
-		if (t.schema.isInteger(field) || t.schema.isNumber(field)) attr.type = "number";
+		if (z.schema.isInteger(field) || z.schema.isNumber(field)) attr.type = "number";
 		else if (name === "password") attr.type = "password";
 		else if (name === "email") attr.type = "email";
 		else if (name === "url") attr.type = "url";
-		else if (t.schema.isString(field)) if (field.format === "binary") attr.type = "file";
-		else if (field.format === "date") attr.type = "date";
-		else if (field.format === "time") attr.type = "time";
-		else if (field.format === "date-time") attr.type = "datetime-local";
+		else if (z.schema.isString(field)) if (z.schema.format(field) === "binary") attr.type = "file";
+		else if (z.schema.format(field) === "date") attr.type = "date";
+		else if (z.schema.format(field) === "time") attr.type = "time";
+		else if (z.schema.format(field) === "date-time") attr.type = "datetime-local";
 		else attr.type = "text";
-		else if (t.schema.isBoolean(field)) attr.type = "checkbox";
+		else if (z.schema.isBoolean(field)) attr.type = "checkbox";
 		if (options.onCreateField) {
 			const customAttr = options.onCreateField(name, field);
 			Object.assign(attr, customAttr);
 		}
-		if (t.schema.isObject(field)) return {
+		if (z.schema.isObject(field)) return {
 			path,
 			props: attr,
 			schema: field,
@@ -349,7 +361,7 @@ var FormModel = class {
 				store: context.store
 			})
 		};
-		if (t.schema.isArray(field)) return {
+		if (z.schema.isArray(field)) return {
 			path,
 			props: attr,
 			schema: field,
@@ -376,23 +388,23 @@ var FormModel = class {
 	getValueFromInput(input, schema) {
 		if (input === null || input === void 0) return;
 		if (input instanceof File) {
-			if (t.schema.isString(schema) && schema.format === "binary") return input;
+			if (z.schema.isString(schema) && z.schema.format(schema) === "binary") return input;
 			return null;
 		}
-		if (t.schema.isBoolean(schema)) {
+		if (z.schema.isBoolean(schema)) {
 			if (input === "true") return true;
 			if (input === "false") return false;
 			if (input === "" || input === null || input === void 0) return void 0;
 			return !!input;
 		}
-		if (t.schema.isNumber(schema)) {
+		if (z.schema.isNumber(schema)) {
 			const num = Number(input);
 			return Number.isNaN(num) ? null : num;
 		}
-		if (t.schema.isString(schema)) {
-			if (schema.format === "date") return new Date(input).toISOString().slice(0, 10);
-			if (schema.format === "time") return (/* @__PURE__ */ new Date(`1970-01-01T${input}`)).toISOString().slice(11, 16);
-			if (schema.format === "date-time") return new Date(input).toISOString();
+		if (z.schema.isString(schema)) {
+			if (z.schema.format(schema) === "date") return new Date(input).toISOString().slice(0, 10);
+			if (z.schema.format(schema) === "time") return (/* @__PURE__ */ new Date(`1970-01-01T${input}`)).toISOString().slice(11, 16);
+			if (z.schema.format(schema) === "date-time") return new Date(input).toISOString();
 			return String(input);
 		}
 		return input;
@@ -407,12 +419,12 @@ var FormModel = class {
 *
 * @example
 * ```tsx
-* import { t } from "alepha";
+* import { z } from "alepha";
 *
 * const form = useForm({
-*   schema: t.object({
-*     username: t.text(),
-*     password: t.text(),
+*   schema: z.object({
+*     username: z.text(),
+*     password: z.text(),
 *   }),
 *   handler: (values) => {
 *     console.log("Form submitted with values:", values);
@@ -453,6 +465,15 @@ const useForm = (options, deps = []) => {
 			args: [options.id || formId, options]
 		});
 	}, deps);
+	useEffect(() => {
+		Object.assign(form.options, {
+			handler: options.handler,
+			onError: options.onError,
+			onChange: options.onChange,
+			onReset: options.onReset,
+			onCreateField: options.onCreateField
+		});
+	});
 	useEffect(() => {
 		if (stableEqual(initialValuesRef.current, options.initialValues)) return;
 		initialValuesRef.current = options.initialValues;
@@ -484,7 +505,7 @@ const useForm = (options, deps = []) => {
 * navigable via back/forward.
 *
 * @example
-* const form = useForm({ schema: t.object({ status: t.string(), q: t.string() }) });
+* const form = useForm({ schema: z.object({ status: z.string(), q: z.string() }) });
 * useFormQuerySync(form, { keys: ["status", "q"] });
 */
 const useFormQuerySync = (form, options) => {
@@ -588,16 +609,21 @@ const prettyName = (name) => {
 * error messages, icons, and validation constraints.
 */
 const parseField = (input, options = {}) => {
-	const schema = input.schema;
-	const label = options.label ?? (typeof schema.title === "string" ? schema.title : void 0) ?? prettyName(input.path);
-	const description = options.description ?? (typeof schema.description === "string" ? schema.description : void 0);
+	const schema = z.schema.unwrap(input.schema);
+	const meta = typeof schema.meta === "function" ? schema.meta() : null;
+	const label = options.label ?? (typeof meta?.title === "string" ? meta.title : void 0) ?? prettyName(input.path);
+	const description = options.description ?? (typeof meta?.description === "string" ? meta.description : void 0);
 	const error = options.error instanceof TypeBoxError ? options.error.value?.message : void 0;
-	const type = schema.type;
-	const format = typeof schema.format === "string" ? schema.format : void 0;
-	const isEnum = Array.isArray(schema.enum);
-	const isArray = type === "array";
-	const isObject = type === "object" && Boolean(schema.properties);
-	const isArrayOfObjects = isArray && Boolean(schema.items && schema.items.properties);
+	const isEnum = z.schema.isEnum(schema);
+	const isArray = z.schema.isArray(schema);
+	const isObject = z.schema.isObject(schema);
+	const isInteger = z.schema.isInteger(schema);
+	const isNumber = !isInteger && z.schema.isNumber(schema);
+	const isBoolean = z.schema.isBoolean(schema);
+	const type = isObject ? "object" : isArray ? "array" : isEnum ? "string" : isInteger ? "integer" : isNumber ? "number" : isBoolean ? "boolean" : z.schema.isString(schema) ? "string" : void 0;
+	const format = typeof z.schema.format(schema) === "string" ? z.schema.format(schema) : void 0;
+	const element = schema.element ?? schema.items;
+	const isArrayOfObjects = isArray && z.schema.isObject(element);
 	const name = input.props.name;
 	const iconHint = inferIconHint({
 		type,
@@ -609,9 +635,10 @@ const parseField = (input, options = {}) => {
 	const constraints = {};
 	if (typeof schema.minLength === "number") constraints.minLength = schema.minLength;
 	if (typeof schema.maxLength === "number") constraints.maxLength = schema.maxLength;
-	if (typeof schema.minimum === "number") constraints.minimum = schema.minimum;
-	if (typeof schema.maximum === "number") constraints.maximum = schema.maximum;
-	if (typeof schema.pattern === "string") constraints.pattern = schema.pattern;
+	if (typeof schema.minValue === "number") constraints.minimum = schema.minValue;
+	if (typeof schema.maxValue === "number") constraints.maximum = schema.maxValue;
+	const pattern = readPattern(schema);
+	if (pattern) constraints.pattern = pattern;
 	return {
 		id: input.props.id,
 		label,
@@ -624,14 +651,23 @@ const parseField = (input, options = {}) => {
 		isArray,
 		isObject,
 		isArrayOfObjects,
-		enum: schema.enum,
+		enum: isEnum ? z.schema.enumValues(schema) : void 0,
 		iconHint,
 		constraints,
 		testId: input.props["data-testid"],
 		schema: input.schema,
-		control: schema.$control
+		control: meta?.$control
 	};
 };
+/** Best-effort read of a `ZodString` regex pattern from its check list. */
+const readPattern = (schema) => {
+	const checks = schema?._zod?.def?.checks;
+	if (!Array.isArray(checks)) return void 0;
+	for (const check of checks) {
+		const pattern = check?._zod?.def?.pattern;
+		if (pattern instanceof RegExp) return pattern.source;
+	}
+};
 const inferIconHint = (params) => {
 	const { type, format, name, isEnum, isArray } = params;
 	if (format === "email") return "email";