feat: reusable multistep form

[Aashish-Upadhyay-101]

This is an example of how to use this component.
@dahal, ready for review !

fixes : #179

const schema1 = z.object({
  name: z.string().min(1),
  email: z.string().email(),
  address: z.string().min(1),
});

type formField1 = z.infer<typeof schema1>;

const ExampleModal = () => {
  const [open, setOpen] = useState(false);      

  const steps: stepsType[] = [
    {
      id: 1,
      title: "step 1",
      component: form1, // a react FC component for each step, please do not write a <form>...</form>, just begin with <div> or others.
      fields: ["name"],
    },
    {
      id: 2,
      title: "step 2",
      component: form2,
      fields: ["email"],
    },
    {
      id: 3,
      title: "step 3",
      component: form3,
      fields: ["address"],
    },
  ];

  const onSubmit: SubmitHandler<formField1> = (data) => {
    // submit handler
  };

  return (
    <MultiStepFormModal
      steps={steps}
      title="New Modal"
      subtitle="Create new modal..."
      trigger={<Button>Open Modal</Button>}
      dialogProps={{
        open,
        onOpenChange: (val) => {
          setOpen(val);
        },
      }}
      schema={schema1}
      onSubmit={onSubmit}
    />
  );
};

export default ExampleModal;

const form1 = () => {
  const {
    register,
    formState: { errors },
  } = useFormContext<formField1>();
  return (
    <div>
      <Input
        type="text"
        placeholder="name"
        {...register("name", {
          required: { value: true, message: "Name is required" },
        })}
        id="name"
      />
      {errors.name && <p className="text-red-500">{errors.name?.message}</p>}
    </div>
  );
};

const form2 = () => {
  const {
    register,
    formState: { errors },
  } = useFormContext<formField1>();
  return (
    <div>
      <Input
        type="email"
        placeholder="email"
        {...register("email", {
          required: { value: true, message: "Email is required" },
        })}
        id="email"
      />
      {errors.email && <p className="text-red-500">{errors.email?.message}</p>}
    </div>
  );
};

const form3 = () => {
  const {
    register,
    formState: { errors },
  } = useFormContext<formField1>();
  return (
    <div>
      <Input
        type="text"
        placeholder="address"
        {...register("address", {
          required: { value: true, message: "Address is required" },
        })}
        id="address"
      />
      {errors.address && (
        <p className="text-red-500">{errors.address?.message}</p>
      )}
    </div>
  );
};

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[dahal]

This looks promising, let's go with it. Good job @Aashish-Upadhyay-101