feat: Update InputForm, Input, and auth page

- Perbaiki page login ke halaman utama backoffice
- Perbaiki component Input dan InputForm

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

@@ -34,36 +34,48 @@ type Story = StoryObj<typeof meta>;
 
 export const Large: Story = {
   args: {
-    label: 'Description',
-    placeholder: 'Enter description',
+    label: 'Label',
+    placeholder: 'Placeholder',
     type: 'text',
     size: 'lg',
+    helperText: 'Helper Text',
   },
 };
 
 export const Medium: Story = {
   args: {
-    label: 'Address',
-    placeholder: 'Enter your address',
+    label: 'Label',
+    placeholder: 'Placeholder',
     type: 'text',
     size: 'md',
+    helperText: 'Helper Text',
   },
 };
 
 export const Small: Story = {
   args: {
-    label: 'Phone',
-    placeholder: 'Enter your phone number',
+    label: 'Label',
+    placeholder: 'Placeholder',
     type: 'text',
     size: 'sm',
+    helperText: 'Helper Text',
   },
 };
 
 export const Default: Story = {
   args: {
-    label: 'Email',
-    placeholder: 'Enter your email',
-    type: 'email',
+    label: 'Default',
+    placeholder: 'Enter your name',
+    type: 'text',
+    size: 'md',
+  },
+};
+
+export const PasswordInput: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Enter your password',
+    type: 'password',
     size: 'md',
   },
 };
@@ -80,8 +92,8 @@ export const WithHelperText: Story = {
 
 export const WithoutHelperText: Story = {
   args: {
-    label: 'Password',
-    placeholder: 'Enter your password',
+    label: 'Username',
+    placeholder: 'Enter your username',
     type: 'text',
     size: 'md',
   },
@@ -104,6 +116,16 @@ export const WithHtmlFor: Story = {
     type: 'text',
     size: 'md',
     htmlFor: 'fullname-input',
-    helperText: 'Enter your legal full name',
+    helperText: 'Click on the label',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled',
+    placeholder: 'This field is disabled',
+    type: 'text',
+    size: 'md',
+    disabled: true,
   },
 };

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

@@ -7,7 +7,7 @@ import {
 import { Input } from '../../atoms';
 import { cn } from '@imphnen-frontend-service/utils';
 
-type TInputType = 'text' | 'email';
+type TInputType = 'text' | 'email' | 'password';
 type TInputSize = 'sm' | 'md' | 'lg';
 
 type TInputFormProps = Omit<
@@ -27,7 +27,7 @@ type TInputFormProps = Omit<
 const sizeClasses: Record<TInputSize, { label: string; helperText: string }> = {
   lg: {
     label: 'text-p3 font-medium',
-    helperText: 'text-label2 font-normal',
+    helperText: 'text-label3 font-normal',
   },
   md: {
     label: 'text-label1 font-medium',
@@ -35,7 +35,7 @@ const sizeClasses: Record<TInputSize, { label: string; helperText: string }> = {
   },
   sm: {
     label: 'text-label2 font-medium',
-    helperText: 'text-label3 font-normal',
+    helperText: 'text-label2 font-normal',
   },
 };
 
@@ -53,7 +53,13 @@ export const InputForm: FC<TInputFormProps> = ({
 }): ReactElement => {
   return (
     <div className="flex gap-[8px] flex-col">
-      <label htmlFor={htmlFor} className={sizeClasses[size].label}>
+      <label
+        htmlFor={htmlFor}
+        className={cn(
+          'items-start justify-item-start text-start',
+          sizeClasses[size].label
+        )}
+      >
         {label}
       </label>
       <Input
@@ -74,7 +80,7 @@ export const InputForm: FC<TInputFormProps> = ({
         <p className="text-danger-500 text-xs mt-1">{error}</p>
       ) : (
         helperText && (
-          <p className={`${sizeClasses[size].helperText} text-xs mt-1`}>
+          <p className={cn('text-cs mt-1', sizeClasses[size].helperText)}>
             {helperText}
           </p>
         )