@tpzdsp/next-toolkit 2.5.1 → 3.0.0

package/src/components/ErrorBoundary/ErrorFallback.test.tsx

@@ -1,107 +0,0 @@
-import { ErrorFallback } from './ErrorFallback';
-import { ApiError } from '../../errors';
-import { HttpStatus } from '../../http';
-import { render, screen, userEvent, within } from '../../test/renderers';
-import { identityFn } from '../../utils/utils';
-
-const FAKE_UUID = 'fake-uuid';
-
-Object.defineProperty(navigator, 'clipboard', {
-  value: {
-    writeText: vi.fn().mockResolvedValue(undefined),
-  },
-  configurable: true,
-});
-
-describe('ErrorFallback', () => {
-  beforeEach(() => {
-    (navigator.clipboard.writeText as unknown) = vi.fn().mockResolvedValue(undefined);
-    vi.spyOn(crypto, 'randomUUID').mockReturnValue(FAKE_UUID);
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders a generic error message for an unknown error type', () => {
-    render(<ErrorFallback error={{} as unknown as Error} resetErrorBoundary={identityFn} />);
-
-    const alert = screen.getByRole('alert');
-
-    expect(alert).toHaveTextContent(/something went wrong/i);
-    expect(alert).toHaveTextContent(/reason: unknown/i);
-  });
-
-  it('renders message for standard Error instance', () => {
-    const error = new Error('custom error message');
-
-    render(<ErrorFallback error={error} resetErrorBoundary={identityFn} />);
-
-    expect(screen.getByRole('alert')).toHaveTextContent(/reason: custom error message/i);
-  });
-
-  it('renders message, details and digest for ApiError instance', async () => {
-    const apiError = new ApiError('Fake Reason', HttpStatus.InternalServerError, 'Some details');
-
-    render(<ErrorFallback error={apiError} resetErrorBoundary={identityFn} />);
-
-    // Message shown
-    expect(screen.getByRole('alert')).toHaveTextContent(/reason: fake reason/i);
-
-    // Accordion exists but details hidden until toggled
-    const accordionButton = screen.getByRole('button', { name: /show details/i });
-
-    expect(accordionButton).toBeInTheDocument();
-
-    // Expand and check details text
-    await userEvent.click(accordionButton);
-
-    const section = screen.getByRole('region', { hidden: false });
-
-    expect(within(section).getByText(/error id:/i)).toBeInTheDocument();
-    expect(within(section).getByText(/some details/i)).toBeInTheDocument();
-  });
-
-  it('renders non-string causes', () => {
-    const error = new Error('Has a cause', { cause: ['I will display'] });
-
-    render(<ErrorFallback error={error} resetErrorBoundary={identityFn} />);
-
-    expect(screen.getByRole('alert')).toHaveTextContent(/reason: has a cause/i);
-    expect(screen.queryByRole('button', { name: /show details/i })).toBeInTheDocument();
-  });
-
-  it('calls resetErrorBoundary when Retry is clicked', async () => {
-    const user = userEvent.setup();
-    const resetSpy = vi.fn();
-
-    render(<ErrorFallback error={new Error('Test error')} resetErrorBoundary={resetSpy} />);
-
-    const button = screen.getByRole('button', { name: /retry/i });
-
-    await user.click(button);
-
-    expect(resetSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it('copies error info to clipboard when Copy is clicked', async () => {
-    const user = userEvent.setup();
-    const apiError = new ApiError('Copy Reason', HttpStatus.BadRequest, 'Some details');
-
-    render(<ErrorFallback error={apiError} resetErrorBoundary={identityFn} />);
-
-    const copyButton = screen.getByRole('button', { name: /copy/i });
-
-    await user.click(copyButton);
-
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
-      expect.stringContaining('App Error: Copy Reason'),
-    );
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
-      expect.stringContaining('Details: Some details'),
-    );
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
-      expect.stringContaining(`Digest: ${FAKE_UUID}`),
-    );
-  });
-});

package/src/components/ErrorText/ErrorText.test.tsx

@@ -1,33 +0,0 @@
-import { ErrorText } from './ErrorText';
-import { render, screen } from '../../test/renderers';
-
-describe('ErrorText', () => {
-  it('renders with default ErrorText', () => {
-    render(<ErrorText>Error message</ErrorText>);
-
-    expect(screen.getByRole('alert')).toHaveTextContent(/error message/i);
-  });
-
-  it('renders with custom styles', () => {
-    render(<ErrorText className="bg-orange-500">Error text</ErrorText>);
-
-    const error = screen.getByRole('alert');
-
-    expect(error).toHaveClass(/bg-orange-500/i);
-    expect(error).not.toHaveClass(/bg-green-500/i);
-    expect(error).toHaveTextContent(/error text/i);
-  });
-
-  it('renders with complex children', () => {
-    render(
-      <ErrorText>
-        <a href="/">Error link</a>
-      </ErrorText>,
-    );
-
-    const linkElement = screen.getByRole('link', { name: /error link/i });
-
-    expect(linkElement).toBeInTheDocument();
-    expect(linkElement).toHaveAttribute('href', '/');
-  });
-});

package/src/components/Heading/Heading.test.tsx

@@ -1,22 +0,0 @@
-import { Heading, type HeadingProps } from './Heading';
-import { render, screen } from '../../test/renderers';
-
-describe('Heading Component', () => {
-  const headingTypes: HeadingProps['type'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-
-  it.each(headingTypes)('renders correct HTML element for type "%s"', (type) => {
-    render(<Heading type={type}>Test {type}</Heading>);
-
-    const heading = screen.getByRole('heading', { name: `Test ${type}` });
-
-    expect(heading).toBeInTheDocument();
-  });
-
-  it.each(headingTypes)('applies correct styles for type "%s"', (type) => {
-    render(<Heading type={type}>Styled {type}</Heading>);
-
-    const heading = screen.getByText(`Styled ${type}`);
-
-    expect(heading).toHaveClass('font-bold text-text-primary');
-  });
-});

package/src/components/Hint/Hint.stories.tsx

@@ -1,58 +0,0 @@
-import { fn } from 'storybook/test';
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Hint } from './Hint';
-import { Button } from '../Button/Button';
-
-const meta: Meta<typeof Hint> = {
-  title: 'Components/Hint',
-  component: Hint,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: false,
-      description: 'The content to display for the hint',
-    },
-    className: {
-      control: 'text',
-      description: 'Additional TailwindCSS classes to apply to the hint container',
-    },
-  },
-  args: {
-    children: 'Hint message',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Hint>;
-
-export const Default: Story = {};
-
-export const CustomStyling: Story = {
-  args: {
-    className: 'text-3xl',
-    children: 'Hint message with extra large text',
-  },
-};
-
-export const ComplexChildren: Story = {
-  args: {
-    children: (
-      <div>
-        Hint message with link and button{' '}
-        <a className="underline text-link" href="/">
-          Link
-        </a>
-        {}
-        <Button variant="primary" onClick={fn()}>
-          Click
-        </Button>
-      </div>
-    ),
-  },
-};

package/src/components/Hint/Hint.test.tsx

@@ -1,33 +0,0 @@
-import { Hint } from './Hint';
-import { render, screen } from '../../test/renderers';
-
-describe('Hint', () => {
-  it('renders with default Hint message', () => {
-    render(<Hint>Hint text</Hint>);
-    expect(screen.getByText(/hint text/i)).toHaveTextContent(/hint text/i);
-  });
-
-  it('renders with custom styles', () => {
-    render(<Hint className="bg-orange-500">hint message</Hint>);
-
-    const hintElement = screen.getByText(/hint message/i);
-
-    expect(hintElement).toHaveClass(/bg-orange-500/i);
-    expect(hintElement).not.toHaveClass(/bg-green-500/i);
-  });
-
-  it('renders with complex children', () => {
-    render(
-      <Hint>
-        Some description text <a href="/">Link</a>
-      </Hint>,
-    );
-
-    const linkElement = screen.getByRole('link', { name: /link/i });
-
-    expect(screen.getByText(/some description text/i)).toBeInTheDocument();
-
-    expect(linkElement).toBeInTheDocument();
-    expect(linkElement).toHaveAttribute('href', '/');
-  });
-});

package/src/components/Hint/Hint.tsx

@@ -1,12 +0,0 @@
-import type { ExtendProps } from '../../types/utils';
-import { cn } from '../../utils';
-
-export type HintProps = ExtendProps<'div'>;
-
-export const Hint = ({ className, children, ...props }: HintProps) => {
-  return (
-    <div className={cn('mb-2 text-lg text-text-secondary', className)} {...props}>
-      {children}
-    </div>
-  );
-};

package/src/components/InfoBox/InfoBox.test.tsx

@@ -1,330 +0,0 @@
-import { InfoBox } from './InfoBox';
-import { render, screen, userEvent, waitFor } from '../../test/renderers';
-
-const TEST_CONTENT = 'Test info content';
-const TEST_TITLE = 'Test Title';
-const ARIA_EXPANDED = 'aria-expanded';
-
-describe('InfoBox', () => {
-  describe('rendering', () => {
-    it('should render the trigger button with info icon', () => {
-      render(
-        <InfoBox>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      const button = screen.getByRole('button', { name: /show information/i });
-
-      expect(button).toBeInTheDocument();
-      expect(button.querySelector('svg')).toBeInTheDocument();
-    });
-
-    it('should not render content when closed', () => {
-      render(
-        <InfoBox>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      expect(screen.queryByText(TEST_CONTENT)).not.toBeInTheDocument();
-    });
-
-    it('should render content when defaultOpen is true', () => {
-      render(
-        <InfoBox defaultOpen>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      expect(screen.getByText(TEST_CONTENT)).toBeInTheDocument();
-    });
-
-    it('should render title when provided', () => {
-      render(
-        <InfoBox title={TEST_TITLE} defaultOpen>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      expect(screen.getByText(TEST_TITLE)).toBeInTheDocument();
-      expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(TEST_TITLE);
-    });
-
-    it('should not render title element when not provided', () => {
-      render(
-        <InfoBox defaultOpen>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('interactions', () => {
-    it('should open content when trigger is clicked', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <InfoBox>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      const button = screen.getByRole('button', { name: /show information/i });
-
-      expect(screen.queryByText(TEST_CONTENT)).not.toBeInTheDocument();
-
-      await user.click(button);
-
-      expect(screen.getByText(TEST_CONTENT)).toBeInTheDocument();
-    });
-
-    it('should close content when trigger is clicked while open', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <InfoBox defaultOpen>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      expect(screen.getByText(TEST_CONTENT)).toBeInTheDocument();
-
-      const button = screen.getByRole('button', { name: /show information/i });
-
-      await user.click(button);
-
-      await waitFor(() => {
-        expect(screen.queryByText(TEST_CONTENT)).not.toBeInTheDocument();
-      });
-    });
-
-    // Note: Escape key closing is handled by FocusTrap, which is mocked in tests.
-    // The real behavior is tested through FocusTrap's own test suite.
-  });
-
-  describe('accessibility', () => {
-    it('should have aria-expanded attribute that toggles correctly', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <InfoBox>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      const button = screen.getByRole('button', { name: /show information/i });
-
-      expect(button).toHaveAttribute(ARIA_EXPANDED, 'false');
-
-      await user.click(button);
-
-      expect(button).toHaveAttribute(ARIA_EXPANDED, 'true');
-    });
-
-    it('should have aria-haspopup="dialog" on trigger', () => {
-      render(
-        <InfoBox>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      const button = screen.getByRole('button', { name: /show information/i });
-
-      expect(button).toHaveAttribute('aria-haspopup', 'dialog');
-    });
-
-    it('should have dialog role', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <InfoBox>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      await user.click(screen.getByRole('button', { name: /show information/i }));
-
-      const dialog = screen.getByRole('dialog');
-
-      // Floating UI uses div with role="dialog"
-      expect(dialog).toBeInTheDocument();
-    });
-
-    it('should have aria-labelledby when title is provided', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <InfoBox title={TEST_TITLE}>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      await user.click(screen.getByRole('button', { name: /show information/i }));
-
-      const dialog = screen.getByRole('dialog');
-      const titleId = dialog.getAttribute('aria-labelledby');
-
-      expect(titleId).toBeTruthy();
-
-      const title = screen.getByRole('heading', { level: 2 });
-
-      expect(title).toHaveAttribute('id', titleId);
-    });
-
-    it('should have aria-label when title is not provided', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <InfoBox>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      await user.click(screen.getByRole('button', { name: /show information/i }));
-
-      const dialog = screen.getByRole('dialog');
-
-      expect(dialog).toHaveAttribute('aria-label', 'Information');
-      expect(dialog).not.toHaveAttribute('aria-labelledby');
-    });
-
-    it('should use custom triggerLabel when provided', () => {
-      render(
-        <InfoBox triggerLabel="Learn more about this feature">
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      expect(
-        screen.getByRole('button', { name: /learn more about this feature/i }),
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe('callbacks', () => {
-    it('should call onOpenChange when opening', async () => {
-      const user = userEvent.setup();
-      const onOpenChange = vi.fn();
-
-      render(
-        <InfoBox onOpenChange={onOpenChange}>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      await user.click(screen.getByRole('button', { name: /show information/i }));
-
-      expect(onOpenChange).toHaveBeenCalledWith(true);
-    });
-
-    it('should call onOpenChange when closing', async () => {
-      const user = userEvent.setup();
-      const onOpenChange = vi.fn();
-
-      render(
-        <InfoBox defaultOpen onOpenChange={onOpenChange}>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      await user.click(screen.getByRole('button', { name: /show information/i }));
-
-      await waitFor(() => {
-        expect(onOpenChange).toHaveBeenCalledWith(false);
-      });
-    });
-  });
-
-  describe('positioning', () => {
-    it('should accept placement prop', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <InfoBox placement="top-start">
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      await user.click(screen.getByRole('button', { name: /show information/i }));
-
-      const dialog = screen.getByRole('dialog');
-
-      // Floating UI handles positioning automatically
-      expect(dialog).toBeInTheDocument();
-    });
-  });
-
-  describe('styling', () => {
-    it('should apply maxWidth style', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <InfoBox maxWidth="400px">
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      await user.click(screen.getByRole('button', { name: /show information/i }));
-
-      const dialog = screen.getByRole('dialog');
-
-      expect(dialog).toHaveStyle({ maxWidth: 'min(400px, calc(100vw - 32px))' });
-    });
-
-    it('should merge custom className', () => {
-      render(
-        <InfoBox className="custom-class">
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      const container = screen.getByRole('button', { name: /show information/i }).parentElement;
-
-      expect(container).toHaveClass('custom-class');
-    });
-
-    it('should have correct trigger button styling', () => {
-      render(
-        <InfoBox>
-          <p>{TEST_CONTENT}</p>
-        </InfoBox>,
-      );
-
-      const button = screen.getByRole('button', { name: /show information/i });
-
-      expect(button).toHaveClass('rounded-full', 'bg-transparent');
-    });
-  });
-
-  describe('complex content', () => {
-    it('should render interactive content correctly', async () => {
-      const user = userEvent.setup();
-      const onButtonClick = vi.fn();
-
-      render(
-        <InfoBox defaultOpen>
-          <div>
-            <p>Description text</p>
-
-            <input type="text" placeholder="Enter text" />
-
-            <button onClick={onButtonClick}>Action</button>
-          </div>
-        </InfoBox>,
-      );
-
-      expect(screen.getByText('Description text')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
-
-      const actionButton = screen.getByRole('button', { name: 'Action' });
-
-      expect(actionButton).toBeInTheDocument();
-
-      await user.click(actionButton);
-      expect(onButtonClick).toHaveBeenCalled();
-    });
-  });
-});

package/src/components/InfoBox/types.ts

@@ -1,6 +0,0 @@
-export type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-
-export const POSITION_TOP_LEFT: Position = 'top-left';
-export const POSITION_TOP_RIGHT: Position = 'top-right';
-export const POSITION_BOTTOM_LEFT: Position = 'bottom-left';
-export const POSITION_BOTTOM_RIGHT: Position = 'bottom-right';