@balby/booking-search 1.0.0

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@balby/booking-search",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Componente React agnostico per ricerca booking, ispirato a Booking.com",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AlbertoBarrago/booking-search.git"
+  },
+  "bugs": {
+    "url": "https://github.com/AlbertoBarrago/booking-search/issues"
+  },
+  "homepage": "https://github.com/AlbertoBarrago/booking-search#readme",
+  "keywords": [
+    "react",
+    "booking",
+    "search",
+    "widget",
+    "typescript",
+    "shadcn",
+    "tailwind",
+    "react-component",
+    "booking-search",
+    "date-picker",
+    "location-search"
+  ],
+  "author": "Alberto Barrago",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "dev": "bun run build:css && bun --watch index.ts",
+    "dev:css": "bun run build:css && bunx concurrently \"bun --watch index.ts\" \"bun run watch:css\"",
+    "build": "bun run build:css && bun build src/index.ts --outdir=dist --target=browser --format=esm",
+    "build:css": "tailwindcss -i ./src/styles/globals.css -o ./src/styles/output.css --minify",
+    "watch:css": "tailwindcss -i ./src/styles/globals.css -o ./src/styles/output.css --watch",
+    "type-check": "tsc --noEmit",
+    "test": "bun test src/components/booking-search/tests/",
+    "test:coverage": "bun test --coverage src/components/booking-search/tests/",
+    "prepublishOnly": "bun run type-check && bun run test && bun run build",
+    "ts:check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.0.11",
+    "@testing-library/react": "^16.3.1",
+    "@types/bun": "latest",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "autoprefixer": "^10.4.23",
+    "happy-dom": "^20.0.11",
+    "postcss": "^8.5.6",
+    "tailwindcss": "3.4.17",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tailwindcss": ">=3.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.562.0",
+    "react-day-picker": "8.10.1",
+    "tailwind-merge": "^3.4.0"
+  }
+}

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

@@ -0,0 +1,240 @@
+import * as React from "react"
+import {DayPicker} from "react-day-picker"
+import {format, parseISO, differenceInDays} from "date-fns"
+import {enUS} from "date-fns/locale"
+import {Calendar} from "lucide-react"
+import {cn} from "../../lib/utils"
+import type {DateRangePickerProps, AvailabilityDay} from "../../types/booking"
+import {Popover, PopoverContent, PopoverTrigger} from "./ui/popover"
+
+export function DateRangePicker({
+                                    availability,
+                                    value,
+                                    onChange,
+                                    disabled = false,
+                                    className,
+                                    minNights,
+                                    tabIndex
+                                }: DateRangePickerProps) {
+    const [open, setOpen] = React.useState(false)
+    const [localValue, setLocalValue] = React.useState(value)
+
+    React.useEffect(() => {
+        if (open) {
+            setLocalValue(value)
+        }
+    }, [open, value])
+
+    const availabilityMap = React.useMemo(() => {
+        const map = new Map<string, AvailabilityDay>()
+        availability.forEach((day) => {
+            map.set(day.date, day)
+        })
+        return map
+    }, [availability])
+
+    const disabledDays = React.useMemo(() => {
+        const disabled: Date[] = []
+        availability.forEach((day) => {
+            if (!day.isAvailable) {
+                disabled.push(parseISO(day.date))
+            }
+        })
+
+        if (minNights && localValue.from && !localValue.to) {
+            const minCheckoutDate = new Date(localValue.from)
+            minCheckoutDate.setDate(minCheckoutDate.getDate() + minNights)
+
+            availability.forEach((day) => {
+                const dayDate = parseISO(day.date)
+                if (localValue && localValue.from && dayDate > localValue.from && dayDate < minCheckoutDate) {
+                    disabled.push(dayDate)
+                }
+            })
+        }
+
+        return disabled
+    }, [availability, minNights, localValue.from, localValue.to])
+
+    const handleDayClick = (day: Date) => {
+        if (!localValue.from || (localValue.from && localValue.to)) {
+            setLocalValue({from: day, to: null})
+        } else {
+            if (day < localValue.from) {
+                setLocalValue({from: day, to: localValue.from})
+            } else {
+                if (minNights) {
+                    const nights = differenceInDays(day, localValue.from)
+                    if (nights < minNights) {
+                        return
+                    }
+                }
+                setLocalValue({from: localValue.from, to: day})
+            }
+        }
+    }
+
+    const handleConfirm = () => {
+        onChange(localValue)
+        setOpen(false)
+    }
+
+    const handleCancel = () => {
+        setLocalValue(value)
+        setOpen(false)
+    }
+
+    const renderDay = (day: Date) => {
+        const dateStr = format(day, "yyyy-MM-dd")
+        const dayData = availabilityMap.get(dateStr)
+
+        return (
+            <div className="flex flex-col items-center justify-center">
+                <span>{format(day, "d")}</span>
+                {dayData && dayData.isAvailable && (
+                    <span className="text-[10px] font-semibold text-slate-600 leading-none mt-0.5">
+            €{dayData.price}
+          </span>
+                )}
+            </div>
+        )
+    }
+
+    const formatDateRange = () => {
+        if (value.from && value.to) {
+            return `${format(value.from, "dd MMM", {locale: enUS})} - ${format(value.to, "dd MMM", {locale: enUS})}`
+        }
+        if (value.from) {
+            return format(value.from, "dd MMM yyyy", {locale: enUS})
+        }
+        return "Select Date Range"
+    }
+
+    const formatLocalDateRange = () => {
+        if (localValue.from && localValue.to) {
+            const nights = differenceInDays(localValue.to, localValue.from)
+            return `${nights} ${nights === 1 ? 'night' : 'nights'}`
+        }
+        if (localValue.from) {
+            if (minNights && minNights > 1) {
+                return `Select check-out (min. ${minNights} nights)`
+            }
+            return "Select check-out"
+        }
+        return "Select Date Range"
+    }
+
+    const modifiers: Record<string, Date | Date[]> = {
+        disabled: disabledDays,
+    }
+
+    if (localValue.from) {
+        modifiers.start = localValue.from
+    }
+
+    if (localValue.to) {
+        modifiers.end = localValue.to
+    }
+
+    const modifiersClassNames = {
+        start: "rdp-day_range_start",
+        end: "rdp-day_range_end",
+        disabled: "rdp-day_disabled",
+    }
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <button
+                    type="button"
+                    aria-label="Select Date Range"
+                    disabled={disabled}
+                    tabIndex={tabIndex}
+                    className={cn(
+                        "flex h-14 w-full items-center gap-3 rounded-lg border bg-white px-4 py-3 text-left text-sm transition-all hover:bg-slate-50 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 relative",
+                        open
+                            ? "border-blue-500 ring-2 ring-blue-500 shadow-lg z-10"
+                            : "border-slate-300",
+                        className
+                    )}
+                >
+                    <Calendar 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">
+              Check-in - Check-out
+            </span>
+                        <span
+                            className={cn(
+                                "font-medium truncate",
+                                value.from ? "text-slate-900" : "text-slate-400"
+                            )}
+                        >
+              {formatDateRange()}
+            </span>
+                    </div>
+                </button>
+            </PopoverTrigger>
+            <PopoverContent
+                className="w-auto p-0 shadow-2xl"
+                align="start"
+                sideOffset={8}
+                onInteractOutside={(e) => {
+                    e.preventDefault()
+                }}
+            >
+                <div className="p-4">
+                    <DayPicker
+                        mode="range"
+                        defaultMonth={localValue.from || new Date()}
+                        selected={{
+                            from: localValue.from || undefined,
+                            to: localValue.to || undefined,
+                        }}
+                        onDayClick={handleDayClick}
+                        disabled={disabledDays}
+                        modifiers={modifiers}
+                        modifiersClassNames={modifiersClassNames}
+                        locale={enUS}
+                        numberOfMonths={2}
+                        className="rdp-custom"
+                        formatters={{
+                            formatDay: renderDay,
+                        }}
+                    />
+
+                    <div className="border-t border-slate-200 p-4 space-y-3">
+                        <div className="text-center">
+                            <p className="text-sm font-medium text-slate-700">
+                                {formatLocalDateRange()}
+                            </p>
+                        </div>
+
+                        <div className="flex gap-2">
+                            <button
+                                type="button"
+                                onClick={handleCancel}
+                                className="flex-1 rounded-lg border-2 border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                type="button"
+                                onClick={handleConfirm}
+                                disabled={
+                                    !localValue.from ||
+                                    !localValue.to ||
+                                    (minNights && localValue.from && localValue.to
+                                        ? differenceInDays(localValue.to, localValue.from) < minNights
+                                        : false)
+                                }
+                                className="flex-1 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:hover:bg-slate-300"
+                            >
+                                Confirm
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+}

package/src/components/booking-search/guest-selector.tsx

@@ -0,0 +1,181 @@
+import * as React from "react"
+import { Users, Minus, Plus } from "lucide-react"
+import { cn } from "../../lib/utils"
+import type { GuestSelectorProps, GuestStepperProps } from "../../types/booking"
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"
+
+function GuestStepper({
+  label,
+  description,
+  value,
+  onIncrement,
+  onDecrement,
+  min = 0,
+  max = 99,
+}: GuestStepperProps) {
+  const canDecrement = value > min
+  const canIncrement = value < max
+
+  return (
+    <div className="flex items-center justify-between py-3">
+      <div className="flex flex-col">
+        <span className="text-sm font-medium text-slate-900">{label}</span>
+        {description && (
+          <span className="text-xs text-slate-500">{description}</span>
+        )}
+      </div>
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={onDecrement}
+          disabled={!canDecrement}
+          aria-label={`Decrease ${label.toLowerCase()}`}
+          className={cn(
+            "flex h-8 w-8 items-center justify-center rounded-full border-2 border-blue-500 text-blue-500 transition-all hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-slate-300 disabled:text-slate-300 disabled:hover:bg-transparent"
+          )}
+        >
+          <Minus className="h-4 w-4" aria-hidden="true" />
+        </button>
+        <span
+          className="w-8 text-center text-sm font-medium text-slate-900"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          {value}
+        </span>
+        <button
+          type="button"
+          onClick={onIncrement}
+          disabled={!canIncrement}
+          aria-label={`Increase ${label.toLowerCase()}`}
+          className={cn(
+            "flex h-8 w-8 items-center justify-center rounded-full border-2 border-blue-500 bg-blue-500 text-white transition-all hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-slate-300 disabled:bg-slate-300 disabled:hover:bg-slate-300"
+          )}
+        >
+          <Plus className="h-4 w-4" aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export function GuestSelector({
+                                  value,
+                                  onChange,
+                                  maxAdults = 30,
+                                  maxChildren = 10,
+                                  disabled = false,
+                                  className,
+                                  tabIndex
+                              }: GuestSelectorProps) {
+  const [open, setOpen] = React.useState(false)
+  const [localValue, setLocalValue] = React.useState(value)
+
+  React.useEffect(() => {
+    if (open) {
+      setLocalValue(value)
+    }
+  }, [open, value])
+
+  const handleAdultsChange = (delta: number) => {
+    const newValue = Math.max(1, Math.min(maxAdults, localValue.adults + delta))
+    setLocalValue({ ...localValue, adults: newValue })
+  }
+
+  const handleChildrenChange = (delta: number) => {
+    const newValue = Math.max(0, Math.min(maxChildren, localValue.children + delta))
+    setLocalValue({ ...localValue, children: newValue })
+  }
+
+  const handleConfirm = () => {
+    onChange(localValue)
+    setOpen(false)
+  }
+
+  const formatGuestText = () => {
+    const parts: string[] = []
+
+    if (value.adults === 1) {
+      parts.push("1 adulto")
+    } else {
+      parts.push(`${value.adults} adulti`)
+    }
+
+    if (value.children > 0) {
+      if (value.children === 1) {
+        parts.push("1 bambino")
+      } else {
+        parts.push(`${value.children} bambini`)
+      }
+    }
+
+    return parts.join(", ")
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(newOpen) => {
+        setOpen(newOpen)
+      }}
+    >
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label="Select guests"
+          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
+          )}
+        >
+          <Users 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">Guests</span>
+            <span className="font-medium text-slate-900 truncate">{formatGuestText()}</span>
+          </div>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[320px]"
+        align="start"
+        onInteractOutside={(e) => {
+          e.preventDefault()
+        }}
+      >
+        <div className="space-y-1">
+          <GuestStepper
+            label="Adulti"
+            description="Età 18+"
+            value={localValue.adults}
+            onIncrement={() => handleAdultsChange(1)}
+            onDecrement={() => handleAdultsChange(-1)}
+            min={1}
+            max={maxAdults}
+          />
+          <div className="border-t border-slate-200" />
+          <GuestStepper
+            label="Bambini"
+            description="Età 0-17"
+            value={localValue.children}
+            onIncrement={() => handleChildrenChange(1)}
+            onDecrement={() => handleChildrenChange(-1)}
+            min={0}
+            max={maxChildren}
+          />
+          <div className="border-t border-slate-200 mt-3" />
+          <div className="pt-3">
+            <button
+              type="button"
+              onClick={handleConfirm}
+              className="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            >
+              Conferma
+            </button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}