Skip to content

Commit 66b217a

Browse files
rebeccaalpertrebeccaalpert
committed
chore(React19): Enable React19
1 parent 79a8b98 commit 66b217a

File tree

140 files changed

+1048
-851
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

140 files changed

+1048
-851
lines changed

‎.eslintrc.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"plugin:react/recommended",
1010
"plugin:react-hooks/recommended",
1111
"plugin:@typescript-eslint/recommended",
12+
"plugin:react/jsx-runtime",
1213
"prettier"
1314
],
1415
"overrides": [
@@ -95,6 +96,7 @@
9596
"react-hooks/exhaustive-deps": "warn",
9697
"react/no-unescaped-entities": ["error", { "forbid": [">", "}"] }],
9798
"spaced-comment": "error",
98-
"use-isnan": "error"
99+
"use-isnan": "error",
100+
"react/react-in-jsx-scope": "off"
99101
}
100102
}

‎package-lock.json

+12-16
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/module/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,16 @@
3838
"clsx": "^2.1.1"
3939
},
4040
"peerDependencies": {
41-
"react": "^17 || ^18",
42-
"react-dom": "^17 || ^18"
41+
"react": "^17 || ^18 || ^19",
42+
"react-dom": "^17 || ^18 || ^19"
4343
},
4444
"devDependencies": {
4545
"@patternfly/patternfly-a11y": "^5.1.0",
4646
"@patternfly/documentation-framework": "^6.5.16",
4747
"@patternfly/react-code-editor": "^6.0.0",
4848
"@patternfly/patternfly": "^6.0.0",
49-
"@types/react": "^18.2.33",
50-
"@types/react-dom": "^18.3.1",
49+
"@types/react": "^19.1.0",
50+
"@types/react-dom": "^19.1.2",
5151
"react": "^18.3.1",
5252
"react-dom": "^18.3.1",
5353
"typescript": "^5.8.3"

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,13 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa
1515
---
1616

1717
import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
18+
import { FunctionComponent } from 'react';
1819

1920
The **Ansible** component displays the Ansible project logo, with a support status style.
2021

2122
### Ansible supported
2223

23-
By default, the Ansible logo displays as normal and in full color, meaning that it is supported.
24+
By default, the Ansible logo displays as normal and in full color, meaning that it is supported.
2425

2526
```js file="./AnsibleSupportedExample.tsx"
2627

@@ -34,8 +35,7 @@ To specify that Ansible is not supported, set the `isSupported` property to `fal
3435

3536
```
3637

37-
38-
### Red Hat Ansible Automation Platform
38+
### Red Hat Ansible Automation Platform
3939

4040
To display the Red Hat Ansible Automation Platform, add the `isRHAAP` property to the `<Ansible>` component.
4141

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import { FunctionComponent } from 'react';
22
import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
33

4-
export const BasicExample: React.FunctionComponent = () => <Ansible />;
4+
export const BasicExample: FunctionComponent = () => <Ansible />;

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import React from 'react';
1+
import { FunctionComponent } from 'react';
22
import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
33

4-
export const BasicExample: React.FunctionComponent = () => (
5-
<Ansible isRHAAP/>
6-
);
4+
export const BasicExample: FunctionComponent = () => <Ansible isRHAAP />;

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import { FunctionComponent } from 'react';
22
import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
33

4-
export const BasicExample: React.FunctionComponent = () => <Ansible isSupported={false} />;
4+
export const BasicExample: FunctionComponent = () => <Ansible isSupported={false} />;

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ source: react
1313
propComponents: ['BulkSelect']
1414
sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md
1515
---
16-
import { useState } from 'react';
16+
1717
import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
18+
import { FunctionComponent, useState } from 'react';
1819

1920
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.
2021

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

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import React, { useState } from 'react';
1+
import { FunctionComponent, useState } from 'react';
22
import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
33

4-
const allData = [ "Item 1", "Item 2" , "Item 3", "Item4", "Item 5" ];
5-
const pageData = [ "Item 1", "Item 2" ];
4+
const allData = ['Item 1', 'Item 2', 'Item 3', 'Item4', 'Item 5'];
5+
const pageData = ['Item 1', 'Item 2'];
66

7-
export const BasicExample: React.FunctionComponent = () => {
8-
const [ selected, setSelected ] = useState<string[]>(pageData);
7+
export const BasicExample: FunctionComponent = () => {
8+
const [selected, setSelected] = useState<string[]>(pageData);
99

1010
const handleBulkSelect = (value: BulkSelectValue) => {
1111
value === BulkSelectValue.none && setSelected([]);
1212
value === BulkSelectValue.all && setSelected(allData);
13-
value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageData.includes(item)));
14-
value === BulkSelectValue.page && setSelected(Array.from(new Set([ ...selected, ...pageData ])));
13+
value === BulkSelectValue.nonePage && setSelected(selected.filter((item) => !pageData.includes(item)));
14+
value === BulkSelectValue.page && setSelected(Array.from(new Set([...selected, ...pageData])));
1515
};
1616

1717
return (
@@ -21,8 +21,10 @@ export const BasicExample: React.FunctionComponent = () => {
2121
pageCount={pageData.length}
2222
totalCount={allData.length}
2323
onSelect={handleBulkSelect}
24-
pageSelected={pageData.every(item => selected.includes(item))}
25-
pagePartiallySelected={pageData.some(item => selected.includes(item)) && !pageData.every(item => selected.includes(item))}
24+
pageSelected={pageData.every((item) => selected.includes(item))}
25+
pagePartiallySelected={
26+
pageData.some((item) => selected.includes(item)) && !pageData.every((item) => selected.includes(item))
27+
}
2628
/>
2729
);
28-
}
30+
};

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

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
import React, { useState } from 'react';
1+
import { FunctionComponent, useState } from 'react';
22
import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
33

4-
const allData = [ "Item 1", "Item 2" , "Item 3", "Item4", "Item 5" ];
5-
const pageData = [ "Item 1", "Item 2" ];
4+
const allData = ['Item 1', 'Item 2', 'Item 3', 'Item4', 'Item 5'];
5+
const pageData = ['Item 1', 'Item 2'];
66

7-
export const BasicExample: React.FunctionComponent = () => {
8-
const [ selected, setSelected ] = useState<string[]>([]);
7+
export const BasicExample: FunctionComponent = () => {
8+
const [selected, setSelected] = useState<string[]>([]);
99

1010
const handleBulkSelect = (value: BulkSelectValue) => {
1111
value === BulkSelectValue.none && setSelected([]);
1212
value === BulkSelectValue.all && setSelected(allData);
13-
value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageData.includes(item)));
14-
value === BulkSelectValue.page && setSelected(Array.from(new Set([ ...selected, ...pageData ])));
13+
value === BulkSelectValue.nonePage && setSelected(selected.filter((item) => !pageData.includes(item)));
14+
value === BulkSelectValue.page && setSelected(Array.from(new Set([...selected, ...pageData])));
1515
};
1616

1717
return (
1818
<BulkSelect
1919
selectedCount={selected.length}
2020
pageCount={pageData.length}
2121
onSelect={handleBulkSelect}
22-
pageSelected={pageData.every(item => selected.includes(item))}
23-
pagePartiallySelected={pageData.some(item => selected.includes(item)) && !pageData.every(item => selected.includes(item))}
22+
pageSelected={pageData.every((item) => selected.includes(item))}
23+
pagePartiallySelected={
24+
pageData.some((item) => selected.includes(item)) && !pageData.every((item) => selected.includes(item))
25+
}
2426
/>
2527
);
26-
}
28+
};

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

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa
1616

1717
import { CloseIcon } from '@patternfly/react-icons';
1818
import CloseButton from '@patternfly/react-component-groups/dist/dynamic/CloseButton';
19+
import { FunctionComponent } from 'react';
1920

2021
The **close button** component provides a way for users to exit a modal, dialogue, or similar action. To further customize this component, you can also utilize all properties of the [button component](/components/button).
2122

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

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
/* eslint-disable no-console */
2-
import React from 'react'
2+
import { FunctionComponent } from 'react';
33
import CloseButton from '@patternfly/react-component-groups/dist/dynamic/CloseButton';
44

5-
export const BasicExample: React.FunctionComponent = () => (
5+
export const BasicExample: FunctionComponent = () => (
66
<>
7-
<CloseButton dataTestID="close-button-example" onClick={()=>{console.log('Close button clicked')}} style={{ float: 'none' }} />
7+
<CloseButton
8+
dataTestID="close-button-example"
9+
onClick={() => {
10+
console.log('Close button clicked');
11+
}}
12+
style={{ float: 'none' }}
13+
/>
814
</>
915
);

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

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa
1616

1717
import ColumnManagementModal from '@patternfly/react-component-groups/dist/dynamic/ColumnManagementModal';
1818
import { ColumnsIcon } from '@patternfly/react-icons';
19+
import { FunctionComponent, useState } from 'react';
1920

2021
The **column management modal** component can be used to implement customizable table columns. Columns can be configured to be enabled or disabled by default or be unhidable.
2122

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

+33-21
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import React from 'react'
1+
import { FunctionComponent, useState } from 'react';
22
import { Button, ButtonVariant } from '@patternfly/react-core';
33
import { Table, Tbody, Td, Th, Tr, Thead } from '@patternfly/react-table';
44
import { ColumnsIcon } from '@patternfly/react-icons';
5-
import ColumnManagementModal, { ColumnManagementModalColumn } from '@patternfly/react-component-groups/dist/dynamic/ColumnManagementModal';
5+
import ColumnManagementModal, {
6+
ColumnManagementModalColumn
7+
} from '@patternfly/react-component-groups/dist/dynamic/ColumnManagementModal';
68

79
const DEFAULT_COLUMNS: ColumnManagementModalColumn[] = [
810
{
@@ -57,40 +59,50 @@ const ROWS = [
5759
impact: 'Moderate',
5860
score: '6.1'
5961
}
60-
]
62+
];
63+
64+
export const ColumnManagementModalExample: FunctionComponent = () => {
65+
const [columns, setColumns] = useState(DEFAULT_COLUMNS);
66+
const [isOpen, setOpen] = useState(false);
6167

62-
export const ColumnManagementModalExample: React.FunctionComponent = () => {
63-
const [ columns, setColumns ] = React.useState(DEFAULT_COLUMNS);
64-
const [ isOpen, setOpen ] = React.useState(false);
65-
6668
return (
6769
<>
6870
<ColumnManagementModal
6971
appliedColumns={columns}
70-
applyColumns={newColumns => setColumns(newColumns)}
72+
applyColumns={(newColumns) => setColumns(newColumns)}
7173
isOpen={isOpen}
7274
onClose={() => setOpen(false)}
7375
/>
74-
<Button className='pf-v6-u-mb-sm' onClick={() => setOpen(true)} variant={ButtonVariant.secondary} icon={<ColumnsIcon />}>Manage columns</Button>
75-
<Table
76-
aria-label="Simple table"
77-
variant="compact"
76+
<Button
77+
className="pf-v6-u-mb-sm"
78+
onClick={() => setOpen(true)}
79+
variant={ButtonVariant.secondary}
80+
icon={<ColumnsIcon />}
7881
>
82+
Manage columns
83+
</Button>
84+
<Table aria-label="Simple table" variant="compact">
7985
<Thead>
8086
<Tr>
81-
{columns.filter(column => column.isShown).map(column => <Th key={column.key}>{column.title}</Th>)}
87+
{columns
88+
.filter((column) => column.isShown)
89+
.map((column) => (
90+
<Th key={column.key}>{column.title}</Th>
91+
))}
8292
</Tr>
8393
</Thead>
8494
<Tbody>
85-
{ROWS.map((row, rowIndex) =>
95+
{ROWS.map((row, rowIndex) => (
8696
<Tr key={rowIndex}>
87-
{columns.filter(column => column.isShown).map((column, columnIndex) =>
88-
<Td key={columnIndex}>{row[column.key]}</Td>
89-
)}
90-
</Tr>
91-
)}
97+
{columns
98+
.filter((column) => column.isShown)
99+
.map((column, columnIndex) => (
100+
<Td key={columnIndex}>{row[column.key]}</Td>
101+
))}
102+
</Tr>
103+
))}
92104
</Tbody>
93105
</Table>
94106
</>
95-
)
96-
}
107+
);
108+
};

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,14 @@ source: react
1313
propComponents: ['ErrorBoundary']
1414
sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md
1515
---
16-
import { useState } from 'react';
16+
1717
import { Button, Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core';
1818
import ErrorBoundary from "@patternfly/react-component-groups/dist/dynamic/ErrorBoundary";
19+
import { FunctionComponent, useState } from 'react';
1920

2021
The **error boundary** component repurposes the `<ErrorState>` component for an application error boundary.
2122

22-
## Examples
23+
## Examples
2324

2425
### Error boundary usage example
2526

0 commit comments

Comments
 (0)