feat: update deps (#2065)

* feat: update deps

* fix: use yarn 3

* fix: update deprecated

* fix: fix test deprecated

* fix: fix linting

* fix: fix null

* fix: removc component temporary

.yarnrc.yml

@@ -1 +1,3 @@
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

examples/demo/package.json

@@ -28,14 +28,14 @@
     "@berviantoleo/react-multi-crop": "^0.31.13",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.0",
-    "@mui/material": "^5.14.0",
-    "@mui/styles": "^5.14.0",
+    "@mui/icons-material": "^5.14.3",
+    "@mui/material": "^5.14.3",
+    "@mui/styles": "^5.14.3",
     "@types/jest": "^29.5.3",
-    "@types/node": "^20.4.2",
-    "@types/react": "^18.2.15",
+    "@types/node": "^20.4.8",
+    "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
-    "cypress": "~12.17.1",
+    "cypress": "~12.17.3",
     "fabric": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/demo/src/App.test.tsx

@@ -1,8 +1,9 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 
 it("renders without crashing", () => {
   const div = document.createElement("div");
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  const root = createRoot(div);
+  root.render(<App />);
+  root.unmount();
 });

examples/demo/src/MainPage.tsx

@@ -63,7 +63,6 @@ export default function MainPage(): JSX.Element {
           </Typography>
           <Link
             href="https://github.com/berviantoleo/react-multi-crop"
-            component="button"
             color="inherit"
           >
             Github

examples/demo/src/index.tsx

@@ -1,11 +1,14 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 
 const rootElement = document.getElementById("root");
-// eslint-disable-next-line
-ReactDOM.render(<App />, rootElement);
+if (rootElement) {
+  const root = createRoot(rootElement);
+  // eslint-disable-next-line
+    root.render(<App />);
+}
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

package.json

@@ -10,22 +10,22 @@
   },
   "private": true,
   "devDependencies": {
-    "@commitlint/cli": "^17.6.6",
+    "@commitlint/cli": "^17.6.7",
     "@commitlint/config-lerna-scopes": "^17.6.6",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-cypress": "^2.13.3",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "lerna": "^7.1.4",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.1",
     "typescript": "^5.1.6",
-    "vitepress": "^1.0.0-beta.5",
+    "vitepress": "^1.0.0-beta.7",
     "vue": "^3.3.4"
   },
   "husky": {
@@ -39,5 +39,6 @@
   "workspaces": [
     "packages/*",
     "examples/*"
-  ]
+  ],
+  "packageManager": "yarn@3.6.1"
 }

packages/react-multi-crop/package.json

@@ -35,23 +35,23 @@
     "@babel/runtime": "^7.22.6",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@storybook/addon-essentials": "^7.0.27",
-    "@storybook/addon-links": "^7.0.27",
-    "@storybook/addon-storysource": "^7.0.27",
-    "@storybook/addons": "^7.0.27",
-    "@storybook/react": "^7.0.27",
-    "@storybook/react-webpack5": "7.0.27",
-    "@storybook/source-loader": "^7.0.27",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@storybook/addon-essentials": "^7.2.1",
+    "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-storysource": "^7.2.1",
+    "@storybook/addons": "^7.2.1",
+    "@storybook/react": "^7.2.1",
+    "@storybook/react-webpack5": "7.2.1",
+    "@storybook/source-loader": "^7.2.1",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@types/fabric": "^5.3.3",
     "@types/jest": "^29.5.3",
     "@types/uuid": "^9.0.2",
-    "babel-jest": "^29.6.1",
+    "babel-jest": "^29.6.2",
     "babel-loader": "^9.1.3",
     "clsx": "^2.0.0",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
     "node-sass": "^9.0.0",
     "react-test-renderer": "^18.2.0",
     "rollup": "^3.26.3",
@@ -60,7 +60,7 @@
     "rollup-plugin-sizes": "^1.0.5",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.35.0",
-    "storybook": "7.0.27",
+    "storybook": "7.2.1",
     "ts-jest": "^29.1.1"
   },
   "peerDependencies": {