Refactor Field components

Change-Id: I151330330c90a5a4c28d7acd41e6562953dc7af6

packages/api/package.json

@@ -16,10 +16,10 @@
 		"linkDirectory": false
 	},
 	"dependencies": {
-		"@treejs/auth": "^0.19.17",
+		"@treejs/auth": "workspace:^",
-		"@treejs/constants": "^0.19.17",
+		"@treejs/constants": "workspace:^",
-		"@treejs/types": "^0.19.17",
+		"@treejs/types": "workspace:^",
-		"@treejs/utils": "^0.19.17"
+		"@treejs/utils": "workspace:^"
 	},
 	"peerDependencies": {
 		"@reduxjs/toolkit": "1.8.3"

packages/auth/package.json

@@ -16,9 +16,9 @@
 		"linkDirectory": false
 	},
 	"dependencies": {
-		"@treejs/constants": "^0.19.17",
+		"@treejs/constants": "workspace:^",
-		"@treejs/types": "^0.19.17",
+		"@treejs/types": "workspace:^",
-		"@treejs/utils": "^0.19.17"
+		"@treejs/utils": "workspace:^"
 	},
 	"peerDependencies": {
 		"@reduxjs/toolkit": "1.8.3",

packages/components/package.json

@@ -16,11 +16,11 @@
 		"linkDirectory": false
 	},
 	"dependencies": {
-		"@treejs/constants": "^0.19.17",
+		"@treejs/constants": "workspace:^",
-		"@treejs/hooks": "^0.19.17",
+		"@treejs/hooks": "workspace:^",
-		"@treejs/types": "^0.19.17",
+		"@treejs/localization": "workspace:^",
-		"@treejs/localization": "^0.19.17",
+		"@treejs/types": "workspace:^",
-		"@treejs/utils": "^0.19.17"
+		"@treejs/utils": "workspace:^"
 	},
 	"peerDependencies": {
 		"@reduxjs/toolkit": "1.8.3",

packages/components/src/Checkbox.tsx

@@ -2,20 +2,18 @@ import React, { useCallback, useEffect, useState } from 'react';
 import clsx from 'clsx';
 
 import { StatusEnum } from '@treejs/types/common';
-import { HTMLElementType } from '@treejs/types/form';
+import { InputElementType } from '@treejs/types/form';
 
 import CheckSquareIcon from './Icons/CheckSquare';
 import SquareIcon from './Icons/Square';
 
-export type CheckboxFieldProps<V = boolean> = {
+export type CheckboxProps<V = boolean> = Omit<
-	checked?: boolean;
+	{ checked?: boolean; description?: string } & InputElementType<V>,
-	label?: string;
+	'value'
-	status?: StatusEnum;
+>;
-	title: string;
-} & HTMLElementType<V>;
 
-const Checkbox: React.FC<CheckboxFieldProps> = (props) => {
+export const Checkbox: React.FC<CheckboxProps> = (props) => {
-	const { title, label, name, status = StatusEnum.none } = props;
+	const { label, description, name, status = StatusEnum.none, disabled } = props;
 
 	const [checked, setChecked] = useState(false);
 
@@ -50,7 +48,14 @@ const Checkbox: React.FC<CheckboxFieldProps> = (props) => {
 
 	return (
 		<div className="field-container checkbox-container">
-			<input id={name} name={name} className="hidden field-input" type="checkbox" onBlur={handleBlur} />
+			<input
+				id={name}
+				name={name}
+				className="hidden field-input"
+				type="checkbox"
+				onBlur={handleBlur}
+				disabled={disabled}
+			/>
 			{label && (
 				<label className="field-label mr-2 " htmlFor={name} onClick={handleClick}>
 					{label}
@@ -60,10 +65,8 @@ const Checkbox: React.FC<CheckboxFieldProps> = (props) => {
 				{checked ? <CheckSquareIcon className={boxClassName} /> : <SquareIcon className={boxClassName} />}
 			</div>
 			<div className="cursor-pointer" onClick={handleClick}>
-				{title}
+				{description}
 			</div>
 		</div>
 	);
 };
-
-export default Checkbox;

packages/components/src/DatePicker/components/DatePicker.tsx

@@ -1,24 +1,25 @@
 import React, { FocusEvent, useEffect, useState } from 'react';
-import { format } from 'date-fns';
+import { omit } from 'ramda';
+import { format as formatFn } from 'date-fns';
 
 import { ModalId } from '@treejs/components/Modal/context';
 import { useModal } from '@treejs/components/Modal/hooks';
-import { StatusEnum } from '@treejs/types/common';
+import { InputElementType } from '@treejs/types/form';
-import { HTMLElementType } from '@treejs/types/form';
 
-import TextField from '../../TextField';
+import { TextField } from '../../TextField';
-import DatePickerModal from './DatePickerModal';
+import { DatePickerModal } from './DatePickerModal';
 
 export const DefaultDateFormat = 'dd.MM.yyyy';
 
-export type DatePickerFieldProps<V = string> = {
+export type DatePickerProps<V = string> = Omit<
+	{
 		format?: string;
-	status?: StatusEnum;
+	} & InputElementType<V>,
-	value?: Date;
+	'onFocus'
-} & HTMLElementType<V>;
+>;
 
-const DatePicker: React.FC<DatePickerFieldProps<Date>> = (props) => {
+export const DatePicker: React.FC<DatePickerProps<Date>> = (props) => {
-	const { onBlur, onChange, title, status, name } = props;
+	const { onBlur, onChange, label, name, format, ...others } = props;
 
 	const { closeModal, openModal, registerModal } = useModal();
 
@@ -44,11 +45,11 @@ const DatePicker: React.FC<DatePickerFieldProps<Date>> = (props) => {
 	const handleOpenModal = (): void => {
 		registerModal({
 			id: name,
-			title,
+			title: label,
 			style: { width: 400 },
 			component: (
 				<DatePickerModal
-					format={props.format ?? DefaultDateFormat}
+					format={format ?? DefaultDateFormat}
 					name={name}
 					value={value}
 					closeModal={handleCloseModal}
@@ -62,15 +63,13 @@ const DatePicker: React.FC<DatePickerFieldProps<Date>> = (props) => {
 	return (
 		<TextField
 			name={name}
-			title={title}
+			label={label}
 			onClick={handleOpenModal}
 			onFocus={handleOpenModal}
 			onBlur={handleBlur}
-			value={value ? format(value, props.format ?? DefaultDateFormat) : undefined}
+			value={value ? formatFn(value, props.format ?? DefaultDateFormat) : undefined}
-			status={status}
+			{...omit(['value', 'onClick'], others)}
 			readonly
 		/>
 	);
 };
-
-export default DatePicker;

packages/components/src/DatePicker/components/DatePickerModal.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import Calendar from '../../Calendar/components/Calendar';
 import { ModalId } from '../../Modal/context';
 
-type IProps = {
+export type DatePickerModalProps = {
 	closeModal: (id: ModalId) => void;
 	format: ModalId;
 	name: ModalId;
@@ -11,7 +11,7 @@ type IProps = {
 	value: Date | undefined;
 };
 
-const DatePickerModal: React.FC<IProps> = (props) => {
+export const DatePickerModal: React.FC<DatePickerModalProps> = (props) => {
 	const { onChange, closeModal, name, value } = props;
 
 	const setActiveOption = useCallback(
@@ -24,5 +24,3 @@ const DatePickerModal: React.FC<IProps> = (props) => {
 
 	return <Calendar value={value} onDayClick={setActiveOption} hover />;
 };
-
-export default DatePickerModal;

packages/components/src/DatePicker/index.ts

@@ -1,5 +1 @@
-import DatePicker, { DatePickerFieldProps } from './components/DatePicker';
+export { DatePicker, DatePickerProps } from './components/DatePicker';
-
-export default DatePicker;
-
-export { DatePickerFieldProps };

packages/components/src/List.tsx

@@ -6,7 +6,7 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 import { Option } from '@treejs/types/options';
 import { isNilOrEmpty } from '@treejs/utils';
 
-import TextField from './TextField';
+import { TextField } from './TextField';
 
 type IProps = {
 	autoComplete?: boolean;
@@ -130,7 +130,7 @@ const List: React.FC<IProps> = (props) => {
 		<div>
 			{autoComplete && (
 				<div className="pb-4">
-					<TextField name="search" title="Hledat" onChange={handleSearch} autoFocus />
+					<TextField name="search" label="Hledat" onChange={handleSearch} autoFocus />
 				</div>
 			)}
 			<div className="list-container" onMouseLeave={setCurrentOption(-1)}>

packages/components/src/Modal/context.tsx

@@ -11,7 +11,7 @@ export type Modal = {
 		overrideMaxWidth?: boolean;
 		width?: number | string;
 	};
-	title?: string;
+	title?: string | ReactNode;
 };
 
 export type AdditionalModalProps = {

packages/components/src/RadioButton/components/CustomOptions.tsx

@@ -3,9 +3,9 @@ import clsx from 'clsx';
 
 import { Option } from '@treejs/types/options';
 
-import { InnerOptionsProps, OptionViewProps } from '../types';
+import { InnerOptionsProps, OptionViewProps } from '../components/RadioButton';
 
-const CustomOptions: React.FC<OptionViewProps> = (props) => {
+export const CustomOptions: React.FC<OptionViewProps> = (props) => {
 	const {
 		option: { code, name, disabled },
 		onClick,
@@ -33,5 +33,3 @@ const CustomOptions: React.FC<OptionViewProps> = (props) => {
 
 	return render(code, name);
 };
-
-export default CustomOptions;

packages/components/src/RadioButton/components/RadioButton.tsx

@@ -4,34 +4,43 @@ import clsx from 'clsx';
 import CircleIcon from '@treejs/components/Icons/Circle';
 import CircleFillIcon from '@treejs/components/Icons/CircleFill';
 import { StatusEnum } from '@treejs/types/common';
-import { HTMLElementType } from '@treejs/types/form';
+import { InputElementType } from '@treejs/types/form';
 import { Option } from '@treejs/types/options';
 
-import { OptionViewProps } from '../types';
+export type OptionViewProps = {
+	icons?: { [key: string]: React.ReactNode };
+};
 
-export type RadioButtonFieldProps<V = Option> = {
+export type InnerOptionsProps = {
+	onClick: ({ code, name }: Option, e: MouseEvent<HTMLDivElement>) => void;
+	option: Option;
+	value: string;
+};
+
+export type RadioButtonProps<V = Option> = Omit<
+	{
 		horizontal?: boolean;
 		options: Option[];
 		/**
 		 * Horizontal prop is ignored and flex-direction is set to column for mobile
 		 */
 		responsive?: boolean;
-	status?: StatusEnum;
-	value?: string;
 		/**
 		 * Is called per each item in options
 		 */
 		view?: React.ReactElement<OptionViewProps>;
-} & HTMLElementType<V>;
+	} & InputElementType<V>,
+	'onFocus' | 'onBlur' | 'onChange' | 'disabled'
+>;
 
-const RadioButton: React.FC<RadioButtonFieldProps> = (props) => {
+export const RadioButton: React.FC<RadioButtonProps> = (props) => {
-	const { onClick, horizontal = false, title, options, view, status = StatusEnum.none, responsive } = props;
+	const { onClick, horizontal = false, label, options, view, status = StatusEnum.none, responsive, name } = props;
 
 	const [value, setValue] = useState<Option['code'] | null>(null);
 
 	useEffect(() => {
-		if (props.value !== undefined) {
+		if (props.value) {
-			setValue(props.value);
+			setValue(props.value.code);
 		}
 	}, [props.value]);
 
@@ -78,11 +87,11 @@ const RadioButton: React.FC<RadioButtonFieldProps> = (props) => {
 				</div>
 			);
 		});
-	}, [value, options, props.name, boxClassName]);
+	}, [value, options, name, boxClassName]);
 
 	return (
 		<div className="field-container radiobutton-container">
-			{title && <div className="field-label cursor-default mr-2 self-start">{title}</div>}
+			{label && <div className="field-label cursor-default mr-2 self-start">{label}</div>}
 			<div
 				className={clsx(
 					'flex',
@@ -99,5 +108,3 @@ const RadioButton: React.FC<RadioButtonFieldProps> = (props) => {
 		</div>
 	);
 };
-
-export default RadioButton;

packages/components/src/RadioButton/index.ts

@@ -1,5 +1 @@
-import RadioButton, { RadioButtonFieldProps } from './components/RadioButton';
+export { RadioButton, RadioButtonProps } from './components/RadioButton';
-
-export default RadioButton;
-
-export { RadioButtonFieldProps };

packages/components/src/RadioButton/types.tsx

@@ -1,13 +0,0 @@
-import React, { MouseEvent } from 'react';
-
-import { Option } from '@treejs/types/options';
-
-export type OptionViewProps = {
-	icons?: { [key: string]: React.ReactNode };
-};
-
-export type InnerOptionsProps = {
-	onClick: ({ code, name }: Option, e: MouseEvent<HTMLDivElement>) => void;
-	option: Option;
-	value: string;
-};

packages/components/src/SelectBox/index.ts

@@ -1,5 +0,0 @@
-import SelectBox, { SelectBoxFieldProps } from './components/SelectBox';
-
-export default SelectBox;
-
-export { SelectBoxFieldProps };

packages/components/src/SelectBox/types.ts

@@ -1,4 +0,0 @@
-export interface IOption {
-	code: string;
-	name: string;
-}

packages/components/src/Selectbox/components/Selectbox.tsx

@@ -3,27 +3,26 @@ import { find, propEq, propOr } from 'ramda';
 
 import { ModalId } from '@treejs/components/Modal/context';
 import { useModal } from '@treejs/components/Modal/hooks';
-import { StatusEnum } from '@treejs/types/common';
+import { InputElementType } from '@treejs/types/form';
-import { HTMLElementType } from '@treejs/types/form';
+import { Option } from '@treejs/types/options';
 
-import TextField from '../../TextField';
+import { TextField } from '../../TextField';
-import { IOption } from '../types';
+import { SelectboxModal } from './SelectboxModal';
-import SelectBoxModal from './SelectBoxModal';
 
-export type SelectBoxFieldProps<V = IOption> = {
+export type SelectBoxProps<V = Option> = Omit<
+	{
 		autoComplete?: boolean;
-	disabled?: boolean;
+		options: Option[];
-	options: IOption[];
+	} & InputElementType<V>,
-	status?: StatusEnum;
+	'onFocus' | 'onClick'
-	value?: string;
+>;
-} & HTMLElementType<V>;
 
-const SelectBox: React.FC<SelectBoxFieldProps> = (props) => {
+export const Selectbox: React.FC<SelectBoxProps> = (props) => {
-	const { value, options, onBlur, onChange, name, title, autoComplete, disabled, status } = props;
+	const { value, options, onBlur, onChange, name, label, autoComplete, ...others } = props;
 
 	const { openModal, closeModal, registerModal } = useModal();
 
-	const [selectedOption, setSelectedOption] = useState<IOption | null>(null);
+	const [selectedOption, setSelectedOption] = useState<Option | null>(null);
 
 	useEffect(() => {
 		if (value && options) {
@@ -36,7 +35,7 @@ const SelectBox: React.FC<SelectBoxFieldProps> = (props) => {
 		onBlur?.(selectedOption ?? null, e);
 	};
 
-	const handleOptionClick = (option: IOption): void => {
+	const handleOptionClick = (option: Option): void => {
 		setSelectedOption(option);
 		onChange?.(option, null);
 	};
@@ -53,10 +52,10 @@ const SelectBox: React.FC<SelectBoxFieldProps> = (props) => {
 	const handleOpenModal = (): void => {
 		registerModal({
 			id: name,
-			title,
+			title: label,
 			style: { width: 300 },
 			component: (
-				<SelectBoxModal
+				<SelectboxModal
 					autoComplete={autoComplete}
 					name={name}
 					options={options}
@@ -72,17 +71,14 @@ const SelectBox: React.FC<SelectBoxFieldProps> = (props) => {
 
 	return (
 		<TextField
-			disabled={disabled}
+			{...others}
 			name={name}
-			title={title}
+			label={label}
 			onClick={handleOpenModal}
 			onFocus={handleOpenModal}
 			onBlur={handleBlur}
 			value={propOr('', 'name', selectedOption)}
-			status={status}
 			readonly
 		/>
 	);
 };
-
-export default SelectBox;

packages/components/src/Selectbox/components/SelectboxModal.tsx

@@ -10,7 +10,7 @@ import Button from '../../Button';
 import { Grid } from '../../Grid';
 import { ModalId } from '../../Modal/context';
 
-type IProps = {
+export type SelectboxModalProps = {
 	autoComplete?: boolean;
 	closeModal: (id: ModalId) => void;
 	name: ModalId;
@@ -20,7 +20,7 @@ type IProps = {
 	selectedOption: Option | null;
 };
 
-const SelectBoxModal: React.FC<IProps> = (props) => {
+export const SelectboxModal: React.FC<SelectboxModalProps> = (props) => {
 	const { name, options, autoComplete, selectedOption, onChange, onRemove, closeModal } = props;
 
 	const handleChange = (option: Option) => {
@@ -50,5 +50,3 @@ const SelectBoxModal: React.FC<IProps> = (props) => {
 		</div>
 	);
 };
-
-export default SelectBoxModal;

packages/components/src/Selectbox/index.ts

@@ -0,0 +1 @@
+export { Selectbox, SelectBoxProps } from './components/Selectbox';

packages/components/src/TextField.tsx

@@ -1,24 +1,18 @@
-import React, { ReactElement, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import clsx from 'clsx';
 
 import { StatusEnum } from '@treejs/types/common';
-import { HTMLElementType } from '@treejs/types/form';
+import { InputElementType } from '@treejs/types/form';
 import { isNilOrEmpty, masker } from '@treejs/utils';
 
 export type TextFieldProps<V = string> = {
 	autoFocus?: boolean;
-	className?: string;
-	defaultValue?: string;
-	disabled?: boolean;
 	mask?: string;
 	readonly?: boolean;
-	status?: StatusEnum;
-	title?: string | ReactElement;
 	type?: 'text' | 'password';
-	value?: string;
+} & InputElementType<V>;
-} & Omit<HTMLElementType<V>, 'title'>;
 
-const TextField: React.FC<TextFieldProps> = (props) => {
+export const TextField: React.FC<TextFieldProps> = (props) => {
 	const {
 		type = 'text',
 		onClick,
@@ -27,13 +21,11 @@ const TextField: React.FC<TextFieldProps> = (props) => {
 		onChange,
 		disabled,
 		name,
-		title,
+		label,
 		readonly,
 		status,
 		autoFocus,
-		defaultValue,
 		mask,
-		className,
 	} = props;
 
 	const inputRef = React.createRef<HTMLInputElement>();
@@ -50,12 +42,6 @@ const TextField: React.FC<TextFieldProps> = (props) => {
 		[mask]
 	);
 
-	useEffect((): void => {
-		if (defaultValue) {
-			setValue(applyMask(defaultValue));
-		}
-	}, [defaultValue]);
-
 	useEffect((): void => {
 		if (props.value !== undefined) {
 			setValue(applyMask(props.value));
@@ -111,10 +97,10 @@ const TextField: React.FC<TextFieldProps> = (props) => {
 				'field-container--error': status === StatusEnum.error,
 			})}
 		>
-			{title && <label className="field-label">{title}</label>}
+			{label && <label className="field-label">{label}</label>}
 			<input
-				className={clsx(className, 'field-input masked', {
+				className={clsx('field-input masked', {
-					'field-input--nolabel': !title,
+					'field-input--nolabel': !label,
 				})}
 				ref={inputRef}
 				autoComplete="off"
@@ -133,5 +119,3 @@ const TextField: React.FC<TextFieldProps> = (props) => {
 		</div>
 	);
 };
-
-export default TextField;

packages/components/src/TimePicker/components/TimeList.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import List from '@treejs/components/List';
 import { Option } from '@treejs/types/options';
 
-type IProps = {
+export type TimeListProps = {
 	max: number;
 	min: number;
 	name: string;
@@ -15,7 +15,7 @@ type IProps = {
 	value?: string;
 };
 
-const TimeList: React.FC<IProps> = ({ title, onChange, min, max, step, selectedCode, scrollToCode, name }) => {
+const TimeList: React.FC<TimeListProps> = ({ title, onChange, min, max, step, selectedCode, scrollToCode, name }) => {
 	const handleChange = (option: Option) => {
 		onChange(option.code);
 	};

packages/components/src/TimePicker/components/TimePicker.tsx

@@ -2,14 +2,14 @@ import React, { FC, FocusEvent, useEffect, useState } from 'react';
 import { format } from 'date-fns';
 
 import { useModal } from '@treejs/components/Modal/hooks';
-import { StatusEnum } from '@treejs/types/common';
+import { InputElementType } from '@treejs/types/form';
-import { HTMLElementType } from '@treejs/types/form';
 import { Option } from '@treejs/types/options';
 
-import TextField from '../../TextField';
+import { TextField } from '../../TextField';
-import TimePickerModal from './TimePickerModal';
+import { TimePickerModal } from './TimePickerModal';
 
-export type TimePickerFieldProps<V = string> = {
+export type TimePickerProps<V = string> = Omit<
+	{
 		hour?: {
 			max?: number;
 			min?: number;
@@ -21,12 +21,12 @@ export type TimePickerFieldProps<V = string> = {
 			step: number;
 		};
 		scrollToCode?: Option['code'];
-	status?: StatusEnum;
+	} & InputElementType<V>,
-	value?: Date;
+	'onFocus' | 'onClick'
-} & HTMLElementType<V>;
+>;
 
-const TimePicker: FC<TimePickerFieldProps<Date>> = (props) => {
+export const TimePicker: FC<TimePickerProps<Date>> = (props) => {
-	const { onBlur, onChange, title, status, name, hour, minute, scrollToCode } = props;
+	const { onBlur, onChange, label, name, hour, minute, scrollToCode, ...others } = props;
 
 	const { openModal, registerModal } = useModal();
 
@@ -48,7 +48,7 @@ const TimePicker: FC<TimePickerFieldProps<Date>> = (props) => {
 	const handleOpenModal = (): void => {
 		registerModal({
 			id: name,
-			title,
+			title: label,
 			style: { width: 250 },
 			component: (
 				<TimePickerModal
@@ -66,16 +66,14 @@ const TimePicker: FC<TimePickerFieldProps<Date>> = (props) => {
 
 	return (
 		<TextField
+			{...others}
 			name={name}
-			title={title}
+			label={label}
 			onClick={handleOpenModal}
 			onFocus={handleOpenModal}
 			onBlur={handleBlur}
 			value={value ? format(value, 'HH:mm') : ''}
-			status={status}
 			readonly
 		/>
 	);
 };
-
-export default TimePicker;

packages/components/src/TimePicker/components/TimePickerModal.tsx

@@ -29,7 +29,7 @@ export type TimePickerModalProps = {
 	value?: Date;
 };
 
-const TimePickerModal: React.FC<TimePickerModalProps> = (props) => {
+export const TimePickerModal: React.FC<TimePickerModalProps> = (props) => {
 	const { onChange, modalName, scrollToCode } = props;
 
 	const { closeModal } = useModal();
@@ -110,5 +110,3 @@ const TimePickerModal: React.FC<TimePickerModalProps> = (props) => {
 		</>
 	);
 };
-
-export default TimePickerModal;

packages/components/src/TimePicker/index.ts

@@ -1,5 +1 @@
-import TimePicker, { TimePickerFieldProps } from './components/TimePicker';
+export { TimePicker, TimePickerProps } from './components/TimePicker';
-
-export default TimePicker;
-
-export { TimePickerFieldProps };

packages/forms/package.json

@@ -17,9 +17,9 @@
 	},
 	"dependencies": {
 		"@hookform/resolvers": "2.8.8",
-		"@treejs/components": "^0.19.17",
+		"@treejs/components": "workspace:^",
-		"@treejs/types": "^0.19.17",
+		"@treejs/types": "workspace:^",
-		"@treejs/utils": "^0.19.17",
+		"@treejs/utils": "workspace:^",
 		"react-hook-form": "7.27.1"
 	},
 	"peerDependencies": {

packages/forms/src/components/Field.tsx

@@ -1,14 +1,14 @@
 import React, { ReactElement } from 'react';
 
-import TimePickerField from '@treejs/forms/components/fields/TimePickerField';
+import { TimePickerField } from '@treejs/forms/components/fields/TimePickerField';
 import { IField } from '@treejs/forms/types';
 
 import { FIELD_TYPE } from '../constants';
-import CheckboxField from './fields/CheckboxField';
+import { CheckboxField } from './fields/CheckboxField';
-import DatePickerField from './fields/DatePickerField';
+import { DatePickerField } from './fields/DatePickerField';
-import RadioButtonField from './fields/RadioButtonField';
+import { RadioButtonField } from './fields/RadioButtonField';
-import SelectBoxField from './fields/SelectBoxField';
+import { SelectBoxField } from './fields/SelectBoxField';
-import TextField from './fields/TextField';
+import { TextField } from './fields/TextField';
 
 type IProps<F> = F & IField;
 

packages/forms/src/components/fields/CheckboxField.tsx

@@ -1,14 +1,14 @@
-import React, { useEffect } from 'react';
+import React, { FC, useEffect } from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 
-import CheckBoxComponent, { CheckboxFieldProps } from '@treejs/components/Checkbox';
+import { Checkbox, CheckboxProps } from '@treejs/components/Checkbox';
 import { StatusEnum } from '@treejs/types/common';
 import { isNilOrEmpty } from '@treejs/utils';
 
-type IProps = CheckboxFieldProps;
+export type CheckboxFieldProps = CheckboxProps;
 
-const CheckboxField = (props: IProps): React.ReactElement => {
+export const CheckboxField: FC<CheckboxFieldProps> = (props) => {
-	const { name, title, label, checked } = props;
+	const { name, checked, ...others } = props;
 
 	const { control } = useFormContext();
 	const {
@@ -24,18 +24,15 @@ const CheckboxField = (props: IProps): React.ReactElement => {
 
 	return (
 		<>
-			<CheckBoxComponent
+			<Checkbox
+				{...others}
 				name={name}
-				title={title}
 				checked={field.value}
 				onChange={field.onChange}
 				onBlur={field.onBlur}
-				label={label}
 				{...(error ? { status: StatusEnum.error } : {})}
 			/>
 			<div className="field-validationMessage">{error?.message}</div>
 		</>
 	);
 };
-
-export default CheckboxField;

packages/forms/src/components/fields/DatePickerField.tsx

@@ -1,14 +1,15 @@
-import React, { useEffect } from 'react';
+import React, { FC, useEffect } from 'react';
+import { omit } from 'ramda';
 import { useController, useFormContext } from 'react-hook-form';
 
-import DatePickerComponent, { DatePickerFieldProps } from '@treejs/components/DatePicker';
+import { DatePicker, DatePickerProps } from '@treejs/components/DatePicker';
 import { StatusEnum } from '@treejs/types/common';
 import { isNilOrEmpty } from '@treejs/utils';
 
-type IProps = DatePickerFieldProps<string>;
+export type DatePickerFieldProps = DatePickerProps<string>;
 
-const DatePickerField = (props: IProps): React.ReactElement => {
+export const DatePickerField: FC<DatePickerFieldProps> = (props) => {
-	const { name, title, value } = props;
+	const { name, value, ...others } = props;
 
 	const { control } = useFormContext();
 	const {
@@ -24,9 +25,9 @@ const DatePickerField = (props: IProps): React.ReactElement => {
 
 	return (
 		<>
-			<DatePickerComponent
+			<DatePicker
+				{...omit(['onClick', 'onFocus'], others)}
 				name={field.name}
-				title={title}
 				value={field.value}
 				onChange={field.onChange}
 				onBlur={field.onBlur}
@@ -36,5 +37,3 @@ const DatePickerField = (props: IProps): React.ReactElement => {
 		</>
 	);
 };
-
-export default DatePickerField;

packages/forms/src/components/fields/RadioButtonField.tsx

@@ -1,18 +1,16 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
 import { is } from 'ramda';
 import { useController, useFormContext } from 'react-hook-form';
 
-import RadioButtonComponent, {
+import { RadioButton, RadioButtonProps } from '@treejs/components/RadioButton';
-	RadioButtonFieldProps as IRadioButtonProps,
-} from '@treejs/components/RadioButton/components/RadioButton';
 import { StatusEnum } from '@treejs/types/common';
 import { Option } from '@treejs/types/options';
 import { isNilOrEmpty } from '@treejs/utils';
 
-export type IProps = IRadioButtonProps;
+export type RadioButtonFieldProps = RadioButtonProps;
 
-const RadioButtonField = (props: IProps): React.ReactElement => {
+export const RadioButtonField: FC<RadioButtonFieldProps> = (props) => {
-	const { name, title, options, horizontal, view: element, onClick, value, responsive } = props;
+	const { name, onClick, value, ...others } = props;
 
 	const { control } = useFormContext();
 	const {
@@ -38,21 +36,14 @@ const RadioButtonField = (props: IProps): React.ReactElement => {
 
 	return (
 		<>
-			<RadioButtonComponent
+			<RadioButton
+				{...others}
 				name={name}
-				title={title}
 				value={field.value}
-				options={options}
 				onClick={handleClick}
-				onBlur={field.onBlur}
-				horizontal={horizontal}
-				view={element}
-				responsive={responsive}
 				{...(error ? { status: StatusEnum.error } : {})}
 			/>
 			<div className="field-validationMessage">{error?.message}</div>
 		</>
 	);
 };
-
-export default RadioButtonField;

packages/forms/src/components/fields/SelectBoxField.tsx

@@ -1,16 +1,16 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
 import { is } from 'ramda';
 import { useController, useFormContext } from 'react-hook-form';
 
-import SelectBoxComponent, { SelectBoxFieldProps } from '@treejs/components/SelectBox';
+import { Selectbox, SelectBoxProps } from '@treejs/components/Selectbox';
-import { IOption } from '@treejs/components/SelectBox/types';
 import { StatusEnum } from '@treejs/types/common';
+import { Option } from '@treejs/types/options';
 import { isNilOrEmpty } from '@treejs/utils';
 
-export type IProps = SelectBoxFieldProps;
+export type SelectBoxFieldProps = SelectBoxProps;
 
-const SelectBox = (props: IProps): React.ReactElement => {
+export const SelectBoxField: FC<SelectBoxFieldProps> = (props) => {
-	const { name, title, options, autoComplete, disabled, onChange, value } = props;
+	const { name, onChange, value, ...others } = props;
 
 	const { control } = useFormContext();
 	const {
@@ -25,7 +25,7 @@ const SelectBox = (props: IProps): React.ReactElement => {
 	}, [value]);
 
 	const handleChange = useCallback(
-		(option: IOption, e: React.MouseEvent<HTMLInputElement>): void => {
+		(option: Option, e: React.MouseEvent<HTMLInputElement>): void => {
 			if (isNilOrEmpty(option)) {
 				field.onChange(null);
 				if (is(Function, onChange)) {
@@ -43,20 +43,15 @@ const SelectBox = (props: IProps): React.ReactElement => {
 
 	return (
 		<>
-			<SelectBoxComponent
+			<Selectbox
-				disabled={disabled}
+				{...others}
 				name={field.name}
-				title={title}
 				value={field.value}
-				options={options}
 				onChange={handleChange}
 				onBlur={field.onBlur}
-				autoComplete={autoComplete}
 				{...(error ? { status: StatusEnum.error } : {})}
 			/>
 			<div className="field-validationMessage">{error?.message}</div>
 		</>
 	);
 };
-
-export default SelectBox;

packages/forms/src/components/fields/TextField.tsx

@@ -1,15 +1,11 @@
 import React, { useEffect } from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 
-import TextFieldComponent, { TextFieldProps } from '@treejs/components/TextField';
+import { TextField as TextFieldComponent, TextFieldProps } from '@treejs/components/TextField';
 import { StatusEnum } from '@treejs/types/common';
 import { isNilOrEmpty } from '@treejs/utils';
 
-type IProps = TextFieldProps;
+export const TextField: React.FC<TextFieldProps> = ({ name, disabled, value, ...other }) => {
-
-const TextField: React.FC<IProps> = (props) => {
-	const { name, disabled, value, ...other } = props;
-
 	const { control } = useFormContext();
 
 	const {
@@ -26,17 +22,15 @@ const TextField: React.FC<IProps> = (props) => {
 	return (
 		<div className="form-field-container">
 			<TextFieldComponent
+				{...other}
 				name={name}
 				value={field.value}
 				onChange={field.onChange}
 				onBlur={field.onBlur}
 				disabled={disabled}
 				{...(error ? { status: StatusEnum.error } : {})}
-				{...other}
 			/>
 			<div className="field-validationMessage">{!disabled && error?.message}</div>
 		</div>
 	);
 };
-
-export default TextField;

packages/forms/src/components/fields/TimePickerField.tsx

@@ -1,13 +1,14 @@
-import React, { useEffect } from 'react';
+import React, { FC, useEffect } from 'react';
+import { omit } from 'ramda';
 import { useController, useFormContext } from 'react-hook-form';
 
-import TimePickerComponent, { TimePickerFieldProps } from '@treejs/components/TimePicker/components/TimePicker';
+import { TimePicker, TimePickerProps } from '@treejs/components/TimePicker/components/TimePicker';
 import { StatusEnum } from '@treejs/types/common';
 import { isNilOrEmpty } from '@treejs/utils';
 
-type IProps = TimePickerFieldProps<string>;
+export type TimePickerFieldProps = TimePickerProps<string>;
 
-const TimePickerField: React.FC<IProps> = ({ name, title, value, minute, hour }): React.ReactElement => {
+export const TimePickerField: FC<TimePickerFieldProps> = ({ name, value, ...others }) => {
 	const { control } = useFormContext();
 	const {
 		field,
@@ -22,19 +23,15 @@ const TimePickerField: React.FC<IProps> = ({ name, title, value, minute, hour })
 
 	return (
 		<>
-			<TimePickerComponent
+			<TimePicker
+				{...(error ? { status: StatusEnum.error } : {})}
+				{...omit(['onClick', 'onFocus'], others)}
 				name={field.name}
-				title={title}
 				value={field.value}
 				onChange={field.onChange}
 				onBlur={field.onBlur}
-				minute={minute}
-				hour={hour}
-				{...(error ? { status: StatusEnum.error } : {})}
 			/>
 			<div className="field-validationMessage">{error?.message}</div>
 		</>
 	);
 };
-
-export default TimePickerField;

packages/types/src/form.ts

@@ -1,10 +1,15 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
-export type HTMLElementType<Value> = {
+import { StatusEnum } from './common';
+
+export type InputElementType<Value> = {
+	disabled?: boolean;
+	label?: string | ReactNode;
 	name: string;
 	onBlur?: (value: Value | null, e: React.FocusEvent) => void;
 	onChange?: (value: Value | null, e: React.MouseEvent | React.ChangeEvent | null) => void;
 	onClick?: (value: Value, e: React.MouseEvent) => void;
 	onFocus?: (value: Value, e: React.FocusEvent) => void;
-	title?: string;
+	status?: StatusEnum;
+	value?: Value;
 };

pnpm-lock.yaml

@@ -189,16 +189,16 @@ importers:
         specifier: 1.8.3
         version: 1.8.3(react-redux@8.0.2)(react@17.0.2)
       '@treejs/auth':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../auth
       '@treejs/constants':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../constants
       '@treejs/types':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../types
       '@treejs/utils':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../utils
     publishDirectory: dist
 
@@ -208,13 +208,13 @@ importers:
         specifier: 1.8.3
         version: 1.8.3(react-redux@8.0.2)(react@17.0.2)
       '@treejs/constants':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../constants
       '@treejs/types':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../types
       '@treejs/utils':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../utils
       proxy-memoize:
         specifier: 1.0.0
@@ -227,19 +227,19 @@ importers:
         specifier: 1.8.3
         version: 1.8.3(react-redux@8.0.2)(react@17.0.2)
       '@treejs/constants':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../constants
       '@treejs/hooks':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../hooks
       '@treejs/localization':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../localization
       '@treejs/types':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../types
       '@treejs/utils':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../utils
       clsx:
         specifier: ^1.2.1
@@ -267,13 +267,13 @@ importers:
         specifier: 2.8.8
         version: 2.8.8(react-hook-form@7.27.1)
       '@treejs/components':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../components
       '@treejs/types':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../types
       '@treejs/utils':
-        specifier: ^0.19.17
+        specifier: workspace:^
         version: link:../utils
       react-hook-form:
         specifier: 7.27.1

stories/components/AddModal.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import Modals from '@treejs/components/Modal';
 import AddModalButton from '@treejs/components/Modal/components/AddModalButton';
 import { ModalWrapper } from '@treejs/components/Modal/context';
-import TextField from '@treejs/components/TextField';
+import { TextField } from '@treejs/components/TextField';
 
 type Story = StoryObj<typeof AddModalButton>;
 
@@ -46,7 +46,7 @@ export const Small: Story = {
 		modalTitle: 'Small modal',
 		component: (
 			<div>
-				<TextField name="search" title="Search" />
+				<TextField name="search" label="Search" />
 			</div>
 		),
 		style: {

stories/components/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { StoryObj } from '@storybook/react';
 
-import Checkbox from '@treejs/components/Checkbox';
+import { Checkbox } from '@treejs/components/Checkbox';
 
 type Story = StoryObj<typeof Checkbox>;
 
@@ -18,20 +18,20 @@ export default {
 
 export const Default: Story = {
 	args: {
-		title: 'Classic checkbox',
+		label: 'Classic checkbox',
 	},
 };
 
 export const WithLabel: Story = {
 	args: {
-		title: 'Classic checkbox',
+		label: 'Classic checkbox',
-		label: 'Checkbox value',
+		description: 'Checkbox value',
 	},
 };
 
 export const Checked: Story = {
 	args: {
-		title: 'Classic checkbox',
+		label: 'Classic checkbox',
 		checked: true,
 	},
 };

stories/components/DatePicker.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 
-import DatePicker from '@treejs/components/DatePicker';
+import { DatePicker } from '@treejs/components/DatePicker';
 import Modals from '@treejs/components/Modal';
 import { ModalWrapper } from '@treejs/components/Modal/context';
 
@@ -41,7 +41,7 @@ const meta: Meta<typeof DatePicker> = {
 export const Default: Story = {
 	args: {
 		name: 'datePicker',
-		title: 'Choose date',
+		label: 'Choose date',
 		onClick: action('click'),
 	},
 };

stories/components/RadioButton.stories.tsx

@@ -3,8 +3,8 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import BuildingStoreIcon from '@treejs/components/Icons/BuildingStore';
 import UserTieIcon from '@treejs/components/Icons/UserTie';
-import RadioButton from '@treejs/components/RadioButton';
+import { RadioButton } from '@treejs/components/RadioButton';
-import CustomOptions from '@treejs/components/RadioButton/components/CustomOptions';
+import { CustomOptions } from '@treejs/components/RadioButton/components/CustomOptions';
 
 type Story = StoryObj<typeof RadioButton>;
 
@@ -27,7 +27,7 @@ export default {
 export const Default: Story = {
 	args: {
 		name: 'default',
-		title: 'Classic radio button',
+		label: 'Classic radio button',
 		options: [
 			{ name: 'item 1', code: 'item1' },
 			{ name: 'item 2', code: 'item2' },
@@ -38,7 +38,7 @@ export const Default: Story = {
 export const DefaultDisabled: Story = {
 	args: {
 		name: 'default',
-		title: 'Classic radio button',
+		label: 'Classic radio button',
 		options: [
 			{ name: 'item 1', code: 'item1', disabled: true },
 			{ name: 'item 2', code: 'item2' },
@@ -50,7 +50,7 @@ export const HorizontalView: Story = {
 	args: {
 		name: 'horizontal',
 		horizontal: true,
-		title: 'Horizontal',
+		label: 'Horizontal',
 		options: [
 			{ name: 'item 1', code: 'item1' },
 			{ name: 'item 2', code: 'item2' },
@@ -62,7 +62,7 @@ export const CustomRender: Story = {
 	args: {
 		name: 'custom',
 		horizontal: true,
-		title: 'Custom Render',
+		label: 'Custom Render',
 		options: [
 			{ name: 'Právnická osoba', code: 'legal' },
 			{ name: 'Fyzická osoba', code: 'natural' },
@@ -75,7 +75,7 @@ export const DisabledCustomRender: Story = {
 	args: {
 		name: 'disabled',
 		horizontal: true,
-		title: 'Custom Render',
+		label: 'Custom Render',
 		options: [
 			{ name: 'Právnická osoba', code: 'legal', disabled: true },
 			{ name: 'Fyzická osoba', code: 'natural' },
@@ -88,7 +88,7 @@ export const Responsive: Story = {
 	args: {
 		name: 'responsive',
 		responsive: true,
-		title: 'Responsive',
+		label: 'Responsive',
 		options: [
 			{ name: 'Právnická osoba', code: 'legal', disabled: true },
 			{ name: 'Fyzická osoba', code: 'natural' },

stories/components/Selectbox.stories.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
-import Modals from '@treejs/components/Modal/components/Modals';
+import { Modals } from '@treejs/components/Modal/components/Modals';
 import { ModalWrapper } from '@treejs/components/Modal/context';
-import SelectBox from '@treejs/components/SelectBox';
+import { Selectbox } from '@treejs/components/Selectbox';
 
-type Story = StoryObj<typeof SelectBox>;
+type Story = StoryObj<typeof Selectbox>;
 
 const description = `
-\`import SelectBox from '@treejs/components/SelectBox';\`
+\`import Selectbox from '@treejs/components/Selectbox';\`
 
 You need to wrap this component with \`ModalWrapper\` component.
 `;
 
 export default {
-	component: SelectBox,
+	component: Selectbox,
 	parameters: {
 		docs: {
 			description: {
@@ -35,8 +35,8 @@ export default {
 
 export const Default: Story = {
 	args: {
-		name: 'selectBox',
+		name: 'selectbox',
-		title: 'Zvolte den v týdnu',
+		label: 'Zvolte den v týdnu',
 		options: [
 			{ name: 'Pondělí', code: 'po' },
 			{ name: 'Úterý', code: 'ut' },
@@ -52,8 +52,8 @@ export const Default: Story = {
 export const Atocomplete: Story = {
 	args: {
 		autoComplete: true,
-		name: 'selectBoxAutoComplete',
+		name: 'selectboxAutoComplete',
-		title: 'Zvolte den v týdnu',
+		label: 'Zvolte den v týdnu',
 		options: [
 			{ name: 'Pondělí', code: 'po' },
 			{ name: 'Úterý', code: 'ut' },

stories/components/TextField.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import TextField from '@treejs/components/TextField';
+import { TextField } from '@treejs/components/TextField';
 
 import { StatusEnum } from '../../packages/types/src/common';
 
@@ -21,7 +21,7 @@ export default {
 export const Default: Story = {
 	args: {
 		name: 'field',
-		title: 'TextField',
+		label: 'TextField',
 	},
 };
 
@@ -43,7 +43,7 @@ export const WithoutLabelAndDisabled: Story = {
 export const DisabledWithValue: Story = {
 	args: {
 		name: 'field',
-		title: 'Disabled with value',
+		label: 'Disabled with value',
 		value: 'Value',
 		disabled: true,
 	},
@@ -52,42 +52,42 @@ export const DisabledWithValue: Story = {
 export const DisabledWithoutValue: Story = {
 	args: {
 		name: 'field',
-		title: 'Disabled without value',
+		label: 'Disabled without value',
 		disabled: true,
 	},
 };
 
-export const Error: Story = {
+export const StatusError: Story = {
 	args: {
 		name: 'error',
-		title: 'Error',
+		label: 'Error',
 		value: ':-(',
 		status: StatusEnum.error,
 	},
 };
 
-export const Warning: Story = {
+export const StatusWarning: Story = {
 	args: {
 		name: 'warning',
-		title: 'Warning',
+		label: 'Warning',
 		value: ':-O',
 		status: StatusEnum.warning,
 	},
 };
 
-export const Information: Story = {
+export const StatusInformation: Story = {
 	args: {
 		name: 'info',
-		title: 'Information',
+		label: 'Information',
 		value: ';-)',
 		status: StatusEnum.info,
 	},
 };
 
-export const Success: Story = {
+export const StatusSuccess: Story = {
 	args: {
 		name: 'success',
-		title: 'Success',
+		label: 'Success',
 		value: ':-)',
 		status: StatusEnum.success,
 	},
@@ -96,7 +96,7 @@ export const Success: Story = {
 export const WithMask: Story = {
 	args: {
 		name: 'withMask',
-		title: 'With mask',
+		label: 'With mask',
 		mask: '999 99',
 		value: '11111',
 	},

stories/components/TimePicker.stories.tsx

@@ -4,7 +4,7 @@ import { setHours } from 'date-fns';
 
 import Modals from '@treejs/components/Modal/components/Modals';
 import { ModalWrapper } from '@treejs/components/Modal/context';
-import TimePicker from '@treejs/components/TimePicker';
+import { TimePicker } from '@treejs/components/TimePicker';
 
 type Story = StoryObj<typeof TimePicker>;
 
@@ -38,7 +38,7 @@ const date = new Date();
 export const Default: Story = {
 	args: {
 		name: 'datePicker',
-		title: 'Choose time',
+		label: 'Choose time',
 		value: setHours(date, 20),
 	},
 };
@@ -53,7 +53,7 @@ export const WithoutLabel: Story = {
 export const RestrictedTimes: Story = {
 	args: {
 		name: 'datePicker',
-		title: 'Choose time',
+		label: 'Choose time',
 		value: setHours(date, 20),
 		minute: {
 			step: 5,

stories/components/Title.stories.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Title } from '@treejs/components/Title';
+import { Title, TitleSizeEnum } from '@treejs/components/Title';
-import { TitleSizeEnum } from '@treejs/components/Title';
 import { DirectionEnum } from '@treejs/types/common';
 
 type Story = StoryObj<typeof Title>;

stories/form/components/ExampleForm.tsx

@@ -2,16 +2,16 @@ import React, { useCallback } from 'react';
 import * as Yup from 'yup';
 
 import Button from '@treejs/components/Button';
-import { CheckboxFieldProps } from '@treejs/components/Checkbox';
+import { CheckboxProps } from '@treejs/components/Checkbox';
-import { DatePickerFieldProps } from '@treejs/components/DatePicker';
+import { DatePickerProps } from '@treejs/components/DatePicker';
 import { Grid } from '@treejs/components/Grid';
 import { GridCol } from '@treejs/components/GridCol';
 import BuildingStoreIcon from '@treejs/components/Icons/BuildingStore';
-import { RadioButtonFieldProps } from '@treejs/components/RadioButton';
-import { SelectBoxFieldProps } from '@treejs/components/SelectBox';
 import { TextFieldProps } from '@treejs/components/TextField';
-import { TimePickerFieldProps } from '@treejs/components/TimePicker';
 import Field from '@treejs/forms/components/Field';
+import { RadioButtonFieldProps } from '@treejs/forms/components/fields/RadioButtonField';
+import { SelectBoxFieldProps } from '@treejs/forms/components/fields/SelectBoxField';
+import { TimePickerFieldProps } from '@treejs/forms/components/fields/TimePickerField';
 import Form from '@treejs/forms/components/Form';
 import { FIELD_TYPE } from '@treejs/forms/constants';
 import { FormSubmit } from '@treejs/forms/types';
@@ -62,29 +62,29 @@ const ExampleForm = () => {
 		<Form<FormData> onSubmit={onSubmit} methods={formMethods}>
 			<Grid cols={3}>
 				<GridCol colSpan={3}>
-					<Field<TextFieldProps> name="text" title="Input" component={FIELD_TYPE.TEXT_FIELD} />
+					<Field<TextFieldProps> name="text" label="Input" component={FIELD_TYPE.TEXT_FIELD} />
-					<Field<TextFieldProps> name="text" title={<BuildingStoreIcon />} component={FIELD_TYPE.TEXT_FIELD} />
+					<Field<TextFieldProps> name="text" label={<BuildingStoreIcon />} component={FIELD_TYPE.TEXT_FIELD} />
-					<Field<CheckboxFieldProps>
+					<Field<CheckboxProps>
 						name="checkbox"
-						title="Checkbox"
+						label="Checkbox"
-						label="Do you Agree?"
+						description="Do you Agree?"
 						component={FIELD_TYPE.CHECKBOX}
 					/>
 					<Field<RadioButtonFieldProps>
 						name="radiobutton"
-						title="Radio Button"
+						label="Radio Button"
 						horizontal
 						options={radioOptions}
 						component={FIELD_TYPE.RADIO_BUTTON}
 					/>
 					<Field<SelectBoxFieldProps>
 						name="selectBox"
-						title="SelectBox"
+						label="SelectBox"
 						options={selectBoxOptions}
 						component={FIELD_TYPE.SELECT_BOX}
 					/>
-					<Field<DatePickerFieldProps> name="datePicker" title="DatePicker" component={FIELD_TYPE.DATE_PICKER} />
+					<Field<DatePickerProps> name="datePicker" label="DatePicker" component={FIELD_TYPE.DATE_PICKER} />
-					<Field<TimePickerFieldProps> name="timePicker" title="TimePicker" component={FIELD_TYPE.TIME_PICKER} />
+					<Field<TimePickerFieldProps> name="timePicker" label="TimePicker" component={FIELD_TYPE.TIME_PICKER} />
 				</GridCol>
 				<GridCol start={2} end={2}>
 					<Button type="submit" label="Send" status={StatusEnum.success} />