refactor: enforce frontend view model boundaries

src/entities/bank-card/ui/BankPeriodPicker/BankPeriodPicker.tsx

@@ -0,0 +1,30 @@
+import { DatePickerInput } from "@mantine/dates";
+import { type FC } from "react";
+
+import { useBankPeriodPickerVm } from "./BankPeriodPicker.vm";
+
+type BankPeriodPickerProps = {
+	onChange: (value: [null | string, null | string]) => void;
+	period: { from: string; to: string };
+};
+
+const BankPeriodPicker: FC<BankPeriodPickerProps> = (props) => {
+	const { onPeriodChange, t, value } = useBankPeriodPickerVm(props);
+
+	return (
+		<DatePickerInput
+			allowSingleDateInRange
+			label={t("bank.period")}
+			onChange={onPeriodChange}
+			popoverProps={{
+				middlewares: { shift: { crossAxis: true } },
+				returnFocus: true,
+			}}
+			type="range"
+			value={value}
+			valueFormat="DD.MM.YYYY"
+		/>
+	);
+};
+
+export { BankPeriodPicker };

src/entities/bank-card/ui/BankPeriodPicker/BankPeriodPicker.vm.ts

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type BankPeriodPickerProps = {
+	onChange: (value: [null | string, null | string]) => void;
+	period: { from: string; to: string };
+};
+
+function useBankPeriodPickerVm(props: BankPeriodPickerProps) {
+	const { onChange, period } = props;
+	const { t } = useTranslation();
+	const scope = `${period.from}-${period.to}`;
+
+	const [draft, setDraft] = useState<{
+		scope: string;
+		value: [null | string, null | string];
+	}>();
+
+	const value: [null | string, null | string]
+		= draft?.scope === scope ? draft.value : [period.from, period.to];
+
+	const onPeriodChange = (next: [null | string, null | string]) => {
+		setDraft({ scope, value: next });
+		onChange(next);
+	};
+
+	return { onChange, onPeriodChange, t, value };
+}
+
+export { useBankPeriodPickerVm };