@tpzdsp/next-toolkit 2.5.0 → 3.0.0

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

@@ -1,57 +0,0 @@
-import { BackToTop } from './BackToTop';
-import { render, screen, userEvent } from '../../test/renderers';
-
-describe('BackToTop component', () => {
-  const originalScrollTo = window.scrollTo;
-
-  beforeEach(() => {
-    Object.defineProperty(window, 'scrollTo', {
-      value: vi.fn(),
-      writable: true,
-    });
-
-    // Simulate scrollY (more modern than pageYOffset)
-    Object.defineProperty(window, 'pageYOffset', {
-      get: () => 700,
-      configurable: true,
-    });
-
-    Object.defineProperty(window, 'scrollY', {
-      get: () => 700,
-      configurable: true,
-    });
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-    window.scrollTo = originalScrollTo;
-  });
-
-  it('renders correctly when scrolled down', async () => {
-    render(<BackToTop />);
-
-    // Trigger the scroll event manually to call toggleVisibility
-    window.dispatchEvent(new Event('scroll'));
-
-    // Wait for the component to update
-    const button = await screen.findByRole('button', { name: /back to top/i });
-
-    expect(button).toBeInTheDocument();
-  });
-
-  it('clickable and triggers scrollToTop', async () => {
-    const user = userEvent.setup();
-
-    render(<BackToTop />);
-
-    // Trigger the scroll event manually to call toggleVisibility
-    window.dispatchEvent(new Event('scroll'));
-
-    // Wait for the component to update and find the button
-    const button = await screen.findByRole('button', { name: /back to top/i });
-
-    await user.click(button);
-
-    expect(window.scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
-  });
-});

package/src/components/backToTop/BackToTop.tsx

@@ -1,134 +0,0 @@
-'use client';
-
-import { type KeyboardEvent, useCallback, useEffect, useState } from 'react';
-
-import { LuArrowUp } from 'react-icons/lu';
-
-import type { ExtendProps } from '../../types';
-import { cn, KeyboardKeys } from '../../utils';
-
-type Props = {
-  /** Scroll threshold in pixels before button appears */
-  threshold?: number;
-  /** Position from bottom in pixels */
-  bottom?: number;
-  /** Position from left in pixels */
-  left?: number;
-  /** Explicitly disallow children as we hard-code the button content */
-  children?: never;
-};
-
-export type BackToTopProps = ExtendProps<'button', Props>;
-
-export const BackToTop = ({
-  threshold = 600,
-  bottom = 16,
-  left = 8,
-  className,
-  ...props
-}: BackToTopProps) => {
-  const [isVisible, setIsVisible] = useState(false);
-
-  // Throttle scroll events for better performance
-  const throttle = useCallback((func: () => void, delay: number) => {
-    let timeoutId: number | null = null;
-    let lastExecTime = 0;
-
-    return () => {
-      const currentTime = Date.now();
-
-      if (currentTime - lastExecTime > delay) {
-        func();
-        lastExecTime = currentTime;
-      } else {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-
-        timeoutId = window.setTimeout(
-          () => {
-            func();
-            lastExecTime = Date.now();
-          },
-          delay - (currentTime - lastExecTime),
-        );
-      }
-    };
-  }, []);
-
-  // Show button when page is scrolled down
-  const toggleVisibility = useCallback(() => {
-    if (typeof window !== 'undefined') {
-      setIsVisible(window.pageYOffset > threshold);
-    }
-  }, [threshold]);
-
-  // Scroll to top smoothly
-  const scrollToTop = useCallback(() => {
-    if (typeof window !== 'undefined') {
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
-    }
-  }, []);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const throttledToggleVisibility = throttle(toggleVisibility, 100);
-
-    // Check initial scroll position
-    toggleVisibility();
-
-    window.addEventListener('scroll', throttledToggleVisibility, { passive: true });
-
-    return () => {
-      window.removeEventListener('scroll', throttledToggleVisibility);
-    };
-  }, [toggleVisibility, throttle]);
-
-  // Handle keyboard interaction
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLButtonElement>) => {
-      if (event.key === KeyboardKeys.Enter || event.key === KeyboardKeys.Space) {
-        event.preventDefault();
-        scrollToTop();
-      }
-    },
-    [scrollToTop],
-  );
-
-  if (!isVisible) {
-    return <></>;
-  }
-
-  return (
-    <button
-      type="button"
-      className={cn(
-        `fixed z-50 inline-flex items-center gap-1 bg-white text-link border border-gray-300
-        rounded-md px-3 py-2 shadow-lg hover:bg-gray-50 focus:outline-none focus:ring-2
-        focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 ease-in-out`,
-        className,
-      )}
-      style={{
-        bottom: `${bottom}px`,
-        left: `${left}px`,
-      }}
-      onClick={scrollToTop}
-      onKeyDown={handleKeyDown}
-      aria-label="Scroll back to top of page"
-      title="Back to top"
-      {...props}
-    >
-      <LuArrowUp size={20} aria-hidden="true" />
-
-      <span className="hidden sm:inline">Back to top</span>
-
-      <span className="sr-only sm:hidden">Back to top</span>
-    </button>
-  );
-};

package/src/components/chip/Chip.stories.tsx

@@ -1,61 +0,0 @@
-import { AiFillChrome } from 'react-icons/ai';
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Chip } from './Chip';
-import { Paragraph } from '../Paragraph/Paragraph';
-
-const meta: Meta<typeof Chip> = {
-  title: 'Components/Chip',
-  component: Chip,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      description: 'Content of the chip',
-      control: false,
-    },
-    className: {
-      description: 'Additional TailwindCSS classes to apply',
-      control: 'text',
-    },
-  },
-  args: {
-    children: 'Hello, this is some simple Chip',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Chip>;
-
-export const Default: Story = {};
-
-export const ParagraphOfText: Story = {
-  args: {
-    children: <Paragraph className="pb-0">Hello, this is a paragraph of text</Paragraph>,
-  },
-};
-
-export const TextWithIcon: Story = {
-  args: {
-    children: (
-      <div className="flex items-center justify-center gap-2">
-        <AiFillChrome className="text-base" />
-
-        <Paragraph className="pb-0">
-          Hello, this is a Chip container with a paragraph of text
-        </Paragraph>
-      </div>
-    ),
-  },
-};
-
-export const CustomStyling: Story = {
-  args: {
-    className: 'bg-blue-100 text-blue-800 px-4 py-2 rounded-full',
-    children: 'Custom styled chip',
-  },
-};

package/src/components/chip/Chip.test.tsx

@@ -1,31 +0,0 @@
-import { Chip } from './Chip';
-import { render, screen } from '../../test/renderers';
-
-describe('Chip component', () => {
-  it('should render children correctly', () => {
-    render(
-      <Chip>
-        <p>Hello, World!</p>
-      </Chip>,
-    );
-
-    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
-  });
-
-  it('should merge custom className correctly', () => {
-    render(<Chip className="bg-red-500 rounded-lg">Custom</Chip>);
-    const element = screen.getByText('Custom');
-
-    expect(element).toHaveClass('bg-red-500');
-    expect(element).toHaveClass('rounded-lg');
-  });
-
-  it('should override conflicting className using twMerge', () => {
-    render(<Chip className="px-2">Custom</Chip>);
-    const element = screen.getByText('Custom');
-
-    // Should NOT have original 'pt-[12px]' due to twMerge override
-    expect(element?.className).not.toMatch(/px-3/);
-    expect(element).toHaveClass('px-2');
-  });
-});

package/src/components/chip/Chip.tsx

@@ -1,23 +0,0 @@
-import type { ExtendProps } from '../../types';
-import { cn } from '../../utils';
-
-type Props = {
-  children: React.ReactNode;
-};
-
-export type ChipProps = ExtendProps<'span', Props>;
-
-export const Chip = ({ className, children, ...props }: ChipProps) => {
-  return (
-    <span
-      className={cn(
-        `inline-flex items-center rounded-lg bg-gray-200 px-3 py-1 text-sm font-medium
-        text-gray-800`,
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </span>
-  );
-};

package/src/components/container/Container.tsx

@@ -1,42 +0,0 @@
-import type { ReactNode } from 'react';
-
-import type { ExtendProps } from '../../types';
-import { cn } from '../../utils';
-
-type Props = {
-  children: ReactNode;
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
-  centerContent?: boolean;
-};
-
-export type ContainerProps = ExtendProps<'div', Props>;
-
-const containerSizes = {
-  sm: 'max-w-3xl',
-  md: 'max-w-5xl',
-  lg: 'max-w-7xl',
-  xl: 'max-w-screen-2xl',
-  full: 'max-w-none',
-};
-
-export const Container = ({
-  children,
-  className,
-  size = 'lg',
-  centerContent = false,
-  ...props
-}: ContainerProps) => {
-  return (
-    <div
-      className={cn(
-        'mx-auto px-4 sm:px-6 lg:px-8',
-        containerSizes[size],
-        centerContent && 'flex items-center justify-center min-h-screen',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};

package/src/components/cookieBanner/CookieBanner.stories.tsx

@@ -1,257 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { CookieBanner } from './CookieBanner';
-
-const meta = {
-  title: 'Components/CookieBanner',
-  component: CookieBanner,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Cookie banner component for displaying cookie consent options.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof CookieBanner>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default cookie banner (hidden by default with inline style).',
-      },
-    },
-  },
-};
-
-export const Visible: Story = {
-  render: () => (
-    <div>
-      <style>
-        {`
-          #cookie-banner {
-            display: block !important;
-          }
-        `}
-      </style>
-
-      <CookieBanner />
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Cookie banner with visibility forced on for demonstration purposes.',
-      },
-    },
-  },
-};
-
-export const VisibleWithBackground: Story = {
-  render: () => (
-    <div className="min-h-screen bg-gray-100">
-      <CookieBanner />
-
-      <div className="p-8">
-        <h1 className="text-2xl font-bold mb-4">Sample Page Content</h1>
-
-        <p className="mb-4">
-          This demonstrates how the cookie banner would appear on a real page. The banner is
-          positioned at the bottom of the screen.
-        </p>
-
-        <p className="mb-4">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua.
-        </p>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Cookie banner shown in context with page content, positioned at the bottom of the screen.',
-      },
-    },
-  },
-};
-
-export const InteractiveDemo: Story = {
-  render: () => {
-    const handleAcceptAll = () => {
-      alert('All cookies accepted!');
-      // In a real implementation, this would hide the banner
-      const banner = document.getElementById('cookie-banner');
-
-      if (banner) {
-        banner.style.display = 'none';
-      }
-    };
-
-    const handleRejectAdditional = () => {
-      alert('Additional cookies rejected!');
-      // In a real implementation, this would hide the banner
-      const banner = document.getElementById('cookie-banner');
-
-      if (banner) {
-        banner.style.display = 'none';
-      }
-    };
-
-    return (
-      <div className="min-h-screen bg-gray-50">
-        <style>
-          {`
-            #cookie-banner {
-              display: block !important;
-              background-color: white;
-              border-top: 2px solid #1f2937;
-              position: fixed;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              z-index: 1000;
-              box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
-            }
-          `}
-        </style>
-
-        <div className="p-8">
-          <h1 className="text-3xl font-bold mb-6">Interactive Cookie Banner Demo</h1>
-
-          <p className="mb-4 text-lg">
-            Click either button on the cookie banner below to see the interaction.
-          </p>
-
-          <p className="mb-4">
-            This story demonstrates the banner in a more realistic context with interactive
-            behavior.
-          </p>
-
-          <div className="space-y-4">
-            <p>Sample page content continues here...</p>
-
-            <p>More content to show page scrolling behavior...</p>
-
-            <p>The cookie banner remains fixed at the bottom.</p>
-          </div>
-        </div>
-
-        <div id="cookie-banner" role="region" aria-label="cookie banner">
-          <div className="mx-auto max-w-[960px] p-[1rem]">
-            <h3 className="mb-4 text-base font-bold text-govukBlack">
-              Tell us whether you accept cookies
-            </h3>
-
-            <p className="mb-4 text-sm text-black">
-              We use essential cookies to give you the best online experience. Without them, this
-              service will not work.
-            </p>
-
-            <p className="mb-4 text-sm text-black">
-              We also use non-essential cookies to analyze site usage to continually improve the
-              services we provide you with.
-            </p>
-
-            <p className="mb-4 text-sm text-black">
-              Full details of cookies collected, and the functionality to change your cookie
-              preference at any time can be accessed on our{' '}
-              <a
-                href="https://environment.data.gov.uk/help/cookies"
-                className="text-blue-600 underline hover:text-blue-800"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Cookie Policy Page
-              </a>
-              .
-            </p>
-
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-[1fr_1fr_1fr]">
-              <div>
-                <button
-                  className="focus:outline-3 relative box-border inline-block w-full cursor-pointer
-                    appearance-none rounded-none border-2 border-transparent bg-green-500 px-[10px]
-                    py-[7px] text-center align-top text-base font-normal leading-[19px] text-white
-                    antialiased shadow-[0_2px_0_#002413] focus:bg-green-600 hover:bg-green-600
-                    focus:outline focus:outline-offset-0 focus:outline-yellow-500"
-                  id="accept-all-cookies"
-                  type="button"
-                  onClick={handleAcceptAll}
-                >
-                  Accept all cookies
-                </button>
-              </div>
-
-              <div>
-                <button
-                  className="focus:outline-3 relative box-border inline-block w-full cursor-pointer
-                    appearance-none rounded-none border-2 border-transparent bg-green-500 px-[10px]
-                    py-[7px] text-center align-top text-base font-normal leading-[19px] text-white
-                    antialiased shadow-[0_2px_0_#002413] focus:bg-green-600 hover:bg-green-600
-                    focus:outline focus:outline-offset-0 focus:outline-yellow-500"
-                  onClick={handleRejectAdditional}
-                >
-                  Reject additional cookies
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Interactive version with working buttons that demonstrate the expected behavior.',
-      },
-    },
-  },
-};
-
-export const MobileView: Story = {
-  render: () => (
-    <div className="max-w-sm mx-auto bg-gray-100 min-h-screen">
-      <style>
-        {`
-          #cookie-banner {
-            display: block !important;
-            background-color: white;
-            border-top: 1px solid #ccc;
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            z-index: 1000;
-          }
-        `}
-      </style>
-
-      <div className="p-4">
-        <h1 className="text-xl font-bold mb-4">Mobile View</h1>
-
-        <p className="mb-4 text-sm">This shows how the cookie banner appears on mobile devices.</p>
-      </div>
-
-      <CookieBanner />
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Cookie banner optimized for mobile viewport to test responsive behavior.',
-      },
-    },
-    viewport: {
-      defaultViewport: 'mobile1',
-    },
-  },
-};

package/src/components/cookieBanner/CookieBanner.test.tsx

@@ -1,68 +0,0 @@
-import { CookieBanner } from './CookieBanner';
-import { render, screen, userEvent } from '../../test/renderers';
-
-const handlePush = vi.fn();
-
-vi.mock('next/navigation', () => ({
-  useRouter: () => ({
-    push: handlePush,
-  }),
-}));
-
-describe('CookieBanner', () => {
-  it('should render cookie banner content', () => {
-    render(<CookieBanner />);
-
-    expect(
-      screen.getByRole('heading', {
-        name: /tell us whether you accept cookies/i,
-        hidden: true,
-      }),
-    ).toBeInTheDocument();
-
-    expect(
-      screen.getByText(/we use essential cookies to give you the best online experience/i),
-    ).toBeInTheDocument();
-
-    expect(
-      screen.getByText(/we also use non-essential cookies to analyze site usage/i),
-    ).toBeInTheDocument();
-
-    expect(
-      screen.getByText(
-        /full details of cookies collected, and the functionality to change your cookie preference/i,
-      ),
-    ).toBeInTheDocument();
-
-    expect(screen.getByRole('link', { name: /cookie policy page/i, hidden: true })).toHaveAttribute(
-      'href',
-      'https://environment.data.gov.uk/help/cookies',
-    );
-
-    expect(
-      screen.getByRole('button', { name: /accept all cookies/i, hidden: true }),
-    ).toBeInTheDocument();
-
-    expect(
-      screen.getByRole('button', {
-        name: /reject additional cookies/i,
-        hidden: true,
-      }),
-    ).toBeInTheDocument();
-  });
-
-  it('should navigate to cookie preference page on "Reject additional cookies" click', async () => {
-    const user = userEvent.setup();
-
-    render(<CookieBanner />);
-
-    await user.click(
-      screen.getByRole('button', {
-        name: /reject additional cookies/i,
-        hidden: true,
-      }),
-    );
-
-    expect(handlePush).toHaveBeenCalled();
-  });
-});