Created namespace for form controls

src/utils/forms/FormGroupContainer.tsx

@@ -0,0 +1,36 @@
+import { FC, useRef } from 'react';
+import { v4 as uuid } from 'uuid';
+import { InputType } from 'reactstrap/types/lib/Input';
+import { FormGroup } from 'reactstrap';
+
+export interface FormGroupContainerProps {
+  value: string;
+  onChange: (newValue: string) => void;
+  id?: string;
+  type?: InputType;
+  required?: boolean;
+  placeholder?: string;
+  className?: string;
+  labelClassName?: string;
+}
+
+export const FormGroupContainer: FC<FormGroupContainerProps> = (
+  { children, value, onChange, id, type, required, placeholder, className, labelClassName },
+) => {
+  const forId = useRef<string>(id ?? uuid());
+
+  return (
+    <FormGroup className={className ?? ''}>
+      {children && <label htmlFor={forId.current} className={labelClassName ?? ''}>{children}:</label>}
+      <input
+        className="form-control"
+        type={type ?? 'text'}
+        id={forId.current}
+        value={value}
+        required={required ?? true}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </FormGroup>
+  );
+};

src/utils/forms/FormText.tsx

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+
+export const FormText: FC = ({ children }) => <small className="form-text text-muted d-block">{children}</small>;