mautourco-components 0.1.2 → 0.2.1

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;
+