@fabio.caffarello/react-design-system 1.2.0 → 1.3.0

package/src/ui/molecules/Pagination/Pagination.tsx

@@ -0,0 +1,168 @@
+import type { HTMLAttributes } from "react";
+import { Button } from "../../atoms";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  totalItems?: number;
+  itemsPerPage?: number;
+  showPageInfo?: boolean;
+}
+
+/**
+ * Pagination Component
+ * 
+ * A pagination component for navigating through pages of data.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <Pagination
+ *   currentPage={1}
+ *   totalPages={10}
+ *   onPageChange={(page) => setPage(page)}
+ *   totalItems={100}
+ *   itemsPerPage={10}
+ * />
+ * ```
+ */
+export default function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  totalItems,
+  itemsPerPage,
+  showPageInfo = true,
+  className = "",
+  ...props
+}: Props) {
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  const handlePageClick = (page: number) => {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange(page);
+    }
+  };
+
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = [];
+    const maxVisible = 5;
+
+    if (totalPages <= maxVisible) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (currentPage <= 3) {
+        for (let i = 1; i <= 4; i++) {
+          pages.push(i);
+        }
+        pages.push('ellipsis');
+        pages.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        pages.push(1);
+        pages.push('ellipsis');
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push('ellipsis');
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pages.push(i);
+        }
+        pages.push('ellipsis');
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  const startItem = totalItems && itemsPerPage ? (currentPage - 1) * itemsPerPage + 1 : undefined;
+  const endItem = totalItems && itemsPerPage
+    ? Math.min(currentPage * itemsPerPage, totalItems)
+    : undefined;
+
+  const baseClasses = [
+    "flex",
+    "items-center",
+    "justify-between",
+    "px-4",
+    "py-3",
+  ];
+
+  const classes = [
+    ...baseClasses,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <nav className={classes} aria-label="Pagination" {...props}>
+      <div className="flex items-center gap-2">
+        <Button
+          variant="secondary"
+          onClick={handlePrevious}
+          disabled={currentPage === 1}
+          className="px-3 py-1 text-sm"
+        >
+          Previous
+        </Button>
+        <div className="flex items-center gap-1">
+          {getPageNumbers().map((page, index) => {
+            if (page === 'ellipsis') {
+              return (
+                <span key={`ellipsis-${index}`} className="px-2 text-gray-500">
+                  ...
+                </span>
+              );
+            }
+
+            const pageNum = page as number;
+            const isActive = pageNum === currentPage;
+
+            return (
+              <button
+                key={pageNum}
+                onClick={() => handlePageClick(pageNum)}
+                className={`px-3 py-1 text-sm rounded ${
+                  isActive
+                    ? 'bg-indigo-600 text-white'
+                    : 'text-gray-700 hover:bg-gray-100'
+                }`}
+                aria-current={isActive ? 'page' : undefined}
+                aria-label={`Go to page ${pageNum}`}
+              >
+                {pageNum}
+              </button>
+            );
+          })}
+        </div>
+        <Button
+          variant="secondary"
+          onClick={handleNext}
+          disabled={currentPage === totalPages}
+          className="px-3 py-1 text-sm"
+        >
+          Next
+        </Button>
+      </div>
+      {showPageInfo && totalItems && itemsPerPage && (
+        <div className="text-sm text-gray-700">
+          Showing {startItem} to {endItem} of {totalItems} results
+        </div>
+      )}
+    </nav>
+  );
+}

package/src/ui/molecules/index.ts

@@ -1,3 +1,10 @@
 export { default as InputWithLabel } from "./InputWithLabel/InputWithLabel";
 
 export { default as Card } from "./Card/Card";
+
+export { default as Form } from "./Form/Form";
+
+export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb";
+export type { BreadcrumbItem } from "./Breadcrumb/Breadcrumb";
+
+export { default as Pagination } from "./Pagination/Pagination";

package/src/ui/organisms/Modal/Modal.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import Modal from "./Modal";
+import { Button, Text } from "../../atoms";
+
+const meta: Meta<typeof Modal> = {
+  title: "UI/Organisms/Modal",
+  component: Modal,
+  parameters: {
+    docs: {
+      description: {
+        component: "A modal/dialog component with overlay, portal rendering, focus trap, and accessibility. Supports multiple sizes and custom footers.",
+      },
+    },
+  },
+  argTypes: {
+    isOpen: {
+      control: "boolean",
+      description: "Whether the modal is open",
+    },
+    variant: {
+      control: "select",
+      options: ["default", "large", "fullscreen"],
+      description: "Size variant of the modal",
+    },
+    showCloseButton: {
+      control: "boolean",
+      description: "Whether to show the close button",
+    },
+  },
+};
+
+const ModalWrapper = ({ children, ...args }: any) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+      <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        {children}
+      </Modal>
+    </>
+  );
+};
+
+export const Default: StoryObj<typeof Modal> = {
+  render: () => (
+    <ModalWrapper title="Confirm Action">
+      <Text as="p">Are you sure you want to proceed with this action?</Text>
+    </ModalWrapper>
+  ),
+};
+
+export const WithFooter: StoryObj<typeof Modal> = {
+  render: () => (
+    <ModalWrapper
+      title="Delete Epic"
+      footer={
+        <>
+          <Button variant="secondary" onClick={() => {}}>
+            Cancel
+          </Button>
+          <Button variant="error" onClick={() => {}}>
+            Delete
+          </Button>
+        </>
+      }
+    >
+      <Text as="p">This action cannot be undone. Are you sure you want to delete this epic?</Text>
+    </ModalWrapper>
+  ),
+};
+
+export const Large: StoryObj<typeof Modal> = {
+  render: () => (
+    <ModalWrapper title="Large Modal" variant="large">
+      <Text as="p" className="mb-4">
+        This is a large modal that can accommodate more content.
+      </Text>
+      <div className="space-y-2">
+        <Text as="p">You can add forms, tables, or any other content here.</Text>
+      </div>
+    </ModalWrapper>
+  ),
+};
+
+export const WithoutTitle: StoryObj<typeof Modal> = {
+  render: () => (
+    <ModalWrapper>
+      <Text as="p">This modal doesn't have a title, but still has a close button.</Text>
+    </ModalWrapper>
+  ),
+};
+
+export const WithoutCloseButton: StoryObj<typeof Modal> = {
+  render: () => (
+    <ModalWrapper title="No Close Button" showCloseButton={false}>
+      <Text as="p">This modal doesn't have a close button. Users must use the footer actions.</Text>
+    </ModalWrapper>
+  ),
+};
+
+export default meta;

package/src/ui/organisms/Modal/Modal.test.tsx

@@ -0,0 +1,111 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Modal from "./Modal";
+import { Button } from "../../atoms";
+
+// Mock createPortal
+vi.mock("react-dom", async () => {
+  const actual = await vi.importActual("react-dom");
+  return {
+    ...actual,
+    createPortal: (node: any) => node,
+  };
+});
+
+describe("Modal", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  afterEach(() => {
+    document.body.style.overflow = "";
+  });
+
+  it("renders when isOpen is true", () => {
+    render(
+      <Modal isOpen={true} onClose={() => {}} title="Test Modal">
+        <p>Modal content</p>
+      </Modal>
+    );
+    expect(screen.getByText("Modal content")).toBeInTheDocument();
+  });
+
+  it("does not render when isOpen is false", () => {
+    render(
+      <Modal isOpen={false} onClose={() => {}} title="Test Modal">
+        <p>Modal content</p>
+      </Modal>
+    );
+    expect(screen.queryByText("Modal content")).not.toBeInTheDocument();
+  });
+
+  it("calls onClose when close button is clicked", () => {
+    const handleClose = vi.fn();
+    render(
+      <Modal isOpen={true} onClose={handleClose} title="Test Modal">
+        <p>Content</p>
+      </Modal>
+    );
+    const closeButton = screen.getByLabelText("Close modal");
+    fireEvent.click(closeButton);
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClose when ESC key is pressed", () => {
+    const handleClose = vi.fn();
+    render(
+      <Modal isOpen={true} onClose={handleClose} title="Test Modal">
+        <p>Content</p>
+      </Modal>
+    );
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClose when overlay is clicked", () => {
+    const handleClose = vi.fn();
+    const { container } = render(
+      <Modal isOpen={true} onClose={handleClose} title="Test Modal">
+        <p>Content</p>
+      </Modal>
+    );
+    const overlay = container.querySelector('[role="dialog"]');
+    if (overlay) {
+      fireEvent.click(overlay);
+    }
+    expect(handleClose).toHaveBeenCalled();
+  });
+
+  it("has dialog role and aria-modal", () => {
+    const { container } = render(
+      <Modal isOpen={true} onClose={() => {}} title="Test Modal">
+        <p>Content</p>
+      </Modal>
+    );
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveAttribute("aria-modal", "true");
+  });
+
+  it("renders title when provided", () => {
+    render(
+      <Modal isOpen={true} onClose={() => {}} title="Test Title">
+        <p>Content</p>
+      </Modal>
+    );
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+  });
+
+  it("renders footer when provided", () => {
+    render(
+      <Modal
+        isOpen={true}
+        onClose={() => {}}
+        title="Test"
+        footer={<Button>Action</Button>}
+      >
+        <p>Content</p>
+      </Modal>
+    );
+    expect(screen.getByText("Action")).toBeInTheDocument();
+  });
+});

package/src/ui/organisms/Modal/Modal.tsx

@@ -0,0 +1,203 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+  variant?: "default" | "large" | "fullscreen";
+  showCloseButton?: boolean;
+  footer?: ReactNode;
+}
+
+/**
+ * Modal Component
+ * 
+ * A modal/dialog component with overlay, portal rendering, and accessibility.
+ * Follows Atomic Design principles as an Organism component.
+ * 
+ * @example
+ * ```tsx
+ * <Modal isOpen={isOpen} onClose={handleClose} title="Confirm Action">
+ *   <p>Are you sure?</p>
+ * </Modal>
+ * ```
+ */
+export default function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  variant = "default",
+  showCloseButton = true,
+  footer,
+  className = "",
+  ...props
+}: Props) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+
+  // Focus trap and ESC key handling
+  useEffect(() => {
+    if (!isOpen) return;
+
+    // Store previous active element
+    previousActiveElement.current = document.activeElement as HTMLElement;
+
+    // Focus modal on open
+    const timer = setTimeout(() => {
+      modalRef.current?.focus();
+    }, 0);
+
+    // Handle ESC key
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+
+    // Restore focus on close
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("keydown", handleEscape);
+      previousActiveElement.current?.focus();
+    };
+  }, [isOpen, onClose]);
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const baseClasses = [
+    "fixed",
+    "inset-0",
+    "z-50",
+    "overflow-y-auto",
+  ];
+
+  const overlayClasses = [
+    "fixed",
+    "inset-0",
+    "bg-black",
+    "bg-opacity-50",
+    "transition-opacity",
+  ];
+
+  const modalSizeClasses: Record<NonNullable<Props["variant"]>, string> = {
+    default: "max-w-md",
+    large: "max-w-2xl",
+    fullscreen: "max-w-full h-full",
+  };
+
+  const modalClasses = [
+    "relative",
+    "bg-white",
+    "rounded-lg",
+    "shadow-xl",
+    "my-8",
+    "mx-auto",
+    modalSizeClasses[variant],
+    "p-6",
+    className,
+  ].filter(Boolean).join(" ");
+
+  const modalContent = (
+    <div
+      className={baseClasses.join(" ")}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? "modal-title" : undefined}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          onClose();
+        }
+      }}
+    >
+      <div className={overlayClasses.join(" ")} aria-hidden="true" />
+      <div className="flex min-h-full items-center justify-center p-4">
+        <div
+          ref={modalRef}
+          tabIndex={-1}
+          className={modalClasses}
+          onClick={(e) => e.stopPropagation()}
+          {...props}
+        >
+          {title && (
+            <div className="flex justify-between items-center mb-4">
+              <h2 id="modal-title" className="text-xl font-semibold text-gray-900">
+                {title}
+              </h2>
+              {showCloseButton && (
+                <button
+                  onClick={onClose}
+                  className="text-gray-400 hover:text-gray-500 focus:outline-none"
+                  aria-label="Close modal"
+                >
+                  <svg
+                    className="h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              )}
+            </div>
+          )}
+          {!title && showCloseButton && (
+            <div className="flex justify-end mb-4">
+              <button
+                onClick={onClose}
+                className="text-gray-400 hover:text-gray-500 focus:outline-none"
+                aria-label="Close modal"
+              >
+                <svg
+                  className="h-6 w-6"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+          )}
+          <div className="mb-4">{children}</div>
+          {footer && <div className="flex justify-end gap-2 mt-4">{footer}</div>}
+        </div>
+      </div>
+    </div>
+  );
+
+  // Portal rendering to avoid z-index issues
+  if (typeof window !== "undefined") {
+    return createPortal(modalContent, document.body);
+  }
+
+  return modalContent;
+}