From c0e0199d2020ef7b191380adda77d0f5b4d88aca Mon Sep 17 00:00:00 2001
From: houssembaltii <houssem@bearstudio.fr>
Date: Mon, 4 Nov 2024 17:22:06 +0100
Subject: [PATCH] feat: add invalidation for input  fields

---
 src/components/Form/FieldCheckbox/index.tsx      | 3 ++-
 src/components/Form/FieldCheckboxes/index.tsx    | 3 ++-
 src/components/Form/FieldCustom/docs.stories.tsx | 9 +++++++--
 src/components/Form/FieldMultiSelect/index.tsx   | 3 ++-
 src/components/Form/FieldPassword/index.tsx      | 3 ++-
 src/components/Form/FieldRadios/index.tsx        | 3 ++-
 src/components/Form/FieldSelect/index.tsx        | 3 ++-
 src/components/Form/FieldTextarea/index.tsx      | 3 ++-
 8 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/Form/FieldCheckbox/index.tsx b/src/components/Form/FieldCheckbox/index.tsx
index 48f4ecbd8..a99aae81a 100644
--- a/src/components/Form/FieldCheckbox/index.tsx
+++ b/src/components/Form/FieldCheckbox/index.tsx
@@ -39,12 +39,13 @@ export const FieldCheckbox = <
   return (
     <Controller
       {...props}
-      render={({ field: { value, ...field } }) => (
+      render={({ field: { value, ...field }, fieldState }) => (
         <Flex flexDirection="column" gap={1} flex={1} {...props.containerProps}>
           <Checkbox
             size={props.size}
             isChecked={!!value}
             isDisabled={props.isDisabled}
+            isInvalid={!!fieldState.error}
             {...props.checkboxProps}
             {...field}
           >
diff --git a/src/components/Form/FieldCheckboxes/index.tsx b/src/components/Form/FieldCheckboxes/index.tsx
index b719720e1..f80291103 100644
--- a/src/components/Form/FieldCheckboxes/index.tsx
+++ b/src/components/Form/FieldCheckboxes/index.tsx
@@ -52,7 +52,7 @@ export const FieldCheckboxes = <
   return (
     <Controller
       {...props}
-      render={({ field: { ref: _ref, ...field } }) => (
+      render={({ field: { ref: _ref, ...field }, fieldState }) => (
         <Flex flexDirection="column" gap={1} flex={1} {...props.containerProps}>
           <CheckboxGroup
             size={props.size}
@@ -70,6 +70,7 @@ export const FieldCheckboxes = <
                   <Checkbox
                     key={option.value}
                     value={option.value}
+                    isInvalid={!!fieldState.error}
                     {...props.checkboxProps}
                   >
                     {option.label}
diff --git a/src/components/Form/FieldCustom/docs.stories.tsx b/src/components/Form/FieldCustom/docs.stories.tsx
index 8766079f5..93a20424b 100644
--- a/src/components/Form/FieldCustom/docs.stories.tsx
+++ b/src/components/Form/FieldCustom/docs.stories.tsx
@@ -44,9 +44,14 @@ export const Default = () => {
               control={form.control}
               name="other"
               type="custom"
-              render={({ field }) => (
+              render={({ field, fieldState }) => (
                 <>
-                  <Input w={24} size="sm" {...field} />
+                  <Input
+                    w={24}
+                    size="sm"
+                    {...field}
+                    isInvalid={!!fieldState.error}
+                  />
                   <FormFieldError />
                 </>
               )}
diff --git a/src/components/Form/FieldMultiSelect/index.tsx b/src/components/Form/FieldMultiSelect/index.tsx
index 9b72b5658..c9a62d2b5 100644
--- a/src/components/Form/FieldMultiSelect/index.tsx
+++ b/src/components/Form/FieldMultiSelect/index.tsx
@@ -39,7 +39,7 @@ export const FieldMultiSelect = <
   return (
     <Controller
       {...props}
-      render={({ field: { value, onChange, ...field } }) => {
+      render={({ field: { value, onChange, ...field }, fieldState }) => {
         const selectValues =
           props.options?.filter((option) => value?.includes(option.value)) ??
           undefined;
@@ -60,6 +60,7 @@ export const FieldMultiSelect = <
               menuPortalTarget={document.body}
               options={props.options}
               isDisabled={props.isDisabled}
+              isInvalid={!!fieldState.error}
               onChange={(options) =>
                 // @ts-expect-error TODO should fix the typing. This error pops when
                 // we propagate the `selectProps`
diff --git a/src/components/Form/FieldPassword/index.tsx b/src/components/Form/FieldPassword/index.tsx
index 7dfcc1728..4670a377e 100644
--- a/src/components/Form/FieldPassword/index.tsx
+++ b/src/components/Form/FieldPassword/index.tsx
@@ -44,7 +44,7 @@ export const FieldPassword = <
   return (
     <Controller
       {...props}
-      render={({ field }) => (
+      render={({ field, fieldState }) => (
         <Flex flexDirection="column" gap={1} flex={1} {...props.containerProps}>
           <InputGroup size={props.size}>
             <Input
@@ -52,6 +52,7 @@ export const FieldPassword = <
               type={showPassword ? 'text' : 'password'}
               placeholder={props.placeholder}
               autoFocus={props.autoFocus}
+              isInvalid={!!fieldState.error}
               {...props.inputProps}
               {...field}
             />
diff --git a/src/components/Form/FieldRadios/index.tsx b/src/components/Form/FieldRadios/index.tsx
index 6f52a2f57..4bdf742af 100644
--- a/src/components/Form/FieldRadios/index.tsx
+++ b/src/components/Form/FieldRadios/index.tsx
@@ -52,7 +52,7 @@ export const FieldRadios = <
   return (
     <Controller
       {...props}
-      render={({ field: { ref: _ref, ...field } }) => (
+      render={({ field: { ref: _ref, ...field }, fieldState }) => (
         <Flex flexDirection="column" gap={1} flex={1} {...props.containerProps}>
           <RadioGroup
             isDisabled={props.isDisabled}
@@ -70,6 +70,7 @@ export const FieldRadios = <
                   <Radio
                     key={option.value}
                     value={option.value}
+                    isInvalid={!!fieldState.error}
                     {...props.radioProps}
                   >
                     {option.label}
diff --git a/src/components/Form/FieldSelect/index.tsx b/src/components/Form/FieldSelect/index.tsx
index a9e82bc68..5cdf58ce2 100644
--- a/src/components/Form/FieldSelect/index.tsx
+++ b/src/components/Form/FieldSelect/index.tsx
@@ -41,7 +41,7 @@ export const FieldSelect = <
   return (
     <Controller
       {...props}
-      render={({ field }) => {
+      render={({ field, fieldState }) => {
         const { value, onChange, ...fieldProps } = field;
         const selectValue =
           props.options?.find((option) => option.value === value) ?? undefined;
@@ -60,6 +60,7 @@ export const FieldSelect = <
               autoFocus={props.autoFocus}
               value={selectValue}
               isDisabled={props.isDisabled}
+              isInvalid={!!fieldState.error}
               // @ts-expect-error should fix the typing. This error pops when
               // we propagate the `selectProps`
               onChange={(option) => onChange(option?.value)}
diff --git a/src/components/Form/FieldTextarea/index.tsx b/src/components/Form/FieldTextarea/index.tsx
index e35ae1fef..94d11040d 100644
--- a/src/components/Form/FieldTextarea/index.tsx
+++ b/src/components/Form/FieldTextarea/index.tsx
@@ -35,7 +35,7 @@ export const FieldTextarea = <
   return (
     <Controller
       {...props}
-      render={({ field }) => (
+      render={({ field, fieldState }) => (
         <Flex flexDirection="column" gap={1} flex={1} {...props.containerProps}>
           <Textarea
             size={props.size}
@@ -43,6 +43,7 @@ export const FieldTextarea = <
             autoFocus={props.autoFocus}
             rows={props.rows}
             isDisabled={props.isDisabled}
+            isInvalid={!!fieldState.error}
             {...props.textareaProps}
             {...field}
           />