Merge branch 'main' into 357-improve-page-titles-frames-iFrames-acces…

…sibility

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     "prettier",
     "prettier/@typescript-eslint",
     "prettier/react",
+    "plugin:storybook/recommended",
   ],
   env: {
     node: true,

.github/workflows/deploy-production.yml

@@ -8,9 +8,9 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: actions/setup-node@v2-beta
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version-file: .nvmrc
 
       - uses: actions/cache@v2
         with:

.github/workflows/deploy-staging.yml

@@ -11,9 +11,9 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: actions/setup-node@v2-beta
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version-file: .nvmrc
 
       - uses: actions/cache@v2
         with:

.github/workflows/deploy-storybook.yml

@@ -11,9 +11,9 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version-file: .nvmrc
 
       - uses: actions/cache@v2
         with:

.github/workflows/test.yml

@@ -7,9 +7,9 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: actions/setup-node@v2-beta
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version-file: .nvmrc
 
       - uses: actions/cache@v2
         with:
@@ -32,3 +32,6 @@ jobs:
 
       - name: Run tests
         run: npm run test
+
+      - name: Check build-storybook
+        run: npm run build-storybook

.gitignore

@@ -22,7 +22,7 @@ jspm_packages/
 # gatsby files
 .cache/
 public
-src/__generated__/
+src/gatsby-types.d.ts
 
 # Storybook files
 /storybook-static

.nvmrc

@@ -1 +1 @@
-v14.13.0
+v18.18.0

.storybook/main.js

@@ -4,36 +4,26 @@ const postcssCustomMedia = require("postcss-custom-media");
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
-  core: {
-    builder: "webpack5",
-  },
-  features: {
-    // Explicitly disable Storybook's PostCSS loader, since we already
-    // explicitly use Gatsby's PostCSS loader. This setting can be removed after
-    // upgrading to Storybook 7.0, where the shim for automatically adding
-    // Storybook's PostCSS loader will be removed.
-    // https://github.com/storybookjs/storybook/blob/v6.2.9/MIGRATION.md#deprecated-implicit-postcss-loader
-    postcss: false,
-  },
+
   webpackFinal: async (config) => {
     // Disable no-param-reassign because this API is designed to mutate the
     // config argument.
     /* eslint-disable no-param-reassign */
 
     // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
-    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
+    config.module.rules[2].exclude = [/node_modules\/(?!(gatsby)\/)/];
 
     // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
-    config.module.rules[0].use[0].loader = require.resolve("babel-loader");
+    config.module.rules[2].use[0].loader = require.resolve("babel-loader");
 
     // use @babel/preset-react for JSX and env (instead of staged presets)
-    config.module.rules[0].use[0].options.presets = [
+    config.module.rules[2].use[0].options.presets = [
       require.resolve("@babel/preset-typescript"),
       require.resolve("@babel/preset-react"),
       require.resolve("@babel/preset-env"),
     ];
 
-    config.module.rules[0].use[0].options.plugins = [
+    config.module.rules[2].use[0].options.plugins = [
       // use @babel/plugin-proposal-class-properties for class arrow functions
       require.resolve("@babel/plugin-proposal-class-properties"),
       // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
@@ -46,7 +36,7 @@ module.exports = {
     // configured for CSS Modules and one without.
     // https://github.com/webpack-contrib/css-loader/issues/362#issuecomment-648895096
     config.module.rules = config.module.rules.filter(
-      (r) => r.test.test && !r.test.test("file.css")
+      (r) => r.test?.test && !r.test.test("file.css")
     );
     config.module.rules.push({
       test: /\.module\.css$/,
@@ -112,4 +102,9 @@ module.exports = {
     return config;
     /* eslint-enable no-param-reassign */
   },
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
 };

docker-compose.yml

@@ -4,7 +4,7 @@ services:
     command: npm run start -- --host 0.0.0.0
     environment:
       - INTERNAL_STATUS_PORT=8001
-    image: node:14-alpine
+    image: node:18-alpine
     ports:
       - 8000:8000
       - 8001:8001
@@ -14,7 +14,7 @@ services:
 
   storybook:
     command: npm run storybook
-    image: node:14-alpine
+    image: node:18-alpine
     ports:
       - 6006:6006
     volumes:

gatsby-browser.js

@@ -4,8 +4,21 @@
 
 import { PrismicPreviewProvider } from "gatsby-plugin-prismic-previews";
 import * as React from "react";
-import "gatsby-plugin-prismic-previews/dist/styles.css";
+import { PrismicBlogPostPage } from "./src/pages/blog/{prismicBlogPost.uid}";
+import linkResolver from "./src/utils/linkResolver";
 
 export const wrapRootElement = ({ element }) => (
-  <PrismicPreviewProvider>{element}</PrismicPreviewProvider>
-)
+  <PrismicPreviewProvider
+    repositoryConfigs={[
+      {
+        repositoryName: "sheltertech",
+        linkResolver,
+        componentResolver: {
+          blog_post: PrismicBlogPostPage,
+        },
+      },
+    ]}
+  >
+    {element}
+  </PrismicPreviewProvider>
+);

gatsby-config.js

@@ -10,7 +10,6 @@ module.exports = {
     author: "ShelterTech",
   },
   plugins: [
-    "gatsby-plugin-react-helmet",
     "gatsby-plugin-ts-checker",
     {
       resolve: "gatsby-plugin-intercom-spa",
@@ -20,7 +19,6 @@ module.exports = {
         delay_timeout: 1000,
       },
     },
-    "gatsby-plugin-sass",
     "gatsby-transformer-sharp",
     "gatsby-plugin-sharp",
     "gatsby-plugin-image",
@@ -67,6 +65,12 @@ module.exports = {
         repositoryName: "sheltertech",
       },
     },
-    "gatsby-plugin-typegen",
   ],
+  graphqlTypegen: {
+    // Needed for CI so that the type stubs are available for type checking.
+    // They are otherwise only generated when running a development server, but
+    // it's difficult to start and stop the development server in a CI
+    // environment (hard to know when to send a Ctrl-C to the process in CI).
+    generateOnBuild: true,
+  },
 };

gatsby-ssr.js

@@ -4,8 +4,21 @@
 
 import { PrismicPreviewProvider } from "gatsby-plugin-prismic-previews";
 import * as React from "react";
-import "gatsby-plugin-prismic-previews/dist/styles.css";
+import { PrismicBlogPostPage } from "./src/pages/blog/{prismicBlogPost.uid}";
+import linkResolver from "./src/utils/linkResolver";
 
 export const wrapRootElement = ({ element }) => (
-  <PrismicPreviewProvider>{element}</PrismicPreviewProvider>
-)
+  <PrismicPreviewProvider
+    repositoryConfigs={[
+      {
+        repositoryName: "sheltertech",
+        linkResolver,
+        componentResolver: {
+          blog_post: PrismicBlogPostPage,
+        },
+      },
+    ]}
+  >
+    {element}
+  </PrismicPreviewProvider>
+);

jest.config.js

@@ -5,9 +5,15 @@ module.exports = {
   moduleNameMapper: {
     ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
     ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
+    // Needed to work around issue with module imports between Jest and Gatsby
+    // https://github.com/gatsbyjs/gatsby/discussions/34803#discussioncomment-2408817
+    "^gatsby-core-utils/(.*)$": `gatsby-core-utils/dist/$1`, // Workaround for https://github.com/facebook/jest/issues/9771
+    "^gatsby-page-utils/(.*)$": `gatsby-page-utils/dist/$1`, // Workaround for https://github.com/facebook/jest/issues/9771
   },
   testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
-  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
+  transformIgnorePatterns: [
+    `node_modules/(?!(gatsby|gatsby-script|gatsby-link)/)`,
+  ],
   globals: {
     __PATH_PREFIX__: ``,
   },