@bookinglab/booking-ui-react

React UI components for BookingLab booking journeys. Build dynamic, accessible booking forms with conditional logic, validation, and full styling customization.

Installation

npm install @bookinglab/booking-ui-react

Quick Start

import { BookingForm, Question } from '@bookinglab/booking-ui-react';

const questions: Question[] = [
  { id: 1, name: 'Personal Details', detail_type: 'heading' },
  { id: 2, name: 'Full Name', detail_type: 'text_field', required: true },
  { id: 3, name: 'Email', detail_type: 'text_field', required: true },
];

function App() {
  const handleSubmit = (values) => {
    console.log('Form submitted:', values);
  };

  return (
    <BookingForm
      questions={questions}
      onSubmit={handleSubmit}
      submitLabel="Book Now"
    />
  );
}

Components

BookingForm

A dynamic form component that renders form fields based on an array of Question objects.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | questions | Question[] | required | Array of question objects defining the form fields | | onSubmit | (values: FormValues) => void | required | Callback fired when form is submitted with valid values | | submitLabel | string | "Submit" | Text for the submit button | | className | string | "" | Class name for the form element | | classNames | BookingFormClassNames | undefined | Custom class names for styling individual elements |

Question Types

The detail_type property determines how each question is rendered:

| Type | Description | Renders | |------|-------------|---------| | heading | Section heading | <h3> element | | text_field | Single-line text | <input type="text"> | | text_area | Multi-line text | <textarea> | | select | Dropdown selection | <select> with options | | date | Date picker | <input type="date"> | | number | Numeric input | <input type="number"> | | check | Checkbox | <input type="checkbox"> |

Question Interface

interface Question {
  id: number;
  name: string;
  detail_type: 'heading' | 'text_field' | 'text_area' | 'select' | 'date' | 'number' | 'check';
  required?: boolean;
  help_text?: string;
  options?: QuestionOption[];  // For select type
  settings?: QuestionSettings;
}

interface QuestionOption {
  id: number;
  name: string;
  price?: number;
  is_default?: boolean;
}

interface QuestionSettings {
  conditional_question?: string;
  conditional_answers?: Record<string, string>;
  min?: number;
  max?: number;
  placeholder?: string;
}

Conditional Questions

Show or hide questions based on answers to other questions using conditional_answers:

const questions: Question[] = [
  {
    id: 1,
    name: 'Service Type',
    detail_type: 'select',
    required: true,
    options: [
      { id: 1, name: 'Consultation' },
      { id: 2, name: 'Follow-up' },
    ],
  },
  {
    id: 2,
    name: 'First time visiting?',
    detail_type: 'check',
    settings: {
      // Only show when "Consultation" (option id: 1) is selected
      conditional_answers: { '1': '1' },
    },
  },
];

Styling

Custom Class Names

Override default styles using the classNames prop:

<BookingForm
  questions={questions}
  onSubmit={handleSubmit}
  classNames={{
    fieldWrapper: 'mb-6',
    label: 'text-white font-bold',
    heading: 'text-2xl text-primary',
    input: 'border-2 border-gray-400 rounded-lg p-3',
    inputError: 'border-red-500',
    checkbox: 'w-5 h-5',
    helpText: 'text-gray-400 text-sm',
    errorText: 'text-red-400',
    button: 'bg-primary text-white py-3 px-6 rounded-lg',
  }}
/>

Available Class Name Keys

| Key | Description | |-----|-------------| | fieldWrapper | Container for each form field | | label | All label elements | | heading | Heading elements (detail_type: 'heading') | | input | All input elements (text, textarea, select, date, number) | | inputError | Additional classes for inputs in error state | | checkbox | Checkbox input specifically | | helpText | Help text below fields | | errorText | Error message text | | button | Submit button |

Form Values

The onSubmit callback receives a FormValues object mapping question IDs to their values:

type FormValues = Record<number, string | number | boolean>;

// Example output:
{
  2: "John Doe",      // text_field
  3: "[email protected]", // text_field
  4: 1,               // select (option id)
  5: true,            // check
}

Validation

• Required fields are automatically validated
• Number fields respect min and max settings
• Error messages display after field is touched
• Hidden conditional fields are excluded from validation

Requirements

• React 17.0.0 or higher
• React DOM 17.0.0 or higher

TypeScript

All types are exported for TypeScript users:

import type {
  Question,
  QuestionOption,
  QuestionSettings,
  FormValues,
  FormErrors,
  BookingFormProps,
  BookingFormClassNames,
} from '@bookinglab/booking-ui-react';

License

MIT