alepha 0.15.0 → 0.15.2

package/dist/react/form/index.d.ts

@@ -0,0 +1,232 @@
+import * as alepha0 from "alepha";
+import { Alepha, Static, TArray, TObject, TSchema, TypeBoxError } from "alepha";
+import { InputHTMLAttributes, ReactNode } from "react";
+import * as alepha_logger0 from "alepha/logger";
+
+//#region ../../src/react/form/services/FormModel.d.ts
+/**
+ * FormModel is a dynamic form handler that generates form inputs based on a provided TypeBox schema.
+ * It manages form state, handles input changes, and processes form submissions with validation.
+ *
+ * It means to be injected and used within React components to provide a structured way to create and manage forms.
+ *
+ * @see {@link useForm}
+ */
+declare class FormModel<T extends TObject> {
+  readonly id: string;
+  readonly options: FormCtrlOptions<T>;
+  protected readonly log: alepha_logger0.Logger;
+  protected readonly alepha: Alepha;
+  protected readonly values: Record<string, any>;
+  protected submitInProgress: boolean;
+  input: SchemaToInput<T>;
+  get submitting(): boolean;
+  constructor(id: string, options: FormCtrlOptions<T>);
+  get element(): HTMLFormElement;
+  get currentValues(): Record<string, any>;
+  get props(): {
+    id: string;
+    noValidate: boolean;
+    onSubmit: (ev?: FormEventLike) => void;
+    onReset: (event: FormEventLike) => Promise<void>;
+  };
+  readonly reset: (event: FormEventLike) => Promise<void>;
+  readonly submit: () => Promise<void>;
+  /**
+   * Restructures flat keys like "address.city" into nested objects like { address: { city: ... } }
+   * Values are already typed from onChange, so no conversion is needed.
+   */
+  protected restructureValues(store: Record<string, any>): Record<string, any>;
+  /**
+   * Helper to restructure a flat key like "address.city" into nested object structure.
+   * The value is already typed, so we just assign it to the nested path.
+   */
+  protected restructureNestedValue(values: Record<string, any>, key: string, value: any): void;
+  protected createProxyFromSchema<T extends TObject>(options: FormCtrlOptions<T>, schema: TSchema, context: {
+    parent: string;
+    store: Record<string, any>;
+  }): SchemaToInput<T>;
+  protected createInputFromSchema<T extends TObject>(name: keyof Static<T> & string, options: FormCtrlOptions<T>, schema: TObject, required: boolean, context: {
+    parent: string;
+    store: Record<string, any>;
+  }): BaseInputField;
+  /**
+   * Convert an input value to the correct type based on the schema.
+   * Handles raw DOM values (strings, booleans from checkboxes, Files, etc.)
+   */
+  protected getValueFromInput(input: any, schema: TSchema): any;
+  protected valueToInputEntry(value: any): string | number | boolean;
+}
+type SchemaToInput<T extends TObject> = { [K in keyof T["properties"]]: InputField<T["properties"][K]> };
+interface FormEventLike {
+  preventDefault?: () => void;
+  stopPropagation?: () => void;
+}
+type InputField<T extends TSchema> = T extends TObject ? ObjectInputField<T> : T extends TArray<infer U> ? ArrayInputField<U> : BaseInputField;
+interface BaseInputField {
+  path: string;
+  required: boolean;
+  props: InputHTMLAttributesLike;
+  schema: TSchema;
+  set: (value: any) => void;
+  form: FormModel<any>;
+  items?: any;
+}
+interface ObjectInputField<T extends TObject> extends BaseInputField {
+  items: SchemaToInput<T>;
+}
+interface ArrayInputField<T extends TSchema> extends BaseInputField {
+  items: Array<InputField<T>>;
+}
+type InputHTMLAttributesLike = Pick<InputHTMLAttributes<unknown>, "id" | "name" | "type" | "value" | "defaultValue" | "required" | "maxLength" | "minLength" | "aria-label" | "autoComplete"> & {
+  value?: any;
+  defaultValue?: any;
+  onChange?: (event: any) => void;
+};
+type FormCtrlOptions<T extends TObject> = {
+  /**
+   * The schema defining the structure and validation rules for the form.
+   * This should be a TypeBox schema object.
+   */
+  schema: T;
+  /**
+   * Callback function to handle form submission.
+   * This function will receive the parsed and validated form values.
+   */
+  handler: (values: Static<T>, args: {
+    form: HTMLFormElement;
+  }) => unknown;
+  /**
+   * Optional initial values for the form fields.
+   * This can be used to pre-populate the form with existing data.
+   */
+  initialValues?: Partial<Static<T>>;
+  /**
+   * Optional function to create custom field attributes.
+   * This can be used to add custom validation, styles, or other attributes.
+   */
+  onCreateField?: (name: keyof Static<T> & string, schema: TSchema) => InputHTMLAttributes<unknown>;
+  /**
+   * If defined, this will generate a unique ID for each field, prefixed with this string.
+   *
+   * > "username" with id="form-123" will become "form-123-username".
+   *
+   * If omitted, IDs will not be generated.
+   */
+  id?: string;
+  onError?: (error: Error, args: {
+    form: HTMLFormElement;
+  }) => void;
+  onChange?: (key: string, value: any, store: Record<string, any>) => void;
+  onReset?: () => void;
+};
+//#endregion
+//#region ../../src/react/form/components/FormState.d.ts
+declare const FormState: <T extends TObject>(props: {
+  form: FormModel<T>;
+  children: (state: {
+    loading: boolean;
+    dirty: boolean;
+  }) => ReactNode;
+}) => ReactNode;
+//#endregion
+//#region ../../src/react/form/errors/FormValidationError.d.ts
+declare class FormValidationError extends TypeBoxError {
+  readonly name = "ValidationError";
+  constructor(options: {
+    message: string;
+    path: string;
+  });
+}
+//#endregion
+//#region ../../src/react/form/hooks/useForm.d.ts
+/**
+ * Custom hook to create a form with validation and field management.
+ * This hook uses TypeBox schemas to define the structure and validation rules for the form.
+ * It provides a way to handle form submission, field creation, and value management.
+ *
+ * @example
+ * ```tsx
+ * import { t } from "alepha";
+ *
+ * const form = useForm({
+ *   schema: t.object({
+ *     username: t.text(),
+ *     password: t.text(),
+ *   }),
+ *   handler: (values) => {
+ *     console.log("Form submitted with values:", values);
+ *   },
+ * });
+ *
+ * return (
+ *   <form {...form.props}>
+ *     <input {...form.input.username.props} />
+ *     <input {...form.input.password.props} />
+ *     <button type="submit">Submit</button>
+ *   </form>
+ * );
+ * ```
+ */
+declare const useForm: <T extends TObject>(options: FormCtrlOptions<T>, deps?: any[]) => FormModel<T>;
+//#endregion
+//#region ../../src/react/form/hooks/useFormState.d.ts
+interface UseFormStateReturn {
+  loading: boolean;
+  dirty: boolean;
+  values?: Record<string, any>;
+  error?: Error;
+}
+declare const useFormState: <T extends TObject, Keys extends keyof UseFormStateReturn>(target: FormModel<T> | {
+  form: FormModel<T>;
+  path: string;
+}, _events?: Keys[]) => Pick<UseFormStateReturn, Keys>;
+//#endregion
+//#region ../../src/react/form/index.d.ts
+declare module "alepha" {
+  interface Hooks {
+    "form:change": {
+      id: string;
+      path: string;
+      value: any;
+    };
+    "form:reset": {
+      id: string;
+      values: Record<string, any>;
+    };
+    "form:submit:begin": {
+      id: string;
+    };
+    "form:submit:success": {
+      id: string;
+      values: Record<string, any>;
+    };
+    "form:submit:error": {
+      id: string;
+      error: Error;
+    };
+    "form:submit:end": {
+      id: string;
+    };
+  }
+}
+/**
+ * | type | quality | stability |
+ * |------|---------|-----------|
+ * | frontend | rare | stable |
+ *
+ * Type-safe forms with validation.
+ *
+ * **Features:**
+ * - Form state management
+ * - TypeBox schema validation
+ * - Field-level error handling
+ * - Submit handling with loading state
+ * - Form reset
+ *
+ * @module alepha.react.form
+ */
+declare const AlephaReactForm: alepha0.Service<alepha0.Module>;
+//#endregion
+export { AlephaReactForm, ArrayInputField, BaseInputField, FormCtrlOptions, FormEventLike, FormModel, FormState, FormValidationError, InputField, InputHTMLAttributesLike, ObjectInputField, SchemaToInput, UseFormStateReturn, useForm, useFormState };
+//# sourceMappingURL=index.d.ts.map

package/dist/react/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/react/form/services/FormModel.ts","../../../src/react/form/components/FormState.tsx","../../../src/react/form/errors/FormValidationError.ts","../../../src/react/form/hooks/useForm.ts","../../../src/react/form/hooks/useFormState.ts","../../../src/react/form/index.ts"],"mappings":"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"}

package/dist/react/form/index.js

@@ -0,0 +1,432 @@
+import { $inject, $module, Alepha, TypeBoxError, t } from "alepha";
+import { useAlepha } from "alepha/react";
+import { useEffect, useId, useMemo, useState } from "react";
+import { $logger } from "alepha/logger";
+
+//#region ../../src/react/form/hooks/useFormState.ts
+const useFormState = (target, _events = [
+	"loading",
+	"dirty",
+	"error"
+]) => {
+	const alepha = useAlepha();
+	const events = _events;
+	const [dirty, setDirty] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(void 0);
+	const [values, setValues] = useState(void 0);
+	const form = "form" in target ? target.form : target;
+	const path = "path" in target ? target.path : void 0;
+	const hasValues = events.includes("values");
+	const hasErrors = events.includes("error");
+	const hasDirty = events.includes("dirty");
+	const hasLoading = events.includes("loading");
+	useEffect(() => {
+		const listeners = [];
+		if (hasErrors || hasValues || hasDirty) listeners.push(alepha.events.on("form:change", (event) => {
+			if (event.id === form.id) {
+				if (!path || event.path === path) {
+					if (hasDirty) setDirty(true);
+					if (hasErrors) setError(void 0);
+				}
+				if (hasValues) setValues(form.currentValues);
+			}
+		}));
+		if (hasValues) listeners.push(alepha.events.on("form:reset", (event) => {
+			if (event.id === form.id) setValues(event.values);
+		}));
+		if (hasLoading) listeners.push(alepha.events.on("form:submit:begin", (event) => {
+			if (event.id === form.id) setLoading(true);
+		}), alepha.events.on("form:submit:end", (event) => {
+			if (event.id === form.id) setLoading(false);
+		}));
+		if (hasValues || hasDirty) listeners.push(alepha.events.on("form:submit:success", (event) => {
+			if (event.id === form.id) {
+				if (hasValues) setValues(event.values);
+				if (hasDirty) setDirty(false);
+			}
+		}));
+		if (hasErrors) listeners.push(alepha.events.on("form:submit:error", (event) => {
+			if (event.id === form.id) {
+				if (!path || event.error instanceof TypeBoxError && event.error.value.path === path) setError(event.error);
+			}
+		}));
+		return () => {
+			for (const unsub of listeners) unsub();
+		};
+	}, []);
+	return {
+		dirty,
+		loading,
+		error,
+		values
+	};
+};
+
+//#endregion
+//#region ../../src/react/form/components/FormState.tsx
+const FormState = (props) => {
+	const formState = useFormState(props.form);
+	return props.children({
+		loading: formState.loading,
+		dirty: formState.dirty
+	});
+};
+var FormState_default = FormState;
+
+//#endregion
+//#region ../../src/react/form/errors/FormValidationError.ts
+var FormValidationError = class extends TypeBoxError {
+	name = "ValidationError";
+	constructor(options) {
+		super({
+			message: options.message,
+			instancePath: options.path,
+			schemaPath: "",
+			keyword: "not",
+			params: {}
+		});
+	}
+};
+
+//#endregion
+//#region ../../src/react/form/services/FormModel.ts
+/**
+* FormModel is a dynamic form handler that generates form inputs based on a provided TypeBox schema.
+* It manages form state, handles input changes, and processes form submissions with validation.
+*
+* It means to be injected and used within React components to provide a structured way to create and manage forms.
+*
+* @see {@link useForm}
+*/
+var FormModel = class {
+	log = $logger();
+	alepha = $inject(Alepha);
+	values = {};
+	submitInProgress = false;
+	input;
+	get submitting() {
+		return this.submitInProgress;
+	}
+	constructor(id, options) {
+		this.id = id;
+		this.options = options;
+		this.options = options;
+		if (options.initialValues) this.values = this.alepha.codec.decode(options.schema, options.initialValues);
+		this.input = this.createProxyFromSchema(options, options.schema, {
+			store: this.values,
+			parent: ""
+		});
+	}
+	get element() {
+		return window.document.getElementById(this.id);
+	}
+	get currentValues() {
+		return this.restructureValues(this.values);
+	}
+	get props() {
+		return {
+			id: this.id,
+			noValidate: true,
+			onSubmit: (ev) => {
+				ev?.preventDefault?.();
+				this.submit();
+			},
+			onReset: (event) => this.reset(event)
+		};
+	}
+	reset = (event) => {
+		for (const key in this.values) delete this.values[key];
+		this.options.onReset?.();
+		return this.alepha.events.emit("form:reset", {
+			id: this.id,
+			values: this.values
+		}, { catch: true });
+	};
+	submit = async () => {
+		if (this.submitInProgress) {
+			this.log.warn("Form submission already in progress, ignoring duplicate submit.");
+			return;
+		}
+		await this.alepha.events.emit("react:action:begin", {
+			type: "form",
+			id: this.id
+		});
+		await this.alepha.events.emit("form:submit:begin", { id: this.id });
+		this.submitInProgress = true;
+		const options = this.options;
+		const args = { form: this.element };
+		try {
+			let values = this.restructureValues(this.values);
+			if (t.schema.isSchema(options.schema)) values = this.alepha.codec.decode(options.schema, values);
+			await options.handler(values, args);
+			await this.alepha.events.emit("react:action:success", {
+				type: "form",
+				id: this.id
+			});
+			await this.alepha.events.emit("form:submit:success", {
+				id: this.id,
+				values
+			});
+		} catch (error) {
+			this.log.error("Form submission error:", error);
+			options.onError?.(error, args);
+			await this.alepha.events.emit("react:action:error", {
+				type: "form",
+				id: this.id,
+				error
+			});
+			await this.alepha.events.emit("form:submit:error", {
+				error,
+				id: this.id
+			});
+		} finally {
+			this.submitInProgress = false;
+		}
+		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: ... } }
+	* Values are already typed from onChange, so no conversion is needed.
+	*/
+	restructureValues(store) {
+		const values = {};
+		for (const [key, value] of Object.entries(store)) if (key.includes(".")) this.restructureNestedValue(values, key, value);
+		else values[key] = value;
+		return values;
+	}
+	/**
+	* Helper to restructure a flat key like "address.city" into nested object structure.
+	* The value is already typed, so we just assign it to the nested path.
+	*/
+	restructureNestedValue(values, key, value) {
+		const pathSegments = key.split(".");
+		const finalPropertyKey = pathSegments.pop();
+		if (!finalPropertyKey) return;
+		let currentObjectLevel = values;
+		for (const segment of pathSegments) {
+			currentObjectLevel[segment] ??= {};
+			currentObjectLevel = currentObjectLevel[segment];
+		}
+		currentObjectLevel[finalPropertyKey] = value;
+	}
+	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);
+		} });
+	}
+	createInputFromSchema(name, options, schema, required, context) {
+		const parent = context.parent || "";
+		const field = schema.properties?.[name];
+		if (!field) return {
+			path: "",
+			required,
+			props: {},
+			schema,
+			set: () => {},
+			form: this
+		};
+		const isRequired = schema.required?.includes(name) ?? false;
+		const key = parent ? `${parent}.${name}` : name;
+		const path = `/${key.replaceAll(".", "/")}`;
+		const set = (value, sync = true) => {
+			const typedValue = this.getValueFromInput(value, field);
+			if (context.store[key] === typedValue) {}
+			context.store[key] = typedValue;
+			if (options.onChange) options.onChange(key, typedValue, context.store);
+			this.alepha.events.emit("form:change", {
+				id: this.id,
+				path,
+				value: typedValue
+			}, { catch: true });
+			if (sync) {
+				const inputElement = window.document.querySelector(`[data-path="${path}"]`);
+				if (inputElement instanceof HTMLInputElement) if (t.schema.isBoolean(field)) {
+					inputElement.value = value;
+					inputElement.checked = Boolean(value);
+				} else inputElement.value = value;
+			}
+		};
+		const attr = {
+			name: key,
+			autoComplete: "off",
+			onChange: (event) => {
+				if (typeof event === "string") {
+					set(event, false);
+					return;
+				}
+				if (typeof event === "number") {
+					set(event, false);
+					return;
+				}
+				if (t.schema.isBoolean(field)) if (event.target.value === "true") set(true, false);
+				else if (event.target.value === "false") set(false, false);
+				else if (event.target.value === "") set(void 0, false);
+				else set(event.target.checked, false);
+				else set(event.target.value, false);
+			}
+		};
+		attr["data-path"] = path;
+		if (options.id) {
+			attr.id = `${options.id}-${key}`;
+			attr["data-testid"] = attr.id;
+		}
+		if (t.schema.isString(field)) {
+			if (field.maxLength != null) attr.maxLength = Number(field.maxLength);
+			if (field.minLength != null) attr.minLength = Number(field.minLength);
+		}
+		if (options.initialValues?.[name] != null) attr.defaultValue = this.valueToInputEntry(options.initialValues[name]);
+		else if ("default" in field && field.default != null) attr.defaultValue = this.valueToInputEntry(field.default);
+		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";
+		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 attr.type = "text";
+		else if (t.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 {
+			path,
+			props: attr,
+			schema: field,
+			set,
+			form: this,
+			required,
+			items: this.createProxyFromSchema(options, field, {
+				parent: key,
+				store: context.store
+			})
+		};
+		if (t.schema.isArray(field)) return {
+			path,
+			props: attr,
+			schema: field,
+			set,
+			form: this,
+			required,
+			items: []
+		};
+		return {
+			path,
+			props: attr,
+			schema: field,
+			set,
+			form: this,
+			required
+		};
+	}
+	/**
+	* Convert an input value to the correct type based on the schema.
+	* Handles raw DOM values (strings, booleans from checkboxes, Files, etc.)
+	*/
+	getValueFromInput(input, schema) {
+		if (input instanceof File) {
+			if (t.schema.isString(schema) && schema.format === "binary") return input;
+			return null;
+		}
+		if (t.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)) {
+			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();
+			return String(input);
+		}
+		return input;
+	}
+	valueToInputEntry(value) {
+		if (value === null || value === void 0) return "";
+		if (typeof value === "boolean") return value;
+		if (typeof value === "number") return value;
+		if (typeof value === "string") return value;
+		if (value instanceof Date) return value.toISOString().slice(0, 16);
+		return value;
+	}
+};
+
+//#endregion
+//#region ../../src/react/form/hooks/useForm.ts
+/**
+* Custom hook to create a form with validation and field management.
+* This hook uses TypeBox schemas to define the structure and validation rules for the form.
+* It provides a way to handle form submission, field creation, and value management.
+*
+* @example
+* ```tsx
+* import { t } from "alepha";
+*
+* const form = useForm({
+*   schema: t.object({
+*     username: t.text(),
+*     password: t.text(),
+*   }),
+*   handler: (values) => {
+*     console.log("Form submitted with values:", values);
+*   },
+* });
+*
+* return (
+*   <form {...form.props}>
+*     <input {...form.input.username.props} />
+*     <input {...form.input.password.props} />
+*     <button type="submit">Submit</button>
+*   </form>
+* );
+* ```
+*/
+const useForm = (options, deps = []) => {
+	const alepha = useAlepha();
+	const formId = useId();
+	return useMemo(() => {
+		return alepha.inject(FormModel, {
+			lifetime: "transient",
+			args: [options.id || formId, options]
+		});
+	}, deps);
+};
+
+//#endregion
+//#region ../../src/react/form/index.ts
+/**
+* | type | quality | stability |
+* |------|---------|-----------|
+* | frontend | rare | stable |
+*
+* Type-safe forms with validation.
+*
+* **Features:**
+* - Form state management
+* - TypeBox schema validation
+* - Field-level error handling
+* - Submit handling with loading state
+* - Form reset
+*
+* @module alepha.react.form
+*/
+const AlephaReactForm = $module({ name: "alepha.react.form" });
+
+//#endregion
+export { AlephaReactForm, FormModel, FormState_default as FormState, FormValidationError, useForm, useFormState };
+//# sourceMappingURL=index.js.map