feat: Update InputForm, Input, and auth page

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

apps/backoffice/src/app/login/page.tsx

@@ -1,29 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Button, PasswordInput } from '@imphnen-frontend-service/ui/atoms';
-import { InputForm } from '@imphnen-frontend-service/ui/molecules';
-
-export const Components: FC = (): ReactElement => {
-  return (
-    <div className="flex justify-center items-center min-h-screen">
-      <div className="bg-white border border-primary-200 shadow-lg p-[60px] text-center flex flex-col gap-8 rounded-2xl">
-        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
-        <h1 className="text-primary-500 text-p1 font-semibold">
-          Welcome to IMPHNEN Backoffice
-        </h1>
-        <InputForm
-          label="Email"
-          placeholder="Masukkan Email"
-          type="email"
-          size="lg"
-        />
-        <div className="flex gap-[8px] flex-col">
-          <div className="self-start text-p3 font-medium">Password</div>
-          <PasswordInput placeholder="Masukkan Password" size="lg" />
-        </div>
-        <Button>Login</Button>
-      </div>
-    </div>
-  );
-};
-
-export default Components;

apps/backoffice/src/app/page.tsx

@@ -1,7 +1,31 @@
 import { FC, ReactElement } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputForm } from '@imphnen-frontend-service/ui/molecules';
 
 export const Components: FC = (): ReactElement => {
-  return <>Hallo</>;
+  return (
+    <div className="flex justify-center items-center min-h-screen">
+      <div className="bg-white border border-primary-200 shadow-lg p-[60px] text-center flex flex-col justify-items-stretch gap-8 rounded-2xl">
+        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <h1 className="text-primary-500 text-p1 font-semibold">
+          Welcome to IMPHNEN Backoffice
+        </h1>
+        <InputForm
+          label="Email"
+          placeholder="Masukkan Email"
+          type="email"
+          size="lg"
+        />
+        <InputForm
+          label="Password"
+          placeholder="Masukkan password"
+          type="password"
+          size="lg"
+        />
+        <Button>Login</Button>
+      </div>
+    </div>
+  );
 };
 
 export default Components;

libs/ui/src/atoms/index.ts

@@ -1,4 +1,3 @@
 export * from './button';
 export * from './input';
-export * from './password-input';
 export * from './textarea';

libs/ui/src/atoms/input/input.spec.tsx

@@ -1,36 +1,15 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect } from 'vitest';
-import { render, screen } from "@testing-library/react";
+import { render, screen } from '@testing-library/react';
-import { Input } from "./input";
+import { Input } from './input';
 
-describe("Test Input Component", () => {
+describe('Test Input Component', () => {
-  it("renders the input with placeholder text", () => {
+  it('renders the input with placeholder text', () => {
     render(<Input placeholder="Placeholder" />);
-    expect(screen.getByPlaceholderText("Placeholder")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Placeholder')).toBeInTheDocument();
   });
 
-  // it("renders the input with different sizes", () => {
-  //   const sizeClasses = {
-  //     sm: "text-[10px] max-h-[28px]",
-  //     md: "text-[12px] max-h-[30px]",
-  //     lg: "text-[15px] max-h-[34px]",
-  //   };
-  //   Object.entries(sizeClasses).forEach(([size, className]) => {
-  //     render(<Input size={size} />);
-  //     expect(screen.getByRole("textbox")).toHaveClass(className);
-  //   });
-  // });
-
-  // it("renders the input with different types", () => {
-  //   const types = ["text", "password", "email", "number"];
-  //   types.forEach((type) => {
-  //     render(<Input type={type} />);
-  //     const input = screen.getByRole("textbox");
-  //     expect(input).toHaveAttribute("type", type);
-  //   });
-  // });
-
   it("disables the input field when 'disabled' prop is set", () => {
     render(<Input disabled />);
-    expect(screen.getByRole("textbox")).toBeDisabled();
+    expect(screen.getByRole('textbox')).toBeDisabled();
   });
 });

libs/ui/src/atoms/input/input.stories.tsx

@@ -4,16 +4,6 @@ import { Input } from './input';
 const meta: Meta<typeof Input> = {
   title: 'Components/Input',
   component: Input,
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['text', 'email'],
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-  },
   tags: ['autodocs'],
 } satisfies Meta<typeof Input>;
 
@@ -23,6 +13,7 @@ type Story = StoryObj<typeof Input>;
 export const Large: Story = {
   args: {
     size: 'lg',
+    type: 'text',
     placeholder: 'Placeholder',
   },
 };
@@ -30,6 +21,7 @@ export const Large: Story = {
 export const Medium: Story = {
   args: {
     size: 'md',
+    type: 'text',
     placeholder: 'Placeholder',
   },
 };
@@ -37,6 +29,7 @@ export const Medium: Story = {
 export const Small: Story = {
   args: {
     size: 'sm',
+    type: 'text',
     placeholder: 'Placeholder',
   },
 };
@@ -55,6 +48,13 @@ export const EmailInput: Story = {
   },
 };
 
+export const PasswordInput: Story = {
+  args: {
+    size: 'md',
+    type: 'password',
+  },
+};
+
 export const Disabled: Story = {
   args: {
     size: 'md',

libs/ui/src/atoms/input/input.tsx

@@ -3,10 +3,13 @@ import {
   FC,
   InputHTMLAttributes,
   ReactElement,
+  useState,
 } from 'react';
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // Import Ant Design icons
 import { cn } from '@imphnen-frontend-service/utils';
+import { Button } from '../button';
 
-type TInputType = 'text' | 'email';
+type TInputType = 'text' | 'email' | 'password';
 type TInputSize = 'sm' | 'md' | 'lg';
 
 type TInputProps = Omit<
@@ -15,38 +18,70 @@ type TInputProps = Omit<
 > & {
   type?: TInputType;
   size?: TInputSize;
+  disabled?: boolean;
 };
 
-const sizeClasses: Record<TInputSize, string> = {
+const sizeClasses: Record<TInputSize, { textSize: string; iconSize: string }> =
-  sm: 'text-[10px] max-h-[28px]',
+  {
-  md: 'text-[12px] max-h-[30px]',
+    sm: { textSize: 'text-[10px] max-h-[28px]', iconSize: 'text-[10px]' },
-  lg: 'text-[15px] max-h-[34px]',
+    md: { textSize: 'text-[12px] max-h-[30px]', iconSize: 'text-[12px]' },
-};
+    lg: { textSize: 'text-[15px] max-h-[34px]', iconSize: 'text-[15px]' },
+  };
 
 const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';
 
 export const Input: FC<TInputProps> = ({
-  size = 'md',
   type = 'text',
+  size = 'md',
   placeholder = 'Placeholder',
   disabled,
   className,
   ...rest
 }): ReactElement => {
+  const [showPassword, setShowPassword] = useState(false); // State for password visibility
+
+  const togglePasswordVisibility = () => {
+    if (!disabled) setShowPassword((prev) => !prev);
+  };
+
   const mergedClassName = cn(
-    'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree',
+    'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree w-full',
-    sizeClasses[size],
+    sizeClasses[size].textSize,
     disabled && disabledClass,
     className
   );
 
   return (
-    <input
+    <div className="relative inline-flex min-w-70 items-center">
-      className={mergedClassName}
+      <input
-      type={type}
+        className={mergedClassName}
-      disabled={disabled}
+        type={type === 'password' && showPassword ? 'text' : type}
-      placeholder={placeholder}
+        disabled={disabled}
-      {...rest}
+        placeholder={placeholder}
-    />
+        {...rest}
+      />
+      {type === 'password' && (
+        <div className="absolute end-0 px-[12px] h-full flex items-center">
+          <Button
+            variant="text"
+            size={size}
+            onClick={togglePasswordVisibility}
+            className={cn(
+              'relative aspect-square -me-[8px] p-[6px]',
+              sizeClasses[size].iconSize,
+              disabled && 'cursor-not-allowed'
+            )}
+          >
+            {showPassword ? (
+              <EyeInvisibleOutlined
+                style={{ color: 'var(--color-neutral-500)' }}
+              />
+            ) : (
+              <EyeOutlined style={{ color: 'var(--color-neutral-500)' }} />
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
   );
 };

libs/ui/src/atoms/password-input/index.ts

@@ -1 +0,0 @@
-export * from "./password-input";

libs/ui/src/atoms/password-input/password-input.stories.tsx

@@ -1,58 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { PasswordInput } from './password-input';
-
-const meta: Meta<typeof PasswordInput> = {
-  title: 'Components/Password Input',
-  component: PasswordInput,
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof PasswordInput>;
-
-export const Large: Story = {
-  args: {
-    size: 'lg',
-    placeholder: 'Placeholder',
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    size: 'md',
-    placeholder: 'Placeholder',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'sm',
-    placeholder: 'Placeholder',
-  },
-};
-
-export const Input: Story = {
-  args: {
-    size: 'md',
-    placeholder: 'Placeholder',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    size: 'md',
-    disabled: true,
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    size: 'md',
-    error: 'This field is required',
-  },
-};

libs/ui/src/atoms/password-input/password-input.tsx

@@ -1,111 +0,0 @@
-import {
-  DetailedHTMLProps,
-  FC,
-  InputHTMLAttributes,
-  ReactElement,
-  useState,
-} from 'react';
-import { cn } from '@imphnen-frontend-service/utils';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
-
-type TPasswordInputType = 'password';
-type TPasswordInputSize = 'sm' | 'md' | 'lg';
-
-type TPasswordInputProps = Omit<
-  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
-  'size' | 'type'
-> & {
-  type?: TPasswordInputType;
-  size?: TPasswordInputSize;
-  error?: string;
-};
-
-const sizeClasses: Record<TPasswordInputSize, string> = {
-  sm: 'text-[10px] max-h-[28px]',
-  md: 'text-[12px] max-h-[30px]',
-  lg: 'text-[15px] max-h-[34px]',
-};
-
-const iconSizeClasses: Record<TPasswordInputSize, string> = {
-  sm: 'text-[10px]',
-  md: 'text-[12px]',
-  lg: 'text-[16px]',
-};
-
-const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';
-const errorClass =
-  'border-danger-500 hover:border-danger-500 focus:outline-danger-500';
-
-export const PasswordInput: FC<TPasswordInputProps> = ({
-  size = 'md',
-  placeholder = 'Placeholder',
-  disabled,
-  error,
-  className,
-  ...rest
-}): ReactElement => {
-  const [showPassword, setShowPassword] = useState(false);
-
-  const togglePasswordVisibility = () => {
-    if (!disabled) setShowPassword((prev) => !prev);
-  };
-
-  const mergedClassName = cn(
-    'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree',
-    sizeClasses[size],
-    disabled && disabledClass,
-    error && errorClass,
-    className
-  );
-
-  return (
-    <>
-      <div
-        className={cn(
-          'relative inline-flex items-center border border-neutral-200 rounded-md',
-          mergedClassName
-        )}
-      >
-        <input
-          className="focus:outline-0"
-          type={showPassword ? 'text' : 'password'}
-          disabled={disabled}
-          placeholder={placeholder}
-          {...rest}
-        />
-        <div className="absolute end-0 px-[12px] h-full flex items-center">
-          <Button
-            variant="text"
-            size={size}
-            onClick={togglePasswordVisibility}
-            className={cn(
-              'relative aspect-square -me-[10px] p-[6px]',
-              iconSizeClasses[size],
-              disabled && 'cursor-not-allowed'
-            )}
-          >
-            {showPassword ? (
-              <EyeInvisibleOutlined
-                style={{
-                  color: error
-                    ? 'var(--color-danger-500)'
-                    : 'var(--color-neutral-500)',
-                }}
-              />
-            ) : (
-              <EyeOutlined
-                style={{
-                  color: error
-                    ? 'var(--color-danger-500)'
-                    : 'var(--color-neutral-500)',
-                }}
-              />
-            )}
-          </Button>
-        </div>
-      </div>
-      {error && <p className="text-danger-500 text-xs mt-1">{error}</p>}
-    </>
-  );
-};

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',
+    label: 'Label',
-    placeholder: 'Enter description',
+    placeholder: 'Placeholder',
     type: 'text',
     size: 'lg',
+    helperText: 'Helper Text',
   },
 };
 
 export const Medium: Story = {
   args: {
-    label: 'Address',
+    label: 'Label',
-    placeholder: 'Enter your address',
+    placeholder: 'Placeholder',
     type: 'text',
     size: 'md',
+    helperText: 'Helper Text',
   },
 };
 
 export const Small: Story = {
   args: {
-    label: 'Phone',
+    label: 'Label',
-    placeholder: 'Enter your phone number',
+    placeholder: 'Placeholder',
     type: 'text',
     size: 'sm',
+    helperText: 'Helper Text',
   },
 };
 
 export const Default: Story = {
   args: {
-    label: 'Email',
+    label: 'Default',
-    placeholder: 'Enter your email',
+    placeholder: 'Enter your name',
-    type: 'email',
+    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',
+    label: 'Username',
-    placeholder: 'Enter your password',
+    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>
         )