chore: codify React component style

src/features/tbank-connection/ui/TbankConnectionSection.tsx

@@ -7,6 +7,7 @@ import {
 	Text,
 } from "@mantine/core";
 import { useQueryClient } from "@tanstack/react-query";
+import type { FC } from "react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -24,6 +25,9 @@ import {
 
 type Status =
 	paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
+type TbankConnectionSectionLoadedProps = {
+	status: Status;
+};
 
 function errorCode(error: unknown): string | undefined {
 	return typeof error === "object" && error !== null && "code" in error
@@ -31,15 +35,18 @@ function errorCode(error: unknown): string | undefined {
 		: undefined;
 }
 
-export function TbankConnectionSection() {
+const TbankConnectionSection: FC = () => {
 	const viewModel = useTbankConnectionViewModel();
 	if (viewModel.state === "loading") return <TbankConnectionLoading />;
 	if (viewModel.state === "error")
 		return <TbankConnectionError retry={viewModel.retry} />;
 	return <TbankConnectionSectionLoaded status={viewModel.status} />;
-}
+};
 
-function TbankConnectionSectionLoaded({ status }: { status: Status }) {
+const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
+	props,
+) => {
+	const { status } = props;
 	const { t } = useTranslation();
 	const queryClient = useQueryClient();
 	const [deleteOpened, setDeleteOpened] = useState(false);
@@ -151,4 +158,6 @@ function TbankConnectionSectionLoaded({ status }: { status: Status }) {
 			</Modal>
 		</Stack>
 	);
-}
+};
+
+export { TbankConnectionSection };

src/features/tbank-connection/ui/TbankConnectionSection.view.tsx

@@ -1,12 +1,20 @@
 import { Alert, Button, Text } from "@mantine/core";
+import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 
-export function TbankConnectionLoading() {
+type TbankConnectionErrorProps = {
+	retry: () => void;
+};
+
+const TbankConnectionLoading: FC = () => {
 	const { t } = useTranslation();
 	return <Text>{t("states.loadingText")}</Text>;
-}
-export function TbankConnectionError({ retry }: { retry: () => void }) {
+};
+
+const TbankConnectionError: FC<TbankConnectionErrorProps> = (props) => {
+	const { retry } = props;
 	const { t } = useTranslation();
+
 	return (
 		<Alert color="red" title={t("tbank.statusError")}>
 			<Button variant="subtle" onClick={retry}>
@@ -14,4 +22,6 @@ export function TbankConnectionError({ retry }: { retry: () => void }) {
 			</Button>
 		</Alert>
 	);
-}
+};
+
+export { TbankConnectionError, TbankConnectionLoading };

src/features/tbank-connection/ui/TbankConnectionSection.vm.ts

@@ -5,9 +5,9 @@ import { apiQueryClient } from "@/shared/api";
 const tbankConnectionQueryOptions = () =>
 	apiQueryClient.queryOptions("get", "/api/v1/tbank-connection");
 
-export const tbankConnectionQueryKey = tbankConnectionQueryOptions().queryKey;
+const tbankConnectionQueryKey = tbankConnectionQueryOptions().queryKey;
 
-export function useTbankConnectionViewModel() {
+function useTbankConnectionViewModel() {
 	const { accessToken } = useAuth();
 	const status = useQuery({
 		...tbankConnectionQueryOptions(),
@@ -18,3 +18,5 @@ export function useTbankConnectionViewModel() {
 		return { state: "error" as const, retry: () => status.refetch() };
 	return { state: "loaded" as const, status: status.data };
 }
+
+export { tbankConnectionQueryKey, useTbankConnectionViewModel };