[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/dropdowns/combo-box.tsx

@@ -17,7 +17,7 @@ type Props = {
   children: ReactNode;
 };
 
-const ComboDropDown = forwardRef((props: Props, ref) => {
+const ComboDropDown = forwardRef(function ComboDropDown(props: Props, ref) {
   const { button, renderByDefault = true, children, ...rest } = props;
 
   const dropDownButtonRef = useRef<HTMLDivElement | null>(null);

packages/ui/src/dropdowns/context-menu/item.tsx

@@ -14,7 +14,7 @@ type ContextMenuItemProps = {
   item: TContextMenuItem;
 };
 
-export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
+export function ContextMenuItem(props: ContextMenuItemProps) {
   const { handleActiveItem, handleClose, isActive, item } = props;
 
   // Nested menu state
@@ -243,4 +243,4 @@ export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
       )}
     </>
   );
-};
+}

packages/ui/src/dropdowns/context-menu/root.tsx

@@ -28,7 +28,7 @@ interface PortalProps {
   container?: Element | null;
 }
 
-export const Portal: React.FC<PortalProps> = ({ children, container }) => {
+export function Portal({ children, container }: PortalProps) {
   const [mounted, setMounted] = React.useState(false);
 
   React.useEffect(() => {
@@ -42,7 +42,7 @@ export const Portal: React.FC<PortalProps> = ({ children, container }) => {
 
   const targetContainer = container || document.body;
   return ReactDOM.createPortal(children, targetContainer);
-};
+}
 
 // Context for managing nested menus
 export const ContextMenuContext = React.createContext<{
@@ -57,7 +57,7 @@ type ContextMenuProps = {
   portalContainer?: Element | null;
 };
 
-const ContextMenuWithoutPortal: React.FC<ContextMenuProps> = (props) => {
+function ContextMenuWithoutPortal(props: ContextMenuProps) {
   const { parentRef, items, portalContainer } = props;
   // states
   const [isOpen, setIsOpen] = useState(false);
@@ -227,11 +227,11 @@ const ContextMenuWithoutPortal: React.FC<ContextMenuProps> = (props) => {
       </div>
     </div>
   );
-};
+}
 
-export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
+export function ContextMenu(props: ContextMenuProps) {
   let contextMenu = <ContextMenuWithoutPortal {...props} />;
   const portal = document.querySelector("#context-menu-portal");
   if (portal) contextMenu = ReactDOM.createPortal(contextMenu, portal);
   return contextMenu;
-};
+}

packages/ui/src/dropdowns/custom-menu.tsx

@@ -25,7 +25,7 @@ interface PortalProps {
   asChild?: boolean;
 }
 
-const Portal: React.FC<PortalProps> = ({ children, container, asChild = false }) => {
+function Portal({ children, container, asChild = false }: PortalProps) {
   const [mounted, setMounted] = React.useState(false);
 
   React.useEffect(() => {
@@ -44,7 +44,7 @@ const Portal: React.FC<PortalProps> = ({ children, container, asChild = false })
   }
 
   return ReactDOM.createPortal(<div data-radix-portal="">{children}</div>, targetContainer);
-};
+}
 
 // Context for main menu to communicate with submenus
 const MenuContext = React.createContext<{
@@ -52,7 +52,7 @@ const MenuContext = React.createContext<{
   registerSubmenu: (closeSubmenu: () => void) => () => void;
 } | null>(null);
 
-const CustomMenu = (props: ICustomMenuDropdownProps) => {
+function CustomMenu(props: ICustomMenuDropdownProps) {
   const {
     ariaLabel,
     buttonClassName = "",
@@ -295,7 +295,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
       )}
     </Menu>
   );
-};
+}
 
 // SubMenu context for closing submenu from nested items
 const SubMenuContext = React.createContext<{ closeSubmenu: () => void } | null>(null);
@@ -304,7 +304,7 @@ const SubMenuContext = React.createContext<{ closeSubmenu: () => void } | null>(
 const useSubMenu = () => React.useContext(SubMenuContext);
 
 // SubMenu implementation
-const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
+function SubMenu(props: ICustomSubMenuProps) {
   const {
     children,
     trigger,
@@ -447,9 +447,9 @@ const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
       )}
     </div>
   );
-};
+}
 
-const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
+function MenuItem(props: ICustomMenuItemProps) {
   const { children, disabled = false, onClick, className } = props;
   const submenuContext = useSubMenu();
 
@@ -479,9 +479,9 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
       )}
     </Menu.Item>
   );
-};
+}
 
-const SubMenuTrigger: React.FC<ICustomSubMenuTriggerProps> = (props) => {
+function SubMenuTrigger(props: ICustomSubMenuTriggerProps) {
   const { children, disabled = false, className } = props;
 
   return (
@@ -505,9 +505,9 @@ const SubMenuTrigger: React.FC<ICustomSubMenuTriggerProps> = (props) => {
       )}
     </Menu.Item>
   );
-};
+}
 
-const SubMenuContent: React.FC<ICustomSubMenuContentProps> = (props) => {
+function SubMenuContent(props: ICustomSubMenuContentProps) {
   const { children, className } = props;
 
   return (
@@ -520,7 +520,7 @@ const SubMenuContent: React.FC<ICustomSubMenuContentProps> = (props) => {
       {children}
     </div>
   );
-};
+}
 
 // Add all components as static properties for external use
 CustomMenu.Portal = Portal;

packages/ui/src/dropdowns/custom-search-select.tsx

@@ -12,7 +12,7 @@ import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import { cn } from "../utils";
 import type { ICustomSearchSelectProps } from "./helper";
 
-export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
+export function CustomSearchSelect(props: ICustomSearchSelectProps) {
   const {
     customButtonClassName = "",
     buttonClassName = "",
@@ -223,4 +223,4 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
       }}
     </Combobox>
   );
-};
+}

packages/ui/src/dropdowns/custom-select.tsx

@@ -13,7 +13,7 @@ import { cn } from "../utils";
 // types
 import type { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
 
-const CustomSelect = (props: ICustomSelectProps) => {
+function CustomSelect(props: ICustomSelectProps) {
   const {
     customButtonClassName = "",
     buttonClassName = "",
@@ -131,9 +131,9 @@ const CustomSelect = (props: ICustomSelectProps) => {
         )}
     </Combobox>
   );
-};
+}
 
-const Option = (props: ICustomSelectItemProps) => {
+function Option(props: ICustomSelectItemProps) {
   const { children, value, className } = props;
   return (
     <Combobox.Option
@@ -156,7 +156,7 @@ const Option = (props: ICustomSelectItemProps) => {
       )}
     </Combobox.Option>
   );
-};
+}
 
 CustomSelect.Option = Option;