diff --git a/console/src/new-components/Form/Form.stories.tsx b/console/src/new-components/Form/Form.stories.tsx index 4612fabecc7..5f17d25899e 100644 --- a/console/src/new-components/Form/Form.stories.tsx +++ b/console/src/new-components/Form/Form.stories.tsx @@ -6,17 +6,6 @@ import { z } from 'zod'; import { Form } from './Form'; import { InputField } from './InputField'; -type FormValues = { - title: string; - searchLeft: string; - searchRight: string; - email: string; - titleMedium: string; - searchLeftMedium: string; - searchRightMedium: string; - emailMedium: string; -}; - const schema = z.object({ title: z.string().nonempty(), searchLeft: z.string().nonempty(), @@ -38,7 +27,7 @@ export default { export const Example: ComponentStory = () => { return ( - +
{ alert(JSON.stringify(values, null, 2)); }} diff --git a/console/src/new-components/Form/Form.tsx b/console/src/new-components/Form/Form.tsx index acc7b970f35..de85d818e5d 100644 --- a/console/src/new-components/Form/Form.tsx +++ b/console/src/new-components/Form/Form.tsx @@ -7,7 +7,7 @@ import { UseFormProps, FormProvider, } from 'react-hook-form'; -import { ZodType, ZodTypeDef } from 'zod'; +import { ZodType, ZodTypeDef, infer as zodInfer } from 'zod'; type FormProps = { className?: string; @@ -15,7 +15,7 @@ type FormProps = { children: (methods: UseFormReturn) => React.ReactNode; options?: UseFormProps; id?: string; - schema?: Schema; + schema: Schema; }; export const Form = < @@ -32,8 +32,8 @@ export const Form = < options, id, schema, -}: FormProps) => { - const methods = useForm({ +}: FormProps, Schema>) => { + const methods = useForm>({ ...options, resolver: schema && zodResolver(schema), });