@tpzdsp/next-toolkit 1.0.1 → 1.2.0

package/src/components/Modal/Modal.test.tsx

@@ -0,0 +1,248 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { Modal } from './Modal';
+import { render, screen, userEvent } from '../../utils/renderers';
+
+const MODAL_CONTENT = 'Modal content';
+const MODAL_ROOT_ID = 'modal-root';
+const BACKDROP_SELECTOR = '[aria-modal="true"]';
+
+// Mock the useClickOutside hook
+vi.mock('../../hooks/useClickOutside', () => ({
+  useClickOutside: vi.fn(),
+}));
+
+describe('Modal', () => {
+  // Setup modal root element for each test
+  beforeEach(() => {
+    const modalRoot = document.createElement('div');
+
+    modalRoot.id = MODAL_ROOT_ID;
+    document.body.appendChild(modalRoot);
+  });
+
+  afterEach(() => {
+    const modalRoot = document.getElementById(MODAL_ROOT_ID);
+
+    if (modalRoot) {
+      document.body.removeChild(modalRoot);
+    }
+  });
+
+  it('should render modal when isOpen is true', () => {
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    expect(screen.getByText(MODAL_CONTENT)).toBeInTheDocument();
+
+    // Check for the backdrop with aria-modal attribute instead of role
+    const backdrop = screen.getByText(MODAL_CONTENT).closest(BACKDROP_SELECTOR);
+
+    expect(backdrop).toBeInTheDocument();
+  });
+
+  it('should not render modal when isOpen is false', () => {
+    render(
+      <Modal isOpen={false} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    expect(screen.queryByText(MODAL_CONTENT)).not.toBeInTheDocument();
+  });
+
+  it('should not render modal when modal root is missing', () => {
+    // Remove modal root
+    const modalRoot = document.getElementById(MODAL_ROOT_ID);
+
+    if (modalRoot) {
+      document.body.removeChild(modalRoot);
+    }
+
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    expect(screen.queryByText(MODAL_CONTENT)).not.toBeInTheDocument();
+  });
+
+  it('should have proper accessibility attributes', () => {
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    const backdrop = screen.getByText(MODAL_CONTENT).closest(BACKDROP_SELECTOR);
+
+    expect(backdrop).toHaveAttribute('aria-modal', 'true');
+
+    const closeButton = screen.getByRole('button', { name: /close modal/i });
+
+    expect(closeButton).toHaveAttribute('aria-label', 'Close modal');
+  });
+
+  it('should call onClose when close button is clicked', async () => {
+    const user = userEvent.setup();
+    const onCloseMock = vi.fn();
+
+    render(
+      <Modal isOpen={true} onClose={onCloseMock}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    const closeButton = screen.getByRole('button', { name: /close modal/i });
+
+    await user.click(closeButton);
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onClose when Escape key is pressed', async () => {
+    const user = userEvent.setup();
+    const onCloseMock = vi.fn();
+
+    render(
+      <Modal isOpen={true} onClose={onCloseMock}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    await user.keyboard('{Escape}');
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not call onClose when other keys are pressed', async () => {
+    const user = userEvent.setup();
+    const onCloseMock = vi.fn();
+
+    render(
+      <Modal isOpen={true} onClose={onCloseMock}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    await user.keyboard('{Enter}');
+    await user.keyboard('{Space}');
+    await user.keyboard('a');
+
+    expect(onCloseMock).not.toHaveBeenCalled();
+  });
+
+  it('should render complex content correctly', () => {
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>
+          <h2>Modal Title</h2>
+
+          <p>Modal description</p>
+
+          <button>Action Button</button>
+
+          <ul>
+            <li>Item 1</li>
+
+            <li>Item 2</li>
+          </ul>
+        </div>
+      </Modal>,
+    );
+
+    expect(screen.getByText('Modal Title')).toBeInTheDocument();
+    expect(screen.getByText('Modal description')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Action Button' })).toBeInTheDocument();
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+  });
+
+  it('should have correct styling classes', () => {
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    const backdrop = screen.getByText(MODAL_CONTENT).closest(BACKDROP_SELECTOR);
+
+    expect(backdrop).toHaveClass(
+      'fixed',
+      'inset-0',
+      'z-50',
+      'flex',
+      'items-center',
+      'justify-center',
+      'bg-black',
+      'bg-opacity-50',
+    );
+
+    const modalContent = backdrop?.firstChild as HTMLElement;
+
+    expect(modalContent).toHaveClass(
+      'bg-white',
+      'rounded-lg',
+      'p-6',
+      'relative',
+      'max-w-md',
+      'w-full',
+      'shadow-lg',
+      'z-10',
+    );
+  });
+
+  it('should render close icon correctly', () => {
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    const closeButton = screen.getByRole('button', { name: /close modal/i });
+    const closeIcon = closeButton.querySelector('svg');
+
+    expect(closeIcon).toBeInTheDocument();
+    expect(closeButton).toHaveClass(
+      'text-static-xl',
+      'absolute',
+      'top-2',
+      'right-2',
+      'text-gray-600',
+      'hover:text-black',
+    );
+  });
+
+  it('should clean up event listeners when unmounted', () => {
+    const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
+    const onCloseMock = vi.fn();
+
+    const { unmount } = render(
+      <Modal isOpen={true} onClose={onCloseMock}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
+
+    removeEventListenerSpy.mockRestore();
+  });
+
+  it('should have modal content with correct tabIndex', () => {
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    const modalContent = screen.getByText(MODAL_CONTENT).closest('div[tabIndex="-1"]');
+
+    expect(modalContent).toHaveAttribute('tabIndex', '-1');
+  });
+});

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+import { createPortal } from 'react-dom';
+import { IoMdCloseCircle } from 'react-icons/io';
+
+import { useClickOutside } from '../../hooks/useClickOutside';
+
+type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+export const Modal = ({ isOpen, onClose, children }: ModalProps) => {
+  const modalRoot = document.getElementById('modal-root');
+
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(modalRef, onClose);
+
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [onClose]);
+
+  if (!modalRoot || !isOpen) {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      aria-modal="true"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+    >
+      <div
+        ref={modalRef}
+        className="bg-white rounded-lg p-6 relative max-w-md w-full shadow-lg z-10"
+        tabIndex={-1}
+      >
+        <button
+          onClick={onClose}
+          className="text-static-xl absolute top-2 right-2 text-gray-600 hover:text-black"
+          aria-label="Close modal"
+        >
+          <IoMdCloseCircle size={20} />
+        </button>
+        {children}
+      </div>
+    </div>,
+    modalRoot,
+  );
+};

package/src/components/SlidingPanel/SlidingPanel.stories.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SlidingPanel } from './SlidingPanel';
+
+export default {
+  children: 'SlidingPanel',
+  component: SlidingPanel,
+} as Meta;
+
+export const AllSlidingPanels: StoryObj<typeof SlidingPanel> = {
+  render: () => (
+    <div>
+      <div>
+        <SlidingPanel>Left</SlidingPanel>
+      </div>
+
+      <div>
+        <SlidingPanel position="center-right">Right</SlidingPanel>
+      </div>
+
+      <div>
+        <SlidingPanel position="center-top">Top</SlidingPanel>
+      </div>
+
+      <div>
+        <SlidingPanel position="center-bottom">Bottom</SlidingPanel>
+      </div>
+    </div>
+  ),
+};

package/src/components/SlidingPanel/SlidingPanel.test.tsx

@@ -0,0 +1,86 @@
+import { describe, it, expect } from 'vitest';
+
+import { act, render, screen, userEvent, waitFor } from '@tpzdsp/next-toolkit';
+
+import { SlidingPanel } from './SlidingPanel';
+
+const positions = ['center-left', 'center-right', 'center-top', 'center-bottom'] as const;
+
+const getExpectedOpenClass = (pos: string) =>
+  pos.includes('left') || pos.includes('right') ? 'translate-x-0' : 'translate-y-0';
+
+const hiddenPositionClasses = {
+  'center-left': '-translate-x-full',
+  'center-right': 'translate-x-full',
+  'center-top': '-translate-y-[200%]',
+  'center-bottom': 'translate-y-[200%]',
+};
+
+describe('SlidingPanel', () => {
+  it.each(positions)('should render closed panel by default at %s', (position) => {
+    render(
+      <SlidingPanel position={position} tabLabel="Open Test">
+        <p>Panel Content</p>
+      </SlidingPanel>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Open Test' })).toBeVisible();
+
+    // Content should still be in the DOM but hidden
+    const panelContent = screen.queryByText('Panel Content')?.parentElement?.parentElement;
+
+    expect(panelContent).toBeInTheDocument();
+    expect(panelContent).toHaveClass(hiddenPositionClasses[position]);
+  });
+
+  it.each(positions)(
+    'should render content and correct class after opening %s',
+    async (position) => {
+      const user = userEvent.setup();
+
+      render(
+        <SlidingPanel position={position} tabLabel="Open Me">
+          <div>My content</div>
+        </SlidingPanel>,
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Me' }));
+
+      // Wait one animation frame for isVisible to be set
+      await act(() => new Promise(requestAnimationFrame));
+
+      const content = await screen.findByText('My content');
+
+      expect(content).toBeVisible();
+
+      // Go up from content div to panel wrapper
+      const wrapper = content.closest('div')!.parentElement!.parentElement!;
+
+      expect(wrapper.className).toContain(getExpectedOpenClass(position));
+    },
+  );
+
+  it.each(positions)('should close panel when "Close" is clicked at %s', async (position) => {
+    const user = userEvent.setup();
+
+    render(
+      <SlidingPanel position={position} tabLabel="Trigger" defaultOpen>
+        <p>Panel Content</p>
+      </SlidingPanel>,
+    );
+
+    const panelContent = screen.getByText('Panel Content');
+
+    expect(panelContent).toBeVisible();
+
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+
+    await waitFor(() => {
+      expect(panelContent).toBeInTheDocument();
+      const insideDiv = panelContent?.parentElement?.parentElement;
+
+      expect(insideDiv).not.toBeNull();
+      expect(insideDiv).toHaveClass(hiddenPositionClasses[position]);
+    });
+  });
+});

package/src/components/SlidingPanel/SlidingPanel.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useState, useEffect, type ReactNode, useRef, useMemo } from 'react';
+
+type Position = 'center-left' | 'center-right' | 'center-top' | 'center-bottom';
+
+export type SlidingPanelProps = {
+  children: ReactNode;
+  position?: Position;
+  tabLabel?: string;
+  defaultOpen?: boolean;
+};
+
+export const SlidingPanel = ({
+  children,
+  tabLabel = 'Open',
+  position = 'center-left',
+  defaultOpen = false,
+}: SlidingPanelProps) => {
+  const [isVisible, setIsVisible] = useState(defaultOpen);
+  const [panelDimensions, setPanelDimensions] = useState({ width: 0, height: 0 });
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Measure panel dimensions when visible
+  useEffect(() => {
+    if (isVisible && panelRef.current) {
+      const updateDimensions = () => {
+        if (panelRef.current) {
+          const rect = panelRef.current.getBoundingClientRect();
+
+          const newDimensions = { width: rect.width, height: rect.height };
+
+          if (
+            newDimensions.width !== panelDimensions.width ||
+            newDimensions.height !== panelDimensions.height
+          ) {
+            setPanelDimensions(newDimensions);
+          }
+        }
+      };
+
+      // Initial measurement
+      updateDimensions();
+
+      // Use ResizeObserver to detect changes
+      const resizeObserver = new ResizeObserver(updateDimensions);
+
+      resizeObserver.observe(panelRef.current);
+
+      return () => resizeObserver.disconnect();
+    }
+  }, [isVisible, panelDimensions.height, panelDimensions.width]);
+
+  const panelBase =
+    'absolute bg-white shadow-lg p-4 flex flex-col transition-transform duration-300 ease-in-out overflow-auto z-30';
+
+  const panelLayout = {
+    'center-left': `top-0 left-0 h-full w-[30%] lg:w-[35%] ${
+      isVisible ? 'translate-x-0' : '-translate-x-full'
+    }`,
+    'center-right': `top-0 right-0 h-full w-[30%] lg:w-[35%] ${
+      isVisible ? 'translate-x-0' : 'translate-x-full'
+    }`,
+    // Changed: Use max-height and let content determine actual height
+    'center-top': `top-0 left-0 w-full max-h-[80vh] ${
+      isVisible ? 'translate-y-0' : '-translate-y-[200%]'
+    }`,
+    'center-bottom': `bottom-0 left-0 w-full max-h-[80vh] ${
+      isVisible ? 'translate-y-0' : 'translate-y-[200%]'
+    }`,
+  }[position];
+
+  const buttonPosition = {
+    'center-left':
+      'absolute top-1/2 -translate-y-1/2 transition-all duration-300 ease-in-out rounded-tr-md rounded-br-md [writing-mode:vertical-rl] px-1 py-3',
+    'center-right':
+      'absolute top-1/2 -translate-y-1/2 transition-all duration-300 ease-in-out rounded-tl-md rounded-bl-md [writing-mode:vertical-rl] px-1 py-3',
+    'center-top':
+      'absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out rounded-bl-md rounded-br-md px-3 py-1',
+    'center-bottom':
+      'absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out rounded-tl-md rounded-tr-md px-3 py-1',
+  }[position];
+
+  // Dynamic positioning using actual panel dimensions
+  const getButtonStyle = useMemo(() => {
+    if (position === 'center-left') {
+      return {
+        left: isVisible ? `${panelDimensions.width}px` : '0px',
+      };
+    }
+
+    if (position === 'center-right') {
+      return {
+        right: isVisible ? `${panelDimensions.width}px` : '0px',
+      };
+    }
+
+    if (position === 'center-top') {
+      return {
+        top: isVisible ? `${panelDimensions.height}px` : '0px',
+      };
+    }
+
+    if (position === 'center-bottom') {
+      return {
+        bottom: isVisible ? `${panelDimensions.height}px` : '0px',
+      };
+    }
+
+    return {};
+  }, [isVisible, panelDimensions.height, panelDimensions.width, position]);
+
+  return (
+    <div className="absolute inset-0 overflow-hidden pointer-events-none z-30">
+      <button
+        className={`pointer-events-auto ${buttonPosition} bg-gray-700 text-white z-40`}
+        style={getButtonStyle}
+        onClick={() => setIsVisible((prev) => !prev)}
+      >
+        {isVisible ? 'Close' : tabLabel}
+      </button>
+
+      <div
+        ref={panelRef}
+        className={`${panelBase} ${panelLayout} pointer-events-auto`}
+        aria-hidden={!isVisible}
+        inert={!isVisible}
+      >
+        <div className="mt-4">{children}</div>
+      </div>
+    </div>
+  );
+};