mautourco-components 0.2.12 → 0.2.13

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

@@ -0,0 +1,24 @@
+import { DetailsCol, type DetailsColProps } from './DetailsCol';
+import { ItemCol, type ItemColProps } from './ItemCol';
+import { RowAccommodation, type RowAccommodationProps } from './RowAccommodation';
+import { RowExcursion, type RowExcursionProps } from './RowExcursion';
+import { RowOtherServices } from './RowOtherServices';
+import { RowTransfer, type RowTransferProps } from './RowTransfer';
+
+const TableServiceItem = {
+  DetailsCol,
+  ItemCol,
+  RowAccommodation,
+  RowExcursion,
+  RowOtherServices,
+  RowTransfer,
+};
+
+export type {
+  DetailsColProps,
+  ItemColProps,
+  RowAccommodationProps,
+  RowExcursionProps,
+  RowTransferProps,
+};
+export default TableServiceItem;

package/src/components/molecules/TextWithIcon/TextWithIcon.tsx

@@ -0,0 +1,62 @@
+import { cn } from '@/src/lib/utils';
+import Icon, { IconName } from '../../atoms/Icon/Icon';
+import { Text, TextColor, TextLeading, TextVariant } from '../../atoms/Typography/Typography';
+
+export interface TextWithIconProps {
+  /** Icon to display */
+  icon: IconName;
+
+  /** Icon size */
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Children to display */
+  children: React.ReactNode;
+
+  /** Color of the text */
+  color?: TextColor;
+
+  /** Leading of the text */
+  textLeading?: TextLeading;
+
+  /** Variant of the text */
+  textVariant?: TextVariant;
+}
+
+/**
+ * A component that displays a text with an icon.
+ *
+ * @example
+ * <TextWithIcon icon="calendar" color="yellow">
+ *   20/12/2025
+ * </TextWithIcon>
+ *
+ * @param TextWithIconProps
+ * @returns
+ */
+const TextWithIcon: React.FC<TextWithIconProps> = (props) => {
+  const { icon, children, iconSize = 'sm', color = 'default', textLeading = '5', textVariant = 'medium' } = props;
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-x-2',
+        color === 'yellow' && 'text-[var(--color-yellow-600)]',
+        color === 'accent' && 'text-[var(--color-text-accent)]'
+      )}>
+      <span>
+        <Icon name={icon} size={iconSize} />
+      </span>
+      <Text
+        variant={textVariant}
+        size={iconSize}
+        className="flex items-center gap-x-2"
+        color={color}
+        leading={textLeading}
+        as="div">
+        {children}
+      </Text>
+    </div>
+  );
+};
+
+export default TextWithIcon;

package/src/components/molecules/TooltipDisplay/TooltipDisplay.tsx

@@ -0,0 +1,32 @@
+import { TooltipContentProps } from '@radix-ui/react-tooltip';
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
+
+export interface TooltipDisplayProps {
+  /** Trigger element */
+  children: React.ReactNode;
+
+  /** Tooltip content */
+  content: string;
+
+  /** Side of the tooltip */
+  side?: TooltipContentProps['side'];
+
+  /** Maximum width of the tooltip */
+  maxWidth?: `${number}px`;
+}
+
+export const TooltipDisplay: React.FC<TooltipDisplayProps> = (props) => {
+  const { children, content, side = 'right', maxWidth = '300px' } = props;
+  return (
+    <Tooltip>
+      <TooltipTrigger className="text-[var(--color-icon-branded)]">{children}</TooltipTrigger>
+      <TooltipContent className={`max-w-[${maxWidth}]`} side={side}>
+        <Text variant="medium" size="sm" className="!text-white">
+          {content}
+        </Text>
+      </TooltipContent>
+    </Tooltip>
+  );
+};

package/src/components/organisms/CarBookingCard/index.ts

@@ -10,3 +10,5 @@ export type {
 
 
 
+
+

package/src/components/organisms/Table/Table.css

@@ -0,0 +1,185 @@
+.table-container {
+  overflow-y: hidden;
+  overflow-x: auto;
+  max-width: 1680px;
+  &.table-container--no-total {
+    padding-bottom: var(--spacing-padding-px-4);
+  }
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  th,
+  td {
+    padding-inline: var(--spacing-padding-px-4);
+  }
+}
+.table__header {
+  th {
+    @apply h-11 text-left;
+    background-color: var(--color-elevation-level-2);
+  }
+}
+.table__body {
+  tr {
+    @apply transition-colors duration-200;
+    border-top: solid 1px var(--color-surface-300);
+    &:hover:not(.table__no-hover) {
+      background-color: var(--color-elevation-state-hover-subtle);
+    }
+    &:first-child {
+      border-top: none;
+    }
+    &.table__row-yellow {
+      background-color: var(--color-yellow-50);
+      border: 1px solid transparent;
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        inset: -1px;
+        pointer-events: none;
+        background-image:
+          repeating-linear-gradient(
+            to right,
+            var(--color-yellow-600) 0,
+            var(--color-yellow-600) 8px,
+            transparent 8px,
+            transparent 16px
+          ),
+          repeating-linear-gradient(
+            to right,
+            var(--color-yellow-600) 0,
+            var(--color-yellow-600) 8px,
+            transparent 8px,
+            transparent 16px
+          ),
+          repeating-linear-gradient(
+            to bottom,
+            var(--color-yellow-600) 0,
+            var(--color-yellow-600) 8px,
+            transparent 8px,
+            transparent 16px
+          ),
+          repeating-linear-gradient(
+            to bottom,
+            var(--color-yellow-600) 0,
+            var(--color-yellow-600) 8px,
+            transparent 8px,
+            transparent 16px
+          );
+        background-size:
+          100% 1px,
+          100% 1px,
+          1px 100%,
+          1px 100%;
+        background-position: top, bottom, left, right;
+        background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+      }
+      &:hover {
+        background-color: var(--color-yellow-100);
+      }
+      & + tr {
+        border-top: none;
+      }
+    }
+    &.table__row-border-0 {
+      border-top: none;
+      &:not(:nth-of-type(1)) {
+        td {
+          vertical-align: top;
+          padding-top: 0;
+        }
+      }
+    }
+  }
+  td {
+    padding-block: var(--spacing-padding-px-4);
+    &.table__cell-nested {
+      padding: 0;
+      overflow: hidden;
+      tr:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+  .table__nested-wrapper {
+    overflow: hidden;
+    display: block;
+  }
+  .button__icon {
+    @apply transition-transform duration-200;
+  }
+}
+
+.table__row-nested {
+  border-left: solid 4px var(--color-primary-brand);
+}
+
+.table__button-expanded {
+  .button__icon {
+    @apply rotate-180;
+  }
+}
+
+.table__row-clickable {
+  cursor: pointer;
+}
+
+.table__button {
+  width: 136px;
+}
+
+.table__row-grouped {
+  > td {
+    padding: 0;
+  }
+}
+
+.table__total-container {
+  max-width: 1680px;
+}
+
+.table__total {
+  tr {
+    border: 1px solid transparent;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      inset: -1px;
+      pointer-events: none;
+      background-image:
+        repeating-linear-gradient(
+          to right,
+          var(--divider-color-default) 0,
+          var(--divider-color-default) 12px,
+          transparent 12px,
+          transparent 24px
+        ),
+        repeating-linear-gradient(
+          to right,
+          var(--divider-color-default) 0,
+          var(--divider-color-default) 12px,
+          transparent 12px,
+          transparent 24px
+        );
+      background-size:
+        100% 1px,
+        100% 1px;
+      background-position: top, bottom;
+      background-repeat: repeat-x, repeat-x;
+    }
+  }
+  td {
+    padding-block: var(--spacing-padding-px-4);
+    &:last-child {
+      width: 160px;
+      @media (min-width: 1680px) {
+        width: var(--last-column-width);
+      }
+    }
+  }
+}

package/src/components/organisms/Table/Table.tsx

@@ -0,0 +1,273 @@
+import { cn } from '@/src/lib/utils';
+import { AnimatePresence, domAnimation, LazyMotion } from 'motion/react';
+import * as motion from 'motion/react-m';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import Pagination, { PaginationProps } from '../../molecules/Pagination/Pagination';
+import './Table.css';
+import { ColumnType, TableCell } from './TableCell';
+
+export type TableRowData<T = any> = {
+  /** Unique identifier for the row */
+  id?: string;
+  /** Whether the row is visible */
+  visible?: boolean;
+  /**
+   * Class name for the row
+   *
+   * Available classes:
+   * - table__row-yellow: For yellow rows
+   * - table__row-border-0: For no border
+   */
+  className?: string;
+
+  /** Children rows for the row */
+  children?: T[];
+};
+
+export interface TableProps<T extends TableRowData<T>> {
+  /** Columns definitions for the table */
+  columns: ColumnType<T>[];
+
+  /** Data for the table */
+  data: T[];
+
+  /** Callback function to be called when a row is clicked */
+  onClickRow?: (e: React.MouseEvent<HTMLTableRowElement>, row: T) => void;
+
+  /** Pagination configuration for the table */
+  pagination?: PaginationProps;
+
+  /** Total rows in the table */
+  totalRows?: Record<string, string | number>;
+
+  /** Whether the child rows are visible */
+  isGrouped?: boolean;
+}
+
+/**
+ * A component for displaying nested content in a table row.
+ *
+ * @example
+ * <NestedContent
+ *  rowIndex={rowIndex}
+ *  columns={columns}
+ *  children={children}
+ *  onClickRow={onClickRow}
+ * />
+ * @param NestedContentProps<T>
+ * @returns
+ */
+const NestedContent = <T extends TableRowData<T>>({
+  rowIndex,
+  columns,
+  children,
+  isGrouped,
+  onClickRow,
+}: {
+  rowIndex: number;
+  columns: ColumnType<T>[];
+  children: T[];
+  isGrouped?: boolean;
+  onClickRow?: (e: React.MouseEvent<HTMLTableRowElement>, row: T) => void;
+}) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number | 'auto'>(0);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      const measuredHeight = contentRef.current.scrollHeight;
+      setHeight(measuredHeight);
+    }
+  }, [children]);
+
+  const Tag = isGrouped ? 'div' : motion.div;
+
+  return (
+    <Tag
+      ref={contentRef}
+      initial={{ height: 0, opacity: 0 }}
+      animate={{ height, opacity: 1 }}
+      exit={{ height: 0, opacity: 0 }}
+      transition={{
+        height: { duration: 0.2, ease: 'easeInOut' },
+        opacity: { duration: 0.15, ease: 'easeInOut' },
+      }}
+      className="table__nested-wrapper">
+      <table className="table">
+        <tbody>
+          {children.map((child, childIndex) => (
+            <tr
+              key={`ch-${rowIndex}-${childIndex}`}
+              className={cn(child.className, {
+                'table__row-clickable': onClickRow,
+              })}
+              onClick={(e) => onClickRow?.(e, child as T)}>
+              <TableCell<T> columns={columns} row={child as T} rowIndex={childIndex} />
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Tag>
+  );
+};
+
+/**
+ * A table component for displaying structured data in rows and columns. Supports customizable column definitions and data rows.
+ *
+ * @example
+ * <Table
+ *  columns={columns}
+ *  data={data}
+ *  pagination={pagination}
+ *  onClickRow={onClickRow}
+ * />
+ *
+ * @param props TableProps<T>
+ * @returns React.ReactNode
+ *
+ */
+export const Table = <T extends TableRowData<T>>(props: TableProps<T>) => {
+  const { columns, data, pagination, isGrouped, totalRows = {}, onClickRow } = props;
+
+  const normalizeLastColumnWidth = () => {
+    const width = columns[columns.length - 1].width;
+    if (typeof width === 'number') {
+      return `${width - 10}px`;
+    }
+    return width;
+  };
+
+  const hasTotal = Object.keys(totalRows).length > 0;
+
+  return (
+    <LazyMotion features={domAnimation}>
+      <div>
+        <div
+          className={cn('table-container', { 'table-container--no-total': !hasTotal })}>
+          <table className="table">
+            <thead className="table__header">
+              <tr>
+                {columns.map((column, columnIndex) => (
+                  <th
+                    key={`hd-${columnIndex}`}
+                    className={column.className}
+                    style={
+                      column.width
+                        ? { minWidth: column.width, width: column.width }
+                        : undefined
+                    }>
+                    <Text variant="bold" size="sm">
+                      {column.header}
+                    </Text>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="table__body">
+              {data.map((row, rowIndex) => {
+                const hasVisibleChildren = row.children?.some((child) => child.visible);
+
+                const defaultTable = (
+                  <tr
+                    className={cn(row.className, {
+                      'table__row-nested': row.children?.length,
+                      'table__row-clickable': onClickRow,
+                    })}
+                    onClick={(e) => onClickRow?.(e, row)}>
+                    <TableCell<T> columns={columns} row={row} rowIndex={rowIndex} />
+                  </tr>
+                );
+
+                return (
+                  <Fragment key={`rw-${rowIndex}`}>
+                    {isGrouped ? (
+                      row.children && row.children.length > 0 ? (
+                        <tr className="table__row-grouped">
+                          <td colSpan={columns.length}>
+                            <NestedContent<T>
+                              isGrouped={isGrouped}
+                              rowIndex={rowIndex}
+                              columns={columns}
+                              children={row.children || []}
+                              onClickRow={onClickRow}
+                            />
+                          </td>
+                        </tr>
+                      ) : (
+                        defaultTable
+                      )
+                    ) : (
+                      <>
+                        {defaultTable}
+                        <AnimatePresence initial={false}>
+                          {hasVisibleChildren && (
+                            <tr
+                              key={`nested-${rowIndex}`}
+                              className={cn('table__no-hover', {
+                                'table__row-nested':
+                                  row.children && row.children.length > 0,
+                              })}>
+                              <td colSpan={columns.length} className="table__cell-nested">
+                                <NestedContent<T>
+                                  rowIndex={rowIndex}
+                                  columns={columns}
+                                  children={row.children || []}
+                                  onClickRow={onClickRow}
+                                />
+                              </td>
+                            </tr>
+                          )}
+                        </AnimatePresence>
+                      </>
+                    )}
+                  </Fragment>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+        {hasTotal && (
+          <div className="table__total-container">
+            <table className="table">
+              <tbody className="table__total">
+                <tr>
+                  <td colSpan={columns.length - 1}></td>
+                  <td
+                    style={
+                      {
+                        '--last-column-width': normalizeLastColumnWidth(),
+                      } as React.CSSProperties
+                    }>
+                    <div className="relative">
+                      <Text
+                        size="md"
+                        variant="bold"
+                        className="absolute top-0 -left-3 -translate-x-full">
+                        Total :{' '}
+                      </Text>
+                      <div>
+                        {Object.entries(totalRows).map(([currency, total]) => (
+                          <div key={currency}>
+                            <Text size="md" variant="bold">
+                              {currency} {total}
+                            </Text>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        )}
+        {pagination && (
+          <div className="flex justify-end mt-4">
+            <Pagination {...pagination} />
+          </div>
+        )}
+      </div>
+    </LazyMotion>
+  );
+};

package/src/components/organisms/Table/TableCell.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { TableRowData } from './Table';
+
+export type ColumnType<T = TableRowData> = {
+  header: string;
+  key: Extract<keyof T, string> | 'actions';
+  className?: string;
+  width?: number | string;
+  cell: (
+    value: T[Extract<keyof T, string>],
+    rawData: T,
+    index?: number
+  ) => React.ReactNode;
+};
+
+export interface TableCellProps<T = TableRowData> {
+  columns: ColumnType<T>[];
+  row: T;
+  rowIndex: number;
+}
+export const TableCell = <T extends TableRowData>(props: TableCellProps<T>) => {
+  const { columns, row, rowIndex } = props;
+  return (
+    <>
+      {columns.map((column, columnIndex) => (
+        <td
+          key={`cl-${rowIndex}-${columnIndex}`}
+          style={
+            column.width ? { minWidth: column.width, width: column.width } : undefined
+          }>
+          {column.key === 'actions' ? (
+            <div>{column.cell({} as T[Extract<keyof T, string>], row, rowIndex)}</div>
+          ) : (
+            column.cell(row[column.key], row, rowIndex)
+          )}
+        </td>
+      ))}
+    </>
+  );
+};