@balby/booking-search 1.0.0

package/src/components/booking-search/index.tsx

@@ -0,0 +1,199 @@
+import * as React from "react"
+import { Search } from "lucide-react"
+import { cn } from "../../lib/utils"
+import type { BookingSearchProps, SearchLocation, GuestData } from "../../types/booking"
+import { LocationCombobox } from "./location-combobox"
+import { DateRangePicker } from "./date-range-picker"
+import { GuestSelector } from "./guest-selector"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog"
+import type {JSX} from "react"
+
+/**
+ * A component that provides a booking search interface. Users can select a destination, date range, and number of guests.
+ * It supports both desktop and mobile layouts.
+ *
+ * @param {Object} props - The properties object.
+ * @param {Array} props.availability - The data specifying available dates for booking.
+ * @param {Array} props.locations - The list of available locations for selection.
+ * @param {Function} props.onSearch - Callback function triggered when the search is submitted. Receives selected search criteria as an argument.
+ * @param {Object} [props.defaultValues] - Default values for location, check-in and check-out dates, and guest count.
+ * @param {string} [props.searchButtonText='Cerca'] - Text for the search button.
+ * @param {string} [props.locationPlaceholder='Dove vuoi andare?'] - Placeholder text for the location input field.
+ * @param {number} [props.minNights=1] - Minimum number of nights for the date range picker.
+ * @param {number} [props.maxAdults=30] - Maximum number of adult guests allowed.
+ * @param {number} [props.maxChildren=10] - Maximum number of child guests allowed.
+ * @param {string} [props.className] - Additional CSS class for customizing the component style.
+ *
+ * @return {JSX.Element} A booking search component containing inputs for location, date range, and guest selection, along with a search button.
+ */
+export function BookingSearch({
+  availability,
+  locations,
+  onSearch,
+  defaultValues,
+  searchButtonText = "Search",
+  locationPlaceholder = "Where do you want to go?",
+  minNights = 1,
+  maxAdults = 30,
+  maxChildren = 10,
+  className,
+}: BookingSearchProps): JSX.Element {
+  const [location, setLocation] = React.useState<SearchLocation | null>(
+    defaultValues?.location ?? null
+  )
+  const [dateRange, setDateRange] = React.useState<{
+    from: Date | null
+    to: Date | null
+  }>({
+    from: defaultValues?.checkIn ?? null,
+    to: defaultValues?.checkOut ?? null,
+  })
+  const [guests, setGuests] = React.useState<GuestData>({
+    adults: defaultValues?.adults ?? 2,
+    children: defaultValues?.children ?? 0,
+  })
+
+  const [mobileOpen, setMobileOpen] = React.useState(false)
+
+  const [isMobile, setIsMobile] = React.useState(false)
+
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768)
+    }
+    checkMobile()
+    window.addEventListener("resize", checkMobile)
+    return () => window.removeEventListener("resize", checkMobile)
+  }, [])
+
+  const handleSearch = () => {
+    onSearch({
+      location,
+      checkIn: dateRange.from,
+      checkOut: dateRange.to,
+      adults: guests.adults,
+      children: guests.children,
+    })
+    if (isMobile) {
+      setMobileOpen(false)
+    }
+  }
+
+  const isSearchEnabled = location && dateRange.from && dateRange.to
+
+  const SearchContent = () => (
+      <div className="flex flex-col gap-3 md:flex-row md:gap-2 md:items-center">
+        <div className="flex-1 relative">
+          <LocationCombobox
+              title="Destination"
+              locations={locations}
+              value={location}
+              onChange={setLocation}
+              placeholder={locationPlaceholder}
+              className="w-full border-0 md:rounded-l-lg md:rounded-r-none focus-visible:ring-0"
+              tabIndex={1}
+          />
+        </div>
+
+        <div className="flex-1 relative">
+          <DateRangePicker
+              availability={availability}
+              value={dateRange}
+              onChange={setDateRange}
+              minNights={minNights}
+              className="w-full border-0 md:rounded-none focus-visible:ring-0"
+              tabIndex={2}
+          />
+        </div>
+
+        <div className="flex-1 relative">
+          <GuestSelector
+              value={guests}
+              onChange={setGuests}
+              maxAdults={maxAdults}
+              maxChildren={maxChildren}
+              className="w-full border-0 md:rounded-none focus-visible:ring-0"
+              tabIndex={3}
+          />
+        </div>
+
+        <div className="md:pl-2">
+          <button
+              type="button"
+              onClick={handleSearch}
+              disabled={!isSearchEnabled}
+              aria-label={searchButtonText}
+              tabIndex={4}
+              className={cn(
+                  "flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-blue-600 px-6 text-sm font-bold text-white transition-all hover:bg-blue-700 disabled:bg-slate-300 md:w-auto",
+              )}
+          >
+            <Search className="h-4 w-4" />
+            <span className="whitespace-nowrap">{searchButtonText}</span>
+          </button>
+        </div>
+      </div>
+  )
+
+  if (!isMobile) {
+    return (
+      <div
+        className={cn(
+          "w-full rounded-2xl border border-slate-200 bg-white p-3 shadow-xl",
+          className
+        )}
+        role="search"
+        aria-label="Booking search"
+      >
+        <SearchContent />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <Dialog open={mobileOpen} onOpenChange={setMobileOpen}>
+        <DialogTrigger asChild>
+          <button
+            type="button"
+            tabIndex={0}
+            className={cn(
+              "flex h-14 w-full items-center gap-3 rounded-lg border border-slate-300 bg-white px-4 shadow-md",
+              className
+            )}
+            aria-label="Open booking search"
+          >
+            <Search className="h-5 w-5 text-slate-500" aria-hidden="true" />
+            <div className="flex flex-col items-start text-left">
+              <span className="text-sm font-semibold text-slate-900">
+                Dove vuoi andare?
+              </span>
+              <span className="text-xs text-slate-500">
+                {location?.name ?? "Destination"} • {guests.adults + guests.children}{" "}
+                {guests.adults + guests.children === 1 ? "ospite" : "ospiti"}
+              </span>
+            </div>
+          </button>
+        </DialogTrigger>
+        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>Search your accommodation</DialogTitle>
+          </DialogHeader>
+          <div className="mt-4">
+            <SearchContent />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+export { LocationCombobox } from "./location-combobox"
+export { DateRangePicker } from "./date-range-picker"
+export { GuestSelector } from "./guest-selector"

package/src/components/booking-search/location-combobox.tsx

@@ -0,0 +1,93 @@
+import * as React from "react"
+import {Check, MapPin} from "lucide-react"
+import {cn} from "../../lib/utils"
+import type {LocationComboboxProps} from "../../types/booking"
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "./ui/command"
+import {Popover, PopoverContent, PopoverTrigger} from "./ui/popover"
+
+export function LocationCombobox({
+                                     locations,
+                                     value,
+                                     onChange,
+                                     placeholder = "Where do you want to stay?",
+                                     disabled = false,
+                                     className,
+                                     tabIndex,
+                                     title = "Destination"
+                                 }: LocationComboboxProps) {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <button
+                    type="button"
+                    role="combobox"
+                    aria-expanded={open}
+                    aria-label="Select location"
+                    disabled={disabled}
+                    tabIndex={tabIndex}
+                    className={cn(
+                        "flex h-14 w-full items-center gap-3 rounded-lg border border-slate-300 bg-white px-4 py-3 text-left text-sm transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                        className
+                    )}
+                >
+                    <MapPin className="h-5 w-5 text-slate-500 flex-shrink-0" aria-hidden="true"/>
+                    <div className="flex flex-col min-w-0 flex-1">
+                        <span className="text-xs font-medium text-slate-500">{title}</span>
+                        {value ? (
+                            <span className="font-medium text-slate-900 truncate">{value.name}</span>
+                        ) : (
+                            <span className="text-slate-400 truncate">{placeholder}</span>
+                        )}
+                    </div>
+                </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+                <Command>
+                    <CommandInput placeholder="Search a destination..."/>
+                    <CommandList>
+                        <CommandEmpty>No location found.</CommandEmpty>
+                        <CommandGroup>
+                            {locations.map((location) => (
+                                <CommandItem
+                                    key={location.id}
+                                    value={location.name}
+                                    onSelect={() => {
+                                        onChange(location.id === value?.id ? null : location)
+                                        setOpen(false)
+                                    }}
+                                    className="flex items-center justify-between"
+                                >
+                                    <div className="flex items-center gap-2">
+                                        <MapPin className="h-4 w-4 text-slate-500" aria-hidden="true"/>
+                                        <div className="flex flex-col">
+                                            <span className="font-medium">{location.name}</span>
+                                            {location.type && (
+                                                <span className="text-xs text-slate-500">{location.type}</span>
+                                            )}
+                                        </div>
+                                    </div>
+                                    <Check
+                                        className={cn(
+                                            "h-4 w-4",
+                                            value?.id === location.id ? "opacity-100" : "opacity-0"
+                                        )}
+                                        aria-hidden="true"
+                                    />
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    )
+}

package/src/components/booking-search/tests/date-range-picker.test.tsx

@@ -0,0 +1,308 @@
+import { test, expect, describe, beforeEach } from "bun:test"
+import React from "react"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import { DateRangePicker } from "../date-range-picker"
+import type { AvailabilityDay } from "../../../types/booking"
+import { format, addDays } from "date-fns"
+
+describe("DateRangePicker", () => {
+  const today = new Date()
+  const tomorrow = addDays(today, 1)
+  const nextWeek = addDays(today, 7)
+
+  const mockAvailability: AvailabilityDay[] = Array.from({ length: 30 }, (_, i) => {
+    const date = addDays(today, i)
+    return {
+      date: format(date, "yyyy-MM-dd"),
+      isAvailable: true,
+      price: 100 + i * 5,
+    }
+  })
+
+  const mockValue = {
+    from: null as Date | null,
+    to: null as Date | null,
+  }
+
+  const mockOnChange = (range: { from: Date | null; to: Date | null }) => {}
+
+  beforeEach(() => {
+    // Reset any state between tests if needed
+  })
+
+  test("renders with placeholder when no dates are selected", () => {
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={mockValue}
+        onChange={mockOnChange}
+      />
+    )
+
+    expect(screen.getByText("Select Date Range")).toBeDefined()
+    expect(screen.getByText("Check-in - Check-out")).toBeDefined()
+  })
+
+  test("displays selected date range", () => {
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={{ from: today, to: nextWeek }}
+        onChange={mockOnChange}
+      />
+    )
+
+    const dateText = screen.getByText(/\d{2} \w{3} - \d{2} \w{3}/)
+    expect(dateText).toBeDefined()
+  })
+
+  test("displays only check-in date when check-out is not selected", () => {
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={{ from: today, to: null }}
+        onChange={mockOnChange}
+      />
+    )
+
+    const dateText = screen.getByText(/\d{2} \w{3} \d{4}/)
+    expect(dateText).toBeDefined()
+  })
+
+  test("opens popover when button is clicked", async () => {
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={mockValue}
+        onChange={mockOnChange}
+      />
+    )
+
+    const button = screen.getByRole("button", { name: "Select Date Range" })
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(screen.getByText("Confirm")).toBeDefined()
+      expect(screen.getByText("Cancel")).toBeDefined()
+    })
+  })
+
+  test("selects check-in date on first click", async () => {
+    let currentValue = { from: null as Date | null, to: null as Date | null }
+    const handleChange = (range: { from: Date | null; to: Date | null }) => {
+      currentValue = range
+    }
+
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={currentValue}
+        onChange={handleChange}
+      />
+    )
+
+    const button = screen.getByRole("button", { name: "Select Date Range" })
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(screen.getByText("Confirm")).toBeDefined()
+    })
+  })
+
+  test("calls onChange with selected date range when confirm is clicked", async () => {
+    let currentValue = { from: null as Date | null, to: null as Date | null }
+    const handleChange = (range: { from: Date | null; to: Date | null }) => {
+      currentValue = range
+    }
+
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={currentValue}
+        onChange={handleChange}
+      />
+    )
+
+    const button = screen.getByRole("button", { name: "Select Date Range" })
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      const confirmButton = screen.getByText("Confirm")
+      expect(confirmButton).toBeDefined()
+      // Confirm button should be disabled when no dates are selected
+      expect(confirmButton.hasAttribute("disabled")).toBe(true)
+    })
+  })
+
+  test("does not call onChange until confirm is clicked", async () => {
+    let changeCallCount = 0
+    const handleChange = (range: { from: Date | null; to: Date | null }) => {
+      changeCallCount++
+    }
+
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={{ from: null, to: null }}
+        onChange={handleChange}
+      />
+    )
+
+    const button = screen.getByRole("button", { name: "Select Date Range" })
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(screen.getByText("Confirm")).toBeDefined()
+    })
+
+    // Clicking on calendar dates would happen here, but that requires more complex interaction
+    // onChange should not have been called yet
+    expect(changeCallCount).toBe(0)
+  })
+
+  test("resets to original value when cancel is clicked", async () => {
+    const { rerender } = render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={{ from: today, to: nextWeek }}
+        onChange={mockOnChange}
+      />
+    )
+
+    const button = screen.getByRole("button", { name: "Select Date Range" })
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      const cancelButton = screen.getByText("Cancel")
+      fireEvent.click(cancelButton)
+    })
+
+    // Popover should close
+    await waitFor(() => {
+      expect(screen.queryByText("Cancel")).toBeNull()
+    })
+  })
+
+  test("displays night count when both dates are selected", async () => {
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={{ from: today, to: nextWeek }}
+        onChange={mockOnChange}
+      />
+    )
+
+    const button = screen.getByRole("button", { name: "Select Date Range" })
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(screen.getByText("7 nights")).toBeDefined()
+    })
+  })
+
+  test("displays singular form for one night", async () => {
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={{ from: today, to: tomorrow }}
+        onChange={mockOnChange}
+      />
+    )
+
+    const button = screen.getByRole("button", { name: "Select Date Range" })
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(screen.getByText("1 night")).toBeDefined()
+    })
+  })
+
+  test("disables the button when disabled prop is true", () => {
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={mockValue}
+        onChange={mockOnChange}
+        disabled={true}
+      />
+    )
+
+    const button = screen.getByRole("button", { name: "Select Date Range" })
+    expect(button.hasAttribute("disabled")).toBe(true)
+  })
+
+  test("applies custom className", () => {
+    const { container } = render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={mockValue}
+        onChange={mockOnChange}
+        className="custom-class"
+      />
+    )
+
+    const button = container.querySelector("button")
+    expect(button?.classList.contains("custom-class")).toBe(true)
+  })
+
+  test("closes popover after confirming selection", async () => {
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={{ from: today, to: tomorrow }}
+        onChange={mockOnChange}
+      />
+    )
+
+    const button = screen.getByRole("button", { name: "Select Date Range" })
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(screen.getByText("Confirm")).toBeDefined()
+    })
+
+    const confirmButton = screen.getByText("Confirm")
+    fireEvent.click(confirmButton)
+
+    await waitFor(() => {
+      expect(screen.queryByText("Confirm")).toBeNull()
+    })
+  })
+
+  test("shows correct message when only check-in is selected", async () => {
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={{ from: today, to: null }}
+        onChange={mockOnChange}
+      />
+    )
+
+    const button = screen.getByRole("button", { name: "Select Date Range" })
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(screen.getByText("Select check-out")).toBeDefined()
+    })
+  })
+
+  test("prevents interaction outside from closing popover", async () => {
+    render(
+      <DateRangePicker
+        availability={mockAvailability}
+        value={mockValue}
+        onChange={mockOnChange}
+      />
+    )
+
+    const button = screen.getByRole("button", { name: "Select Date Range" })
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(screen.getByText("Confirm")).toBeDefined()
+    })
+
+    // Try to close by clicking outside - this is prevented by onInteractOutside
+    // The popover should remain open
+  })
+})