feat(deps): Allowed support for React 19 (#282)

* feat(deps): Allowed support for React 19

* Updated comment syntax

Author: thatblindgeye

.eslintrc.json

@@ -9,6 +9,7 @@
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:react/jsx-runtime",
     "prettier"
   ],
   "overrides": [
@@ -31,13 +32,7 @@
       "version": "detect"
     }
   },
-  "plugins": [
-    "react",
-    "react-hooks",
-    "@typescript-eslint",
-    "patternfly-react",
-    "prettier"
-  ],
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "patternfly-react", "prettier"],
   "rules": {
     "@typescript-eslint/adjacent-overload-signatures": "error",
     "@typescript-eslint/array-type": "error",

README.md

@@ -78,7 +78,7 @@ To use Topology out of the box, follow these steps:
 ## Example
 
 ```ts
-import * as React from 'react';
+import { memo, useState, useMemo } from 'react';
 import {
   EdgeStyle,
   Model,
@@ -172,10 +172,10 @@ const EDGES = [
   }
 ];
 
-export const TopologyBaselineDemo = React.memo(() => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+export const TopologyBaselineDemo = memo(() => {
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,

packages/demo-app-ts/src/App.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-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();
 });

packages/demo-app-ts/src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement } from 'react';
 import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 import {
   Page,
@@ -81,7 +81,7 @@ class App extends React.Component<{}, AppState> {
                       style={{ zIndex: 2 }}
                       id={`/${demo.id}-nav-link/${subDemo.id}-nav-link`}
                     >
-                      {React.createElement(subDemo.componentType)}
+                      {createElement(subDemo.componentType)}
                     </PageSection>
                   )}
                   key={demo.id}
@@ -94,7 +94,7 @@ class App extends React.Component<{}, AppState> {
                 path={`/${demo.id}-nav-link`}
                 render={() => (
                   <PageSection isFilled hasBodyWrapper={false} style={{ zIndex: 2 }} id={`/${demo.id}-page-section`}>
-                    {React.createElement(demo.componentType)}
+                    {createElement(demo.componentType)}
                   </PageSection>
                 )}
                 key={demo.id}
@@ -108,7 +108,7 @@ class App extends React.Component<{}, AppState> {
             path="/"
             render={() => (
               <PageSection isFilled hasBodyWrapper={false} style={{ zIndex: 2 }} id={`/${defaultDemo.id}-page-section`}>
-                {React.createElement(defaultDemo.componentType)}
+                {createElement(defaultDemo.componentType)}
               </PageSection>
             )}
             key={defaultDemo.id}

packages/demo-app-ts/src/components/CustomCircleNode.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect } from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,
@@ -28,7 +28,7 @@ type CustomCircleNodeProps = {
 
 const CustomCircle: React.FunctionComponent<ShapeProps> = ({ element, className }) => {
   useAnchor(EllipseAnchor);
-  React.useEffect(() => {
+  useEffect(() => {
     // init height
     element.setDimensions(new Dimensions(40, 40));
   }, [element]);

packages/demo-app-ts/src/components/CustomPathNode.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,

packages/demo-app-ts/src/components/CustomPolygonNode.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,

packages/demo-app-ts/src/components/CustomRectNode.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,

packages/demo-app-ts/src/components/DemoDefaultEdge.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState } from 'react';
 import { observer } from 'mobx-react';
 import {
   Edge,
@@ -25,7 +25,7 @@ interface BendpointProps {
 }
 
 const Bendpoint: React.FunctionComponent<BendpointProps> = observer(({ point }) => {
-  const [hover, setHover] = React.useState(false);
+  const [hover, setHover] = useState(false);
   const [, ref] = useBendpoint(point);
   return (
     <circle

packages/demo-app-ts/src/components/DemoDefaultGroup.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef } from 'react';
 import { observer } from 'mobx-react';
 import {
   useCombineRefs,
@@ -39,7 +39,7 @@ const DemoDefaultGroup: React.FunctionComponent<GroupProps> = ({
 }) => {
   const nodeElement = element as Node;
   useAnchor(RectAnchor);
-  const boxRef = React.useRef<Rect | null>(null);
+  const boxRef = useRef<Rect | null>(null);
   const refs = useCombineRefs<SVGRectElement>(dragNodeRef, dndDragRef, dndDropRef);
 
   if (!droppable || !boxRef.current) {