Revert babel changes and add test-storybook

.storybook/main.ts

@@ -5,19 +5,42 @@ module.exports = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-webpack5-compiler-babel'],
   staticDirs: ['../static'],
+  babel: () => ({
+    plugins: [
+      // Use @babel/plugin-proposal-class-properties for class arrow functions
+      require.resolve('@babel/plugin-transform-class-properties'),
+      require.resolve('@babel/plugin-proposal-private-property-in-object'),
+      require.resolve('@babel/plugin-proposal-private-methods'),
+      require.resolve('@babel/plugin-proposal-class-properties'),
+
+      // Use babel-plugin-remove-graphql-queries to remove graphql queries from components when rendering in Storybook
+      // While still rendering content from useStaticQuery in development mode
+      [
+        require.resolve('babel-plugin-remove-graphql-queries'),
+        {
+          stage: 'build-html',
+          staticQueryDir: 'page-data/sq/d',
+        },
+      ],
+    ],
+    presets: [
+      require.resolve('@babel/preset-react'),
+      [
+        require.resolve('@babel/preset-env'),
+        {
+          shippedProposals: true,
+          loose: false,
+        },
+      ],
+      require.resolve('@babel/preset-typescript'),
+    ],
+  }),
   webpackFinal: async (config) => {
+    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
     config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
-
-    // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
-    config.module.rules[0].use[0].options = { plugins: [] };
-    config.module.rules[0].use[0].options.plugins = [
-      require.resolve('babel-plugin-remove-graphql-queries'),
-      {
-        stage: config.mode === `development` ? 'develop-html' : 'build-html',
-        staticQueryDir: 'page-data/sq/d',
-      },
-    ];
-
+    // Use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
+    // config.module.rules[0].test = /\.(js(x)|ts(x))?$/;
+    // config.module.rules[0].use[0].loader = require.resolve('babel-loader');
     config.module.rules.push({
       test: /\.(js|ts)x?$/,
       // exclude: [/node_modules\/(?!(gatsby)\/)/],
@@ -27,15 +50,12 @@ module.exports = {
       },
       use: ['babel-loader'],
     }),
-      // TODO: Figure out why Gatsby is throwing this error:
-      // 'The result of this StaticQuery could not be fetched' & remove this alias.
       config.plugins.unshift(
         new webpack.NormalModuleReplacementPlugin(
           /lib\/useSiteMetadata/,
           require.resolve('./useSiteMetadata')
         )
       );
-
     config.resolve.alias['../../../hooks/use-addons-search'] = require.resolve(
       './use-addons-search.mock.js'
     );
@@ -50,12 +70,6 @@ module.exports = {
       tty: require.resolve('tty-browserify'),
       path: require.resolve('path-browserify'),
     };
-    // config.plugins.push(new NodePolyfillPlugin());
-    // config.resolve.fallback = {
-    //   os: false,
-    //   tty: false,
-    //   path: false,
-    // };
 
     return config;
   },

babel.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   presets: [
-    '@babel/preset-react',
     [
       'babel-preset-gatsby',
       {
@@ -9,19 +8,8 @@ module.exports = {
         },
       },
     ],
-    [
-      '@babel/preset-env',
-      {
-        shippedProposals: true,
-        loose: false,
-      },
-    ],
-    '@babel/preset-typescript',
   ],
   plugins: [
-    '@babel/plugin-proposal-private-property-in-object',
-    '@babel/plugin-proposal-private-methods',
-    '@babel/plugin-proposal-class-properties',
     [
       '@emotion',
       {

package.json

@@ -108,6 +108,7 @@
     "test": "jest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "test-storybook": "test-storybook",
     "chromatic": "chromatic --project-token dd2oqshntir",
     "generate-types": "graphql-codegen --config graphql-types-codegen.yml",
     "build:functions": "netlify-lambda build src/functions",
@@ -124,18 +125,19 @@
     "@graphql-codegen/cli": "^1.9.1",
     "@graphql-codegen/introspection": "1.16.3",
     "@graphql-codegen/typescript": "^1.9.1",
-    "@storybook/addon-actions": "^8.0.2",
-    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-actions": "^8.0.4",
+    "@storybook/addon-essentials": "^8.0.4",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
     "@storybook/eslint-config-storybook": "^4.0.0",
-    "@storybook/react": "^8.0.2",
-    "@storybook/react-webpack5": "^8.0.2",
-    "@storybook/test": "^8.0.2",
-    "@storybook/theming": "^8.0.2",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-webpack5": "^8.0.4",
+    "@storybook/test": "^8.0.4",
+    "@storybook/test-runner": "^0.17.0",
+    "@storybook/theming": "^8.0.4",
     "@types/jest": "^27.0.0",
     "@types/react": "^18",
-    "babel-preset-gatsby": "^2.16.0",
+    "babel-preset-gatsby": "^3.13.1",
     "chromatic": "^11.2.0",
     "concurrently": "^5.3.0",
     "dedent": "^0.7.0",
@@ -150,7 +152,7 @@
     "prettier": "^2.0.5",
     "prettier-eslint": "^11.0.0",
     "seedrandom": "^3.0.5",
-    "storybook": "^8.0.2",
+    "storybook": "^8.0.4",
     "storybook-addon-outline": "^1.4.2",
     "ts-jest": "^27.0.0",
     "tty-browserify": "^0.0.1",