fix types

apps/playground/src/App.tsx

@@ -1,6 +1,5 @@
 import './App.css'
 import { useRemultForm, Controller } from 'remult-uikit'
-import type { SubmitData } from 'remult-uikit'
 import { User } from './shared/User'
 import { remult } from 'remult'
 import {
@@ -64,7 +63,14 @@ function App() {
 					control={control}
 					defaultValue=''
 					repo={userRepo}
-					render={({ field }) => <TextField {...field} />}
+					render={({ field }) => (
+						<TextField
+							{...field}
+							label={field.label + (field._required ? ' *' : '')}
+							helperText={String(errors.lastName?.message)}
+							error={!!errors.lastName}
+						/>
+					)}
 				/>
 				{errors.lastName && (
 					<p style={{ color: 'red' }}>{String(errors.lastName.message)}</p>
@@ -74,7 +80,7 @@ function App() {
 					control={control}
 					defaultValue=''
 					repo={userRepo}
-					render={({ field }) => <TextField {...field} />}
+					render={({ field }) => <TextField {...field} label={field.label} />}
 				/>
 				{errors.name && (
 					<p style={{ color: 'red' }}>{String(errors.name.message)}</p>

apps/playground/src/form.tsx

@@ -12,7 +12,6 @@ import {
 	TextField,
 } from '@mui/material'
 import { Controller, useForm } from 'react-hook-form'
-import { repoResolver } from 'remult-uikit'
 
 const userRepo = remult.repo(User)
 function Form() {
@@ -21,7 +20,7 @@ function Form() {
 		formState: { errors },
 		register,
 		control,
-	} = useForm({ resolver: repoResolver(userRepo) })
+	} = useForm()
 
 	const onSubmit = (data: User) => {
 		console.log('data', data)
@@ -31,7 +30,7 @@ function Form() {
 
 	return (
 		<form
-			onSubmit={handleSubmit(onSubmit)}
+			// onSubmit={handleSubmit(onSubmit)}
 			style={{ display: 'flex', flexDirection: 'column' }}
 		>
 			<span>{userRepo.fields.email.caption}</span>

packages/remult-uikit/src/Controller.tsx

@@ -1,24 +1,36 @@
 import { Controller as ControllerInternal } from 'react-hook-form'
 import type {
+	ControllerFieldState,
 	ControllerProps,
 	ControllerRenderProps,
 	FieldValues,
+	UseFormStateReturn,
+	Path,
 } from 'react-hook-form'
 import { getValidator, isRequired } from './util'
 import { Repository } from 'remult'
 
-type ControllerPropsWithRepo<T> = Omit<ControllerProps, 'name'> & {
+type ControllerPropsWithRepo<T> = Omit<ControllerProps, 'name' | 'render'> & {
 	name: keyof T
 	repo: Repository<T>
+	render: ControllerRenderFunctionWithRemult<FieldValues>
 }
 
-type ControllerRenderPropsWithRemult = ControllerRenderProps<
-	FieldValues,
-	string
-> & {
-	label: string
-	required?: boolean
-}
+type ControllerRenderPropsWithRemult<TFieldValues extends FieldValues> =
+	ControllerRenderProps<TFieldValues, Path<TFieldValues>> & {
+		label: string
+		_required?: boolean
+	}
+
+type ControllerRenderFunctionWithRemult<TFieldValues extends FieldValues> = ({
+	field,
+	fieldState,
+	formState,
+}: {
+	field: ControllerRenderPropsWithRemult<TFieldValues>
+	fieldState: ControllerFieldState
+	formState: UseFormStateReturn<TFieldValues>
+}) => React.ReactElement
 
 const Controller = <T,>(props: ControllerPropsWithRepo<T>) => {
 	return (
@@ -31,12 +43,13 @@ const Controller = <T,>(props: ControllerPropsWithRepo<T>) => {
 			render={({ field, fieldState, formState }) => {
 				// @ts-expect-error
 				const isRequiredField = isRequired(props.repo.fields[props.name])
-				const newField: ControllerRenderPropsWithRemult = {
+				const newField: ControllerRenderPropsWithRemult<FieldValues> = {
 					...field,
-					label: `${props.repo.fields[props.name as keyof T].caption}${
-						isRequiredField ? ' *' : ''
-					}`,
-					// required: isRequired(props.repo.fields[props.name]),
+					// label: `${props.repo.fields[props.name as keyof T].caption}${
+					// 	isRequiredField ? ' *' : ''
+					// }`,
+					label: props.repo.fields[props.name as keyof T].caption,
+					_required: !!isRequiredField,
 				}
 				return props.render({ field: newField, fieldState, formState })
 			}}