@datum-cloud/datum-ui 0.5.0 → 0.6.0-alpha.b817c77

package/dist/form/adapters/conform/index.mjs

@@ -0,0 +1,237 @@
+import { t as FormAdapterProvider } from "../../../adapter-context-B7L2ucTr.mjs";
+import { t as getFieldConstraints } from "../../../get-field-constraints-BPMW8VvY.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { FormProvider, getFormProps, getInputProps, useForm, useFormMetadata, useInputControl } from "@conform-to/react";
+import { getZodConstraint, parseWithZod } from "@conform-to/zod/v4";
+//#region src/components/features/form/adapters/conform/conform-adapter.tsx
+/**
+* Resolve a Conform field metadata object by dot-notation path.
+*
+* Handles:
+* - Top-level fields: `"email"` -> `fields.email`
+* - Nested objects: `"address.city"` -> `fields.address.getFieldset().city`
+* - Array items: `"items.0.name"` -> `fields.items.getFieldList()[0].getFieldset().name`
+*/
+function resolveConformField(fields, name) {
+	const parts = name.split(".");
+	let current = fields;
+	for (let i = 0; i < parts.length; i++) {
+		const part = parts[i];
+		if (!current) break;
+		if (/^\d+$/.test(part)) {
+			const fieldList = current.getFieldList?.();
+			if (fieldList) {
+				const item = fieldList[Number.parseInt(part, 10)];
+				if (i < parts.length - 1 && item?.getFieldset) current = item.getFieldset();
+				else current = item;
+			} else current = current[part];
+		} else if (current[part] !== void 0) current = current[part];
+		else if (typeof current.getFieldset === "function") current = current.getFieldset()[part];
+		else current = void 0;
+	}
+	return current;
+}
+function convertFromString(value) {
+	if (value === void 0) return void 0;
+	if (Array.isArray(value)) return value[0];
+	if (value === "on" || value === "true") return true;
+	if (value === "" || value === "false") return false;
+	return value;
+}
+function convertToString(value) {
+	if (typeof value === "boolean") return value ? "on" : "";
+	if (value === null || value === void 0) return "";
+	return String(value);
+}
+/** Create a Conform form instance and normalize it to the adapter interface. */
+function useConformCreateForm(props) {
+	const { schema, defaultValues, mode, id, onSubmit, formRef } = props;
+	const [form, fields] = useForm({
+		id,
+		defaultValue: defaultValues,
+		constraint: getZodConstraint(schema),
+		shouldValidate: {
+			onBlur: "onBlur",
+			onChange: "onInput",
+			onSubmit: "onSubmit"
+		}[mode],
+		shouldRevalidate: mode !== "onSubmit" ? "onInput" : void 0,
+		onValidate: ({ formData }) => parseWithZod(formData, { schema }),
+		onSubmit: onSubmit ? (event, context) => {
+			event.preventDefault();
+			const submission = context.submission;
+			if (submission?.status === "success") onSubmit(submission.value);
+		} : void 0
+	});
+	const constraints = React$1.useMemo(() => getFieldConstraints(schema), [schema]);
+	const normalizedFields = React$1.useMemo(() => {
+		const result = {};
+		for (const [key, fieldMeta] of Object.entries(fields)) result[key] = {
+			id: fieldMeta.id ?? `${id ?? form.id}-${key}`,
+			errors: fieldMeta.errors ?? [],
+			required: constraints[key]?.required ?? false
+		};
+		return result;
+	}, [
+		fields,
+		id,
+		form.id,
+		constraints
+	]);
+	const conformFormProps = React$1.useMemo(() => getFormProps(form), [form]);
+	return React$1.useMemo(() => ({
+		id: form.id,
+		fields: normalizedFields,
+		formProps: conformFormProps,
+		submit: () => formRef?.current?.requestSubmit(),
+		reset: () => form.reset(),
+		getValues: () => {
+			if (!formRef?.current) return {};
+			const formData = new FormData(formRef.current);
+			const values = {};
+			for (const [key, value] of formData.entries()) values[key] = value;
+			return values;
+		},
+		raw: {
+			form,
+			fields
+		}
+	}), [
+		form,
+		fields,
+		normalizedFields,
+		conformFormProps,
+		formRef
+	]);
+}
+/** Resolve a field by dot-notation path and return its normalized state. */
+function useConformField(name) {
+	const fieldMeta = resolveConformField(useFormMetadata().getFieldset(), name);
+	const control = useInputControl(fieldMeta ?? {
+		name,
+		key: void 0,
+		id: name
+	});
+	if (!fieldMeta) throw new Error(`[Conform Adapter] Field "${name}" not found. Make sure the field name matches your schema.`);
+	return React$1.useMemo(() => ({
+		name: fieldMeta.name,
+		id: fieldMeta.id,
+		errors: fieldMeta.errors ?? [],
+		required: fieldMeta.required ?? false,
+		value: convertFromString(control.value),
+		change: (value) => control.change(convertToString(value)),
+		blur: () => control.blur(),
+		focus: () => control.focus(),
+		inputProps: getInputProps(fieldMeta, { type: "text" })
+	}), [fieldMeta, control]);
+}
+/** Watch a single field's value reactively. */
+function useConformWatch(name) {
+	const fieldMeta = resolveConformField(useFormMetadata().getFieldset(), name);
+	if (!fieldMeta) return void 0;
+	return convertFromString(fieldMeta.value);
+}
+/** Watch multiple fields' values reactively. */
+function useConformWatchAll(names) {
+	const allFields = useFormMetadata().getFieldset();
+	return React$1.useMemo(() => {
+		const result = {};
+		for (const name of names) {
+			const fieldMeta = resolveConformField(allFields, name);
+			if (fieldMeta) result[name] = convertFromString(fieldMeta.value);
+		}
+		return result;
+	}, [allFields, names]);
+}
+/** Get field array helpers for a given array field name. */
+function useConformFieldArray(name) {
+	const formMeta = useFormMetadata();
+	const arrayField = resolveConformField(formMeta.getFieldset(), name);
+	const items = React$1.useMemo(() => {
+		if (!arrayField?.getFieldList) return [];
+		return arrayField.getFieldList().map((item, index) => ({
+			id: item.id ?? `${name}-${index}`,
+			key: item.key ?? `${name}-${index}`,
+			name: `${name}[${index}]`
+		}));
+	}, [arrayField, name]);
+	const arrayFieldName = arrayField?.name;
+	return {
+		items,
+		append: React$1.useCallback((defaultValue) => {
+			if (!arrayFieldName) return;
+			formMeta.insert({
+				name: arrayFieldName,
+				defaultValue
+			});
+		}, [formMeta, arrayFieldName]),
+		remove: React$1.useCallback((index) => {
+			if (!arrayFieldName) return;
+			formMeta.remove({
+				name: arrayFieldName,
+				index
+			});
+		}, [formMeta, arrayFieldName]),
+		move: React$1.useCallback((from, to) => {
+			if (!arrayFieldName) return;
+			formMeta.reorder({
+				name: arrayFieldName,
+				from,
+				to
+			});
+		}, [formMeta, arrayFieldName])
+	};
+}
+/**
+* Wraps children in Conform's FormProvider so that useFormMetadata() and
+* useInputControl() work inside field components.
+*/
+function ConformFormProviderWrapper({ instance, children }) {
+	const { form } = instance.raw;
+	return /* @__PURE__ */ jsx(FormProvider, {
+		context: form.context,
+		children
+	});
+}
+/**
+* Conform.js adapter implementing the `FormAdapter` interface.
+*
+* Maps Conform's `useForm` / `useInputControl` / `useFormMetadata` APIs
+* to the normalized form adapter contract.
+*/
+const conformAdapter = {
+	name: "Conform",
+	useCreateForm: useConformCreateForm,
+	useField: useConformField,
+	useWatch: useConformWatch,
+	useWatchAll: useConformWatchAll,
+	useFieldArray: useConformFieldArray,
+	FormProvider: ConformFormProviderWrapper
+};
+//#endregion
+//#region src/components/features/form/adapters/conform/conform-provider.tsx
+/**
+* Wrap your application with this provider to use Conform.js as the form backend.
+*
+* @example
+* ```tsx
+* import { ConformAdapter } from '@datum-cloud/datum-ui/form/adapters/conform'
+*
+* function App() {
+*   return (
+*     <ConformAdapter>
+*       <MyApp />
+*     </ConformAdapter>
+*   )
+* }
+* ```
+*/
+function ConformAdapter({ children }) {
+	return /* @__PURE__ */ jsx(FormAdapterProvider, {
+		adapter: conformAdapter,
+		children
+	});
+}
+//#endregion
+export { ConformAdapter, conformAdapter };

package/dist/form/adapters/rhf/index.mjs

@@ -0,0 +1,181 @@
+import { t as FormAdapterProvider } from "../../../adapter-context-B7L2ucTr.mjs";
+import { t as getFieldConstraints } from "../../../get-field-constraints-BPMW8VvY.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FormProvider, useController, useFieldArray, useForm, useFormContext, useWatch } from "react-hook-form";
+//#region src/components/features/form/adapters/rhf/rhf-adapter.tsx
+/** Create a React Hook Form instance and normalize it to the adapter interface. */
+function useRHFCreateForm(props) {
+	const { schema, defaultValues, mode, id, onSubmit, formRef } = props;
+	const form = useForm({
+		resolver: zodResolver(schema),
+		defaultValues,
+		mode: {
+			onBlur: "onBlur",
+			onChange: "onChange",
+			onSubmit: "onSubmit"
+		}[mode]
+	});
+	const constraints = React$1.useMemo(() => getFieldConstraints(schema), [schema]);
+	const onSubmitRef = React$1.useRef(onSubmit);
+	onSubmitRef.current = onSubmit;
+	const normalizedFields = React$1.useMemo(() => {
+		const result = {};
+		const errors = form.formState.errors;
+		for (const [key, constraint] of Object.entries(constraints)) {
+			const fieldError = errors[key];
+			result[key] = {
+				id: `${id ?? "form"}-${key}`,
+				errors: fieldError?.message ? [String(fieldError.message)] : [],
+				required: constraint.required
+			};
+		}
+		return result;
+	}, [
+		constraints,
+		form.formState.errors,
+		id
+	]);
+	const handleSubmit = React$1.useMemo(() => form.handleSubmit((data) => {
+		onSubmitRef.current?.(data);
+	}), [form]);
+	const formProps = React$1.useMemo(() => ({
+		id,
+		onSubmit: handleSubmit,
+		noValidate: true
+	}), [id, handleSubmit]);
+	return React$1.useMemo(() => ({
+		id: id ?? "form",
+		fields: normalizedFields,
+		formProps,
+		submit: () => formRef?.current?.requestSubmit(),
+		reset: () => form.reset(),
+		getValues: () => form.getValues(),
+		raw: form
+	}), [
+		id,
+		normalizedFields,
+		formProps,
+		form,
+		formRef
+	]);
+}
+/** Resolve a field by name and return its normalized state. */
+function useRHFField(name) {
+	const { field, fieldState } = useController({
+		name,
+		control: useFormContext().control
+	});
+	return React$1.useMemo(() => ({
+		name: field.name,
+		id: name,
+		errors: fieldState.error?.message ? [String(fieldState.error.message)] : [],
+		required: false,
+		value: field.value,
+		change: (value) => field.onChange(value),
+		blur: () => field.onBlur(),
+		focus: () => {}
+	}), [
+		field,
+		fieldState,
+		name
+	]);
+}
+/** Watch a single field's value reactively. */
+function useRHFWatchHook(name) {
+	return useWatch({
+		name,
+		control: useFormContext().control
+	});
+}
+/** Watch multiple fields' values reactively. */
+function useRHFWatchAllHook(names) {
+	const values = useWatch({
+		name: names,
+		control: useFormContext().control
+	});
+	return React$1.useMemo(() => {
+		const result = {};
+		names.forEach((n, index) => {
+			result[n] = values[index];
+		});
+		return result;
+	}, [names, values]);
+}
+/** Get field array helpers for a given array field name. */
+function useRHFFieldArrayHook(name) {
+	const { fields, append, remove, move } = useFieldArray({
+		name,
+		control: useFormContext().control
+	});
+	return {
+		items: React$1.useMemo(() => fields.map((field, index) => ({
+			id: field.id,
+			key: field.id,
+			name: `${name}.${index}`
+		})), [fields, name]),
+		append: React$1.useCallback((defaultValue) => {
+			append(defaultValue ?? {});
+		}, [append]),
+		remove: React$1.useCallback((index) => {
+			remove(index);
+		}, [remove]),
+		move: React$1.useCallback((from, to) => {
+			move(from, to);
+		}, [move])
+	};
+}
+/**
+* Wraps children in React Hook Form's FormProvider so that useFormContext()
+* and useController() work inside field components.
+*/
+function RHFFormProviderWrapper({ instance, children }) {
+	const form = instance.raw;
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...form,
+		children
+	});
+}
+/**
+* React Hook Form adapter implementing the `FormAdapter` interface.
+*
+* Maps react-hook-form's `useForm` / `useController` / `useWatch` APIs
+* to the normalized form adapter contract. Uses `@hookform/resolvers/zod`
+* for Zod schema validation.
+*/
+const rhfAdapter = {
+	name: "React Hook Form",
+	useCreateForm: useRHFCreateForm,
+	useField: useRHFField,
+	useWatch: useRHFWatchHook,
+	useWatchAll: useRHFWatchAllHook,
+	useFieldArray: useRHFFieldArrayHook,
+	FormProvider: RHFFormProviderWrapper
+};
+//#endregion
+//#region src/components/features/form/adapters/rhf/rhf-provider.tsx
+/**
+* Wrap your application with this provider to use React Hook Form as the form backend.
+*
+* @example
+* ```tsx
+* import { RHFAdapter } from '@datum-cloud/datum-ui/form/adapters/rhf'
+*
+* function App() {
+*   return (
+*     <RHFAdapter>
+*       <MyApp />
+*     </RHFAdapter>
+*   )
+* }
+* ```
+*/
+function RHFAdapter({ children }) {
+	return /* @__PURE__ */ jsx(FormAdapterProvider, {
+		adapter: rhfAdapter,
+		children
+	});
+}
+//#endregion
+export { RHFAdapter, rhfAdapter };

package/dist/form/index.mjs

@@ -1,2 +1,3 @@
-import { A as FormButton, C as FormField, D as FormCustom, E as FormDescription, O as FormCopyBox, S as FormFieldArray, T as FormDialog, _ as FormSelectItem, a as useField, b as FormRadioItem, c as FormStep, d as useWatch, f as useWatchAll, g as FormSelect, h as FormSubmit, i as useFieldContext, j as FormAutocomplete, k as FormCheckbox, l as FormStepper, m as FormSwitch, n as useStepper, o as StepperNavigation, p as FormTextarea, r as useFormContext, s as StepperControls, t as Form, u as FormWhen, v as FormRoot, w as FormError, x as FormInput, y as FormRadioGroup } from "../form-Co3fM4B7.mjs";
-export { Form, FormAutocomplete, FormButton, FormCheckbox, FormCopyBox, FormCustom, FormDescription, FormDialog, FormError, FormField, FormFieldArray, FormInput, FormRadioGroup, FormRadioItem, FormRoot, FormSelect, FormSelectItem, FormStep, FormStepper, FormSubmit, FormSwitch, FormTextarea, FormWhen, StepperControls, StepperNavigation, useField, useFieldContext, useFormContext, useStepper, useWatch, useWatchAll };
+import { A as FormButton, C as FormField, D as FormCustom, E as FormDescription, O as FormCopyBox, S as FormFieldArray, T as FormDialog, _ as FormSelectItem, a as useField, b as FormRadioItem, c as FormStep, d as useWatch, f as useWatchAll, g as FormSelect, h as FormSubmit, i as useFieldContext, j as FormAutocomplete, k as FormCheckbox, l as FormStepper, m as FormSwitch, n as useStepper, o as StepperNavigation, p as FormTextarea, r as useFormContext, s as StepperControls, t as Form, u as FormWhen, v as FormRoot, w as FormError, x as FormInput, y as FormRadioGroup } from "../form-BE1xBne4.mjs";
+import { n as useAdapter, t as FormAdapterProvider } from "../adapter-context-B7L2ucTr.mjs";
+export { Form, FormAdapterProvider, FormAutocomplete, FormButton, FormCheckbox, FormCopyBox, FormCustom, FormDescription, FormDialog, FormError, FormField, FormFieldArray, FormInput, FormRadioGroup, FormRadioItem, FormRoot, FormSelect, FormSelectItem, FormStep, FormStepper, FormSubmit, FormSwitch, FormTextarea, FormWhen, StepperControls, StepperNavigation, useAdapter, useField, useFieldContext, useFormContext, useStepper, useWatch, useWatchAll };