mautourco-components 0.2.10 → 0.2.11

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

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

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

@@ -1,24 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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/Table/Table.css

@@ -1,185 +0,0 @@
-.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

@@ -1,273 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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>
-      ))}
-    </>
-  );
-};