chore(React19): Enable React19

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": [
@@ -95,6 +96,7 @@
     "react-hooks/exhaustive-deps": "warn",
     "react/no-unescaped-entities": ["error", { "forbid": [">", "}"] }],
     "spaced-comment": "error",
-    "use-isnan": "error"
+    "use-isnan": "error",
+    "react/react-in-jsx-scope": "off"
   }
 }

packages/module/package.json

@@ -35,19 +35,20 @@
     "@patternfly/react-icons": "^6.0.0",
     "@patternfly/react-table": "^6.0.0",
     "react-jss": "^10.10.0",
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "react": "19"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@patternfly/patternfly-a11y": "^5.1.0",
     "@patternfly/documentation-framework": "^6.5.16",
     "@patternfly/react-code-editor": "^6.0.0",
     "@patternfly/patternfly": "^6.0.0",
-    "@types/react": "^18.2.33",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.8.3"

packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
 
-export const BasicExample: React.FunctionComponent = () => <Ansible />;
+export const BasicExample: FunctionComponent = () => <Ansible />;

packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleTechnologyExample.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <Ansible isRHAAP/>
 );

packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
 
-export const BasicExample: React.FunctionComponent = () => <Ansible isSupported={false} />;
+export const BasicExample: FunctionComponent = () => <Ansible isSupported={false} />;

packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectAllExample.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 
 const allData = [ "Item 1", "Item 2" , "Item 3", "Item4", "Item 5" ];
 const pageData = [ "Item 1", "Item 2" ];
 
-export const BasicExample: React.FunctionComponent = () => { 
+export const BasicExample: FunctionComponent = () => { 
   const [ selected, setSelected ] = useState<string[]>(pageData);
 
   const handleBulkSelect = (value: BulkSelectValue) => {

packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectExample.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 
 const allData = [ "Item 1", "Item 2" , "Item 3", "Item4", "Item 5" ];
 const pageData = [ "Item 1", "Item 2" ];
 
-export const BasicExample: React.FunctionComponent = () => { 
+export const BasicExample: FunctionComponent = () => { 
   const [ selected, setSelected ] = useState<string[]>([]);
 
   const handleBulkSelect = (value: BulkSelectValue) => {

packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButtonExample.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
-import React from 'react'
+import type { FunctionComponent } from 'react';
 import CloseButton from '@patternfly/react-component-groups/dist/dynamic/CloseButton';
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <>
     <CloseButton dataTestID="close-button-example" onClick={()=>{console.log('Close button clicked')}} style={{ float: 'none' }} />
   </>

packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModalExample.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 import { Button, ButtonVariant } from '@patternfly/react-core';
 import { Table, Tbody, Td, Th, Tr, Thead } from '@patternfly/react-table';
 import { ColumnsIcon } from '@patternfly/react-icons';
@@ -59,9 +60,9 @@ const ROWS = [
   }
 ]
 
-export const ColumnManagementModalExample: React.FunctionComponent = () => {
-  const [ columns, setColumns ] = React.useState(DEFAULT_COLUMNS);
-  const [ isOpen, setOpen ] = React.useState(false);
+export const ColumnManagementModalExample: FunctionComponent = () => {
+  const [ columns, setColumns ] = useState(DEFAULT_COLUMNS);
+  const [ isOpen, setOpen ] = useState(false);
 
   return (
     <>

packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryExample.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 import { Title, Button, Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core';
 import ErrorBoundary from '@patternfly/react-component-groups/dist/dynamic/ErrorBoundary';
 
-export const BasicExample: React.FunctionComponent = () => {
+export const BasicExample: FunctionComponent = () => {
   const [ hasError, setHasError ] = useState(false);
 
   const Surprise = () => {