chore: update react and react testing library

cchanxzy · Dec 28, 2023 · aabafcf · aabafcf
1 parent 6354c37
commit aabafcf
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 176 deletions.
diff --git a/package.json b/package.json
@@ -53,14 +53,14 @@
     "@rollup/plugin-typescript": "^8.2.1",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
-    "@testing-library/dom": "^7.31.0",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^29.5.7",
     "@types/node": "^20.10.5",
-    "@types/react": "^17.0.6",
-    "@types/react-dom": "^17.0.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",
     "codecov": "^3.8.3",
@@ -79,11 +79,10 @@
     "parcel": "^2.0.0-rc.0",
     "prettier": "^3.1.1",
     "process": "^0.11.10",
-    "react": "^17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
     "rollup": "^2.52.7",
     "semantic-release": "^17.4.3",
-    "source-map-loader": "^3.0.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.2",
     "tslib": "^2.3.0",

diff --git a/src/examples/index.html b/src/examples/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -41,25 +41,7 @@ <h1>React Currency Input Field</h1>
         </div>
       </div>
       <hr />
-      <div id="example-1"></div>
-
-      <hr />
-
-      <div id="example-2"></div>
-
-      <hr />
-
-      <div id="example-3"></div>
-
-      <hr />
-
-      <div id="example-4"></div>
-
-      <hr />
-
-      <div id="format-values-example"></div>
-
-      <hr />
+      <div id="app"></div>
 
       <footer class="mb-5"></footer>
     </div>

diff --git a/src/examples/index.tsx b/src/examples/index.tsx
@@ -1,18 +1,49 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import Example1 from './Example1';
 import Example2 from './Example2';
 import Example3 from './Example3';
 import Example4 from './Example4';
 import FormatValuesExample from './FormatValuesExample';
 
-ReactDOM.render(<Example1 />, document.getElementById('example-1'));
+const container = document.getElementById('app');
+const root = createRoot(container!);
 
-ReactDOM.render(<Example2 />, document.getElementById('example-2'));
+const Content = () => {
+  return (
+    <>
+      <div id="example-1">
+        <Example1 />
+      </div>
 
-ReactDOM.render(<Example3 />, document.getElementById('example-3'));
+      <hr />
 
-ReactDOM.render(<Example4 />, document.getElementById('example-4'));
+      <div id="example-2">
+        <Example2 />
+      </div>
 
-ReactDOM.render(<FormatValuesExample />, document.getElementById('format-values-example'));
+      <hr />
+
+      <div id="example-3">
+        <Example3 />
+      </div>
+
+      <hr />
+
+      <div id="example-4">
+        <Example4 />
+      </div>
+
+      <hr />
+
+      <div id="format-values-example">
+        <FormatValuesExample />
+      </div>
+
+      <hr />
+    </>
+  );
+};
+
+root.render(<Content />);