Merge branch 'master' into alpha

# Conflicts:
#	.github/workflows/node-ci.yml
#	__snapshots__/storybook.test.ts.snap
#	packages/base-map/package.json
#	packages/core-utils/package.json
#	packages/core-utils/src/itinerary.ts
#	packages/endpoints-overlay/i18n/ko.yml
#	packages/endpoints-overlay/i18n/ru.yml
#	packages/endpoints-overlay/i18n/tl.yml
#	packages/endpoints-overlay/i18n/zh_Hans.yml
#	packages/geocoder/package.json
#	packages/icons/package.json
#	packages/itinerary-body/i18n/es.yml
#	packages/itinerary-body/package.json
#	packages/location-field/package.json
#	packages/map-popup/i18n/es.yml
#	packages/map-popup/package.json
#	packages/otp2-tile-overlay/package.json
#	packages/printable-itinerary/package.json
#	packages/route-viewer-overlay/package.json
#	packages/stops-overlay/package.json
#	packages/transitive-overlay/package.json
#	packages/trip-details/i18n/es.yml
#	packages/trip-details/package.json
#	packages/trip-form/i18n/en-US.yml
#	packages/trip-form/package.json
#	packages/types/package.json

Author: miles-grant-ibigroup

.github/workflows/node-ci.yml

@@ -1,16 +1,37 @@
 jobs:
   test-build-release:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v2
         with:
           persist-credentials: false
-      - name: Use Node.js 16.x
+      - name: Use Node.js 21.x
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 21.x
       - name: Install npm packages using cache
         uses: bahmutov/npm-install@v1
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Lint code
+        run: yarn lint:js
+      - name: Lint styles
+        run: yarn lint:styles
+      - name: i18n check (en-US, fr only)
+        run: yarn check:i18n-en-fr
+      - name: Type check
+        run: yarn typescript
+      - name: Run unit tests
+        run: yarn unit
+      - name: Build Storybook
+        run: yarn build-storybook --quiet
+      - name: Serve Storybook and run test runner
+        # env: 
+        #   ONLY_RUN: SNAPSHOTS
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 5555 --silent" \
+            "npx wait-on tcp:5555 && yarn test-storybook --ci"
       - env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.storybook/main.js

@@ -1,13 +1,14 @@
+import { dirname, join } from "path";
 const path = require("path");
 
 module.exports = {
   addons: [
-    "@storybook/addon-a11y",
-    "@storybook/addon-actions",
-    "@storybook/addon-docs",
-    "@storybook/addon-essentials",
-    "@storybook/addon-knobs",
-    "@storybook/addon-links",
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-actions"),
+    getAbsolutePath("@storybook/addon-docs"),
+    getAbsolutePath("@storybook/addon-controls"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-links"),
     {
       name: '@storybook/addon-storysource',
       options: {
@@ -20,20 +21,32 @@ module.exports = {
         }
       }
     },
-    "@storybook/addon-viewport",
-    "storybook-react-intl"
+    getAbsolutePath("@storybook/addon-viewport"),
+    "@danielhep/storybook-react-intl"
   ],
+
   stories: [
     "../packages/**/*.story.mdx",
-    "../packages/**/*.story.@(js|jsx|ts|tsx)"
+    "../packages/*/src/**/*.story.@(js|jsx|ts|tsx)"
   ],
+  staticDirs: ['../public'],
+
   webpackFinal: async (config, { configType }) => {
     // This method is for altering Storybook's webpack configuration.
-
+    // Add support for importing image files
+    config.module.rules.push({
+      test: /\.(png|jpg|gif|svg)$/,
+      use: [
+        {
+          loader: 'file-loader',
+        },
+      ],
+      include: path.resolve(__dirname, './packages/transitive-overlay/src/images'),
+    });
     // Add support for importing YAML files.
     config.module.rules.push({
       test: /\.(yml|yaml)$/,
-      loader: ["json-loader", "yaml-loader"]
+      loader: "yaml-loader"
     });
 
     config.module.rules.push({
@@ -44,17 +57,28 @@ module.exports = {
 
     config.module.rules.push({
       test: /uFuzzy/,
-      use: {
-        loader: 'babel-loader',
-        options: {
-          presets: [
-            ['@babel/preset-env', { targets: 'defaults' }]
-          ]
-        }
+      loader: 'babel-loader',
+      options: {
+        presets: [
+          ['@babel/preset-env', { targets: 'defaults' }]
+        ]
       }
     })
 
     // Return the altered config
     return config;
+  },
+
+  framework: {
+    name: getAbsolutePath("@storybook/react-webpack5"),
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
   }
+}
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
 }

.storybook/manager.js

@@ -6,5 +6,7 @@ addons.setConfig({
     // nested hierarchies.
     // See https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#roots
     showRoots: false
-  }
+  },
+  showPanel: true,
+  panelPosition: "bottom",
 })

.storybook/preview.js

@@ -0,0 +1,43 @@
+import { setupWorker } from "msw/browser";
+
+import locationFieldHandlers from "../packages/location-field/src/mocks/handlers";
+import itineraryBodyHandlers from "../packages/itinerary-body/src/__mocks__/handlers";
+import geocoderHandlers from "../packages/geocoder/src/test-fixtures/handlers";
+import tileLayerHandlers from '../packages/otp2-tile-overlay/src/mocks/handlers'
+import baseMapHandlers from '../packages/base-map/src/mocks/handlers';
+import parameters from './previewParameters'
+
+import { reactIntl } from './react-intl.ts';
+import { Preview } from "@storybook/react";
+import { mockDateDecorator } from "storybook-mock-date-decorator";
+
+// Only install worker when running in browser
+if (typeof global.process === "undefined") {
+  const worker = setupWorker(
+    ...locationFieldHandlers,
+    ...itineraryBodyHandlers,
+    ...geocoderHandlers,
+    ...tileLayerHandlers,
+    ...baseMapHandlers
+  );
+  worker.start({ onUnhandledRequest: "bypass" });
+}
+
+const preview: Preview = {
+  decorators: [mockDateDecorator],
+  globals: {
+    locale: reactIntl.defaultLocale,
+    locales: {
+      "en-US": { title: "English (US)" },
+      fr: { title: "Français" },
+      es: { title: "Español" },
+      vi: { title: "Tiếng Việt" },
+      ko: { title: "한국어" },
+      zh: { title: "中文" },
+      unknown: { title: "Unsupported locale" }
+    }
+  },
+  parameters
+}
+
+export default preview

.storybook/preview.ts

@@ -0,0 +1,40 @@
+import { reactIntl } from './react-intl.ts';
+
+const parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          //  moved to technical backlog
+          id: "aria-required-parent",
+          reviewOnFail: true,
+        },
+        {
+          // Appears to be a story bug
+          id: "duplicate-id",
+          reviewOnFail: true
+        },
+        {
+          // Appears to be a story bug
+          id: "duplicate-id-aria",
+          reviewOnFail: true
+        },
+        {
+          // Not really applicable to stories and causes problems with the WithMap decorator
+          id: "landmark-unique", 
+          enabled: false
+        }
+      ],
+    },
+  },
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  reactIntl
+};
+
+export default parameters;

.storybook/previewParameters.ts

@@ -1,11 +1,6 @@
 import flatten from "flat";
 
-/**
- * Copied from https://stackoverflow.com/questions/50940640/how-to-determine-if-jest-is-running-the-code-or-not
- */
-export function isRunningJest() {
-    return process.env.JEST_WORKER_ID !== undefined;
-}
+export const isTestRunner = () => window.navigator.userAgent.match(/StorybookTestRunner/);
 
 /** Locale supported in the storybook "Globe" dropdown menu. */
 const locales = ["en-US", "fr", "es", "vi", "ko", "zh", "unknown"];
@@ -22,27 +17,26 @@ const packages = [
   "location-field",
   "printable-itinerary",
   "map-popup",
-  "stops-overlay",
   "transit-vehicle-overlay",
   "trip-details",
-  "trip-form",
-  "vehicle-rental-overlay"
+  "trip-form"
 ];
 
 /** Messages for all packages AND locales above. */
 const messages = {};
 
-if (!isRunningJest()) {
-  // Populate messages if not running snapshots.
-  // (Message printouts would be unnecessary replicated in snapshots without that check.)
+// Populate messages if not running snapshots.
+// (Message printouts would be unnecessary replicated in snapshots without that check.)
+if (typeof window !== "undefined") {
+
   packages.forEach((pkg) => {
     locales.forEach((locale) => {
       // Chinese-simplified is assigned a special file name by Weblate.
       const localeFile = locale === "zh" ? "zh_Hans" : locale;
       try {
         messages[locale] = {
           ...messages[locale],
-          ...flatten(require(`../packages/${pkg}/i18n/${localeFile}.yml`))
+          ...flatten(require(`../packages/${pkg}/i18n/${localeFile}.yml`).default)
         };
       } catch (e) {
         // There is no yml files for the "unknown" locale,
@@ -60,5 +54,6 @@ export const reactIntl = {
   defaultLocale: "en-US",
   formats,
   locales,
-  messages
+  messages,
+  timeZone: 'America/Los_Angeles'
 };