@tpzdsp/next-toolkit 1.1.0 → 1.2.0

package/src/components/map/geometries.ts

@@ -0,0 +1,60 @@
+import { transform } from 'ol/proj';
+import proj4 from 'proj4';
+
+import './projections';
+
+export const EPSG_27700 = 'EPSG:27700';
+export const EPSG_4326 = 'EPSG:4326';
+export const EPSG_3857 = 'EPSG:3857';
+const POINT_LENGTH = 2;
+const BBOX_LENGTH = 4;
+
+/**
+ * Converts coordinates from EPSG:27700 (OSGB36) to EPSG:4326 (WGS84).
+ * Supports single points (x, y) or bounding boxes (xmin, ymin, xmax, ymax).
+ *
+ * @param coords - Either an [x, y] array or a [xmin, ymin, xmax, ymax] array.
+ *
+ * @returns Converted coordinates in EPSG:4326.
+ */
+export const transform27700to4326 = (
+  coords: [number, number] | [number, number, number, number],
+) => {
+  if (coords.length === POINT_LENGTH) {
+    // Single point transformation
+    return proj4(EPSG_27700, EPSG_4326, coords);
+  }
+
+  if (coords.length === BBOX_LENGTH) {
+    // Bounding box transformation (SW and NE corners)
+    const [xmin, ymin, xmax, ymax] = coords;
+
+    const [swLon, swLat] = proj4(EPSG_27700, EPSG_4326, [xmin, ymin]);
+    const [neLon, neLat] = proj4(EPSG_27700, EPSG_4326, [xmax, ymax]);
+
+    const minLon = Math.min(swLon, neLon);
+    const maxLon = Math.max(swLon, neLon);
+    const minLat = Math.min(swLat, neLat);
+    const maxLat = Math.max(swLat, neLat);
+
+    return [minLon, minLat, maxLon, maxLat]; // Correct bbox
+  }
+
+  throw new Error('Invalid coordinate input. Must be [x, y] or [xmin, ymin, xmax, ymax].');
+};
+
+/**
+ * Transforms polygon coordinates from one projection to another.
+ *
+ * @param coords - A polygon in the format [[[x, y], ...]].
+ * @param from - Source projection (e.g., 'EPSG:27700').
+ * @param to - Target projection (e.g., 'EPSG:3857').
+ * @returns Transformed polygon coordinates.
+ */
+export const transformPolygonCoords = (
+  coords: number[][][],
+  from: string,
+  to: string,
+): number[][][] => {
+  return coords.map((ring) => ring.map(([x, y]) => transform([x, y], from, to)));
+};

package/src/components/map/index.ts

@@ -0,0 +1,10 @@
+export * from './basemaps';
+export * from './geocoder';
+export * from './geometries';
+export * from './LayerSwitcherControl';
+export * from './map';
+export * from './Map';
+export * from './MapContext';
+export * from './osOpenNamesSearch';
+export * from './Popup';
+export * from './projections';

package/src/components/map/map.ts

@@ -0,0 +1,40 @@
+import { Map } from 'ol';
+
+import type { PopupDirection } from '../../types';
+
+export const LAYER_NAMES = {
+  Aoi: 'aoi-layer',
+  Boundary: 'boundary-layer',
+  SamplingPoints: 'sampling-points-layer',
+};
+
+const POPUP_WIDTH = 300;
+const POPUP_HEIGHT = 300;
+
+export const getPopupPositionClass = (coordinate: number[], map: Map): PopupDirection => {
+  const pixel = map.getPixelFromCoordinate(coordinate);
+  const [x, y] = pixel;
+
+  const isTop = y > POPUP_HEIGHT;
+  const isBottom = y < POPUP_HEIGHT;
+  const isLeft = x > POPUP_WIDTH;
+  const isRight = x < POPUP_WIDTH;
+
+  if (isTop && isLeft) {
+    return 'top-left';
+  }
+
+  if (isBottom && isLeft) {
+    return 'bottom-left';
+  }
+
+  if (isBottom && isRight) {
+    return 'bottom-right';
+  }
+
+  if (isTop && isRight) {
+    return 'top-right';
+  }
+
+  return 'bottom-right';
+};

package/src/components/map/osOpenNamesSearch.ts

@@ -0,0 +1,54 @@
+import type { FeatureCollection } from 'geojson';
+
+export type SearchOption = {
+  url?: string;
+};
+
+/**
+ * Custom provider for OS OpenNames 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') {
+          return {
+            lon: feature.geometry.coordinates[0],
+            lat: feature.geometry.coordinates[1],
+            address: feature?.properties?.address,
+            bbox: feature.bbox,
+          };
+        }
+
+        console.error('Geometry type is not Point');
+      });
+    },
+  };
+};

package/src/components/map/projections.ts

@@ -0,0 +1,14 @@
+import { register } from 'ol/proj/proj4';
+import proj4 from 'proj4';
+
+// Define EPSG:27700 (British National Grid)
+proj4.defs(
+  'EPSG:27700',
+  '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
+    '+x_0=400000 +y_0=-100000 +ellps=airy ' +
+    '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
+    '+units=m +no_defs',
+);
+
+// Register the projection with OpenLayers
+register(proj4);

package/src/components/select/Select.stories.tsx

@@ -0,0 +1,336 @@
+/* eslint-disable storybook/no-renderer-packages */
+import { useEffect, useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Select } from './Select';
+
+const meta = {
+  title: 'Components/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    onChange: fn(),
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const OPTIONS = [
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+  { value: 'mint', label: 'Mint' },
+  { value: 'cookies', label: 'Cookies & Cream' },
+];
+
+const GROUPED_OPTIONS = [
+  {
+    label: 'Fruits',
+    options: [
+      { value: 'apple', label: 'Apple' },
+      { value: 'banana', label: 'Banana' },
+      { value: 'orange', label: 'Orange' },
+    ],
+  },
+  {
+    label: 'Vegetables',
+    options: [
+      { value: 'carrot', label: 'Carrot' },
+      { value: 'broccoli', label: 'Broccoli' },
+      { value: 'spinach', label: 'Spinach' },
+    ],
+  },
+];
+
+const USERS = [
+  { value: 'john', label: 'John Doe', email: 'john@example.com' },
+  { value: 'jane', label: 'Jane Smith', email: 'jane@example.com' },
+  { value: 'bob', label: 'Bob Johnson', email: 'bob@example.com' },
+];
+
+const FLAVOUR_PLACEHOLDER_TEXT = 'Select a flavour...';
+const FLAVOUR_MULTI_PLACEHOLDER_TEXT = 'Select multiple flavours...';
+
+export const Default: Story = {
+  args: {
+    options: OPTIONS,
+    placeholder: FLAVOUR_PLACEHOLDER_TEXT,
+  },
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    options: OPTIONS,
+    defaultValue: OPTIONS[0],
+    placeholder: FLAVOUR_PLACEHOLDER_TEXT,
+  },
+};
+
+export const Clearable: Story = {
+  args: {
+    options: OPTIONS,
+    defaultValue: OPTIONS[1],
+    isClearable: true,
+    placeholder: FLAVOUR_PLACEHOLDER_TEXT,
+  },
+};
+
+export const Searchable: Story = {
+  args: {
+    options: OPTIONS,
+    isSearchable: true,
+    placeholder: 'Search and select...',
+  },
+};
+
+export const MultiSelect: Story = {
+  args: {
+    options: OPTIONS,
+    isMulti: true,
+    placeholder: FLAVOUR_MULTI_PLACEHOLDER_TEXT,
+  },
+};
+
+export const MultiSelectWithValues: Story = {
+  args: {
+    options: OPTIONS,
+    isMulti: true,
+    defaultValue: [OPTIONS[0], OPTIONS[2]],
+    placeholder: FLAVOUR_MULTI_PLACEHOLDER_TEXT,
+  },
+};
+
+export const MultiSelectClearable: Story = {
+  args: {
+    options: OPTIONS,
+    isMulti: true,
+    isClearable: true,
+    defaultValue: [OPTIONS[0], OPTIONS[1]],
+    placeholder: FLAVOUR_MULTI_PLACEHOLDER_TEXT,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    options: OPTIONS,
+    isDisabled: true,
+    defaultValue: OPTIONS[0],
+    placeholder: 'This select is disabled',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    options: OPTIONS,
+    isLoading: true,
+    placeholder: 'Loading...',
+  },
+};
+
+export const GroupedOptions: Story = {
+  args: {
+    options: GROUPED_OPTIONS,
+    placeholder: 'Select a food item...',
+  },
+};
+
+export const NoOptionsMessage: Story = {
+  args: {
+    options: [],
+    placeholder: 'No options available',
+    noOptionsMessage: () => 'No options found',
+  },
+};
+
+export const CustomFormatOptionLabel: Story = {
+  args: {
+    options: USERS,
+    placeholder: 'Select a user...',
+    formatOptionLabel: (data: unknown) => {
+      const option = data as { value: string; label: string; email: string };
+
+      return (
+        <div>
+          <div className="font-medium">{option.label}</div>
+
+          <div className="text-sm text-gray-500">{option.email}</div>
+        </div>
+      );
+    },
+  },
+};
+
+export const CustomClassNames: Story = {
+  args: {
+    options: OPTIONS,
+    placeholder: 'Custom styled select...',
+    classNames: {
+      control: () => 'border-2 border-purple-500 rounded-lg',
+      option: (state) =>
+        // eslint-disable-next-line sonarjs/no-nested-conditional
+        state.isSelected ? 'bg-purple-500 text-white' : state.isFocused ? 'bg-purple-100' : '',
+      menu: () => 'border-purple-500',
+    },
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    options: OPTIONS,
+    placeholder: 'Small select...',
+    classNames: {
+      control: () => 'min-h-8 text-sm',
+      option: () => 'px-2 py-1 text-sm',
+    },
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    options: OPTIONS,
+    placeholder: 'Large select...',
+    classNames: {
+      control: () => 'min-h-12 text-lg',
+      option: () => 'px-6 py-3 text-lg',
+    },
+  },
+};
+
+export const ControlledComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState<{ value: string; label: string } | null>(OPTIONS[0]);
+
+    return (
+      <div className="space-y-4">
+        <Select
+          options={OPTIONS}
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          placeholder="Controlled select..."
+        />
+
+        <div className="text-sm text-gray-600">Selected: {value ? value.label : 'None'}</div>
+
+        <button
+          onClick={() => setValue(OPTIONS[2])}
+          className="px-3 py-1 bg-blue-500 text-white rounded text-sm"
+        >
+          Set to Vanilla
+        </button>
+      </div>
+    );
+  },
+};
+export const WithLongOptions: Story = {
+  args: {
+    options: [
+      { value: 'short', label: 'Short' },
+      {
+        value: 'long',
+        label: 'This is a very long option that might overflow and needs to be handled properly',
+      },
+      {
+        value: 'medium',
+        label: 'Medium length option text',
+      },
+    ],
+    placeholder: 'Select an option...',
+  },
+};
+
+export const Async: Story = {
+  render: () => {
+    const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const loadOptions = () => {
+      setIsLoading(true);
+      // Simulate API call
+      setTimeout(() => {
+        setOptions([
+          { value: 'async1', label: 'Async Option 1' },
+          { value: 'async2', label: 'Async Option 2' },
+          { value: 'async3', label: 'Async Option 3' },
+        ]);
+        setIsLoading(false);
+      }, 1000);
+    };
+
+    useEffect(() => {
+      loadOptions();
+    }, []);
+
+    return (
+      <div className="space-y-4">
+        <Select options={options} isLoading={isLoading} placeholder="Loading async options..." />
+
+        <button onClick={loadOptions} className="px-3 py-1 bg-green-500 text-white rounded text-sm">
+          Reload Options
+        </button>
+      </div>
+    );
+  },
+};
+
+export const FormIntegration: Story = {
+  render: () => {
+    const [formData, setFormData] = useState<{
+      flavour: { value: string; label: string } | null;
+      toppings: { value: string; label: string }[];
+    }>({
+      flavour: null,
+      toppings: [],
+    });
+
+    return (
+      <form className="space-y-4 p-4 border rounded">
+        <div>
+          <label htmlFor="flavour" className="block text-sm font-medium mb-1">
+            Flavour
+          </label>
+
+          <Select
+            id="flavour"
+            options={OPTIONS}
+            value={formData.flavour}
+            onChange={(value) => setFormData({ ...formData, flavour: value })}
+            placeholder="Select a flavour..."
+            isClearable
+          />
+        </div>
+
+        <div>
+          <label htmlFor="toppings" className="block text-sm font-medium mb-1">
+            Toppings
+          </label>
+
+          <Select
+            id="toppings"
+            options={[
+              { value: 'sprinkles', label: 'Sprinkles' },
+              { value: 'nuts', label: 'Nuts' },
+              { value: 'chocolate-chips', label: 'Chocolate Chips' },
+              { value: 'cherry', label: 'Cherry' },
+            ]}
+            value={formData.toppings}
+            onChange={(value) =>
+              setFormData({ ...formData, toppings: Array.isArray(value) ? [...value] : [] })
+            }
+            placeholder="Select toppings..."
+            isMulti
+          />
+        </div>
+
+        <div className="text-sm text-gray-600">
+          <pre>{JSON.stringify(formData, null, 2)}</pre>
+        </div>
+      </form>
+    );
+  },
+};