DEV;Wrap all Field to field-container class

packages/components/src/Checkbox/index.tsx

@@ -39,7 +39,7 @@ const Checkbox: React.FC<ICheckboxFieldProps> = (props) => {
 	);
 
 	return (
-		<div className="relative mt-1">
+		<div className="checkbox-container">
 			<label className="cursor-pointer text-primary" htmlFor={name} onClick={handleClick}>
 				<div className="block text-black pb-2 field-label">{title}</div>
 				<FontAwesomeIcon size="lg" icon={checked ? 'check-square' : 'square'} />

packages/components/src/DatePicker/index.tsx

@@ -52,7 +52,6 @@ const DatePicker: React.FC<IDatePickerFieldProps> = (props) => {
 	}, [name, value, title]);
 
 	return (
-		<div>
 		<TextField
 			name={name}
 			title={title}
@@ -63,7 +62,6 @@ const DatePicker: React.FC<IDatePickerFieldProps> = (props) => {
 			status={status}
 			readonly
 		/>
-		</div>
 	);
 };
 

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

@@ -87,7 +87,7 @@ const RadioButton: React.FC<IRadioButtonFieldProps> = (props) => {
 	}, [value, options, props.name]);
 
 	return (
-		<div className="relative mt-1">
+		<div className="radiobutton-container">
 			<div className="block text-black pb-2 field-label">{title}</div>
 			{horizontal ? <div className="flex">{optionElements}</div> : optionElements}
 		</div>

packages/components/src/TextField/index.tsx

@@ -112,16 +112,16 @@ const TextField: React.FC<ITextFieldProps> = (props) => {
 	);
 
 	return (
-		<div className="field-container">
+		<div className="textfield-container">
 			<label className="field-label" htmlFor={name}>
 				{title}
 			</label>
 			<input
-				className={cx('field-input masked', {
-					'field-input--info': status === STATUS.info,
-					'field-input--success': status === STATUS.success,
-					'field-input--warning': status === STATUS.warning,
-					'field-input--error': status === STATUS.error,
+				className={cx('textfield-input masked', {
+					'textfield-input--info': status === STATUS.info,
+					'textfield-input--success': status === STATUS.success,
+					'textfield-input--warning': status === STATUS.warning,
+					'textfield-input--error': status === STATUS.error,
 				})}
 				ref={inputRef}
 				autoComplete="off"

packages/components/src/TimePicker/index.tsx

@@ -1,3 +1,4 @@
-import TimePicker from './components/TimePicker';
+import TimePicker, { ITimePickerFieldProps } from './components/TimePicker';
 
+export { ITimePickerFieldProps };
 export default TimePicker;

packages/forms/src/components/Field.tsx

@@ -15,22 +15,29 @@ type IProps<F> = F & IField;
 function Field<F>(props: IProps<F>) {
 	const { component, ...other } = props as any;
 
+	let render = null;
 	switch (component) {
 		case FIELD_TYPE.TEXT_FIELD:
-			return <TextField {...other} />;
+			render = <TextField {...other} />;
+			break;
 		case FIELD_TYPE.CHECKBOX:
-			return <CheckboxField {...other} />;
+			render = <CheckboxField {...other} />;
+			break;
 		case FIELD_TYPE.RADIO_BUTTON:
-			return <RadioButtonField {...other} />;
+			render = <RadioButtonField {...other} />;
+			break;
 		case FIELD_TYPE.SELECT_BOX:
-			return <SelectBoxField {...other} />;
+			render = <SelectBoxField {...other} />;
+			break;
 		case FIELD_TYPE.DATE_PICKER:
-			return <DatePickerField {...other} />;
+			render = <DatePickerField {...other} />;
+			break;
 		case FIELD_TYPE.TIME_PICKER:
-			return <TimePickerField {...other} />;
-		default:
-			return null;
+			render = <TimePickerField {...other} />;
+			break;
 	}
+
+	return <div className="field-container">{render}</div>;
 }
 
 export default Field;

packages/forms/src/types.ts

@@ -6,4 +6,5 @@ export type FormSubmit<FormData> = SubmitHandler<FormData>;
 
 export type IField = {
 	component: FIELD_TYPE;
+	name: string;
 };

packages/styles/src/components/field.js

@@ -1,10 +1,13 @@
 const field = (theme) => ({
 	'.field-container': {
+		marginBottom: '1rem',
+	},
+	'.textfield-container': {
 		position: 'relative',
 		'& svg': {
 			cursor: 'pointer',
 		},
-		'.field-input': {
+		'.textfield-input': {
 			border: 'none',
 			backgroundColor: theme('colors.gray.50'),
 			padding: '0.5rem',
@@ -41,6 +44,15 @@ const field = (theme) => ({
 				cursor: 'auto',
 			},
 		},
+	},
+	'.checkbox-container': {
+		position: 'relative',
+		marginTop: '1rem',
+	},
+	'.radiobutton-container': {
+		position: 'relative',
+		marginTop: '1rem',
+	},
 	'.field-icon': {
 		position: 'absolute',
 		top: '1.27rem',
@@ -64,7 +76,6 @@ const field = (theme) => ({
 			display: 'inline',
 		},
 	},
-	},
 	'.field-label': {
 		fontSize: '0.8rem',
 		lineHeight: '1.25rem',
@@ -73,7 +84,6 @@ const field = (theme) => ({
 	'.field-validationMessage': {
 		color: theme('colors.error.DEFAULT'),
 		textAlign: 'left',
-		marginBottom: '0.5rem',
 		fontSize: '0.7rem',
 	},
 });

packages/types/src/form.ts

@@ -6,5 +6,5 @@ export type IHTMLElement<Value> = {
 	onChange?: (value: Value, e: React.MouseEvent | React.ChangeEvent | null) => void;
 	onClick?: (value: Value, e: React.MouseEvent) => void;
 	onFocus?: (value: Value, e: React.FocusEvent) => void;
-	title: string;
+	title?: string;
 };

stories/form/components/ExampleForm.tsx

@@ -3,12 +3,12 @@ import React, { useCallback } from 'react';
 import * as Yup from 'yup';
 
 import Button from '@treejs/components/Button';
-import type { ICheckboxFieldProps } from '@treejs/components/Checkbox';
-import type { IDatePickerFieldProps } from '@treejs/components/DatePicker';
+import { ICheckboxFieldProps } from '@treejs/components/Checkbox';
+import { IDatePickerFieldProps } from '@treejs/components/DatePicker';
 import { Grid, GridCol } from '@treejs/components/Grid';
-import type { IRadioButtonFieldProps } from '@treejs/components/RadioButton/components/RadioButton';
-import type { ISelectBoxFieldProps } from '@treejs/components/SelectBox';
-import type { ITextFieldProps } from '@treejs/components/TextField';
+import { IRadioButtonFieldProps } from '@treejs/components/RadioButton/components/RadioButton';
+import { ISelectBoxFieldProps } from '@treejs/components/SelectBox';
+import { ITextFieldProps } from '@treejs/components/TextField';
 import { ITimePickerFieldProps } from '@treejs/components/TimePicker';
 import Field from '@treejs/forms/components/Field';
 import Form from '@treejs/forms/components/Form';