console: make schema mendatory and used for form values

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/2537
GitOrigin-RevId: e1224d242addd47bae953b98775424b655f18a85

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<typeof Form> = () => {
   return (
-    <Form<FormValues>
+    <Form
       onSubmit={async values => {
         alert(JSON.stringify(values, null, 2));
       }}

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<TFormValues, Schema> = {
   className?: string;
@@ -15,7 +15,7 @@ type FormProps<TFormValues, Schema> = {
   children: (methods: UseFormReturn<TFormValues>) => React.ReactNode;
   options?: UseFormProps<TFormValues>;
   id?: string;
-  schema?: Schema;
+  schema: Schema;
 };
 
 export const Form = <
@@ -32,8 +32,8 @@ export const Form = <
   options,
   id,
   schema,
-}: FormProps<TFormValues, Schema>) => {
-  const methods = useForm<TFormValues>({
+}: FormProps<zodInfer<Schema>, Schema>) => {
+  const methods = useForm<zodInfer<Schema>>({
     ...options,
     resolver: schema && zodResolver(schema),
   });