V1.0.0

.changeset/chilly-clocks-train.md

@@ -0,0 +1,5 @@
+---
+'@reactive-forms/core': patch
+---
+
+Created useStringField hook

.changeset/healthy-comics-refuse.md

@@ -0,0 +1,5 @@
+---
+'@reactive-forms/core': minor
+---
+
+Created useDecimalField hook

.changeset/red-badgers-doubt.md

@@ -0,0 +1,5 @@
+---
+'@reactive-forms/core': minor
+---
+
+Created useIntegerField hook

.changeset/red-flies-study.md

@@ -0,0 +1,5 @@
+---
+'@reactive-forms/core': patch
+---
+
+Created useDateField hook

.changeset/stale-cars-heal.md

@@ -0,0 +1,5 @@
+---
+'@reactive-forms/core': minor
+---
+
+Created useBooleanField hook

.gitignore

@@ -21,4 +21,7 @@ yarn-error.log*
 
 scripts/*.mjs
 coverage
-**/.turbo
+**/.turbo
+
+# vscode
+launch.json

.vscode/launch.json

@@ -5,8 +5,8 @@
 			"name": "Debug Core Tests",
 			"type": "node",
 			"request": "launch",
-			"runtimeArgs": ["--inspect-brk", "${workspaceFolder}/node_modules/aqu/dist/aqu.js", "test", "--runInBand"],
-			"cwd": "${workspaceFolder}/packages/core",
+			"runtimeArgs": ["--inspect-brk", ".\\node_modules\\jest\\bin\\jest.js", "--watch", "useDecimalField"],
+			"cwd": "${workspaceFolder}/packages/x",
 			"console": "integratedTerminal",
 			"internalConsoleOptions": "neverOpen",
 			"port": 9229

.vscode/launch.template.json

@@ -0,0 +1,15 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Debug Core Tests",
+			"type": "node",
+			"request": "launch",
+			"runtimeArgs": ["--inspect-brk", ".\\node_modules\\jest\\bin\\jest.js", "--watch"],
+			"cwd": "${workspaceFolder}/packages/core",
+			"console": "integratedTerminal",
+			"internalConsoleOptions": "neverOpen",
+			"port": 9229
+		}
+	]
+}

packages/core/jest.config.js

@@ -6,7 +6,7 @@ const config = {
 	preset: 'ts-jest',
 	moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'cjs', 'mjs', 'json', 'node'],
 	collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx,cjs,mjs}'],
-	testMatch: ['<rootDir>/**/*.(spec|test).{ts,tsx,js,jsx,cjs,mjs}'],
+	testMatch: ['<rootDir>/tests/**/*.(spec|test).{ts,tsx,js,jsx,cjs,mjs}'],
 	testEnvironmentOptions: {
 		url: 'http://localhost',
 	},

packages/core/package.json

@@ -15,15 +15,16 @@
 		"directory": "prepared-package"
 	},
 	"scripts": {
-		"build": "aqu build && rimraf ./prepared-package && clean-publish",
-		"dev": "aqu watch --no-cleanup",
+		"build": "tsc && rimraf ./prepared-package && clean-publish",
+		"dev": "tsc --watch",
 		"lint": "eslint .",
 		"lint:fix": "npm run lint --fix",
 		"test": "jest --passWithNoTests",
 		"test:log-coverage": "jest --passWithNoTests --coverage --silent --ci --coverageReporters=text",
 		"test:watch": "jest --passWithNoTests --watch"
 	},
 	"dependencies": {
+		"dayjs": "^1.11.9",
 		"lodash": "4.17.21",
 		"lodash-es": "4.17.15",
 		"pxth": "0.7.0",
@@ -33,17 +34,16 @@
 	"devDependencies": {
 		"@babel/core": "7.19.6",
 		"@reactive-tools/eslint-config": "workspace:*",
-		"@testing-library/react": "13.4.0",
-		"@types/jest": "26.0.24",
+		"@testing-library/react": "14.0.0",
+		"@types/jest": "29.5.4",
 		"@types/lodash": "4.14.161",
 		"@types/node": "^18.11.18",
 		"@types/react": "18.0.23",
-		"aqu": "0.4.3",
-		"jest": "29.2.2",
+		"jest": "29.7.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"rimraf": "3.0.2",
-		"ts-jest": "29.0.3",
+		"ts-jest": "29.1.1",
 		"tslib": "2.3.1",
 		"typescript": "4.8.4",
 		"yup": "0.32.9"

packages/core/src/components/BooleanField/BooleanFieldI18n.tsx

@@ -0,0 +1,22 @@
+import React, { createContext, PropsWithChildren } from 'react';
+import merge from 'lodash/merge';
+
+export type BooleanFieldI18n = {
+	required: string;
+};
+
+export const defaultBooleanFieldI18n: BooleanFieldI18n = {
+	required: 'Field is required',
+};
+
+export const BooleanFieldI18nContext = createContext<BooleanFieldI18n>(defaultBooleanFieldI18n);
+
+export type BooleanFieldI18nContextProviderProps = PropsWithChildren<{ i18n?: Partial<BooleanFieldI18n> }>;
+
+export const BooleanFieldI18nContextProvider = ({ i18n, children }: BooleanFieldI18nContextProviderProps) => {
+	return (
+		<BooleanFieldI18nContext.Provider value={merge(defaultBooleanFieldI18n, i18n)}>
+			{children}
+		</BooleanFieldI18nContext.Provider>
+	);
+};

packages/core/src/components/BooleanField/index.ts

@@ -0,0 +1,7 @@
+export { type BooleanFieldBag, type BooleanFieldConfig, useBooleanField } from './useBooleanField';
+export {
+	type BooleanFieldI18n,
+	BooleanFieldI18nContextProvider,
+	type BooleanFieldI18nContextProviderProps,
+	defaultBooleanFieldI18n,
+} from './BooleanFieldI18n';

packages/core/src/components/BooleanField/useBooleanField.ts

@@ -0,0 +1,44 @@
+import { useContext } from 'react';
+
+import { BooleanFieldI18nContext } from './BooleanFieldI18n';
+import { useFieldValidator } from '../../helpers/useFieldValidator';
+import { FieldContext } from '../../typings/FieldContext';
+import { FieldConfig, useField } from '../Field/useField';
+
+export type BooleanFieldConfig = FieldConfig<boolean | null | undefined> & {
+	required?: boolean;
+};
+
+export type BooleanFieldBag = FieldContext<boolean | null | undefined> & {
+	onBlur: () => void;
+};
+
+export const useBooleanField = ({ required, ...config }: BooleanFieldConfig) => {
+	const fieldBag = useField(config);
+
+	const {
+		control: { setTouched },
+	} = fieldBag;
+
+	const i18n = useContext(BooleanFieldI18nContext);
+
+	const onBlur = () => {
+		setTouched({ $touched: true });
+	};
+
+	useFieldValidator({
+		name: config.name,
+		validator: (value) => {
+			if (required && !value) {
+				return i18n.required;
+			}
+
+			return undefined;
+		},
+	});
+
+	return {
+		...fieldBag,
+		onBlur,
+	};
+};

packages/core/src/components/ConverterField/index.ts

@@ -0,0 +1,6 @@
+export {
+	useConverterField,
+	ConversionError,
+	type ConverterFieldBag,
+	type ConverterFieldConfig,
+} from './useConverterField';

packages/x/src/useConverterField.ts → packages/core/src/components/ConverterField/useConverterField.ts

@@ -1,17 +1,24 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { FieldConfig, FieldContext, FieldError, FieldTouched, useField, useFieldValidator } from '@reactive-forms/core';
 import isObject from 'lodash/isObject';
 
+import { useFieldValidator } from '../../helpers';
+import { FieldContext } from '../../typings/FieldContext';
+import { FieldError } from '../../typings/FieldError';
+import { FieldTouched } from '../../typings/FieldTouched';
+import { FieldConfig, useField } from '../Field/useField';
+
 export class ConversionError extends Error {
 	public constructor(errorMessage: string) {
 		super(errorMessage);
 	}
 }
 
-export type ConverterFieldConfig<T> = {
+export type ValueConverter<T> = {
 	parse: (value: string) => T;
 	format: (value: T) => string;
-} & FieldConfig<T>;
+};
+
+export type ConverterFieldConfig<T> = ValueConverter<T> & FieldConfig<T>;
 
 export type ConverterFieldBag<T> = {
 	text: string;

packages/core/src/components/DateField/DateFieldI18n.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, PropsWithChildren } from 'react';
+import merge from 'lodash/merge';
+
+import { formatDate } from '../../utils/formatDate';
+
+export type DateFieldI18n = {
+	required: string;
+	invalidInput: string;
+	minDate: (min: Date, pickTime: boolean) => string;
+	maxDate: (max: Date, pickTime: boolean) => string;
+};
+
+export const defaultDateFieldI18n: DateFieldI18n = {
+	required: 'Field is required',
+	invalidInput: 'Must be date',
+	minDate: (min, pickTime) => `Date must not be earlier than ${formatDate(min, pickTime)}`,
+	maxDate: (max, pickTime) => `Date must not be later than ${formatDate(max, pickTime)}`,
+};
+
+export const DateFieldI18nContext = createContext<DateFieldI18n>(defaultDateFieldI18n);
+
+export type DateFieldI18nContextProviderProps = PropsWithChildren<{ i18n?: Partial<DateFieldI18n> }>;
+
+export const DateFieldI18nContextProvider = ({ i18n, children }: DateFieldI18nContextProviderProps) => {
+	return (
+		<DateFieldI18nContext.Provider value={merge(defaultDateFieldI18n, i18n)}>
+			{children}
+		</DateFieldI18nContext.Provider>
+	);
+};

packages/core/src/components/DateField/index.ts

@@ -0,0 +1,7 @@
+export { type DateFieldBag, type DateFieldConfig, useDateField } from './useDateField';
+export {
+	type DateFieldI18n,
+	DateFieldI18nContextProvider,
+	type DateFieldI18nContextProviderProps,
+	defaultDateFieldI18n,
+} from './DateFieldI18n';

packages/core/src/components/DateField/useDateField.ts

@@ -0,0 +1,112 @@
+import { useCallback, useContext } from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+import { DateFieldI18nContext } from './DateFieldI18n';
+import { useFieldValidator } from '../../helpers';
+import { formatDate } from '../../utils';
+import { ConversionError, ConverterFieldBag, useConverterField } from '../ConverterField';
+import { ValueConverter } from '../ConverterField/useConverterField';
+import { FieldConfig } from '../Field';
+
+dayjs.extend(customParseFormat);
+
+const defaultDateFormats = ['DD.MM.YYYY', 'YYYY-MM-DD', 'YYYY/MM/DD', 'YYYY.MM.DD', 'DD-MM-YYYY', 'DD/MM/YYYY'];
+const defaultDateTimeFormats = [
+	'DD.MM.YYYY HH:mm',
+	'YYYY-MM-DD HH:mm',
+	'YYYY/MM/DD HH:mm',
+	'YYYY.MM.DD HH:mm',
+	'DD-MM-YYYY HH:mm',
+	'DD/MM/YYYY HH:mm',
+];
+
+export type DateFieldConfig = FieldConfig<Date | null | undefined> & {
+	required?: boolean;
+	minDate?: Date;
+	maxDate?: Date;
+	pickTime?: boolean;
+} & Partial<ValueConverter<Date | null | undefined>>;
+
+export type DateFieldBag = ConverterFieldBag<Date | null | undefined>;
+
+export const useDateField = ({
+	name,
+	validator,
+	schema,
+	required,
+	minDate,
+	maxDate,
+	pickTime = false,
+	format: customFormatDate,
+	parse: customParseDate,
+}: DateFieldConfig): DateFieldBag => {
+	const i18n = useContext(DateFieldI18nContext);
+
+	const parse = useCallback(
+		(text: string) => {
+			text = text.trim();
+
+			if (customParseDate) {
+				return customParseDate(text);
+			}
+
+			if (text.length === 0) {
+				return null;
+			}
+
+			const date = dayjs(text, [...defaultDateFormats, ...(pickTime ? defaultDateTimeFormats : [])], true);
+
+			if (!date.isValid()) {
+				throw new ConversionError(i18n.invalidInput);
+			}
+
+			return date.toDate();
+		},
+		[customParseDate, i18n.invalidInput, pickTime],
+	);
+
+	const format = useCallback(
+		(value: Date | null | undefined) => {
+			if (customFormatDate) {
+				return customFormatDate(value);
+			}
+
+			return formatDate(value, pickTime);
+		},
+		[customFormatDate, pickTime],
+	);
+
+	const dateBag = useConverterField({
+		parse,
+		format,
+		name,
+		validator,
+		schema,
+	});
+
+	useFieldValidator({
+		name,
+		validator: (value) => {
+			if (required && !(value instanceof Date)) {
+				return i18n.required;
+			}
+
+			if (!(value instanceof Date)) {
+				return undefined;
+			}
+
+			if (minDate instanceof Date && dayjs(minDate).diff(dayjs(value)) > 0) {
+				return i18n.minDate(minDate, pickTime);
+			}
+
+			if (maxDate instanceof Date && dayjs(value).diff(dayjs(maxDate)) > 0) {
+				return i18n.maxDate(maxDate, pickTime);
+			}
+
+			return undefined;
+		},
+	});
+
+	return dateBag;
+};