@tpzdsp/next-toolkit 1.7.0 → 1.9.0

package/src/errors/ApiError.ts

@@ -2,7 +2,7 @@
 
 import z from 'zod/v4';
 
-import { HttpStatus, HttpStatusText } from '../http';
+import { HttpStatus, HttpStatusText } from '../http/constants';
 
 /**
  * Schema defining the JSON shape of error responses returned by a server. (The proxy is where
@@ -53,7 +53,13 @@ export class ApiError extends Error implements z.output<typeof ApiErrorSchema> {
     this.name = 'ApiError';
     this.status = status;
     this.details = details ?? null;
-    this.digest = crypto.randomUUID();
+    // Crypto is a NodeJS and browser global; use it if available, but fallback to a pseudo-random string otherwise.
+    // This is due to Storybook not providing the `crypto` global in some environments (e.g., Jest).
+    this.digest =
+      typeof crypto?.randomUUID === 'function'
+        ? crypto.randomUUID()
+        : // eslint-disable-next-line sonarjs/pseudo-random
+          Math.random().toString(36).slice(2);
     this.rehydrated = options?.rehydrated ?? false;
 
     // Maintains proper stack trace for where our error was thrown (only available on V8)

package/src/http/constants.ts

@@ -99,6 +99,8 @@ export const Header = {
   CsvHeader: 'CSV-Header',
   XTotalItems: 'X-Total-Items',
   XRequestId: 'X-Request-ID',
+  ApiVersion: 'API-Version',
+  CacheControl: 'Cache-Control',
 } as const;
 
 /**

package/src/map/LayerSwitcherControl.ts

@@ -1,11 +1,11 @@
 /* eslint-disable no-restricted-syntax */
+import { createFocusTrap } from 'focus-trap';
+import type { FocusTrap } from 'focus-trap';
 import { Map } from 'ol';
 import { Control } from 'ol/control';
 import type { Options as ControlOptions } from 'ol/control/Control';
 import BaseLayer from 'ol/layer/Base';
 
-import { KeyboardKeys } from '../utils';
-
 const TIMEOUT = 300; // Match CSS transition duration
 const ARIA_LABEL = 'aria-label';
 
@@ -16,7 +16,8 @@ export class LayerSwitcherControl extends Control {
   map!: Map;
   panel!: HTMLElement;
   liveRegion!: HTMLElement;
-  isCollapsed = true;
+  isOpen = false;
+  private focusTrap: FocusTrap | null = null;
 
   constructor(layers: BaseLayer[], options?: ControlOptions) {
     const button = document.createElement('button');
@@ -70,9 +71,6 @@ export class LayerSwitcherControl extends Control {
     this.panel.setAttribute('aria-modal', 'true');
     this.panel.setAttribute(ARIA_LABEL, 'Basemap switcher');
 
-    // Add a keydown listener to the panel for Escape key
-    this.panel.addEventListener('keydown', this.handlePanelKeyDown);
-
     // Create the header for the close button
     const header = document.createElement('div');
 
@@ -87,7 +85,6 @@ export class LayerSwitcherControl extends Control {
     closeBtn.type = 'button';
     closeBtn.addEventListener('click', () => {
       this.toggleLayerSwitcher();
-      this.focusToggleButton();
     });
     header.appendChild(closeBtn);
 
@@ -124,6 +121,29 @@ export class LayerSwitcherControl extends Control {
     this.panel.appendChild(header);
     this.panel.appendChild(content);
 
+    // Create focus trap once - will be activated/deactivated as needed
+    this.focusTrap = createFocusTrap(this.panel, {
+      clickOutsideDeactivates: (event) => {
+        // if the user happens to click on the open button again we let the button handle the click event, not the focus trap
+        if (button.contains(event.target as Node)) {
+          return true;
+        }
+
+        this.toggleLayerSwitcher();
+
+        return false;
+      },
+      escapeDeactivates: () => {
+        this.toggleLayerSwitcher();
+
+        return false;
+      },
+      returnFocusOnDeactivate: true,
+      fallbackFocus: () => {
+        return this.panel;
+      },
+    });
+
     button.addEventListener('click', this.toggleLayerSwitcher, false);
   }
 
@@ -142,22 +162,6 @@ export class LayerSwitcherControl extends Control {
       .find((layer: BaseLayer) => layer.get('name') === layerName);
   }
 
-  private focusFirstButton() {
-    const firstBtn = this.panel.querySelector(
-      'button:not(.ol-layer-switcher-close)',
-    ) as HTMLButtonElement | null;
-
-    firstBtn?.focus();
-  }
-
-  private focusToggleButton() {
-    const toggleBtn = this.element.querySelector(
-      'button.ol-layer-switcher-toggle',
-    ) as HTMLButtonElement | null;
-
-    toggleBtn?.focus();
-  }
-
   private announceBasemapChange(layerName: string) {
     if (this.liveRegion) {
       this.liveRegion.textContent = `Basemap changed to ${layerName}`;
@@ -181,59 +185,33 @@ export class LayerSwitcherControl extends Control {
 
   // Arrow function: 'this' is always bound to the class instance
   toggleLayerSwitcher = () => {
-    if (this.isCollapsed) {
+    if (!this.isOpen) {
       this.element.appendChild(this.panel);
+
       requestAnimationFrame(() => {
         this.panel.classList.add('open'); // Ensure animation works after adding to DOM
 
-        // Focus the first basemap button (skip the close button)
-        this.focusFirstButton();
+        // Activate the existing focus trap
+        this.focusTrap?.activate();
       });
     } else {
       this.panel.classList.remove('open');
+
+      // Deactivate focus trap but keep the instance
+      this.focusTrap?.deactivate();
+
       setTimeout(() => {
         this.element.removeChild(this.panel);
       }, TIMEOUT); // Matches CSS transition time to prevent flickering
     }
 
-    this.isCollapsed = !this.isCollapsed;
+    this.isOpen = !this.isOpen;
 
     // Update aria-expanded on the toggle button
     const toggleBtn = this.element.querySelector('button.ol-layer-switcher-toggle');
 
     if (toggleBtn) {
-      toggleBtn.setAttribute('aria-expanded', (!this.isCollapsed).toString());
-    }
-  };
-
-  // Arrow function for panel keydown
-  handlePanelKeyDown = (event: KeyboardEvent) => {
-    // Focus trap: cycle focus within the panel
-    if (event.key === KeyboardKeys.Tab) {
-      const focusable = Array.from(this.panel.querySelectorAll('button')) as HTMLButtonElement[];
-
-      if (focusable.length === 0) {
-        return;
-      }
-
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-
-      if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault();
-        first.focus();
-      } else if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault();
-        last.focus();
-      }
-    }
-
-    // Escape closes the panel and returns focus to the toggle button
-    if (event.key === KeyboardKeys.Escape) {
-      this.toggleLayerSwitcher();
-
-      // Focus back on the basemap switcher button
-      this.focusToggleButton();
+      toggleBtn.setAttribute('aria-expanded', this.isOpen.toString());
     }
   };
 
@@ -276,4 +254,14 @@ export class LayerSwitcherControl extends Control {
       btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
     });
   };
+
+  // Cleanup method - call this when removing the control
+  destroy() {
+    // Deactivate and destroy focus trap
+    if (this.focusTrap) {
+      this.focusTrap.deactivate();
+    }
+
+    this.focusTrap = null;
+  }
 }

package/src/map/MapComponent.tsx

@@ -75,7 +75,7 @@ export const MapComponent = ({
     }
 
     // Initialise map's basemap layers.
-    const layers = initializeBasemapLayers();
+    const layers = initializeBasemapLayers(basePath);
 
     const target = mapRef.current;
 

package/src/map/basemaps.ts

@@ -8,7 +8,7 @@ import SatelliteMapTilerImage from './images/basemaps/satellite-map-tiler.png';
 import SatelliteImage from './images/basemaps/satellite.png';
 import StreetsImage from './images/basemaps/streets.png';
 
-export const initializeBasemapLayers = () => {
+export const initializeBasemapLayers = (baseUrl: string) => {
   const osmLayer = new TileLayer({
     preload: Infinity,
     source: new OSM(),
@@ -24,7 +24,7 @@ export const initializeBasemapLayers = () => {
   const osMapsLight = new TileLayer({
     // attributions: [`© Crown Copyright and Database Rights [insert year of creation] OS AC0000807064`],
     source: new XYZ({
-      url: '/water-quality-archive/api/maps/raster/v1/zxy/Light_3857/{z}/{x}/{y}.png',
+      url: `${baseUrl}/api/maps/raster/v1/zxy/Light_3857/{z}/{x}/{y}.png`,
     }),
     visible: false,
   });
@@ -36,7 +36,7 @@ export const initializeBasemapLayers = () => {
   const osMapsOutdoor = new TileLayer({
     // attributions: [`© Crown Copyright and Database Rights [insert year of creation] OS AC0000807064`],
     source: new XYZ({
-      url: '/water-quality-archive/api/maps/raster/v1/zxy/Outdoor_3857/{z}/{x}/{y}.png',
+      url: `${baseUrl}/api/maps/raster/v1/zxy/Outdoor_3857/{z}/{x}/{y}.png`,
     }),
     visible: false,
   });
@@ -50,7 +50,7 @@ export const initializeBasemapLayers = () => {
   const osMapsRoad = new TileLayer({
     // attributions: [`© Crown Copyright and Database Rights [insert year of creation] OS AC0000807064`],
     source: new XYZ({
-      url: '/water-quality-archive/api/maps/raster/v1/zxy/Road_3857/{z}/{x}/{y}.png',
+      url: `${baseUrl}/api/maps/raster/v1/zxy/Road_3857/{z}/{x}/{y}.png`,
     }),
     visible: false,
   });

package/src/utils/date.ts

@@ -0,0 +1,6 @@
+import { format, type DateArg } from 'date-fns';
+
+export const DEFAULT_DATE_FORMAT = 'yyyy-MM-dd';
+
+export const formatDate = (date: DateArg<Date>, pattern = DEFAULT_DATE_FORMAT) =>
+  format(date instanceof Date ? date : new Date(date), pattern);

package/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './utils';
 export * from './auth';
 export * from './constants';
+export * from './date';

package/src/utils/utils.ts

@@ -1,4 +1,4 @@
-import { decode } from 'jsonwebtoken';
+import { verify } from 'jsonwebtoken';
 import { twMerge } from 'tailwind-merge';
 
 import type { Credentials, DecodedJWT } from '../types/auth';
@@ -9,10 +9,19 @@ export const decodeAuthToken = (token: string): Credentials | null => {
   }
 
   try {
-    const user = decode(token) as unknown as DecodedJWT;
+    // eslint-disable-next-line no-undef
+    const secret = process.env.JWT_SECRET;
+
+    if (!secret) {
+      throw new Error('JWT secret not set');
+    }
+
+    const user = verify(token, secret) as DecodedJWT;
 
     return { token, user };
-  } catch {
+  } catch (error) {
+    console.error('Error decoding auth token:', error);
+
     return null;
   }
 };