chore: codify React component style

src/entities/brokerage-account/api/useBrokerageAccounts.test.tsx

@@ -2,7 +2,7 @@ import { MantineProvider } from "@mantine/core";
 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 { afterEach, describe, expect, it, vi } from "vitest";
 import { configureAuthClient } from "@/shared/api";
 import { server } from "@/test/server";
@@ -10,11 +10,17 @@ import { useBrokerageAccounts } from "./useBrokerageAccounts";
 
 function createWrapper() {
 	const client = new QueryClient();
-	return ({ children }: { children: ReactNode }) => (
-		<MantineProvider>
-			<QueryClientProvider client={client}>{children}</QueryClientProvider>
-		</MantineProvider>
-	);
+	const TestWrapper: FC<PropsWithChildren> = (props) => {
+		const { children } = props;
+
+		return (
+			<MantineProvider>
+				<QueryClientProvider client={client}>{children}</QueryClientProvider>
+			</MantineProvider>
+		);
+	};
+
+	return TestWrapper;
 }
 
 describe("useBrokerageAccounts", () => {

src/entities/brokerage-account/api/useBrokerageAccounts.ts

@@ -4,16 +4,21 @@ import type { paths } from "@/shared/api/generated/schema";
 const brokerageAccountsQueryOptions = () =>
 	apiQueryClient.queryOptions("get", "/api/v1/brokerage-accounts");
 
-export const brokerageAccountsQueryKey =
-	brokerageAccountsQueryOptions().queryKey;
+const brokerageAccountsQueryKey = brokerageAccountsQueryOptions().queryKey;
 
-export type BrokerageAccount =
+type BrokerageAccount =
 	paths["/api/v1/brokerage-accounts"]["get"]["responses"][200]["content"]["application/json"][number];
 
-export function useBrokerageAccounts() {
+function useBrokerageAccounts() {
 	return useAuthenticatedQuery({
 		...brokerageAccountsQueryOptions(),
 		staleTime: 60_000,
 		retry: false,
 	});
 }
+
+export {
+	type BrokerageAccount,
+	brokerageAccountsQueryKey,
+	useBrokerageAccounts,
+};

src/entities/brokerage-account/index.ts

@@ -1,5 +1,5 @@
-export type { BrokerageAccount } from "./api/useBrokerageAccounts";
 export {
+	type BrokerageAccount,
 	brokerageAccountsQueryKey,
 	useBrokerageAccounts,
 } from "./api/useBrokerageAccounts";

src/entities/brokerage-account/model/display.ts

@@ -1,11 +1,13 @@
 import type { BrokerageAccount } from "../api/useBrokerageAccounts";
 
-export function accountTypeKey(type: BrokerageAccount["type"]) {
+function accountTypeKey(type: BrokerageAccount["type"]) {
 	return `accounts.types.${type}` as const;
 }
 
-export function errorCode(error: unknown): string | undefined {
+function errorCode(error: unknown): string | undefined {
 	return typeof error === "object" && error !== null && "code" in error
 		? String(error.code)
 		: undefined;
 }
+
+export { accountTypeKey, errorCode };

src/entities/brokerage-account/ui/BrokerageAccountList.tsx

@@ -1,4 +1,5 @@
 import { Card, SimpleGrid, Stack, Text } from "@mantine/core";
+import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import type { BrokerageAccount } from "../api/useBrokerageAccounts";
@@ -7,8 +8,10 @@ import classes from "./BrokerageAccountList.module.css";
 
 type BrokerageAccountListProps = { accounts: BrokerageAccount[] };
 
-export function BrokerageAccountList({ accounts }: BrokerageAccountListProps) {
+const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
+	const { accounts } = props;
 	const { t } = useTranslation();
+
 	return (
 		<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
 			{accounts.map((account) => (
@@ -43,4 +46,6 @@ export function BrokerageAccountList({ accounts }: BrokerageAccountListProps) {
 			))}
 		</SimpleGrid>
 	);
-}
+};
+
+export { BrokerageAccountList };