feat(FE-Storyless): update UI form UI repo

src/components/input/TextArea.tsx

@@ -8,6 +8,7 @@ export interface TextAreaProps {
   label?: string;
   bottomLabel?: string;
   name: string;
+  rows?: number;
   value?: string | number;
   placeholder?: string;
   className?: {
@@ -23,11 +24,8 @@ export interface TextAreaProps {
   required?: boolean;
   isLoading?: boolean;
   errorMessage?: string;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
-  rows?: number;
 }
 
 const TextArea = ({
@@ -35,20 +33,18 @@ const TextArea = ({
   bottomLabel,
   name,
   value,
+  rows = 3,
   placeholder,
   className,
   isError,
   isValid,
   errorMessage,
-  startAdornment,
-  endAdornment,
   disabled = false,
   required = false,
   onChange,
   onBlur,
   readOnly = false,
   isLoading = false,
-  rows = 3,
 }: TextAreaProps) => {
   return (
     <div
@@ -79,35 +75,34 @@ const TextArea = ({
           )}
         </label>
       )}
-      {startAdornment && startAdornment}
 
-      <textarea
-        className={cn(
-          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
-          {
-            'border-error': isError,
-            'border-success!': isValid,
-          },
-          className?.inputWrapper
+      <div className='relative size-full'>
+        <textarea
+          className={cn(
+            'textarea h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
+            {
+              'border-error': isError,
+              'border-success!': isValid,
+            },
+            className?.inputWrapper
+          )}
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          rows={rows}
+          onChange={onChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          readOnly={readOnly}
+        />
+
+        {isLoading && (
+          <div className='absolute right-3 bottom-3 z-10'>
+            {isLoading && <span className='loading loading-spinner' />}
+          </div>
         )}
-        id={name}
-        name={name}
-        placeholder={placeholder}
-        value={value}
-        rows={rows}
-        onChange={onChange}
-        onBlur={onBlur}
-        disabled={disabled}
-        readOnly={readOnly}
-      />
-
-      {(isLoading || endAdornment) && (
-        <div className='flex flex-row gap-2'>
-          {isLoading && <span className='loading loading-spinner' />}
-
-          {endAdornment && endAdornment}
-        </div>
-      )}
+      </div>
 
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>