From fd5514b8c2272af9452d31d7fbadccf3188095ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s?= <andresgutgon@gmail.com>
Date: Mon, 11 Nov 2024 11:19:11 +0100
Subject: [PATCH] Clean form removing unnecessary FormField wrapping input
 atoms which (#578)

include formfield. Also adding `autoGrow` prop to TextArea component
---
 .../Simple/NumberEvaluationEditor/index.tsx   | 102 ++++++++----------
 .../web-ui/src/ds/atoms/FormField/index.tsx   |   4 +-
 .../web-ui/src/ds/atoms/TextArea/index.tsx    |   8 +-
 3 files changed, 56 insertions(+), 58 deletions(-)

diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Editor/Simple/NumberEvaluationEditor/index.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Editor/Simple/NumberEvaluationEditor/index.tsx
index 899b78e67..a2860e129 100644
--- a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Editor/Simple/NumberEvaluationEditor/index.tsx
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Editor/Simple/NumberEvaluationEditor/index.tsx
@@ -12,11 +12,10 @@ import {
 } from '@latitude-data/core/browser'
 import {
   Button,
-  FormField,
   FormFieldGroup,
   Input,
-  Label,
   Text,
+  TextArea,
   useToast,
 } from '@latitude-data/web-ui'
 import {
@@ -142,66 +141,57 @@ export default function NumberEvaluationEditor({
         id='simple-number-evaluation-editor'
         onSubmit={onSubmit}
       >
-        <FormField>
-          <ProviderModelSelector
-            modelDisabled={!selectedProvider}
-            modelOptions={modelOptions}
-            onModelChange={onModelChange}
-            onProviderChange={onProviderChange}
-            providerDisabled={!providerOptions.length}
-            providerOptions={providerOptions}
-            selectedModel={selectedModel}
-            selectedProvider={selectedProvider}
+        <ProviderModelSelector
+          modelDisabled={!selectedProvider}
+          modelOptions={modelOptions}
+          onModelChange={onModelChange}
+          onProviderChange={onProviderChange}
+          providerDisabled={!providerOptions.length}
+          providerOptions={providerOptions}
+          selectedModel={selectedModel}
+          selectedProvider={selectedProvider}
+        />
+        <Input
+          name='objective'
+          label='Evaluation objective'
+          defaultValue={metadata.objective}
+          placeholder='The main objective of the evaluation'
+        />
+        <FormFieldGroup>
+          <Input
+            label='Min Value'
+            type='number'
+            name='minValue'
+            defaultValue={resultConfiguration.minValue}
           />
-        </FormField>
-        <FormField label='Evaluation objective'>
           <Input
-            name='objective'
-            defaultValue={metadata.objective}
-            placeholder='The main objective of the evaluation'
+            label='Min value description'
+            name='minValueDescription'
+            defaultValue={resultConfiguration.minValueDescription ?? ''}
+            placeholder='Description of the min value'
           />
-        </FormField>
-        <FormFieldGroup>
-          <FormField label='Min Value'>
-            <Input
-              type='number'
-              name='minValue'
-              defaultValue={resultConfiguration.minValue}
-            />
-          </FormField>
-          <FormField label='Min value description'>
-            <Input
-              name='minValueDescription'
-              defaultValue={resultConfiguration.minValueDescription ?? ''}
-              placeholder='Description of the min value'
-            />
-          </FormField>
         </FormFieldGroup>
         <FormFieldGroup>
-          <FormField label='Max Value'>
-            <Input
-              type='number'
-              name='maxValue'
-              defaultValue={resultConfiguration.maxValue}
-            />
-          </FormField>
-          <FormField label='Max value description'>
-            <Input
-              name='maxValueDescription'
-              defaultValue={resultConfiguration.maxValueDescription ?? ''}
-              placeholder='Description of the max value'
-            />
-          </FormField>
-        </FormFieldGroup>
-        <div className='flex flex-col gap-2 flex-grow'>
-          <Label>Additional instructions</Label>
-          <textarea
-            name='additionalInstructions'
-            className='w-full h-full border rounded-lg p-2 text-sm text-foreground'
-            defaultValue={metadata.additionalInstructions ?? ''}
-            placeholder='Additional instructions the eval should take into account...'
+          <Input
+            label='Max Value'
+            type='number'
+            name='maxValue'
+            defaultValue={resultConfiguration.maxValue}
+          />
+          <Input
+            label='Max value description'
+            name='maxValueDescription'
+            defaultValue={resultConfiguration.maxValueDescription ?? ''}
+            placeholder='Description of the max value'
           />
-        </div>
+        </FormFieldGroup>
+        <TextArea
+          autoGrow
+          label='Additional instructions'
+          name='additionalInstructions'
+          placeholder='Additional instructions the eval should take into account...'
+          defaultValue={metadata.additionalInstructions ?? ''}
+        />
       </form>
     </div>
   )
diff --git a/packages/web-ui/src/ds/atoms/FormField/index.tsx b/packages/web-ui/src/ds/atoms/FormField/index.tsx
index 9188da486..fa1eacc23 100644
--- a/packages/web-ui/src/ds/atoms/FormField/index.tsx
+++ b/packages/web-ui/src/ds/atoms/FormField/index.tsx
@@ -81,6 +81,7 @@ export type FormFieldProps = Omit<
   info?: string
   errors?: string[] | null | undefined
   errorStyle?: 'inline' | 'tooltip'
+  autoGrow?: boolean
 }
 function FormField({
   children,
@@ -91,6 +92,7 @@ function FormField({
   errors,
   errorStyle = 'inline',
   info,
+  autoGrow = false,
 }: FormFieldProps) {
   const error = errors?.[0]
   const id = useId()
@@ -100,7 +102,7 @@ function FormField({
   const LabelComponent = badgeLabel ? BatchLabel : Label
   const input = (
     <div
-      className={cn('space-y-2 w-full', className)}
+      className={cn('space-y-2 w-full', { 'h-full': autoGrow }, className)}
       aria-describedby={
         !error
           ? `${formDescriptionId}`
diff --git a/packages/web-ui/src/ds/atoms/TextArea/index.tsx b/packages/web-ui/src/ds/atoms/TextArea/index.tsx
index 5b12e46d0..007d31bcb 100644
--- a/packages/web-ui/src/ds/atoms/TextArea/index.tsx
+++ b/packages/web-ui/src/ds/atoms/TextArea/index.tsx
@@ -24,7 +24,9 @@ const inputVariants = cva(cn(INPUT_BASE_CLASSES), {
 export type TextAreaProps = TextareaAutosizeProps &
   Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'height'> &
   VariantProps<typeof inputVariants> &
-  Omit<FormFieldProps, 'children'>
+  Omit<FormFieldProps, 'children'> & {
+    autoGrow?: boolean
+  }
 const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   function TextArea(
     {
@@ -37,6 +39,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       minRows = 5,
       maxRows,
       placeholder,
+      autoGrow = false,
       ...props
     },
     ref,
@@ -47,6 +50,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         description={description}
         errors={errors}
         errorStyle={errorStyle}
+        autoGrow={autoGrow}
       >
         <TextareaAutosize
           ref={ref}
@@ -55,6 +59,8 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           placeholder={placeholder}
           className={cn(inputVariants({ size }), className, {
             'border-red-500 focus-visible:ring-red-500': errors,
+            // Account for inner textara padding
+            '!min-h-[calc(100%-theme(spacing.6))]': autoGrow,
           })}
           {...props}
         />