fix: special requests

2024-12-10 14:40:26 +01:00
parent 854563d099
commit 241e354fc5
16 changed files with 393 additions and 18 deletions
--- a/components/TempDesignSystem/Form/TextArea/index.tsx
+++ b/components/TempDesignSystem/Form/TextArea/index.tsx
@@ -0,0 +1,90 @@
+"use client"
+import {
+  Label as AriaLabel,
+  Text,
+  TextArea as AriaTextArea,
+  TextField,
+} from "react-aria-components"
+import { Controller, useFormContext } from "react-hook-form"
+
+import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
+import Label from "@/components/TempDesignSystem/Form/Label"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import Body from "../../Text/Body"
+
+import styles from "./textarea.module.css"
+
+import type { HTMLAttributes, WheelEvent } from "react"
+
+import type { TextAreaProps } from "./input"
+
+export default function TextArea({
+  "aria-label": ariaLabel,
+  className = "",
+  disabled = false,
+  helpText = "",
+  label,
+  name,
+  placeholder = "",
+  readOnly = false,
+  registerOptions = {},
+  type = "text",
+}: TextAreaProps) {
+  const { control } = useFormContext()
+  let numberAttributes: HTMLAttributes<HTMLTextAreaElement> = {}
+  if (type === "number") {
+    numberAttributes.onWheel = function (evt: WheelEvent<HTMLTextAreaElement>) {
+      evt.currentTarget.blur()
+    }
+  }
+  return (
+    <Controller
+      disabled={disabled}
+      control={control}
+      name={name}
+      rules={registerOptions}
+      render={({ field, fieldState }) => (
+        <TextField
+          aria-label={ariaLabel}
+          className={className}
+          isDisabled={field.disabled}
+          isRequired={!!registerOptions.required}
+          onBlur={field.onBlur}
+          onChange={field.onChange}
+          validationBehavior="aria"
+          value={field.value}
+        >
+          <AriaLabel className={styles.container} htmlFor={name}>
+            <Body asChild fontOnly>
+              <AriaTextArea
+                {...field}
+                aria-labelledby={field.name}
+                id={name}
+                placeholder={placeholder}
+                readOnly={readOnly}
+                required={!!registerOptions.required}
+                className={styles.textarea}
+              />
+            </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>
+      )}
+    />
+  )
+}