Padma t1

src/services/ui/src/components/Inputs/textarea.tsx

@@ -3,19 +3,37 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  charcount?: "simple" | "limited";
+  charcountstyling?: string;
+}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
+    const strLn = (typeof props?.value === "string" && props.value.length) || 0;
     return (
-      <textarea
-        className={cn(
-          "flex min-h-[60px] w-full rounded-sm border border-black bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
+      <>
+        <textarea
+          className={cn(
+            "flex min-h-[60px] w-full rounded-sm border border-black bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+        {props.charcount && (
+          <p
+            className={cn(
+              "text-right text-gray-500 pr-2 text-sm",
+              props.charcountstyling
+            )}
+          >{`${strLn}${
+            props.maxLength && props.charcount === "limited"
+              ? `/${props.maxLength}`
+              : ""
+          }`}</p>
         )}
-        ref={ref}
-        {...props}
-      />
+      </>
     );
   }
 );

src/services/ui/src/components/RHF/FieldArray.tsx

@@ -1,5 +1,5 @@
 import { FieldValues, useFieldArray } from "react-hook-form";
-import { Trash2 } from "lucide-react";
+import { Plus, Trash2 } from "lucide-react";
 
 import { RHFSlot } from "./Slot";
 import { Button, FormField } from "../Inputs";
@@ -60,15 +60,8 @@ export const RHFFieldArray = <TFields extends FieldValues>(
       })}
       <div className="flex items-center mt-2">
         <Button type="button" size="sm" onClick={onAppend} variant="outline">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            className="w-5 h-5 mr-2"
-          >
-            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
-          </svg>
-          New Row
+          <Plus className="h-5 w-5 mr-2" />
+          {props.appendText ?? "New Row"}
         </Button>
       </div>
     </div>

src/services/ui/src/components/RHF/Slot.tsx

@@ -29,7 +29,7 @@ import { format } from "date-fns";
 import { RHFFieldArray } from "./FieldArray";
 import { FieldGroup } from "./FieldGroup";
 import type { RHFSlotProps, RHFComponentMap, FormGroup } from "./types";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
 export const RHFSlot = <
   TFieldValues extends FieldValues = FieldValues,
@@ -86,6 +86,17 @@ export const RHFSlot = <
             {rhf === "Select" &&
               (() => {
                 const hops = props as RHFComponentMap["Select"];
+                const opts = useMemo(() => {
+                  if (hops.sort) {
+                    const sorted = hops.options.sort((a, b) =>
+                      a.label.localeCompare(b.label)
+                    );
+                    hops.sort === "descending" && sorted.reverse();
+                    return sorted;
+                  }
+                  return hops.options;
+                }, [hops.options, hops.sort]);
+
                 return (
                   <Select
                     {...hops}
@@ -96,7 +107,7 @@ export const RHFSlot = <
                       <SelectValue {...hops} />
                     </SelectTrigger>
                     <SelectContent className="overflow-auto max-h-60">
-                      {hops.options.map((OPT) => (
+                      {opts.map((OPT) => (
                         <SelectItem key={`OPT-${OPT.value}`} value={OPT.value}>
                           {OPT.label}
                         </SelectItem>
@@ -264,6 +275,7 @@ export const RHFSlot = <
                 name={name}
                 fields={rest.fields ?? []}
                 groupNamePrefix={groupNamePrefix}
+                {...(props as RHFComponentMap["FieldArray"])}
               />
             )}
 

src/services/ui/src/components/RHF/types.ts

@@ -48,15 +48,17 @@ export type RHFComponentMap = {
   };
   Textarea: TextareaProps;
   Switch: SwitchProps;
-  Select: SelectProps;
+  Select: SelectProps & { sort?: "ascending" | "descending" };
   Radio: RadioProps & {
     options: RHFOption[];
   };
   DatePicker: CalendarProps;
   Checkbox: {
     options: RHFOption[];
   };
-  FieldArray: unknown;
+  FieldArray: {
+    appendText?: string;
+  };
   FieldGroup: {
     appendText?: string;
     removeText?: string;
@@ -89,6 +91,7 @@ export type FieldArrayProps<
   name: TFieldArrayName;
   fields: RHFSlotProps[];
   groupNamePrefix?: string;
+  appendText?: string;
 };
 
 export type FieldGroupProps<