feat(frontend): updated `TextField` component

services/frontend/src/components/global/FormElements/InputField.tsx

@@ -1,48 +1,49 @@
-import _ from "lodash";
+import lodash from "lodash";
 import { useFormikContext } from "formik";
+import { FunctionComponent, ReactElement } from "react";
 
-interface Props {
+export interface ITextFieldProps {
   name: string;
   help?: string;
   [key: string]: any;
 }
 
-const TextField = (props: Props) => {
+const TextField: FunctionComponent<ITextFieldProps> = (
-  const { label, name, help, ...otherProps } = props;
+  props: ITextFieldProps
+): ReactElement => {
+  const { label, name, help, required, ...otherProps } = props;
   const formik = useFormikContext();
-  const error = _.get(formik.touched, name) && _.get(formik.errors, name);
+  const error =
+    lodash.get(formik.touched, name) && lodash.get(formik.errors, name);
 
   return (
-    <div className="relative pb-3 flex-auto">
+    <div>
-      <div className="grid grid-cols-6 gap-4">
+      {label && (
-        <div className="col-span-3">
         <label
           htmlFor={name}
           className="block text-xs font-medium text-gray-700"
         >
-            {label}
+          {label + (required ? "*" : "")}
         </label>
-          <div className="mt-1">
+      )}
+
       <input
         id={name}
         name={name}
         type="text"
         autoComplete="none"
-              className="input-util"
+        className="input-util mt-1"
+        required={required}
         onBlur={formik.handleBlur}
         onChange={formik.handleChange}
+        value={lodash.get(formik.values, name)}
         {...otherProps}
-              value={_.get(formik.values, name)}
       />
-            {
+
       <div className="mt-1 text-xs text-red-600">
-                {error && <div className="caption">{error}</div>}
+        {error && <span className="caption">{error}</span>}
         {!error && help}
       </div>
-            }
-          </div>
-        </div>
-      </div>
     </div>
   );
 };