[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>

apps/web/core/components/dropdowns/buttons.tsx

@@ -29,7 +29,7 @@ type ButtonProps = {
   renderToolTipByDefault?: boolean;
 };
 
-export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
+export function DropdownButton(props: DropdownButtonProps) {
   const {
     children,
     className,
@@ -58,9 +58,9 @@ export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
       {children}
     </ButtonToRender>
   );
-};
+}
 
-const BorderButton: React.FC<ButtonProps> = (props) => {
+function BorderButton(props: ButtonProps) {
   const { children, className, isActive, tooltipContent, renderToolTipByDefault, tooltipHeading, showTooltip } = props;
   const { isMobile } = usePlatformOS();
 
@@ -83,9 +83,9 @@ const BorderButton: React.FC<ButtonProps> = (props) => {
       </div>
     </Tooltip>
   );
-};
+}
 
-const BackgroundButton: React.FC<ButtonProps> = (props) => {
+function BackgroundButton(props: ButtonProps) {
   const { children, className, tooltipContent, tooltipHeading, renderToolTipByDefault, showTooltip } = props;
   const { isMobile } = usePlatformOS();
   return (
@@ -106,9 +106,9 @@ const BackgroundButton: React.FC<ButtonProps> = (props) => {
       </div>
     </Tooltip>
   );
-};
+}
 
-const TransparentButton: React.FC<ButtonProps> = (props) => {
+function TransparentButton(props: ButtonProps) {
   const { children, className, isActive, tooltipContent, tooltipHeading, renderToolTipByDefault, showTooltip } = props;
   const { isMobile } = usePlatformOS();
   return (
@@ -130,4 +130,4 @@ const TransparentButton: React.FC<ButtonProps> = (props) => {
       </div>
     </Tooltip>
   );
-};
+}

apps/web/core/components/dropdowns/cycle/cycle-options.tsx

@@ -37,7 +37,7 @@ type CycleOptionsProps = {
   currentCycleId?: string;
 };
 
-export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
+export const CycleOptions = observer(function CycleOptions(props: CycleOptionsProps) {
   const { projectId, isOpen, referenceElement, placement, canRemoveCycle, currentCycleId } = props;
   // i18n
   const { t } = useTranslation();

apps/web/core/components/dropdowns/cycle/index.tsx

@@ -31,7 +31,7 @@ type Props = TDropdownProps & {
   currentCycleId?: string;
 };
 
-export const CycleDropdown: React.FC<Props> = observer((props) => {
+export const CycleDropdown = observer(function CycleDropdown(props: Props) {
   const {
     button,
     buttonClassName,

apps/web/core/components/dropdowns/date-range.tsx

@@ -66,7 +66,7 @@ type Props = {
   renderInPortal?: boolean;
 };
 
-export const DateRangeDropdown: React.FC<Props> = observer((props) => {
+export const DateRangeDropdown = observer(function DateRangeDropdown(props: Props) {
   const { t } = useTranslation();
   const {
     buttonClassName,

apps/web/core/components/dropdowns/date.tsx

@@ -39,7 +39,7 @@ type Props = TDropdownProps & {
   renderByDefault?: boolean;
 };
 
-export const DateDropdown: React.FC<Props> = observer((props) => {
+export const DateDropdown = observer(function DateDropdown(props: Props) {
   const {
     buttonClassName = "",
     buttonContainerClassName,

apps/web/core/components/dropdowns/estimate.tsx

@@ -40,7 +40,7 @@ type DropdownOptions =
     }[]
   | undefined;
 
-export const EstimateDropdown: React.FC<Props> = observer((props) => {
+export const EstimateDropdown = observer(function EstimateDropdown(props: Props) {
   const {
     button,
     buttonClassName,

apps/web/core/components/dropdowns/layout.tsx

@@ -16,7 +16,7 @@ type TLayoutDropDown = {
   disabledLayouts?: EIssueLayoutTypes[];
 };
 
-export const LayoutDropDown = observer((props: TLayoutDropDown) => {
+export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDropDown) {
   const { onChange, value = EIssueLayoutTypes.LIST, disabledLayouts = [] } = props;
   // plane i18n
   const { t } = useTranslation();

apps/web/core/components/dropdowns/member/avatar.tsx

@@ -18,7 +18,7 @@ type AvatarProps = {
   size?: "sm" | "md" | "base" | "lg" | number;
 };
 
-export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
+export const ButtonAvatars = observer(function ButtonAvatars(props: AvatarProps) {
   const { showTooltip, userIds, icon: Icon, size = "md" } = props;
   // store hooks
   const { getUserDetails } = useMember();

apps/web/core/components/dropdowns/member/base.tsx

@@ -27,7 +27,7 @@ type TMemberDropdownBaseProps = {
   renderByDefault?: boolean;
 } & MemberDropdownProps;
 
-export const MemberDropdownBase: React.FC<TMemberDropdownBaseProps> = observer((props) => {
+export const MemberDropdownBase = observer(function MemberDropdownBase(props: TMemberDropdownBaseProps) {
   const { t } = useTranslation();
   const {
     button,

apps/web/core/components/dropdowns/member/dropdown.tsx

@@ -16,7 +16,7 @@ type TMemberDropdownProps = {
   renderByDefault?: boolean;
 } & MemberDropdownProps;
 
-export const MemberDropdown: React.FC<TMemberDropdownProps> = observer((props) => {
+export const MemberDropdown = observer(function MemberDropdown(props: TMemberDropdownProps) {
   const { memberIds: propsMemberIds, projectId } = props;
   // router params
   const { workspaceSlug } = useParams();

apps/web/core/components/dropdowns/member/member-options.tsx

@@ -31,7 +31,7 @@ interface Props {
   referenceElement: HTMLButtonElement | null;
 }
 
-export const MemberOptions: React.FC<Props> = observer((props: Props) => {
+export const MemberOptions = observer(function MemberOptions(props: Props) {
   const {
     getUserDetails,
     isOpen,

apps/web/core/components/dropdowns/merged-date.tsx

@@ -16,7 +16,7 @@ type Props = {
  * - Same year, different month: "Jan 24 - Feb 6, 2025"
  * - Different year: "Dec 28, 2024 - Jan 4, 2025"
  */
-export const MergedDateDisplay: React.FC<Props> = observer((props) => {
+export const MergedDateDisplay = observer(function MergedDateDisplay(props: Props) {
   const { startDate, endDate, className = "" } = props;
 
   // Parse dates

apps/web/core/components/dropdowns/module/base.tsx

@@ -43,7 +43,7 @@ type TModuleDropdownBaseProps = TDropdownProps & {
       }
   );
 
-export const ModuleDropdownBase: React.FC<TModuleDropdownBaseProps> = observer((props) => {
+export const ModuleDropdownBase = observer(function ModuleDropdownBase(props: TModuleDropdownBaseProps) {
   const {
     button,
     buttonClassName,

apps/web/core/components/dropdowns/module/button-content.tsx

@@ -22,7 +22,7 @@ type ModuleButtonContentProps = {
   className?: string;
 };
 
-export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) => {
+export function ModuleButtonContent(props: ModuleButtonContentProps) {
   const {
     disabled,
     dropdownArrow,
@@ -126,4 +126,4 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
         )}
       </>
     );
-};
+}

apps/web/core/components/dropdowns/module/dropdown.tsx

@@ -32,7 +32,7 @@ type TModuleDropdownProps = TDropdownProps & {
       }
   );
 
-export const ModuleDropdown: React.FC<TModuleDropdownProps> = observer((props) => {
+export const ModuleDropdown = observer(function ModuleDropdown(props: TModuleDropdownProps) {
   const { projectId } = props;
   // router
   const { workspaceSlug } = useParams();

apps/web/core/components/dropdowns/module/module-options.tsx

@@ -32,7 +32,7 @@ interface Props {
   referenceElement: HTMLButtonElement | null;
 }
 
-export const ModuleOptions = observer((props: Props) => {
+export const ModuleOptions = observer(function ModuleOptions(props: Props) {
   const { getModuleById, isOpen, moduleIds, multiple, onDropdownOpen, placement, referenceElement } = props;
   // refs
   const inputRef = useRef<HTMLInputElement | null>(null);

apps/web/core/components/dropdowns/priority.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import type { ReactNode } from "react";
 import { Fragment, useRef, useState } from "react";
 import { useTheme } from "next-themes";
@@ -49,7 +48,7 @@ type ButtonProps = {
   renderToolTipByDefault?: boolean;
 };
 
-const BorderButton = (props: ButtonProps) => {
+function BorderButton(props: ButtonProps) {
   const {
     className,
     dropdownArrow,
@@ -130,9 +129,9 @@ const BorderButton = (props: ButtonProps) => {
       </div>
     </Tooltip>
   );
-};
+}
 
-const BackgroundButton = (props: ButtonProps) => {
+function BackgroundButton(props: ButtonProps) {
   const {
     className,
     dropdownArrow,
@@ -215,9 +214,9 @@ const BackgroundButton = (props: ButtonProps) => {
       </div>
     </Tooltip>
   );
-};
+}
 
-const TransparentButton = (props: ButtonProps) => {
+function TransparentButton(props: ButtonProps) {
   const {
     className,
     dropdownArrow,
@@ -302,9 +301,9 @@ const TransparentButton = (props: ButtonProps) => {
       </div>
     </Tooltip>
   );
-};
+}
 
-export const PriorityDropdown: React.FC<Props> = (props) => {
+export function PriorityDropdown(props: Props) {
   //hooks
   const { t } = useTranslation();
   const {
@@ -504,4 +503,4 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
       )}
     </ComboDropDown>
   );
-};
+}

apps/web/core/components/dropdowns/project/base.tsx

@@ -43,7 +43,7 @@ type Props = TDropdownProps & {
       }
   );
 
-export const ProjectDropdownBase: React.FC<Props> = observer((props) => {
+export const ProjectDropdownBase = observer(function ProjectDropdownBase(props: Props) {
   const {
     button,
     buttonClassName,

apps/web/core/components/dropdowns/project/dropdown.tsx

@@ -27,7 +27,7 @@ type Props = TDropdownProps & {
       }
   );
 
-export const ProjectDropdown: React.FC<Props> = observer((props) => {
+export const ProjectDropdown = observer(function ProjectDropdown(props: Props) {
   // store hooks
   const { joinedProjectIds, getProjectById } = useProject();
 

apps/web/core/components/dropdowns/state/base.tsx

@@ -41,7 +41,9 @@ export type TWorkItemStateDropdownBaseProps = TDropdownProps & {
   value: string | undefined | null;
 };
 
-export const WorkItemStateDropdownBase: React.FC<TWorkItemStateDropdownBaseProps> = observer((props) => {
+export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdownBase(
+  props: TWorkItemStateDropdownBaseProps
+) {
   const {
     button,
     buttonClassName,

apps/web/core/components/dropdowns/state/dropdown.tsx

@@ -16,7 +16,7 @@ type TWorkItemStateDropdownProps = Omit<
   stateIds?: string[];
 };
 
-export const StateDropdown: React.FC<TWorkItemStateDropdownProps> = observer((props) => {
+export const StateDropdown = observer(function StateDropdown(props: TWorkItemStateDropdownProps) {
   const { projectId, stateIds: propsStateIds } = props;
   // router params
   const { workspaceSlug } = useParams();