[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/admin/app/(all)/(dashboard)/ai/form.tsx

@@ -17,7 +17,7 @@ type IInstanceAIForm = {
 
 type AIFormValues = Record<TInstanceAIConfigurationKeys, string>;
 
-export const InstanceAIForm: React.FC<IInstanceAIForm> = (props) => {
+export function InstanceAIForm(props: IInstanceAIForm) {
   const { config } = props;
   // store
   const { updateInstanceConfigurations } = useInstance();
@@ -133,4 +133,4 @@ export const InstanceAIForm: React.FC<IInstanceAIForm> = (props) => {
       </div>
     </div>
   );
-};
+}

apps/admin/app/(all)/(dashboard)/ai/page.tsx

@@ -9,7 +9,7 @@ import { useInstance } from "@/hooks/store";
 import type { Route } from "./+types/page";
 import { InstanceAIForm } from "./form";
 
-const InstanceAIPage = observer<React.FC<Route.ComponentProps>>(() => {
+const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentProps) {
   // store
   const { fetchInstanceConfigurations, formattedConfig } = useInstance();
 

apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx

@@ -27,7 +27,7 @@ type Props = {
 
 type GiteaConfigFormValues = Record<TInstanceGiteaAuthenticationConfigurationKeys, string>;
 
-export const InstanceGiteaConfigForm: FC<Props> = (props) => {
+export function InstanceGiteaConfigForm(props: Props) {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -207,4 +207,4 @@ export const InstanceGiteaConfigForm: FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}

apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx

@@ -15,7 +15,7 @@ import { useInstance } from "@/hooks/store";
 import type { Route } from "./+types/page";
 import { InstanceGiteaConfigForm } from "./form";
 
-const InstanceGiteaAuthenticationPage = observer(() => {
+const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthenticationPage() {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state

apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx

@@ -28,7 +28,7 @@ type Props = {
 
 type GithubConfigFormValues = Record<TInstanceGithubAuthenticationConfigurationKeys, string>;
 
-export const InstanceGithubConfigForm: React.FC<Props> = (props) => {
+export function InstanceGithubConfigForm(props: Props) {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -245,4 +245,4 @@ export const InstanceGithubConfigForm: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}

apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx

@@ -19,7 +19,9 @@ import { useInstance } from "@/hooks/store";
 import type { Route } from "./+types/page";
 import { InstanceGithubConfigForm } from "./form";
 
-const InstanceGithubAuthenticationPage = observer<React.FC<Route.ComponentProps>>(() => {
+const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthenticationPage(
+  _props: Route.ComponentProps
+) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state

apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx

@@ -24,7 +24,7 @@ type Props = {
 
 type GitlabConfigFormValues = Record<TInstanceGitlabAuthenticationConfigurationKeys, string>;
 
-export const InstanceGitlabConfigForm: React.FC<Props> = (props) => {
+export function InstanceGitlabConfigForm(props: Props) {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -208,4 +208,4 @@ export const InstanceGitlabConfigForm: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}

apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx

@@ -15,7 +15,9 @@ import { useInstance } from "@/hooks/store";
 import type { Route } from "./+types/page";
 import { InstanceGitlabConfigForm } from "./form";
 
-const InstanceGitlabAuthenticationPage = observer<React.FC<Route.ComponentProps>>(() => {
+const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthenticationPage(
+  _props: Route.ComponentProps
+) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state

apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx

@@ -27,7 +27,7 @@ type Props = {
 
 type GoogleConfigFormValues = Record<TInstanceGoogleAuthenticationConfigurationKeys, string>;
 
-export const InstanceGoogleConfigForm: React.FC<Props> = (props) => {
+export function InstanceGoogleConfigForm(props: Props) {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -232,4 +232,4 @@ export const InstanceGoogleConfigForm: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}

apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx

@@ -15,7 +15,9 @@ import { useInstance } from "@/hooks/store";
 import type { Route } from "./+types/page";
 import { InstanceGoogleConfigForm } from "./form";
 
-const InstanceGoogleAuthenticationPage = observer<React.FC<Route.ComponentProps>>(() => {
+const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthenticationPage(
+  _props: Route.ComponentProps
+) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state

apps/admin/app/(all)/(dashboard)/authentication/page.tsx

@@ -14,7 +14,7 @@ import { useInstance } from "@/hooks/store";
 import { AuthenticationModes } from "@/plane-admin/components/authentication";
 import type { Route } from "./+types/page";
 
-const InstanceAuthenticationPage = observer<React.FC<Route.ComponentProps>>(() => {
+const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(_props: Route.ComponentProps) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
 

apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx

@@ -30,7 +30,7 @@ const EMAIL_SECURITY_OPTIONS: { [key in TEmailSecurityKeys]: string } = {
   NONE: "No email security",
 };
 
-export const InstanceEmailForm: React.FC<IInstanceEmailForm> = (props) => {
+export function InstanceEmailForm(props: IInstanceEmailForm) {
   const { config } = props;
   // states
   const [isSendTestEmailModalOpen, setIsSendTestEmailModalOpen] = useState(false);
@@ -224,4 +224,4 @@ export const InstanceEmailForm: React.FC<IInstanceEmailForm> = (props) => {
       </div>
     </div>
   );
-};
+}

apps/admin/app/(all)/(dashboard)/email/page.tsx

@@ -11,7 +11,7 @@ import { useInstance } from "@/hooks/store";
 import type { Route } from "./+types/page";
 import { InstanceEmailForm } from "./email-config-form";
 
-const InstanceEmailPage = observer<React.FC<Route.ComponentProps>>(() => {
+const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.ComponentProps) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, disableEmail } = useInstance();
 

apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx

@@ -19,7 +19,7 @@ enum ESendEmailSteps {
 
 const instanceService = new InstanceService();
 
-export const SendTestEmailModal: React.FC<Props> = (props) => {
+export function SendTestEmailModal(props: Props) {
   const { isOpen, handleClose } = props;
 
   // state
@@ -133,4 +133,4 @@ export const SendTestEmailModal: React.FC<Props> = (props) => {
       </Dialog>
     </Transition.Root>
   );
-};
+}

apps/admin/app/(all)/(dashboard)/general/form.tsx

@@ -19,7 +19,7 @@ export interface IGeneralConfigurationForm {
   instanceAdmins: IInstanceAdmin[];
 }
 
-export const GeneralConfigurationForm: React.FC<IGeneralConfigurationForm> = observer((props) => {
+export const GeneralConfigurationForm = observer(function GeneralConfigurationForm(props: IGeneralConfigurationForm) {
   const { instance, instanceAdmins } = props;
   // hooks
   const { instanceConfigurations, updateInstanceInfo, updateInstanceConfigurations } = useInstance();

apps/admin/app/(all)/(dashboard)/general/intercom.tsx

@@ -13,7 +13,7 @@ type TIntercomConfig = {
   isTelemetryEnabled: boolean;
 };
 
-export const IntercomConfig: React.FC<TIntercomConfig> = observer((props) => {
+export const IntercomConfig = observer(function IntercomConfig(props: TIntercomConfig) {
   const { isTelemetryEnabled } = props;
   // hooks
   const { instanceConfigurations, updateInstanceConfigurations, fetchInstanceConfigurations } = useInstance();

apps/admin/app/(all)/(dashboard)/header.tsx

@@ -10,7 +10,7 @@ import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 // hooks
 import { useTheme } from "@/hooks/store";
 
-export const HamburgerToggle = observer(() => {
+export const HamburgerToggle = observer(function HamburgerToggle() {
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   return (
     <div
@@ -22,7 +22,7 @@ export const HamburgerToggle = observer(() => {
   );
 });
 
-export const AdminHeader = observer(() => {
+export const AdminHeader = observer(function AdminHeader() {
   const pathName = usePathname();
 
   const getHeaderTitle = (pathName: string) => {

apps/admin/app/(all)/(dashboard)/image/form.tsx

@@ -14,7 +14,7 @@ type IInstanceImageConfigForm = {
 
 type ImageConfigFormValues = Record<TInstanceImageConfigurationKeys, string>;
 
-export const InstanceImageConfigForm: React.FC<IInstanceImageConfigForm> = (props) => {
+export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
   const { config } = props;
   // store hooks
   const { updateInstanceConfigurations } = useInstance();
@@ -77,4 +77,4 @@ export const InstanceImageConfigForm: React.FC<IInstanceImageConfigForm> = (prop
       </div>
     </div>
   );
-};
+}

apps/admin/app/(all)/(dashboard)/image/page.tsx

@@ -9,7 +9,7 @@ import { useInstance } from "@/hooks/store";
 import type { Route } from "./+types/page";
 import { InstanceImageConfigForm } from "./form";
 
-const InstanceImagePage = observer<React.FC<Route.ComponentProps>>(() => {
+const InstanceImagePage = observer(function InstanceImagePage(_props: Route.ComponentProps) {
   // store
   const { formattedConfig, fetchInstanceConfigurations } = useInstance();
 

apps/admin/app/(all)/(dashboard)/layout.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
@@ -14,7 +13,7 @@ import type { Route } from "./+types/layout";
 import { AdminHeader } from "./header";
 import { AdminSidebar } from "./sidebar";
 
-const AdminLayout: React.FC<Route.ComponentProps> = () => {
+function AdminLayout(_props: Route.ComponentProps) {
   // router
   const { replace } = useRouter();
   // store hooks
@@ -48,6 +47,6 @@ const AdminLayout: React.FC<Route.ComponentProps> = () => {
   }
 
   return <></>;
-};
+}
 
 export default observer(AdminLayout);

apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx

@@ -16,7 +16,7 @@ import { useTheme, useUser } from "@/hooks/store";
 // service initialization
 const authService = new AuthService();
 
-export const AdminSidebarDropdown = observer(() => {
+export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
   // store hooks
   const { isSidebarCollapsed } = useTheme();
   const { currentUser, signOut } = useUser();

apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx

@@ -34,7 +34,7 @@ const helpOptions = [
   },
 ];
 
-export const AdminSidebarHelpSection: React.FC = observer(() => {
+export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection() {
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   // store

apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx

@@ -50,7 +50,7 @@ const INSTANCE_ADMIN_LINKS = [
   },
 ];
 
-export const AdminSidebarMenu = observer(() => {
+export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
   // store hooks
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   // router

apps/admin/app/(all)/(dashboard)/sidebar.tsx

@@ -11,7 +11,7 @@ import { AdminSidebarDropdown } from "./sidebar-dropdown";
 import { AdminSidebarHelpSection } from "./sidebar-help-section";
 import { AdminSidebarMenu } from "./sidebar-menu";
 
-export const AdminSidebar = observer(() => {
+export const AdminSidebar = observer(function AdminSidebar() {
   // store
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
 

apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx

@@ -15,7 +15,7 @@ import { useWorkspace } from "@/hooks/store";
 
 const instanceWorkspaceService = new InstanceWorkspaceService();
 
-export const WorkspaceCreateForm = () => {
+export function WorkspaceCreateForm() {
   // router
   const router = useRouter();
   // states
@@ -209,4 +209,4 @@ export const WorkspaceCreateForm = () => {
       </div>
     </div>
   );
-};
+}

apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx

@@ -5,19 +5,21 @@ import { observer } from "mobx-react";
 import type { Route } from "./+types/page";
 import { WorkspaceCreateForm } from "./form";
 
-const WorkspaceCreatePage = observer<React.FC<Route.ComponentProps>>(() => (
-  <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-    <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-      <div className="text-xl font-medium text-custom-text-100">Create a new workspace on this instance.</div>
-      <div className="text-sm font-normal text-custom-text-300">
-        You will need to invite users from Workspace Settings after you create this workspace.
+const WorkspaceCreatePage = observer(function WorkspaceCreatePage(_props: Route.ComponentProps) {
+  return (
+    <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+      <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="text-xl font-medium text-custom-text-100">Create a new workspace on this instance.</div>
+        <div className="text-sm font-normal text-custom-text-300">
+          You will need to invite users from Workspace Settings after you create this workspace.
+        </div>
+      </div>
+      <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <WorkspaceCreateForm />
       </div>
     </div>
-    <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-      <WorkspaceCreateForm />
-    </div>
-  </div>
-));
+  );
+});
 
 export const meta: Route.MetaFunction = () => [{ title: "Create Workspace - God Mode" }];
 

apps/admin/app/(all)/(dashboard)/workspace/page.tsx

@@ -18,7 +18,7 @@ import { WorkspaceListItem } from "@/components/workspace/list-item";
 import { useInstance, useWorkspace } from "@/hooks/store";
 import type { Route } from "./+types/page";
 
-const WorkspaceManagementPage = observer<React.FC<Route.ComponentProps>>(() => {
+const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props: Route.ComponentProps) {
   // states
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   // store

apps/admin/app/(all)/(home)/auth-banner.tsx

@@ -9,7 +9,7 @@ type TAuthBanner = {
   handleBannerData?: (bannerData: TAdminAuthErrorInfo | undefined) => void;
 };
 
-export const AuthBanner: React.FC<TAuthBanner> = (props) => {
+export function AuthBanner(props: TAuthBanner) {
   const { bannerData, handleBannerData } = props;
 
   if (!bannerData) return <></>;
@@ -27,4 +27,4 @@ export const AuthBanner: React.FC<TAuthBanner> = (props) => {
       </div>
     </div>
   );
-};
+}

apps/admin/app/(all)/(home)/auth-header.tsx

@@ -3,10 +3,12 @@
 import Link from "next/link";
 import { PlaneLockup } from "@plane/propel/icons";
 
-export const AuthHeader = () => (
-  <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
-    <Link href="/">
-      <PlaneLockup height={20} width={95} className="text-custom-text-100" />
-    </Link>
-  </div>
-);
+export function AuthHeader() {
+  return (
+    <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+      <Link href="/">
+        <PlaneLockup height={20} width={95} className="text-custom-text-100" />
+      </Link>
+    </div>
+  );
+}

apps/admin/app/(all)/(home)/page.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import { observer } from "mobx-react";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
@@ -11,7 +10,7 @@ import { useInstance } from "@/hooks/store";
 import type { Route } from "./+types/page";
 import { InstanceSignInForm } from "./sign-in-form";
 
-const HomePage = () => {
+function HomePage() {
   // store hooks
   const { instance, error } = useInstance();
 
@@ -36,7 +35,7 @@ const HomePage = () => {
 
   // if instance is fetched and setup is done, show sign in form
   return <InstanceSignInForm />;
-};
+}
 
 export default observer(HomePage);
 

apps/admin/app/(all)/(home)/sign-in-form.tsx

@@ -45,7 +45,7 @@ const defaultFromData: TFormData = {
   password: "",
 };
 
-export const InstanceSignInForm: React.FC = () => {
+export function InstanceSignInForm() {
   // search params
   const searchParams = useSearchParams();
   const emailParam = searchParams.get("email") || undefined;
@@ -192,4 +192,4 @@ export const InstanceSignInForm: React.FC = () => {
       </div>
     </>
   );
-};
+}

apps/admin/app/(all)/instance.provider.tsx

@@ -3,7 +3,7 @@ import useSWR from "swr";
 // hooks
 import { useInstance } from "@/hooks/store";
 
-export const InstanceProvider = observer<React.FC<React.PropsWithChildren>>((props) => {
+export const InstanceProvider = observer(function InstanceProvider(props: React.PropsWithChildren) {
   const { children } = props;
   // store hooks
   const { fetchInstanceInfo } = useInstance();

apps/admin/app/(all)/store.provider.tsx

@@ -28,7 +28,7 @@ export type StoreProviderProps = {
   initialState?: any;
 };
 
-export const StoreProvider = ({ children, initialState = {} }: StoreProviderProps) => {
+export function StoreProvider({ children, initialState = {} }: StoreProviderProps) {
   const store = initializeStore(initialState);
   return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
-};
+}

apps/admin/app/(all)/toast.tsx

@@ -4,7 +4,7 @@ import { useTheme } from "next-themes";
 import { Toast } from "@plane/propel/toast";
 import { resolveGeneralTheme } from "@plane/utils";
 
-export const ToastWithTheme = () => {
+export function ToastWithTheme() {
   const { resolvedTheme } = useTheme();
   return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
-};
+}

apps/admin/app/(all)/user.provider.tsx

@@ -6,7 +6,7 @@ import useSWR from "swr";
 // hooks
 import { useInstance, useTheme, useUser } from "@/hooks/store";
 
-export const UserProvider = observer<React.FC<React.PropsWithChildren>>(({ children }) => {
+export const UserProvider = observer(function UserProvider({ children }: React.PropsWithChildren) {
   // hooks
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   const { currentUser, fetchCurrentUser } = useUser();