mautourco-components 0.2.4 → 0.2.7

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

@@ -1,234 +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;
+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

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

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

@@ -1,96 +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;
-
-
+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;
+
+