feat: add Combobox component for subscription selection and integrate with form validation

app/apis/news/register-user.ts

@@ -14,7 +14,7 @@ export const userRegisterRequest = async (payload: TRegisterSchema) => {
     const { subscribe_plan, ...restPayload } = payload
     const transformedPayload = {
       ...restPayload,
-      subscribe_plan_id: subscribe_plan,
+      subscribe_plan_id: subscribe_plan.id,
     }
     const { data } = await HttpServer().post(
       '/api/user/register',

app/components/ui/combobox.tsx

@@ -0,0 +1,115 @@
+import {
+  Field,
+  Label,
+  Combobox as HeadlessCombobox,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+} from '@headlessui/react'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
+import { useState, type ComponentProps, type ReactNode } from 'react'
+import {
+  get,
+  type FieldError,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+  Controller,
+} from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+type TComboboxOption = {
+  code: string
+  name: string
+  id: string
+}
+
+type TInputProperties<T extends FieldValues> = ComponentProps<
+  typeof HeadlessCombobox
+> & {
+  id: string
+  label?: ReactNode
+  name: Path<T>
+  rules?: RegisterOptions
+  placeholder?: string
+  options?: TComboboxOption[]
+}
+
+export const Combobox = <TFormValues extends Record<string, unknown>>(
+  properties: TInputProperties<TFormValues>,
+) => {
+  const { id, label, name, rules, disabled, placeholder, options, ...rest } =
+    properties
+  const {
+    control,
+    formState: { errors },
+  } = useRemixFormContext()
+  const [query, setQuery] = useState('')
+  const filteredOptions =
+    query === ''
+      ? options
+      : options?.filter((option) =>
+          option.name.toLowerCase().includes(query.toLowerCase()),
+        )
+
+  const error: FieldError = get(errors, name)
+
+  return (
+    <Field
+      className="relative"
+      disabled={disabled}
+      id={id}
+    >
+      <Label className="mb-1 block text-gray-700">
+        {label} {error && <span className="text-red-500">{error.message}</span>}
+      </Label>
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        render={({ field }) => (
+          <HeadlessCombobox
+            value={field.value}
+            onChange={field.onChange}
+            disabled={disabled}
+            immediate
+            {...rest}
+          >
+            <div className="relative">
+              <ComboboxInput
+                placeholder={placeholder}
+                displayValue={(option: TComboboxOption) => option?.name}
+                onChange={(event) => setQuery(event.target.value)}
+                className="focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
+              />
+              <ComboboxButton className="group absolute inset-y-0 right-0 px-2.5">
+                <ChevronDownIcon className="size-4 fill-gray-500" />
+              </ComboboxButton>
+            </div>
+            <ComboboxOptions
+              anchor={{ to: 'bottom', gap: '8px' }}
+              transition
+              className={twMerge(
+                'w-[var(--input-width)] rounded-md border border-[#DFDFDF] p-1 empty:invisible',
+                'bg-white transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0',
+              )}
+            >
+              {filteredOptions?.map((person) => (
+                <ComboboxOption
+                  key={person.id}
+                  value={person}
+                  className="group flex cursor-default items-center gap-2 rounded-lg px-3 py-1.5 select-none data-[focus]:bg-white/10"
+                >
+                  <CheckIcon className="invisible size-4 group-data-[selected]:visible" />
+                  <div className="text-sm/6">{person.name}</div>
+                </ComboboxOption>
+              ))}
+            </ComboboxOptions>
+          </HeadlessCombobox>
+        )}
+      />
+    </Field>
+  )
+}

app/layouts/news/form-register.tsx

@@ -1,3 +1,4 @@
+import { DevTool } from '@hookform/devtools'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect, useState } from 'react'
 import { useFetcher, useRouteLoaderData } from 'react-router'
@@ -5,8 +6,8 @@ import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
+import { Combobox } from '~/components/ui/combobox'
 import { Input } from '~/components/ui/input'
-import { Select } from '~/components/ui/select'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_layout'
 
@@ -16,7 +17,17 @@ export const registerSchema = z
     password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
     rePassword: z.string().min(6, 'Kata sandi minimal 6 karakter'),
     phone: z.string().min(10, 'No telepon tidak valid'),
-    subscribe_plan: z.string().min(1, 'Pilih salah satu subscription'),
+    subscribe_plan: z
+      .object({
+        id: z.string(),
+        code: z.string(),
+        name: z.string(),
+      })
+      .optional()
+      .nullable()
+      .refine((data) => !!data, {
+        message: 'Please select a subscription',
+      }),
   })
   .refine((field) => field.password === field.rePassword, {
     message: 'Kata sandi tidak sama',
@@ -40,7 +51,7 @@ export const FormRegister = () => {
     resolver: zodResolver(registerSchema),
   })
 
-  const { handleSubmit } = formMethods
+  const { handleSubmit, control } = formMethods
 
   useEffect(() => {
     if (!fetcher.data?.success) {
@@ -96,7 +107,7 @@ export const FormRegister = () => {
               name="phone"
             />
 
-            <Select
+            <Combobox
               id="subscribe_plan"
               name="subscribe_plan"
               label="Subscription"
@@ -134,6 +145,7 @@ export const FormRegister = () => {
           </Button>
         </div>
       </div>
+      <DevTool control={control} />
     </div>
   )
 }