build: setup turbo repo

apps/app/ui/TextArea/index.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useRef } from "react";
+// commons
+import { classNames } from "constants/common";
+// hooks
+import useAutosizeTextArea from "lib/hooks/useAutosizeTextArea";
+// types
+import { Props } from "./types";
+
+const TextArea: React.FC<Props> = ({
+  id,
+  label,
+  className,
+  value,
+  placeholder,
+  name,
+  register,
+  mode = "primary",
+  rows,
+  cols,
+  disabled,
+  error,
+  validations,
+  onChange,
+  ...rest
+}) => {
+  const [textareaValue, setTextareaValue] = useState(value ?? "");
+
+  const textAreaRef = useRef<any>(null);
+
+  useAutosizeTextArea(textAreaRef.current, textareaValue);
+
+  return (
+    <>
+      {label && (
+        <label htmlFor={id} className="text-gray-500 mb-2">
+          {label}
+        </label>
+      )}
+      <textarea
+        id={id}
+        placeholder={placeholder}
+        value={value}
+        rows={rows}
+        cols={cols}
+        disabled={disabled}
+        {...(register && register(name, validations))}
+        ref={(e) => {
+          textAreaRef.current = e;
+          if (register) register(name).ref(e);
+        }}
+        onChange={(e) => {
+          register && register(name).onChange(e);
+          onChange && onChange(e);
+          setTextareaValue(e.target.value);
+        }}
+        className={classNames(
+          "w-full outline-none px-3 py-2 bg-transparent",
+          mode === "primary" ? "border border-gray-300 rounded-md" : "",
+          mode === "transparent"
+            ? "bg-transparent border-none transition-all ring-0 focus:ring-1 focus:ring-indigo-600 rounded"
+            : "",
+          error ? "border-red-500" : "",
+          error && mode === "primary" ? "bg-red-100" : "",
+          className ?? ""
+        )}
+        {...rest}
+      ></textarea>
+      {error?.message && <div className="text-red-500 text-sm">{error.message}</div>}
+    </>
+  );
+};
+
+export default TextArea;