From e7994d264419dfd00c8126de43da553db90c8e34 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Mon, 16 Dec 2024 21:46:06 +0000
Subject: [PATCH] feat(textarea): implement TextareaAutosize component and
 update imports across the application

---
 src/components/Elements/AddModal/AddModal.jsx |  5 +-
 .../TextareaAutosize/TextareaAutosize.jsx     | 73 +++++++++++++++++++
 .../Form/Settings/TextareaAutosize/index.jsx  |  1 +
 src/components/Form/Settings/index.jsx        |  1 +
 .../greeting/options/GreetingOptions.jsx      |  4 +-
 src/features/navbar/components/Notes.jsx      |  2 +-
 6 files changed, 80 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Form/Settings/TextareaAutosize/TextareaAutosize.jsx
 create mode 100644 src/components/Form/Settings/TextareaAutosize/index.jsx

diff --git a/src/components/Elements/AddModal/AddModal.jsx b/src/components/Elements/AddModal/AddModal.jsx
index 4be74446..cf56a119 100644
--- a/src/components/Elements/AddModal/AddModal.jsx
+++ b/src/components/Elements/AddModal/AddModal.jsx
@@ -1,10 +1,9 @@
 import variables from 'config/variables';
 
 import { useState, memo } from 'react';
-import { TextareaAutosize } from '@mui/material';
 import { MdAddLink, MdClose } from 'react-icons/md';
-import { Tooltip } from 'components/Elements';
-import { Button } from 'components/Elements';
+import { Tooltip, Button } from 'components/Elements';
+import { TextareaAutosize } from 'components/Form';
 
 function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, editLink }) {
   const [name, setName] = useState(edit ? editData.name : '');
diff --git a/src/components/Form/Settings/TextareaAutosize/TextareaAutosize.jsx b/src/components/Form/Settings/TextareaAutosize/TextareaAutosize.jsx
new file mode 100644
index 00000000..846a618e
--- /dev/null
+++ b/src/components/Form/Settings/TextareaAutosize/TextareaAutosize.jsx
@@ -0,0 +1,73 @@
+import { useEffect, useRef } from 'react';
+
+const TextareaAutosize = ({
+  value,
+  onChange,
+  placeholder,
+  minRows = 1,
+  maxRows = 10,
+  className = '',
+  style = {},
+  disabled = false,
+  error = false,
+  id,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedby,
+}) => {
+  const textareaRef = useRef(null);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const resizeTextarea = () => {
+      textarea.style.height = 'auto';
+      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight);
+      const minHeight = lineHeight * minRows;
+      const maxHeight = lineHeight * maxRows;
+      const newHeight = Math.max(minHeight, Math.min(textarea.scrollHeight, maxHeight));
+      textarea.style.height = `${newHeight}px`;
+    };
+
+    resizeTextarea();
+  }, [value, minRows, maxRows]);
+
+  return (
+    <textarea
+      ref={textareaRef}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      disabled={disabled}
+      id={id}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedby}
+      aria-invalid={error}
+      className={`
+        resize-none
+        overflow-hidden
+        w-full
+        bg-transparent
+        border-0 
+        border-b
+        border-gray-200
+        hover:border-gray-300
+        focus:border-blue-500
+        focus:ring-0
+        outline-none
+        transition-colors
+        text-sm
+        p-5
+        ${disabled ? 'text-gray-500 cursor-not-allowed' : 'text-gray-900'}
+        ${error ? 'border-red-500' : ''}
+        ${className}
+      `}
+      style={{
+        padding: '10px',
+        ...style,
+      }}
+    />
+  );
+};
+
+export { TextareaAutosize, TextareaAutosize as default };
diff --git a/src/components/Form/Settings/TextareaAutosize/index.jsx b/src/components/Form/Settings/TextareaAutosize/index.jsx
new file mode 100644
index 00000000..2c7184d1
--- /dev/null
+++ b/src/components/Form/Settings/TextareaAutosize/index.jsx
@@ -0,0 +1 @@
+export * from './TextareaAutosize';
diff --git a/src/components/Form/Settings/index.jsx b/src/components/Form/Settings/index.jsx
index 75eddedb..b561570c 100644
--- a/src/components/Form/Settings/index.jsx
+++ b/src/components/Form/Settings/index.jsx
@@ -6,3 +6,4 @@ export * from './Radio';
 export * from './Slider';
 export * from './Switch';
 export * from './Text';
+export * from './TextareaAutosize';
diff --git a/src/features/greeting/options/GreetingOptions.jsx b/src/features/greeting/options/GreetingOptions.jsx
index 26870f3c..95c57f5a 100644
--- a/src/features/greeting/options/GreetingOptions.jsx
+++ b/src/features/greeting/options/GreetingOptions.jsx
@@ -9,8 +9,7 @@ import {
   PreferencesWrapper,
   Section,
 } from 'components/Layout/Settings';
-import { Checkbox, Switch, Text } from 'components/Form/Settings';
-import { TextareaAutosize } from '@mui/material';
+import { Checkbox, Switch, Text, TextareaAutosize } from 'components/Form/Settings';
 import { Button } from 'components/Elements';
 import { toast } from 'react-toastify';
 import { useTab } from 'components/Elements/MainModal/backend/TabContext';
@@ -200,6 +199,7 @@ const GreetingOptions = () => {
                   </span>
                   <TextareaAutosize
                     value={event.name}
+                    minRows={1}
                     placeholder={variables.getMessage(`${GREETING_SECTION}.event_name`)}
                     onChange={(e) => {
                       const updatedEvent = { ...event, name: e.target.value };
diff --git a/src/features/navbar/components/Notes.jsx b/src/features/navbar/components/Notes.jsx
index 5ce11560..69e46808 100644
--- a/src/features/navbar/components/Notes.jsx
+++ b/src/features/navbar/components/Notes.jsx
@@ -3,9 +3,9 @@ import { PureComponent, memo, useState } from 'react';
 
 import { MdContentCopy, MdAssignment, MdPushPin, MdDownload } from 'react-icons/md';
 import { useFloating, shift } from '@floating-ui/react-dom';
-import TextareaAutosize from '@mui/material/TextareaAutosize';
 import { toast } from 'react-toastify';
 import { Tooltip } from 'components/Elements';
+import { TextareaAutosize } from 'components/Form/Settings';
 
 import { saveFile } from 'utils/saveFile';
 import EventBus from 'utils/eventbus';