[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/space/app/compat/next/image.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import React from "react";
 
 // Minimal shim so code using next/image compiles under React Router + Vite
@@ -9,6 +8,8 @@ type NextImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
   src: string;
 };
 
-const Image: React.FC<NextImageProps> = ({ src, alt = "", ...rest }) => <img src={src} alt={alt} {...rest} />;
+function Image({ src, alt = "", ...rest }: NextImageProps) {
+  return <img src={src} alt={alt} {...rest} />;
+}
 
 export default Image;

apps/space/app/compat/next/link.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import React from "react";
 import { Link as RRLink } from "react-router";
 import { ensureTrailingSlash } from "./helper";
@@ -12,13 +11,8 @@ type NextLinkProps = React.ComponentProps<"a"> & {
   shallow?: boolean; // next.js prop, ignored
 };
 
-const Link: React.FC<NextLinkProps> = ({
-  href,
-  replace,
-  prefetch: _prefetch,
-  scroll: _scroll,
-  shallow: _shallow,
-  ...rest
-}) => <RRLink to={ensureTrailingSlash(href)} replace={replace} {...rest} />;
+function Link({ href, replace, prefetch: _prefetch, scroll: _scroll, shallow: _shallow, ...rest }: NextLinkProps) {
+  return <RRLink to={ensureTrailingSlash(href)} replace={replace} {...rest} />;
+}
 
 export default Link;

apps/space/app/error.tsx

@@ -1,9 +1,8 @@
 "use client";
-
 // ui
 import { Button } from "@plane/propel/button";
 
-const ErrorPage = () => {
+function ErrorPage() {
   const handleRetry = () => {
     window.location.reload();
   };
@@ -42,6 +41,6 @@ const ErrorPage = () => {
       </div>
     </div>
   );
-};
+}
 
 export default ErrorPage;

apps/space/app/issues/[anchor]/page.tsx

@@ -10,7 +10,7 @@ import { usePublish } from "@/hooks/store/publish";
 import { useLabel } from "@/hooks/store/use-label";
 import { useStates } from "@/hooks/store/use-state";
 
-const IssuesPage = observer(() => {
+const IssuesPage = observer(function IssuesPage() {
   // params
   const params = useParams<{ anchor: string }>();
   const { anchor } = params;

apps/space/app/not-found.tsx

@@ -1,22 +1,23 @@
 "use client";
-
 // assets
 import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
 
-const NotFound = () => (
-  <div className="h-screen w-screen grid place-items-center">
-    <div className="text-center">
-      <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
-        <div className="size-16 md:size-32 grid place-items-center">
-          <img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} />
+function NotFound() {
+  return (
+    <div className="h-screen w-screen grid place-items-center">
+      <div className="text-center">
+        <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
+          <div className="size-16 md:size-32 grid place-items-center">
+            <img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} />
+          </div>
         </div>
+        <h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">That didn{"'"}t work</h1>
+        <p className="mt-2 md:mt-4 text-sm md:text-base">
+          Check the URL you are entering in the browser{"'"}s address bar and try again.
+        </p>
       </div>
-      <h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">That didn{"'"}t work</h1>
-      <p className="mt-2 md:mt-4 text-sm md:text-base">
-        Check the URL you are entering in the browser{"'"}s address bar and try again.
-      </p>
     </div>
-  </div>
-);
+  );
+}
 
 export default NotFound;

apps/space/app/page.tsx

@@ -11,7 +11,7 @@ import { AuthView } from "@/components/views";
 // hooks
 import { useUser } from "@/hooks/store/use-user";
 
-const HomePage = observer(() => {
+const HomePage = observer(function HomePage() {
   const { data: currentUser, isAuthenticated, isInitializing } = useUser();
   const searchParams = useSearchParams();
   const router = useRouter();