[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/dropdown/common/button.tsx

@@ -4,7 +4,7 @@ import React, { Fragment } from "react";
 import { cn } from "../../utils";
 import type { IMultiSelectDropdownButton, ISingleSelectDropdownButton } from "../dropdown";
 
-export const DropdownButton: React.FC<IMultiSelectDropdownButton | ISingleSelectDropdownButton> = (props) => {
+export function DropdownButton(props: IMultiSelectDropdownButton | ISingleSelectDropdownButton) {
   const {
     isOpen,
     buttonContent,
@@ -34,4 +34,4 @@ export const DropdownButton: React.FC<IMultiSelectDropdownButton | ISingleSelect
       </button>
     </Combobox.Button>
   );
-};
+}

packages/ui/src/dropdown/common/input-search.tsx

@@ -16,7 +16,7 @@ interface IInputSearch {
   isMobile: boolean;
 }
 
-export const InputSearch: FC<IInputSearch> = (props) => {
+export function InputSearch(props: IInputSearch) {
   const { isOpen, query, updateQuery, inputIcon, inputContainerClassName, inputClassName, inputPlaceholder, isMobile } =
     props;
 
@@ -58,4 +58,4 @@ export const InputSearch: FC<IInputSearch> = (props) => {
       />
     </div>
   );
-};
+}

packages/ui/src/dropdown/common/loader.tsx

@@ -1,10 +1,12 @@
 import { range } from "lodash-es";
 import React from "react";
 
-export const DropdownOptionsLoader = () => (
-  <div className="flex flex-col gap-1 animate-pulse">
-    {range(6).map((index) => (
-      <div key={index} className="flex h-[1.925rem] w-full rounded px-1 py-1.5 bg-custom-background-90" />
-    ))}
-  </div>
-);
+export function DropdownOptionsLoader() {
+  return (
+    <div className="flex flex-col gap-1 animate-pulse">
+      {range(6).map((index) => (
+        <div key={index} className="flex h-[1.925rem] w-full rounded px-1 py-1.5 bg-custom-background-90" />
+      ))}
+    </div>
+  );
+}

packages/ui/src/dropdown/common/options.tsx

@@ -8,7 +8,7 @@ import type { IMultiSelectDropdownOptions, ISingleSelectDropdownOptions } from "
 // components
 import { DropdownOptionsLoader, InputSearch } from ".";
 
-export const DropdownOptions: React.FC<IMultiSelectDropdownOptions | ISingleSelectDropdownOptions> = (props) => {
+export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSelectDropdownOptions) {
   const {
     isOpen,
     query,
@@ -88,4 +88,4 @@ export const DropdownOptions: React.FC<IMultiSelectDropdownOptions | ISingleSele
       </div>
     </>
   );
-};
+}

packages/ui/src/dropdown/multi-select.tsx

@@ -12,7 +12,7 @@ import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";
 import type { IMultiSelectDropdown } from "./dropdown";
 
-export const MultiSelectDropdown: FC<IMultiSelectDropdown> = (props) => {
+export function MultiSelectDropdown(props: IMultiSelectDropdown) {
   const {
     value,
     onChange,
@@ -165,4 +165,4 @@ export const MultiSelectDropdown: FC<IMultiSelectDropdown> = (props) => {
       )}
     </Combobox>
   );
-};
+}

packages/ui/src/dropdown/single-select.tsx

@@ -12,7 +12,7 @@ import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";
 import type { ISingleSelectDropdown } from "./dropdown";
 
-export const Dropdown: FC<ISingleSelectDropdown> = (props) => {
+export function Dropdown(props: ISingleSelectDropdown) {
   const {
     value,
     onChange,
@@ -165,4 +165,4 @@ export const Dropdown: FC<ISingleSelectDropdown> = (props) => {
       )}
     </Combobox>
   );
-};
+}