mautourco-components 0.1.2 → 0.2.1

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;
+
+

package/src/components/molecules/TabGroup/TabGroup.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import Tab, { TabProps } from '../../atoms/Tab/Tab';
+
+export type TabItem<T = string> = {
+  label: string;
+  value: T;
+  disabled?: boolean;
+};
+
+export interface TabGroupProps<T = string> {
+  items: TabItem<T>[];
+  size?: TabProps['size'];
+  variant?: TabProps['variant'];
+  active?: T;
+  defaultActive?: T;
+  onChange?: (value: T) => void;
+  className?: string;
+}
+
+export function TabGroup<T = string>({
+  items,
+  size = 'lg',
+  variant = 'inline',
+  active,
+  defaultActive,
+  onChange,
+  className = '',
+}: TabGroupProps<T>) {
+  const [internalActive, setInternalActive] = React.useState<T | undefined>(
+    defaultActive ?? items[0]?.value
+  );
+
+  const isControlled = active !== undefined;
+  const current = (isControlled ? active : internalActive) as T | undefined;
+
+  const handleClick = (item: TabItem<T>) => {
+    if (item.disabled) return;
+    if (!isControlled) setInternalActive(item.value);
+    onChange?.(item.value);
+  };
+
+  return (
+    <div className={`tab-group flex ${className}`} role="tablist">
+      {items.map((it) => (
+        <Tab
+          key={String(it.value)}
+          isActive={current === it.value}
+          size={size}
+          variant={variant}
+          disabled={it.disabled}
+          onClick={() => handleClick(it)}
+        >
+          {it.label}
+        </Tab>
+      ))}
+    </div>
+  );
+}
+
+export default TabGroup;

package/src/components/molecules/UserCard/UserCard.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { UserCard } from './UserCard';
 
@@ -33,4 +33,4 @@ export const Default: Story = {
       <UserCard {...args} />
     </div>
 ),
-};
+};

package/src/components/organisms/CardContainer/CardContainer.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+export type CardContainerSpacing = 'compact' | 'normal' | 'relaxed' | 'chill';
+
+export interface CardContainerProps {
+  /**
+   * The content to be displayed inside the card container
+   */
+  children: React.ReactNode;
+  
+  /**
+   * Spacing variant for the card container padding
+   * - compact: 8px padding
+   * - normal: 12px padding
+   * - relaxed: 16px padding
+   * - chill: 24px padding
+   */
+  spacing?: CardContainerSpacing;
+  
+  /**
+   * Additional CSS classes to apply to the card container
+   */
+  className?: string;
+  
+  /**
+   * Optional click handler
+   */
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  
+  /**
+   * Optional data attributes for testing or tracking
+   */
+  'data-testid'?: string;
+}
+
+/**
+ * CardContainer is a versatile UI element that groups related content,
+ * such as text, images, buttons, or interactive elements.
+ * 
+ * It supports different spacing variants to control the visual density
+ * and padding of the container.
+ */
+export const CardContainer: React.FC<CardContainerProps> = ({
+  children,
+  spacing = 'normal',
+  className = '',
+  onClick,
+  'data-testid': testId,
+}) => {
+  const baseClass = 'card-container';
+  const spacingClass = `card-container--spacing-${spacing}`;
+  const classes = [baseClass, spacingClass, className].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={classes}
+      onClick={onClick}
+      data-testid={testId}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default CardContainer;
+

package/src/components/organisms/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import CalendarInput from "../../molecules/Calendar/CalendarInput";
+import DateTime, { DateTimeProps } from "../../molecules/Calendar/DateTime";
+import { Popover, PopoverTrigger, PopoverContent } from "../../ui/popover";
+
+import { format } from "date-fns";
+
+export interface DateTimePickerProps extends Partial<DateTimeProps> {
+  placeholder?: string;
+  disabled?: boolean;
+  onValueChange?: (value: string | string[]) => void;
+  /** Whether the calendar icon has full bg*/
+  iconBGFull?: boolean;
+  /** Position of the calendar icon: left or right */
+  iconPosition?: "left" | "right";
+  /** Show chevron on the right when icon is on the left */
+  showChevron?: boolean;
+}
+
+const formatDateRange = (dateRange: any) => {
+  if (!dateRange || !dateRange.from) return "";
+  const from = dateRange.from;
+  const to = dateRange.to ?? dateRange.from;
+  
+  if (+from === +to) return format(from, "dd/MM/yyyy");
+  return `${format(from, "dd/MM/yyyy")} - ${format(to, "dd/MM/yyyy")}`;
+};
+
+const DateTimePicker: React.FC<DateTimePickerProps> = ({
+  placeholder = "Select date",
+  disabled = false,
+  mode = "both",
+  selectionMode = "range",
+  numberOfMonths = 2,
+  disableBeforeToday = true,
+  disableToday = false,
+  onValueChange,
+  iconBGFull = true,
+  iconPosition = "right",
+  showChevron = false,
+}) => {
+  const [value, setValue] = useState<string>("");
+  const [selectedDateRange, setSelectedDateRange] = useState<any>(undefined);
+  const [selectedTime, setSelectedTime] = useState<{ hour: string; minute: string; meridiem: "AM" | "PM" } | undefined>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleDtChange = React.useCallback((payload: { dateRange?: any; time?: { hour: string; minute: string; meridiem: "AM" | "PM" } }) => {
+    const datePart = formatDateRange(payload.dateRange);
+    const time = payload.time ? `${payload.time.hour}:${payload.time.minute} ${payload.time.meridiem}` : "";
+    const combined = [datePart, time].filter(Boolean).join(" ");
+    setValue(combined);
+    setSelectedDateRange(payload.dateRange);
+    setSelectedTime(payload.time);
+    
+    // Return date strings in yyyy-MM-dd format for both modes
+    if (payload.dateRange) {
+      if (selectionMode === "range") {
+        // Return array of date strings for range mode
+        const from = payload.dateRange.from;
+        const to = payload.dateRange.to ?? payload.dateRange.from;
+        
+        if (from && to) {
+          const fromStr = format(from, "yyyy-MM-dd");
+          const toStr = format(to, "yyyy-MM-dd");
+          onValueChange?.([fromStr, toStr]);
+        }
+      } else {
+        // Return single date string in yyyy-MM-dd format for single mode
+        const date = payload.dateRange.from;
+        if (date) {
+          const dateStr = format(date, "yyyy-MM-dd");
+          onValueChange?.(dateStr);
+        }
+      }
+    }
+  }, [onValueChange, selectionMode]);
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <div>
+          <CalendarInput
+            placeholder={placeholder}
+            value={value}
+            disabled={disabled}
+            iconBGFull={iconBGFull}
+            iconPosition={iconPosition}
+            showChevron={showChevron}
+            isOpen={isOpen}
+          />
+        </div>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-auto p-0 border-transparent">
+        <DateTime
+          mode={mode}
+          selectionMode={selectionMode}
+          numberOfMonths={numberOfMonths as 1 | 2}
+          disableBeforeToday={disableBeforeToday}
+          disableToday={disableToday}
+          onChange={handleDtChange}
+          defaultDateRange={selectedDateRange}
+          defaultTime={selectedTime}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default DateTimePicker;