refactor(pages-components): components/maps

.github/workflows/wcag_test.yml

@@ -21,8 +21,7 @@ jobs:
       - name: Install playwright browsers
         working-directory: packages/pages-components
         run: |
-          pnpm create playwright
-          npx playwright install
+          pnpm exec playwright install
       - name: Serve Storybook and run WCAG checks
         working-directory: packages/pages-components
         run: |

packages/pages-components/CHANGELOG.md

@@ -2,9 +2,9 @@
 
 ##### Bug Fixes
 
-* **pages-components:**
-  *  resolve nested-interactive WCAG issue (#74) (f970d1aa)
-  *  link component type appearing as any (#72) (494bf4d7)
+- **pages-components:**
+  - resolve nested-interactive WCAG issue (#74) (f970d1aa)
+  - link component type appearing as any (#72) (494bf4d7)
 
 #### 1.0.3 (2024-11-19)
 

packages/pages-components/THIRD-PARTY-NOTICES

@@ -5,7 +5,7 @@ The following npm package may be included in this product:
 
  - unified@11.0.4
 
-This package contains the following license and notice below:
+This package contains the following license:
 
 (The MIT License)
 
@@ -36,7 +36,7 @@ The following npm packages may be included in this product:
  - mdast-util-to-hast@12.3.0
  - remark-rehype@10.1.0
 
-These packages each contain the following license and notice below:
+These packages each contain the following license:
 
 (The MIT License)
 
@@ -67,7 +67,7 @@ The following npm package may be included in this product:
 
  - mdast-util-from-markdown@1.2.0
 
-This package contains the following license and notice below:
+This package contains the following license:
 
 (The MIT License)
 
@@ -96,13 +96,13 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 The following npm package may be included in this product:
 
- - picocolors@1.0.0
+ - picocolors@1.1.1
 
-This package contains the following license and notice below:
+This package contains the following license:
 
 ISC License
 
-Copyright (c) 2021 Alexey Raspopov, Kostiantyn Denysov, Anton Verinov
+Copyright (c) 2021-2024 Oleksii Raspopov, Kostiantyn Denysov, Anton Verinov
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above
@@ -127,25 +127,25 @@ The following npm packages may be included in this product:
  - micromark-util-symbol@1.0.1
  - micromark-util-types@1.0.2
 
-These packages each contain the following license and notice below:
+These packages each contain the following license:
 
 MIT
 
 -----------
 
 The following npm packages may be included in this product:
 
- - @lexical/code@0.12.5
- - @lexical/hashtag@0.12.5
- - @lexical/link@0.12.5
- - @lexical/list@0.12.5
- - @lexical/react@0.12.5
- - @lexical/rich-text@0.12.5
- - @lexical/table@0.12.5
- - @lexical/utils@0.12.5
- - lexical@0.12.5
+ - @lexical/code@0.12.6
+ - @lexical/hashtag@0.12.6
+ - @lexical/link@0.12.6
+ - @lexical/list@0.12.6
+ - @lexical/react@0.12.6
+ - @lexical/rich-text@0.12.6
+ - @lexical/table@0.12.6
+ - @lexical/utils@0.12.6
+ - lexical@0.12.6
 
-These packages each contain the following license and notice below:
+These packages each contain the following license:
 
 MIT License
 
@@ -175,7 +175,7 @@ The following npm package may be included in this product:
 
  - @yext/analytics@1.0.0-beta.5
 
-This package contains the following license and notice below:
+This package contains the following license:
 
 The Analytics files listed in this repository are licensed under the below license. All other features and products are subject to separate agreements
 and certain functionality requires paid subscriptions to Yext products.
@@ -214,9 +214,9 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 The following npm package may be included in this product:
 
- - react-markdown@8.0.0
+ - react-markdown@8.0.7
 
-This package contains the following license and notice below:
+This package contains the following license:
 
 The MIT License (MIT)
 
@@ -246,7 +246,7 @@ The following npm package may be included in this product:
 
  - cross-fetch@4.0.0
 
-This package contains the following license and notice below:
+This package contains the following license:
 
 The MIT License (MIT)
 
@@ -276,7 +276,7 @@ The following npm package may be included in this product:
 
  - browser-or-node@2.1.1
 
-This package contains the following license and notice below:
+This package contains the following license:
 
 The MIT License (MIT)
 
@@ -304,9 +304,9 @@ SOFTWARE.
 
 The following npm package may be included in this product:
 
- - classnames@2.3.2
+ - classnames@2.5.1
 
-This package contains the following license and notice below:
+This package contains the following license:
 
 The MIT License (MIT)
 
@@ -336,7 +336,7 @@ The following npm package may be included in this product:
 
  - uvu@0.5.6
 
-This package contains the following license and notice below:
+This package contains the following license:
 
 The MIT License (MIT)
 

packages/pages-components/mapboxgl-global.d.ts

@@ -0,0 +1,5 @@
+import "mapbox-gl";
+
+declare global {
+  const mapboxgl: typeof import("mapbox-gl");
+}

packages/pages-components/package.json

@@ -60,7 +60,11 @@
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
+    "@types/bingmaps": "^0.0.1",
+    "@types/google.maps": "^3.58.1",
     "@types/jest-image-snapshot": "^6.4.0",
+    "@types/leaflet": "^1.9.12",
+    "@types/mapbox-gl": "^3.4.0",
     "@types/mdast": "3.0.10",
     "@types/node": "^20.10.4",
     "@types/react": "^18.2.45",

packages/pages-components/src/components/map/map.test.tsx

@@ -26,7 +26,7 @@ describe("Map", () => {
   it("userMapContext in map child component", async () => {
     const MapChildComponent = () => {
       const map = useMapContext();
-      return <div>{map.getCenter()}</div>;
+      return <div>{map.getCenter() as unknown as string}</div>;
     };
 
     render(

packages/pages-components/src/components/map/map.tsx

@@ -43,15 +43,17 @@ export const Map = ({
 }: MapProps) => {
   const wrapper = useRef(null);
 
-  const [center, setCenter] = useState(defaultCenter);
+  const [center, setCenter] = useState(new Coordinate(defaultCenter));
   const [loaded, setLoaded] = useState(false);
   const [map, setMap] = useState<MapType>();
   const [zoom, setZoom] = useState(defaultZoom);
 
   // Update center on map move
-  const _panHandler = (previous: GeoBounds, current: GeoBounds) => {
+  const _panHandler = (previous?: GeoBounds, current?: GeoBounds) => {
     panHandler(previous, current);
-    setCenter(current.getCenter());
+    if (current) {
+      setCenter(current.getCenter());
+    }
   };
 
   // On map move

packages/pages-components/src/components/map/marker.tsx

@@ -4,6 +4,8 @@ import { MapPin, MapPinOptions } from "../../map/mapPin.js";
 import { MapContext } from "./map.js";
 import { MapContextType, MarkerProps } from "./types.js";
 import { ClustererContext } from "./clusterer.js";
+import { HTMLProviderPin } from "../../map/providerPin.js";
+import { Coordinate } from "../../map/coordinate.js";
 
 const defaultMarkerIcon = (
   <svg
@@ -30,14 +32,14 @@ export const Marker = ({
   onFocus = () => null,
   onHover = () => null,
   zIndex,
-  hasPinUrl,
+  hasPinUrl = false,
 }: MarkerProps): JSX.Element | null => {
   const { map, provider } = useContext(MapContext) as MapContextType;
   const cluster = useContext(ClustererContext);
 
   const marker: MapPin = useMemo(() => {
     return new MapPinOptions()
-      .withCoordinate(coordinate)
+      .withCoordinate(coordinate as Coordinate)
       .withHideOffscreen(hideOffscreen)
       .withProvider(provider)
       .withHasPinUrl(hasPinUrl)
@@ -49,7 +51,9 @@ export const Marker = ({
     if (zIndex !== 0 && !zIndex) {
       return;
     }
-    const wrapper: HTMLDivElement = marker.getProviderPin().getWrapperElement();
+    const wrapper: HTMLElement | null = (
+      marker.getProviderPin() as HTMLProviderPin
+    ).getWrapperElement();
     if (wrapper) {
       wrapper.style.zIndex = zIndex.toString();
     }
@@ -88,7 +92,7 @@ export const Marker = ({
   const elementToRender = children ? children : icon;
 
   if (elementToRender) {
-    const pinEl = marker.getProviderPin().getPinElement();
+    const pinEl = (marker.getProviderPin() as HTMLProviderPin).getPinElement();
     Object.assign(pinEl.style, {
       height: "auto",
       width: "auto",

packages/pages-components/src/components/map/types.ts

@@ -1,7 +1,11 @@
-import type { Map as MapType } from "../../map/map.js";
+import type {
+  Map as MapType,
+  PaddingFunction,
+  PanHandler,
+  PanStartHandler,
+} from "../../map/map.js";
 import type { MapProvider } from "../../map/mapProvider.js";
 import type { MapPin } from "../../map/mapPin.js";
-import type { GeoBounds } from "../../map/geoBounds.js";
 import React from "react";
 
 export interface Coordinate {
@@ -24,16 +28,14 @@ export interface MapProps {
   defaultCenter?: Coordinate;
   defaultZoom?: number;
   mapRef?: React.MutableRefObject<MapType | null>;
-  padding?:
-    | number
-    | {
-        bottom: number | (() => number);
-        left: number | (() => number);
-        right: number | (() => number);
-        top: number | (() => number);
-      };
-  panHandler?: (previousBounds: GeoBounds, currentBounds: GeoBounds) => void;
-  panStartHandler?: (currentBounds: GeoBounds) => void;
+  padding?: {
+    bottom: number | PaddingFunction;
+    left: number | PaddingFunction;
+    right: number | PaddingFunction;
+    top: number | PaddingFunction;
+  };
+  panHandler?: PanHandler;
+  panStartHandler?: PanStartHandler;
   provider?: MapProvider;
   providerOptions?: { [key: string]: any };
   singleZoom?: number;

packages/pages-components/src/map/constants.ts

@@ -0,0 +1,17 @@
+enum Unit {
+  DEGREE = "deg",
+  KILOMETER = "km",
+  MILE = "mi",
+  RADIAN = "r",
+}
+
+enum Projection {
+  MERCATOR = "mercator",
+  SPHERICAL = "spherical",
+}
+
+const EARTH_RADIUS_MILES = 3959;
+
+const EARTH_RADIUS_KILOMETERS = 6371;
+
+export { Unit, Projection, EARTH_RADIUS_MILES, EARTH_RADIUS_KILOMETERS };