From 0f6c52c2e2c31ebbc1fbfa7c34467b044fab8ffa Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 6 Mar 2024 15:33:21 +0800
Subject: [PATCH] fix type errors

---
 .../ui-patterns/form/Input/FormInput.stories.tsx     |  2 +-
 packages/ui-patterns/form/Input/FormInput.tsx        | 12 ++++--------
 packages/ui-patterns/form/Page.tsx                   | 10 +++++-----
 packages/ui-patterns/form/Select/FormSelect.tsx      |  6 +++---
 packages/ui-patterns/form/utils.tsx                  |  2 +-
 5 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/packages/ui-patterns/form/Input/FormInput.stories.tsx b/packages/ui-patterns/form/Input/FormInput.stories.tsx
index fc0c6cd79e4..d3ef73999ef 100644
--- a/packages/ui-patterns/form/Input/FormInput.stories.tsx
+++ b/packages/ui-patterns/form/Input/FormInput.stories.tsx
@@ -63,7 +63,7 @@ export const Primary: Story = {
     return (
       <Form_Shadcn_ {...form}>
         <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
-          <FormFieldInput {...args} name="username" control={form.control} />
+          <FormFieldInput name="username" control={form.control} />
           <Button size="small" type="primary" htmlType="submit">
             Submit
           </Button>
diff --git a/packages/ui-patterns/form/Input/FormInput.tsx b/packages/ui-patterns/form/Input/FormInput.tsx
index ec38593a786..ee8179abc97 100644
--- a/packages/ui-patterns/form/Input/FormInput.tsx
+++ b/packages/ui-patterns/form/Input/FormInput.tsx
@@ -1,5 +1,4 @@
 import React, { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
-import { FieldPath, FieldValues } from 'react-hook-form'
 import { FormField_Shadcn_ } from 'ui'
 import { FormItemProps, FormItemWrapper } from '../utils'
 import { InputWithLayout } from './InputWithLayout'
@@ -15,18 +14,15 @@ const FormItemInput = forwardRef<
 
 FormItemInput.displayName = 'FormItemInput'
 
-export interface FormFieldInputProps<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>,
-> {
-  name: TName
+export interface FormFieldInputProps {
+  name: (typeof FormItemInput)['name']
   control: any // { key: string }
   formField?: Omit<React.ComponentProps<typeof FormField_Shadcn_>, 'ref'>
 }
 
 const FormFieldInput = forwardRef<
   ElementRef<typeof FormItemInput>,
-  ComponentPropsWithoutRef<typeof FormItemInput> & FormFieldInputProps<any, any>
+  ComponentPropsWithoutRef<typeof FormItemInput> & FormFieldInputProps
 >(({ formField, name, control, ...props }, ref) => {
   return (
     <FormField_Shadcn_
@@ -38,4 +34,4 @@ const FormFieldInput = forwardRef<
   )
 })
 
-export { FormFieldInput, FormItemInput }
+export { FormItemInput, FormFieldInput }
diff --git a/packages/ui-patterns/form/Page.tsx b/packages/ui-patterns/form/Page.tsx
index 7bd577dd69a..d2b40f96e9f 100644
--- a/packages/ui-patterns/form/Page.tsx
+++ b/packages/ui-patterns/form/Page.tsx
@@ -20,7 +20,7 @@ import {
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
-import { FormInput } from './Input/FormInput'
+import { FormFieldInput } from './Input/FormInput'
 import { Box, User, User2 } from 'lucide-react'
 import { FormSelect, FormSelectTrigger } from './Select/FormSelect'
 
@@ -60,18 +60,18 @@ export const Page = () => {
           <p className="text-foreground-light">Please fill in the following</p>
         </div>
         <div role="separator" className="h-px bg-border w-full" />
-        <FormInput
-          layout="horizontal"
-          name="username"
+        <FormFieldInput
           control={form.control}
+          name="username"
           label="Username"
+          layout="horizontal"
           description="What we call you"
           labelOptional="Optional"
           icon={<User2 strokeWidth={1.5} size={16} className="text-foreground-muted" />}
         />
         <FormSelect
-          name="email"
           control={form.control}
+          name="email"
           layout="horizontal"
           label="Email"
           description="This is your email"
diff --git a/packages/ui-patterns/form/Select/FormSelect.tsx b/packages/ui-patterns/form/Select/FormSelect.tsx
index bac255a40d3..974cb45b946 100644
--- a/packages/ui-patterns/form/Select/FormSelect.tsx
+++ b/packages/ui-patterns/form/Select/FormSelect.tsx
@@ -9,8 +9,8 @@ const FormItemSelect = forwardRef<
 >(({ field, ...props }, ref) => (
   <FormItemWrapper>
     <SelectWithLayout
-      onValueChange={field.onChange}
-      defaultValue={field.value}
+      onValueChange={field && field.onChange}
+      defaultValue={field && field.value}
       {...field}
       {...props}
       isReactForm={true}
@@ -24,7 +24,7 @@ FormItemSelect.displayName = 'FormItemSelect'
 export interface FormFieldSelectProps extends Omit<ComponentProps<typeof SelectWithLayout>, 'ref'> {
   name: React.ComponentProps<typeof FormField_Shadcn_>['name']
   control: any // { key: string }
-  formField: Omit<React.ComponentProps<typeof FormField_Shadcn_>, 'ref'>
+  formField?: Omit<React.ComponentProps<typeof FormField_Shadcn_>, 'ref'>
 }
 
 const FormSelect = forwardRef<
diff --git a/packages/ui-patterns/form/utils.tsx b/packages/ui-patterns/form/utils.tsx
index 1fd2e0690b2..0782551b239 100644
--- a/packages/ui-patterns/form/utils.tsx
+++ b/packages/ui-patterns/form/utils.tsx
@@ -9,7 +9,7 @@ export interface FormItemProps<
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>,
 > {
-  field: ControllerRenderProps<TFieldValues, TName>
+  field?: ControllerRenderProps<TFieldValues, TName>
 }
 
 /**