feat(misc): Enabled React19 support (#97)

Author: rebeccaalpert

.eslintrc.json

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

packages/module/package.json

@@ -36,8 +36,8 @@
     "memoize-one": "^5.1.0"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@patternfly/documentation-framework": "^6.0.0-alpha.120",

packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, useRef, useEffect, Fragment } from 'react';
 import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
 import {
@@ -28,20 +28,20 @@ export const ComplexToolbarLogViewer = () => {
     'container-2': { type: 'D', id: 'data2' },
     'container-3': { type: 'E', id: 'data3' }
   };
-  const [isPaused, setIsPaused] = React.useState(false);
-  const [isFullScreen, setIsFullScreen] = React.useState(false);
-  const [itemCount, setItemCount] = React.useState(1);
-  const [currentItemCount, setCurrentItemCount] = React.useState(0);
-  const [renderData, setRenderData] = React.useState('');
-  const [selectedDataSource, setSelectedDataSource] = React.useState('container-1');
-  const [selectDataSourceOpen, setSelectDataSourceOpen] = React.useState(false);
-  const [timer, setTimer] = React.useState(null);
-  const [selectedData, setSelectedData] = React.useState(data[dataSources[selectedDataSource].id].split('\n'));
-  const [buffer, setBuffer] = React.useState([]);
-  const [linesBehind, setLinesBehind] = React.useState(0);
-  const logViewerRef = React.useRef();
+  const [isPaused, setIsPaused] = useState(false);
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [itemCount, setItemCount] = useState(1);
+  const [currentItemCount, setCurrentItemCount] = useState(0);
+  const [renderData, setRenderData] = useState('');
+  const [selectedDataSource, setSelectedDataSource] = useState('container-1');
+  const [selectDataSourceOpen, setSelectDataSourceOpen] = useState(false);
+  const [timer, setTimer] = useState(null);
+  const [selectedData, setSelectedData] = useState(data[dataSources[selectedDataSource].id].split('\n'));
+  const [buffer, setBuffer] = useState([]);
+  const [linesBehind, setLinesBehind] = useState(0);
+  const logViewerRef = useRef(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTimer(
       window.setInterval(() => {
         setItemCount((itemCount) => itemCount + 1);
@@ -52,15 +52,15 @@ export const ComplexToolbarLogViewer = () => {
     };
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (itemCount > selectedData.length) {
       window.clearInterval(timer);
     } else {
       setBuffer(selectedData.slice(0, itemCount));
     }
   }, [itemCount]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isPaused && buffer.length > 0) {
       setCurrentItemCount(buffer.length);
       setRenderData(buffer.join('\n'));
@@ -75,7 +75,7 @@ export const ComplexToolbarLogViewer = () => {
   }, [isPaused, buffer]);
 
   // Listening escape key on full screen mode.
-  React.useEffect(() => {
+  useEffect(() => {
     const handleFullscreenChange = () => {
       const isFullscreen =
         document.fullscreenElement ||
@@ -99,7 +99,7 @@ export const ComplexToolbarLogViewer = () => {
     };
   }, []);
 
-  const onExpandClick = _event => {
+  const onExpandClick = (_event) => {
     const element = document.querySelector('#complex-toolbar-demo');
 
     if (!isFullScreen) {
@@ -163,10 +163,10 @@ export const ComplexToolbarLogViewer = () => {
   ));
 
   const selectDataSourcePlaceholder = (
-    <React.Fragment>
+    <Fragment>
       <Badge>{dataSources[selectedDataSource].type}</Badge>
       {` ${selectedDataSource}`}
-    </React.Fragment>
+    </Fragment>
   );
 
   const ControlButton = () => (
@@ -188,7 +188,7 @@ export const ComplexToolbarLogViewer = () => {
   );
 
   const leftAlignedToolbarGroup = (
-    <React.Fragment>
+    <Fragment>
       <ToolbarToggleGroup toggleIcon={<EllipsisVIcon />} breakpoint="md">
         <ToolbarItem>
           <Select
@@ -217,11 +217,11 @@ export const ComplexToolbarLogViewer = () => {
       <ToolbarItem>
         <ControlButton />
       </ToolbarItem>
-    </React.Fragment>
+    </Fragment>
   );
 
   const rightAlignedToolbarGroup = (
-    <React.Fragment>
+    <Fragment>
       <ToolbarGroup variant="icon-button-group">
         <ToolbarItem>
           <Tooltip position="top" content={<div>Download</div>}>
@@ -238,7 +238,7 @@ export const ComplexToolbarLogViewer = () => {
           </Tooltip>
         </ToolbarItem>
       </ToolbarGroup>
-    </React.Fragment>
+    </Fragment>
   );
 
   const FooterButton = () => {

packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/LogViewer.md

@@ -4,6 +4,7 @@ section: extensions
 source: react-demos
 ---
 
+import { useState, useRef, useEffect, Fragment } from 'react';
 import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
 import {
@@ -30,4 +31,5 @@ import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 ### With complex toolbar
 
 ```js file='./ComplexToolbarLogViewer.jsx'
+
 ```

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/ANSIColorLogViewer.jsx

@@ -1,12 +1,6 @@
-import React from 'react';
 import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer } from '@patternfly/react-log-viewer';
 
 export const ANSIColorLogViewer = () => (
-  <LogViewer
-    hasLineNumbers={false}
-    height={300}
-    data={data.data4}
-    theme="dark"
-  />
+  <LogViewer hasLineNumbers={false} height={300} data={data.data4} theme="dark" />
 );

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/BasicLogViewer.jsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import { useState, Fragment } from 'react';
 import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer } from '@patternfly/react-log-viewer';
 import { Checkbox } from '@patternfly/react-core';
 
 export const BasicLogViewer = () => {
-  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Checkbox
         label="Dark theme"
         isChecked={isDarkTheme}
@@ -17,6 +17,6 @@ export const BasicLogViewer = () => {
         name="toggle-dark-theme"
       />
       <LogViewer hasLineNumbers={false} height={300} data={data.data} theme={isDarkTheme ? 'dark' : 'light'} />
-    </React.Fragment>
+    </Fragment>
   );
 };

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/BasicSearchLogViewer.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
 import { Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/CustomControlLogViewer.jsx

@@ -1,11 +1,11 @@
 /* eslint-disable no-console */
-import React from 'react';
+import { useState } from 'react';
 import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
 import { Toolbar, ToolbarContent, ToolbarItem, Button, Checkbox } from '@patternfly/react-core';
 
 export const CustomControlLogViewer = () => {
-  const [isTextWrapped, setIsTextWrapped] = React.useState(false);
+  const [isTextWrapped, setIsTextWrapped] = useState(false);
   const onActionClick = () => {
     console.log('clicked test action button');
   };
@@ -34,8 +34,14 @@ export const CustomControlLogViewer = () => {
                 Print to Console
               </Button>
             </ToolbarItem>
-            <ToolbarItem alignSelf='center'>
-              <Checkbox label="Wrap text" aria-label="wrap text checkbox" isChecked={isTextWrapped} id="wrap-text-checkbox" onChange={(_event, value) => setIsTextWrapped(value)} />
+            <ToolbarItem alignSelf="center">
+              <Checkbox
+                label="Wrap text"
+                aria-label="wrap text checkbox"
+                isChecked={isTextWrapped}
+                id="wrap-text-checkbox"
+                onChange={(_event, value) => setIsTextWrapped(value)}
+              />
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/FooterComponentLogViewer.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { useRef } from 'react';
 import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer } from '@patternfly/react-log-viewer';
 import { Button } from '@patternfly/react-core';
 
 export const FooterComponentLogViewer = () => {
-  const logViewerRef = React.useRef();
+  const logViewerRef = useRef(null);
   const FooterButton = () => {
     const handleClick = () => {
       logViewerRef.current.scrollToBottom();

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/HeaderComponentLogViewer.jsx

@@ -1,14 +1,7 @@
-import React from 'react';
 import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer } from '@patternfly/react-log-viewer';
 import { Banner } from '@patternfly/react-core';
 
 export const HeaderComponentLogViewer = () => (
-  <LogViewer
-    hasLineNumbers={false}
-    height={300}
-    data={data.data}
-    theme="dark"
-    header={<Banner>5019 lines</Banner>}
-  />
+  <LogViewer hasLineNumbers={false} height={300} data={data.data} theme="dark" header={<Banner>5019 lines</Banner>} />
 );

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/basic.md

@@ -14,6 +14,7 @@ sourceLink: https://github.com/patternfly/react-log-viewer/blob/main/packages/mo
 propComponents: [LogViewer, LogViewerSearch]
 ---
 
+import { useState, Fragment, useRef } from 'react';
 import { LogViewer, LogViewerSearch, LogViewerContext } from '@patternfly/react-log-viewer';
 import { Button, Checkbox, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
 import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
@@ -23,29 +24,35 @@ import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/exten
 ### Basic
 
 ```js file='./BasicLogViewer.jsx'
+
 ```
 
 ### With search
 
 ```js file='./BasicSearchLogViewer.jsx'
+
 ```
 
 ### With complex toolbar
 
 ```js file='./CustomControlLogViewer.jsx'
+
 ```
 
 ### With header component
 
 ```js file='./HeaderComponentLogViewer.jsx'
+
 ```
 
 ### With footer component
 
 ```js file='./FooterComponentLogViewer.jsx'
+
 ```
 
 ### With ANSI color logs
 
 ```js file='./ANSIColorLogViewer.jsx'
+
 ```