@datum-cloud/datum-ui 0.4.0 → 0.6.0-alpha.a49f238

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

@@ -0,0 +1,275 @@
+import { t as FormAdapterProvider } from "../../../adapter-context-BFqfq4Io.mjs";
+import { t as getFieldConstraints } from "../../../get-field-constraints-D4xnXJEg.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,146 +1,3 @@
-import "../utils-DJboNGQM.mjs";
-import "../button-D6AORsOz.mjs";
-import "../checkbox-CQrjygFt.mjs";
-import "../dialog-DdrHeboM.mjs";
-import "../command-DVroicgn.mjs";
-import "../input-DEMoi_8F.mjs";
-import "../textarea-CVo38n3S.mjs";
-import "../label-mOg07fuQ.mjs";
-import "../popover-ugw5MpuT.mjs";
-import "../radio-group-_gMymwnb.mjs";
-import "../select-BZOKWjlH.mjs";
-import "../tooltip-CuX2jQA9.mjs";
-import "../switch-C60FpEal.mjs";
-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 FormInputGroup, b as FormRadioItem, c as FormStep, d as useWatch, f as useWatchAll, g as FormSelect, h as FormSubmit, i as useField, j as FormAutocomplete, k as FormCheckbox, l as FormStepper, m as FormSwitch, n as useFormContext, o as StepperNavigation, p as FormTextarea, r as useFieldContext, s as StepperControls, t as useStepper, u as FormWhen, v as FormRoot, w as FormError, x as FormInput, y as FormRadioGroup } from "../use-stepper-DigoyHhX.mjs";
-
-//#region src/components/features/form/index.ts
-/**
-* Datum Form Library
-*
-* A compound component pattern form library built on top of Conform.js and Zod
-* for easy form creation with built-in validation, error handling, and accessibility features.
-*
-* @example Basic Usage
-* ```tsx
-* import { Form } from './';
-* import { z } from 'zod';
-*
-* const userSchema = z.object({
-*   name: z.string().min(2),
-*   email: z.string().email(),
-* });
-*
-* function UserForm() {
-*   return (
-*     <Form.Root schema={userSchema} onSubmit={(data) => console.log(data)}>
-*       <Form.Field name="name" label="Name" required>
-*         <Form.Input />
-*       </Form.Field>
-*       <Form.Field name="email" label="Email" required>
-*         <Form.Input type="email" />
-*       </Form.Field>
-*       <Form.Submit>Save</Form.Submit>
-*     </Form.Root>
-*   );
-* }
-* ```
-*
-* @example Multi-Step Form
-* ```tsx
-* const steps = [
-*   { id: 'account', label: 'Account', schema: accountSchema },
-*   { id: 'profile', label: 'Profile', schema: profileSchema },
-* ];
-*
-* <Form.Stepper steps={steps} onComplete={handleComplete}>
-*   <Form.StepperNavigation />
-*   <Form.Step id="account">...</Form.Step>
-*   <Form.Step id="profile">...</Form.Step>
-*   <Form.StepperControls />
-* </Form.Stepper>
-* ```
-*
-* @example Conditional Fields
-* ```tsx
-* <Form.Field name="contactMethod">
-*   <Form.Select>
-*     <Form.SelectItem value="email">Email</Form.SelectItem>
-*     <Form.SelectItem value="phone">Phone</Form.SelectItem>
-*   </Form.Select>
-* </Form.Field>
-*
-* <Form.When field="contactMethod" is="email">
-*   <Form.Field name="email"><Form.Input type="email" /></Form.Field>
-* </Form.When>
-* ```
-*/
-/**
-* Form compound component
-*
-* Contains all form-related components as properties:
-* - Form.Root - Main form container
-* - Form.Field - Field wrapper with label and error handling
-* - Form.Input - Text input
-* - Form.Textarea - Multi-line text input
-* - Form.Select - Dropdown select
-* - Form.SelectItem - Select option
-* - Form.Checkbox - Checkbox input
-* - Form.Switch - Toggle switch
-* - Form.RadioGroup - Radio button group
-* - Form.RadioItem - Radio button option
-* - Form.Submit - Submit button with loading state
-* - Form.Error - Error display
-* - Form.Description - Helper text
-* - Form.Autocomplete - Searchable select with virtualization
-* - Form.When - Conditional rendering
-* - Form.FieldArray - Dynamic array of fields
-* - Form.Custom - Escape hatch for custom implementations
-* - Form.Stepper - Multi-step form container
-* - Form.Step - Individual step content
-* - Form.StepperNavigation - Step progress indicators
-* - Form.StepperControls - Previous/Next/Submit buttons
-*
-* Hooks available:
-* - Form.useFormContext - Access form context
-* - Form.useFieldContext - Access field context
-* - Form.useField - Access and control a specific field
-* - Form.useWatch - Watch a field's value
-* - Form.useWatchAll - Watch multiple fields
-* - Form.useStepper - Access stepper context
-*/
-const Form = {
-	Root: FormRoot,
-	Field: FormField,
-	Submit: FormSubmit,
-	Button: FormButton,
-	Error: FormError,
-	Description: FormDescription,
-	Input: FormInput,
-	Textarea: FormTextarea,
-	Select: FormSelect,
-	SelectItem: FormSelectItem,
-	Checkbox: FormCheckbox,
-	Switch: FormSwitch,
-	RadioGroup: FormRadioGroup,
-	RadioItem: FormRadioItem,
-	CopyBox: FormCopyBox,
-	Autocomplete: FormAutocomplete,
-	InputGroup: FormInputGroup,
-	When: FormWhen,
-	FieldArray: FormFieldArray,
-	Custom: FormCustom,
-	Stepper: FormStepper,
-	Step: FormStep,
-	StepperNavigation,
-	StepperControls,
-	Dialog: FormDialog,
-	useFormContext,
-	useFieldContext,
-	useField,
-	useWatch,
-	useWatchAll,
-	useStepper
-};
-
-//#endregion
-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 { C as FormCustom, D as FormAutocomplete, E as FormButton, S as FormDescription, T as FormCheckbox, _ as FormInput, a as useField, b as FormError, c as useWatchAll, d as FormSubmit, f as FormSelect, g as FormRadioItem, h as FormRadioGroup, i as useFieldContext, l as FormTextarea, m as FormRoot, n as useFormState, o as FormWhen, p as FormSelectItem, r as useFormContext, s as useWatch, t as Form, u as FormSwitch, v as FormFieldArray, w as FormCopyBox, x as FormDialog, y as FormField } from "../form-C6AOB2f4.mjs";
+import { n as useAdapter, t as FormAdapterProvider } from "../adapter-context-BFqfq4Io.mjs";
+export { Form, FormAdapterProvider, FormAutocomplete, FormButton, FormCheckbox, FormCopyBox, FormCustom, FormDescription, FormDialog, FormError, FormField, FormFieldArray, FormInput, FormRadioGroup, FormRadioItem, FormRoot, FormSelect, FormSelectItem, FormSubmit, FormSwitch, FormTextarea, FormWhen, useAdapter, useField, useFieldContext, useFormContext, useFormState, useWatch, useWatchAll };