feat: Update InputForm component

- Perbarui docs untuk component Input dan InputForm
- Perbarui component InputForm agar bekerja dengan helper text, error, dan label/input

libs/ui/src/molecules/input-form/input-form.tsx

@@ -5,6 +5,7 @@ import {
   ReactElement,
 } from 'react';
 import { Input } from '../../atoms';
+import { cn } from '@imphnen-frontend-service/utils';
 
 type TInputType = 'text' | 'email';
 type TInputSize = 'sm' | 'md' | 'lg';
@@ -17,6 +18,8 @@ type TInputFormProps = Omit<
   type?: TInputType;
   size?: TInputSize;
   error?: string;
+  helperText?: string;
+  htmlFor?: string;
 };
 
 export const InputForm: FC<TInputFormProps> = ({
@@ -25,18 +28,35 @@ export const InputForm: FC<TInputFormProps> = ({
   type = 'text',
   size = 'md',
   error,
+  helperText,
+  htmlFor,
+  className,
   ...rest
 }): ReactElement => {
   return (
     <div className="flex gap-[8px] flex-col">
-      <div className="self-start text-p3 font-medium">{label}</div>
+      <label htmlFor={htmlFor} className="self-start text-p3 font-medium">
+        {label}
+      </label>
       <Input
+        {...(htmlFor && { id: htmlFor })}
         placeholder={placeholder}
         type={type}
         size={size}
-        error={error}
+        className={cn(
+          error &&
+            'border-danger-500 hover:border-danger-500 focus:outline-danger-500',
+          className
+        )}
         {...rest}
       />
+      {error ? (
+        <p className="text-danger-500 text-xs mt-1">{error}</p>
+      ) : (
+        helperText && (
+          <p className="text-neutral-500 text-xs mt-1">{helperText}</p>
+        )
+      )}
     </div>
   );
 };