@tpzdsp/next-toolkit 1.1.0 → 1.2.1

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 '../../test/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/Paragraph/Paragraph.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { Paragraph } from './Paragraph';
-import { render, screen } from '../../utils/renderers';
+import { render, screen } from '../../test/renderers';
 
 describe('Paragraph', () => {
   it('renders with text', () => {

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

@@ -1,8 +1,7 @@
 import { describe, it, expect } from 'vitest';
 
-import { act, render, screen, userEvent, waitFor } from '@tpzdsp/next-toolkit';
-
 import { SlidingPanel } from './SlidingPanel';
+import { act, render, screen, userEvent, waitFor } from '../../test/renderers';
 
 const positions = ['center-left', 'center-right', 'center-top', 'center-bottom'] as const;
 

package/src/components/accordion/Accordion.stories.tsx

@@ -0,0 +1,235 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Accordion } from './Accordion';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The title displayed in the accordion header',
+    },
+    defaultOpen: {
+      control: 'boolean',
+      description: 'Whether the accordion should be open by default',
+    },
+    children: {
+      control: false,
+      description: 'The content to display when the accordion is expanded',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  args: {
+    title: 'Getting Started',
+    children: (
+      <div className="space-y-2">
+        <p>Welcome to our platform! Here&apos;s how to get started:</p>
+
+        <ul className="list-disc list-inside space-y-1">
+          <li>Create your account</li>
+
+          <li>Verify your email</li>
+
+          <li>Complete your profile</li>
+        </ul>
+      </div>
+    ),
+  },
+};
+
+export const DefaultOpen: Story = {
+  args: {
+    title: 'Features Overview',
+    defaultOpen: true,
+    children: (
+      <div className="space-y-2">
+        <p>Our platform offers the following features:</p>
+
+        <ul className="list-disc list-inside space-y-1">
+          <li>Real-time collaboration</li>
+
+          <li>Advanced analytics</li>
+
+          <li>Customizable dashboards</li>
+
+          <li>API integrations</li>
+        </ul>
+      </div>
+    ),
+  },
+};
+
+export const SimpleContent: Story = {
+  args: {
+    title: 'What is React?',
+    children: <p>React is a JavaScript library for building user interfaces.</p>,
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    title: 'Terms and Conditions',
+    children: (
+      <div className="space-y-4 max-h-64 overflow-y-auto">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </p>
+
+        <p>
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+          nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+          deserunt mollit anim id est laborum.
+        </p>
+
+        <p>
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
+          laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+          architecto beatae vitae dicta sunt explicabo.
+        </p>
+      </div>
+    ),
+  },
+};
+
+export const ComplexContent: Story = {
+  args: {
+    title: 'Pricing Plans',
+    children: (
+      <div className="space-y-4">
+        <p>Choose the plan that works best for you:</p>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="border rounded p-4">
+            <h4 className="font-semibold">Basic</h4>
+
+            <p className="text-gray-600">$9/month</p>
+
+            <button className="mt-2 px-3 py-1 bg-blue-500 text-white rounded text-sm">
+              Choose Plan
+            </button>
+          </div>
+
+          <div className="border rounded p-4">
+            <h4 className="font-semibold">Pro</h4>
+
+            <p className="text-gray-600">$29/month</p>
+
+            <button className="mt-2 px-3 py-1 bg-blue-500 text-white rounded text-sm">
+              Choose Plan
+            </button>
+          </div>
+
+          <div className="border rounded p-4">
+            <h4 className="font-semibold">Enterprise</h4>
+
+            <p className="text-gray-600">Contact us</p>
+
+            <button className="mt-2 px-3 py-1 bg-blue-500 text-white rounded text-sm">
+              Contact Sales
+            </button>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const FAQ: Story = {
+  render: () => (
+    <div className="space-y-4 max-w-2xl">
+      <h2 className="text-xl font-bold mb-4">Frequently Asked Questions</h2>
+
+      <Accordion title="How do I reset my password?">
+        <div className="space-y-2">
+          <p>To reset your password:</p>
+
+          <ol className="list-decimal list-inside space-y-1">
+            <li>Go to the login page</li>
+
+            <li>Click &quot;Forgot Password&quot;</li>
+
+            <li>Enter your email address</li>
+
+            <li>Check your email for reset instructions</li>
+          </ol>
+        </div>
+      </Accordion>
+
+      <Accordion title="Can I cancel my subscription anytime?">
+        <p>
+          Yes, you can cancel your subscription at any time. Your access will continue until the end
+          of your current billing period.
+        </p>
+      </Accordion>
+
+      <Accordion title="Do you offer refunds?">
+        <div className="space-y-2">
+          <p>We offer refunds under the following conditions:</p>
+
+          <ul className="list-disc list-inside space-y-1">
+            <li>Within 30 days of purchase</li>
+
+            <li>Service was not used extensively</li>
+
+            <li>Technical issues that couldn&apos;t be resolved</li>
+          </ul>
+
+          <p className="mt-2">Contact support for refund requests.</p>
+        </div>
+      </Accordion>
+
+      <Accordion title="Is my data secure?" defaultOpen>
+        <div className="space-y-2">
+          <p>Yes, we take data security seriously:</p>
+
+          <ul className="list-disc list-inside space-y-1">
+            <li>All data is encrypted in transit and at rest</li>
+
+            <li>We use industry-standard security practices</li>
+
+            <li>Regular security audits and penetration testing</li>
+
+            <li>GDPR and CCPA compliant</li>
+          </ul>
+        </div>
+      </Accordion>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => (
+    <div className="space-y-6 max-w-lg">
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Multiple Accordions</h3>
+
+        <div className="space-y-4">
+          <Accordion title="Section 1">
+            <p>Content for the first section.</p>
+          </Accordion>
+
+          <Accordion title="Section 2" defaultOpen>
+            <p>Content for the second section (open by default).</p>
+          </Accordion>
+
+          <Accordion title="Section 3">
+            <p>Content for the third section.</p>
+          </Accordion>
+        </div>
+      </div>
+    </div>
+  ),
+};