@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/components/modal/Modal.stories.tsx

@@ -1,171 +1,171 @@
-import { Modal } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Modal> = {
-  title: "Components/Modal",
-  component: Modal,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A flexible modal component with customizable sizing, animations, and behavior options. Supports portal rendering, escape key handling, and overlay click dismissal.",
-      },
-    },
-  },
-  argTypes: {
-    isOpen: {
-      control: { type: "boolean" },
-      description: "Whether the modal is open",
-    },
-    title: {
-      control: { type: "text" },
-      description: "Optional title for the modal header",
-    },
-    size: {
-      control: { type: "select" },
-      options: ["xs", "sm", "md", "lg", "xl"],
-      description: "Modal size variant",
-    },
-    animation: {
-      control: { type: "select" },
-      options: ["popper", "bottomSheet"],
-      description: "Animation variant",
-    },
-    shape: {
-      control: { type: "select" },
-      options: ["rounded", "square"],
-      description: "Shape variant",
-    },
-    shouldCloseOnEsc: {
-      control: { type: "boolean" },
-      description: "Whether to close on escape key",
-    },
-    shouldCloseOnOverlayClick: {
-      control: { type: "boolean" },
-      description: "Whether to close on overlay click",
-    },
-  },
-  args: {
-    isOpen: true,
-    title: "Modal Title",
-    size: "md",
-    animation: "popper",
-    shape: "rounded",
-    shouldCloseOnEsc: true,
-    shouldCloseOnOverlayClick: true,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Modal>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <div className="space-y-4">
-        <p className="text-gray-600">
-          This is a default modal with some content. You can close it by
-          clicking the X button, pressing Escape, or clicking outside the modal.
-        </p>
-        <div className="flex justify-end space-x-2">
-          <button className="px-4 py-2 text-gray-600 hover:text-gray-800">
-            Cancel
-          </button>
-          <button className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
-            Confirm
-          </button>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: "xs",
-    children: (
-      <div className="text-center">
-        <p className="text-gray-600">Small modal content</p>
-      </div>
-    ),
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: "xl",
-    children: (
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Large Modal</h3>
-        <p className="text-gray-600">
-          This is a large modal that can accommodate more content. It's useful
-          for forms, detailed information, or complex layouts.
-        </p>
-        <div className="grid grid-cols-2 gap-4">
-          <div className="rounded bg-gray-100 p-4">Content 1</div>
-          <div className="rounded bg-gray-100 p-4">Content 2</div>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const BottomSheet: Story = {
-  args: {
-    animation: "bottomSheet",
-    size: "sm",
-    className: "top-auto bottom-0 max-w-none rounded-t-lg",
-    children: (
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Bottom Sheet</h3>
-        <p className="text-gray-600">
-          This modal slides up from the bottom, perfect for mobile interfaces.
-        </p>
-        <div className="space-y-2">
-          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
-            Option 1
-          </button>
-          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
-            Option 2
-          </button>
-          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
-            Option 3
-          </button>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const WithoutTitle: Story = {
-  args: {
-    title: undefined,
-    children: (
-      <div className="space-y-4">
-        <p className="text-gray-600">
-          This modal doesn't have a title in the header, but still has a close
-          button.
-        </p>
-      </div>
-    ),
-  },
-};
-
-export const NoCloseButton: Story = {
-  args: {
-    closeButtonClassName: "hidden",
-    children: (
-      <div className="space-y-4">
-        <p className="text-gray-600">
-          This modal doesn't have a close button. You can only close it by
-          pressing Escape or clicking outside.
-        </p>
-      </div>
-    ),
-  },
-};
+import { Modal } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Modal> = {
+  title: "Components/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A flexible modal component with customizable sizing, animations, and behavior options. Supports portal rendering, escape key handling, and overlay click dismissal.",
+      },
+    },
+  },
+  argTypes: {
+    isOpen: {
+      control: { type: "boolean" },
+      description: "Whether the modal is open",
+    },
+    title: {
+      control: { type: "text" },
+      description: "Optional title for the modal header",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["xs", "sm", "md", "lg", "xl"],
+      description: "Modal size variant",
+    },
+    animation: {
+      control: { type: "select" },
+      options: ["popper", "bottomSheet"],
+      description: "Animation variant",
+    },
+    shape: {
+      control: { type: "select" },
+      options: ["rounded", "square"],
+      description: "Shape variant",
+    },
+    shouldCloseOnEsc: {
+      control: { type: "boolean" },
+      description: "Whether to close on escape key",
+    },
+    shouldCloseOnOverlayClick: {
+      control: { type: "boolean" },
+      description: "Whether to close on overlay click",
+    },
+  },
+  args: {
+    isOpen: true,
+    title: "Modal Title",
+    size: "md",
+    animation: "popper",
+    shape: "rounded",
+    shouldCloseOnEsc: true,
+    shouldCloseOnOverlayClick: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="space-y-4">
+        <p className="text-gray-600">
+          This is a default modal with some content. You can close it by
+          clicking the X button, pressing Escape, or clicking outside the modal.
+        </p>
+        <div className="flex justify-end space-x-2">
+          <button className="px-4 py-2 text-gray-600 hover:text-gray-800">
+            Cancel
+          </button>
+          <button className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+            Confirm
+          </button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "xs",
+    children: (
+      <div className="text-center">
+        <p className="text-gray-600">Small modal content</p>
+      </div>
+    ),
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "xl",
+    children: (
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Large Modal</h3>
+        <p className="text-gray-600">
+          This is a large modal that can accommodate more content. It's useful
+          for forms, detailed information, or complex layouts.
+        </p>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="rounded bg-gray-100 p-4">Content 1</div>
+          <div className="rounded bg-gray-100 p-4">Content 2</div>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const BottomSheet: Story = {
+  args: {
+    animation: "bottomSheet",
+    size: "sm",
+    className: "top-auto bottom-0 max-w-none rounded-t-lg",
+    children: (
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Bottom Sheet</h3>
+        <p className="text-gray-600">
+          This modal slides up from the bottom, perfect for mobile interfaces.
+        </p>
+        <div className="space-y-2">
+          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
+            Option 1
+          </button>
+          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
+            Option 2
+          </button>
+          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
+            Option 3
+          </button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const WithoutTitle: Story = {
+  args: {
+    title: undefined,
+    children: (
+      <div className="space-y-4">
+        <p className="text-gray-600">
+          This modal doesn't have a title in the header, but still has a close
+          button.
+        </p>
+      </div>
+    ),
+  },
+};
+
+export const NoCloseButton: Story = {
+  args: {
+    closeButtonClassName: "hidden",
+    children: (
+      <div className="space-y-4">
+        <p className="text-gray-600">
+          This modal doesn't have a close button. You can only close it by
+          pressing Escape or clicking outside.
+        </p>
+      </div>
+    ),
+  },
+};

package/src/components/modal/index.test.tsx

@@ -0,0 +1,310 @@
+import React from "react";
+import { Modal } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+// Mock react-modal
+jest.mock("react-modal", () => {
+  const MockReactModal = ({
+    isOpen,
+    children,
+    className,
+    overlayClassName,
+    onRequestClose,
+    parentSelector,
+  }: any) => {
+    // Call parentSelector to cover the arrow function
+    if (parentSelector) parentSelector();
+    if (!isOpen) return null;
+    return (
+      <div data-testid="react-modal" className={className}>
+        <div
+          data-testid="modal-overlay"
+          className={overlayClassName}
+          onClick={onRequestClose}
+        />
+        {children}
+      </div>
+    );
+  };
+  MockReactModal.setAppElement = jest.fn();
+  return MockReactModal;
+});
+
+// Allow overriding the transition state for specific tests
+let mockTransitionState: string | null = null;
+const setMockTransitionState = (state: string | null) => {
+  mockTransitionState = state;
+};
+
+// Mock react-transition-group
+jest.mock("react-transition-group", () => ({
+  Transition: ({ children, in: inProp }: any) => {
+    const state = mockTransitionState ?? (inProp ? "entered" : "exited");
+    return children(state);
+  },
+}));
+
+// Mock useBodyScrollLock
+jest.mock("../../hooks/use-body-scroll-lock", () => jest.fn());
+
+describe("Modal", () => {
+  const defaultProps = {
+    isOpen: true,
+    onRequestClose: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Rendering", () => {
+    it("renders when isOpen is true", () => {
+      render(<Modal {...defaultProps}>Content</Modal>);
+      expect(screen.getByTestId("react-modal")).toBeInTheDocument();
+      expect(screen.getByText("Content")).toBeInTheDocument();
+    });
+
+    it("does not render when isOpen is false", () => {
+      render(
+        <Modal {...defaultProps} isOpen={false}>
+          Content
+        </Modal>
+      );
+      expect(screen.queryByTestId("react-modal")).not.toBeInTheDocument();
+    });
+
+    it("has correct displayName", () => {
+      expect(Modal.displayName).toBe("Modal");
+    });
+
+    it("renders children in body div", () => {
+      render(<Modal {...defaultProps}>Hello World</Modal>);
+      expect(screen.getByText("Hello World")).toBeInTheDocument();
+    });
+  });
+
+  describe("Title", () => {
+    it("renders title when provided", () => {
+      render(<Modal {...defaultProps} title="My Modal" />);
+      expect(screen.getByText("My Modal")).toBeInTheDocument();
+    });
+
+    it("does not render title section when not provided", () => {
+      const { container } = render(<Modal {...defaultProps} />);
+      expect(container.querySelector(".border-b")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Close button", () => {
+    it("renders close button by default", () => {
+      render(<Modal {...defaultProps} />);
+      expect(screen.getByTestId("close-button")).toBeInTheDocument();
+    });
+
+    it("hides close button when hideCloseButton is true", () => {
+      render(<Modal {...defaultProps} hideCloseButton={true} />);
+      expect(screen.queryByTestId("close-button")).not.toBeInTheDocument();
+    });
+
+    it("calls onRequestClose when close button is clicked", () => {
+      const onRequestClose = jest.fn();
+      render(<Modal {...defaultProps} onRequestClose={onRequestClose} />);
+      fireEvent.click(screen.getByTestId("close-button"));
+      expect(onRequestClose).toHaveBeenCalledTimes(1);
+    });
+
+    it("renders close icon in close button", () => {
+      render(<Modal {...defaultProps} />);
+      expect(screen.getByText("close")).toBeInTheDocument();
+    });
+  });
+
+  describe("Size", () => {
+    it("applies md size classes by default", () => {
+      render(<Modal {...defaultProps} />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("inset-[15%]");
+    });
+
+    it("applies xl size classes", () => {
+      render(<Modal {...defaultProps} size="xl" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("inset-[5%]");
+    });
+
+    it("applies lg size classes", () => {
+      render(<Modal {...defaultProps} size="lg" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("inset-[10%]");
+    });
+
+    it("applies sm size classes", () => {
+      render(<Modal {...defaultProps} size="sm" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("w-[640px]");
+    });
+
+    it("applies xs size classes", () => {
+      render(<Modal {...defaultProps} size="xs" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("w-[calc(100%-30px)]");
+    });
+  });
+
+  describe("Shape", () => {
+    it("applies default shape", () => {
+      render(<Modal {...defaultProps} />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).not.toContain("rounded-3xl");
+    });
+
+    it("applies rounded shape", () => {
+      render(<Modal {...defaultProps} shape="rounded" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("rounded-3xl");
+    });
+  });
+
+  describe("Centered", () => {
+    it("applies centered classes", () => {
+      render(<Modal {...defaultProps} centered={true} />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("top-0");
+    });
+  });
+
+  describe("CSS classes", () => {
+    it("applies custom className", () => {
+      render(<Modal {...defaultProps} className="custom-modal" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("custom-modal");
+    });
+
+    it("applies bodyClassName to body div", () => {
+      render(<Modal {...defaultProps} bodyClassName="custom-body" />);
+      const body = screen
+        .getByTestId("react-modal")
+        .querySelector(".custom-body");
+      expect(body).toBeInTheDocument();
+    });
+
+    it("applies closeButtonClassName", () => {
+      render(<Modal {...defaultProps} closeButtonClassName="custom-close" />);
+      const closeBtn = screen.getByTestId("close-button");
+      expect(closeBtn.className).toContain("custom-close");
+    });
+  });
+
+  describe("Body style", () => {
+    it("applies bodyStyle to body div", () => {
+      render(
+        <Modal {...defaultProps} bodyStyle={{ padding: "20px" }}>
+          Content
+        </Modal>
+      );
+      const body = screen.getByText("Content");
+      // Body content should be present inside the modal
+      expect(body).toBeInTheDocument();
+    });
+  });
+
+  describe("Animation", () => {
+    it("applies popper animation classes by default", () => {
+      render(<Modal {...defaultProps} />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("transition-transform");
+    });
+
+    it("applies bottomSheet animation classes", () => {
+      render(<Modal {...defaultProps} animation="bottomSheet" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("ease-in-out");
+    });
+
+    it("applies exited state classes for popper when not transitioning", () => {
+      // Since our mock always returns 'entered' state when in=true,
+      // we can verify it includes entered classes
+      render(<Modal {...defaultProps} />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("pointer-events-auto");
+    });
+
+    it("returns default popper classes for unknown transition state", () => {
+      setMockTransitionState("unmounted");
+      render(<Modal {...defaultProps} animation="popper" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("opacity-0");
+      expect(modal.className).toContain("translate-y-[-18px]");
+      setMockTransitionState(null);
+    });
+
+    it("returns default bottomSheet classes for unknown transition state", () => {
+      setMockTransitionState("unmounted");
+      render(<Modal {...defaultProps} animation="bottomSheet" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("opacity-0");
+      expect(modal.className).toContain("translate-y-full");
+      setMockTransitionState(null);
+    });
+  });
+
+  describe("Data attributes", () => {
+    it("passes data-testid to body div", () => {
+      render(<Modal {...defaultProps} data-testid="modal-body" />);
+      const elements = screen.getAllByTestId("modal-body");
+      expect(elements.length).toBeGreaterThan(0);
+    });
+
+    it("supports parentSelector prop", () => {
+      // Add a main element to the document
+      const main = document.createElement("main");
+      document.body.appendChild(main);
+      render(
+        <Modal
+          {...defaultProps}
+          parentSelector={"main" as unknown as string & (() => HTMLElement)}
+        />
+      );
+      expect(screen.getByTestId("react-modal")).toBeInTheDocument();
+      document.body.removeChild(main);
+    });
+
+    it("falls back to document.body when parentSelector element not found", () => {
+      render(
+        <Modal
+          {...defaultProps}
+          parentSelector={
+            ".nonexistent" as unknown as string & (() => HTMLElement)
+          }
+        />
+      );
+      expect(screen.getByTestId("react-modal")).toBeInTheDocument();
+    });
+
+    it("applies closeWrapperClassName", () => {
+      const { container } = render(
+        <Modal {...defaultProps} closeWrapperClassName="wrapper-class" />
+      );
+      const wrapper = container.querySelector(".wrapper-class");
+      expect(wrapper).toBeInTheDocument();
+    });
+
+    it("applies bottomSheet animation classes", () => {
+      render(<Modal {...defaultProps} animation="bottomSheet" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("translate-y-0");
+      expect(modal.className).toContain("pointer-events-auto");
+    });
+
+    it("returns empty animation classes for unknown animation type", () => {
+      render(<Modal {...defaultProps} animation={"unknown" as any} />);
+      const modal = screen.getByTestId("react-modal");
+      // No animation-specific classes, just the base classes
+      expect(modal.className).not.toContain("translate-y");
+      expect(modal.className).not.toContain("opacity-0");
+    });
+  });
+});