[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/ce/components/projects/create/attributes.tsx

@@ -15,7 +15,7 @@ type Props = {
   isMobile?: boolean;
 };
 
-const ProjectAttributes: FC<Props> = (props) => {
+function ProjectAttributes(props: Props) {
   const { isMobile = false } = props;
   const { t } = useTranslation();
   const { control } = useFormContext<IProject>();
@@ -89,6 +89,6 @@ const ProjectAttributes: FC<Props> = (props) => {
       />
     </div>
   );
-};
+}
 
 export default ProjectAttributes;

apps/web/ce/components/projects/create/root.tsx

@@ -30,7 +30,7 @@ export type TCreateProjectFormProps = {
   updateCoverImageStatus: (projectId: string, coverImage: string) => Promise<void>;
 };
 
-export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) => {
+export const CreateProjectForm = observer(function CreateProjectForm(props: TCreateProjectFormProps) {
   const { setToFavorite, workspaceSlug, data, onClose, handleNextStep, updateCoverImageStatus } = props;
   // store
   const { t } = useTranslation();

apps/web/ce/components/projects/create/template-select.tsx

@@ -9,4 +9,6 @@ export type TProjectTemplateSelect = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const ProjectTemplateSelect = (props: TProjectTemplateSelect) => <></>;
+export function ProjectTemplateSelect(props: TProjectTemplateSelect) {
+  return <></>;
+}

apps/web/ce/components/projects/header.tsx

@@ -2,4 +2,6 @@
 
 import { ProjectsBaseHeader } from "@/components/project/header";
 
-export const ProjectsListHeader = () => <ProjectsBaseHeader />;
+export function ProjectsListHeader() {
+  return <ProjectsBaseHeader />;
+}

apps/web/ce/components/projects/mobile-header.tsx

@@ -16,7 +16,7 @@ import { ProjectOrderByDropdown } from "@/components/project/dropdowns/order-by"
 import { useMember } from "@/hooks/store/use-member";
 import { useProjectFilter } from "@/hooks/store/use-project-filter";
 
-export const ProjectsListMobileHeader = observer(() => {
+export const ProjectsListMobileHeader = observer(function ProjectsListMobileHeader() {
   // i18n
   const { t } = useTranslation();
   // router

apps/web/ce/components/projects/page.tsx

@@ -9,7 +9,7 @@ import { ProjectRoot } from "@/components/project/root";
 import { useProject } from "@/hooks/store/use-project";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 
-export const ProjectPageRoot = observer(() => {
+export const ProjectPageRoot = observer(function ProjectPageRoot() {
   // router
   const { workspaceSlug } = useParams();
   // store

apps/web/ce/components/projects/settings/intake/header.tsx

@@ -19,7 +19,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 // plane web
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
 
-export const ProjectInboxHeader: FC = observer(() => {
+export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
   // states
   const [createIssueModal, setCreateIssueModal] = useState(false);
   // router

apps/web/ce/components/projects/teamspaces/teamspace-list.tsx

@@ -3,4 +3,6 @@ export type TProjectTeamspaceList = {
   projectId: string;
 };
 
-export const ProjectTeamspaceList: React.FC<TProjectTeamspaceList> = () => null;
+export function ProjectTeamspaceList(_props: TProjectTeamspaceList) {
+  return null;
+}