Auto-generated

Now let's have Remix Forms do it all for us. We'll still have to customize the layout, but the UX is there. Like magic! 🪄

lines of code

import { z } from 'zod'
import { InputError, applySchema } from 'composable-functions'
import { formAction } from 'remix-forms'
import { SchemaForm } from '~/schema-form'

const reservationSchema = z.object({
  city: z.enum(['saltLakeCity', 'lasVegas', 'losAngeles']),
  checkIn: z.date(),
  checkOut: z.date(),
  adults: z.number().int().positive(),
  children: z.number().int(),
  bedrooms: z.number().int().positive(),
  specialRequests: z.string().optional(),
})

const makeReservation = applySchema(reservationSchema)(
  async (values) => {
    if (values.specialRequests?.match(/towels/i)) {
      throw new InputError("Don't be such a diva!", ['specialRequests'])
    }

    // Here you would store data instead
    console.log(values)
  },
)

export const action = async ({ request }: Route.ActionArgs) =>
  formAction({
    request,
    schema: reservationSchema,
    mutation: makeReservation,
    successPath: '/conf/success/08',
  })

export default function Component() {
  return <Form schema={reservationSchema} />
}