Upgrade to sb 7

.storybook/main.js

@@ -1,18 +1,16 @@
 /* eslint-disable no-param-reassign */
 const webpack = require('webpack');
-
 module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  staticDirs: ['../static'],
  addons: ['@storybook/addon-essentials'],
- core: {
- builder: 'webpack5',
- },
  webpack: async (config) => {
- config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
+ config.module.rules[2].exclude = [/node_modules\/(?!(gatsby)\/)/];
+
+ console.log('config.module.rules', JSON.stringify(config.module.rules, null, 2));
 
  // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
- config.module.rules[0].use[0].options.plugins.push([
+ config.module.rules[2].use[0].options.plugins.push([
  require.resolve('babel-plugin-remove-graphql-queries'),
  {
  stage: config.mode === `development` ? 'develop-html' : 'build-html',
@@ -28,17 +26,21 @@ module.exports = {
  require.resolve('./useSiteMetadata')
  )
  );
-
  config.resolve.alias['../../../hooks/use-addons-search'] = require.resolve(
  './use-addons-search.mock.js'
  );
-
  config.plugins.unshift(
  new webpack.DefinePlugin({
  'process.env.GATSBY_ALGOLIA_API_KEY': JSON.stringify(process.env.GATSBY_ALGOLIA_API_KEY),
  })
  );
-
  return config;
  },
+ docs: {
+ autodocs: 'false',
+ },
+ features: {
+ legacyMdx1: true,
+ },
+ framework: '@storybook/react-webpack5',
 };

package.json

@@ -16,10 +16,10 @@
  "@google-cloud/bigquery": "^5.2.0",
  "@mdx-js/mdx": "^1.6.16",
  "@mdx-js/react": "^1.6.16",
- "@storybook/api": "^6.5.9",
+ "@storybook/api": "^7.0.27",
  "@storybook/components-marketing": "^2.1.1",
  "@storybook/design-system": "7.13.1",
- "@storybook/theming": "^6.5.9",
+ "@storybook/theming": "^7.0.27",
  "core-js": "^3.22.8",
  "date-fns": "^2.16.1",
  "date-fns-tz": "^2.0.0",
@@ -99,8 +99,8 @@
  "format": "prettier --write \"src/**/*.js\"",
  "lint": "eslint src .storybook --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
  "test": "jest",
- "storybook": "start-storybook -p 6006",
- "build-storybook": "build-storybook",
+ "storybook": "storybook dev -p 6006",
+ "build-storybook": "storybook build",
  "chromatic": "chromatic --project-token dd2oqshntir",
  "generate-types": "graphql-codegen --config graphql-types-codegen.yml",
  "build:functions": "netlify-lambda build src/functions",
@@ -117,15 +117,13 @@
  "@graphql-codegen/cli": "^1.9.1",
  "@graphql-codegen/introspection": "1.16.3",
  "@graphql-codegen/typescript": "^1.9.1",
- "@storybook/addon-actions": "^6.5.9",
- "@storybook/addon-essentials": "^6.5.9",
- "@storybook/builder-webpack5": "^6.5.9",
+ "@storybook/addon-actions": "^7.0.27",
+ "@storybook/addon-essentials": "^7.0.27",
  "@storybook/eslint-config-storybook": "^3.1.2",
- "@storybook/jest": "^0.0.10",
- "@storybook/manager-webpack5": "^6.5.9",
- "@storybook/react": "^6.5.9",
+ "@storybook/mdx1-csf": "^1.0.0",
+ "@storybook/react": "^7.0.27",
+ "@storybook/react-webpack5": "^7.0.27",
  "@storybook/testing-library": "^0.0.11",
- "@types/jest": "^27.0.0",
  "babel-preset-gatsby": "^2.16.0",
  "chromatic": "^6.14.0",
  "concurrently": "^5.3.0",
@@ -139,7 +137,7 @@
  "prettier": "^2.0.5",
  "prettier-eslint": "^11.0.0",
  "seedrandom": "^3.0.5",
- "storybook-addon-outline": "^1.4.2",
+ "storybook": "^7.0.27",
  "ts-jest": "^27.0.0",
  "webfontloader": "^1.6.28",
  "webpack": "^5.76.0"

src/components/basics/LazyLoad.tsx

@@ -1,9 +1,9 @@
 // Wrapper around react-lazyload that can be short-circuited for testing
 
-import React, { FunctionComponent } from 'react';
+import React, { FC } from 'react';
 import ReactLazyLoad from 'react-lazyload';
 
-const LazyLoad: any = ({ children, ...props }) => {
+const LazyLoad = ({ children, ...props }) => {
  if (LazyLoad.disabled) {
  return children;
  }