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,18 +52,16 @@ const DatePicker: React.FC<IDatePickerFieldProps> = (props) => {
 	}, [name, value, title]);
 
 	return (
-		<div>
+		<TextField
-			<TextField
+			name={name}
-				name={name}
+			title={title}
-				title={title}
+			onClick={handleOpenModal}
-				onClick={handleOpenModal}
+			onFocus={handleOpenModal}
-				onFocus={handleOpenModal}
+			onBlur={handleBlur}
-				onBlur={handleBlur}
+			value={value}
-				value={value}
+			status={status}
-				status={status}
+			readonly
-				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', {
+				className={cx('textfield-input masked', {
-					'field-input--info': status === STATUS.info,
+					'textfield-input--info': status === STATUS.info,
-					'field-input--success': status === STATUS.success,
+					'textfield-input--success': status === STATUS.success,
-					'field-input--warning': status === STATUS.warning,
+					'textfield-input--warning': status === STATUS.warning,
-					'field-input--error': status === STATUS.error,
+					'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} />;
+			render = <TimePickerField {...other} />;
-		default:
+			break;
-			return null;
 	}
+
+	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,29 +44,37 @@ const field = (theme) => ({
 				cursor: 'auto',
 			},
 		},
-		'.field-icon': {
+	},
-			position: 'absolute',
+	'.checkbox-container': {
-			top: '1.27rem',
+		position: 'relative',
-			right: '0',
+		marginTop: '1rem',
-			padding: '0.51rem',
+	},
-			color: theme('colors.primary.DEFAULT'),
+	'.radiobutton-container': {
-			fontSize: '1.125rem',
+		position: 'relative',
-			lineHeight: '1.25rem',
+		marginTop: '1rem',
-			'&--clear': {
+	},
-				display: 'none',
+	'.field-icon': {
-				borderRadius: '0 2px 2px 0',
+		position: 'absolute',
-				color: theme('colors.error.dark'),
+		top: '1.27rem',
-			},
+		right: '0',
-			'.field-input:disabled &': {
+		padding: '0.51rem',
-				color: theme('colors.gray.500'),
+		color: theme('colors.primary.DEFAULT'),
-				'& svg': {
+		fontSize: '1.125rem',
-					cursor: 'auto',
+		lineHeight: '1.25rem',
-				},
+		'&--clear': {
-			},
+			display: 'none',
-			'.field-input:hover + &, .field-input + &:hover': {
+			borderRadius: '0 2px 2px 0',
-				display: 'inline',
+			color: theme('colors.error.dark'),
+		},
+		'.field-input:disabled &': {
+			color: theme('colors.gray.500'),
+			'& svg': {
+				cursor: 'auto',
 			},
 		},
+		'.field-input:hover + &, .field-input + &:hover': {
+			display: 'inline',
+		},
 	},
 	'.field-label': {
 		fontSize: '0.8rem',
@@ -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 { ICheckboxFieldProps } from '@treejs/components/Checkbox';
-import type { IDatePickerFieldProps } from '@treejs/components/DatePicker';
+import { IDatePickerFieldProps } from '@treejs/components/DatePicker';
 import { Grid, GridCol } from '@treejs/components/Grid';
-import type { IRadioButtonFieldProps } from '@treejs/components/RadioButton/components/RadioButton';
+import { IRadioButtonFieldProps } from '@treejs/components/RadioButton/components/RadioButton';
-import type { ISelectBoxFieldProps } from '@treejs/components/SelectBox';
+import { ISelectBoxFieldProps } from '@treejs/components/SelectBox';
-import type { ITextFieldProps } from '@treejs/components/TextField';
+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';