feat(frontend): updated `TextField` component

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

@@ -1,47 +1,48 @@
-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
-          <label
+          htmlFor={name}
-            htmlFor={name}
+          className="block text-xs font-medium text-gray-700"
-            className="block text-xs font-medium text-gray-700"
+        >
-          >
+          {label + (required ? "*" : "")}
-            {label}
+        </label>
-          </label>
+      )}
-          <div className="mt-1">
+
-            <input
+      <input
-              id={name}
+        id={name}
-              name={name}
+        name={name}
-              type="text"
+        type="text"
-              autoComplete="none"
+        autoComplete="none"
-              className="input-util"
+        className="input-util mt-1"
-              onBlur={formik.handleBlur}
+        required={required}
-              onChange={formik.handleChange}
+        onBlur={formik.handleBlur}
-              {...otherProps}
+        onChange={formik.handleChange}
-              value={_.get(formik.values, name)}
+        value={lodash.get(formik.values, name)}
-            />
+        {...otherProps}
-            {
+      />
-              <div className="mt-1 text-xs text-red-600">
+
-                {error && <div className="caption">{error}</div>}
+      <div className="mt-1 text-xs text-red-600">
-                {!error && help}
+        {error && <span className="caption">{error}</span>}
-              </div>
+        {!error && help}
-            }
-          </div>
-        </div>
       </div>
     </div>
   );