@tpzdsp/next-toolkit 1.1.0 → 1.2.1

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

@@ -0,0 +1,199 @@
+import { describe, expect, it } from 'vitest';
+
+import { Accordion } from './Accordion';
+import { render, screen, userEvent } from '../../test/renderers';
+
+const TEST_CONTENT = 'Test content';
+const ARIA_EXPANDED = 'aria-expanded';
+const ARIA_HIDDEN = 'aria-hidden';
+
+describe('Accordion', () => {
+  it('should render with title and content', () => {
+    render(
+      <Accordion title="Test Section">
+        <div>{TEST_CONTENT}</div>
+      </Accordion>,
+    );
+
+    expect(screen.getByText('Test Section')).toBeInTheDocument();
+    expect(screen.getByText(TEST_CONTENT)).toBeInTheDocument();
+
+    expect(screen.getByText(TEST_CONTENT).closest('section')).toHaveClass('hidden');
+  });
+
+  it('should render with content closed by default', () => {
+    render(
+      <Accordion title="Test Section">
+        <div>{TEST_CONTENT}</div>
+      </Accordion>,
+    );
+
+    expect(screen.getByRole('button', { name: /test section/i })).toHaveAttribute(
+      ARIA_EXPANDED,
+      'false',
+    );
+
+    const section = screen.getByText(TEST_CONTENT).closest('section');
+
+    expect(section).toHaveAttribute(ARIA_HIDDEN, 'true');
+    expect(section).toHaveClass('hidden');
+  });
+
+  it('should open and close content when clicked', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Accordion title="Test Section">
+        <div>Test content</div>
+      </Accordion>,
+    );
+
+    const button = screen.getByRole('button', { name: /test section/i });
+    const section = screen.getByText(TEST_CONTENT).closest('section');
+
+    // Initially closed
+    expect(button).toHaveAttribute(ARIA_EXPANDED, 'false');
+    expect(section).toHaveAttribute(ARIA_HIDDEN, 'true');
+    expect(section).toHaveClass('hidden');
+
+    // Click to open
+    await user.click(button);
+    expect(button).toHaveAttribute(ARIA_EXPANDED, 'true');
+    expect(section).toHaveAttribute(ARIA_HIDDEN, 'false');
+    expect(section).toHaveClass('block');
+
+    // Click again to close
+    await user.click(button);
+    expect(button).toHaveAttribute(ARIA_EXPANDED, 'false');
+    expect(section).toHaveAttribute(ARIA_HIDDEN, 'true');
+    expect(section).toHaveClass('hidden');
+  });
+
+  it('should render with content open when defaultOpen is true', () => {
+    render(
+      <Accordion title="Test Section" defaultOpen>
+        <div>Test content</div>
+      </Accordion>,
+    );
+
+    const button = screen.getByRole('button', { name: /test section/i });
+
+    expect(button).toHaveAttribute(ARIA_EXPANDED, 'true');
+    expect(screen.getByText(TEST_CONTENT)).toBeInTheDocument();
+  });
+
+  it('should have proper accessibility attributes', () => {
+    render(
+      <Accordion title="Test Section">
+        <div>Test content</div>
+      </Accordion>,
+    );
+
+    const button = screen.getByRole('button', { name: /test section/i });
+
+    expect(button).toHaveAttribute(ARIA_EXPANDED, 'false');
+    expect(button).toHaveAttribute('aria-controls');
+    expect(button).toHaveAttribute('id');
+
+    const content = screen.getByRole('region', { hidden: true });
+
+    expect(content).toHaveAttribute('aria-labelledby', button.id);
+    expect(content).toHaveAttribute(ARIA_HIDDEN, 'true');
+  });
+
+  it('should update aria-hidden when opened', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Accordion title="Test Section">
+        <div>Test content</div>
+      </Accordion>,
+    );
+
+    const button = screen.getByRole('button', { name: /test section/i });
+    const content = screen.getByRole('region', { hidden: true });
+
+    expect(content).toHaveAttribute(ARIA_HIDDEN, 'true');
+
+    await user.click(button);
+
+    expect(content).toHaveAttribute(ARIA_HIDDEN, 'false');
+  });
+
+  it('should render complex content correctly', () => {
+    render(
+      <Accordion title="Complex Section" defaultOpen>
+        <div>
+          <p>Paragraph content</p>
+
+          <button>Nested button</button>
+
+          <ul>
+            <li>List item 1</li>
+
+            <li>List item 2</li>
+          </ul>
+        </div>
+      </Accordion>,
+    );
+
+    expect(screen.getByText('Paragraph content')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Nested button' })).toBeInTheDocument();
+    expect(screen.getByText('List item 1')).toBeInTheDocument();
+    expect(screen.getByText('List item 2')).toBeInTheDocument();
+  });
+
+  it('should rotate chevron icon when opened', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Accordion title="Test Section">
+        <div>Test content</div>
+      </Accordion>,
+    );
+
+    const button = screen.getByRole('button', { name: /test section/i });
+    const chevron = button.querySelector('.rotate-180');
+
+    // Should not have rotate-180 class when closed
+    expect(chevron).toBeNull();
+
+    await user.click(button);
+
+    // Should have rotate-180 class when opened
+    const rotatedChevron = button.querySelector('.rotate-180');
+
+    expect(rotatedChevron).toBeInTheDocument();
+  });
+
+  it('should have correct styling classes', () => {
+    render(
+      <Accordion title="Test Section">
+        <div>Test content</div>
+      </Accordion>,
+    );
+
+    const container = screen.getByRole('button').closest('div');
+
+    expect(container).toHaveClass(
+      'flex',
+      'flex-col',
+      'gap-2',
+      'border-l-2',
+      'border-neutral-100',
+      'rounded-md',
+    );
+
+    const button = screen.getByRole('button');
+
+    expect(button).toHaveClass(
+      'flex',
+      'justify-between',
+      'items-center',
+      'px-2',
+      'py-1',
+      'bg-neutral-100',
+      'rounded-md',
+    );
+  });
+});

package/src/components/accordion/Accordion.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { type ReactNode, useId, useState } from 'react';
+
+import { LuChevronDown } from 'react-icons/lu';
+import { twMerge } from 'tailwind-merge';
+
+export type AccordionProps = {
+  title: string;
+  children: ReactNode;
+  defaultOpen?: boolean;
+};
+
+export const Accordion = ({ title, children, defaultOpen = false }: AccordionProps) => {
+  const contentId = useId();
+  const buttonId = useId();
+
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="flex flex-col gap-2 border-l-2 border-neutral-100 rounded-md">
+      <button
+        aria-expanded={isOpen}
+        aria-controls={contentId}
+        className="flex justify-between items-center px-2 py-1 bg-neutral-100 rounded-md"
+        id={buttonId}
+        onClick={() => setIsOpen(!isOpen)}
+        type="button"
+      >
+        <span>{title}</span>
+
+        <span aria-hidden="true">
+          <LuChevronDown className={twMerge('w-4 h-4', isOpen ? 'rotate-180' : '')} />
+        </span>
+      </button>
+
+      <section
+        id={contentId}
+        aria-labelledby={buttonId}
+        aria-hidden={!isOpen}
+        className={twMerge('px-2 pb-1', isOpen ? 'block' : 'hidden')}
+      >
+        {children}
+      </section>
+    </div>
+  );
+};

package/src/components/divider/RuleDivider.stories.tsx

@@ -0,0 +1,255 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { RuleDivider } from './RuleDivider';
+
+const meta = {
+  title: 'Components/RuleDivider',
+  component: RuleDivider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof RuleDivider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider />
+    </div>
+  ),
+};
+
+export const WithText: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider>OR</RuleDivider>
+    </div>
+  ),
+};
+
+export const WithLongerText: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider>Continue Reading</RuleDivider>
+    </div>
+  ),
+};
+export const WithIcon: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider>
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+        </svg>
+      </RuleDivider>
+    </div>
+  ),
+};
+
+export const WithStyledText: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider>
+        <span className="text-sm text-gray-500 uppercase tracking-wide">Section Break</span>
+      </RuleDivider>
+    </div>
+  ),
+};
+
+export const WithBoldText: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider>
+        <strong className="text-gray-700">Important</strong>
+      </RuleDivider>
+    </div>
+  ),
+};
+
+export const WithColoredText: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider>
+        <span className="text-blue-600 font-medium">New Content</span>
+      </RuleDivider>
+    </div>
+  ),
+};
+
+export const InContainer: Story = {
+  render: () => (
+    <div className="w-96 p-4 border rounded">
+      <p className="mb-4">This is some content above the divider.</p>
+
+      <RuleDivider>
+        <span className="text-gray-500">More below</span>
+      </RuleDivider>
+
+      <p className="mt-4">This is content below the divider.</p>
+    </div>
+  ),
+};
+
+export const FormSeparator: Story = {
+  render: () => (
+    <div className="w-80 p-6 border rounded">
+      <div className="space-y-4">
+        <div>
+          <p className="block text-sm font-medium mb-1">Email</p>
+
+          <input
+            type="email"
+            className="w-full p-2 border border-gray-300 rounded"
+            placeholder="Enter your email"
+          />
+        </div>
+
+        <div>
+          <p className="block text-sm font-medium mb-1">Password</p>
+
+          <input
+            type="password"
+            className="w-full p-2 border border-gray-300 rounded"
+            placeholder="Enter your password"
+          />
+        </div>
+      </div>
+
+      <div className="my-6">
+        <RuleDivider>
+          <span className="text-xs text-gray-400 uppercase">OR</span>
+        </RuleDivider>
+      </div>
+
+      <button className="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">
+        Continue with Google
+      </button>
+    </div>
+  ),
+};
+
+export const ContentSections: Story = {
+  render: () => (
+    <div className="max-w-2xl p-6 space-y-6">
+      <div>
+        <h2 className="text-xl font-bold mb-2">Introduction</h2>
+
+        <p className="text-gray-600">
+          This is the introduction section with some content that explains the topic.
+        </p>
+      </div>
+
+      <RuleDivider>
+        <span className="text-sm text-gray-500">Chapter 1</span>
+      </RuleDivider>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-2">Getting Started</h3>
+
+        <p className="text-gray-600">
+          Here we dive into the first chapter with detailed explanations and examples.
+        </p>
+      </div>
+
+      <RuleDivider>
+        <span className="text-sm text-gray-500">Chapter 2</span>
+      </RuleDivider>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-2">Advanced Topics</h3>
+
+        <p className="text-gray-600">This section covers more advanced concepts and use cases.</p>
+      </div>
+    </div>
+  ),
+};
+
+export const MultipleInList: Story = {
+  render: () => (
+    <div className="w-80 space-y-4">
+      <RuleDivider />
+
+      <RuleDivider>
+        <span className="text-gray-600">Section A</span>
+      </RuleDivider>
+
+      <RuleDivider>
+        <span className="text-gray-600">Section B</span>
+      </RuleDivider>
+
+      <RuleDivider>
+        <span className="text-gray-600">Section C</span>
+      </RuleDivider>
+
+      <RuleDivider />
+    </div>
+  ),
+};
+
+export const DifferentWidths: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="w-32">
+        <div className="text-sm mb-2">Small (w-32)</div>
+
+        <RuleDivider>
+          <span className="text-xs">OR</span>
+        </RuleDivider>
+      </div>
+
+      <div className="w-64">
+        <div className="text-sm mb-2">Medium (w-64)</div>
+
+        <RuleDivider>
+          <span className="text-sm">Continue</span>
+        </RuleDivider>
+      </div>
+
+      <div className="w-96">
+        <div className="text-sm mb-2">Large (w-96)</div>
+
+        <RuleDivider>
+          <span className="text-base">Section Divider</span>
+        </RuleDivider>
+      </div>
+    </div>
+  ),
+};
+
+export const WithButton: Story = {
+  render: () => (
+    <RuleDivider>
+      <button className="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">
+        Show More
+      </button>
+    </RuleDivider>
+  ),
+};
+
+export const WithMultipleElements: Story = {
+  render: () => (
+    <RuleDivider>
+      <div className="flex items-center gap-2">
+        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fillRule="evenodd"
+            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+            clipRule="evenodd"
+          />
+        </svg>
+
+        <span className="text-sm text-green-600">Completed</span>
+      </div>
+    </RuleDivider>
+  ),
+};

package/src/components/divider/RuleDivider.test.tsx

@@ -0,0 +1,164 @@
+import { RuleDivider } from './RuleDivider';
+import { render, screen } from '../../test/renderers';
+
+describe('RuleDivider', () => {
+  it('should render with default props', () => {
+    const { container } = render(<RuleDivider />);
+
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('should render single hr element when no children provided', () => {
+    const { container } = render(<RuleDivider />);
+
+    const hrElements = container.querySelectorAll('hr');
+
+    expect(hrElements).toHaveLength(1);
+  });
+
+  it('should have correct container classes', () => {
+    const { container } = render(<RuleDivider />);
+
+    const containerElement = container.firstChild as HTMLElement;
+
+    expect(containerElement).toHaveClass('flex', 'items-center');
+  });
+
+  it('should render with children', () => {
+    render(<RuleDivider>Divider Text</RuleDivider>);
+
+    expect(screen.getByText('Divider Text')).toBeInTheDocument();
+  });
+
+  it('should render two hr elements when children are provided', () => {
+    const { container } = render(<RuleDivider>With Text</RuleDivider>);
+
+    const hrElements = container.querySelectorAll('hr');
+
+    expect(hrElements).toHaveLength(2);
+  });
+
+  it('should apply correct classes to hr elements', () => {
+    const { container } = render(<RuleDivider />);
+
+    const hrElement = container.querySelector('hr');
+
+    expect(hrElement).toHaveClass('flex-grow');
+  });
+
+  it('should apply correct classes to span when children provided', () => {
+    const { container } = render(<RuleDivider>Test Content</RuleDivider>);
+
+    const spanElement = container.querySelector('span');
+
+    expect(spanElement).toHaveClass('px-2');
+    expect(spanElement).toHaveTextContent('Test Content');
+  });
+
+  it('should render complex children correctly', () => {
+    render(
+      <RuleDivider>
+        <strong>Bold Text</strong>
+      </RuleDivider>,
+    );
+
+    expect(screen.getByText('Bold Text')).toBeInTheDocument();
+    expect(screen.getByText('Bold Text').tagName).toBe('STRONG');
+  });
+
+  it('should handle multiple text nodes as children', () => {
+    render(<RuleDivider>Multiple words here</RuleDivider>);
+
+    expect(screen.getByText('Multiple words here')).toBeInTheDocument();
+  });
+
+  it('should render icon as children', () => {
+    const IconComponent = () => <svg data-testid="test-icon" />;
+
+    render(
+      <RuleDivider>
+        <IconComponent />
+      </RuleDivider>,
+    );
+
+    expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+  });
+
+  it('should have proper structure when children provided', () => {
+    const { container } = render(<RuleDivider>Content</RuleDivider>);
+
+    const containerElement = container.firstChild as HTMLElement;
+
+    expect(containerElement.children).toHaveLength(3); // hr + span + hr
+
+    const [firstHr, span, secondHr] = containerElement.children;
+
+    expect(firstHr.tagName).toBe('HR');
+    expect(span.tagName).toBe('SPAN');
+    expect(secondHr.tagName).toBe('HR');
+  });
+
+  it('should have proper structure when no children provided', () => {
+    const { container } = render(<RuleDivider />);
+
+    const containerElement = container.firstChild as HTMLElement;
+
+    expect(containerElement.children).toHaveLength(1); // only hr
+
+    const hrElement = containerElement.children[0];
+
+    expect(hrElement.tagName).toBe('HR');
+  });
+
+  it('should handle empty string as children', () => {
+    const { container } = render(<RuleDivider>{''}</RuleDivider>);
+
+    // Empty string is falsy, so should behave like no children
+    const hrElements = container.querySelectorAll('hr');
+
+    expect(hrElements).toHaveLength(1);
+
+    const spanElement = container.querySelector('span');
+
+    expect(spanElement).not.toBeInTheDocument();
+  });
+
+  it('should handle null children correctly', () => {
+    const { container } = render(<RuleDivider>{null}</RuleDivider>);
+
+    // null should be considered falsy, so only one hr should render
+    const hrElements = container.querySelectorAll('hr');
+
+    expect(hrElements).toHaveLength(1);
+
+    const spanElement = container.querySelector('span');
+
+    expect(spanElement).not.toBeInTheDocument();
+  });
+
+  it('should handle undefined children correctly', () => {
+    const { container } = render(<RuleDivider>{undefined}</RuleDivider>);
+
+    // undefined should be considered falsy, so only one hr should render
+    const hrElements = container.querySelectorAll('hr');
+
+    expect(hrElements).toHaveLength(1);
+
+    const spanElement = container.querySelector('span');
+
+    expect(spanElement).not.toBeInTheDocument();
+  });
+
+  it('should render multiple child elements', () => {
+    render(
+      <RuleDivider>
+        <span>Text 1</span>
+
+        <span>Text 2</span>
+      </RuleDivider>,
+    );
+
+    expect(screen.getByText('Text 1')).toBeInTheDocument();
+    expect(screen.getByText('Text 2')).toBeInTheDocument();
+  });
+});

package/src/components/divider/RuleDivider.tsx

@@ -0,0 +1,18 @@
+type RuleDividerProps = {
+  children?: React.ReactNode;
+};
+
+export const RuleDivider = ({ children }: RuleDividerProps) => {
+  return (
+    <div className="flex items-center">
+      <hr className="flex-grow" />
+      {children ? (
+        <>
+          <span className="px-2">{children}</span>
+
+          <hr className="flex-grow" />
+        </>
+      ) : null}
+    </div>
+  );
+};

package/src/components/dropdown/DropdownMenu.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { DropdownMenu, type DropdownMenuItem, type DrowndownMenuButton } from './DropdownMenu';
-import { render, screen, userEvent, waitFor } from '../../utils/renderers';
+import { render, screen, userEvent, waitFor } from '../../test/renderers';
 
 type Item = { label: string };
 

package/src/components/dropdown/useDropdownMenu.ts

@@ -10,7 +10,7 @@ import {
   useCallback,
 } from 'react';
 
-import type { ExtendProps } from '../../types';
+import type { ExtendProps } from '../../types/utils';
 
 /**
  * The current state of the menu