Tutorial: createSchema() & strong validation

import { createSchema, field, useFormBridge } from '@runilib/react-formbridge'

// ── Schema with full cross-field validation ──────────────────────────
const bookingSchema = createSchema({
  username:     field.text('Username').required().trim().min(3).max(20)
                  .pattern(/^[a-z0-9_]+$/i, 'Letters, numbers, and underscores only.'),
  email:        field.email('Email').trim().lowercase(),
  phone:        field.phone('Phone').defaultCountry('FR').required(),
  departure:    field.date('Departure date').required(),
  returnDate:   field.date('Return date').required(),
  password:     field.password('Password').required().min(8),
  confirmPassword: field.password('Confirm password').required().sameAs('password','Passwords do not match.'),
  terms:        field.checkbox('I accept the terms').mustBeTrue('You must accept the terms.'),
})
  // ① At least one contact method
  .atLeastOne(['email', 'phone'], 'Provide at least an email or a phone number.')

  // ② Multi-issue cross-field check
  .superRefine((values, ctx) => {
    if (values.departure && values.returnDate) {
      const departureTs = new Date(values.departure).getTime()
      const returnTs = new Date(values.returnDate).getTime()

      if (!Number.isNaN(departureTs) && !Number.isNaN(returnTs) && returnTs < departureTs) {
        ctx.addIssue({
          path: 'returnDate',
          code: 'return_before_departure',
          message: 'Return date must be on or after departure.',
        })
      }
    }

    if (values.password !== values.confirmPassword) {
      ctx.addIssue({
        path: 'confirmPassword',
        code: 'password_mismatch',
        message: 'Passwords do not match.',
      })
    }

    const handle = values.email?.split('@')[0]?.toLowerCase()
    if (handle && values.password?.toLowerCase().includes(handle)) {
      ctx.addIssue({
        path: 'password',
        code: 'password_contains_email',
        message: "Don't reuse your email handle inside the password.",
      })
    }
  })

  // ③ Async username check
  .refineAsync(
    async (values) => {
      if (!values.username || values.username.length < 3) return true
      const res = await fetch('/api/check-username?u=' + values.username)
      const { available } = await res.json()
      return available
    },
    { path: 'username', code: 'username_taken', message: 'This username is already taken.' },
  )

  // ④ Global error rewriting
  .errorMap((issue, defaultMessage) => {
    if (issue.code === 'required') return 'This field is required.'
    if (issue.code === 'min') return `Use at least ${issue.params?.min ?? ''} characters.`
    return defaultMessage
  })

// ── React component ──────────────────────────────────────────────────
export function BookingForm() {
  const { Form, fields, state } = useFormBridge(bookingSchema, {
    validateOn: 'onTouched',
    revalidateOn: 'onChange',
  })

  const formLevelError = state.formLevelError

  return (
    <Form onSubmit={async (values) => {
      const res = await fetch('/api/bookings', {
        method: 'POST',
        body: JSON.stringify(values),
      })
      if (!res.ok) throw new Error('Booking failed')
    }}>
      <fields.username />
      <fields.email />
      <fields.phone />
      <fields.departure />
      <fields.returnDate />
      <fields.password />
      <fields.confirmPassword />
      <fields.terms />
      {formLevelError ? <p className="form-error">{formLevelError}</p> : null}
      <Form.Submit disabled={!state.isValid}>Book trip</Form.Submit>
    </Form>
  )
}

export default BookingForm