[WEB-5459] feat(codemods): add function declaration transformer with tests (#8137)

- Add jscodeshift-based codemod to convert arrow function components to function declarations
- Support React.FC, observer-wrapped, and forwardRef components
- Include comprehensive test suite covering edge cases
- Add npm script to run transformer across codebase
- Target only .tsx files in source directories, excluding node_modules and declaration files

* [WEB-5459] chore: updates after running codemod

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>

packages/ui/src/form-fields/checkbox.tsx

@@ -8,7 +8,7 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
   indeterminate?: boolean;
 }
 
-const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
+const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.ForwardedRef<HTMLInputElement>) {
   const {
     id,
     name,

packages/ui/src/form-fields/input-color-picker.tsx

@@ -19,7 +19,7 @@ export interface InputColorPickerProps {
   placeholder: string;
 }
 
-export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
+export function InputColorPicker(props: InputColorPickerProps) {
   const { value, hasError, onChange, name, className, style, placeholder } = props;
 
   const [referenceElement, setReferenceElement] = React.useState<HTMLButtonElement | null>(null);
@@ -111,4 +111,4 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
       </Popover>
     </div>
   );
-};
+}

packages/ui/src/form-fields/input.tsx

@@ -10,7 +10,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   autoComplete?: "on" | "off";
 }
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+const Input = React.forwardRef(function Input(props: InputProps, ref: React.ForwardedRef<HTMLInputElement>) {
   const {
     id,
     type,

packages/ui/src/form-fields/password/indicator.tsx

@@ -10,11 +10,11 @@ export interface PasswordStrengthIndicatorProps {
   isFocused?: boolean;
 }
 
-export const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps> = ({
+export function PasswordStrengthIndicator({
   password,
   showCriteria = true,
   isFocused = false,
-}) => {
+}: PasswordStrengthIndicatorProps) {
   const strength = getPasswordStrength(password);
   const criteria = getPasswordCriteria(password);
   const strengthInfo = getStrengthInfo(strength);
@@ -72,4 +72,4 @@ export const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps>
       )}
     </div>
   );
-};
+}

packages/ui/src/form-fields/password/password-input.tsx

@@ -13,7 +13,7 @@ interface PasswordInputProps {
   error?: boolean;
 }
 
-export const PasswordInput: React.FC<PasswordInputProps> = ({
+export function PasswordInput({
   id,
   value,
   onChange,
@@ -21,7 +21,7 @@ export const PasswordInput: React.FC<PasswordInputProps> = ({
   className,
   showToggle = true,
   error = false,
-}) => {
+}: PasswordInputProps) {
   const [showPassword, setShowPassword] = useState(false);
   return (
     <div className="relative">
@@ -66,4 +66,4 @@ export const PasswordInput: React.FC<PasswordInputProps> = ({
       )}
     </div>
   );
-};
+}

packages/ui/src/form-fields/root.tsx

@@ -8,11 +8,13 @@ interface LabelProps {
   className?: string;
 }
 
-export const Label: React.FC<LabelProps> = ({ htmlFor, children, className }) => (
-  <label htmlFor={htmlFor} className={cn("block text-sm font-medium text-custom-text-100", className)}>
-    {children}
-  </label>
-);
+export function Label({ htmlFor, children, className }: LabelProps) {
+  return (
+    <label htmlFor={htmlFor} className={cn("block text-sm font-medium text-custom-text-100", className)}>
+      {children}
+    </label>
+  );
+}
 
 // Reusable Form Field Component
 interface FormFieldProps {
@@ -23,15 +25,17 @@ interface FormFieldProps {
   optional?: boolean;
 }
 
-export const FormField: React.FC<FormFieldProps> = ({ label, htmlFor, children, className, optional = false }) => (
-  <div className={cn("flex flex-col gap-1.5", className)}>
-    <Label htmlFor={htmlFor}>
-      {label}
-      {optional && <span className="text-custom-text-400 text-sm"> (optional)</span>}
-    </Label>
-    {children}
-  </div>
-);
+export function FormField({ label, htmlFor, children, className, optional = false }: FormFieldProps) {
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      <Label htmlFor={htmlFor}>
+        {label}
+        {optional && <span className="text-custom-text-400 text-sm"> (optional)</span>}
+      </Label>
+      {children}
+    </div>
+  );
+}
 
 // Reusable Validation Message Component
 interface ValidationMessageProps {
@@ -40,17 +44,19 @@ interface ValidationMessageProps {
   className?: string;
 }
 
-export const ValidationMessage: React.FC<ValidationMessageProps> = ({ type, message, className }) => (
-  <p
-    className={cn(
-      "text-sm",
-      {
-        "text-red-500": type === "error",
-        "text-green-500": type === "success",
-      },
-      className
-    )}
-  >
-    {message}
-  </p>
-);
+export function ValidationMessage({ type, message, className }: ValidationMessageProps) {
+  return (
+    <p
+      className={cn(
+        "text-sm",
+        {
+          "text-red-500": type === "error",
+          "text-green-500": type === "success",
+        },
+        className
+      )}
+    >
+      {message}
+    </p>
+  );
+}

packages/ui/src/form-fields/textarea.tsx

@@ -11,7 +11,10 @@ export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextArea
   className?: string;
 }
 
-const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
+const TextArea = React.forwardRef(function TextArea(
+  props: TextAreaProps,
+  ref: React.ForwardedRef<HTMLTextAreaElement>
+) {
   const {
     id,
     name,