docs(MapboxMap): add storybook stories

.github/workflows/percy-snapshots.yml

@@ -13,3 +13,4 @@ jobs:
       percy_script: npx percy storybook ./storybook-static
     secrets:
       PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}

.github/workflows/run-linting.yml

@@ -2,7 +2,7 @@ name: Run Linter
 
 on:
   pull_request:
-    branches: [main, develop]
+    branches: [main, develop, feature/*]
 
 jobs:
   linting:

.storybook/main.js

@@ -33,5 +33,9 @@ module.exports = {
     config.resolve.alias['./SearchCore'] = require.resolve('../tests/__fixtures__/core/SearchCore.ts');
     config.resolve.alias['../utils/location-operations'] = require.resolve('../tests/__fixtures__/utils/location-operations.ts');
     return config;
-  }
+  },
+  env: (config) => ({
+    ...config,
+    REACT_APP_MAPBOX_API_KEY: process.env.MAPBOX_API_KEY || process.env.REACT_APP_MAPBOX_API_KEY,
+  }),
 };

.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';
 
@@ -22,6 +23,7 @@ export const parameters = {
         'SearchBar',
         'UniversalResults',
         'VerticalResults',
+        'MapboxMap',
         'DirectAnswer',
         'FilterSearch',
         'StaticFilters',
@@ -42,4 +44,4 @@ export const parameters = {
 };
 
 // Add the decorator to all stories
-export const decorators = [SearchCoreDecorator];
+export const decorators = [SearchCoreDecorator];

docs/search-ui-react.pincomponent.md

@@ -10,7 +10,8 @@ A functional component that can be used to render a custom marker on the map.
 
 ```typescript
 export declare type PinComponent<T> = (props: {
-    result?: Result<T>;
-    index?: number;
+    index: number;
+    mapbox: Map;
+    result: Result<T>;
 }) => JSX.Element;
 ```

etc/search-ui-react.api.md

@@ -13,6 +13,7 @@ import { DirectAnswer as DirectAnswer_2 } from '@yext/search-headless-react';
 import { HighlightedValue } from '@yext/search-headless-react';
 import { LngLat } from 'mapbox-gl';
 import { LngLatBounds } from 'mapbox-gl';
+import { Map as Map_2 } from 'mapbox-gl';
 import { MapboxOptions } from 'mapbox-gl';
 import { Matcher } from '@yext/search-headless-react';
 import { NumberRangeValue } from '@yext/search-headless-react';
@@ -419,8 +420,9 @@ export interface PaginationProps {
 
 // @public
 export type PinComponent<T> = (props: {
-    result?: Result<T>;
-    index?: number;
+    index: number;
+    mapbox: Map_2;
+    result: Result<T>;
 }) => JSX.Element;
 
 // @public

sample.env

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

src/components/MapboxMap.tsx

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