chore(dependencies): switched to safest newest dependencies (nodejs#2610

)

chore(react): upgrade to react 18 and forced compatibility

fix(jest): fix jest reading cache folder

chore(tests): updated tests for dark theme

chore(snapshots): updated snapshots

chore(storybook): remove deprecated parts and removed unnecessary override

.eslintrc.js

@@ -1,5 +1,9 @@
 module.exports = {
-  extends: ['airbnb', 'plugin:prettier/recommended'],
+  extends: [
+    'airbnb',
+    'plugin:prettier/recommended',
+    'plugin:storybook/recommended',
+  ],
   env: {
     browser: true,
     node: true,

.storybook/main.js

@@ -1,22 +1,31 @@
-// some config came from https://dev.to/romansorin/integrating-gatsby-tailwind-and-storybook-2cbi
-
 module.exports = {
   stories: ['../stories/**/*.stories.js', '../stories/**/*.stories.tsx'],
   addons: ['@storybook/addon-actions', '@storybook/addon-links'],
-  core: {
-    builder: 'webpack5',
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: { fastRefresh: true },
   },
+  core: { builder: 'webpack5' },
+  // Some of this configuration was taken from https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/
   webpackFinal: async config => {
+    // Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
+    config.module.rules[2].use[0].options.plugins.push(
+      require.resolve('babel-plugin-remove-graphql-queries')
+    );
+
     // 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-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'),
       require.resolve('@babel/plugin-proposal-private-methods'),
@@ -30,8 +39,10 @@ module.exports = {
         },
       ],
     ];
+
     // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
     config.resolve.mainFields = ['browser', 'module', 'main'];
+
     config.module.rules.push(
       {
         test: /\.(ts|tsx)$/,
@@ -69,18 +80,23 @@ module.exports = {
         ],
       }
     );
+
     config.resolve.extensions.push('.ts', '.tsx');
 
     // Use SVGR for SVG files
     const fileLoaderRule = config.module.rules.find(rule =>
       rule.test.test('.svg')
     );
+
     fileLoaderRule.exclude = /\.svg$/;
+
     config.module.rules.push({
       test: /\.svg$/,
       use: ['@svgr/webpack', 'url-loader'],
     });
 
+    config.performance.hints = false;
+
     return config;
   },
 };

.storybook/preview.js

@@ -15,7 +15,6 @@ global.__BASE_PATH__ = '';
 
 // Navigating through a gatsby app using gatsby-link or any other gatsby component will use the `___navigate` method.
 // In Storybook it makes more sense to log an action than doing an actual navigate. Checkout the actions addon docs for more info: https://github.com/storybookjs/storybook/tree/master/addons/actions.
-
 window.___navigate = pathname => {
   action('NavigateTo:')(pathname);
 };

gatsby-config.js

@@ -18,9 +18,8 @@ module.exports = {
   },
   plugins: [
     'gatsby-plugin-catch-links',
-    'gatsby-plugin-dark-mode',
+    '@skagami/gatsby-plugin-dark-mode',
     'gatsby-transformer-yaml',
-    'gatsby-plugin-react-helmet',
     `gatsby-remark-images`,
     {
       resolve: 'gatsby-plugin-canonical-urls',