@tpzdsp/next-toolkit 1.12.1 → 1.13.0

package/src/map/geocoder/types.ts

@@ -0,0 +1,11 @@
+export type GeocoderResult = {
+  id: string;
+  label: string;
+  group?: string;
+  extent?: [number, number, number, number];
+  center?: [number, number];
+  /** Optional zoom level for this result (e.g., city=12, street=16, building=18) */
+  zoom?: number;
+};
+
+export type GroupedResults = Record<string, GeocoderResult[]>;

package/src/map/index.ts

@@ -1,7 +1,10 @@
 export * from './basemaps';
-export * from './geocoder';
+export * from './geocoder/index';
 export * from './geometries';
+export * from './createControlButton';
 export * from './LayerSwitcherControl';
+export * from './LayerSwitcherPanel';
+export * from './FullScreenControl';
 export * from './utils';
 export * from './MapComponent';
 export * from './MapContext';

package/src/map/osOpenNamesSearch.ts

@@ -1,71 +1,126 @@
 import type { FeatureCollection } from 'geojson';
+import { transform, transformExtent } from 'ol/proj';
 
-export type SearchOption = {
-  url?: string;
+import type { GeocoderResult } from './geocoder/types';
+import { EPSG_3857, EPSG_4326 } from './geometries';
+
+export type OsOpenNamesSearchOptions = {
+  url: string;
 };
 
-export type SearchResult = {
-  lon: number;
-  lat: number;
-  address?: string;
-  bbox?: number[];
+// Zoom levels based on OS Open Names feature types
+const ZOOM_BY_TYPE: Record<string, number> = {
+  // Large areas
+  City: 12,
+  Town: 13,
+  'Suburban Area': 14,
+  Village: 15,
+  Hamlet: 15,
+  // Streets and localities
+  'Named Road': 16,
+  Section: 16,
+  'Numbered Road': 16,
+  Other: 14,
+  // Precise locations
+  Postcode: 17,
+  'Postcode Unit': 18,
 };
 
 /**
- * Custom provider for OS OpenNames search.
+ * Creates a search function for OS Open Names API that returns GeocoderResult[].
+ *
+ * @param options - Configuration options including the API URL.
+ * @returns A search function compatible with the Geocoder component.
+ *
+ * @example
+ * ```tsx
+ * const search = createOsOpenNamesSearch({ url: '/api/geocode' });
+ * <Geocoder map={map} search={search} />
+ * ```
  */
-export const osOpenNamesSearch = (options?: SearchOption) => {
-  const { url } = options ?? {};
-
-  return {
-    /**
-     * Get the URL and parameters needed for the request.
-     *
-     * @param {object} opt - Options object containing the query.
-     */
-    getParameters: (opt: { query: string }) => {
-      return {
-        url,
-        params: {
-          query: opt.query,
-        },
-      };
-    },
-
-    /**
-     * Process the API response and format it for ol-geocoder.
-     *
-     * @param {object} results - OS Names API response.
-     */
-    handleResponse: (response: FeatureCollection) => {
-      const { features } = response;
-
-      if (!features?.length) {
-        return [];
-      }
-
-      return features
-        .map((feature) => {
-          if (feature.geometry.type === 'Point') {
-            const result: SearchResult = {
-              lon: feature.geometry.coordinates[0]!,
-              lat: feature.geometry.coordinates[1]!,
-              address: feature?.properties?.address,
-            };
-
-            // Only include bbox if it's not empty
-            if (feature.bbox && Array.isArray(feature.bbox) && feature.bbox.length > 0) {
-              result.bbox = feature.bbox;
-            }
-
-            return result;
-          }
+export const createOsOpenNamesSearch = (options: OsOpenNamesSearchOptions) => {
+  const { url } = options;
+
+  return async (query: string): Promise<GeocoderResult[]> => {
+    const searchUrl = new URL(url, globalThis.location.origin);
+
+    searchUrl.searchParams.set('query', query);
+
+    const response = await fetch(searchUrl.toString());
+
+    if (!response.ok) {
+      console.error('OS Open Names search failed:', response.statusText);
+
+      return [];
+    }
 
+    const data: FeatureCollection = await response.json();
+    const { features } = data;
+
+    if (!features?.length) {
+      return [];
+    }
+
+    return features
+      .map((feature, index): GeocoderResult | null => {
+        if (feature.geometry.type !== 'Point') {
           console.error('Geometry type is not Point');
 
           return null;
-        })
-        .filter(Boolean);
-    },
+        }
+
+        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
+        let label: string;
+
+        if (properties.address && typeof properties.address === 'object') {
+          const addr = properties.address as { name?: string; town?: string; country?: string };
+
+          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;
+        }
+
+        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
+        if (feature.bbox && Array.isArray(feature.bbox) && feature.bbox.length === 4) {
+          result.extent = transformExtent(feature.bbox, EPSG_4326, EPSG_3857) as [
+            number,
+            number,
+            number,
+            number,
+          ];
+        }
+
+        return result;
+      })
+      .filter((result): result is GeocoderResult => result !== null);
   };
 };

package/src/test/renderers.tsx

@@ -3,6 +3,7 @@ import type { ReactElement, ReactNode } from 'react';
 import {
   type RenderHookOptions,
   type RenderHookResult,
+  type RenderOptions,
   render,
   renderHook,
 } from '@testing-library/react';
@@ -11,11 +12,6 @@ type WrapperParams = {
   children: ReactNode;
 };
 
-type Options = {
-  initialEntries?: string[];
-  renderHookOptions?: RenderHookOptions<unknown>;
-};
-
 /**
  * A custom testing-library component renderer that wraps the component being
  * rendered with any Providers used in the app. Any test can pre-configure the
@@ -26,13 +22,10 @@ type Options = {
  *
  * @returns The rendered component.
  */
-const customRender = (ui: ReactElement, options?: Options) => {
-  const { renderHookOptions } = options ?? {};
+const customRender = (ui: ReactElement, options?: RenderOptions) => {
+  const wrapper = ({ children }: WrapperParams): ReactElement => <>{children}</>;
 
-  return render(ui, {
-    wrapper: ({ children }: WrapperParams): ReactElement => <>{children}</>,
-    ...renderHookOptions,
-  });
+  return render(ui, { wrapper, ...options });
 };
 
 /**
@@ -45,17 +38,13 @@ const customRender = (ui: ReactElement, options?: Options) => {
  *
  * @returns The rendered hook.
  */
-const customRenderHook = <T, P>(
-  callback: () => unknown,
-  options?: Options,
-): RenderHookResult<T, P> => {
-  const { renderHookOptions } = options ?? {};
-
+const customRenderHook = <Result, Props>(
+  callback: (initialProps: Props) => Result,
+  options?: RenderHookOptions<Props>,
+): RenderHookResult<Result, Props> => {
   const wrapper = ({ children }: WrapperParams): ReactElement => <>{children}</>;
 
-  const utils = renderHook(() => callback(), { wrapper, ...renderHookOptions });
-
-  return utils as RenderHookResult<T, P>;
+  return renderHook(callback, { wrapper, ...options });
 };
 
 export { screen, waitFor, within, act } from '@testing-library/react';

package/src/map/geocoder.ts

@@ -1,61 +0,0 @@
-import { Map } from 'ol';
-import { transformExtent } from 'ol/proj';
-import Geocoder from 'ol-geocoder';
-
-import { EPSG_3857, EPSG_4326 } from './geometries';
-import { osOpenNamesSearch } from './osOpenNamesSearch';
-
-type AddressChosenEvent = {
-  place: {
-    lon: number;
-    lat: number;
-    bbox?: [number, number, number, number]; // [minLon, minLat, maxLon, maxLat]
-    address: {
-      name: string;
-      city?: string;
-      state?: string;
-      country?: string;
-    };
-  };
-};
-
-export const initializeGeocoder = (apiKey: string, geoCoderUrl: string, map: Map) => {
-  if (!apiKey) {
-    console.warn('No API key provided for geocoder initialization.');
-
-    throw new Error(
-      'API key is required for geocoder initialization. Please provide a valid API key.',
-    );
-  }
-
-  const provider = osOpenNamesSearch({
-    url: geoCoderUrl,
-  });
-
-  const geocoder = new Geocoder('nominatim', {
-    provider,
-    key: apiKey,
-    lang: 'en',
-    placeholder: 'Search for ...',
-    targetType: 'text-input',
-    keepOpen: false,
-    preventMarker: true,
-    debug: true,
-  });
-
-  // Since we provide a bbox in the custom provider response,
-  // we also need to handle the address chosen event.
-  geocoder.on('addresschosen', (event: AddressChosenEvent) => {
-    if (event.place.bbox) {
-      const extent3857 = transformExtent(event.place.bbox, EPSG_4326, EPSG_3857);
-
-      map.getView().fit(extent3857, {
-        duration: 500,
-        padding: [50, 50, 50, 50],
-        maxZoom: 18,
-      });
-    }
-  });
-
-  return geocoder;
-};

package/src/ol-geocoder.d.ts

@@ -1 +0,0 @@
-declare module 'ol-geocoder';