refactor: colocate frontend component files

src/entities/bank-card/ui/BankCardForm/BankCardForm.view.tsx

@@ -0,0 +1,112 @@
+import { Select, Stack, Text, TextInput } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
+import type { FC } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+	type BankCardValues,
+	bankDateInputValue,
+	bankDateSchema,
+	bankToday,
+} from "../../model/form-validation";
+
+type BankCardFieldsProps = { archived: boolean };
+const BankCardFields: FC<BankCardFieldsProps> = (props) => {
+	const {
+		control,
+		register,
+		formState: { errors },
+	} = useFormContext<BankCardValues>();
+	const { t } = useTranslation();
+	return (
+		<Stack>
+			<TextInput
+				label={t("bank.name")}
+				required
+				{...register("name")}
+				error={errors.name?.message}
+			/>
+			<TextInput
+				label={t("bank.bankName")}
+				{...register("bankName")}
+				error={errors.bankName?.message}
+			/>
+			<TextInput
+				label={t("bank.lastFour")}
+				inputMode="numeric"
+				{...register("lastFour")}
+				error={errors.lastFour?.message}
+			/>
+			<Controller
+				control={control}
+				name="paymentSystem"
+				render={({ field }) => (
+					<Select
+						{...field}
+						value={field.value || null}
+						onChange={(value) => field.onChange(value ?? "")}
+						label={t("bank.paymentSystem")}
+						placeholder={t("bank.paymentSystemUnknown")}
+						clearable
+						data={["mir", "visa", "mastercard"].map((value) => ({
+							value,
+							label: t(`bank.paymentSystems.${value}`),
+						}))}
+						comboboxProps={{ withinPortal: false }}
+						error={errors.paymentSystem?.message}
+					/>
+				)}
+			/>
+			<TextInput
+				label={t("bank.openingBalance")}
+				required
+				inputMode="decimal"
+				readOnly={props.archived}
+				{...register("openingBalance")}
+				error={errors.openingBalance?.message}
+			/>
+			<Controller
+				control={control}
+				name="openingDate"
+				render={({ field }) => (
+					<DateInput
+						{...field}
+						label={t("bank.openingDate")}
+						required
+						valueFormat="DD.MM.YYYY"
+						value={
+							bankDateSchema.safeParse(field.value).success ? field.value : null
+						}
+						dateParser={(value) =>
+							bankDateSchema.safeParse(bankDateInputValue(value)).success
+								? bankDateInputValue(value)
+								: null
+						}
+						fixOnBlur={false}
+						onInput={(event) =>
+							field.onChange(bankDateInputValue(event.currentTarget.value))
+						}
+						onChange={(value) => field.onChange(value ?? "")}
+						onBlur={(event) => {
+							field.onChange(bankDateInputValue(event.currentTarget.value));
+							field.onBlur();
+						}}
+						maxDate={bankToday()}
+						popoverProps={{
+							withinPortal: false,
+							middlewares: { shift: { crossAxis: true } },
+						}}
+						readOnly={props.archived}
+						error={errors.openingDate?.message}
+					/>
+				)}
+			/>
+			<Text size="sm" c="dimmed">
+				{t("bank.openingHint")}
+			</Text>
+			{props.archived && <Text>{t("bank.archiveHint")}</Text>}
+		</Stack>
+	);
+};
+
+export { BankCardFields };