docs(MapboxMap): add storybook stories

.storybook/preview.js

@@ -1,4 +1,5 @@
 import './index.css';
+import 'mapbox-gl/dist/mapbox-gl.css';
 import { SearchCoreDecorator } from '../tests/__fixtures__/core/SearchCore';
 import { runOnly } from './wcagConfig';
 
@@ -35,7 +36,8 @@ export const parameters = {
         'SpellCheck',
         'ResultsCount',
         'LocationBias',
-        'Dropdown'
+        'Dropdown',
+        'MapboxMap',
       ]
     }
   }

.storybook/tailwind.config.cjs

@@ -4,5 +4,10 @@ module.exports = {
   ...tailwindConfig,
   content: [
     './src/**/*.{ts,tsx}'
-  ]
+  ],
+  safelist: [
+    {
+      pattern: /^(.*?)/,
+    },
+  ],
 };

sample.env

@@ -0,0 +1 @@
+REACT_APP_MAPBOX_API_KEY=[[Your Mapbox API Key]]

src/components/MapboxMap.tsx

@@ -9,7 +9,7 @@ import ReactDOM from 'react-dom';
  *
  * @public
  */
-export type PinComponent<T> = (props: { result?: Result<T>, index?: number }) => JSX.Element;
+export type PinComponent<T> = (props: { result: Result<T>, index: number, mapbox: Map }) => JSX.Element;
 
 /**
  * A function use to derive a result's coordinate.
@@ -132,7 +132,7 @@ export function MapboxMap<T>({
           const el = document.createElement('div');
           const markerOptions: MarkerOptions = {};
           if (PinComponent) {
-            ReactDOM.render(<PinComponent result={result} index={i} />, el);
+            ReactDOM.render(<PinComponent result={result} index={i} mapbox={mapbox} />, el);
             markerOptions.element = el;
           }
           const marker = new Marker(markerOptions)

test-site/src/components/MapPin.tsx

@@ -1,9 +1,48 @@
-import { PinComponent } from '@yext/search-ui-react';
+import { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Map, Popup, LngLatLike } from 'mapbox-gl';
+import { PinComponent, Coordinate } from '@yext/search-ui-react';
+import { Result } from '@yext/search-headless-react';
 import { Location } from '../pages/LocationsPage';
+import { MapPopup } from './MapPopup';
+
+interface MapPinProps {
+  result: Result<Location>
+  index: number
+  mapbox: Map
+}
+
+const transformToMapboxCoord = (coordinate: Coordinate): LngLatLike => ({
+  lng: coordinate.longitude,
+  lat: coordinate.latitude,
+});
+
+export const MapPin: PinComponent<Location> = (props: MapPinProps) => {
+  const popupRef = useRef(new Popup({ offset: 15 }));
+  const initialRender = useRef(true);
+  const [active, setActive] = useState(false);
+
+  useEffect(() => {
+    if (!initialRender.current && active) {
+      const popup = document.createElement('div');
+      ReactDOM.render(<MapPopup entity={props.result} />, popup);
+      popupRef.current
+        .setLngLat(coordinate)
+        .setDOMContent(popup)
+        .addTo(props.mapbox);
+    }
+    initialRender.current = false;
+  }, [active]);
+
+  const yextCoordinate: Location["yextDisplayCoordinate"] = props.result.rawData.yextDisplayCoordinate;
+  if (!yextCoordinate) return <></>;
+  const coordinate = transformToMapboxCoord(yextCoordinate);
 
-export const MapPin: PinComponent<Location> = () => {
   return (
-    <div className='relative z-10'>
+    <button
+      className='relative z-10'
+      onClick={() => setActive(!active)}
+    >
       <svg
         className='z-40 fill-slate-800 hover:fill-slate-500 stroke-2 stroke-white'
         width="33" height="42"
@@ -13,6 +52,6 @@ export const MapPin: PinComponent<Location> = () => {
       >
         <path d="M30 15.0882C30 23.4212 23.3333 30.7353 15 38C7.22222 31.2941 0 23.4212 0 15.0882C0 6.75523 6.71573 0 15 0C23.2843 0 30 6.75523 30 15.0882Z" />
       </svg>
-    </div>
+    </button>
   );
 };

test-site/src/components/MapPopup.tsx

@@ -0,0 +1,14 @@
+import { Result } from '@yext/search-headless-react';
+import { Location } from '../pages/LocationsPage';
+
+interface MapPopupProps {
+  entity: Result<Location>
+}
+
+export const MapPopup = ({ entity }: MapPopupProps) => {
+  return (
+    <div>
+      {entity.name}
+    </div>
+  );
+}

test-site/src/pages/LocationsPage.tsx

@@ -10,16 +10,14 @@ import {
   Pagination,
   MapboxMapProps,
   OnDragHandler,
+  Coordinate
 } from '@yext/search-ui-react';
 import { LngLat, LngLatBounds } from 'mapbox-gl';
 import { useCallback, useLayoutEffect } from 'react';
 import { MapPin } from '../components/MapPin';
 
 export interface Location {
-  yextDisplayCoordinate: {
-    latitude: number,
-    longitude: number
-  } | undefined
+  yextDisplayCoordinate: Coordinate | undefined
 }
 
 const mapboxOptions: MapboxMapProps<Location>['mapboxOptions'] = {

tests/components/MapboxMap.stories.tsx

@@ -0,0 +1,88 @@
+import { useCallback } from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { SearchHeadlessContext, Source } from '@yext/search-headless-react';
+
+import { generateMockedHeadless } from '../__fixtures__/search-headless';
+import { MapboxMap, MapboxMapProps } from '../../src/components/MapboxMap';
+import { MapPin } from '../../test-site/src/components/MapPin';
+
+const meta: ComponentMeta<typeof MapboxMap<Location>> = {
+  title: 'MapboxMap',
+  component: MapboxMap,
+  argTypes: {
+    mapboxAccessToken: {
+      defaultValue: process.env.REACT_APP_MAPBOX_API_KEY,
+      control: {
+        type: null,
+      }
+    }
+  },
+  parameters: { layout: 'fullscreen' },
+  decorators: [(Story) => (<div className="h-screen"><Story /></div>)]
+};
+export default meta;
+
+const mockedHeadlessState = {
+  vertical: {
+    results: [
+      {
+        name: 'title1',
+        rawData: {
+          name: 'title1',
+          description: 'text1',
+          yextDisplayCoordinate: {
+            latitude: 40.741611,
+            longitude: -74.005371,
+          }
+        },
+        source: Source.KnowledgeManager,
+        id: 'id1'
+      }
+    ],
+    resultsCount: 1,
+    limit: 1
+  }
+};
+
+// Deep copy state to make an alternative with multiple locations
+let mockedHeadlessStateMultiple = JSON.parse(JSON.stringify(mockedHeadlessState));
+mockedHeadlessStateMultiple.vertical.results.push(
+  {
+    name: 'title2',
+    rawData: {
+      name: 'title2',
+      description: 'text2',
+      yextDisplayCoordinate: {
+        latitude: 40.641611,
+        longitude: -74.005371,
+      }
+    },
+    source: Source.KnowledgeManager,
+    id: 'id2'
+  }
+);
+
+export const Primary = (args: MapboxMapProps<Location>) => {
+  return (
+    <SearchHeadlessContext.Provider value={generateMockedHeadless(mockedHeadlessState)}>
+      <MapboxMap {...args} />
+    </SearchHeadlessContext.Provider>
+  );
+};
+
+export const MultiplePins = (args: MapboxMapProps<Location>) => {
+  return (
+    <SearchHeadlessContext.Provider value={generateMockedHeadless(mockedHeadlessStateMultiple)}>
+      <MapboxMap {...args} />
+    </SearchHeadlessContext.Provider>
+  );
+};
+
+export const CustomPin = (args: MapboxMapProps<Location>) => {
+  return (
+    <SearchHeadlessContext.Provider value={generateMockedHeadless(mockedHeadlessState)}>
+      <MapboxMap PinComponent={MapPin} {...args} />
+    </SearchHeadlessContext.Provider>
+  );
+};
+