feat(WEB-163): edit profile field validation

2024-07-01 15:37:12 +02:00
parent 2a71a45d3d
commit 56bfbc3b71
30 changed files with 588 additions and 134 deletions
--- a/components/TempDesignSystem/Form/Input/index.tsx
+++ b/components/TempDesignSystem/Form/Input/index.tsx
@@ -2,66 +2,86 @@
 import {
  Input as AriaInput,
  Label as AriaLabel,
+  Text,
  TextField,
 } from "react-aria-components"
-import { useController, useFormContext } from "react-hook-form"
+import { Controller, useFormContext } from "react-hook-form"

-import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
+import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import Label from "@/components/TempDesignSystem/Form/Label"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"

 import styles from "./input.module.css"

+import type { HTMLAttributes, WheelEvent } from "react"
+
 import type { InputProps } from "./input"

 export default function Input({
  "aria-label": ariaLabel,
-  disabled,
+  disabled = false,
+  helpText = "",
  label,
  name,
  placeholder = "",
  registerOptions = {},
-  required = false,
  type = "text",
 }: InputProps) {
  const { control } = useFormContext()
-  const rules = {
-    ...registerOptions,
-    required:
-      "required" in registerOptions ? !!registerOptions.required : required,
+  let numberAttributes: HTMLAttributes<HTMLInputElement> = {}
+  if (type === "number") {
+    numberAttributes.onWheel = function (evt: WheelEvent<HTMLInputElement>) {
+      evt.currentTarget.blur()
+    }
  }
-  const { field, fieldState, formState } = useController({
-    control,
-    name,
-    rules,
-  })
-
  return (
-    <TextField
-      aria-label={ariaLabel}
-      defaultValue={field.value}
-      isDisabled={disabled ?? field.disabled}
-      isInvalid={fieldState.invalid}
-      isRequired={!!registerOptions?.required}
-      name={field.name}
-      type={type}
-    >
-      <AriaLabel className={styles.container} htmlFor={field.name}>
-        <Body asChild fontOnly>
-          <AriaInput
-            className={styles.input}
-            id={field.name}
-            name={field.name}
-            onBlur={field.onBlur}
-            onChange={field.onChange}
-            placeholder={placeholder}
-            ref={field.ref}
-            required={rules.required}
-          />
-        </Body>
-        <Label required={rules.required}>{label}</Label>
-      </AriaLabel>
-      <ErrorMessage errors={formState.errors} name={field.name} />
-    </TextField>
+    <Controller
+      disabled={disabled}
+      control={control}
+      name={name}
+      rules={registerOptions}
+      render={({ field, fieldState }) => (
+        <TextField
+          aria-label={ariaLabel}
+          isDisabled={field.disabled}
+          isInvalid={fieldState.invalid}
+          isRequired={!!registerOptions.required}
+          name={field.name}
+          onBlur={field.onBlur}
+          onChange={field.onChange}
+          validationBehavior="aria"
+          value={field.value}
+        >
+          <AriaLabel className={styles.container} htmlFor={field.name}>
+            <Body asChild fontOnly>
+              <AriaInput
+                {...numberAttributes}
+                aria-labelledby={field.name}
+                className={styles.input}
+                id={field.name}
+                placeholder={placeholder}
+                type={type}
+              />
+            </Body>
+            <Label required={!!registerOptions.required}>{label}</Label>
+          </AriaLabel>
+          {helpText && !fieldState.error ? (
+            <Caption asChild color="black">
+              <Text className={styles.helpText} slot="description">
+                <CheckIcon height={20} width={30} />
+                {helpText}
+              </Text>
+            </Caption>
+          ) : null}
+          {fieldState.error ? (
+            <Caption className={styles.error} fontOnly>
+              <InfoCircleIcon color="red" />
+              {fieldState.error.message}
+            </Caption>
+          ) : null}
+        </TextField>
+      )}
+    />
  )
 }