From d51f5157652ae45198fb7c6c2f3325e97f3d7c55 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 1 Aug 2024 11:41:39 -0400
Subject: [PATCH 1/3] feat: add text counter for textarea

---
 src/components/Textarea.tsx | 44 +++++++++++++++++++++++--------------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
index 1b7dedd..f419440 100644
--- a/src/components/Textarea.tsx
+++ b/src/components/Textarea.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import * as Form from "@radix-ui/react-form"
 
 interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -7,20 +7,30 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
 }
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ name, label, ...delegated }, ref) => (
-    <Form.Field name={name} className="flex flex-col gap-2">
-      <Form.Label>{label}</Form.Label>
-      <Form.Control asChild>
-        <textarea
-          rows={4}
-          className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full"
-          {...delegated}
-          ref={ref}
-        />
-      </Form.Control>
-      <Form.Message className="text-primary-300" match="valueMissing">
-        Please enter your {label}
-      </Form.Message>
-    </Form.Field>
-  )
+  ({ name, label, ...delegated }, ref) => {
+    const [characterCount, setCharacterCount] = useState(0)
+    const maxLength = 300
+
+    return (
+      <Form.Field name={name} className="relative flex flex-col gap-2">
+        <Form.Label>{label}</Form.Label>
+        <span className="px-2 py-1 text-xs text-neutral-300 rounded absolute top-9 right-1">
+          {characterCount}/{maxLength}
+        </span>
+        <Form.Control asChild>
+          <textarea
+            rows={4}
+            maxLength={maxLength}
+            className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full py-6"
+            {...delegated}
+            ref={ref}
+            onChange={(e) => setCharacterCount(e.target.value.length)}
+          />
+        </Form.Control>
+        <Form.Message className="text-primary-300" match="valueMissing">
+          Please enter your {label}
+        </Form.Message>
+      </Form.Field>
+    )
+  }
 )

From 784a807ece8fdc51434b4e956cd4b01819e230fb Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 1 Aug 2024 11:46:58 -0400
Subject: [PATCH 2/3] fix: input must be direct child of Form Control

otherwise the error messages won't display. divs moved to surround the form control elem
---
 src/components/Input.tsx    | 13 +++++++------
 src/components/Textarea.tsx |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index dc14ca1..1e097b5 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -14,13 +14,14 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <Form.Field name={name} className="flex flex-col gap-2">
         <Form.Label>{label}</Form.Label>
-        <Form.Control asChild>
-          <div className="flex items-center gap-2 bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5 focus-within:shadow-inner-focus">
-            <span className="text-neutral-300 w-5 h-5">{icon}</span>
+        <div className="flex items-center gap-2 bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5 focus-within:shadow-inner-focus">
+          {icon && <span className="text-neutral-300 w-5 h-5">{icon}</span>}
+
+          <Form.Control asChild>
             <input {...delegated} ref={ref} />
-          </div>
-        </Form.Control>
-        <Form.Message className="text-primary-300" match="valueMissing">
+          </Form.Control>
+        </div>
+        <Form.Message className="px-2 text-primary-300" match="valueMissing">
           Please enter your {label}
         </Form.Message>
         {match !== undefined && (
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
index f419440..2ead700 100644
--- a/src/components/Textarea.tsx
+++ b/src/components/Textarea.tsx
@@ -27,7 +27,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             onChange={(e) => setCharacterCount(e.target.value.length)}
           />
         </Form.Control>
-        <Form.Message className="text-primary-300" match="valueMissing">
+        <Form.Message className="text-primary-300 px-2" match="valueMissing">
           Please enter your {label}
         </Form.Message>
       </Form.Field>

From 8df1dfc6c440ebf211d0d35196f40185bad229f0 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 1 Aug 2024 11:47:07 -0400
Subject: [PATCH 3/3] chore: deps update

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7a23fb6..4821c21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10351,9 +10351,9 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
     },
     "node_modules/fast-xml-parser": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.4.0.tgz",
-      "integrity": "sha512-kLY3jFlwIYwBNDojclKsNAC12sfD6NwW74QB2CoNGPvtVxjliYehVunB3HYyNi+n4Tt1dAcgwYvmKF/Z18flqg==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.4.1.tgz",
+      "integrity": "sha512-xkjOecfnKGkSsOwtZ5Pz7Us/T6mrbPQrq0nh+aCO5V9nk5NLWmasAHumTKjiPJPWANe+kAZ84Jc8ooJkzZ88Sw==",
       "funding": [
         {
           "type": "github",