Updated deps to newest version and allow both react 16 and 17 as a peer #860

.gitignore

@@ -7,3 +7,4 @@ dist
 node_modules
 yarn-error.log
 tsconfig.tsbuildinfo
+.vscode

diagrams-demo-gallery/package.json

@@ -9,9 +9,9 @@
 		"url": "https://github.com/projectstorm/react-diagrams.git"
 	},
 	"scripts": {
-		"start": "../node_modules/.bin/start-storybook",
-		"storybook:build": "../node_modules/.bin/build-storybook -c .storybook -o .out",
-		"github": "../node_modules/.bin/storybook-to-ghpages",
+		"start": "./node_modules/.bin/start-storybook",
+		"storybook:build": "./node_modules/.bin/build-storybook -c .storybook -o .out",
+		"github": "./node_modules/.bin/storybook-to-ghpages",
 		"test:run": "../node_modules/.bin/jest --no-cache",
 		"test": "yarn storybook:build && yarn test:run"
 	},
@@ -27,6 +27,15 @@
 		"nodes"
 	],
 	"dependencies": {
-		"gsap": "^3.7.0"
+		"gsap": "^3.7.0",
+    "@storybook/addon-actions": "^6.3.4",
+		"@storybook/addon-options": "^5.3.21",
+		"@storybook/addons": "^6.3.4",
+		"@storybook/react": "^6.3.4",
+		"@storybook/storybook-deployer": "^2.8.10",
+    "@storybook/builder-webpack5": "^6.3.4",
+    "@storybook/manager-webpack5": "^6.3.4",
+		"@storybook/theming": "^6.3.4",
+    "regenerator-runtime": "^0.13.7"
 	}
 }

package.json

@@ -39,66 +39,56 @@
 		"lodash": "4.*",
 		"pathfinding": "^0.4.18",
 		"paths-js": "^0.4.11",
-		"react": "17.*"
+		"react": "16.* || 17.*"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.13.15",
+		"@babel/core": "^7.14.6",
 		"@babel/preset-react": "^7.14.5",
 		"@emotion/react": "^11.4.0",
 		"@emotion/styled": "^11.3.0",
-		"@storybook/addon-actions": "^6.2.8",
-		"@storybook/addon-options": "^5.3.21",
-		"@storybook/addons": "^6.2.8",
-		"@storybook/builder-webpack5": "^6.2.8",
-		"@storybook/manager-webpack5": "^6.3.2",
-		"@storybook/react": "^6.3.2",
-		"@storybook/storybook-deployer": "^2.8.7",
-		"@storybook/theming": "^6.2.8",
-		"@types/dagre": "^0.7.44",
-		"@types/jest": "^26.0.22",
+		"@types/dagre": "^0.7.45",
+		"@types/jest": "^26.0.24",
 		"@types/jest-environment-puppeteer": "^4.4.1",
-		"@types/lodash": "^4.14.168",
-		"@types/node": "^14.14.37",
-		"@types/promise": "^7.1.30",
-		"@types/puppeteer": "^5.4.3",
-		"@types/react": "^17.0.13",
+		"@types/lodash": "^4.14.171",
+		"@types/node": "^15.6.1",
+		"@types/puppeteer": "^5.4.4",
+		"@types/react": "^17.0.0",
 		"babel-loader": "^8.2.2",
 		"closest": "^0.0.1",
 		"cross-env": "^7.0.3",
-		"css-loader": "^5.2.1",
+		"css-loader": "^5.2.6",
 		"dagre": "^0.8.5",
+		"emotion": "^11.0.0",
 		"enzyme": "^3.11.0",
 		"file-loader": "^6.2.0",
-		"glob": "^7.1.6",
-		"jest": "^26.6.3",
-		"jest-cli": "^26.6.3",
-		"jest-puppeteer": "^4.4.0",
+		"glob": "^7.1.7",
+		"jest": "^27.0.6",
+		"jest-cli": "^27.0.6",
+		"jest-puppeteer": "^5.0",
 		"json-beautify": "^1.1.1",
 		"lerna": "^4.0.0",
-		"lodash": "4.*",
+		"lodash": "^4.17.21",
 		"pathfinding": "^0.4.18",
 		"paths-js": "^0.4.11",
-		"prettier": "^2.2.1",
-		"puppeteer": "^8.0.0",
+		"prettier": "^2.3.2",
+		"puppeteer": "9.1.1",
 		"raf": "^3.4.1",
 		"raw-loader": "^4.0.2",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
-		"react-test-renderer": "^17.0.2",
+		"react": "^16.8.6",
+		"react-dom": "^16.8.6",
+		"react-test-renderer": "^16.8.6",
 		"resize-observer-polyfill": "^1.5.1",
 		"rimraf": "^3.0.2",
-		"source-map-loader": "^2.0.1",
-		"storybook-host": "^5.2.0",
-		"storybook-readme": "^5.0.9",
-		"style-loader": "^2.0.0",
-		"terser-webpack-plugin": "^5.1.1",
-		"ts-jest": "^26.5.4",
-		"ts-loader": "^8.1.0",
-		"typescript": "^4.2.4",
-		"val-loader": "^3.1.0",
-		"webpack": "^5.32.0",
-		"webpack-cli": "^4.6.0",
+		"source-map-loader": "^3.0.0",
+		"style-loader": "^3.0.0",
+		"terser-webpack-plugin": "^5.1.4",
+		"ts-jest": "^27.0.3",
+		"ts-loader": "^9.2.3",
+		"typescript": "^4.3.5",
+		"val-loader": "^4.0.0",
+		"webpack": "^5.44.0",
+		"webpack-cli": "^4.7.2",
 		"webpack-dev-server": "^3.11.2",
-		"webpack-node-externals": "^2.5.2"
+		"webpack-node-externals": "^3.0.0"
 	}
 }

packages/react-canvas-core/package.json

@@ -34,7 +34,7 @@
 	"peerDependencies": {
 		"closest": "^0.0.1",
 		"lodash": "4.*",
-		"react": "17.*"
+		"react": "16.* || 17.*"
 	},
 	"gitHead": "bb878657ba0c2f81764f32901fd96158a0f8352e"
 }

packages/react-canvas-core/src/core-models/BasePositionModel.ts

@@ -18,7 +18,8 @@ export interface BasePositionModelGenerics extends BaseModelGenerics {
 
 export class BasePositionModel<G extends BasePositionModelGenerics = BasePositionModelGenerics>
 	extends BaseModel<G>
-	implements ModelGeometryInterface {
+	implements ModelGeometryInterface
+{
 	protected position: Point;
 
 	constructor(options: G['OPTIONS']) {

packages/react-canvas-core/src/states/SelectionBoxState.ts

@@ -61,8 +61,8 @@ export class SelectionBoxState extends AbstractDisplacementState {
 		const rect = new Rectangle(relative, Math.abs(event.virtualDisplacementX), Math.abs(event.virtualDisplacementY));
 
 		for (let model of this.engine.getModel().getSelectionEntities()) {
-			if (((model as unknown) as ModelGeometryInterface).getBoundingBox) {
-				const bounds = ((model as unknown) as ModelGeometryInterface).getBoundingBox();
+			if ((model as unknown as ModelGeometryInterface).getBoundingBox) {
+				const bounds = (model as unknown as ModelGeometryInterface).getBoundingBox();
 				if (rect.containsPoint(bounds.getTopLeft()) && rect.containsPoint(bounds.getBottomRight())) {
 					model.setSelected(true);
 				} else {

packages/react-diagrams-core/package.json

@@ -37,7 +37,7 @@
 	"peerDependencies": {
 		"closest": "^0.0.1",
 		"lodash": "4.*",
-		"react": "17.*",
+		"react": "16.* || 17.*",
 		"resize-observer-polyfill": "^1.5.1"
 	},
 	"gitHead": "bb878657ba0c2f81764f32901fd96158a0f8352e"

packages/react-diagrams-core/src/entities/link/LinkModel.ts

@@ -27,7 +27,8 @@ export interface LinkModelGenerics extends BaseModelGenerics {
 
 export class LinkModel<G extends LinkModelGenerics = LinkModelGenerics>
 	extends BaseModel<G>
-	implements ModelGeometryInterface {
+	implements ModelGeometryInterface
+{
 	protected sourcePort: PortModel | null;
 	protected targetPort: PortModel | null;
 

packages/react-diagrams-defaults/package.json

@@ -35,7 +35,7 @@
 		"@emotion/react": "^11.*",
 		"@emotion/styled": "^11.*",
 		"lodash": "4.*",
-		"react": "17.*"
+		"react": "16.* || 17.*"
 	},
 	"gitHead": "bb878657ba0c2f81764f32901fd96158a0f8352e"
 }

packages/react-diagrams-routing/package.json

@@ -39,7 +39,7 @@
 		"lodash": "4.*",
 		"pathfinding": "^0.4.18",
 		"paths-js": "^0.4.11",
-		"react": "17.*"
+		"react": "16.* || 17.*"
 	},
 	"gitHead": "bb878657ba0c2f81764f32901fd96158a0f8352e"
 }

packages/react-diagrams-routing/tests/PathFinding.test.tsx

@@ -1,8 +1,10 @@
 import { PathFinding } from '../src/engine/PathFinding';
 
 describe('calculating start and end points', function () {
+	let pathFinding: PathFinding = new PathFinding(null);
+
 	beforeEach(() => {
-		this.pathFinding = new PathFinding(null);
+		pathFinding = new PathFinding(null);
 	});
 
 	test('return correct object for valid walkable input', () => {
@@ -23,7 +25,7 @@ describe('calculating start and end points', function () {
 			[5, 0]
 		];
 
-		const result = this.pathFinding.calculateLinkStartEndCoords(matrix, path);
+		const result = pathFinding.calculateLinkStartEndCoords(matrix, path);
 
 		expect(result.start).toEqual({
 			x: 2,
@@ -58,7 +60,7 @@ describe('calculating start and end points', function () {
 			[3, 0]
 		];
 
-		const result = this.pathFinding.calculateLinkStartEndCoords(matrix, path);
+		const result = pathFinding.calculateLinkStartEndCoords(matrix, path);
 
 		expect(result).toBeUndefined();
 	});