mautourco-components 0.1.2 → 0.2.0

package/src/components/molecules/Calendar/DateTime.tsx

@@ -0,0 +1,172 @@
+import { useState, useEffect } from "react";
+import { Calendar } from "../../ui/calendar";
+import { DateRange } from "react-day-picker";
+import { Button } from "../../ui/button";
+import TimePicker from "./TimePicker";
+import { Locale } from "date-fns/locale";
+import Icon from "../../atoms/Icon/Icon";
+
+export interface DateTimeProps {
+  mode?: "calendar" | "time" | "both";
+  selectionMode?: "single" | "range";
+  numberOfMonths?: 1 | 2;
+  disableBeforeToday?: boolean;
+  disableToday?: boolean;
+  defaultDateRange?: DateRange;
+  defaultTime?: { hour: string; minute: string; meridiem: "AM" | "PM" };
+  onChange?: (payload: { dateRange?: DateRange; time?: { hour: string; minute: string; meridiem: "AM" | "PM" } }) => void;
+}
+
+const DateTime: React.FC<DateTimeProps> = ({
+  mode = "both",
+  selectionMode = "range",
+  numberOfMonths = 2,
+  disableBeforeToday = true,
+  disableToday = false,
+  defaultDateRange,
+  defaultTime,
+  onChange,
+}) => {
+  const [dateRange, setDateRange] = useState<DateRange | undefined>(defaultDateRange);
+  const [hours, setHours] = useState<string>(defaultTime?.hour ?? "12");
+  const [minutes, setMinutes] = useState<string>(defaultTime?.minute ?? "00");
+  const [amPm, setAmPm] = useState<"AM" | "PM">(defaultTime?.meridiem ?? "AM");
+
+  // notify parent when date or time changes
+  useEffect(() => {
+    onChange?.({
+      dateRange: dateRange ?? undefined,
+      time: mode === "calendar" ? undefined : { hour: hours, minute: minutes, meridiem: amPm },
+    });
+  }, [dateRange, hours, minutes, amPm, onChange, mode]);
+
+  const handleSelect = (val: Date | Date[] | DateRange | undefined) => {
+    if (!val) {
+      setDateRange(undefined);
+      return;
+    }
+
+    if (val instanceof Date) {
+      setDateRange({ from: val, to: val });
+      return;
+    }
+
+    if (Array.isArray(val)) {
+      const sorted = val.slice().sort((a, b) => +a - +b);
+      setDateRange({ from: sorted[0], to: sorted[sorted.length - 1] });
+      return;
+    }
+    setDateRange(val);
+  };
+
+  const resetTime = () => {
+    setHours("12");
+    setMinutes("00");
+    setAmPm("AM");
+  };
+
+  const clearSelection = () => {
+    setDateRange(undefined);
+    resetTime();
+  };
+
+  const selectToday = () => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    setDateRange({ from: today, to: today });
+  };
+
+  const calendarMode = selectionMode === "single" ? "single" : "range";
+
+  const buildDisabled = () => {
+    const disabled: any[] = [];
+    if (disableBeforeToday) {
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+      disabled.push({ before: today });
+    }
+    if (disableToday) {
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+      disabled.push(today);
+    }
+    return disabled.length ? disabled : undefined;
+  };
+
+  const disabledDays = buildDisabled();
+
+  return (
+    <div className="calendar--dropdown">
+      {mode !== "time" && (() => {
+        const calendarProps: any = {
+          mode: calendarMode,
+          selected: dateRange,
+          onSelect: handleSelect,
+          weekStartsOn: 1,
+          showOutsideDays: false,
+          numberOfMonths: numberOfMonths,
+          disabled: disabledDays,
+          className:"p-0",
+          formatters: {
+            formatWeekdayName: (weekday: Date, options?: { locale?: Locale }) => {
+              return weekday
+                .toLocaleDateString(options?.locale?.code, { weekday: "short" })
+                .toUpperCase();
+            },
+          },
+        };
+
+        return <Calendar {...calendarProps}/>;
+      })()}
+
+      {mode !== "calendar" && (
+        <div className={`${mode === "both" ? "calendar--time_container_separated" : ""}`}>
+          <TimePicker
+            label="Time"
+            hour={hours}
+            minute={minutes}
+            meridiem={amPm}
+            onChange={(h, m, mm) => {
+              const hh = String(
+                Math.max(0, Math.min(12, Number(h || 0)))
+              ).padStart(2, "0");
+              const mmn = String(
+                Math.max(0, Math.min(59, Number(m || 0)))
+              ).padStart(2, "0");
+              setHours(hh);
+              setMinutes(mmn);
+              setAmPm(mm);
+            }}
+          />
+        </div>
+      )}
+
+      {mode !== "time" && (
+        <div className="calendar--footer">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={selectToday}
+            type="button"
+            className="calendar--footer--button"
+            disabled={disableToday}
+          >
+            <Icon name="calendar-outline" size="sm" />
+            Today
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearSelection}
+            type="button"
+            className="calendar--footer--button"
+          >
+            Clear
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DateTime;

package/src/components/molecules/Calendar/TimePicker.tsx

@@ -0,0 +1,174 @@
+import React, { useState, useEffect } from "react";
+
+export interface TimePickerProps {
+  label?: string;
+  hour?: string;
+  minute?: string;
+  meridiem?: "AM" | "PM";
+  state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
+  disabled?: boolean;
+  errorMessage?: string;
+  successMessage?: string;
+  onChange?: (hour: string, minute: string, meridiem: "AM" | "PM") => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+const clampTwoDigits = (val: string) => {
+  return val.replace(/\D/g, "").slice(-2);
+};
+
+const TimePicker: React.FC<TimePickerProps> = ({
+  label = "Time",
+  hour = "",
+  minute = "",
+  meridiem = "AM",
+  state = "default",
+  disabled = false,
+  onChange,
+  onFocus,
+  onBlur,
+}) => {
+  const [localHour, setLocalHour] = useState<string>(hour);
+  const [localMinute, setLocalMinute] = useState<string>(minute);
+  const [localMeridiem, setLocalMeridiem] = useState<"AM" | "PM">(meridiem);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+
+  // Keep local state in sync when parent props change (e.g. Clear button)
+  useEffect(() => {
+    if (hour !== localHour) setLocalHour(hour);
+  }, [hour]);
+
+  useEffect(() => {
+    if (minute !== localMinute) setLocalMinute(minute);
+  }, [minute]);
+
+  useEffect(() => {
+    if (meridiem !== localMeridiem) setLocalMeridiem(meridiem);
+  }, [meridiem]);
+
+  const finalState = disabled ? "disabled" : state;
+  const displayState =
+    isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
+
+  const emitChange = (h: string, m: string, mm: "AM" | "PM") => {
+    onChange?.(h, m, mm);
+  };
+
+  const handleHourChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = clampTwoDigits(e.target.value);
+    if (raw === "") {
+      setLocalHour("");
+      setIsTyping(true);
+      emitChange("", localMinute, localMeridiem);
+      return;
+    }
+    let num = Number(raw || 0);
+    if (num > 12) num = 12;
+    const val = String(num).padStart(2, "0");
+    setLocalHour(val);
+    setIsTyping(true);
+    emitChange(val, localMinute, localMeridiem);
+  };
+
+  const handleMinuteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = clampTwoDigits(e.target.value);
+    if (raw === "") {
+      setLocalMinute("");
+      setIsTyping(true);
+      emitChange(localHour, "", localMeridiem);
+      return;
+    }
+    let num = Number(raw || 0);
+    if (num > 59) num = 59;
+    const val = String(num).padStart(2, "0");
+    setLocalMinute(val);
+    setIsTyping(true);
+    emitChange(localHour, val, localMeridiem);
+  };
+
+  const handleMeridiemClick = (value: "AM" | "PM") => {
+    if (disabled) return;
+    setLocalMeridiem(value);
+    emitChange(localHour, localMinute, value);
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    setIsTyping(false);
+    onBlur?.();
+  };
+
+  return (
+    <div className={`time-picker-wrapper`} data-state={displayState}>
+      {label && <div className="time-picker__div">{label}</div>}
+
+      <div className={`time-picker time-picker--${displayState}`}>
+        <input
+          className="time-picker__input"
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          value={localHour}
+          placeholder="00"
+          onChange={handleHourChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          disabled={disabled}
+          aria-label="Hour"
+          data-unit="hour"
+        />
+
+        <div className="time-picker__colon">:</div>
+
+        <input
+          className="time-picker__input"
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          value={localMinute}
+          placeholder="00"
+          onChange={handleMinuteChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          disabled={disabled}
+          aria-label="Minute"
+          data-unit="minute"
+        />
+
+        <div
+          className="time-picker__am-pm"
+          role="tablist"
+          aria-label="AM/PM selector"
+        >
+          <button
+            type="button"
+            className={`time-picker__seg time-picker__seg--left ${localMeridiem === "AM" ? "time-picker__seg--selected" : ""}`}
+            onClick={() => handleMeridiemClick("AM")}
+            disabled={disabled}
+            aria-pressed={localMeridiem === "AM"}
+          >
+            AM
+          </button>
+          <button
+            type="button"
+            className={`time-picker__seg time-picker__seg--right ${localMeridiem === "PM" ? "time-picker__seg--selected" : ""}`}
+            onClick={() => handleMeridiemClick("PM")}
+            disabled={disabled}
+            aria-pressed={localMeridiem === "PM"}
+          >
+            PM
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TimePicker;

package/src/components/molecules/LocationDropdown/LocationDropdown.tsx

@@ -0,0 +1,234 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import '../../../styles/components/molecule/location-dropdown.css';
+
+export interface LocationOption {
+  id: string | number;
+  label: string;
+  type: 'airport' | 'port' | 'accommodation';
+  disabled?: boolean;
+}
+
+export interface LocationGroup {
+  id: string;
+  label: string;
+  options: LocationOption[];
+}
+
+export interface LocationData {
+  id: string | number;
+  locationName: string;
+}
+
+export interface LocationDropdownProps {
+  options?: LocationOption[];
+  groups?: LocationGroup[];
+  selectedValue?: string | number | null;
+  placeholder?: string;
+  label?: string;
+  onSelectionChange: (location: LocationData | null) => void;
+  disabled?: boolean;
+  error?: boolean;
+  className?: string;
+  type?: 'airport-port' | 'accommodation' | 'pickup-dropoff';
+  maxHeight?: number;
+  direction?: 'pickup' | 'dropoff';
+  showGroupTitles?: boolean;
+}
+
+const LocationDropdown: React.FC<LocationDropdownProps> = ({
+  options = [],
+  groups = [],
+  selectedValue = null,
+  placeholder = 'Select a location',
+  label,
+  onSelectionChange,
+  disabled = false,
+  error = false,
+  className = '',
+  type = 'airport-port',
+  maxHeight = 240,
+  direction = undefined,
+  showGroupTitles = true
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const handleToggleDropdown = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const handleOptionSelect = (option: LocationOption) => {
+    if (disabled) return;
+    const locationData: LocationData = {
+      id: option.id,
+      locationName: option.label,
+    };
+    onSelectionChange(locationData);
+    setIsOpen(false);
+  };
+
+  const getSelectedOption = (): LocationOption | null => {
+    if (!selectedValue) return null;
+
+    // Search in flat options
+    const flatOption = options.find(opt => opt.id === selectedValue);
+    if (flatOption) return flatOption;
+
+    // Search in groups
+    for (const group of groups) {
+      const groupOption = group.options.find(opt => opt.id === selectedValue);
+      if (groupOption) return groupOption;
+    }
+
+    return null;
+  };
+
+  const getIconForType = (optionType: 'airport' | 'port' | 'accommodation') => {
+    switch (optionType) {
+      case 'airport':
+        return 'plane';
+      case 'port':
+        return 'ship';
+      case 'accommodation':
+        return 'map-pin';
+      default:
+        return 'map-pin';
+    }
+  };
+
+  const getInputIcon = () => {
+    if (selectedOption) {
+      // For airports, show arrival/departure based on direction
+      console.log({direction});
+      
+      if (selectedOption.type === 'airport' && direction) {
+        return direction === 'pickup' ? 'arrival' : 'departure';
+      }
+      return getIconForType(selectedOption.type);
+    }
+    // Use arrival/departure icons based on direction for pickup/dropoff types
+    if ((type === 'pickup-dropoff' || type === 'airport-port') && direction) {
+      return direction === 'pickup' ? 'arrival' : 'departure';
+    }
+    return 'map-pin';
+  };
+
+  const getOptionIcon = (option: LocationOption, isSelected: boolean) => {
+    // For selected airports, show arrival/departure based on direction
+    if (isSelected && option.type === 'airport' && direction) {
+      return direction === 'pickup' ? 'arrival' : 'departure';
+    }
+    // For other types (port, accommodation), show their specific icon
+    return getIconForType(option.type);
+  };
+
+  const getDropdownState = () => {
+    if (disabled) return 'disabled';
+    if (error) return 'error';
+    if (isOpen) return 'open';
+    if (selectedValue) return 'selected';
+    return 'default';
+  };
+
+  const selectedOption = getSelectedOption();
+  const displayText = selectedOption ? selectedOption.label : placeholder;
+
+  // Prepare all options (flat or grouped)
+  const allOptions = groups.length > 0 ? groups : [{ id: 'default', label: '', options }];
+
+  return (
+    <div ref={dropdownRef} className={`location-dropdown location-dropdown--${type} ${className}`}>
+      {label && (
+        <div className="location-dropdown__label">
+          <Text size="sm" variant="medium">{label}</Text>
+        </div>
+      )}
+      
+      <div 
+        className={`location-dropdown__input location-dropdown__input--${getDropdownState()}`}
+        onClick={handleToggleDropdown}
+      >
+        <div className="location-dropdown__input-content">
+          <Icon 
+            name={getInputIcon()} 
+            size="sm" 
+            className={`location-dropdown__input-icon ${!selectedOption ? 'location-dropdown__input-icon--placeholder' : ''}`}
+          />
+          <span className={`location-dropdown__input-text ${!selectedOption ? 'location-dropdown__input-text--placeholder' : ''}`}>
+            {displayText}
+          </span>
+        </div>
+        <Icon 
+          name="chevron-down" 
+          size="sm" 
+          className="location-dropdown__input-chevron" 
+        />
+      </div>
+
+      {isOpen && (
+        <div className="location-dropdown__panel">
+          <div className="location-dropdown__content" style={{ maxHeight: `${maxHeight}px` }}>
+            <div className="location-dropdown__options-wrapper">
+              {allOptions.map((group, groupIndex) => (
+                <div key={group.id} className="location-dropdown__group">
+                  {showGroupTitles && group.label && groups.length > 0 && (
+                    <>
+                      {groupIndex > 0 && <div className="location-dropdown__divider" />}
+                      <div className="location-dropdown__group-header">
+                        <Text size="xs" variant="bold">{group.label}</Text>
+                      </div>
+                    </>
+                  )}
+                  
+                  <div className="location-dropdown__group-options">
+                    {group.options.map((option) => {
+                      const isSelected = selectedValue === option.id;
+                      const isDisabled = option.disabled || disabled;
+                      
+                      return (
+                        <div
+                          key={option.id}
+                          className={`location-dropdown__option ${isSelected ? 'location-dropdown__option--selected' : ''} ${isDisabled ? 'location-dropdown__option--disabled' : ''}`}
+                          onClick={() => !isDisabled && handleOptionSelect(option)}
+                        >
+                          <Icon 
+                            name={getOptionIcon(option, isSelected)} 
+                            size="sm" 
+                            className="location-dropdown__option-icon" 
+                          />
+                          <span className="location-dropdown__option-text">
+                            {option.label}
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LocationDropdown;

package/src/components/molecules/LocationDropdown/index.ts

@@ -0,0 +1,2 @@
+export { default } from './LocationDropdown';
+export type { LocationDropdownProps, LocationOption, LocationGroup } from './LocationDropdown';

package/src/components/molecules/RatingTab/RatingTab.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import Check from '../../atoms/Icon/icons/Check';
+import { Text } from '../../atoms/Typography/Typography';
+import RatingStar from '../../atoms/RatingStar/RatingStar';
+
+export interface RatingTabProps {
+  /**
+   * Label displayed next to the checkbox (e.g. "5 stars").
+   */
+  label: string;
+  /**
+   * Rating value displayed in the star row (0–max, typically 1–5).
+   */
+  ratingValue: number;
+  /**
+   * Maximum number of stars.
+   */
+  maxStars?: number;
+  /**
+   * Whether this tab is selected.
+   */
+  checked?: boolean;
+  /**
+   * Whether the tab is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Called when the selection state changes.
+   */
+  onChange?: (checked: boolean) => void;
+  /**
+   * Additional CSS classes for the container.
+   */
+  className?: string;
+}
+
+/**
+ * RatingTab molecule
+ *
+ * Combines a checkbox-like selector, a label and the RatingStar atom.
+ * Used for filters like "5 stars", "4 stars", etc.
+ */
+const RatingTab: React.FC<RatingTabProps> = ({
+  label,
+  ratingValue,
+  maxStars = 5,
+  checked = false,
+  disabled = false,
+  onChange,
+  className = '',
+}) => {
+  const handleToggle = () => {
+    if (disabled || !onChange) return;
+    onChange(!checked);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (disabled || !onChange) return;
+
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      onChange(!checked);
+    }
+  };
+
+  const stateClass = disabled ? 'rating-tab--disabled' : checked ? 'rating-tab--active' : 'rating-tab--default';
+
+  const containerClasses = ['rating-tab', stateClass, className].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={containerClasses}
+      role="checkbox"
+      aria-checked={checked}
+      aria-disabled={disabled}
+      tabIndex={disabled ? -1 : 0}
+      onClick={handleToggle}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="rating-tab__left">
+        <div className="rating-tab__checkbox">
+          {checked && <Check size="sm" className="rating-tab__checkbox-icon" />}
+        </div>
+        <Text size="sm" className="rating-tab__label">
+          {label}
+        </Text>
+      </div>
+
+      <RatingStar value={ratingValue} max={maxStars} />
+    </div>
+  );
+};
+
+export default RatingTab;
+
+