[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/empty-state/comic-box-button.tsx

@@ -17,7 +17,7 @@ type Props = {
   disabled?: boolean;
 };
 
-export const ComicBoxButton: React.FC<Props> = (props) => {
+export function ComicBoxButton(props: Props) {
   const { label, icon, title, description, onClick, disabled = false } = props;
   const [isHovered, setIsHovered] = useState(false);
 
@@ -77,4 +77,4 @@ export const ComicBoxButton: React.FC<Props> = (props) => {
       )}
     </Popover>
   );
-};
+}

apps/web/core/components/empty-state/detailed-empty-state-root.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // ui
@@ -35,7 +34,7 @@ const sizeClasses = {
   lg: "md:min-w-[30rem] max-w-[60rem]",
 } as const;
 
-const CustomButton = ({
+function CustomButton({
   config,
   variant,
   size,
@@ -43,20 +42,22 @@ const CustomButton = ({
   config: ButtonConfig;
   variant: "primary" | "neutral-primary";
   size: EmptyStateSize;
-}) => (
-  <Button
-    variant={variant}
-    size={size}
-    onClick={config.onClick}
-    prependIcon={config.prependIcon}
-    appendIcon={config.appendIcon}
-    disabled={config.disabled}
-  >
-    {config.text}
-  </Button>
-);
+}) {
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={config.onClick}
+      prependIcon={config.prependIcon}
+      appendIcon={config.appendIcon}
+      disabled={config.disabled}
+    >
+      {config.text}
+    </Button>
+  );
+}
 
-export const DetailedEmptyState: React.FC<Props> = observer((props) => {
+export const DetailedEmptyState = observer(function DetailedEmptyState(props: Props) {
   const {
     title,
     description,

apps/web/core/components/empty-state/section-empty-state-root.tsx

@@ -11,7 +11,7 @@ type Props = {
   customClassName?: string;
 };
 
-export const SectionEmptyState: FC<Props> = (props) => {
+export function SectionEmptyState(props: Props) {
   const { title, description, icon, actionElement, customClassName } = props;
   return (
     <div
@@ -28,4 +28,4 @@ export const SectionEmptyState: FC<Props> = (props) => {
       {actionElement && <>{actionElement}</>}
     </div>
   );
-};
+}

apps/web/core/components/empty-state/simple-empty-state-root.tsx

@@ -30,7 +30,7 @@ const getTitleClassName = (hasDescription: boolean) =>
     "text-lg text-custom-text-300": hasDescription,
   });
 
-export const SimpleEmptyState = observer((props: Props) => {
+export const SimpleEmptyState = observer(function SimpleEmptyState(props: Props) {
   const { title, description, size = "sm", assetPath } = props;
 
   return (