@tpzdsp/next-toolkit 1.14.0 → 1.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.14.0",
+  "version": "1.14.2",
   "description": "A reusable React component library for Next.js applications",
   "engines": {
     "node": ">= 24.12.0",
@@ -138,7 +138,7 @@
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@tpzdsp/eslint-config-dsp": "^1.9.2",
+    "@tpzdsp/eslint-config-dsp": "^2.0.0",
     "@turf/turf": "^7.2.0",
     "@types/geojson": "^7946.0.16",
     "@types/jsonwebtoken": "^9.0.10",
@@ -158,7 +158,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-import-x": "^4.16.1",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.5",

package/src/components/Button/Button.test.tsx

@@ -1,5 +1,3 @@
-import { describe, expect, it } from 'vitest';
-
 import { Button } from './Button';
 import { render, screen } from '../../test/renderers';
 

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

@@ -1,5 +1,3 @@
-import { describe, expect, it } from 'vitest';
-
 import { ErrorText } from './ErrorText';
 import { render, screen } from '../../test/renderers';
 

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

@@ -1,5 +1,3 @@
-import { describe, expect, it } from 'vitest';
-
 import { Heading, type HeadingProps } from './Heading';
 import { render, screen } from '../../test/renderers';
 

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

@@ -1,5 +1,3 @@
-import { describe, expect, it } from 'vitest';
-
 import { Hint } from './Hint';
 import { render, screen } from '../../test/renderers';
 

package/src/components/Modal/Modal.stories.tsx

@@ -34,7 +34,6 @@ const meta: Meta<typeof Modal> = {
     },
   },
   decorators: [
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     (Story, context) => {
       const [{ isOpen }, updateArgs] = useArgs();
 

package/src/components/Modal/Modal.test.tsx

@@ -1,5 +1,3 @@
-import { describe, expect, it, vi } from 'vitest';
-
 import { Modal } from './Modal';
 import { render, screen, userEvent } from '../../test/renderers';
 
@@ -25,7 +23,7 @@ describe.todo('Modal', () => {
     const modalRoot = document.getElementById(MODAL_ROOT_ID);
 
     if (modalRoot) {
-      document.body.removeChild(modalRoot);
+      modalRoot.remove();
     }
   });
 

package/src/components/NotificationBanner/NotificationBanner.test.tsx

@@ -1,5 +1,3 @@
-import { describe, expect, it } from 'vitest';
-
 import { NotificationBanner } from './NotificationBanner';
 import { render, screen } from '../../test/renderers';
 

package/src/components/Paragraph/Paragraph.test.tsx

@@ -1,5 +1,3 @@
-import { describe, expect, it } from 'vitest';
-
 import { Paragraph } from './Paragraph';
 import { render, screen } from '../../test/renderers';
 

package/src/components/SlidingPanel/SlidingPanel.test.tsx

@@ -1,5 +1,3 @@
-import { describe, it, expect } from 'vitest';
-
 import { SlidingPanel } from './SlidingPanel';
 import { act, render, screen, userEvent, waitFor } from '../../test/renderers';
 

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

@@ -1,5 +1,3 @@
-import { describe, expect, it } from 'vitest';
-
 import { Accordion } from './Accordion';
 import { render, screen, userEvent } from '../../test/renderers';
 

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

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { BackToTop } from './BackToTop';

package/src/components/dropdown/DropdownMenu.test.tsx

@@ -1,5 +1,3 @@
-import { describe, expect, it } from 'vitest';
-
 import { DropdownMenu, type DropdownMenuItem, type DrowndownMenuButton } from './DropdownMenu';
 import { render, screen, userEvent, waitFor } from '../../test/renderers';
 

package/src/components/dropdown/useDropdownMenu.ts

@@ -190,7 +190,6 @@ export const useDropdownMenu = (itemCount: number): DropdownMenuHook => {
       },
     },
 
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     itemProps: Array.from({ length: itemCount }, (_, itemIndex) => ({
       key: itemIndex,
 

package/src/components/form/TextArea.test.tsx

@@ -1,5 +1,3 @@
-import { describe, expect, it } from 'vitest';
-
 import { render, screen } from '@testing-library/react';
 
 import { TextArea } from './TextArea';

package/src/components/images/DefraLogo.tsx

@@ -4,7 +4,7 @@ export const DefraLogo = ({ className, ...props }: DefraLogoProps) => (
   <svg
     viewBox="0 0 125 102"
     xmlns="http://www.w3.org/2000/svg"
-    fill="white"
+    fill="currentColor"
     focusable="false"
     className={className}
     {...props}

package/src/components/layout/header/Header.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Header } from './Header';
+import type { Credentials } from '../../../types/auth';
+import type { NavLink } from '../../../types/navigation';
+
+const navLinks: NavLink[] = [
+  { label: 'Home', url: '/', isExternal: false },
+  { label: 'API', url: '/api-docs', isExternal: false },
+  { label: 'Support', url: 'https://example.com/support', isExternal: true },
+];
+
+const authenticatedCredentials: Credentials = {
+  token: 'mock-token',
+  user: {
+    name: 'Jamie Taylor',
+    email: 'jamie.taylor@example.com',
+    groupInfoIds: ['group-1', 'group-2'],
+  },
+};
+
+export default {
+  title: 'Components/Layout/Header',
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Header with DSP branding, navigation, and auth state. Includes responsive nav and client-side auth links.',
+      },
+    },
+  },
+  args: {
+    dspUrl: 'https://environment.data.gov.uk',
+    appName: 'Wetlands Inventory',
+    navLinks,
+    credentials: null,
+  },
+} as Meta<typeof Header>;
+
+export const Default: StoryObj<typeof Header> = {};
+
+export const Authenticated: StoryObj<typeof Header> = {
+  args: {
+    credentials: authenticatedCredentials,
+  },
+};

package/src/components/layout/header/Header.test.tsx

@@ -0,0 +1,36 @@
+import { Header } from './Header';
+import { render, screen } from '../../../test/renderers';
+import type { NavLink } from '../../../types/navigation';
+
+const NAV_LINKS: NavLink[] = [
+  { label: 'Home', url: '/', isExternal: false },
+  { label: 'API', url: '/api-docs', isExternal: false },
+  { label: 'Support', url: 'https://example.com/support', isExternal: true },
+];
+
+describe('Header', () => {
+  it('renders the primary brand links and app name', async () => {
+    render(
+      <Header
+        credentials={null}
+        dspUrl="https://example.com"
+        appName="Wetlands Inventory"
+        navLinks={NAV_LINKS}
+      />,
+    );
+
+    expect(
+      screen.getByRole('link', {
+        name: /department for environment food & rural affairs/i,
+      }),
+    ).toBeInTheDocument();
+
+    expect(screen.getByRole('link', { name: /data services platform/i })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /wetlands inventory/i })).toBeInTheDocument();
+
+    const loginLink = await screen.findByRole('link', { name: /login/i });
+
+    expect(loginLink).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /open menu/i })).toBeInTheDocument();
+  });
+});

package/src/components/layout/header/HeaderAuthClient.test.tsx

@@ -0,0 +1,45 @@
+import { HeaderAuthClient } from './HeaderAuthClient';
+import { render, screen } from '../../../test/renderers';
+import type { Credentials } from '../../../types/auth';
+
+const AUTH_CREDENTIALS: Credentials = {
+  token: 'token-123',
+  user: {
+    name: 'Jamie Taylor',
+    email: 'jamie.taylor@example.com',
+    groupInfoIds: ['group-1'],
+  },
+};
+
+describe('HeaderAuthClient', () => {
+  beforeEach(() => {
+    globalThis.history.pushState({}, '', '/header-test');
+  });
+
+  it('renders guest state with login link', async () => {
+    render(<HeaderAuthClient hostname="https://example.com" credentials={null} />);
+
+    expect(screen.getByText(/welcome,/i)).toBeInTheDocument();
+    expect(screen.getByText(/guest/i)).toBeInTheDocument();
+
+    const loginLink = await screen.findByRole('link', { name: /login/i });
+
+    expect(loginLink).toHaveAttribute(
+      'href',
+      `https://example.com/login?redirect-uri=${encodeURIComponent(globalThis.location.href)}`,
+    );
+  });
+
+  it('renders authenticated state with logout link', async () => {
+    render(<HeaderAuthClient hostname="https://example.com" credentials={AUTH_CREDENTIALS} />);
+
+    expect(screen.getByText(/jamie.taylor@example.com/i)).toBeInTheDocument();
+
+    const logoutLink = await screen.findByRole('link', { name: /logout/i });
+
+    expect(logoutLink).toHaveAttribute(
+      'href',
+      `https://example.com/api/logout?redirect-uri=${encodeURIComponent(globalThis.location.href)}`,
+    );
+  });
+});

package/src/components/layout/header/HeaderNavClient.test.tsx

@@ -0,0 +1,44 @@
+import { HeaderNavClient } from './HeaderNavClient';
+import { render, screen, userEvent } from '../../../test/renderers';
+import type { NavLink } from '../../../types/navigation';
+
+const NAV_LINKS: NavLink[] = [
+  { label: 'Home', url: '/', isExternal: false },
+  { label: 'API', url: '/api-docs', isExternal: false },
+  { label: 'Support', url: 'https://example.com/support', isExternal: true },
+];
+
+describe('HeaderNavClient', () => {
+  it('renders both navigation regions', () => {
+    render(<HeaderNavClient navLinks={NAV_LINKS} />);
+
+    expect(
+      screen.getByRole('navigation', { name: /small screen navigation/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('navigation', { name: /large screen navigation/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('shows menu items in the small-screen dropdown', async () => {
+    render(<HeaderNavClient navLinks={NAV_LINKS} />);
+
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole('button', { name: /open menu/i }));
+
+    expect(await screen.findByRole('menuitem', { name: /home/i })).toBeInTheDocument();
+    expect(await screen.findByRole('menuitem', { name: /api/i })).toBeInTheDocument();
+    expect(await screen.findByRole('menuitem', { name: /support/i })).toBeInTheDocument();
+  });
+
+  it('renders large-screen links for navigation', () => {
+    render(<HeaderNavClient navLinks={NAV_LINKS} />);
+
+    const supportLink = screen.getByRole('link', { name: /support/i });
+
+    expect(supportLink).toHaveAttribute('href', 'https://example.com/support');
+    expect(screen.getByRole('link', { name: /home/i })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /api/i })).toBeInTheDocument();
+  });
+});

package/src/components/layout/header/HeaderNavClient.tsx

@@ -23,12 +23,15 @@ const InternalNavItem = ({ label, url, icon, ...props }: DropdownMenuItem<NavLin
   </Link>
 );
 
-const NavItem = ({ isExternal, ...props }: DropdownMenuItem<NavLink>) => {
+const NavItem = ({ url, openInNewTab, ...props }: DropdownMenuItem<NavLink>) => {
+  const isExternal = /^https?:\/\//.test(url);
+  const newTabProps = openInNewTab ? { target: '_blank' as const, rel: 'noopener noreferrer' } : {};
+
   if (isExternal) {
-    return <ExternalNavItem {...props} />;
+    return <ExternalNavItem url={url} {...newTabProps} {...props} />;
   }
 
-  return <InternalNavItem {...props} />;
+  return <InternalNavItem url={url} {...newTabProps} {...props} />;
 };
 
 export const HeaderNavClient = ({ navLinks }: HeaderNavClientProps) => {

package/src/components/link/ExternalLink.test.tsx

@@ -1,5 +1,3 @@
-import { describe, expect, it } from 'vitest';
-
 import { render, screen } from '@testing-library/react';
 
 import { ExternalLink } from './ExternalLink';

package/src/http/stream.test.ts

@@ -0,0 +1,98 @@
+import { readJsonXLinesStream } from './stream';
+
+const createMockReader = (chunks: Uint8Array[]) => {
+  let index = 0;
+
+  return {
+    read: vi.fn(async () => {
+      if (index < chunks.length) {
+        return { value: chunks[index++], done: false };
+      }
+
+      return { value: undefined, done: true };
+    }),
+    releaseLock: vi.fn(),
+  };
+};
+
+const createMockResponse = (chunks: string[]): Response => {
+  const encoder = new TextEncoder();
+  const uintChunks = chunks.map((c) => encoder.encode(c));
+
+  const mockReader = createMockReader(uintChunks);
+
+  return {
+    status: 200,
+    body: {
+      getReader: () => mockReader,
+    },
+  } as unknown as Response;
+};
+
+describe('readJsonXLinesStream', () => {
+  it('parses valid NDJSON chunks', async () => {
+    const response = createMockResponse([
+      '{"id":1,"name":"Alice"}\n{"id":2,',
+      '"name":"Bob"}\n{"id":3,"name":"Charlie"}\n',
+    ]);
+
+    const result = await readJsonXLinesStream(response);
+
+    expect(result).toEqual([
+      { id: 1, name: 'Alice' },
+      { id: 2, name: 'Bob' },
+      { id: 3, name: 'Charlie' },
+    ]);
+  });
+
+  it('ignores invalid JSON lines', async () => {
+    const response = createMockResponse([
+      '{"id":1,"name":"Alice"}\nINVALID_JSON\n{"id":2,"name":"Bob"}\n',
+    ]);
+
+    const result = await readJsonXLinesStream(response);
+
+    expect(result).toEqual([
+      { id: 1, name: 'Alice' },
+      { id: 2, name: 'Bob' },
+    ]);
+  });
+
+  it('handles trailing line without newline', async () => {
+    const response = createMockResponse(['{"id":1,"name":"Alice"}\n{"id":2,"name":"Bob"}']);
+
+    const result = await readJsonXLinesStream(response);
+
+    expect(result).toEqual([
+      { id: 1, name: 'Alice' },
+      { id: 2, name: 'Bob' },
+    ]);
+  });
+
+  it('returns empty array when no valid data', async () => {
+    const response = createMockResponse(['\n\n']);
+
+    const result = await readJsonXLinesStream(response);
+
+    expect(result).toEqual([]);
+  });
+
+  it('skips whitespace-only lines', async () => {
+    const response = createMockResponse(['   \n{"id":1,"name":"Alice"}\n  \n']);
+
+    const result = await readJsonXLinesStream(response);
+
+    expect(result).toEqual([{ id: 1, name: 'Alice' }]);
+  });
+
+  it('logs a warning for invalid JSON', async () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+    const response = createMockResponse(['INVALID\n']);
+
+    await readJsonXLinesStream(response);
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+
+    warnSpy.mockRestore();
+  });
+});

package/src/map/geocoder/Geocoder.test.tsx

@@ -1,12 +1,11 @@
 import Map from 'ol/Map';
 import View from 'ol/View';
-import { describe, expect, it, vi } from 'vitest';
 
 import { Geocoder } from './Geocoder';
 import { render, screen, userEvent } from '../../test/renderers';
 
 class MockView extends View {
-  animate = vi.fn((options, callback) => {
+  animate = vi.fn((_, callback) => {
     // Immediately execute callback if provided (simulating instant animation)
     if (typeof callback === 'function') {
       callback(true);

package/src/map/geocoder/Geocoder.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useId, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 
 import type Map from 'ol/Map';
 
@@ -129,6 +129,15 @@ export const Geocoder = ({
   const [status, setStatus] = useState('');
   const [isSearching, setIsSearching] = useState(false);
 
+  // Scroll the active result into view when navigating with arrow keys
+  useEffect(() => {
+    if (activeIndex >= 0) {
+      document
+        .getElementById(`${listboxId}-option-${activeIndex}`)
+        ?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [activeIndex, listboxId]);
+
   const performSearch = async () => {
     if (query.length < minChars) {
       setStatus(`Enter at least ${minChars} characters`);

package/src/map/osOpenNamesSearch.ts

@@ -63,21 +63,6 @@ export const createOsOpenNamesSearch = (options: OsOpenNamesSearchOptions) => {
 
     return features
       .map((feature, index): GeocoderResult | null => {
-        if (feature.geometry.type !== 'Point') {
-          console.error('Geometry type is not Point');
-
-          return null;
-        }
-
-        const [lon, lat] = feature.geometry.coordinates;
-
-        // Type guard: ensure coordinates are valid numbers
-        if (typeof lon !== 'number' || typeof lat !== 'number') {
-          console.error('Invalid coordinates: lon or lat is not a number');
-
-          return null;
-        }
-
         const properties = feature.properties ?? {};
 
         // Handle address which can be an object or string
@@ -88,35 +73,60 @@ export const createOsOpenNamesSearch = (options: OsOpenNamesSearchOptions) => {
 
           label = [addr.name, addr.town, addr.country].filter(Boolean).join(', ');
         } else {
-          label = properties.address ?? properties.name ?? `${lat}, ${lon}`;
-        }
-
-        const [x, y] = transform([lon, lat], EPSG_4326, EPSG_3857);
-
-        // Type guard: ensure transformed coordinates are valid numbers
-        if (typeof x !== 'number' || typeof y !== 'number') {
-          console.error('Transform failed: x or y is not a number');
-
-          return null;
+          label = properties.address ?? properties.name ?? `result-${index}`;
         }
 
         const result: GeocoderResult = {
           id: properties.id ?? `result-${index}`,
           label,
           group: properties.type ?? properties.localType,
-          center: [x, y],
           // Assign zoom level based on type, fallback to 14
           zoom: ZOOM_BY_TYPE[properties.type] ?? ZOOM_BY_TYPE[properties.localType] ?? 14,
         };
 
-        // Transform bbox to map projection if available
+        // Prefer bbox — works for all geometry types (Point, Polygon, MultiPolygon)
         if (feature.bbox && Array.isArray(feature.bbox) && feature.bbox.length === 4) {
+          const [minLon, minLat, maxLon, maxLat] = feature.bbox;
+
           result.extent = transformExtent(feature.bbox, EPSG_4326, EPSG_3857) as [
             number,
             number,
             number,
             number,
           ];
+
+          const [x, y] = transform(
+            [(minLon + maxLon) / 2, (minLat + maxLat) / 2],
+            EPSG_4326,
+            EPSG_3857,
+          );
+
+          if (typeof x === 'number' && typeof y === 'number') {
+            result.center = [x, y];
+          }
+        } else if (feature.geometry.type === 'Point') {
+          // Fallback for Point features without a bbox
+          const [lon, lat] = feature.geometry.coordinates;
+
+          if (typeof lon !== 'number' || typeof lat !== 'number') {
+            console.error('Invalid coordinates: lon or lat is not a number');
+
+            return null;
+          }
+
+          const [x, y] = transform([lon, lat], EPSG_4326, EPSG_3857);
+
+          if (typeof x !== 'number' || typeof y !== 'number') {
+            console.error('Transform failed: x or y is not a number');
+
+            return null;
+          }
+
+          result.center = [x, y];
+        } else {
+          console.error('Feature has no bbox and geometry is not a Point');
+
+          return null;
         }
 
         return result;

package/src/types/navigation.ts

@@ -3,6 +3,6 @@ import type { ReactNode } from 'react';
 export type NavLink = {
   label: string;
   url: string;
-  isExternal?: boolean;
+  openInNewTab?: boolean;
   icon?: ReactNode;
 };