Upgrade to Storybook 7

.github/workflows/node-ci.yml

@@ -5,12 +5,14 @@ jobs:
       - 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
@@ -19,10 +21,17 @@ jobs:
         run: yarn check:i18n-en-fr
       - name: Type check
         run: yarn typescript
-      - name: Run tests
+      - name: Run unit tests
         run: yarn unit
-      - name: Run a11y tests
-        run: yarn a11y-test
+      - 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,13 +21,16 @@ 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)"
   ],
+  staticDirs: ['../public'],
+
   webpackFinal: async (config, { configType }) => {
     // This method is for altering Storybook's webpack configuration.
     // Add support for importing image files
@@ -42,7 +46,7 @@ module.exports = {
     // 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({
@@ -53,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.ts

@@ -0,0 +1,45 @@
+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" });
+}
+
+export { parameters }
+
+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/previewParameters.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;