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"
   }
 }

package-lock.json

@@ -38,16 +38,16 @@
     "clsx": "^2.1.1"
   },
   "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/package.json

@@ -15,12 +15,13 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa
 ---
 
 import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
+import { FunctionComponent } from 'react';
 
 The **Ansible** component displays the Ansible project logo, with a support status style.
 
 ### Ansible supported
 
-By default, the Ansible logo displays as normal and in full color, meaning that it is supported. 
+By default, the Ansible logo displays as normal and in full color, meaning that it is supported.
 
 ```js file="./AnsibleSupportedExample.tsx"
 
@@ -34,8 +35,7 @@ To specify that Ansible is not supported, set the `isSupported` property to `fal
 
 ```
 
-
-### Red Hat Ansible Automation Platform 
+### Red Hat Ansible Automation Platform
 
 To display the Red Hat Ansible Automation Platform, add the `isRHAAP` property to the `<Ansible>` component.
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { 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/AnsibleSupportedExample.tsx

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { 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/Ansible/AnsibleUnsupportedExample.tsx

@@ -13,8 +13,9 @@ source: react
 propComponents: ['BulkSelect']
 sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md
 ---
-import { useState } from 'react';
+
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
+import { FunctionComponent, useState } from 'react';
 
 The **bulk select** provides a way of selecting data records in batches. You can select all data at once, all data on current page or deselect all.
 

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

@@ -1,17 +1,17 @@
-import React, { useState } from 'react';
+import { FunctionComponent, 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" ];
+const allData = ['Item 1', 'Item 2', 'Item 3', 'Item4', 'Item 5'];
+const pageData = ['Item 1', 'Item 2'];
 
-export const BasicExample: React.FunctionComponent = () => { 
-  const [ selected, setSelected ] = useState<string[]>(pageData);
+export const BasicExample: FunctionComponent = () => {
+  const [selected, setSelected] = useState<string[]>(pageData);
 
   const handleBulkSelect = (value: BulkSelectValue) => {
     value === BulkSelectValue.none && setSelected([]);
     value === BulkSelectValue.all && setSelected(allData);
-    value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageData.includes(item)));
-    value === BulkSelectValue.page && setSelected(Array.from(new Set([ ...selected, ...pageData ])));
+    value === BulkSelectValue.nonePage && setSelected(selected.filter((item) => !pageData.includes(item)));
+    value === BulkSelectValue.page && setSelected(Array.from(new Set([...selected, ...pageData])));
   };
 
   return (
@@ -21,8 +21,10 @@ export const BasicExample: React.FunctionComponent = () => {
       pageCount={pageData.length}
       totalCount={allData.length}
       onSelect={handleBulkSelect}
-      pageSelected={pageData.every(item => selected.includes(item))}
-      pagePartiallySelected={pageData.some(item => selected.includes(item)) && !pageData.every(item => selected.includes(item))}
+      pageSelected={pageData.every((item) => selected.includes(item))}
+      pagePartiallySelected={
+        pageData.some((item) => selected.includes(item)) && !pageData.every((item) => selected.includes(item))
+      }
     />
   );
-}
+};

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

@@ -1,26 +1,28 @@
-import React, { useState } from 'react';
+import { FunctionComponent, 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" ];
+const allData = ['Item 1', 'Item 2', 'Item 3', 'Item4', 'Item 5'];
+const pageData = ['Item 1', 'Item 2'];
 
-export const BasicExample: React.FunctionComponent = () => { 
-  const [ selected, setSelected ] = useState<string[]>([]);
+export const BasicExample: FunctionComponent = () => {
+  const [selected, setSelected] = useState<string[]>([]);
 
   const handleBulkSelect = (value: BulkSelectValue) => {
     value === BulkSelectValue.none && setSelected([]);
     value === BulkSelectValue.all && setSelected(allData);
-    value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageData.includes(item)));
-    value === BulkSelectValue.page && setSelected(Array.from(new Set([ ...selected, ...pageData ])));
+    value === BulkSelectValue.nonePage && setSelected(selected.filter((item) => !pageData.includes(item)));
+    value === BulkSelectValue.page && setSelected(Array.from(new Set([...selected, ...pageData])));
   };
 
   return (
     <BulkSelect
       selectedCount={selected.length}
       pageCount={pageData.length}
       onSelect={handleBulkSelect}
-      pageSelected={pageData.every(item => selected.includes(item))}
-      pagePartiallySelected={pageData.some(item => selected.includes(item)) && !pageData.every(item => selected.includes(item))}
+      pageSelected={pageData.every((item) => selected.includes(item))}
+      pagePartiallySelected={
+        pageData.some((item) => selected.includes(item)) && !pageData.every((item) => selected.includes(item))
+      }
     />
   );
-}
+};