Refactor function components across multiple files

Function components have been refactored across the codebase. Single export-const arrow function components have been adapted into traditional function declarations. This change provides better stack trace in case of errors and better function and argument names on runtime debugging.

packages/features/team-accounts/src/components/members/membership-role-selector.tsx

@@ -9,12 +9,17 @@ import { Trans } from '@kit/ui/trans';
 
 type Role = string;
 
-export const MembershipRoleSelector: React.FC<{
+export function MembershipRoleSelector({
+  roles,
+  value,
+  currentUserRole,
+  onChange,
+}: {
   roles: Role[];
   value: Role;
   currentUserRole?: Role;
   onChange: (role: Role) => unknown;
-}> = ({ roles, value, currentUserRole, onChange }) => {
+}) {
   return (
     <Select value={value} onValueChange={onChange}>
       <SelectTrigger data-test={'role-selector-trigger'}>
@@ -39,4 +44,4 @@ export const MembershipRoleSelector: React.FC<{
       </SelectContent>
     </Select>
   );
-};
+}

packages/features/team-accounts/src/components/members/remove-member-dialog.tsx

@@ -16,12 +16,17 @@ import { Trans } from '@kit/ui/trans';
 
 import { removeMemberFromAccountAction } from '../../server/actions/team-members-server-actions';
 
-export const RemoveMemberDialog: React.FC<{
+export function RemoveMemberDialog({
+  isOpen,
+  setIsOpen,
+  teamAccountId,
+  userId,
+}: {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   teamAccountId: string;
   userId: string;
-}> = ({ isOpen, setIsOpen, teamAccountId, userId }) => {
+}) {
   return (
     <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
       <AlertDialogContent>
@@ -43,7 +48,7 @@ export const RemoveMemberDialog: React.FC<{
       </AlertDialogContent>
     </AlertDialog>
   );
-};
+}
 
 function RemoveMemberForm({
   accountId,

packages/features/team-accounts/src/components/members/role-badge.tsx

@@ -17,9 +17,7 @@ const roleClassNameBuilder = cva('font-medium capitalize shadow-none', {
   },
 });
 
-export const RoleBadge: React.FC<{
-  role: Role;
-}> = ({ role }) => {
+export function RoleBadge({ role }: { role: Role }) {
   // @ts-expect-error: hard to type this since users can add custom roles
   const className = roleClassNameBuilder({ role });
   const isCustom = !(role in roles);
@@ -31,4 +29,4 @@ export const RoleBadge: React.FC<{
       </span>
     </Badge>
   );
-};
+}

packages/features/team-accounts/src/components/members/transfer-ownership-dialog.tsx

@@ -32,13 +32,19 @@ import { Trans } from '@kit/ui/trans';
 import { TransferOwnershipConfirmationSchema } from '../../schema/transfer-ownership-confirmation.schema';
 import { transferOwnershipAction } from '../../server/actions/team-members-server-actions';
 
-export const TransferOwnershipDialog: React.FC<{
+export function TransferOwnershipDialog({
+  isOpen,
+  setIsOpen,
+  targetDisplayName,
+  accountId,
+  userId,
+}: {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   accountId: string;
   userId: string;
   targetDisplayName: string;
-}> = ({ isOpen, setIsOpen, targetDisplayName, accountId, userId }) => {
+}) {
   return (
     <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
       <AlertDialogContent>
@@ -61,7 +67,7 @@ export const TransferOwnershipDialog: React.FC<{
       </AlertDialogContent>
     </AlertDialog>
   );
-};
+}
 
 function TransferOrganizationOwnershipForm({
   accountId,

packages/features/team-accounts/src/components/members/update-member-role-dialog.tsx

@@ -32,21 +32,21 @@ import { RolesDataProvider } from './roles-data-provider';
 
 type Role = string;
 
-export const UpdateMemberRoleDialog: React.FC<{
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-  userId: string;
-  teamAccountId: string;
-  userRole: Role;
-  userRoleHierarchy: number;
-}> = ({
+export function UpdateMemberRoleDialog({
   isOpen,
   setIsOpen,
   userId,
   teamAccountId,
   userRole,
   userRoleHierarchy,
-}) => {
+}: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  userId: string;
+  teamAccountId: string;
+  userRole: Role;
+  userRoleHierarchy: number;
+}) {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogContent>
@@ -74,7 +74,7 @@ export const UpdateMemberRoleDialog: React.FC<{
       </DialogContent>
     </Dialog>
   );
-};
+}
 
 function UpdateMemberForm({
   userId,