From 631684cb05347b3e646e6ba6de3866b519aeb9f2 Mon Sep 17 00:00:00 2001
From: Hafid Nur <hafidnurazis@gmail.com>
Date: Thu, 27 Mar 2025 06:00:03 +0700
Subject: [PATCH] feat: Update InputForm to handle different sizes

- Tambah spec test pada komponen InputForm
- Tambah autodocs pada komponen Input
---
 libs/ui/src/atoms/input/input.stories.tsx     |  3 +-
 .../molecules/input-form/input-form.spec.tsx  | 20 +++++++++++++
 .../src/molecules/input-form/input-form.tsx   | 28 +++++++++++++++++--
 3 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 libs/ui/src/molecules/input-form/input-form.spec.tsx

diff --git a/libs/ui/src/atoms/input/input.stories.tsx b/libs/ui/src/atoms/input/input.stories.tsx
index 43ba621..1e2b442 100644
--- a/libs/ui/src/atoms/input/input.stories.tsx
+++ b/libs/ui/src/atoms/input/input.stories.tsx
@@ -14,7 +14,8 @@ const meta: Meta<typeof Input> = {
       options: ['sm', 'md', 'lg'],
     },
   },
-};
+  tags: ['autodocs'],
+} satisfies Meta<typeof Input>;
 
 export default meta;
 type Story = StoryObj<typeof Input>;
diff --git a/libs/ui/src/molecules/input-form/input-form.spec.tsx b/libs/ui/src/molecules/input-form/input-form.spec.tsx
new file mode 100644
index 0000000..f0dc650
--- /dev/null
+++ b/libs/ui/src/molecules/input-form/input-form.spec.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import InputForm from './input-form';
+
+describe('InputForm Component', () => {
+  it('renders correctly with disabled prop', () => {
+    render(<InputForm label="Test Label" disabled={true} />);
+
+    const input = screen.getByLabelText('Test Label');
+    expect(input).toBeDisabled();
+    expect(input).toHaveClass('opacity-50 cursor-not-allowed');
+  });
+
+  it('renders correctly without disabled prop', () => {
+    render(<InputForm label="Test Label" disabled={false} />);
+
+    const input = screen.getByLabelText('Test Label');
+    expect(input).not.toBeDisabled();
+    expect(input).not.toHaveClass('opacity-50 cursor-not-allowed');
+  });
+});
diff --git a/libs/ui/src/molecules/input-form/input-form.tsx b/libs/ui/src/molecules/input-form/input-form.tsx
index 1aa625c..f7078cd 100644
--- a/libs/ui/src/molecules/input-form/input-form.tsx
+++ b/libs/ui/src/molecules/input-form/input-form.tsx
@@ -18,10 +18,27 @@ type TInputFormProps = Omit<
   type?: TInputType;
   size?: TInputSize;
   error?: string;
+  disabled?: boolean;
+
   helperText?: string;
   htmlFor?: string;
 };
 
+const sizeClasses: Record<TInputSize, { label: string; helperText: string }> = {
+  lg: {
+    label: 'text-p3 font-medium',
+    helperText: 'text-label2 font-normal',
+  },
+  md: {
+    label: 'text-label1 font-medium',
+    helperText: 'text-label2 font-normal',
+  },
+  sm: {
+    label: 'text-label2 font-medium',
+    helperText: 'text-label3 font-normal',
+  },
+};
+
 export const InputForm: FC<TInputFormProps> = ({
   label,
   placeholder,
@@ -31,11 +48,12 @@ export const InputForm: FC<TInputFormProps> = ({
   helperText,
   htmlFor,
   className,
+  disabled,
   ...rest
 }): ReactElement => {
   return (
     <div className="flex gap-[8px] flex-col">
-      <label htmlFor={htmlFor} className="self-start text-p3 font-medium">
+      <label htmlFor={htmlFor} className={sizeClasses[size].label}>
         {label}
       </label>
       <Input
@@ -43,10 +61,12 @@ export const InputForm: FC<TInputFormProps> = ({
         placeholder={placeholder}
         type={type}
         size={size}
+        disabled={disabled}
         className={cn(
           error &&
             'border-danger-500 hover:border-danger-500 focus:outline-danger-500',
-          className
+          className,
+          disabled && 'opacity-50 cursor-not-allowed' // Add styles for disabled state
         )}
         {...rest}
       />
@@ -54,7 +74,9 @@ export const InputForm: FC<TInputFormProps> = ({
         <p className="text-danger-500 text-xs mt-1">{error}</p>
       ) : (
         helperText && (
-          <p className="text-neutral-500 text-xs mt-1">{helperText}</p>
+          <p className={`${sizeClasses[size].helperText} text-xs mt-1`}>
+            {helperText}
+          </p>
         )
       )}
     </div>