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/auth/src/components/oauth-provider-logo-image.tsx

@@ -4,11 +4,15 @@ import { AtSign, Phone } from 'lucide-react';
 
 const DEFAULT_IMAGE_SIZE = 18;
 
-export const OauthProviderLogoImage: React.FC<{
+export function OauthProviderLogoImage({
+  providerId,
+  width,
+  height,
+}: {
   providerId: string;
   width?: number;
   height?: number;
-}> = ({ providerId, width, height }) => {
+}) {
   const image = getOAuthProviderLogos()[providerId];
 
   if (typeof image === `string`) {
@@ -25,7 +29,7 @@ export const OauthProviderLogoImage: React.FC<{
   }
 
   return <>{image}</>;
-};
+}
 
 function getOAuthProviderLogos(): Record<string, string | React.ReactNode> {
   return {

packages/features/auth/src/components/oauth-providers.tsx

@@ -12,7 +12,7 @@ import { Trans } from '@kit/ui/trans';
 import { AuthErrorAlert } from './auth-error-alert';
 import { AuthProviderButton } from './auth-provider-button';
 
-export const OauthProviders: React.FC<{
+export function OauthProviders(props: {
   inviteToken?: string;
   enabledProviders: Provider[];
 
@@ -20,7 +20,7 @@ export const OauthProviders: React.FC<{
     callback: string;
     returnPath: string;
   };
-}> = (props) => {
+}) {
   const signInWithProviderMutation = useSignInWithProvider();
 
   // we make the UI "busy" until the next page is fully loaded
@@ -102,7 +102,7 @@ export const OauthProviders: React.FC<{
       </div>
     </>
   );
-};
+}
 
 function getProviderName(providerId: string) {
   const capitalize = (value: string) =>

packages/features/auth/src/components/password-sign-in-container.tsx

@@ -11,9 +11,11 @@ import type { PasswordSignInSchema } from '../schemas/password-sign-in.schema';
 import { AuthErrorAlert } from './auth-error-alert';
 import { PasswordSignInForm } from './password-sign-in-form';
 
-export const PasswordSignInContainer: React.FC<{
+export function PasswordSignInContainer({
+  onSignIn,
+}: {
   onSignIn?: (userId?: string) => unknown;
-}> = ({ onSignIn }) => {
+}) {
   const { captchaToken, resetCaptchaToken } = useCaptchaToken();
   const signInMutation = useSignInWithEmailPassword();
   const isLoading = signInMutation.isPending;
@@ -47,4 +49,4 @@ export const PasswordSignInContainer: React.FC<{
       <PasswordSignInForm onSubmit={onSubmit} loading={isLoading} />
     </>
   );
-};
+}

packages/features/auth/src/components/password-sign-in-form.tsx

@@ -23,10 +23,13 @@ import { Trans } from '@kit/ui/trans';
 
 import { PasswordSignInSchema } from '../schemas/password-sign-in.schema';
 
-export const PasswordSignInForm: React.FC<{
+export function PasswordSignInForm({
+  onSubmit,
+  loading,
+}: {
   onSubmit: (params: z.infer<typeof PasswordSignInSchema>) => unknown;
   loading: boolean;
-}> = ({ onSubmit, loading }) => {
+}) {
   const { t } = useTranslation('auth');
 
   const form = useForm<z.infer<typeof PasswordSignInSchema>>({
@@ -129,4 +132,4 @@ export const PasswordSignInForm: React.FC<{
       </form>
     </Form>
   );
-};
+}

packages/features/auth/src/components/password-sign-up-form.tsx

@@ -21,14 +21,17 @@ import { Trans } from '@kit/ui/trans';
 
 import { PasswordSignUpSchema } from '../schemas/password-sign-up.schema';
 
-export const PasswordSignUpForm: React.FC<{
+export function PasswordSignUpForm({
+  onSubmit,
+  loading,
+}: {
   onSubmit: (params: {
     email: string;
     password: string;
     repeatPassword: string;
   }) => unknown;
   loading: boolean;
-}> = ({ onSubmit, loading }) => {
+}) {
   const { t } = useTranslation();
 
   const form = useForm({
@@ -148,4 +151,4 @@ export const PasswordSignUpForm: React.FC<{
       </form>
     </Form>
   );
-};
+}