Merge pull request #48 from codersforcauses/issue-44-Add_Textarea_component

Issue 44 add textarea component

Author: EdenWuyt

client/src/app/test/textarea/page.tsx

@@ -0,0 +1,43 @@
+"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 // basic textarea
+            name="message"
+            value={message}
+            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}
+            className="bg-green-100 placeholder:text-red-600 w-[90%] bg-green-100"
+          /> */}
+          <Button type="submit" className="mx-auto mt-4">
+            Submit
+          </Button>
+        </form>
+        <p className="mt-4">Current value message: {message}</p>
+      </div>
+    </div>
+  );
+}

client/src/components/ui/textarea.tsx

@@ -0,0 +1,74 @@
+// 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
+//            onChange={fieldSetterFunction} // useState setter function
+//            required={true} // optional (if required, shows asterisk)
+//            className="customTextareaClass" // optional, additional classNames for textarea
+// />
+
+// 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 from "react";
+
+import { cn } from "@/lib/utils";
+
+interface TextareaProps {
+  id?: string;
+  name: string;
+  label?: string;
+  placeholder?: string;
+  rows?: number;
+  value: string;
+  onChange: (value: string) => void;
+  required?: boolean;
+  className?: string;
+}
+
+// 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,
+  onChange,
+  required,
+  className,
+}) => {
+  return (
+    <>
+      <label htmlFor={name} className={"body-sm-bold mb-1 block"}>
+        {label ? label : capitalizeFirstLetter(name)}
+        {required && <span className={"text-[var(--bloom-red)]"}> *</span>}
+      </label>
+      <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] outline-none",
+          "body px-3 py-2 placeholder:text-bloom-gray",
+          className,
+        )}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </>
+  );
+};
+
+export default Textarea;