feat(ver): update for react 19 support (#394)

Author: rebeccaalpert

.eslintrc.json

@@ -9,6 +9,7 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended"
   ],
   "parser": "@typescript-eslint/parser",

packages/dev/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 './AppContext';
 
 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/dev/src/DefaultCatalog.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { QuickStartCatalogPage, QuickStart } from '@patternfly/quickstarts';
 
 export const DefaultCatalog = ({ hint }: { hint?: string }) => {

packages/dev/src/FormInput.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Form, FormGroup, TextInput } from '@patternfly/react-core';
 
 export const FormInput = ({

packages/dev/src/index.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Route, BrowserRouter, Routes } from 'react-router-dom';
 

packages/dev/src/quickstarts-data/json/monitor-sampleapp-quickstart.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { QuickStart } from '@patternfly/quickstarts';
 import GithubIcon from '@patternfly/react-icons/dist/js/icons/github-icon';
 

packages/dev/tsconfig.json

@@ -13,7 +13,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "strict": true,
     "strictPropertyInitialization": false,
     "strictNullChecks": false,

packages/module/package.json

@@ -46,8 +46,8 @@
   },
   "peerDependencies": {
     "@patternfly/react-core": "^6.0.0",
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18",
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19",
     "marked": "^15.0.6"
   },
   "dependencies": {
@@ -88,7 +88,6 @@
     "react-axe": "^3.5.4",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^18.2.0",
-    "react-monaco-editor": "0.51.0",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.2",

packages/module/patternfly-docs/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Title, PageSection } from '@patternfly/react-core';
 
 const centerStyle = {

packages/module/src/ConsoleInternal/components/markdown-view.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import { marked } from 'marked';
 import { useForceRender } from '@console/shared';
@@ -121,7 +121,7 @@ type InnerSyncMarkdownProps = Pick<SyncMarkdownProps, 'renderExtension' | 'exact
   className?: string;
 };
 
-export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
+export const SyncMarkdownView: FC<SyncMarkdownProps> = ({
   content,
   emptyMsg,
   extensions,
@@ -130,10 +130,10 @@ export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
   inline,
   className,
 }) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  const [markup, setMarkup] = React.useState<string>('');
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  const [markup, setMarkup] = useState<string>('');
 
-  React.useEffect(() => {
+  useEffect(() => {
     async function getMd() {
       const md = await markdownConvert(
         content || emptyMsg || getResource('Not available'),
@@ -176,8 +176,8 @@ const RenderExtension: React.FC<RenderExtensionProps> = ({
   docContext,
 }) => {
   const forceRender = useForceRender();
-  const markupRef = React.useRef<string>(null);
-  const shouldRenderExtension = React.useCallback(() => {
+  const markupRef = useRef<string>(null);
+  const shouldRenderExtension = useCallback(() => {
     if (markupRef.current === markup) {
       return true;
     }
@@ -190,7 +190,7 @@ const RenderExtension: React.FC<RenderExtensionProps> = ({
    * which causes the component rendered by renderExtension to receive old copy of document
    * use forceRender to delay the rendering of extension by one render cycle
    */
-  React.useEffect(() => {
+  useEffect(() => {
     if (renderExtension) {
       forceRender();
     }
@@ -201,13 +201,13 @@ const RenderExtension: React.FC<RenderExtensionProps> = ({
   );
 };
 
-const InlineMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
+const InlineMarkdownView: FC<InnerSyncMarkdownProps> = ({
   markup,
   isEmpty,
   renderExtension,
   className,
 }) => {
-  const id = React.useMemo(() => uniqueId('markdown'), []);
+  const id = useMemo(() => uniqueId('markdown'), []);
   return (
     <div className={css({ 'is-empty': isEmpty } as any, className)} id={id}>
       <div dangerouslySetInnerHTML={{ __html: markup }} />
@@ -218,18 +218,18 @@ const InlineMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
   );
 };
 
-const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
+const IFrameMarkdownView: FC<InnerSyncMarkdownProps> = ({
   exactHeight,
   markup,
   isEmpty,
   renderExtension,
   className,
 }) => {
-  const [frame, setFrame] = React.useState<HTMLIFrameElement>();
-  const [loaded, setLoaded] = React.useState(false);
-  const updateTimeoutHandle = React.useRef<NodeJS.Timeout>();
+  const [frame, setFrame] = useState<HTMLIFrameElement>();
+  const [loaded, setLoaded] = useState(false);
+  const updateTimeoutHandle = useRef<NodeJS.Timeout>(null);
 
-  const updateDimensions = React.useCallback(() => {
+  const updateDimensions = useCallback(() => {
     if (!frame?.contentWindow?.document.body.firstChild) {
       return;
     }
@@ -248,14 +248,14 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
     });
   }, [frame, exactHeight]);
 
-  React.useEffect(
+  useEffect(
     () => () => {
       clearTimeout(updateTimeoutHandle.current);
     },
     [],
   );
 
-  const onLoad = React.useCallback(() => {
+  const onLoad = useCallback(() => {
     updateDimensions();
     setLoaded(true);
   }, [updateDimensions]);
@@ -302,7 +302,9 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
         sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"
         srcDoc={contents}
         style={{ border: '0px', display: 'block', width: '100%', height: '0' }}
-        ref={(r) => setFrame(r)}
+        ref={(r) => {
+          setFrame(r);
+        }}
         onLoad={() => onLoad()}
         className={className}
       />