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

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

@@ -0,0 +1,275 @@
+import { t as FormAdapterProvider } from "../../../adapter-context-rWveHhDd.mjs";
+import { t as getFieldConstraints } from "../../../get-field-constraints-CxfZ753o.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/utils/get-schema-defaults.ts
+/**
+* Derive default values from a Zod schema that match what React Hook Form's
+* `useController` will produce when fields register.
+*
+* This is critical for RHF's `isDirty` tracking: RHF compares current values
+* against `_defaultValues`. Without explicit defaults, RHF uses `{}` as the
+* baseline, so when `useController` registers fields (e.g. `username: ''`),
+* the form is immediately considered dirty.
+*
+* By passing these schema-derived defaults to `useForm({ defaultValues })`,
+* the baseline matches the registered values and `isDirty` starts as `false`.
+*
+* Maps Zod field types to their `useController` registration values:
+* - string -> `''`
+* - number -> `undefined`
+* - boolean -> `false`
+* - array -> `[]`
+* - object -> `{}` (recursive)
+* - optional/nullable wrappers -> unwrap and derive inner default
+* - `.default()` -> use the provided default value
+*/
+function getSchemaDefaults(schema) {
+	const shape = getObjectShape(schema);
+	if (!shape) return {};
+	const defaults = {};
+	for (const [key, fieldSchema] of Object.entries(shape)) defaults[key] = getFieldDefault(fieldSchema);
+	return defaults;
+}
+function getObjectShape(schema) {
+	const { def } = schema;
+	if (def.type === "object") return schema.shape;
+	if (def.type === "intersection") {
+		const intersectionDef = def;
+		const leftShape = getObjectShape(intersectionDef.left);
+		const rightShape = getObjectShape(intersectionDef.right);
+		return {
+			...leftShape,
+			...rightShape
+		};
+	}
+	if (def.type === "pipe") return getObjectShape(def.in);
+	return null;
+}
+/**
+* Get the default value for a Zod field type that matches what RHF's
+* `useController` will produce when registering the field.
+*
+* Unwraps optional/nullable/default wrappers to find the inner type,
+* then returns the natural "empty" value for that type.
+*/
+function getFieldDefault(schema) {
+	const { type } = schema.def;
+	if (type === "default") return schema.def.defaultValue;
+	if (type === "optional" || type === "nullable") {
+		const innerDef = schema.def;
+		return getFieldDefault(innerDef.innerType);
+	}
+	if (type === "pipe") {
+		const pipeDef = schema.def;
+		return getFieldDefault(pipeDef.in);
+	}
+	if (type === "string") return "";
+	if (type === "number" || type === "bigint" || type === "nan") return void 0;
+	if (type === "boolean") return false;
+	if (type === "array") return [];
+	if (type === "object") return getSchemaDefaults(schema);
+}
+//#endregion
+//#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 modeMap = {
+		onBlur: "onBlur",
+		onChange: "onChange",
+		onSubmit: "onSubmit"
+	};
+	const schemaDefaults = React$1.useMemo(() => getSchemaDefaults(schema), [schema]);
+	const mergedDefaults = React$1.useMemo(() => ({
+		...schemaDefaults,
+		...defaultValues
+	}), [schemaDefaults, defaultValues]);
+	const form = useForm({
+		resolver: zodResolver(schema),
+		defaultValues: mergedDefaults,
+		mode: modeMap[mode]
+	});
+	const { errors, isDirty, isValid, dirtyFields, touchedFields } = form.formState;
+	const constraints = React$1.useMemo(() => getFieldConstraints(schema), [schema]);
+	const onSubmitRef = React$1.useRef(onSubmit);
+	onSubmitRef.current = onSubmit;
+	const normalizedFields = React$1.useMemo(() => {
+		const result = {};
+		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,
+				isDirty: false,
+				isTouched: false
+			};
+		}
+		return result;
+	}, [
+		constraints,
+		errors,
+		id
+	]);
+	const formState = React$1.useMemo(() => ({
+		isDirty,
+		isValid,
+		isSubmitted: false,
+		submitCount: 0,
+		dirtyFields: Object.fromEntries(Object.entries(dirtyFields).map(([k, v]) => [k, Boolean(v)])),
+		touchedFields: Object.fromEntries(Object.entries(touchedFields).map(([k, v]) => [k, Boolean(v)]))
+	}), [
+		isDirty,
+		isValid,
+		dirtyFields,
+		touchedFields
+	]);
+	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,
+		formState,
+		submit: () => formRef?.current?.requestSubmit(),
+		reset: () => form.reset(),
+		getValues: () => form.getValues(),
+		raw: form
+	}), [
+		id,
+		normalizedFields,
+		formProps,
+		formState,
+		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,
+		isDirty: fieldState.isDirty,
+		isTouched: fieldState.isTouched,
+		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 FormCheckbox, C as FormDialog, D as FormCustom, E as FormDatePicker, M as FormAutosearch, N as FormAutocomplete, O as FormCopyBox, S as FormError, T as FormDateTimePicker, _ as FormRadioGroup, a as useField, b as FormFieldArray, c as useWatchAll, d as FormTextarea, f as FormSwitch, g as FormRoot, h as FormSelectItem, i as useFieldContext, j as FormButton, k as FormCombobox, l as FormTransfer, m as FormSelect, n as useFormState, o as FormWhen, p as FormSubmit, r as useFormContext, s as useWatch, t as Form, u as FormTimePicker, v as FormRadioItem, w as FormDescription, x as FormField, y as FormInput } from "../form-zf5QOnAk.mjs";
+import { n as useAdapter, t as FormAdapterProvider } from "../adapter-context-rWveHhDd.mjs";
+export { Form, FormAdapterProvider, FormAutocomplete, FormAutosearch, FormButton, FormCheckbox, FormCombobox, FormCopyBox, FormCustom, FormDatePicker, FormDateTimePicker, FormDescription, FormDialog, FormError, FormField, FormFieldArray, FormInput, FormRadioGroup, FormRadioItem, FormRoot, FormSelect, FormSelectItem, FormSubmit, FormSwitch, FormTextarea, FormTimePicker, FormTransfer, FormWhen, useAdapter, useField, useFieldContext, useFormContext, useFormState, useWatch, useWatchAll };