mautourco-components 0.2.12 → 0.2.13

package/src/components/atoms/Icon/icons/registry.tsx

@@ -1,41 +1,52 @@
 import React from 'react';
 
-import Chevron from './Chevron';
+import AccomIcon from './AccomIcon';
+import ArrivalIcon from './ArrivalIcon';
+import ArrowDownOutlineIcon from './ArrowDownOutlineIcon';
+import ArrowRightOutlineIcon from './ArrowRightOutlineIcon';
+import Building2OutlineIcon from './Building2OutlineIcon';
+import BuildingIcon from './BuildingIcon';
+import BusIcon from './BusIcon';
+import Calendar2Icon from './Calendar2Icon';
+import CalendarIcon from './CalendarIcon';
+import CalendarOutlineIcon from './CalendarOutlineIcon';
+import CalendarRangeOutlineIcon from './CalendarRangeOutlineIcon';
+import CarIcon from './CarIcon';
 import Check from './Check';
+import CheckCircleIcon from './CheckCircleIcon';
+import Chevron from './Chevron';
 import Close from './Close';
-import Search from './Search';
-import User from './User';
-import UserIcon from './UserIcon';
-import CalendarIcon from './CalendarIcon';
-import ArrivalIcon from './ArrivalIcon';
-import DepartureIcon from './DepartureIcon';
-import MapPinIcon from './MapPinIcon';
 import DeleteIcon from './DeleteIcon';
+import DepartureIcon from './DepartureIcon';
 import EyeIcon from './EyeIcon';
-import InfoIcon from './InfoIcon';
-import CheckCircleIcon from './CheckCircleIcon';
-import StrollerIcon from './StrollerIcon';
-import CarIcon from './CarIcon';
-import MoreIcon from './MoreIcon';
-import Settings from './Settings';
-import MenuIcon from './MenuIcon';
-import MautourcoLogo from './MautoucoLogo';
-import YouTubeIcon from './Youtube';
 import FacebookIcon from './FacebookIcon';
-import TwitterIcon from './TwitterIcon';
+import HomeIcon from './HomeIcon';
+import InfoIcon from './InfoIcon';
 import LinkedInIcon from './LinkedInIcon';
-import CalendarOutlineIcon from './CalendarOutlineIcon';
-import CalendarRangeOutlineIcon from './CalendarRangeOutlineIcon';
-import ArrowRightOutlineIcon from './ArrowRightOutlineIcon';
-import PlaneTakeoffOutlineIcon from './PlaneTakeoffOutlineIcon';
-import PlaneLandingOutlineIcon from './PlaneLandingOutlineIcon';
-import Building2OutlineIcon from './Building2OutlineIcon';
-import PlusIcon from './PlusIcon';
+import MapIcon from './MapIcon';
+import MapPinIcon from './MapPinIcon';
+import MautourcoLogo from './MautoucoLogo';
+import MenuIcon from './MenuIcon';
+import MicroIcon from './MicroIcon';
 import MinusIcon from './MinusIcon';
-import HomeIcon from './HomeIcon';
+import MoreIcon from './MoreIcon';
+import MoreVerticalIcon from './MoreVerticalIcon';
+import NightIcon from './NightIcon';
 import PlaneIcon from './PlaneIcon';
+import PlaneLandingOutlineIcon from './PlaneLandingOutlineIcon';
+import PlaneTakeoffOutlineIcon from './PlaneTakeoffOutlineIcon';
+import PlusIcon from './PlusIcon';
+import Search from './Search';
+import Settings from './Settings';
 import ShipIcon from './ShipIcon';
-import BuildingIcon from './BuildingIcon';
+import StopWatchIcon from './StopWatchIcon';
+import StrollerIcon from './StrollerIcon';
+import TwitterIcon from './TwitterIcon';
+import User from './User';
+import UserIcon from './UserIcon';
+import UtensilsIcon from './Utensils';
+import WalletIcon from './WalletIcon';
+import YouTubeIcon from './Youtube';
 
 export type IconBaseProps = {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -74,6 +85,7 @@ export const ICONS = {
   'calendar-outline': CalendarOutlineIcon as unknown as IconComponent,
   'calendar-range-outline': CalendarRangeOutlineIcon as unknown as IconComponent,
   'arrow-right-outline': ArrowRightOutlineIcon as unknown as IconComponent,
+  'arrow-down-outline': ArrowDownOutlineIcon as unknown as IconComponent,
   'plane-takeoff-outline': PlaneTakeoffOutlineIcon as unknown as IconComponent,
   'plane-landing-outline': PlaneLandingOutlineIcon as unknown as IconComponent,
   'building-2-outline': Building2OutlineIcon as unknown as IconComponent,
@@ -100,6 +112,16 @@ export const ICONS = {
   plane: PlaneIcon as unknown as IconComponent,
   ship: ShipIcon as unknown as IconComponent,
   building: BuildingIcon as unknown as IconComponent,
+  calendar2: Calendar2Icon as unknown as IconComponent,
+  'more-vertical': MoreVerticalIcon as unknown as IconComponent,
+  accom: AccomIcon as unknown as IconComponent,
+  night: NightIcon as unknown as IconComponent,
+  utensils: UtensilsIcon as unknown as IconComponent,
+  micro: MicroIcon as unknown as IconComponent,
+  stopwatch: StopWatchIcon as unknown as IconComponent,
+  bus: BusIcon as unknown as IconComponent,
+  map: MapIcon as unknown as IconComponent,
+  wallet: WalletIcon as unknown as IconComponent,
 } as const satisfies Record<string, IconComponent>;
 
-export type IconName = keyof typeof ICONS;
+export type IconName = keyof typeof ICONS;

package/src/components/atoms/Typography/Typography.tsx

@@ -5,19 +5,23 @@ type BodySizeInput = BodyTokenSize | 'base' | 'xl';
 type Variant = 'light' | 'regular' | 'medium' | 'bold' | 'black';
 type Leading = 'none' | '4' | '5' | '6' | '7';
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-type TextColor = 
-  | 'default' 
-  | 'accent' 
-  | 'subtle' 
-  | 'light' 
-  | 'brand' 
+export type TextColor =
+  | 'default'
+  | 'accent'
+  | 'subtle'
+  | 'light'
+  | 'brand'
   | 'inverted'
   | 'state-default'
   | 'state-hover'
   | 'state-filled'
   | 'state-disabled'
   | 'state-error'
-  | 'state-success';
+  | 'state-success'
+  | 'yellow';
+
+export type TextVariant = Variant;
+export type TextLeading = Leading;
 
 interface BaseProps {
   variant?: Variant;
@@ -71,28 +75,28 @@ const defaultBodyLeading: Record<BodyTokenSize, Leading> = {
   lg: '7',
 };
 
-const tokenBodyLeadings: Record<BodyTokenSize, Array<'leading-none' | 'leading-4' | 'leading-5' | 'leading-6' | 'leading-7'>> = {
+const tokenBodyLeadings: Record<
+  BodyTokenSize,
+  Array<'leading-none' | 'leading-4' | 'leading-5' | 'leading-6' | 'leading-7'>
+> = {
   xs: ['leading-5', 'leading-4', 'leading-none'],
   sm: ['leading-6', 'leading-5', 'leading-none'],
   md: ['leading-6', 'leading-7', 'leading-none'],
   lg: ['leading-7', 'leading-6', 'leading-none'],
 };
 
-const mapLeadingToToken = (leading: Leading): 'leading-none' | 'leading-4' | 'leading-5' | 'leading-6' | 'leading-7' => {
+const mapLeadingToToken = (
+  leading: Leading
+): 'leading-none' | 'leading-4' | 'leading-5' | 'leading-6' | 'leading-7' => {
   if (leading === 'none') return 'leading-none';
   return `leading-${leading}` as 'leading-4' | 'leading-5' | 'leading-6' | 'leading-7';
 };
 
-const getBodyClass = (
-  size: BodyTokenSize,
-  leading?: Leading
-): { className: string; lineHeightHandled: boolean } => {
+const getBodyClass = (size: BodyTokenSize, leading?: Leading): { className: string; lineHeightHandled: boolean } => {
   const availableLeadings = tokenBodyLeadings[size];
   const desiredLeading = leading ? mapLeadingToToken(leading) : mapLeadingToToken(defaultBodyLeading[size]);
 
-  const resolvedLeading = availableLeadings.includes(desiredLeading)
-    ? desiredLeading
-    : availableLeadings[0];
+  const resolvedLeading = availableLeadings.includes(desiredLeading) ? desiredLeading : availableLeadings[0];
 
   return {
     className: `body-${size}-${resolvedLeading}`,
@@ -112,7 +116,6 @@ const getColorStyle = (color?: TextColor): React.CSSProperties => {
   };
 };
 
-
 export const Heading: React.FC<HeadingProps> = ({
   level = 2,
   variant = 'bold',
@@ -127,12 +130,7 @@ export const Heading: React.FC<HeadingProps> = ({
   const baseClass = headingTokenClass[level] ?? headingTokenClass[2];
   const variantClass = buildVariantClass(baseClass, variant);
 
-  const classes = [
-    baseClass,
-    variantClass,
-    leading ? leadingFallback[leading] : '',
-    className,
-  ]
+  const classes = [baseClass, variantClass, leading ? leadingFallback[leading] : '', className]
     .filter(Boolean)
     .join(' ');
 
@@ -145,7 +143,6 @@ export const Heading: React.FC<HeadingProps> = ({
   );
 };
 
-
 export const Text: React.FC<TextProps> = ({
   size = 'md',
   variant = 'regular',
@@ -161,12 +158,7 @@ export const Text: React.FC<TextProps> = ({
   const { className: baseClass, lineHeightHandled } = getBodyClass(normalizedSize, leading);
   const variantClass = buildVariantClass(baseClass, variant);
 
-  const classes = [
-    baseClass,
-    variantClass,
-    leading && !lineHeightHandled ? leadingFallback[leading] : '',
-    className,
-  ]
+  const classes = [baseClass, variantClass, leading && !lineHeightHandled ? leadingFallback[leading] : '', className]
     .filter(Boolean)
     .join(' ');
 

package/src/components/molecules/ActionDropdown/ActionDropdown.css

@@ -0,0 +1,23 @@
+.action-dropdown {
+  @apply relative;
+  width: 153px;
+  background-color: #fff;
+  padding: var(--spacing-padding-px-4);
+  border-radius: var(--border-radius-rounded-xl);
+  button {
+    @apply flex items-center w-full;
+    @apply transition-all duration-200;
+    height: 36px;
+    border-radius: var(--border-radius-rounded-md);
+    padding-inline: var(--spacing-padding-px-2);
+    &:hover {
+      background-color: var(--color-neutral-100);
+    }
+  }
+}
+
+.action-dropdown-trigger {
+  @apply w-8 h-8 flex items-center justify-center;
+  border-radius: var(--border-radius-rounded-lg);
+  background-color: var(--color-neutral-100);
+}

package/src/components/molecules/ActionDropdown/ActionDropdown.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
+import './ActionDropdown.css';
+
+export interface ActionDropdownItem {
+  /** Label for the action dropdown item */
+  label: string;
+  /** Callback function to be called when the action dropdown item is clicked */
+  onClick?: () => void;
+}
+
+export interface ActionDropdownProps {
+  /** Data for the action dropdown */
+  data: ActionDropdownItem[];
+}
+
+/**
+ * A dropdown component that displays a list of actions triggered by a more icon button. Uses a Popover for the dropdown menu.
+ *
+ * @example
+ * <ActionDropdown data={data} />
+ * @param ActionDropdownProps
+ * @returns
+ */
+export const ActionDropdown: React.FC<ActionDropdownProps> = ({ data }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger>
+        <button className="action-dropdown-trigger">
+          <Icon name="more-vertical" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="action-dropdown" align="end">
+        {data.map((item, index) => (
+          <button
+            key={`ad-${index}`}
+            onClick={() => {
+              setOpen(false);
+              item.onClick?.();
+            }}>
+            <Text variant="medium" size="sm" as="span">
+              {item.label}
+            </Text>
+          </button>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/molecules/DateDisplay/DateDisplay.tsx

@@ -0,0 +1,47 @@
+import { format, isValid } from 'date-fns';
+import React, { Fragment, useMemo } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+
+export interface DateDisplayProps {
+  /** Dates to display */
+  date: string[] | Date[];
+}
+
+/**
+ * A component for displaying a list of dates in a readable format.
+ *
+ * @example
+ * <DateDisplay date={['2025-01-01', '2025-01-02']} />
+ * @param DateDisplayProps
+ * @returns
+ */
+export const DateDisplay: React.FC<DateDisplayProps> = ({ date }) => {
+  const formattedDate = useMemo(() => {
+    return date.map((d) => {
+      const dateObj = new Date(d);
+      // Check if the date is valid then format it to dd/MM/yyyy format
+      if (isValid(dateObj)) {
+        return format(dateObj, 'dd/MM/yyyy');
+      }
+      // If the date is not valid, return the original date
+      return d;
+    }) as string[];
+  }, [date]);
+
+  return (
+    <div className="flex items-center gap-x-3">
+      {formattedDate.map((date, index) => (
+        <Fragment key={`dd-${index}`}>
+          <span className="flex items-center gap-x-2">
+            <Icon name="calendar2" size="sm" />
+            <Text variant="medium" size="sm">
+              {date}
+            </Text>
+          </span>
+          {formattedDate.length > 1 && index === 0 && <Icon name="arrow-right-outline" size="sm" />}
+        </Fragment>
+      ))}
+    </div>
+  );
+};

package/src/components/molecules/FromTo/FromTo.tsx

@@ -0,0 +1,31 @@
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+
+export interface FromToProps {
+  from?: string;
+  to?: string;
+  transferType?: string;
+}
+
+const FromTo: React.FC<Omit<FromToProps, 'transferType'>> = (props) => {
+  const { from, to } = props;
+
+  const getTransferLocationName = (location?: string) => {
+    if (!location) return '';
+    return location.toLowerCase() === 'airport' ? 'Plaisance Airport' : location;
+  };
+
+  return (
+    <div className="grid gap-y-1">
+      <Text variant="regular" size="sm" leading="5">
+        {getTransferLocationName(from)}
+      </Text>
+      <Icon name="arrow-down-outline" size="sm" />
+      <Text variant="regular" size="sm" leading="5">
+        {getTransferLocationName(to)}
+      </Text>
+    </div>
+  );
+};
+
+export default FromTo;

package/src/components/molecules/TableServiceItem/DetailsCol.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IconName } from '../../atoms/Icon/Icon';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+
+interface DetailsColData {
+  icon: IconName;
+  value: React.ReactNode;
+}
+
+export interface DetailsColProps {
+  data: DetailsColData[];
+  index?: number;
+}
+
+export const DetailsCol: React.FC<DetailsColProps> = (props) => {
+  const { data } = props;
+
+  return (
+    <div className="grid gap-y-1">
+      {data.map((item) => (
+        <TextWithIcon icon={item.icon}>{item.value}</TextWithIcon>
+      ))}
+    </div>
+  );
+};

package/src/components/molecules/TableServiceItem/ItemCol.tsx

@@ -0,0 +1,68 @@
+import { Text } from '@/src/components/atoms/Typography/Typography';
+import { cn } from '@/src/lib/utils';
+import Chip from '../../atoms/Chip/Chip';
+import { IconName } from '../../atoms/Icon/Icon';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+
+export interface ItemColProps {
+  serviceType: 'Accommodation' | 'Excursion' | 'Transfer' | 'Other Services';
+  serviceName?: string;
+  extraTitle?: React.ReactNode;
+  offers?: any[];
+  status?: string;
+  iconName?: IconName;
+  showName?: boolean;
+  children?: React.ReactNode;
+}
+
+export const ItemCol: React.FC<ItemColProps> = (props) => {
+  const {
+    serviceType,
+    serviceName,
+    offers,
+    status,
+    iconName = 'accom',
+    showName = true,
+    extraTitle,
+    children,
+  } = props;
+
+  const isOnRequest = status?.toLowerCase() === 'on request';
+
+  return (
+    <div className={cn('grid', offers?.length && 'gap-y-3')}>
+      <div>
+        {serviceName && (
+          <div className="grid gap-y-1">
+            <div className="flex items-center gap-x-2">
+              <TextWithIcon icon={iconName} color={isOnRequest ? 'yellow' : 'accent'}>
+                {serviceType}
+              </TextWithIcon>
+              {isOnRequest && <Chip color="yellow">{status}</Chip>}
+              {extraTitle}
+            </div>
+            <Text variant="bold" size="sm">
+              {showName && serviceName}
+            </Text>
+          </div>
+        )}
+        {children}
+      </div>
+      {offers && offers.length > 0 && (
+        <div>
+          <Text variant="bold" size="sm" leading="5">
+            Applicable offers:
+          </Text>
+          <Text variant="regular" size="sm" leading="5">
+            {offers.map((o) => {
+              const offerValue =
+                o.OfferType === 'GIFT' ? o.OfferName : `${o.OfferValue}%  offers applied`;
+
+              return <span>{offerValue}</span>;
+            })}
+          </Text>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/molecules/TableServiceItem/RowAccommodation.tsx

@@ -0,0 +1,56 @@
+import { differenceInDays } from 'date-fns';
+import React, { useMemo } from 'react';
+import { DetailsCol as DetailsColComponent } from './DetailsCol';
+import { ItemCol, ItemColProps } from './ItemCol';
+
+export interface RowAccommodationProps {
+  data: {
+    RoomName?: string;
+    Dates?: string[];
+    ClientCategory?: string;
+    MealPlan?: string;
+  };
+  index?: number;
+}
+
+const clientType: Record<string, string> = {
+  standard: 'STD',
+  honeymooners: 'HMN',
+  vip: 'VIP',
+  vvip: 'VVIP',
+};
+
+export function RowAccommodation() {
+  return <></>;
+}
+
+const DetailsCol: React.FC<RowAccommodationProps> = (props) => {
+  const { data, index = 0 } = props;
+
+  const stay = useMemo(() => {
+    if (data.Dates?.length) {
+      return differenceInDays(data.Dates[1], data.Dates[0]);
+    }
+
+    return 0;
+  }, [data]);
+  return (
+    <DetailsColComponent
+      data={[
+        { icon: 'calendar2', value: `Room ${index + 1} : ${data.RoomName}` },
+        { icon: 'night', value: `${stay} Nights` },
+        { icon: 'user', value: `Client type : ${clientType[data.ClientCategory?.toLowerCase() as string]}` },
+        { icon: 'utensils', value: `Meal plan : ${data.MealPlan}` },
+      ]}
+    />
+  );
+};
+
+const FirstCol: React.FC<Omit<ItemColProps, 'serviceType'>> = (props) => {
+  const { serviceName, offers, status } = props;
+
+  return <ItemCol serviceType="Accommodation" serviceName={serviceName} offers={offers} status={status} />;
+};
+
+RowAccommodation.FirstCol = FirstCol;
+RowAccommodation.DetailsCol = DetailsCol;

package/src/components/molecules/TableServiceItem/RowExcursion.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { DetailsCol as DetailsColComponent } from './DetailsCol';
+import { ItemCol, ItemColProps } from './ItemCol';
+
+export interface RowExcursionProps {
+  data: {
+    languages?: string[];
+    duration?: string;
+    accessibility?: string;
+    transferType?: string;
+  };
+}
+
+export function RowExcursion() {
+  return <></>;
+}
+
+export const DetailsCol: React.FC<RowExcursionProps> = (props) => {
+  const { data } = props;
+
+  return (
+    <DetailsColComponent
+      data={[
+        { icon: 'micro', value: `Languages: ${data.languages?.join(' and ')}` },
+        { icon: 'stopwatch', value: `Duration: ${data.duration}` },
+        { icon: 'user', value: `Difficulty: ${data.accessibility}` },
+        { icon: 'bus', value: `Type: ${data.transferType}` },
+      ]}
+    />
+  );
+};
+
+const FirstCol: React.FC<Omit<ItemColProps, 'serviceType' | 'status'>> = (props) => {
+  const { serviceName, offers } = props;
+
+  return <ItemCol serviceType="Excursion" serviceName={serviceName} offers={offers} iconName="map" />;
+};
+
+RowExcursion.FirstCol = FirstCol;
+RowExcursion.DetailsCol = DetailsCol;

package/src/components/molecules/TableServiceItem/RowOtherServices.tsx

@@ -0,0 +1,50 @@
+import '@/src/index.css';
+import React from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import { TooltipDisplay } from '../TooltipDisplay/TooltipDisplay';
+import { DetailsCol as DetailsColComponent } from './DetailsCol';
+import { ItemCol, ItemColProps } from './ItemCol';
+
+export function RowOtherServices() {
+  return <></>;
+}
+
+export const DetailsCol = () => {
+  return (
+    <DetailsColComponent
+      data={[
+        {
+          icon: 'wallet',
+          value: (
+            <Text
+              variant="medium"
+              size="sm"
+              leading="5"
+              as="div"
+              className="flex items-center gap-x-2">
+              Handling Fee
+              <TooltipDisplay content="Handling fee varies and is determined by the final number of people during booking. ">
+                <Icon name="info" size="sm" />
+              </TooltipDisplay>
+            </Text>
+          ),
+        },
+      ]}
+    />
+  );
+};
+
+const FirstCol: React.FC<Omit<ItemColProps, 'serviceType' | 'status'>> = (props) => {
+  return (
+    <ItemCol
+      serviceType="Other Services"
+      iconName="more"
+      serviceName="Handling Fee"
+      showName={false}
+    />
+  );
+};
+
+RowOtherServices.FirstCol = FirstCol;
+RowOtherServices.DetailsCol = DetailsCol;

package/src/components/molecules/TableServiceItem/RowTransfer.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import FromTo, { FromToProps } from '../FromTo/FromTo';
+import { DetailsCol as DetailsColComponent } from './DetailsCol';
+import { ItemCol, ItemColProps } from './ItemCol';
+
+export interface RowTransferProps {
+  data: {
+    carType?: string;
+    clientType?: string;
+  };
+}
+
+const transferTypeMap: Record<string, string> = {
+  ARV: 'Arrival',
+  DEP: 'Departure',
+  INH: 'Inter-Hotel',
+};
+
+export function RowTransfer() {
+  return <></>;
+}
+
+export const DetailsCol: React.FC<RowTransferProps> = (props) => {
+  const { data } = props;
+
+  return (
+    <DetailsColComponent
+      data={[
+        { icon: 'car', value: data.carType },
+        { icon: 'user', value: `Client type: ${data.clientType}` },
+      ]}
+    />
+  );
+};
+
+const FirstCol: React.FC<Omit<ItemColProps, 'serviceType' | 'status'> & FromToProps> = (
+  props
+) => {
+  const { serviceName, offers, transferType, from, to } = props;
+
+  return (
+    <ItemCol
+      serviceType="Transfer"
+      serviceName={serviceName}
+      offers={offers}
+      iconName="car"
+      showName={false}
+      extraTitle={
+        <Text variant="bold" size="sm" className="italic">
+          {transferTypeMap[transferType as string]}
+        </Text>
+      }>
+      <FromTo from={from} to={to} />
+    </ItemCol>
+  );
+};
+
+RowTransfer.FirstCol = FirstCol;
+RowTransfer.DetailsCol = DetailsCol;