mautourco-components 0.1.2 → 0.2.0

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;

package/src/components/organisms/Dialog/Dialog.tsx

@@ -0,0 +1,352 @@
+import React, { useEffect, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useMobile } from '../../../hooks/useMobile';
+import Button from '../../atoms/Button/Button';
+import Icon from '../../atoms/Icon/Icon';
+import '../../../styles/components/organism/dialog.css';
+
+/**
+ * Size variants for the Dialog component
+ */
+export type DialogSize = 'desktop' | 'tablet' | 'mobile' | 'full' | 'responsive';
+
+/**
+ * Props for the Dialog component
+ */
+export interface DialogProps {
+  /**
+   * Whether the dialog is open
+   */
+  isOpen: boolean;
+  /**
+   * Callback when the dialog should close
+   */
+  onClose: () => void;
+  /**
+   * Title displayed in the dialog header
+   */
+  title: string;
+  /**
+   * Content to be rendered in the dialog body
+   */
+  children: React.ReactNode;
+  /**
+   * Footer content or buttons. If not provided, default Cancel/Save buttons are shown
+   */
+  footer?: React.ReactNode;
+  /**
+   * Size variant of the dialog
+   * @default 'responsive'
+   */
+  size?: DialogSize;
+  /**
+   * Text for the primary action button (when using default footer)
+   * @default 'Save and update'
+   */
+  primaryButtonText?: string;
+  /**
+   * Text for the secondary action button (when using default footer)
+   * @default 'Cancel'
+   */
+  secondaryButtonText?: string;
+  /**
+   * Callback for primary button click (when using default footer)
+   */
+  onPrimaryClick?: () => void;
+  /**
+   * Callback for secondary button click (when using default footer)
+   */
+  onSecondaryClick?: () => void;
+  /**
+   * Whether to show the footer
+   * @default true
+   */
+  showFooter?: boolean;
+  /**
+   * Whether to show the close button in the header
+   * @default true
+   */
+  showCloseButton?: boolean;
+  /**
+   * Whether clicking the overlay closes the dialog
+   * @default true
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * Whether pressing Escape closes the dialog
+   * @default true
+   */
+  closeOnEscape?: boolean;
+  /**
+   * Additional CSS classes for the dialog content
+   */
+  className?: string;
+  /**
+   * ID for aria-labelledby
+   */
+  ariaLabelledBy?: string;
+  /**
+   * ID for aria-describedby
+   */
+  ariaDescribedBy?: string;
+}
+
+/**
+ * Dialog component - A modal dialog that adapts to different screen sizes
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Edit Information"
+ *   onPrimaryClick={handleSave}
+ * >
+ *   <p>Your content here</p>
+ * </Dialog>
+ * ```
+ */
+export const Dialog: React.FC<DialogProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  size = 'responsive',
+  primaryButtonText = 'Save and update',
+  secondaryButtonText = 'Cancel',
+  onPrimaryClick,
+  onSecondaryClick,
+  showFooter = true,
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  className = '',
+  ariaLabelledBy,
+  ariaDescribedBy,
+}) => {
+  const { isMobile, isTablet, isDesktop } = useMobile();
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
+  // Determine the actual size based on responsive setting
+  const getActualSize = (): Exclude<DialogSize, 'responsive'> => {
+    if (size !== 'responsive') return size;
+    if (isMobile) return 'mobile';
+    if (isTablet) return 'tablet';
+    return 'desktop';
+  };
+
+  const actualSize = getActualSize();
+  const isMobileSize = actualSize === 'mobile';
+  const isTabletSize = actualSize === 'tablet';
+
+  // Handle escape key
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (closeOnEscape && event.key === 'Escape') {
+        onClose();
+      }
+    },
+    [closeOnEscape, onClose]
+  );
+
+  // Handle overlay click
+  const handleOverlayClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (closeOnOverlayClick && event.target === event.currentTarget) {
+        onClose();
+      }
+    },
+    [closeOnOverlayClick, onClose]
+  );
+
+  // Focus management and scroll lock
+  useEffect(() => {
+    if (isOpen) {
+      // Store current focus
+      previousFocusRef.current = document.activeElement as HTMLElement;
+
+      // Focus the dialog
+      if (dialogRef.current) {
+        dialogRef.current.focus();
+      }
+
+      // Lock body scroll
+      document.body.style.overflow = 'hidden';
+
+      // Add escape listener
+      document.addEventListener('keydown', handleKeyDown);
+    } else {
+      // Unlock body scroll
+      document.body.style.overflow = '';
+
+      // Restore focus
+      if (previousFocusRef.current) {
+        previousFocusRef.current.focus();
+      }
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, handleKeyDown]);
+
+  // Handle secondary button click
+  const handleSecondaryClick = () => {
+    if (onSecondaryClick) {
+      onSecondaryClick();
+    } else {
+      onClose();
+    }
+  };
+
+  // Handle primary button click
+  const handlePrimaryClick = () => {
+    if (onPrimaryClick) {
+      onPrimaryClick();
+    }
+  };
+
+  // Generate unique IDs for accessibility
+  const titleId = ariaLabelledBy || `dialog-title-${title.replace(/\s+/g, '-').toLowerCase()}`;
+  const bodyId = ariaDescribedBy || `dialog-body-${title.replace(/\s+/g, '-').toLowerCase()}`;
+
+  // Build class names
+  const contentClasses = [
+    'dialog__content',
+    `dialog__content--${actualSize}`,
+    size === 'responsive' ? 'dialog__content--responsive' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const headerClasses = [
+    'dialog__header',
+    isMobileSize ? 'dialog__header--mobile' : '',
+    size === 'responsive' ? 'dialog__header--responsive' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const titleClasses = [
+    'dialog__title',
+    isMobileSize ? 'dialog__title--mobile' : '',
+    isTabletSize ? 'dialog__title--tablet' : '',
+    size === 'responsive' ? 'dialog__title--responsive' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const closeButtonClasses = 'dialog__close-button';
+
+  const bodyClasses = [
+    'dialog__body',
+    isMobileSize ? 'dialog__body--mobile' : '',
+    size === 'responsive' ? 'dialog__body--responsive' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const footerClasses = [
+    'dialog__footer',
+    isMobileSize ? 'dialog__footer--mobile' : '',
+    size === 'responsive' ? 'dialog__footer--responsive' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const footerButtonsClasses = [
+    'dialog__footer-buttons',
+    isMobileSize ? 'dialog__footer-buttons--mobile' : '',
+    size === 'responsive' ? 'dialog__footer-buttons--responsive' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const dialogContent = (
+    <>
+      {/* Overlay */}
+      <div
+        className="dialog-overlay"
+        onClick={handleOverlayClick}
+        aria-hidden="true"
+      />
+
+      {/* Dialog container */}
+      <div
+        className="dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={bodyId}
+        ref={dialogRef}
+        tabIndex={-1}
+        onClick={handleOverlayClick}
+      >
+        {/* Dialog content */}
+        <div className={contentClasses}>
+          {/* Header */}
+          <div className={headerClasses}>
+            <h2 id={titleId} className={titleClasses}>
+              {title}
+            </h2>
+            {showCloseButton && (
+              <button
+                type="button"
+                className={closeButtonClasses}
+                onClick={onClose}
+                aria-label="Close dialog"
+              >
+                <Icon name="close" size="md" />
+              </button>
+            )}
+          </div>
+
+          {/* Body */}
+          <div id={bodyId} className={bodyClasses}>
+            <div className="dialog__body-content">{children}</div>
+          </div>
+
+          {/* Footer */}
+          {showFooter && (
+            <div className={footerClasses}>
+              {footer ? (
+                footer
+              ) : (
+                <div className={footerButtonsClasses}>
+                  <Button
+                    variant="outline-secondary"
+                    size={isMobileSize ? 'sm' : 'md'}
+                    onClick={handleSecondaryClick}
+                  >
+                    {secondaryButtonText}
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size={isMobileSize ? 'sm' : 'md'}
+                    onClick={handlePrimaryClick}
+                  >
+                    {primaryButtonText}
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+
+  // Use portal to render at the document body level
+  return createPortal(dialogContent, document.body);
+};
+
+export default Dialog;
+