mautourco-components 0.1.2 → 0.2.1

package/src/components/organisms/TransferLine/TransferLine.tsx

@@ -0,0 +1,369 @@
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import Icon from "../../atoms/Icon/Icon";
+import { Text } from "../../atoms/Typography/Typography";
+import PaxSelector, { PaxData } from "../PaxSelector/PaxSelector";
+import DateTimePicker from "../DateTimePicker/DateTimePicker";
+import LocationDropdown, {
+  LocationOption,
+  LocationGroup,
+  LocationData,
+} from "../../molecules/LocationDropdown/LocationDropdown";
+import "../../../styles/components/organism/transfer-line.css";
+
+export type TransferType = "arrival" | "departure" | "inter-hotel";
+
+// Re-export LocationData for convenience
+export type { LocationData };
+
+export interface TransferLineData {
+  id: string;
+  type: TransferType;
+  paxData?: PaxData;
+  transferDate?: string;
+  pickupPoint?: LocationData;
+  dropoffPoint?: LocationData;
+}
+
+export interface TransferLineProps {
+  /** Unique identifier for this transfer line */
+  id: string;
+  /** Type of transfer: arrival, departure, or inter-hotel */
+  type: TransferType;
+  /** Pax data */
+  paxData?: PaxData;
+  /** Transfer date */
+  transferDate?: string;
+  /** Selected pickup point ID (for initial value) */
+  pickupPoint?: string | number;
+  /** Selected dropoff point ID (for initial value) */
+  dropoffPoint?: string | number;
+  /** All location options - will be filtered based on transfer type */
+  locations?: {
+    options?: LocationOption[];
+    groups?: LocationGroup[];
+  };
+  /** Callback when pax data changes */
+  onPaxChange?: (paxData: PaxData) => void;
+  /** Callback when transfer date changes */
+  onDateChange?: (date: string) => void;
+  /** Callback when pickup point changes */
+  onPickupChange?: (location: LocationData | null) => void;
+  /** Callback when dropoff point changes */
+  onDropoffChange?: (location: LocationData | null) => void;
+  /** Callback when any data changes - returns complete TransferLineData */
+  onDataChange?: (data: TransferLineData) => void;
+  /** Callback when delete button is clicked */
+  onDelete?: () => void;
+  /** Whether to show the delete button */
+  showDelete?: boolean;
+  /** Whether to show the title (Arrival, Departure, Inter-Hotel) */
+  showTitle?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const TransferLine: React.FC<TransferLineProps> = ({
+  id,
+  type,
+  paxData,
+  transferDate,
+  pickupPoint,
+  dropoffPoint,
+  locations = { options: [], groups: [] },
+  onPaxChange,
+  onDateChange,
+  onPickupChange,
+  onDropoffChange,
+  onDataChange,
+  onDelete,
+  showDelete = true,
+  showTitle = false,
+  className = "",
+}) => {
+  const [internalPaxData, setInternalPaxData] = useState<PaxData | undefined>(
+    paxData
+  );
+  const [internalTransferDate, setInternalTransferDate] = useState<
+    string | undefined
+  >(transferDate);
+  const [internalPickupPoint, setInternalPickupPoint] = useState<
+    LocationData | null
+  >(null);
+  const [internalDropoffPoint, setInternalDropoffPoint] = useState<
+    LocationData | null
+  >(null);
+
+  // Helper function to get all locations (from options and groups)
+  const getAllLocations = (
+    options: LocationOption[],
+    groups: LocationGroup[]
+  ): LocationOption[] => {
+    const groupOptions = groups.flatMap((group) => group.options);
+    return [...options, ...groupOptions];
+  };
+
+  // Filter locations based on transfer type and position (pickup/dropoff)
+  const filterLocations = (position: 'pickup' | 'dropoff') => {
+    const allOptions = locations.options || [];
+    const allGroups = locations.groups || [];
+    
+    let filterTypes: Array<'airport' | 'port' | 'accommodation'> = [];
+    
+    if (type === 'arrival') {
+      filterTypes = position === 'pickup' ? ['airport', 'port'] : ['accommodation'];
+    } else if (type === 'departure') {
+      filterTypes = position === 'pickup' ? ['accommodation'] : ['airport', 'port'];
+    } else if (type === 'inter-hotel') {
+      filterTypes = ['accommodation'];
+    }
+    
+    const filteredOptions = allOptions.filter(opt => filterTypes.includes(opt.type));
+    const filteredGroups = allGroups
+      .map(group => ({
+        ...group,
+        options: group.options.filter(opt => filterTypes.includes(opt.type))
+      }))
+      .filter(group => group.options.length > 0);
+    
+    return { options: filteredOptions, groups: filteredGroups };
+  };
+
+  // Get default location (first airport for arrival/departure)
+  const getDefaultLocation = (position: 'pickup' | 'dropoff'): LocationOption | null => {
+    const { options, groups } = filterLocations(position);
+    const allLocations = getAllLocations(options, groups);
+    
+    // For arrival pickup or departure dropoff, default to first airport
+    if ((type === 'arrival' && position === 'pickup') || (type === 'departure' && position === 'dropoff')) {
+      return allLocations.find(loc => loc.type === 'airport') || allLocations[0] || null;
+    }
+    
+    return null;
+  };
+
+  // Initialize location data from IDs or set defaults
+  React.useEffect(() => {
+    const { options, groups } = filterLocations('pickup');
+    const allPickupLocations = getAllLocations(options, groups);
+    
+    if (pickupPoint) {
+      const location = allPickupLocations.find((loc) => loc.id === pickupPoint);
+      if (location) {
+        setInternalPickupPoint({
+          id: location.id,
+          locationName: location.label,
+        });
+      }
+    } else {
+      // Set default location if applicable
+      const defaultLocation = getDefaultLocation('pickup');
+      if (defaultLocation) {
+        const defaultData: LocationData = {
+          id: defaultLocation.id,
+          locationName: defaultLocation.label,
+        };
+        setInternalPickupPoint(defaultData);
+        onPickupChange?.(defaultData);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pickupPoint, type, locations]);
+
+  React.useEffect(() => {
+    const { options, groups } = filterLocations('dropoff');
+    const allDropoffLocations = getAllLocations(options, groups);
+    
+    if (dropoffPoint) {
+      const location = allDropoffLocations.find((loc) => loc.id === dropoffPoint);
+      if (location) {
+        setInternalDropoffPoint({
+          id: location.id,
+          locationName: location.label,
+        });
+      }
+    } else {
+      // Set default location if applicable
+      const defaultLocation = getDefaultLocation('dropoff');
+      if (defaultLocation) {
+        const defaultData: LocationData = {
+          id: defaultLocation.id,
+          locationName: defaultLocation.label,
+        };
+        setInternalDropoffPoint(defaultData);
+        onDropoffChange?.(defaultData);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dropoffPoint, type, locations]);
+
+  // Update complete data whenever any field changes
+  React.useEffect(() => {
+    const completeData: TransferLineData = {
+      id,
+      type,
+      paxData: internalPaxData,
+      transferDate: internalTransferDate,
+      pickupPoint: internalPickupPoint || undefined,
+      dropoffPoint: internalDropoffPoint || undefined,
+    };
+    onDataChange?.(completeData);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, type, internalPaxData, internalTransferDate, internalPickupPoint, internalDropoffPoint]);
+
+  const getTypeIcon = () => {
+    switch (type) {
+      case "arrival":
+        return "arrival";
+      case "departure":
+        return "departure";
+      case "inter-hotel":
+        return "building";
+      default:
+        return "arrival";
+    }
+  };
+
+  const getTypeLabel = () => {
+    switch (type) {
+      case "arrival":
+        return "Arrival";
+      case "departure":
+        return "Departure";
+      case "inter-hotel":
+        return "Inter-Hotel";
+      default:
+        return "Transfer";
+    }
+  };
+
+  const handlePaxChange = (newPaxData: PaxData) => {
+    setInternalPaxData(newPaxData);
+    onPaxChange?.(newPaxData);
+  };
+
+  const handleDateChange = (newDate: string | string[]) => {
+    const dateValue = Array.isArray(newDate) ? newDate[0] : newDate;
+    setInternalTransferDate(dateValue);
+    onDateChange?.(dateValue);
+  };
+
+  const handlePickupChange = (location: LocationData | null) => {
+    setInternalPickupPoint(location);
+    onPickupChange?.(location);
+  };
+
+  const handleDropoffChange = (location: LocationData | null) => {
+    setInternalDropoffPoint(location);
+    onDropoffChange?.(location);
+  };
+
+  return (
+    <div
+      className={`transfer-line transfer-line--${type} ${className}`}
+      data-transfer-id={id}
+    >
+      {/* Transfer type header */}
+      {showTitle && (
+        <div className="transfer-line__header">
+          <Icon
+            name={getTypeIcon()}
+            size="sm"
+            className="transfer-line__header-icon"
+          />
+          <Text
+            size="sm"
+            variant="medium"
+            className="transfer-line__header-label"
+          >
+            {getTypeLabel()}
+          </Text>
+        </div>
+      )}
+
+      {/* Transfer line content */}
+      <div className="transfer-line__content-container">
+        <div className="transfer-line__content">
+          {/* Number of pax */}
+          <div className="transfer-line__field transfer-line__field--pax">
+            <PaxSelector
+              label="Number of pax"
+              value={internalPaxData}
+              onChange={handlePaxChange}
+              placeholder="2 pax"
+            />
+          </div>
+
+          {/* Transfer date */}
+          <div className="transfer-line__field transfer-line__field--date">
+            <Text
+              size="sm"
+              variant="regular"
+              className="transfer-line__field-label"
+            >
+              Transfer date
+            </Text>
+            <DateTimePicker
+              placeholder="DD/MM/YYYY"
+              mode="calendar"
+              iconPosition="left"
+              numberOfMonths={1}
+              iconBGFull={false}
+              showChevron={true}
+              onValueChange={handleDateChange}
+              selectionMode="single"
+            />
+          </div>
+
+          {/* Pick-up point */}
+          <div className="transfer-line__field transfer-line__field--pickup">
+            <LocationDropdown
+              label="Pick-up point"
+              options={filterLocations('pickup').options}
+              groups={filterLocations('pickup').groups}
+              selectedValue={internalPickupPoint?.id || null}
+              onSelectionChange={handlePickupChange}
+              placeholder="Select a pick-up point"
+              direction="pickup"
+              type={type === 'inter-hotel' ? 'accommodation' : type === 'arrival' ? 'airport-port' : 'accommodation'}
+              showGroupTitles={false}
+            />
+          </div>
+
+          {/* Drop-off point */}
+          <div className="transfer-line__field transfer-line__field--dropoff">
+            <LocationDropdown
+              label="Drop-off point"
+              options={filterLocations('dropoff').options}
+              groups={filterLocations('dropoff').groups}
+              selectedValue={internalDropoffPoint?.id || null}
+              onSelectionChange={handleDropoffChange}
+              placeholder="Select a drop-off point"
+              direction="dropoff"
+              type={type === 'inter-hotel' ? 'accommodation' : type === 'departure' ? 'airport-port' : 'accommodation'}
+              showGroupTitles={false}
+            />
+          </div>
+        </div>
+        {/* Delete button */}
+        {showDelete && (
+          <div className="transfer-line__delete">
+            <button
+              type="button"
+              className="transfer-line__delete-btn"
+              onClick={onDelete}
+              aria-label="Delete transfer line"
+            >
+              <Icon
+                name="delete"
+                size="sm"
+                className="transfer-line__delete-icon"
+              />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TransferLine;

package/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/calendar.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import * as React from "react";
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react";
+import {
+  CaptionLabelProps,
+  DayButton,
+  DayPicker,
+  getDefaultClassNames,
+  MonthGrid,
+  MonthGridProps,
+} from "react-day-picker";
+
+import { Button, buttonVariants } from "./button";
+import { cn } from "../../lib/utils";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label,
+          "calendar--caption_label"
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday,
+          "calendar--weekday"
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          );
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            );
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            );
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        MonthGrid: CustomMonthGrid,
+        CaptionLabel: CustomCaptionLabel,
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        // "data-[selected-single=true]:bg-[#FFAB63] data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-[#FFAB63] data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-[#FFAB63] data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+        // 'data-[selected-single=true]:!rounded-full data-[range-start=true]:!rounded-full data-[range-end=true]:!rounded-full data-[range-middle=true]:bg-[#FFEBD4]'
+      )}
+      {...props}
+    >
+      <span className="relative z-20">{day.date.getDate()}</span>
+    </Button>
+  );
+}
+
+function CustomMonthGrid(props: MonthGridProps) {
+  return (
+    <>
+      <hr className="calendar--separator"></hr>
+      <MonthGrid {...props} />
+    </>
+  );
+}
+
+function CustomCaptionLabel(props: CaptionLabelProps) {
+  const { children } = props;
+  const [month, year] = String(children).split(" ");
+  return (
+    <span {...props}>
+      {month}, {year}
+    </span>
+  );
+}
+
+export { Calendar, CalendarDayButton };