upgrades including webpack 5

.eslintrc.js

@@ -10,8 +10,6 @@ module.exports = {
         '**/*.test.*',
         '**/*.stories.*',
         '**/storyshots/**/stories/**',
-        'docs/src/new-components/lib/StoryLinkWrapper.js',
-        'docs/src/stories/**',
       ],
       rules: {
         '@typescript-eslint/no-empty-function': 'off',

__mocks__/fs.js

@@ -1,4 +1,4 @@
-const fs = jest.genMockFromModule('fs');
+const fs = jest.createMockFromModule('fs');
 
 // This is a custom function that our tests can use during setup to specify
 // what the files on the "mock" filesystem should look like when any of the

addons/a11y/package.json

@@ -58,7 +58,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@testing-library/react": "^10.0.4",
+    "@testing-library/react": "^11.2.2",
     "@types/webpack-env": "^1.15.3"
   },
   "peerDependencies": {

addons/actions/package.json

@@ -45,7 +45,7 @@
     "fast-deep-equal": "^3.1.1",
     "global": "^4.3.2",
     "lodash": "^4.17.15",
-    "polished": "^3.4.4",
+    "polished": "^4.0.5",
     "prop-types": "^15.7.2",
     "react-inspector": "^5.0.1",
     "regenerator-runtime": "^0.13.7",

addons/docs/package.json

@@ -72,17 +72,17 @@
     "acorn-walk": "^7.0.0",
     "core-js": "^3.0.1",
     "doctrine": "^3.0.0",
-    "escodegen": "^1.12.0",
+    "escodegen": "^2.0.0",
     "fast-deep-equal": "^3.1.1",
     "global": "^4.3.2",
     "html-tags": "^3.1.0",
     "js-string-escape": "^1.0.1",
     "lodash": "^4.17.15",
-    "prettier": "~2.0.5",
+    "prettier": "~2.2.1",
     "prop-types": "^15.7.2",
     "react-element-to-jsx-string": "^14.3.1",
     "regenerator-runtime": "^0.13.7",
-    "remark-external-links": "^6.0.0",
+    "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2"
@@ -98,10 +98,10 @@
     "@types/cross-spawn": "^6.0.1",
     "@types/doctrine": "^0.0.3",
     "@types/enzyme": "^3.10.3",
-    "@types/estree": "^0.0.44",
-    "@types/jest": "^25.1.1",
+    "@types/estree": "^0.0.45",
+    "@types/jest": "^26.0.16",
     "@types/prop-types": "^15.5.9",
-    "@types/tmp": "^0.1.0",
+    "@types/tmp": "^0.2.0",
     "@types/util-deprecate": "^1.0.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-react-docgen": "^4.2.1",
@@ -114,11 +114,11 @@
     "require-from-string": "^2.0.2",
     "rxjs": "^6.5.4",
     "styled-components": "^5.0.1",
-    "terser-webpack-plugin": "^3.0.0",
+    "terser-webpack-plugin": "^5.0.3",
     "tmp": "^0.2.1",
     "tslib": "^2.0.0",
     "web-component-analyzer": "^1.0.3",
-    "webpack": "^4.44.2",
+    "webpack": "^5.9.0",
     "zone.js": "^0.11.3"
   },
   "peerDependencies": {
@@ -129,7 +129,7 @@
     "react-dom": "^16.8.0 || ^17.0.0",
     "sveltedoc-parser": "^3.0.4",
     "vue": "^2.6.10",
-    "webpack": ">=4"
+    "webpack": "*"
   },
   "peerDependenciesMeta": {
     "@storybook/vue": {

addons/docs/src/frameworks/angular/angular-properties.test.ts

@@ -35,6 +35,7 @@ describe('angular component properties', () => {
       const testDir = path.join(fixturesDir, testEntry.name);
       const testFile = fs.readdirSync(testDir).find((fileName) => inputRegExp.test(fileName));
       if (testFile) {
+        // eslint-disable-next-line jest/valid-title
         it(testEntry.name, () => {
           const inputPath = path.join(testDir, testFile);
 

addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx

@@ -1384,13 +1384,12 @@ describe('enhancePropTypesProp', () => {
         it(`should support inlined named React functional component with props for ${x}`, () => {
           const component = createTestComponent(null, x);
 
-          const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent({
-            foo,
-          }: {
-            foo: string;
-          }) {
-            return <div>{foo}</div>;
-          });
+          const { defaultValue } = extractPropDef(
+            component,
+            function InlinedFunctionalComponent({ foo }: { foo: string }) {
+              return <div>{foo}</div>;
+            }
+          );
 
           expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
           expect(defaultValue.detail).toBeUndefined();

addons/docs/src/frameworks/react/react-properties.test.ts

@@ -46,6 +46,7 @@ describe('react component properties', () => {
       const testDir = path.join(fixturesDir, testEntry.name);
       const testFile = fs.readdirSync(testDir).find((fileName) => inputRegExp.test(fileName));
       if (testFile) {
+        // eslint-disable-next-line jest/valid-title
         it(testEntry.name, () => {
           const inputPath = path.join(testDir, testFile);
 

addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx

@@ -489,13 +489,12 @@ describe('enhanceTypeScriptProp', () => {
         it(`should support inlined named React functional component with props for ${x}`, () => {
           const component = createTestComponent(null, x);
 
-          const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent({
-            foo,
-          }: {
-            foo: string;
-          }) {
-            return <div>{foo}</div>;
-          });
+          const { defaultValue } = extractPropDef(
+            component,
+            function InlinedFunctionalComponent({ foo }: { foo: string }) {
+              return <div>{foo}</div>;
+            }
+          );
 
           expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
           expect(defaultValue.detail).toBeUndefined();

addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/input.js

@@ -151,9 +151,7 @@ export class DemoWcCard extends LitElement {
   render() {
     return html`
       <div id="front" part="front">
-        <div class="header">
-          ${this.header}
-        </div>
+        <div class="header">${this.header}</div>
         <div class="content">
           <slot></slot>
         </div>
@@ -163,9 +161,7 @@ export class DemoWcCard extends LitElement {
         </div>
       </div>
       <div id="back" part="back">
-        <div class="header">
-          ${this.header}
-        </div>
+        <div class="header">${this.header}</div>
 
         <div class="content">
           ${this.rows.length === 0

addons/docs/src/frameworks/web-components/web-components-properties.test.ts

@@ -37,6 +37,7 @@ describe('web-components component properties', () => {
       const testDir = path.join(fixturesDir, testEntry.name);
       const testFile = fs.readdirSync(testDir).find((fileName) => inputRegExp.test(fileName));
       if (testFile) {
+        // eslint-disable-next-line jest/valid-title
         it(testEntry.name, () => {
           const inputPath = path.join(testDir, testFile);
 

addons/docs/src/mdx/mdx-compiler-plugin.test.js

@@ -31,6 +31,7 @@ describe('docs-mdx-compiler-plugin', () => {
     .filter((fileName) => inputRegExp.test(fileName))
     .filter((fileName) => fileName !== 'story-missing-props.mdx')
     .forEach((fixtureFile) => {
+      // eslint-disable-next-line jest/valid-title
       it(fixtureFile, async () => {
         const inputPath = path.join(transformFixturesDir, fixtureFile);
         const code = await generate(inputPath);

addons/essentials/package.json

@@ -51,7 +51,7 @@
   "devDependencies": {
     "@babel/core": "^7.9.6",
     "@storybook/vue": "6.2.0-alpha.2",
-    "@types/jest": "^25.1.1",
+    "@types/jest": "^26.0.16",
     "@types/webpack-env": "^1.15.3"
   },
   "peerDependencies": {
@@ -60,7 +60,7 @@
     "babel-loader": "^8.0.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "webpack": ">=4"
+    "webpack": "*"
   },
   "peerDependenciesMeta": {
     "@storybook/vue": {

addons/graphql/package.json

@@ -44,11 +44,11 @@
     "babel-loader": "^8.0.6",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "graphiql": "^0.17.5",
+    "graphiql": "^1.1.0",
     "graphql": "^15.0.0",
     "prop-types": "^15.7.2",
     "regenerator-runtime": "^0.13.7",
-    "webpack": "^4.44.2"
+    "webpack": "^5.9.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",

addons/graphql/src/preset.ts

@@ -12,7 +12,7 @@ export const managerWebpack = async (config: Configuration) => {
     test: /\.js$/,
     use: [
       {
-        loader: require.resolve('babel-loader'),
+        loader: require.resolve('babel-loader') as string,
         options: {
           sourceType: 'unambiguous',
           plugins: [[require.resolve('@babel/plugin-transform-classes'), { loose: true }]],

addons/graphql/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "types": ["webpack-env"]
+    "types": ["webpack-env", "node"]
   },
   "include": [
     "src/**/*"

addons/knobs/package.json

@@ -58,10 +58,10 @@
   },
   "devDependencies": {
     "@types/enzyme": "^3.10.5",
-    "@types/escape-html": "0.0.20",
+    "@types/escape-html": "1.0.0",
     "@types/react-color": "^3.0.1",
     "@types/react-lifecycles-compat": "^3.0.1",
-    "@types/react-select": "^3.0.12",
+    "@types/react-select": "^3.0.27",
     "@types/webpack-env": "^1.15.3",
     "enzyme": "^3.11.0"
   },

addons/links/src/react/components/RoutedLink.tsx

@@ -12,10 +12,9 @@ const LEFT_BUTTON = 0;
 const isPlainLeftClick = (e: React.MouseEvent) =>
   e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
 
-const RoutedLink: React.FC<React.DetailedHTMLProps<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  HTMLAnchorElement
->> = ({ href = '#', children, onClick, className, style }) => {
+const RoutedLink: React.FC<
+  React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+> = ({ href = '#', children, onClick, className, style }) => {
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     if (isPlainLeftClick(e)) {
       e.preventDefault();

addons/storyshots/storyshots-core/package.json

@@ -44,7 +44,7 @@
     "@storybook/client-api": "6.2.0-alpha.2",
     "@storybook/core": "6.2.0-alpha.2",
     "@types/glob": "^7.1.1",
-    "@types/jest": "^25.1.1",
+    "@types/jest": "^26.0.16",
     "@types/jest-specific-snapshot": "^0.5.3",
     "babel-plugin-require-context-hook": "^1.0.0",
     "core-js": "^3.0.1",

addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts

@@ -1,3 +1,4 @@
+/* eslint-disable jest/valid-title */
 /* eslint-disable jest/no-export */
 /* eslint-disable jest/expect-expect */
 import { describe, it } from 'global';
@@ -11,7 +12,7 @@ function snapshotTest({ item, asyncJest, framework, testMethod, testMethodParams
     it(
       name,
       () =>
-        new Promise((resolve, reject) =>
+        new Promise<void>((resolve, reject) =>
           testMethod({
             done: (error: any) => (error ? reject(error) : resolve()),
             story: item,

addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts

@@ -19,7 +19,7 @@ function setupAngularJestPreset() {
   // for emission of the TS decorations like 'design:paramtypes'
   try {
     jest.requireActual('jest-preset-angular/build/setupJest');
-  } catch(e) {
+  } catch (e) {
     jest.requireActual('jest-preset-angular/build/setup-jest');
   }
 }

addons/storyshots/storyshots-puppeteer/package.json

@@ -38,15 +38,15 @@
   "dependencies": {
     "@storybook/csf": "0.0.1",
     "@storybook/node-logger": "6.2.0-alpha.2",
-    "@types/jest-image-snapshot": "^2.8.0",
+    "@types/jest-image-snapshot": "^4.1.3",
     "@wordpress/jest-puppeteer-axe": "^1.5.0",
     "core-js": "^3.0.1",
     "jest-image-snapshot": "^4.0.2",
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
     "@storybook/csf": "0.0.1",
-    "@types/puppeteer": "^2.0.0"
+    "@types/puppeteer": "^5.4.0"
   },
   "peerDependencies": {
     "@storybook/addon-storyshots": "6.2.0-alpha.2",

addons/storysource/package.json

@@ -44,15 +44,15 @@
     "@storybook/source-loader": "6.2.0-alpha.2",
     "@storybook/theming": "6.2.0-alpha.2",
     "core-js": "^3.0.1",
-    "estraverse": "^4.2.0",
+    "estraverse": "^5.2.0",
     "loader-utils": "^2.0.0",
-    "prettier": "~2.0.5",
+    "prettier": "~2.2.1",
     "prop-types": "^15.7.2",
     "react-syntax-highlighter": "^13.5.0",
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
-    "@types/react": "^16.9.27",
+    "@types/react": "^17.0.0",
     "@types/react-syntax-highlighter": "^11.0.4"
   },
   "peerDependencies": {

app/angular/package.json

@@ -47,18 +47,18 @@
     "@types/webpack-env": "^1.15.3",
     "autoprefixer": "^9.7.6",
     "core-js": "^3.0.1",
-    "fork-ts-checker-webpack-plugin": "^4.0.3",
+    "fork-ts-checker-webpack-plugin": "^6.0.4",
     "global": "^4.3.2",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^4.1.0",
     "raw-loader": "^4.0.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "regenerator-runtime": "^0.13.7",
-    "sass-loader": "^8.0.0",
+    "sass-loader": "^10.1.0",
     "strip-json-comments": "3.1.1",
-    "ts-loader": "^6.0.1",
+    "ts-loader": "^8.0.11",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "webpack": "^4.44.2"
+    "webpack": "^5.9.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1100.1",
@@ -71,7 +71,7 @@
     "@angular/platform-browser": "^11.0.0",
     "@angular/platform-browser-dynamic": "^11.0.0",
     "@types/autoprefixer": "^9.4.0",
-    "@types/jest": "^25.1.1",
+    "@types/jest": "^26.0.16",
     "jest": "^26.0.0",
     "jest-preset-angular": "^8.3.2",
     "ts-jest": "^26.4.4"