From 963e3c465cfacfdbf1c8c0209533db63b231b936 Mon Sep 17 00:00:00 2001
From: Suraj Ramchandran <30753067+Suraj-Ram@users.noreply.github.com>
Date: Sun, 27 Oct 2024 16:22:20 -0400
Subject: [PATCH] Added auto resize textarea

---
 .../frontend/components/Sidebar/Sidebar.tsx   | 32 ++++++++++-
 packages/frontend/package.json                |  1 +
 yarn.lock                                     | 55 ++++++++++++++++++-
 3 files changed, 85 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/components/Sidebar/Sidebar.tsx b/packages/frontend/components/Sidebar/Sidebar.tsx
index 96244630c..7b40367da 100644
--- a/packages/frontend/components/Sidebar/Sidebar.tsx
+++ b/packages/frontend/components/Sidebar/Sidebar.tsx
@@ -8,6 +8,7 @@ import {
   Text,
   Textarea,
   VStack,
+  TextareaProps,
 } from "@chakra-ui/react";
 import { Image } from "@chakra-ui/react";
 import {
@@ -42,6 +43,9 @@ import { HelperToolTip } from "../Help";
 import NUPathSection from "./NUPathSection";
 import DropdownWarning from "./DropdownWarning";
 import { NUPathEnum } from "@graduate/common";
+import { forwardRef } from "react";
+
+import ResizeTextarea from "react-textarea-autosize";
 
 export enum SidebarValidationStatus {
   Loading = "Loading",
@@ -305,6 +309,25 @@ export const NoMajorSidebar: React.FC<NoMajorSidebarProps> = ({
   );
 };
 
+// Still a bit buggy
+const AutoResizeTextarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    return (
+      <Textarea
+        minH="unset"
+        w="100%"
+        ref={ref}
+        minRows={4}
+        as={ResizeTextarea}
+        maxRows={10}
+        {...props}
+      />
+    );
+  }
+);
+
+AutoResizeTextarea.displayName = "AutoResizeTextarea";
+
 interface SidebarContainerProps {
   title: string;
   subtitle?: string;
@@ -389,7 +412,7 @@ const SidebarContainer: React.FC<PropsWithChildren<SidebarContainerProps>> = ({
       </Box>
       {children}
 
-      <Box backgroundColor="white" pt="6" pb="3" px="3">
+      <Box backgroundColor="white" pt="6" pb="6" px="3">
         <VStack align="left" px="4">
           <Flex mb="3">
             <Image src="/sandbox_logo.svg" alt="sandbox logo" mr="2" />
@@ -404,7 +427,12 @@ const SidebarContainer: React.FC<PropsWithChildren<SidebarContainerProps>> = ({
           <Text color="primary.blue.dark.main" fontSize="sm" fontWeight="bold">
             Notes
           </Text>
-          <Textarea placeholder="notes here!" resize="vertical" />
+          {/* <Textarea placeholder="notes here!" resize="vertical" height="initial" /> */}
+          <AutoResizeTextarea
+            placeholder="notes here!"
+            resize="vertical"
+            height="initial"
+          />
         </VStack>
       </Box>
     </Box>
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 65887e3b1..d016dd291 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -26,6 +26,7 @@
     "react-error-boundary": "^3.1.4",
     "react-hook-form": "^7.33.0",
     "react-select": "^5.7.2",
+    "react-textarea-autosize": "^8.5.4",
     "react-toastify": "^8.2.0",
     "swr": "^1.3.0"
   },
diff --git a/yarn.lock b/yarn.lock
index 99d7e6a41..9d7dd2b49 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1527,6 +1527,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.20.13":
+  version: 7.25.7
+  resolution: "@babel/runtime@npm:7.25.7"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: 1d6133ed1cf1de1533cfe84a4a8f94525271a0d93f6af4f2cdae14884ec3c8a7148664ddf7fd2a14f82cc4485904a1761821a55875ad241c8b4034e95e7134b2
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.18.10, @babel/template@npm:^7.3.3":
   version: 7.18.10
   resolution: "@babel/template@npm:7.18.10"
@@ -3173,6 +3182,7 @@ __metadata:
     react-error-boundary: ^3.1.4
     react-hook-form: ^7.33.0
     react-select: ^5.7.2
+    react-textarea-autosize: ^8.5.4
     react-toastify: ^8.2.0
     swr: ^1.3.0
     typescript: 4.6.3
@@ -11763,6 +11773,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-textarea-autosize@npm:^8.5.4":
+  version: 8.5.4
+  resolution: "react-textarea-autosize@npm:8.5.4"
+  dependencies:
+    "@babel/runtime": ^7.20.13
+    use-composed-ref: ^1.3.0
+    use-latest: ^1.2.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: a28f84e17505423fa2002b99bb17cb7396ac6fb18f81621af87d246abc6529caa0172f9a6cbf01e87e1f0b60fc50a1aa2e19bc8d09019e5f0f8560dffa1bb720
+  languageName: node
+  linkType: hard
+
 "react-toastify@npm:^8.2.0":
   version: 8.2.0
   resolution: "react-toastify@npm:8.2.0"
@@ -11903,6 +11926,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regenerator-runtime@npm:^0.14.0":
+  version: 0.14.1
+  resolution: "regenerator-runtime@npm:0.14.1"
+  checksum: 9f57c93277b5585d3c83b0cf76be47b473ae8c6d9142a46ce8b0291a04bb2cf902059f0f8445dcabb3fb7378e5fe4bb4ea1e008876343d42e46d3b484534ce38
+  languageName: node
+  linkType: hard
+
 "regenerator-transform@npm:^0.15.0":
   version: 0.15.0
   resolution: "regenerator-transform@npm:0.15.0"
@@ -13567,7 +13597,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-isomorphic-layout-effect@npm:^1.1.2":
+"use-composed-ref@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "use-composed-ref@npm:1.3.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: f771cbadfdc91e03b7ab9eb32d0fc0cc647755711801bf507e891ad38c4bbc5f02b2509acadf9c965ec9c5f2f642fd33bdfdfb17b0873c4ad0a9b1f5e5e724bf
+  languageName: node
+  linkType: hard
+
+"use-isomorphic-layout-effect@npm:^1.1.1, use-isomorphic-layout-effect@npm:^1.1.2":
   version: 1.1.2
   resolution: "use-isomorphic-layout-effect@npm:1.1.2"
   peerDependencies:
@@ -13579,6 +13618,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-latest@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "use-latest@npm:1.2.1"
+  dependencies:
+    use-isomorphic-layout-effect: ^1.1.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: ed3f2ddddf6f21825e2ede4c2e0f0db8dcce5129802b69d1f0575fc1b42380436e8c76a6cd885d4e9aa8e292e60fb8b959c955f33c6a9123b83814a1a1875367
+  languageName: node
+  linkType: hard
+
 "use-sidecar@npm:^1.1.2":
   version: 1.1.2
   resolution: "use-sidecar@npm:1.1.2"