chore: codify React component style

src/app/routes/AppRoutes.tsx

@@ -1,4 +1,5 @@
 import { Loader } from "@mantine/core";
+import type { FC, PropsWithChildren } from "react";
 import { lazy, Suspense } from "react";
 import { Navigate, Route, Routes, useLocation } from "react-router";
 import { useAuth } from "@/features/auth";
@@ -40,11 +41,14 @@ const ProtectedLayout = lazy(async () => {
 	return { default: ProtectedLayout };
 });
 
-function LazyPage({ children }: { children: React.ReactNode }) {
-	return <Suspense fallback={<Loader />}>{children}</Suspense>;
-}
+const LazyPage: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
 
-function Protected({ children }: { children: React.ReactNode }) {
+	return <Suspense fallback={<Loader />}>{children}</Suspense>;
+};
+
+const Protected: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
 	const { user, ready } = useAuth();
 	const location = useLocation();
 	if (!ready) return null;
@@ -57,15 +61,16 @@ function Protected({ children }: { children: React.ReactNode }) {
 			replace
 		/>
 	);
-}
+};
 
-function Public({ children }: { children: React.ReactNode }) {
+const Public: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
 	const { user, ready } = useAuth();
 	if (!ready) return null;
 	return user ? <Navigate to="/accounts" replace /> : children;
-}
+};
 
-export function AppRoutes() {
+const AppRoutes: FC = () => {
 	return (
 		<Routes>
 			<Route path="/" element={<Navigate to="/accounts" replace />} />
@@ -149,4 +154,6 @@ export function AppRoutes() {
 			/>
 		</Routes>
 	);
-}
+};
+
+export { AppRoutes };

src/app/routes/ProtectedLayout.tsx

@@ -1,6 +1,9 @@
+import type { FC } from "react";
 import { AppBreadcrumbs } from "@/app/ui";
 import { AppShell } from "@/shared/ui";
 
-export function ProtectedLayout() {
+const ProtectedLayout: FC = () => {
 	return <AppShell contentAboveOutlet={<AppBreadcrumbs />} />;
-}
+};
+
+export { ProtectedLayout };

src/app/routes/RouteErrorBoundary.test.tsx

@@ -1,5 +1,6 @@
 import { MantineProvider } from "@mantine/core";
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import type { FC } from "react";
 import { MemoryRouter, useLocation, useNavigate } from "react-router";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { RouteErrorBoundary } from "./RouteErrorBoundary";
@@ -9,10 +10,11 @@ vi.mock("@/features/auth", () => ({
 	useAuth: () => ({ user: authenticated ? {} : null }),
 }));
 
-function ThrowingRoute(): never {
+const ThrowingRoute: FC = () => {
 	throw new Error("test route failure");
-}
-function HealthyRoute() {
+};
+
+const HealthyRoute: FC = () => {
 	return (
 		<div>
 			{useLocation().pathname === "/healthy" ? (
@@ -22,9 +24,11 @@ function HealthyRoute() {
 			)}
 		</div>
 	);
-}
-function RouteHarness() {
+};
+
+const RouteHarness: FC = () => {
 	const navigate = useNavigate();
+
 	return (
 		<>
 			<button type="button" onClick={() => navigate("/healthy")}>
@@ -35,7 +39,8 @@ function RouteHarness() {
 			</RouteErrorBoundary>
 		</>
 	);
-}
+};
+
 function renderBoundary(path: string) {
 	return render(
 		<MantineProvider>

src/app/routes/RouteErrorBoundary.tsx

@@ -1,24 +1,29 @@
 import { Button, Stack, Text, Title } from "@mantine/core";
+import type { FC, PropsWithChildren } from "react";
 import { Component } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation } from "react-router";
 import { useAuth } from "@/features/auth";
 
-type Props = {
-	children: React.ReactNode;
+type BoundaryProps = PropsWithChildren<{
 	routeKey: string;
 	authenticated: boolean;
+}>;
+
+type RouteErrorFallbackProps = {
+	authenticated: boolean;
 };
+
 type State = { hasError: boolean };
 
-class Boundary extends Component<Props, State> {
+class Boundary extends Component<BoundaryProps, State> {
 	state: State = { hasError: false };
 
 	static getDerivedStateFromError(): State {
 		return { hasError: true };
 	}
 
-	componentDidUpdate(previousProps: Props) {
+	componentDidUpdate(previousProps: BoundaryProps) {
 		if (previousProps.routeKey !== this.props.routeKey && this.state.hasError) {
 			this.setState({ hasError: false });
 		}
@@ -32,9 +37,11 @@ class Boundary extends Component<Props, State> {
 	}
 }
 
-function RouteErrorFallback({ authenticated }: { authenticated: boolean }) {
+const RouteErrorFallback: FC<RouteErrorFallbackProps> = (props) => {
+	const { authenticated } = props;
 	const { t } = useTranslation();
 	const to = authenticated ? "/accounts" : "/login";
+
 	return (
 		<Stack>
 			<Title order={1}>{t("routeError.title")}</Title>
@@ -44,18 +51,18 @@ function RouteErrorFallback({ authenticated }: { authenticated: boolean }) {
 			</Button>
 		</Stack>
 	);
-}
+};
 
-export function RouteErrorBoundary({
-	children,
-}: {
-	children: React.ReactNode;
-}) {
+const RouteErrorBoundary: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
 	const { pathname, search } = useLocation();
 	const { user } = useAuth();
+
 	return (
 		<Boundary authenticated={Boolean(user)} routeKey={`${pathname}${search}`}>
 			{children}
 		</Boundary>
 	);
-}
+};
+
+export { RouteErrorBoundary };

src/app/theme.ts

@@ -1,6 +1,6 @@
 import { createTheme } from "@mantine/core";
 
-export const theme = createTheme({
+const theme = createTheme({
 	primaryColor: "blue",
 	defaultRadius: "md",
 	fontFamily:
@@ -20,3 +20,5 @@ export const theme = createTheme({
 		],
 	},
 });
+
+export { theme };

src/app/ui/App.tsx

@@ -1,5 +1,6 @@
 import { MantineProvider } from "@mantine/core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { FC } from "react";
 import { BrowserRouter } from "react-router";
 import { AppRoutes, RouteErrorBoundary } from "@/app/routes";
 import { theme } from "@/app/theme";
@@ -9,7 +10,7 @@ const queryClient = new QueryClient({
 	defaultOptions: { queries: { refetchOnWindowFocus: false } },
 });
 
-export function App() {
+const App: FC = () => {
 	return (
 		<MantineProvider theme={theme} forceColorScheme="light">
 			<QueryClientProvider client={queryClient}>
@@ -23,4 +24,6 @@ export function App() {
 			</QueryClientProvider>
 		</MantineProvider>
 	);
-}
+};
+
+export { App };

src/app/ui/AppBreadcrumbs.tsx

@@ -1,11 +1,24 @@
+import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useMatch } from "react-router";
 import { useBrokerageAccounts } from "@/entities/brokerage-account";
 
 type Crumb = { label: string; to?: string };
 
-function BreadcrumbTrail({ items }: { items: Crumb[] }) {
+type BreadcrumbTrailProps = {
+	items: Crumb[];
+};
+
+type AccountBreadcrumbsProps = {
+	accountId: string;
+	events: boolean;
+	operations: boolean;
+};
+
+const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
+	const { items } = props;
 	const { t } = useTranslation();
+
 	return (
 		<nav
 			aria-label={t("breadcrumbs.label")}
@@ -33,23 +46,17 @@ function BreadcrumbTrail({ items }: { items: Crumb[] }) {
 			))}
 		</nav>
 	);
-}
+};
 
-function AccountBreadcrumbs({
-	accountId,
-	events,
-	operations,
-}: {
-	accountId: string;
-	events: boolean;
-	operations: boolean;
-}) {
+const AccountBreadcrumbs: FC<AccountBreadcrumbsProps> = (props) => {
+	const { accountId, events, operations } = props;
 	const { data: accounts } = useBrokerageAccounts();
 	const { t } = useTranslation();
 	const accountName =
 		accounts?.find((account) => account.id === accountId)?.name ??
 		t("breadcrumbs.accountFallback");
 	const accountPath = `/accounts/${accountId}`;
+
 	return (
 		<BreadcrumbTrail
 			items={
@@ -72,9 +79,9 @@ function AccountBreadcrumbs({
 			}
 		/>
 	);
-}
+};
 
-export function AppBreadcrumbs() {
+const AppBreadcrumbs: FC = () => {
 	const { t } = useTranslation();
 	const accountOperations = useMatch({
 		path: "/accounts/:accountId/operations",
@@ -117,4 +124,6 @@ export function AppBreadcrumbs() {
 	if (settings)
 		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} />;
 	return null;
-}
+};
+
+export { AppBreadcrumbs };