chore: codify React component style

src/features/auth/model/auth.test.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { renderHook, waitFor } from "@testing-library/react";
 import { HttpResponse, http } from "msw";
-import type { ReactNode } from "react";
+import type { FC, PropsWithChildren } from "react";
 import { describe, expect, it } from "vitest";
 import { apiClient } from "@/shared/api";
 import { server } from "@/test/server";
@@ -22,11 +22,15 @@ describe("AuthProvider", () => {
 				return HttpResponse.json([]);
 			}),
 		);
-		const wrapper = ({ children }: { children: ReactNode }) => (
-			<QueryClientProvider client={new QueryClient()}>
-				<AuthProvider>{children}</AuthProvider>
-			</QueryClientProvider>
-		);
+		const wrapper: FC<PropsWithChildren> = (props) => {
+			const { children } = props;
+
+			return (
+				<QueryClientProvider client={new QueryClient()}>
+					<AuthProvider>{children}</AuthProvider>
+				</QueryClientProvider>
+			);
+		};
 		const { result } = renderHook(() => useAuth(), { wrapper });
 
 		await waitFor(() => expect(result.current.ready).toBe(true));
@@ -39,11 +43,15 @@ describe("AuthProvider", () => {
 		server.use(http.post("*/api/v1/auth/refresh", () => HttpResponse.error()));
 		const queryClient = new QueryClient();
 		queryClient.setQueryData(["cached-query"], { value: "stale" });
-		const wrapper = ({ children }: { children: ReactNode }) => (
-			<QueryClientProvider client={queryClient}>
-				<AuthProvider>{children}</AuthProvider>
-			</QueryClientProvider>
-		);
+		const wrapper: FC<PropsWithChildren> = (props) => {
+			const { children } = props;
+
+			return (
+				<QueryClientProvider client={queryClient}>
+					<AuthProvider>{children}</AuthProvider>
+				</QueryClientProvider>
+			);
+		};
 		const { result } = renderHook(() => useAuth(), { wrapper });
 
 		await waitFor(() => expect(result.current.ready).toBe(true));
@@ -71,11 +79,15 @@ describe("AuthProvider", () => {
 		);
 		const queryClient = new QueryClient();
 		queryClient.setQueryData(["cached-query"], { value: "stale" });
-		const wrapper = ({ children }: { children: ReactNode }) => (
-			<QueryClientProvider client={queryClient}>
-				<AuthProvider>{children}</AuthProvider>
-			</QueryClientProvider>
-		);
+		const wrapper: FC<PropsWithChildren> = (props) => {
+			const { children } = props;
+
+			return (
+				<QueryClientProvider client={queryClient}>
+					<AuthProvider>{children}</AuthProvider>
+				</QueryClientProvider>
+			);
+		};
 		const { result } = renderHook(() => useAuth(), { wrapper });
 
 		await waitFor(() =>

src/features/auth/model/auth.tsx

@@ -1,4 +1,5 @@
 import { useQueryClient } from "@tanstack/react-query";
+import type { FC, PropsWithChildren } from "react";
 import {
 	createContext,
 	useCallback,
@@ -25,7 +26,6 @@ type AuthContextValue = {
 	logout: () => Promise<void>;
 	refresh: () => Promise<boolean>;
 };
-
 const AuthContext = createContext<AuthContextValue | null>(null);
 
 async function request(
@@ -40,7 +40,8 @@ async function request(
 	return data as Authentication;
 }
 
-export function AuthProvider({ children }: { children: React.ReactNode }) {
+const AuthProvider: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
 	const queryClient = useQueryClient();
 	const [user, setUser] = useState<User | null>(null);
 	const [accessToken, setAccessToken] = useState<string | null>(null);
@@ -138,10 +139,12 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 			{children}
 		</AuthContext>
 	);
-}
+};
 
-export function useAuth() {
+function useAuth() {
 	const context = useContext(AuthContext);
 	if (!context) throw new Error("AuthProvider is required");
 	return context;
 }
+
+export { AuthProvider, useAuth };

src/features/auth/ui/AuthForm.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Alert, Button, PasswordInput, Stack, TextInput } from "@mantine/core";
+import type { FC } from "react";
 import { useState } from "react";
 import { FormProvider, type Resolver, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -50,14 +51,13 @@ const registerSchema = loginSchema.refine(
 	}),
 );
 type AuthFormValues = z.input<typeof loginSchema>;
-
-export function AuthForm({
-	register,
-	onSubmit,
-}: {
+type AuthFormProps = {
 	register?: true;
 	onSubmit: (email: string, password: string) => Promise<void>;
-}) {
+};
+
+const AuthForm: FC<AuthFormProps> = (props) => {
+	const { register, onSubmit } = props;
 	const { t } = useTranslation();
 	const schema = register ? registerSchema : loginSchema;
 	const methods = useForm<AuthFormValues>({
@@ -114,4 +114,6 @@ export function AuthForm({
 			</form>
 		</FormProvider>
 	);
-}
+};
+
+export { AuthForm };

src/features/auth/ui/LoginForm.tsx

@@ -1,13 +1,15 @@
+import type { FC } from "react";
 import { useLocation, useNavigate } from "react-router";
 import { useAuth } from "../model/auth";
 import { AuthForm } from "./AuthForm";
 
-export function LoginForm() {
+const LoginForm: FC = () => {
 	const { login } = useAuth();
 	const navigate = useNavigate();
 	const location = useLocation();
 	const returnTo =
 		(location.state as { returnTo?: string } | null)?.returnTo ?? "/accounts";
+
 	return (
 		<AuthForm
 			onSubmit={async (email, password) => {
@@ -16,4 +18,6 @@ export function LoginForm() {
 			}}
 		/>
 	);
-}
+};
+
+export { LoginForm };

src/features/auth/ui/RegisterForm.tsx

@@ -1,13 +1,15 @@
+import type { FC } from "react";
 import { useLocation, useNavigate } from "react-router";
 import { useAuth } from "../model/auth";
 import { AuthForm } from "./AuthForm";
 
-export function RegisterForm() {
+const RegisterForm: FC = () => {
 	const { register } = useAuth();
 	const navigate = useNavigate();
 	const location = useLocation();
 	const returnTo =
 		(location.state as { returnTo?: string } | null)?.returnTo ?? "/accounts";
+
 	return (
 		<AuthForm
 			register
@@ -17,4 +19,6 @@ export function RegisterForm() {
 			}}
 		/>
 	);
-}
+};
+
+export { RegisterForm };