[Help wanted]: Are there any Antd form integration with conform?

[jinto-ag]

I don't know if it is neccassary to use conform with antd. I tried a little bit and the validation is not workin properly. Can anyone help me with this?

import {
	FormProvider as ConformFormProvider,
	getFormProps,
	getInputProps,
	useForm as useConformForm,
	useField,
	useInputControl,
} from '@conform-to/react'
import { getZodConstraint, parseWithZod } from '@conform-to/zod'
import { useIsPending } from '@eunigos-ui/utils/misc'
import {
	Form as AntdForm,
	type FormItemProps as AntdFormItemProps,
	Button,
	type ButtonProps,
	Checkbox,
	type CheckboxProps,
	Input,
	type InputProps,
	List,
	theme,
} from 'antd'
import { type Rule } from 'antd/es/form'
import { type Store } from 'antd/es/form/interface'
import { type PasswordProps } from 'antd/es/input'
import React from 'react'
import { type z } from 'zod'

export type ListOfErrors = Array<string | null | undefined> | null | undefined

export interface ErrorListProps {
	errors?: ListOfErrors
}

const { useToken } = theme

export const ErrorList: React.FC<ErrorListProps> = ({ errors }) => {
	const { token } = useToken()
	const errorsToRender = errors?.filter(Boolean)
	if (!errorsToRender?.length) return null

	return (
		<List className="!p-0">
			{errorsToRender.map((err, i) => (
				<List.Item
					className="mb-2 !p-0"
					key={`${i}-${err}`}
					style={{
						color: token.colorError,
					}}
				>
					{err}
				</List.Item>
			))}
		</List>
	)
}

export interface FormProps<Schema extends z.ZodTypeAny>
	extends Omit<React.ComponentProps<typeof AntdForm>, 'form'> {
	formId: string
	schema: Schema
	conformProps?: Partial<Parameters<typeof useConformForm>[0]>
	onFinish?: (values: z.infer<Schema>) => void
}

export function Form<Schema extends z.ZodTypeAny>({
	formId,
	children,
	conformProps,
	schema,
	onFinish,
	...props
}: FormProps<Schema>) {
	const [form] = AntdForm.useForm()

	const [conformForm] = useConformForm({
		id: formId,
		constraint: getZodConstraint(schema),
		onValidate({ formData }) {
			console.log('validating...', { formData })

			return parseWithZod(formData, { schema })
		},
		onSubmit(event, context) {
			console.log('submitting...', { context })
		},
		shouldValidate: 'onBlur',
		shouldRevalidate: 'onInput',
		...conformProps,
	})

	const handleFinish = (values: z.infer<Schema>) => {
		if (conformForm.valid && onFinish) {
			onFinish(values)
		}
	}

	return (
		<ConformFormProvider context={conformForm.context}>
			<AntdForm
				form={form}
				initialValues={conformForm.initialValue as Store}
				onFinish={handleFinish}
				{...props}
				{...getFormProps(conformForm)}
			>
				{children}
			</AntdForm>
		</ConformFormProvider>
	)
}

export interface FormItemProps extends Omit<AntdFormItemProps, 'name'> {
	name: string
}

export const FormItem: React.FC<FormItemProps> = ({
	children,
	label,
	name,
	rules,
	validateTrigger,
	validateFirst,
	...props
}) => {
	const [field, form] = useField<string>(name)

	const customRules: Rule[] = [
		() => ({
			validator(_, value) {
				console.log({ name, fieldValue: field.value, isValid: field.valid })

				if (!field.valid) {
					return Promise.reject()
				}

				return Promise.resolve()
			},
			message: <ErrorList errors={field.errors} />,
		}),
	]

	const newRules: Rule[] = [...(rules ?? []), ...customRules]
	const newLabel = label ?? (name ? nameToLabel(name) : undefined)

	return (
		<AntdForm.Item
			name={name}
			validateTrigger={validateTrigger ?? ['onChange', 'onBlur']}
			validateFirst={validateFirst ?? 'parallel'}
			validateDebounce={500}
			trigger="onChange"
			label={newLabel}
			rules={newRules}
			{...props}
		>
			{children}
		</AntdForm.Item>
	)
}

/**
 * Submit Button
 */
export interface SubmitButtonProps extends ButtonProps {}

export const SubmitButton: React.FC<
	React.PropsWithChildren<SubmitButtonProps>
> = ({ children, ...props }) => {
	const [submittable, setSubmittable] = React.useState(false)
	const form = AntdForm.useFormInstance()

	const isPending = useIsPending()

	const watch = AntdForm.useWatch([], form)

	React.useEffect(() => {
		form
			.validateFields({ validateOnly: true })
			.then(() => setSubmittable(true))
			.catch(() => setSubmittable(false))
	}, [form, watch])

	return (
		<Button
			type="primary"
			htmlType="submit"
			disabled={!submittable}
			loading={isPending}
			{...props}
		>
			{children}
		</Button>
	)
}

export function nameToLabel(name: string): string {
	const words = name.split(/(?=[A-Z])|[-_]/).filter((word) => word.length > 0)

	const capitalizedWords = words.map(
		(word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(),
	)

	return capitalizedWords.join(' ')
}

// Utils
export type RuleType =
	| 'string'
	| 'number'
	| 'boolean'
	| 'method'
	| 'regexp'
	| 'integer'
	| 'float'
	| 'object'
	| 'enum'
	| 'date'
	| 'url'
	| 'hex'
	| 'email'

export const RuleTypeMap: Record<string, RuleType> = {
	text: 'string',
	password: 'string',
	email: 'email',
	number: 'number',
	checkbox: 'boolean',
	radio: 'enum',
	date: 'date',
	time: 'string',
	url: 'url',
	tel: 'string',
	color: 'string',
	file: 'object',
	range: 'number',
	month: 'date',
	week: 'string',
	datetime: 'date',
	'datetime-local': 'date',
}

export const getRules = (rules: (Rule | Record<string, any>)[]): Rule[] => {
	return rules.flatMap((rule): Rule | Rule[] => {
		if (typeof rule === 'object' && 'validator' in rule) {
			return rule as Rule
		} else {
			const newRules: Rule[] = []

			if ('required' in rule) {
				newRules.push({
					required: rule.required,
					message: rule.message || `This field is required`,
				})
			}

			if ('type' in rule) {
				const inputType = rule.type as keyof typeof RuleTypeMap
				newRules.push({
					type:
						inputType in RuleTypeMap
							? RuleTypeMap[inputType]
							: (rule.type as RuleType),
					message: rule.message || `Please enter a valid ${rule.type}`,
				})
			}

			if ('min' in rule) {
				newRules.push({
					min: rule.min,
					message: rule.message || `Minimum value is ${rule.min}`,
				})
			}

			if ('max' in rule) {
				newRules.push({
					max: rule.max,
					message: rule.message || `Maximum value is ${rule.max}`,
				})
			}

			if ('minLength' in rule) {
				newRules.push({
					min: rule.minLength,
					message:
						rule.minLengthMessage || `Minimum length is ${rule.minLength}`,
				})
			}

			if ('maxLength' in rule) {
				newRules.push({
					max: rule.maxLength,
					message:
						rule.maxLengthMessage || `Maximum length is ${rule.maxLength}`,
				})
			}

			if ('pattern' in rule) {
				newRules.push({
					pattern: rule.pattern,
					message: rule.message || `Input does not match the required pattern`,
				})
			}

			if ('whitespace' in rule) {
				newRules.push({
					whitespace: rule.whitespace,
					message: rule.message || `This field cannot be empty`,
				})
			}

			return newRules
		}
	})
}
// Components
interface BaseFieldProps extends FormItemProps {
	formElementProps?: Record<string, any>
}
/**
 * Field
 */
export interface FieldProps extends BaseFieldProps {
	formElementProps?: InputProps
}

export const Field: React.FC<FieldProps> = ({
	formElementProps,
	rules,
	...props
}) => {
	const [field] = useField(props.name)

	const updatedRules = getRules([
		...(rules ?? []),
		getInputProps(field, { type: 'text' }),
	])
	return (
		<FormItem {...props} rules={updatedRules}>
			<Input {...formElementProps} />
		</FormItem>
	)
}

/**
 * Username Field
 */
export interface UsernameFieldProps extends BaseFieldProps {
	formElementProps?: InputProps
}

export const UsernameField: React.FC<UsernameFieldProps> = ({
	formElementProps,
	rules,
	...props
}) => {
	const [field] = useField(props.name)

	const updatedRules = getRules([
		...(rules ?? []),
		getInputProps(field, { type: 'text' }),
	])

	return (
		<FormItem {...props} rules={updatedRules}>
			<Input {...formElementProps} />
		</FormItem>
	)
}

/**
 * Password Field
 */
export interface PasswordFieldProps extends BaseFieldProps {
	formElementProps?: PasswordProps
}

export const PasswordField: React.FC<PasswordFieldProps> = ({
	formElementProps,
	rules,
	...props
}) => {
	const [field] = useField<string>(props.name)
	const control = useInputControl(field)

	const updatedRules = getRules([
		...(rules ?? []),
		getInputProps(field, { type: 'password' }),
	])

	return (
		<FormItem {...props} rules={updatedRules}>
			<Input.Password
				{...{
					...formElementProps,
					...getInputProps(field, { type: 'password' }),
				}}
				onChange={(e) => control.change(e.target.value)}
				value={control.value}
				onBlur={control.blur}
				onFocus={control.focus}
			/>
		</FormItem>
	)
}

/**
 * Checkbox Field
 */
export interface CheckboxFieldProps extends BaseFieldProps {
	formElementProps?: CheckboxProps
}

export const CheckboxField: React.FC<CheckboxFieldProps> = ({
	formElementProps,
	valuePropName,
	layout,
	rules,
	label,
	...props
}) => {
	const [field] = useField(props.name)

	const updatedRules = getRules([
		...(rules ?? []),
		getInputProps(field, { type: 'checkbox' }),
	])

	const newLabel = nameToLabel(props.name)

	return (
		<FormItem
			rules={updatedRules}
			label=""
			layout={layout ?? 'horizontal'}
			valuePropName={valuePropName ?? 'checked'}
			{...props}
		>
			<Checkbox {...formElementProps}>{newLabel}</Checkbox>
		</FormItem>
	)
}