feat(WEB-162): final design edit profile page

2024-06-18 08:15:57 +02:00
parent 5f3e417593
commit d84efcbb0f
81 changed files with 1538 additions and 711 deletions
@@ -1,8 +1,13 @@
 "use client"
-import { Input as AriaInput, TextField } from "react-aria-components"
-import { useController } from "react-hook-form"
+import {
+  Input as AriaInput,
+  Label as AriaLabel,
+  TextField,
+} from "react-aria-components"
+import { useController, useFormContext } from "react-hook-form"

 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
+import Label from "@/components/TempDesignSystem/Form/Label"
 import Body from "@/components/TempDesignSystem/Text/Body"

 import styles from "./input.module.css"
@@ -11,17 +16,24 @@ import type { InputProps } from "./input"

 export default function Input({
  "aria-label": ariaLabel,
-  control,
  disabled,
+  label,
  name,
-  placeholder,
-  registerOptions,
+  placeholder = "",
+  registerOptions = {},
+  required = false,
  type = "text",
 }: InputProps) {
+  const { control } = useFormContext()
+  const rules = {
+    ...registerOptions,
+    required:
+      "required" in registerOptions ? !!registerOptions.required : required,
+  }
  const { field, fieldState, formState } = useController({
    control,
    name,
-    rules: registerOptions,
+    rules,
  })

  return (
@@ -32,18 +44,24 @@ export default function Input({
      isInvalid={fieldState.invalid}
      isRequired={!!registerOptions?.required}
      name={field.name}
-      onBlur={field.onBlur}
-      onChange={field.onChange}
      type={type}
    >
-      <Body asChild fontOnly>
-        <AriaInput
-          className={styles.input}
-          placeholder={placeholder}
-          ref={field.ref}
-        />
-      </Body>
-      <ErrorMessage errors={formState.errors} name={name} />
+      <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>
  )
 }