feat: dyamic stepper form forgot password

apps/gacha/src/app/_components/form/modal-form-forgot-password.tsx

@@ -0,0 +1,144 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import {
+  InputForm,
+  Modal,
+  Stepper,
+} from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalFormForgotPasswordProps {
+  isOpen: boolean;
+  onClose: () => void;
+  currentStep: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalFormForgotPassword = ({
+  isOpen,
+  onClose,
+  currentStep,
+  nextStep,
+  prevStep,
+  resetStep,
+}: IModalFormForgotPasswordProps) => {
+  return (
+    <Modal
+      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+    >
+      <Modal.Header className="space-y-4">
+        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <h1 className="text-primary-500 text-p1 text-center font-semibold">
+          Forgot Password
+        </h1>
+        <Stepper currentStep={currentStep} totalSteps={3} />
+      </Modal.Header>
+      <Modal.Content className="space-y-6">
+        {currentStep === 1 && <StepOne nextStep={nextStep} onClose={onClose} />}
+        {currentStep === 2 && (
+          <StepTwo nextStep={nextStep} prevStep={prevStep} />
+        )}
+        {currentStep === 3 && (
+          <StepThree onClose={onClose} resetStep={resetStep} />
+        )}
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
+  <>
+    <InputForm
+      label="Email"
+      placeholder="Masukkan Email yang Terdaftar"
+      type="email"
+      size="lg"
+      className="w-full"
+    />
+    <div className="flex gap-6">
+      <Button variant="bordered" size="md" className="w-full" onClick={onClose}>
+        Back To Login
+      </Button>
+      <Button size="md" className="w-full" onClick={nextStep}>
+        Kirim OTP
+      </Button>
+    </div>
+  </>
+);
+
+interface IStepTwoProps {
+  nextStep: () => void;
+  prevStep: () => void;
+}
+
+const StepTwo = ({ nextStep, prevStep }: IStepTwoProps) => (
+  <>
+    <InputForm
+      label="Kode OTP"
+      placeholder="Masukkan Kode OTP"
+      type="text"
+      size="lg"
+      className="w-full"
+    />
+    <div className="flex gap-6">
+      <Button
+        size="md"
+        variant="bordered"
+        className="w-full"
+        onClick={prevStep}
+      >
+        Change Email
+      </Button>
+      <Button size="md" className="w-full" onClick={nextStep}>
+        Reset Password
+      </Button>
+    </div>
+  </>
+);
+
+interface IStepThreeProps {
+  onClose: () => void;
+  resetStep: () => void;
+}
+
+const StepThree = ({ onClose, resetStep }: IStepThreeProps) => (
+  <>
+    <InputForm
+      label="Password Baru"
+      placeholder="Masukkan Password Baru"
+      type="password"
+      size="lg"
+      className="w-full"
+    />
+    <InputForm
+      label="Ulang Password"
+      placeholder="Masukkan Ulang Password"
+      type="password"
+      size="lg"
+      className="w-full"
+    />
+    <Button
+      size="md"
+      className="w-full"
+      onClick={() => {
+        console.log('Password reset submitted');
+        onClose();
+        resetStep();
+      }}
+    >
+      Buat Password Baru
+    </Button>
+  </>
+);
+
+export default ModalFormForgotPassword;

apps/gacha/src/app/_components/form/modal-form-login.tsx

@@ -0,0 +1,65 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
+import { Link } from 'react-router-dom';
+
+interface IModalFormLogin {
+  isOpen: boolean;
+  onClose: () => void;
+  onForgotPassword: () => void;
+}
+
+const ModalFormLogin = ({
+  isOpen,
+  onClose,
+  onForgotPassword,
+}: IModalFormLogin) => {
+  return (
+    <Modal
+      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <Modal.Header className="space-y-4">
+        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <h1 className="text-primary-500 text-p1 text-center font-semibold">
+          Login
+        </h1>
+      </Modal.Header>
+      <Modal.Content className="space-y-4">
+        <InputForm
+          label="Email"
+          placeholder="Masukkan Email"
+          type="email"
+          size="lg"
+          className="w-full"
+        />
+        <InputForm
+          label="Password"
+          placeholder="Masukkan Password"
+          type="password"
+          size="lg"
+          className="w-full"
+        />
+        <h1 className="text-end text-primary-500 text-xl font-medium">
+          <Button variant="text" onClick={onForgotPassword}>
+            Lupa Password?
+          </Button>
+        </h1>
+        <Button size="md" className="w-full">
+          Login
+        </Button>
+        <div className="flex justify-center gap-2 pt-2.5 font-medium">
+          <p className="text-neutral-500">Belum punya akun?</p>
+          <Link
+            className="text-primary-500 hover:text-primary-600"
+            to="/register"
+          >
+            Daftar
+          </Link>
+        </div>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalFormLogin;

apps/gacha/src/app/page.tsx

@@ -1,9 +1,10 @@
 import { ArrowDownOutlined } from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
 import { cn } from '@imphnen-frontend-service/utils';
 import { FC, Fragment, ReactElement, useEffect, useState } from 'react';
-import { Link } from 'react-router';
+import { useQueryState } from '../hooks/use-query-state';
+import ModalFormForgotPassword from './_components/form/modal-form-forgot-password';
+import ModalFormLogin from './_components/form/modal-form-login';
 
 interface GachaItemProps {
   src: string;
@@ -12,8 +13,19 @@ interface GachaItemProps {
 }
 
 export const Components: FC = (): ReactElement => {
-  // Pinjem
+  const [showModalForgotPassword, setShowModalForgotPassword] = useState(false);
-  const [showModal, setShowModal] = useState(false);
+  const [showModalLogin, setShowModalLogin] = useState(false);
+
+  const {
+    step: currentStep,
+    nextStep,
+    prevStep,
+    resetStep,
+  } = useQueryState('step', {
+    defaultValue: 1,
+    maxValue: 3,
+    minValue: 1,
+  });
 
   const scrollToRoulette = () => {
     const rouletteSection = document.getElementById('roulette');
@@ -65,6 +77,12 @@ export const Components: FC = (): ReactElement => {
     );
   };
 
+  const handleForgotPasswordClick = () => {
+    setShowModalLogin(false);
+    setShowModalForgotPassword(true);
+    resetStep();
+  };
+
   return (
     <Fragment>
       {/* Landing Page */}
@@ -216,64 +234,40 @@ export const Components: FC = (): ReactElement => {
             Spin Now
           </Button>
         </div>
+        {/* TODO:  */}
+        <div className="flex gap-4 col-span-4 md:col-span-8 lg:col-span-6 justify-center items-center">
+          <Button onClick={() => setShowModalLogin(true)}>
+            Open Modal Login
+          </Button>
+          <Button onClick={() => setShowModalForgotPassword(true)}>
+            Open Modal Forgot Password
+          </Button>
+        </div>
       </section>
       {/* Diffuser & Cloud */}
       <div className="sticky bottom-0 h-[86px] md:h-[200px] bg-gradient-to-b from-primary-500/0 to-primary-500/50 to-80%"></div>
 
-      {/**Izin pake untuk debug modals gacha */}
+      {/* Login Modal */}
-      <button onClick={() => setShowModal(true)}>Open Modal</button>
+      <ModalFormLogin
-      <Modal
+        isOpen={showModalLogin}
-        className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+        onClose={() => setShowModalLogin(false)}
-        isOpen={showModal}
+        onForgotPassword={handleForgotPasswordClick}
-        onClose={() => setShowModal(false)}
+        key={currentStep}
-      >
+      />
-        <Modal.Header className="space-y-4">
+
-          <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+      {/* Forgot Password Modal */}
-          <h1 className="text-primary-500 text-p1 text-center font-semibold">
+      <ModalFormForgotPassword
-            Login
+        currentStep={currentStep}
-          </h1>
+        isOpen={showModalForgotPassword}
-        </Modal.Header>
+        onClose={() => {
-        <Modal.Content className="space-y-4">
+          setShowModalForgotPassword(false);
-          <InputForm
+          setShowModalLogin(true);
-            label="Email"
+        }}
-            placeholder="Masukkan Email"
+        nextStep={nextStep}
-            type="email"
+        prevStep={prevStep}
-            size="lg"
+        resetStep={resetStep}
-            className="w-full"
+        key={currentStep}
-          />
+      />
-          <InputForm
-            label="Password"
-            placeholder="Masukkan password"
-            type="password"
-            size="lg"
-            className="w-full"
-          />
-          <Link to="/forgot-password">
-            <h1 className="text-end text-primary-500 text-xl font-medium">
-              Lupa Password?
-            </h1>
-          </Link>
-        </Modal.Content>
-        <Modal.Footer className="flex flex-col md:flex-col pt-4">
-          <Button
-            size="md"
-            className="w-full"
-            onClick={() => console.log('Login')}
-          >
-            Login
-          </Button>
-          <div className="flex justify-center gap-2 pt-2.5 font-medium">
-            <p className="text-neutral-500">Belum punya akun?</p>
-            <Link
-              className="text-primary-500 hover:text-primary-600"
-              to="/register"
-            >
-              Daftar disini
-            </Link>
-          </div>
-        </Modal.Footer>
-      </Modal>
-      {/**Izin pake untuk debug modals gacha */}
     </Fragment>
   );
 };

apps/gacha/src/hooks/use-query-state.ts

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useState } from 'react';
+
+interface UseQueryStateOptions {
+  defaultValue: number;
+  maxValue?: number;
+  minValue?: number;
+}
+
+export const useQueryState = (key: string, options: UseQueryStateOptions) => {
+  const { defaultValue, maxValue = Infinity, minValue = 1 } = options;
+
+  const getQueryParam = (param: string): string | null => {
+    if (typeof window === 'undefined') return null;
+    const searchParams = new URLSearchParams(window.location.search);
+    return searchParams.get(param);
+  };
+
+  const setQueryParam = (param: string, value: string) => {
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.set(param, value);
+    const newUrl = `${window.location.pathname}?${searchParams.toString()}`;
+    window.history.replaceState(null, '', newUrl);
+  };
+
+  const initialValue = () => {
+    const queryValue = getQueryParam(key);
+    const parsedValue = queryValue ? parseInt(queryValue, 10) : defaultValue;
+    return Math.max(minValue, Math.min(maxValue, parsedValue));
+  };
+
+  const [value, setValue] = useState<number>(initialValue);
+
+  useEffect(() => {
+    const handlePopState = () => {
+      const queryValue = getQueryParam(key);
+      const newValue = queryValue ? parseInt(queryValue, 10) : defaultValue;
+      setValue(Math.max(minValue, Math.min(maxValue, newValue)));
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [key, defaultValue, minValue, maxValue]);
+
+  const updateValue = useCallback(
+    (newValue: number) => {
+      const constrainedValue = Math.max(minValue, Math.min(maxValue, newValue));
+      setValue(constrainedValue);
+      setQueryParam(key, constrainedValue.toString());
+    },
+    [key, minValue, maxValue]
+  );
+
+  const nextStep = useCallback(() => {
+    updateValue(value + 1);
+  }, [value, updateValue]);
+
+  const prevStep = useCallback(() => {
+    updateValue(value - 1);
+  }, [value, updateValue]);
+
+  const resetStep = useCallback(() => {
+    updateValue(defaultValue);
+  }, [defaultValue, updateValue]);
+
+  return {
+    step: value,
+    nextStep,
+    prevStep,
+    resetStep,
+  };
+};

libs/ui/src/molecules/index.ts

@@ -1,5 +1,6 @@
-export * from "./forgot-step";
+export * from './forgot-step';
-export * from "./otp-form";
+export * from './otp-form';
 export * from './input-form';
 export * from './pagination';
 export * from './modal/modal';
+export * from './stepper';

libs/ui/src/molecules/stepper/index.tsx

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

libs/ui/src/molecules/stepper/stepper.spec.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Stepper, StepperProps } from './Stepper';
+
+vi.mock('@imphnen-frontend-service/utils', () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(' '),
+}));
+
+describe('Stepper', () => {
+  const renderStepper = (props: StepperProps) => render(<Stepper {...props} />);
+
+  it('renders with correct step information', () => {
+    renderStepper({ currentStep: 2, totalSteps: 5 });
+
+    expect(screen.getByText('Langkah 2 dari 5')).toBeInTheDocument();
+  });
+
+  it('applies custom className correctly', () => {
+    const customClass = 'custom-stepper';
+    renderStepper({
+      currentStep: 1,
+      totalSteps: 3,
+      className: customClass,
+    });
+
+    const stepperElement = screen.getByText('Langkah 1 dari 3').parentElement;
+    expect(stepperElement).toHaveClass('text-center');
+    expect(stepperElement).toHaveClass('mb-4');
+    expect(stepperElement).toHaveClass(customClass);
+  });
+
+  it('handles step 0 correctly', () => {
+    renderStepper({ currentStep: 0, totalSteps: 3 });
+    expect(screen.getByText('Langkah 0 dari 3')).toBeInTheDocument();
+  });
+
+  it('handles equal currentStep and totalSteps', () => {
+    renderStepper({ currentStep: 3, totalSteps: 3 });
+    expect(screen.getByText('Langkah 3 dari 3')).toBeInTheDocument();
+  });
+
+  it('applies correct text styling classes', () => {
+    renderStepper({ currentStep: 1, totalSteps: 2 });
+    const textElement = screen.getByText('Langkah 1 dari 2');
+    expect(textElement).toHaveClass('text-neutral-400');
+    expect(textElement).toHaveClass('text-lg');
+  });
+});

libs/ui/src/molecules/stepper/stepper.stories.tsx

@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Stepper } from './Stepper';
+
+const meta: Meta<typeof Stepper> = {
+  title: 'Components/Stepper',
+  component: Stepper,
+  argTypes: {
+    currentStep: {
+      control: { type: 'number', min: 0 },
+      description: 'Current step number',
+    },
+    totalSteps: {
+      control: { type: 'number', min: 1 },
+      description: 'Total number of steps',
+    },
+    className: {
+      control: 'text',
+      description: 'Custom CSS class',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A simple stepper component showing progress through steps',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Stepper>;
+
+export const Default: Story = {
+  args: {
+    currentStep: 1,
+    totalSteps: 3,
+  },
+};
+
+export const MiddleStep: Story = {
+  args: {
+    currentStep: 2,
+    totalSteps: 4,
+  },
+};
+
+export const LastStep: Story = {
+  args: {
+    currentStep: 3,
+    totalSteps: 3,
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    currentStep: 1,
+    totalSteps: 5,
+    className: 'custom-class',
+  },
+};

libs/ui/src/molecules/stepper/stepper.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@imphnen-frontend-service/utils';
+import React from 'react';
+
+interface StepperProps {
+  currentStep: number;
+  totalSteps: number;
+  className?: string;
+}
+
+const Stepper: React.FC<StepperProps> = ({
+  currentStep,
+  totalSteps,
+  className,
+}) => {
+  return (
+    <div className={cn('text-center mb-4', className)}>
+      <p className="text-neutral-400 text-lg">
+        Langkah {currentStep} dari {totalSteps}
+      </p>
+    </div>
+  );
+};
+
+export { Stepper };
+export type { StepperProps };