@tpzdsp/next-toolkit 1.0.1 → 1.2.0

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>
+  ),
+};

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 '../../utils/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>
+  );
+};