feat: Create a separate "InputForm" molecule component

- Develop the "InputForm" molecule component
- Remove empty modal-gacha component stories and test files that prevent Storybook from running

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

@@ -1,9 +1,6 @@
 import { FC, ReactElement } from 'react';
-import {
-  Input,
-  Button,
-  PasswordInput,
-} from '@imphnen-frontend-service/ui/atoms';
+import { Button, PasswordInput } from '@imphnen-frontend-service/ui/atoms';
+import { InputForm } from '@imphnen-frontend-service/ui/molecules';
 
 export const Components: FC = (): ReactElement => {
   return (
@@ -13,10 +10,12 @@ export const Components: FC = (): ReactElement => {
         <h1 className="text-primary-500 text-p1 font-semibold">
           Welcome to IMPHNEN Backoffice
         </h1>
-        <div className="flex gap-[8px] flex-col">
-          <div className="self-start text-p3 font-medium">Email</div>
-          <Input placeholder="Masukkan Email" type="email" size="lg" />
-        </div>
+        <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" />

libs/ui/src/molecules/index.ts

@@ -1 +1 @@
-export {};
+export * from './input-form';

libs/ui/src/molecules/input-form/index.ts

@@ -0,0 +1 @@
+export * from './input-form';

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputForm } from './input-form';
+
+const meta = {
+  title: 'Molecules/InputForm',
+  component: InputForm,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof InputForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Email',
+    placeholder: 'Enter your email',
+    type: 'email',
+    size: 'md',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Username',
+    placeholder: 'Enter your username',
+    type: 'text',
+    size: 'md',
+    error: 'This field is required',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    label: 'Full Name',
+    placeholder: 'Enter your full name',
+    type: 'text',
+    size: 'lg',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    label: 'Phone',
+    placeholder: 'Enter your phone number',
+    type: 'text',
+    size: 'sm',
+  },
+};

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

@@ -0,0 +1,44 @@
+import {
+  DetailedHTMLProps,
+  FC,
+  InputHTMLAttributes,
+  ReactElement,
+} from 'react';
+import { Input } from '../../atoms';
+
+type TInputType = 'text' | 'email';
+type TInputSize = 'sm' | 'md' | 'lg';
+
+type TInputFormProps = Omit<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+  'size' | 'type'
+> & {
+  label: string;
+  type?: TInputType;
+  size?: TInputSize;
+  error?: string;
+};
+
+export const InputForm: FC<TInputFormProps> = ({
+  label,
+  placeholder,
+  type = 'text',
+  size = 'md',
+  error,
+  ...rest
+}): ReactElement => {
+  return (
+    <div className="flex gap-[8px] flex-col">
+      <div className="self-start text-p3 font-medium">{label}</div>
+      <Input
+        placeholder={placeholder}
+        type={type}
+        size={size}
+        error={error}
+        {...rest}
+      />
+    </div>
+  );
+};
+
+export default InputForm;