✨(react) add TextArea component

How could we ship a design system library without a textarea?

packages/react/src/components/Forms/TextArea/index.tsx

@@ -0,0 +1,103 @@
+import React, {
+  forwardRef,
+  TextareaHTMLAttributes,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import classNames from "classnames";
+import { Field, FieldProps } from ":/components/Forms/Field";
+import { LabelledBox } from ":/components/Forms/LabelledBox";
+import { randomString } from ":/utils";
+
+export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
+  FieldProps & {
+    label?: string;
+    charCounter?: boolean;
+    charCounterMax?: number;
+  };
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ label, id, defaultValue, charCounter, charCounterMax, ...props }, ref) => {
+    const areaRef = useRef<HTMLTextAreaElement | null>(null);
+    const [inputFocus, setInputFocus] = useState(false);
+    const [value, setValue] = useState(defaultValue || props.value || "");
+    const [labelAsPlaceholder, setLabelAsPlaceholder] = useState(!value);
+    const idToUse = useRef(id || randomString());
+    const rightTextToUse = charCounter
+      ? `${value.toString().length}/${charCounterMax}`
+      : props.rightText;
+
+    useEffect(() => {
+      if (inputFocus) {
+        setLabelAsPlaceholder(false);
+        return;
+      }
+      setLabelAsPlaceholder(!value);
+    }, [inputFocus, value]);
+
+    // If the input is used as a controlled component, we need to update the local value.
+    useEffect(() => {
+      if (defaultValue !== undefined) {
+        return;
+      }
+      setValue(props.value || "");
+    }, [props.value]);
+
+    const { fullWidth, rightText, text, textItems, ...areaProps } = props;
+
+    return (
+      <Field
+        {...props}
+        className="c__field--textarea"
+        rightText={rightTextToUse}
+      >
+        {/* We disabled linting for this specific line because we consider that the onClick props is only used for */}
+        {/* mouse users, so this do not engender any issue for accessibility. */}
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        <div
+          className={classNames("c__textarea__wrapper", {
+            "c__textarea__wrapper--disabled": props.disabled,
+          })}
+          onClick={() => areaRef.current?.focus()}
+        >
+          <LabelledBox
+            label={label}
+            htmlFor={idToUse.current}
+            labelAsPlaceholder={labelAsPlaceholder}
+            disabled={props.disabled}
+          >
+            <textarea
+              className="c__textarea"
+              {...areaProps}
+              id={idToUse.current}
+              onFocus={(e) => {
+                setInputFocus(true);
+                props.onFocus?.(e);
+              }}
+              onBlur={(e) => {
+                setInputFocus(false);
+                props.onBlur?.(e);
+              }}
+              value={value}
+              onChange={(e) => {
+                setValue(e.target.value);
+                props.onChange?.(e);
+              }}
+              ref={(nativeRef) => {
+                if (ref) {
+                  if (typeof ref === "function") {
+                    ref(nativeRef);
+                  } else {
+                    ref.current = nativeRef;
+                  }
+                }
+                areaRef.current = nativeRef;
+              }}
+            />
+          </LabelledBox>
+        </div>
+      </Field>
+    );
+  },
+);