Upgrade to React 18 (#2510)

* ⬆️ upgrade core-react dependencies

* 🔧 enable auto install peer dependencies

* ➖ removed peer deps that are noe auto-installed

* 🏷️ Fixed typing errors

* ⬆️ Upgraded lab packages

* 📸 Updated snapshots

* ⬆️ upgraded core-react to react 18

* ⬆️ upgraded utils to react 18

* 📸 Update snapshots

* 🚨 Fix linting warnings

* 💚 Fixed core-react lockfile

* 🔧 disable strict peer deps for react 18

* ⬆️ Upgraded lab to React 18

* ✅ Fixed snackbar test

* ➖ Removed @testing-library/react-hooks

* ➕ Updated core-react storybook to use webpack5

* ➕ updated lab storybook to use webpack 5

* ⏪ Rolled back mdx to v1 in lab storybook

* ➖ Removed unused dependency

* ✅ Fixed lab tests

* 🚨 Fixed linting warnings

* ⬆️ Updated core-react dependencies

* ⬆️ Updated lab-react dependencies

* ⬆️ Updated utils dependencies

* 🔖 Bumped dev version numbers for downstream testing

.npmrc

@@ -2,3 +2,5 @@ shared-workspace-shrinkwrap = true
 link-workspace-packages = false
 package-lock = true
 registry=https://registry.npmjs.org/
+auto-install-peers=true
+strict-peer-dependencies=false

packages/eds-core-react/.storybook/main.js

@@ -1,8 +1,5 @@
-const path = require('path')
-
 module.exports = {
   stories: [
-    '../stories/docs/*.stories.@(ts|tsx|mdx)',
     '../src/**/*.stories.@(ts|tsx|mdx)',
     '../stories/**/*.stories.@(ts|tsx|mdx)',
   ],
@@ -11,4 +8,11 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
   ],
+  features: {
+    interactionsDebugger: true, // enable playback controls
+  },
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
 }

packages/eds-core-react/CHANGELOG.md

@@ -5,6 +5,8 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.23.0] - 2022-10-03
+
 ## [0.22.0] - 2022-09-29
 
 ### Fixed

packages/eds-core-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.22.0",
+  "version": "0.23.0-dev.20221003",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -44,67 +44,65 @@
     "react"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.17.10",
-    "@babel/plugin-transform-runtime": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.19.1",
+    "@babel/plugin-transform-runtime": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@mdx-js/react": "1.6.22",
     "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@storybook/addon-a11y": "^6.4.22",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-docs": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/client-api": "^6.4.22",
-    "@storybook/react": "^6.4.22",
-    "@testing-library/dom": "^8.13.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "12.1.2",
-    "@testing-library/react-hooks": "7.0.2",
-    "@testing-library/user-event": "13.5.0",
-    "@types/jest": "^27.5.0",
-    "@types/ramda": "^0.28.12",
-    "@types/react": "^17.0.44",
-    "@types/react-dom": "^17.0.16",
-    "@types/styled-components": "^5.1.25",
-    "@types/testing-library__jest-dom": "^5.14.3",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^14.1.0",
+    "@storybook/addon-a11y": "^6.5.12",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-docs": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/client-api": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@testing-library/dom": "^8.18.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "14.4.3",
+    "@types/jest": "^29.0.3",
+    "@types/ramda": "^0.28.15",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@types/styled-components": "^5.1.26",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "babel-loader": "^8.2.5",
     "babel-plugin-styled-components": "^2.0.7",
-    "jest": "^28.0.3",
-    "jest-environment-jsdom": "^28.0.2",
-    "jest-styled-components": "^7.0.8",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
+    "jest-styled-components": "^7.1.1",
     "js-file-download": "^0.4.12",
-    "postcss": "^8.4.13",
+    "postcss": "^8.4.16",
     "ramda": "^0.28.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-hook-form": "^7.30.0",
-    "react-is": "^18.1.0",
-    "rollup": "^2.72.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.36.1",
+    "rollup": "^2.79.1",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.2",
     "styled-components": "5.3.5",
     "tsc-watch": "^5.0.3",
-    "typescript": "^4.6.4",
-    "webpack": "^5.72.0"
+    "typescript": "^4.8.3"
   },
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8",
     "styled-components": ">=4.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
+    "@babel/runtime": "^7.19.0",
     "@equinor/eds-icons": "workspace:*",
     "@equinor/eds-tokens": "workspace:*",
     "@equinor/eds-utils": "workspace:*",
     "@floating-ui/react-dom-interactions": "^0.6.6",
-    "downshift": "^6.1.7",
-    "react-fast-compare": "3.2.0"
+    "downshift": "^6.1.12"
   },
   "engines": {
     "pnpm": ">=4",