@tpzdsp/next-toolkit 2.5.1 → 3.1.0

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

@@ -1,192 +0,0 @@
-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', 'border-l-2', 'border-neutral-100');
-
-    const button = screen.getByRole('button');
-
-    expect(button).toHaveClass(
-      'flex',
-      'justify-between',
-      'items-center',
-      'px-2',
-      'py-1',
-      'text-[color:#000000]',
-      'border-y-2',
-      'border-neutral-100',
-      'focus-yellow',
-    );
-  });
-});

package/src/components/accordion/Accordion.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import { type ReactNode, useId, useState } from 'react';
-
-import { LuChevronDown } from 'react-icons/lu';
-
-import type { ExtendProps } from '../../types';
-import { cn } from '../../utils';
-
-type Props = {
-  title: string;
-  children: ReactNode;
-  defaultOpen?: boolean;
-  disabled?: boolean;
-};
-
-export type AccordionProps = ExtendProps<'div', Props>;
-
-export const Accordion = ({
-  title,
-  children,
-  defaultOpen = false,
-  disabled = false,
-  className,
-  ...props
-}: AccordionProps) => {
-  const contentId = useId();
-  const buttonId = useId();
-
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-
-  return (
-    <div
-      className={cn(
-        'flex flex-col border-l-2 border-neutral-100',
-        disabled ? 'opacity-50' : '',
-        className,
-      )}
-      {...props}
-    >
-      <button
-        aria-expanded={disabled ? undefined : isOpen}
-        aria-controls={disabled ? undefined : contentId}
-        disabled={disabled}
-        className={cn(
-          `flex justify-between items-center px-2 py-1 bg-[#fefefefe] text-[color:#000000]
-          border-y-2 border-neutral-100`,
-          disabled ? 'cursor-not-allowed' : 'focus-yellow',
-        )}
-        id={buttonId}
-        onClick={disabled ? undefined : () => setIsOpen(!isOpen)}
-        type="button"
-      >
-        <span>{title}</span>
-
-        <span aria-hidden="true">
-          <LuChevronDown className={cn('w-4 h-4', isOpen ? 'rotate-180' : '')} />
-        </span>
-      </button>
-
-      {!disabled ? (
-        <section
-          id={contentId}
-          aria-labelledby={buttonId}
-          aria-hidden={!isOpen}
-          className={cn('p-2 bg-[#efefef]', isOpen ? 'block' : 'hidden')}
-        >
-          {children}
-        </section>
-      ) : null}
-    </div>
-  );
-};

package/src/components/backToTop/BackToTop.stories.tsx

@@ -1,407 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { BackToTop } from './BackToTop';
-
-const meta = {
-  title: 'Components/BackToTop',
-  component: BackToTop,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'A floating "Back to Top" button that appears when the user scrolls down and allows quick navigation back to the top of the page.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    threshold: {
-      control: { type: 'number', min: 0, max: 2000, step: 100 },
-      description: 'Scroll threshold in pixels before button appears',
-      defaultValue: 600,
-    },
-    bottom: {
-      control: { type: 'number', min: 0, max: 100, step: 4 },
-      description: 'Position from bottom in pixels',
-      defaultValue: 16,
-    },
-    left: {
-      control: { type: 'number', min: 0, max: 100, step: 4 },
-      description: 'Position from left in pixels',
-      defaultValue: 8,
-    },
-    className: {
-      control: 'text',
-      description: 'Custom className for additional styling',
-    },
-  },
-} satisfies Meta<typeof BackToTop>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default back to top button. Scroll down to see it appear at 600px threshold.',
-      },
-    },
-  },
-  render: (args) => (
-    <div>
-      <BackToTop {...args} />
-
-      <div className="space-y-8 p-8">
-        <h1 className="text-3xl font-bold">Scroll down to see the Back to Top button</h1>
-
-        <div className="space-y-6">
-          {Array.from({ length: 50 }, (_, i) => (
-            <div key={i} className="p-4 bg-gray-100 rounded">
-              <h2 className="text-xl font-semibold mb-2">Section {i + 1}</h2>
-
-              <p>
-                This is content section {i + 1}. 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.
-              </p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-export const LowThreshold: Story = {
-  args: {
-    threshold: 200,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Back to top button with a low threshold (200px) - appears quickly when scrolling.',
-      },
-    },
-  },
-  render: (args) => (
-    <div>
-      <BackToTop {...args} />
-
-      <div className="space-y-8 p-8">
-        <h1 className="text-3xl font-bold">Low Threshold Example (200px)</h1>
-
-        <div className="bg-yellow-100 border border-yellow-400 rounded p-4 mb-6">
-          <p className="text-yellow-800">
-            This example has a low threshold of 200px. The button will appear much sooner when
-            scrolling.
-          </p>
-        </div>
-
-        <div className="space-y-6">
-          {Array.from({ length: 30 }, (_, i) => (
-            <div key={i} className="p-4 bg-blue-50 rounded">
-              <h2 className="text-xl font-semibold mb-2">Content Block {i + 1}</h2>
-
-              <p>
-                Content with low threshold setting. The back to top button should appear after
-                scrolling just 200 pixels down the page.
-              </p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-export const CustomPosition: Story = {
-  args: {
-    bottom: 32,
-    left: 32,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Back to top button with custom positioning (32px from bottom and left).',
-      },
-    },
-  },
-  render: (args) => (
-    <div>
-      <BackToTop {...args} />
-
-      <div className="space-y-8 p-8">
-        <h1 className="text-3xl font-bold">Custom Position Example</h1>
-
-        <div className="bg-green-100 border border-green-400 rounded p-4 mb-6">
-          <p className="text-green-800">
-            This button is positioned 32px from both bottom and left edges.
-          </p>
-        </div>
-
-        <div className="space-y-6">
-          {Array.from({ length: 40 }, (_, i) => (
-            <div key={i} className="p-4 bg-green-50 rounded">
-              <h2 className="text-xl font-semibold mb-2">Section {i + 1}</h2>
-
-              <p>Scroll down to see the back to top button in its custom position.</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-export const RightAligned: Story = {
-  args: {
-    left: undefined,
-    className: 'right-4',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Back to top button positioned on the right side using custom className.',
-      },
-    },
-  },
-  render: (args) => (
-    <div>
-      <BackToTop {...args} />
-
-      <div className="space-y-8 p-8">
-        <h1 className="text-3xl font-bold">Right-Aligned Button</h1>
-
-        <div className="bg-purple-100 border border-purple-400 rounded p-4 mb-6">
-          <p className="text-purple-800">
-            This button is positioned on the right side of the screen using className override.
-          </p>
-        </div>
-
-        <div className="space-y-6">
-          {Array.from({ length: 35 }, (_, i) => (
-            <div key={i} className="p-4 bg-purple-50 rounded">
-              <h2 className="text-xl font-semibold mb-2">Content {i + 1}</h2>
-
-              <p>The back to top button appears on the right side instead of the default left.</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-export const CustomStyling: Story = {
-  args: {
-    className: 'bg-blue-600 text-white border-blue-700 hover:bg-blue-700 shadow-xl',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Back to top button with custom styling using className prop.',
-      },
-    },
-  },
-  render: (args) => (
-    <div>
-      <BackToTop {...args} />
-
-      <div className="space-y-8 p-8">
-        <h1 className="text-3xl font-bold">Custom Styled Button</h1>
-
-        <div className="bg-blue-100 border border-blue-400 rounded p-4 mb-6">
-          <p className="text-blue-800">
-            This button has custom blue styling applied via the className prop.
-          </p>
-        </div>
-
-        <div className="space-y-6">
-          {Array.from({ length: 25 }, (_, i) => (
-            <div key={i} className="p-4 bg-blue-50 rounded">
-              <h2 className="text-xl font-semibold mb-2">Styled Section {i + 1}</h2>
-
-              <p>Custom styled back to top button with blue theme.</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-export const AlwaysVisible: Story = {
-  args: {
-    threshold: 0,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Back to top button that is always visible (threshold set to 0).',
-      },
-    },
-  },
-  render: (args) => (
-    <div>
-      <BackToTop {...args} />
-
-      <div className="space-y-8 p-8">
-        <h1 className="text-3xl font-bold">Always Visible Button</h1>
-
-        <div className="bg-red-100 border border-red-400 rounded p-4 mb-6">
-          <p className="text-red-800">
-            This button is always visible because threshold is set to 0px.
-          </p>
-        </div>
-
-        <div className="space-y-6">
-          {Array.from({ length: 20 }, (_, i) => (
-            <div key={i} className="p-4 bg-red-50 rounded">
-              <h2 className="text-xl font-semibold mb-2">Always Visible {i + 1}</h2>
-
-              <p>The button is visible even at the top of the page.</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-export const LongPageExample: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Comprehensive example with a very long page to test scroll behavior thoroughly.',
-      },
-    },
-  },
-  render: (args) => (
-    <div>
-      <BackToTop {...args} />
-
-      <div className="space-y-8 p-8">
-        <header className="mb-12">
-          <h1 className="text-4xl font-bold mb-4">Long Page Scroll Test</h1>
-
-          <p className="text-lg text-gray-600">
-            This page demonstrates the back to top functionality with extensive content. Scroll down
-            to see the button appear after 600px.
-          </p>
-        </header>
-
-        <section className="space-y-8">
-          <h2 className="text-2xl font-bold border-b pb-2">Article Content</h2>
-          {Array.from({ length: 100 }, (_, i) => (
-            <article key={i} className="p-6 bg-white border rounded-lg shadow-sm">
-              <h3 className="text-xl font-semibold mb-3">Article {i + 1}</h3>
-
-              <p className="mb-4">
-                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>
-              {i % 10 === 9 ? (
-                <div className="mt-4 p-3 bg-gray-100 rounded">
-                  <p className="text-sm text-gray-600">
-                    📍 Checkpoint: You&apos;ve scrolled through {i + 1} articles. Use the back to
-                    top button to return to the beginning!
-                  </p>
-                </div>
-              ) : null}
-            </article>
-          ))}
-        </section>
-
-        <footer className="mt-12 p-6 bg-gray-800 text-white rounded">
-          <p className="text-center">
-            🎉 You&apos;ve reached the end! Use the back to top button to scroll back up.
-          </p>
-        </footer>
-      </div>
-    </div>
-  ),
-};
-
-export const AccessibilityDemo: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Demonstration of accessibility features including keyboard navigation and screen reader support.',
-      },
-    },
-  },
-  render: (args) => (
-    <div>
-      <BackToTop {...args} />
-
-      <div className="space-y-8 p-8">
-        <h1 className="text-3xl font-bold">Accessibility Features Demo</h1>
-
-        <div className="bg-blue-50 border border-blue-200 rounded p-6">
-          <h2 className="text-xl font-bold text-blue-800 mb-4">Accessibility Features:</h2>
-
-          <ul className="list-disc list-inside space-y-2 text-blue-700">
-            <li>
-              <strong>Keyboard Navigation:</strong> Tab to focus, Enter or Space to activate
-            </li>
-
-            <li>
-              <strong>Screen Reader:</strong> Proper aria-label and hidden decorative icon
-            </li>
-
-            <li>
-              <strong>Focus Management:</strong> Visible focus indicators with ring
-            </li>
-
-            <li>
-              <strong>Responsive Text:</strong> &ldquo;Back to top&rdquo; text hidden on mobile,
-              available to screen readers
-            </li>
-
-            <li>
-              <strong>Semantic HTML:</strong> Proper button element with type attribute
-            </li>
-          </ul>
-        </div>
-
-        <div className="bg-green-50 border border-green-200 rounded p-4">
-          <h3 className="font-bold text-green-800 mb-2">Testing Instructions:</h3>
-
-          <ol className="list-decimal list-inside space-y-1 text-green-700 text-sm">
-            <li>Scroll down until the back to top button appears</li>
-
-            <li>Use Tab key to navigate to the button</li>
-
-            <li>Press Enter or Space to activate it</li>
-
-            <li>Test with a screen reader for proper announcements</li>
-          </ol>
-        </div>
-
-        <div className="space-y-6">
-          {Array.from({ length: 30 }, (_, i) => (
-            <div key={i} className="p-4 bg-gray-50 rounded">
-              <h3 className="text-lg font-semibold mb-2">Accessibility Section {i + 1}</h3>
-
-              <p>
-                This content tests the accessibility of the back to top button. The button should be
-                properly focusable and operable via keyboard.
-              </p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  ),
-};