@tpzdsp/next-toolkit 1.2.9 → 1.4.0

package/src/components/form/TextArea.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { twMerge } from 'tailwind-merge';
+
+import type { ExtendProps } from '../../types/utils';
+
+type Props = {
+  hasError?: boolean;
+};
+
+export type TextAreaProps = ExtendProps<'textarea', Props>;
+
+export const TextArea = ({ hasError, className, ...props }: TextAreaProps) => {
+  return (
+    <textarea
+      {...props}
+      className={twMerge(
+        'rounded-md border p-1 disabled:opacity-60 disabled:bg-gray-100',
+        hasError ? 'border-error' : '',
+        className,
+      )}
+    />
+  );
+};

package/src/components/googleAnalytics/GlobalVars.tsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+
+import Script from 'next/script';
+
+type GlobalVarsProps = {
+  analyticsId: string;
+};
+
+const GlobalVarsComponent = ({ analyticsId }: GlobalVarsProps) => {
+  console.log(`Global Vars: ${analyticsId}`); // Debugging line to check the ID
+
+  return (
+    <>
+      {/*
+        Set global variables on the window object.
+        Any further global variables can be added after these.
+       */}
+      <Script
+        id="global-vars"
+        dangerouslySetInnerHTML={{
+          __html: `
+          window.swirrl = window.swirrl ?? {};
+          window.swirrl.gtagUACode = "${analyticsId}";
+        `,
+        }}
+      />
+    </>
+  );
+};
+
+export const GlobalVars = memo(GlobalVarsComponent);

package/src/components/googleAnalytics/GoogleAnalytics.tsx

@@ -0,0 +1,15 @@
+import { memo } from 'react';
+
+import Script from 'next/script';
+
+type GoogleAnalyticsProps = {
+  analyticsId: string;
+};
+
+const GoogleAnalyticsComponent = ({ analyticsId }: GoogleAnalyticsProps) => {
+  console.log(`Google Analytics ID: ${analyticsId}`); // Debugging line to check the ID
+
+  return <Script src={`https://www.googletagmanager.com/gtag/js?id=${analyticsId}`} />;
+};
+
+export const GoogleAnalytics = memo(GoogleAnalyticsComponent);

package/src/components/index.ts

@@ -1,8 +1,13 @@
 // Default components - these can be used in server or client-side rendering
+export { BackToTop } from './backToTop/BackToTop';
 export { Button } from './Button/Button';
 export { Card } from './Card/Card';
+export { Chip } from './chip/Chip';
+export { CookieBanner } from './cookieBanner/CookieBanner';
 export { Container } from './container/Container';
 export { ErrorText } from './ErrorText/ErrorText';
+export { GlobalVars } from './googleAnalytics/GlobalVars';
+export { GoogleAnalytics } from './googleAnalytics/GoogleAnalytics';
 export { Heading } from './Heading/Heading';
 export { Hint } from './Hint/Hint';
 export { DefraLogo } from './images/DefraLogo';
@@ -12,10 +17,15 @@ export { ExternalLink } from './link/ExternalLink';
 export { Link } from './link/Link';
 export { Paragraph } from './Paragraph/Paragraph';
 export { RuleDivider } from './divider/RuleDivider';
+export { SkipLink } from './skipLink/SkipLink';
+export { Input } from './form/Input';
+export { TextArea } from './form/TextArea';
 
 // Export default component types
+export type { BackToTopProps } from './backToTop/BackToTop';
 export type { ButtonProps } from './Button/Button';
 export type { CardProps } from './Card/Card';
+export type { ChipProps } from './chip/Chip';
 export type { ContainerProps } from './container/Container';
 export type { ErrorTextProps } from './ErrorText/ErrorText';
 export type { HeadingProps } from './Heading/Heading';
@@ -24,6 +34,9 @@ export type { ExternalLinkProps } from './link/ExternalLink';
 export type { LinkProps } from './link/Link';
 export type { ParagraphProps } from './Paragraph/Paragraph';
 export type { SlidingPanelProps } from './SlidingPanel/SlidingPanel';
+export type { SkipLinkProps } from './skipLink/SkipLink';
+export type { InputProps } from './form/Input';
+export type { TextAreaProps } from './form/TextArea';
 
 // Client components - these require 'use client' directive
 export { DropdownMenu } from './dropdown/DropdownMenu';
@@ -31,6 +44,8 @@ export { useDropdownMenu } from './dropdown/useDropdownMenu';
 export { SlidingPanel } from './SlidingPanel/SlidingPanel';
 export { Accordion } from './accordion/Accordion';
 export { Modal } from './Modal/Modal';
+export { ErrorBoundary } from './ErrorBoundary/ErrorBoundary';
+export { ErrorFallback } from './ErrorBoundary/ErrorFallback';
 // NOTE: Select components moved to separate entry point '@tpzdsp/next-toolkit/components/select'
 // export { Select } from './select/Select';
 // export { SelectSkeleton } from './select/SelectSkeleton';

package/src/components/skipLink/SkipLink.stories.tsx

@@ -0,0 +1,346 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SkipLink } from './SkipLink';
+
+const meta = {
+  title: 'Components/SkipLink',
+  component: SkipLink,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A skip link component that allows users to jump to the main content, improving accessibility for keyboard and screen reader users.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    mainContentId: {
+      control: 'text',
+      description: 'The ID of the main content element to skip to',
+      defaultValue: 'main-content',
+    },
+  },
+} satisfies Meta<typeof SkipLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default skip link with the standard main content ID.',
+      },
+    },
+  },
+};
+
+export const CustomTarget: Story = {
+  args: {
+    mainContentId: 'custom-main',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Skip link with a custom target ID.',
+      },
+    },
+  },
+};
+
+export const WithMainContent: Story = {
+  render: (args) => (
+    <div className="min-h-screen">
+      <SkipLink {...args} />
+
+      <header className="bg-blue-600 text-white p-4">
+        <nav>
+          <ul className="flex space-x-4">
+            <li>
+              <a href="#" className="hover:underline">
+                Home
+              </a>
+            </li>
+
+            <li>
+              <a href="#" className="hover:underline">
+                About
+              </a>
+            </li>
+
+            <li>
+              <a href="#" className="hover:underline">
+                Services
+              </a>
+            </li>
+
+            <li>
+              <a href="#" className="hover:underline">
+                Contact
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </header>
+
+      <main id="main-content" className="p-8">
+        <h1 className="text-3xl font-bold mb-6">Main Content</h1>
+
+        <p className="mb-4">
+          This is the main content area. Use Tab key to navigate to the skip link at the top, then
+          press Enter to jump directly here.
+        </p>
+
+        <p className="mb-4">
+          The skip link is invisible by default but becomes visible when focused, providing an
+          accessible way for keyboard users to bypass navigation.
+        </p>
+
+        <div className="space-y-4">
+          <p>Sample content paragraph 1.</p>
+
+          <p>Sample content paragraph 2.</p>
+
+          <p>Sample content paragraph 3.</p>
+        </div>
+      </main>
+
+      <footer className="bg-gray-800 text-white p-4 mt-8">
+        <p>&copy; 2024 Example Site. All rights reserved.</p>
+      </footer>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Complete page layout showing how the skip link works in context. Use Tab to focus the skip link, then Enter to jump to main content.',
+      },
+    },
+  },
+};
+
+export const CustomTargetWithContent: Story = {
+  args: {
+    mainContentId: 'article-content',
+  },
+  render: (args) => (
+    <div className="min-h-screen">
+      <SkipLink {...args} />
+
+      <header className="bg-green-600 text-white p-4">
+        <h1 className="text-xl font-bold">Site Header</h1>
+      </header>
+
+      <nav className="bg-gray-200 p-4">
+        <ul className="flex space-x-4">
+          <li>
+            <a href="#" className="text-blue-600 hover:underline">
+              Navigation Link 1
+            </a>
+          </li>
+
+          <li>
+            <a href="#" className="text-blue-600 hover:underline">
+              Navigation Link 2
+            </a>
+          </li>
+
+          <li>
+            <a href="#" className="text-blue-600 hover:underline">
+              Navigation Link 3
+            </a>
+          </li>
+        </ul>
+      </nav>
+
+      <aside className="bg-yellow-100 p-4">
+        <h2 className="font-bold mb-2">Sidebar</h2>
+
+        <p>Some sidebar content that users might want to skip.</p>
+      </aside>
+
+      <article id="article-content" className="p-8 bg-white">
+        <h1 className="text-3xl font-bold mb-6">Article Title</h1>
+
+        <p className="mb-4">
+          This skip link targets a custom ID &quot;article-content&quot; instead of the default
+          &quot;main-content&quot;.
+        </p>
+
+        <p className="mb-4">
+          This demonstrates how the component can be configured for different page layouts and
+          content structures.
+        </p>
+      </article>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Skip link with custom target ID, demonstrating flexibility for different page structures.',
+      },
+    },
+  },
+};
+
+export const FocusedState: Story = {
+  args: {
+    mainContentId: 'article-content-focused',
+  },
+  render: (args) => (
+    <div className="min-h-screen relative">
+      <style>
+        {`
+          .skip-link {
+            position: relative !important;
+            top: 0 !important;
+            display: block !important;
+          }
+        `}
+      </style>
+
+      <SkipLink {...args} />
+
+      <div className="p-8">
+        <h1 className="text-2xl font-bold mb-4">Skip Link in Focused State</h1>
+
+        <p className="mb-4">
+          This story shows how the skip link appears when focused. Normally it&apos;s hidden
+          off-screen until a user tabs to it.
+        </p>
+
+        <main id="main-content-focused" className="mt-8 p-4 border-2 border-dashed border-gray-400">
+          <h2 className="text-xl font-bold mb-2">Main Content Target</h2>
+
+          <p>This is where users will land when they activate the skip link.</p>
+        </main>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows the visual appearance of the skip link when focused (normally hidden off-screen).',
+      },
+    },
+  },
+};
+
+export const AccessibilityTest: Story = {
+  args: {
+    mainContentId: 'article-content-accessibility',
+  },
+  render: (args) => (
+    <div className="min-h-screen">
+      <SkipLink {...args} />
+
+      <div className="p-8">
+        <h1 className="text-2xl font-bold mb-6">Accessibility Testing</h1>
+
+        <div className="bg-blue-50 border border-blue-200 rounded p-4 mb-6">
+          <h2 className="font-bold text-blue-800 mb-2">Testing Instructions:</h2>
+
+          <ol className="list-decimal list-inside space-y-1 text-blue-700">
+            <li>Use Tab key to navigate to the skip link (it will appear at the top)</li>
+
+            <li>Press Enter or Space to activate the skip link</li>
+
+            <li>Verify that focus moves to the main content below</li>
+
+            <li>Test with screen reader for proper announcement</li>
+          </ol>
+        </div>
+
+        <nav className="mb-8">
+          <h2 className="text-lg font-semibold mb-3">Navigation Menu</h2>
+
+          <ul className="space-y-2">
+            <li>
+              <a
+                href="#"
+                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
+              >
+                Link 1
+              </a>
+            </li>
+
+            <li>
+              <a
+                href="#"
+                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
+              >
+                Link 2
+              </a>
+            </li>
+
+            <li>
+              <a
+                href="#"
+                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
+              >
+                Link 3
+              </a>
+            </li>
+
+            <li>
+              <a
+                href="#"
+                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
+              >
+                Link 4
+              </a>
+            </li>
+
+            <li>
+              <a
+                href="#"
+                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
+              >
+                Link 5
+              </a>
+            </li>
+          </ul>
+        </nav>
+
+        <main
+          id="main-content-accessibility"
+          className="p-6 bg-green-50 border border-green-200 rounded"
+        >
+          <h2 className="text-xl font-bold mb-4 text-green-800">Main Content Area</h2>
+
+          <p className="mb-4">
+            If the skip link worked correctly, focus should now be on this main content area,
+            bypassing all the navigation links above.
+          </p>
+
+          <p className="mb-4">
+            This is particularly important for users who rely on keyboard navigation or screen
+            readers, as it saves them from having to tab through all navigation elements on every
+            page.
+          </p>
+
+          <button
+            className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 focus:outline-2
+              focus:outline-green-500"
+          >
+            Interactive Element
+          </button>
+        </main>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete accessibility testing scenario with instructions for manual testing.',
+      },
+    },
+  },
+};

package/src/components/skipLink/SkipLink.test.tsx

@@ -0,0 +1,22 @@
+import { SkipLink } from './SkipLink';
+import { render, screen, userEvent } from '../../test/renderers';
+
+describe('SkipLink Component', () => {
+  it('should render correctly', () => {
+    render(<SkipLink />);
+
+    expect(screen.getByRole('link', { name: /skip to main content/i })).toBeInTheDocument();
+  });
+
+  it('should be focusable', async () => {
+    render(<SkipLink />);
+
+    const user = userEvent.setup();
+
+    await user.tab();
+
+    const link = screen.getByRole('link', { name: /skip to main content/i });
+
+    expect(link).toHaveFocus();
+  });
+});

package/src/components/skipLink/SkipLink.tsx

@@ -0,0 +1,19 @@
+import { Link } from '../link/Link';
+
+export type SkipLinkProps = {
+  mainContentId?: string;
+};
+
+export const SkipLink = ({ mainContentId = 'main-content' }: SkipLinkProps) => {
+  return (
+    <nav aria-label="Skip navigation">
+      <Link
+        className="bg-focus focus:relative focus:top-0 w-full absolute -top-full text-black
+          visited:text-black hover:text-black p-3 skip-link"
+        href={`#${mainContentId}`}
+      >
+        Skip to main content
+      </Link>
+    </nav>
+  );
+};

package/src/errors/ApiError.ts

@@ -0,0 +1,71 @@
+/* eslint-disable no-restricted-syntax */
+
+import { Http } from '../utils/http';
+
+export class ApiError extends Error {
+  public readonly status: number;
+  public readonly code?: string;
+  public readonly details?: unknown;
+
+  constructor(message: string, status: number, code?: string, details?: unknown) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+    this.code = code;
+    this.details = details;
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, ApiError);
+    }
+  }
+
+  // Helper method to check if it's a client error (4xx)
+  get isClientError(): boolean {
+    return this.status >= Http.BadRequest && this.status < Http.InternalServerError;
+  }
+
+  // Helper method to check if it's a server error (5xx)
+  get isServerError(): boolean {
+    return this.status >= Http.InternalServerError;
+  }
+
+  // Convert to a plain object for JSON serialization
+  toJSON() {
+    return {
+      name: this.name,
+      message: this.message,
+      status: this.status,
+      code: this.code,
+      details: this.details,
+    };
+  }
+
+  // Static factory methods for common error types
+  static badRequest(message: string, details?: unknown): ApiError {
+    return new ApiError(message, Http.BadRequest, 'BAD_REQUEST', details);
+  }
+
+  static notFound(message = 'Resource not found'): ApiError {
+    return new ApiError(message, Http.NotFound, 'NOT_FOUND');
+  }
+
+  static unauthorized(message = 'Unauthorized'): ApiError {
+    return new ApiError(message, Http.Unauthorized, 'UNAUTHORIZED');
+  }
+
+  static forbidden(message = 'Forbidden'): ApiError {
+    return new ApiError(message, Http.Forbidden, 'FORBIDDEN');
+  }
+
+  static internalServerError(message = 'Internal server error'): ApiError {
+    return new ApiError(message, Http.InternalServerError, 'INTERNAL_SERVER_ERROR');
+  }
+
+  static fromResponse(response: Response, message?: string): ApiError {
+    return new ApiError(
+      message ?? `HTTP ${response.status}: ${response.statusText}`,
+      response.status,
+    );
+  }
+}

package/src/errors/index.ts

@@ -0,0 +1 @@
+export * from './ApiError';

package/src/utils/utils.ts

@@ -65,3 +65,6 @@ export const formatBytes = (bytes: number, decimals = 2): string => {
 
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 };
+
+// eslint-disable-next-line  @typescript-eslint/no-empty-function
+export const identityFn = () => {};