From 6c07fbe57ca5969c2928355b699169a2ef7c7579 Mon Sep 17 00:00:00 2001
From: "Yingtong Wu (Eden)" <EdenWuyt@gmail.com>
Date: Tue, 2 Dec 2025 08:04:46 +0000
Subject: [PATCH 1/5] Add textarea component and a simple test file.

---
 client/src/app/test/textarea/page.tsx | 33 ++++++++++++++++++
 client/src/components/ui/textarea.tsx | 48 +++++++++++++++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 client/src/app/test/textarea/page.tsx
 create mode 100644 client/src/components/ui/textarea.tsx

diff --git a/client/src/app/test/textarea/page.tsx b/client/src/app/test/textarea/page.tsx
new file mode 100644
index 0000000..d19fa16
--- /dev/null
+++ b/client/src/app/test/textarea/page.tsx
@@ -0,0 +1,33 @@
+"use client";
+import React, { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import Textarea from "@/components/ui/textarea";
+
+export default function TextareaTestPage() {
+  const [message, setMessage] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    alert(`Submitted text: ${message}`);
+  };
+
+  return (
+    <div className="min-h-screen p-8">
+      <div className="mx-auto my-5 flex w-full max-w-lg flex-col items-center justify-center">
+        <form onSubmit={handleSubmit} className="w-full rounded-md border p-4">
+          <Textarea
+            name="message"
+            rows={3}
+            value={message}
+            setValue={setMessage}
+          />
+          <Button type="submit" className="mx-auto mt-4">
+            Submit
+          </Button>
+        </form>
+        <p className="mt-4">Current value message: {message}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/ui/textarea.tsx b/client/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..0ca4649
--- /dev/null
+++ b/client/src/components/ui/textarea.tsx
@@ -0,0 +1,48 @@
+"use client";
+import React, { useState } from "react";
+
+interface TextareaProps {
+  id?: string;
+  name: string;
+  label?: string;
+  placeholder?: string;
+  rows?: number;
+  value: string;
+  setValue: (value: string) => void;
+}
+
+// Use to capitalize the first letter of name as label placeholder if not passed
+const capitalizeFirstLetter = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+};
+
+const Textarea: React.FC<TextareaProps> = ({
+  id,
+  name,
+  label,
+  placeholder,
+  rows,
+  value,
+  setValue,
+}) => {
+  return (
+    <>
+      <label htmlFor={name} className="body mb-1 block">
+        {label ? label : capitalizeFirstLetter(name)}
+      </label>
+      <div className="w-full rounded-md border border-[hsl(var(--border))] bg-background shadow-[0_4px_0_0_#D1D5DB]">
+        <textarea
+          id={id ? id : name}
+          name={name}
+          placeholder={placeholder ? placeholder : capitalizeFirstLetter(name)}
+          rows={rows ? rows : 4}
+          className="body w-full bg-transparent px-3 py-2 outline-none placeholder:text-[hsl(var(--input))]"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </div>
+    </>
+  );
+};
+
+export default Textarea;

From 625906ef7c56d16971c302754ee6356b2c190bd9 Mon Sep 17 00:00:00 2001
From: "Yingtong Wu (Eden)" <EdenWuyt@gmail.com>
Date: Tue, 2 Dec 2025 08:27:52 +0000
Subject: [PATCH 2/5] Change label and placeholder styles.

---
 client/src/components/ui/textarea.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ui/textarea.tsx b/client/src/components/ui/textarea.tsx
index 0ca4649..dcbd5ac 100644
--- a/client/src/components/ui/textarea.tsx
+++ b/client/src/components/ui/textarea.tsx
@@ -27,7 +27,7 @@ const Textarea: React.FC<TextareaProps> = ({
 }) => {
   return (
     <>
-      <label htmlFor={name} className="body mb-1 block">
+      <label htmlFor={name} className="body-sm-bold mb-1 block">
         {label ? label : capitalizeFirstLetter(name)}
       </label>
       <div className="w-full rounded-md border border-[hsl(var(--border))] bg-background shadow-[0_4px_0_0_#D1D5DB]">
@@ -36,7 +36,7 @@ const Textarea: React.FC<TextareaProps> = ({
           name={name}
           placeholder={placeholder ? placeholder : capitalizeFirstLetter(name)}
           rows={rows ? rows : 4}
-          className="body w-full bg-transparent px-3 py-2 outline-none placeholder:text-[hsl(var(--input))]"
+          className="body w-full bg-transparent px-3 py-2 outline-none placeholder:text-[var(--bloom-gray)]"
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />

From 58257ff873f306055e57db6aab702121b1c9b966 Mon Sep 17 00:00:00 2001
From: "Yingtong Wu (Eden)" <EdenWuyt@gmail.com>
Date: Tue, 2 Dec 2025 08:47:00 +0000
Subject: [PATCH 3/5] Add documentation at the top of textarea.tsx.

---
 client/src/components/ui/textarea.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/client/src/components/ui/textarea.tsx b/client/src/components/ui/textarea.tsx
index dcbd5ac..56bc634 100644
--- a/client/src/components/ui/textarea.tsx
+++ b/client/src/components/ui/textarea.tsx
@@ -1,3 +1,18 @@
+// Usage:
+// <Textarea  id="componentIdentifier" // optional (defaults to name if not provided)
+//            name="fieldName"
+//            label="fieldLabel" // optional (defaults to name with first letter capitalized if not provided)
+//            placeholder="placeholderText" // optional (defaults to name with first letter capitalized if not provided)
+//            rows={4} // optional (defaults to 4 if not provided)
+//            value={fieldValue} // useState variable
+//            setValue={fieldSetterFunction} // useState setter function
+// />
+
+// Style (apart from border color: --border, other styles match InputField):
+// label: body-sm-bold, default text color
+// textarea: border color: --border, background color: --background, shadow: 0 4px 0 #D1D5DB
+// placeholder: text color: --bloom-gray
+
 "use client";
 import React, { useState } from "react";
 

From b16abb171453aa05765f94a20349b1b008672af1 Mon Sep 17 00:00:00 2001
From: "Yingtong Wu (Eden)" <EdenWuyt@gmail.com>
Date: Thu, 4 Dec 2025 17:14:54 +0800
Subject: [PATCH 4/5] Fix naming consistency issues. Add optional required and
 multiple classNames props to allow customization flexibility.

---
 client/src/app/test/textarea/page.tsx | 20 ++++++++--
 client/src/components/ui/textarea.tsx | 54 +++++++++++++++++++++++----
 2 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/client/src/app/test/textarea/page.tsx b/client/src/app/test/textarea/page.tsx
index d19fa16..6ca56f1 100644
--- a/client/src/app/test/textarea/page.tsx
+++ b/client/src/app/test/textarea/page.tsx
@@ -16,12 +16,26 @@ export default function TextareaTestPage() {
     <div className="min-h-screen p-8">
       <div className="mx-auto my-5 flex w-full max-w-lg flex-col items-center justify-center">
         <form onSubmit={handleSubmit} className="w-full rounded-md border p-4">
-          <Textarea
+          <Textarea // basic textarea
             name="message"
-            rows={3}
             value={message}
-            setValue={setMessage}
+            onChange={setMessage}
           />
+          {/* <Textarea           // with customization
+            id="message"
+            name="message"
+            label="Additional message"
+            placeholder="This is an textarea with customization"
+            rows={6}
+            value={message}
+            onChange={setMessage}
+            required={true}
+            requiredText=" (required)"
+            labelClassName="text-blue-800 text-center"
+            requiredTextClassName="text-purple-600"
+            divClassName="w-[90%] mx-auto bg-green-100"
+            textareaClassName="bg-green-100 placeholder:text-gray-600"
+          /> */}
           <Button type="submit" className="mx-auto mt-4">
             Submit
           </Button>
diff --git a/client/src/components/ui/textarea.tsx b/client/src/components/ui/textarea.tsx
index 56bc634..3ae4b24 100644
--- a/client/src/components/ui/textarea.tsx
+++ b/client/src/components/ui/textarea.tsx
@@ -5,7 +5,13 @@
 //            placeholder="placeholderText" // optional (defaults to name with first letter capitalized if not provided)
 //            rows={4} // optional (defaults to 4 if not provided)
 //            value={fieldValue} // useState variable
-//            setValue={fieldSetterFunction} // useState setter function
+//            onChange={fieldSetterFunction} // useState setter function
+//            required={true} // optional (if required, shows requiredText)
+//            requiredText="requiredText" // optional (default to asterisk)
+//            labelClassName="customLabelClass" // optional, additional classNames for label
+//            requiredTextClassName="customAsteriskClass" // optional, additional classNames for asterisk when required = true
+//            divClassName="customDivClass" // optional, additional classNames for div wrapping textarea
+//            textareaClassName="customTextareaClass" // optional, additional classNames for textarea
 // />
 
 // Style (apart from border color: --border, other styles match InputField):
@@ -14,7 +20,9 @@
 // placeholder: text color: --bloom-gray
 
 "use client";
-import React, { useState } from "react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
 
 interface TextareaProps {
   id?: string;
@@ -23,7 +31,13 @@ interface TextareaProps {
   placeholder?: string;
   rows?: number;
   value: string;
-  setValue: (value: string) => void;
+  onChange: (value: string) => void;
+  required?: boolean;
+  requiredText?: string;
+  labelClassName?: string;
+  requiredTextClassName?: string;
+  divClassName?: string;
+  textareaClassName?: string;
 }
 
 // Use to capitalize the first letter of name as label placeholder if not passed
@@ -38,22 +52,46 @@ const Textarea: React.FC<TextareaProps> = ({
   placeholder,
   rows,
   value,
-  setValue,
+  onChange,
+  required,
+  requiredText,
+  labelClassName,
+  requiredTextClassName,
+  divClassName,
+  textareaClassName,
 }) => {
   return (
     <>
-      <label htmlFor={name} className="body-sm-bold mb-1 block">
+      <label
+        htmlFor={name}
+        className={cn("body-sm-bold mb-1 block", labelClassName)}
+      >
         {label ? label : capitalizeFirstLetter(name)}
+        {required && (
+          <span
+            className={cn("text-[var(--bloom-red)]", requiredTextClassName)}
+          >
+            {requiredText ? requiredText : "*"}
+          </span>
+        )}
       </label>
-      <div className="w-full rounded-md border border-[hsl(var(--border))] bg-background shadow-[0_4px_0_0_#D1D5DB]">
+      <div
+        className={cn(
+          "w-full rounded-md border border-[hsl(var(--border))] bg-background shadow-[0_4px_0_0_#D1D5DB]",
+          divClassName,
+        )}
+      >
         <textarea
           id={id ? id : name}
           name={name}
           placeholder={placeholder ? placeholder : capitalizeFirstLetter(name)}
           rows={rows ? rows : 4}
-          className="body w-full bg-transparent px-3 py-2 outline-none placeholder:text-[var(--bloom-gray)]"
+          className={cn(
+            "body w-full bg-transparent px-3 py-2 outline-none placeholder:text-[var(--bloom-gray)]",
+            textareaClassName,
+          )}
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={(e) => onChange(e.target.value)}
         />
       </div>
     </>

From fd23ac7b2400bd1733a6610c45f98520283ce2f8 Mon Sep 17 00:00:00 2001
From: "Yingtong Wu (Eden)" <EdenWuyt@gmail.com>
Date: Thu, 4 Dec 2025 19:20:14 +0800
Subject: [PATCH 5/5] Perform requested change in terms of styling and
 customization. Update test and documentation.

---
 client/src/app/test/textarea/page.tsx |  6 +--
 client/src/components/ui/textarea.tsx | 61 ++++++++-------------------
 2 files changed, 18 insertions(+), 49 deletions(-)

diff --git a/client/src/app/test/textarea/page.tsx b/client/src/app/test/textarea/page.tsx
index 6ca56f1..013d8c0 100644
--- a/client/src/app/test/textarea/page.tsx
+++ b/client/src/app/test/textarea/page.tsx
@@ -30,11 +30,7 @@ export default function TextareaTestPage() {
             value={message}
             onChange={setMessage}
             required={true}
-            requiredText=" (required)"
-            labelClassName="text-blue-800 text-center"
-            requiredTextClassName="text-purple-600"
-            divClassName="w-[90%] mx-auto bg-green-100"
-            textareaClassName="bg-green-100 placeholder:text-gray-600"
+            className="bg-green-100 placeholder:text-red-600 w-[90%] bg-green-100"
           /> */}
           <Button type="submit" className="mx-auto mt-4">
             Submit
diff --git a/client/src/components/ui/textarea.tsx b/client/src/components/ui/textarea.tsx
index 3ae4b24..0827861 100644
--- a/client/src/components/ui/textarea.tsx
+++ b/client/src/components/ui/textarea.tsx
@@ -6,12 +6,8 @@
 //            rows={4} // optional (defaults to 4 if not provided)
 //            value={fieldValue} // useState variable
 //            onChange={fieldSetterFunction} // useState setter function
-//            required={true} // optional (if required, shows requiredText)
-//            requiredText="requiredText" // optional (default to asterisk)
-//            labelClassName="customLabelClass" // optional, additional classNames for label
-//            requiredTextClassName="customAsteriskClass" // optional, additional classNames for asterisk when required = true
-//            divClassName="customDivClass" // optional, additional classNames for div wrapping textarea
-//            textareaClassName="customTextareaClass" // optional, additional classNames for textarea
+//            required={true} // optional (if required, shows asterisk)
+//            className="customTextareaClass" // optional, additional classNames for textarea
 // />
 
 // Style (apart from border color: --border, other styles match InputField):
@@ -33,11 +29,7 @@ interface TextareaProps {
   value: string;
   onChange: (value: string) => void;
   required?: boolean;
-  requiredText?: string;
-  labelClassName?: string;
-  requiredTextClassName?: string;
-  divClassName?: string;
-  textareaClassName?: string;
+  className?: string;
 }
 
 // Use to capitalize the first letter of name as label placeholder if not passed
@@ -54,46 +46,27 @@ const Textarea: React.FC<TextareaProps> = ({
   value,
   onChange,
   required,
-  requiredText,
-  labelClassName,
-  requiredTextClassName,
-  divClassName,
-  textareaClassName,
+  className,
 }) => {
   return (
     <>
-      <label
-        htmlFor={name}
-        className={cn("body-sm-bold mb-1 block", labelClassName)}
-      >
+      <label htmlFor={name} className={"body-sm-bold mb-1 block"}>
         {label ? label : capitalizeFirstLetter(name)}
-        {required && (
-          <span
-            className={cn("text-[var(--bloom-red)]", requiredTextClassName)}
-          >
-            {requiredText ? requiredText : "*"}
-          </span>
-        )}
+        {required && <span className={"text-[var(--bloom-red)]"}> *</span>}
       </label>
-      <div
+      <textarea
+        id={id ? id : name}
+        name={name}
+        placeholder={placeholder ? placeholder : capitalizeFirstLetter(name)}
+        rows={rows ? rows : 4}
         className={cn(
-          "w-full rounded-md border border-[hsl(var(--border))] bg-background shadow-[0_4px_0_0_#D1D5DB]",
-          divClassName,
+          "w-full rounded-md border border-[hsl(var(--border))] bg-background shadow-[0_4px_0_0_#D1D5DB] outline-none",
+          "body px-3 py-2 placeholder:text-bloom-gray",
+          className,
         )}
-      >
-        <textarea
-          id={id ? id : name}
-          name={name}
-          placeholder={placeholder ? placeholder : capitalizeFirstLetter(name)}
-          rows={rows ? rows : 4}
-          className={cn(
-            "body w-full bg-transparent px-3 py-2 outline-none placeholder:text-[var(--bloom-gray)]",
-            textareaClassName,
-          )}
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-        />
-      </div>
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
     </>
   );
 };