Version 1.4.0 (#411)

### Changes
- Added compatibility with PagesJS v1 (#400, #402, #404)
### Fixes
- Upgraded `@babel/traverse` version to address a vulnerability in the package (#409)

.github/workflows/coverage.yml

@@ -12,7 +12,7 @@ jobs:
   combined_coverage:
     uses: yext/slapshot-reusable-workflows/.github/workflows/coverage.yml@v1
     with:
-      test_script: npm run test
+      test_script: npm run build:css && npm run test
     secrets:
       caller_github_token: ${{ secrets.GITHUB_TOKEN }}
       MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}

.github/workflows/run-tests.yml

@@ -9,7 +9,7 @@ jobs:
   call_run_tests-react-17:
     uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1
     with:
-      node_matrix: '["14.x", "16.x", "18.x"]'
+      node_matrix: '["16.x", "18.x"]'
     secrets:
       MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
 
@@ -19,6 +19,6 @@ jobs:
       build_script: |
         npm i -D react@16.14 react-dom@16.14
         npm run build
-      node_matrix: '["14.x", "16.x", "18.x"]'
+      node_matrix: '["16.x", "18.x"]'
     secrets:
       MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}

.github/workflows/update_snapshots.yml

@@ -0,0 +1,37 @@
+name: Update Snapshots
+
+on: pull_request
+
+jobs:
+  update_snapshots:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          ref: ${{ github.head_ref }}
+          token: ${{ secrets.BOT_REPO_SCOPED_TOKEN }}
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build
+      - run: ./tests/scripts/start-storybook.sh
+        env:
+          MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
+      - run: npm run update-snapshots
+      - name: Push changes
+        id: push-changes
+        uses: EndBug/add-and-commit@v9
+        with:
+          message: "Update snapshots"
+          add: ".storybook/snapshots/__snapshots__"
+          push: true
+          pull: --rebase --autostash
+          default_author: github_actions
+      - name: Fail job if push changes
+        if: steps.push-changes.outputs.pushed == 'true'
+        uses: actions/github-script@v3
+        with:
+          script: |
+            core.setFailed('Snapshot updates were made. A new commit with new snapshots was pushed.')

.github/workflows/wcag_test.yml

@@ -11,4 +11,4 @@ jobs:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
     with:
-      build_script: ./tests/scripts/start-storybook.sh
+      build_script: npm run build:css && ./tests/scripts/start-storybook.sh

.gitignore

@@ -3,6 +3,7 @@ node_modules/
 
 # production
 lib/
+dist/
 
 # testing
 /coverage

.storybook/main.ts

@@ -0,0 +1,58 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: [
+    '../tests/**/*.stories.tsx'
+  ],
+  features: {
+    storyStoreV7: false,
+  },
+  addons: [
+    '@etchteam/storybook-addon-status',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    {
+      name: '@storybook/addon-coverage',
+      options: {
+        istanbul: {
+          include: ['src/components/**']
+        }
+      }
+    },
+  ],
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+
+  staticDirs: ['./public'],
+
+  webpackFinal: async (config) => ({
+    ...config,
+    resolve: {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        './SearchCore': require.resolve('../tests/__fixtures__/core/SearchCore.ts'),
+        '../utils/location-operations': require.resolve('../tests/__fixtures__/utils/location-operations.ts')
+      },
+    }
+  }),
+
+  env: (config) => {
+    const mapboxApiKey = process.env.MAPBOX_API_KEY || process.env.REACT_APP_MAPBOX_API_KEY;
+    return {
+      ...config,
+      ...(mapboxApiKey && { REACT_APP_MAPBOX_API_KEY: mapboxApiKey })
+    };
+  },
+
+  docs: {
+    autodocs: true
+  }
+};
+
+export default config;

.storybook/manager.ts

@@ -0,0 +1,5 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  theme: require('./yextTheme.ts')
+});

.storybook/preview.js → .storybook/preview.ts

@@ -1,7 +1,7 @@
-import './index.css';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { SearchCoreDecorator } from '../tests/__fixtures__/core/SearchCore';
 import { runOnly } from './wcagConfig';
+import '../lib/bundle.css';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

.storybook/snapshots/main.ts

@@ -0,0 +1,9 @@
+import baseConfig from '../main';
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  ...baseConfig,
+  stories: baseConfig.stories.map((glob) => `../${glob}`),
+};
+
+export default config;

.storybook/snapshots/test-runner.ts

@@ -0,0 +1,37 @@
+import { Page } from 'playwright-core';
+import { TestRunnerConfig, TestContext } from '@storybook/test-runner';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+const customSnapshotsDir = `${process.cwd()}/.storybook/snapshots/__snapshots__`;
+
+/**
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * to learn more about the test-runner hooks API.
+ */
+const renderFunctions: TestRunnerConfig = {
+  setup() {
+    expect.extend({ toMatchImageSnapshot });
+  },
+  async postVisit(page: Page, context: TestContext) {
+    if (context.id === 'locationbias--loading') {
+      return;
+    }
+
+    const isMapboxMapStory = context.id.startsWith('mapboxmap--');
+    if (isMapboxMapStory) {
+      await page.waitForTimeout(7500);
+    }
+
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot({
+      customSnapshotsDir,
+      customSnapshotIdentifier: context.id,
+      failureThreshold: context.id === 'geolocation--loading' || isMapboxMapStory
+        ? 0.005
+        : 0,
+      failureThresholdType: 'percent'
+    });
+  },
+};
+
+export default renderFunctions;

.storybook/wcag/main.ts

@@ -0,0 +1,9 @@
+import baseConfig from '../main';
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  ...baseConfig,
+  stories: baseConfig.stories.map((glob) => `../${glob}`),
+};
+
+export default config;

.storybook/test-runner.ts → .storybook/wcag/test-runner.ts

@@ -1,22 +1,25 @@
 import { injectAxe, checkA11y } from 'axe-playwright';
 import { Page } from 'playwright-core';
-import { runOnly } from './wcagConfig';
+import { runOnly } from '../wcagConfig';
 import { TestContext, TestRunnerConfig } from '@storybook/test-runner';
 
 /**
  * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
  * to learn more about the test-runner hooks API.
  */
 const renderFunctions: TestRunnerConfig = {
-  async preRender(page: Page) {
+  async preVisit(page: Page) {
     await injectAxe(page);
   },
-  async postRender(page: Page, context: TestContext) {
+  async postVisit(page: Page, context: TestContext) {
     await checkA11y(
       page,
       {
-        include: ['#root'],
-        exclude: ['#root .mapboxgl-canvas-container'],
+        exclude: [
+          '#root .mapboxgl-canvas-container',
+          '.mapboxgl-marker',
+          '.mapboxgl-popup-close-button'
+        ],
       },
       {
         axeOptions: {
@@ -34,4 +37,4 @@ const renderFunctions: TestRunnerConfig = {
   },
 };
 
-export default renderFunctions;
+export default renderFunctions;

.storybook/wcagConfig.ts

@@ -1,6 +1,6 @@
-import { axeOptionsConfig } from 'axe-playwright';
+import { RunOnly } from 'axe-core';
 
-export const runOnly: axeOptionsConfig['axeOptions']['runOnly'] = {
+export const runOnly: RunOnly = {
   type: 'tag',
   values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']
 };

.storybook/yextTheme.cjs → .storybook/yextTheme.ts

@@ -1,4 +1,4 @@
-const { create } = require('@storybook/theming');
+import { create } from '@storybook/theming';
 
 module.exports = create({
   base: 'light',