Merge pull request #463 from kmcfaul/react-19-support

feat(ver): enable react 19 support

Author: nicolethoen

.eslintrc.json

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

package-lock.json

@@ -39,8 +39,8 @@
     "react-jss": "^10.10.0"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@patternfly/documentation-framework": "^6.5.20",

packages/module/package.json

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
 
 const layoutItemStyling = {
@@ -8,10 +8,10 @@ const layoutItemStyling = {
   border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
 };
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <DataView>
     <div style={layoutItemStyling}>Header</div>
     <div style={layoutItemStyling}>Data representation</div>
     <div style={layoutItemStyling}>Footer</div>
   </DataView>
-)
+);

packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/AbstractLayoutExample.tsx

@@ -7,7 +7,7 @@ propComponents: ['DataView']
 sortValue: 1
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md
 --- 
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { FunctionComponent, useState, useEffect, useRef, useMemo } from 'react';
 import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 import { useDataViewPagination, useDataViewSelection, useDataViewFilters, useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks';

packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { FunctionComponent, useEffect, useState, useRef, useMemo } from 'react';
 import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Content } from '@patternfly/react-core';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
@@ -32,7 +32,7 @@ interface RepositoryDetailProps {
   setSelectedRepo: React.Dispatch<React.SetStateAction<Repository | undefined>>;
 }
 
-const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
+const RepositoryDetail: FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
   const context = useDataViewEventsContext();
 
   useEffect(() => {
@@ -84,7 +84,7 @@ const rowActions = [
   }
 ];
 
-const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
+const RepositoriesTable: FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
   const selection = useDataViewSelection({ matchOption: (a, b) => a.row[0] === b.row[0] });
   const { trigger } = useDataViewEventsContext();
   const rows = useMemo(() => {
@@ -110,7 +110,7 @@ const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ se
   );
 };
 
-export const BasicExample: React.FunctionComponent = () => {
+export const BasicExample: FunctionComponent = () => {
   const [ selectedRepo, setSelectedRepo ] = useState<Repository>();
   const drawerRef = useRef<HTMLDivElement>(null);
 

packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/EventsExample.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { FunctionComponent, useEffect, useState, useRef, useMemo } from 'react';
 import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Content, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions, Button,  } from '@patternfly/react-core';
 import { ActionsColumn, Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
@@ -94,7 +94,7 @@ interface RepositoryDetailProps {
   setSelectedRepo: React.Dispatch<React.SetStateAction<Repository | undefined>>;
 }
 
-const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
+const RepositoryDetail: FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
   const context = useDataViewEventsContext();
 
   useEffect(() => {
@@ -146,7 +146,7 @@ const rowActions = [
   }
 ];
 
-const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
+const RepositoriesTable: FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
   const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({ initialFilters: { name: '', branch: '', workspace: [] } });
 
   const pagination = useDataViewPagination({ perPage: 5 });
@@ -255,7 +255,7 @@ const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ se
   );
 };
 
-export const BasicExample: React.FunctionComponent = () => {
+export const BasicExample: FunctionComponent = () => {
   const [ selectedRepo, setSelectedRepo ] = useState<Repository>();
   const drawerRef = useRef<HTMLDivElement>(null);
 

packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { CubesIcon } from '@patternfly/react-icons';
-import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter,  } from '@patternfly/react-core';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
 import { Tbody, Td, Tr } from '@patternfly/react-table';
 
 interface Repository {
@@ -27,7 +27,7 @@ const empty = (
   <Tbody>
     <Tr key="loading" ouiaId={`${ouiaId}-tr-loading`}>
       <Td colSpan={columns.length}>
-        <EmptyState  headingLevel="h4" icon={CubesIcon} titleText="No data found">
+        <EmptyState headingLevel="h4" icon={CubesIcon} titleText="No data found">
           <EmptyStateBody>There are no matching data to be displayed.</EmptyStateBody>
           <EmptyStateFooter>
             <EmptyStateActions>
@@ -44,10 +44,10 @@ const empty = (
   </Tbody>
 );
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <DataView activeState={DataViewState.empty}>
-    <DataViewTable 
-      aria-label='Repositories table' 
+    <DataViewTable
+      aria-label="Repositories table"
       ouiaId={ouiaId}
       columns={columns}
       rows={rows}

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableEmptyExample.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { ErrorState } from '@patternfly/react-component-groups';
@@ -32,7 +32,7 @@ const error = (
   </Tbody>
 );
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <DataView activeState={DataViewState.error}>
     <DataViewTable 
       aria-label='Repositories table' 

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableErrorExample.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { Button } from '@patternfly/react-core';
@@ -62,6 +62,6 @@ const columns: DataViewTh[] = [
 
 const ouiaId = 'TableExample';
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
 );

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableExample.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { SkeletonTableBody, SkeletonTableHead } from '@patternfly/react-component-groups';
@@ -10,13 +10,13 @@ const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Wo
 
 const ouiaId = 'TableExample';
 
-const headLoading = <SkeletonTableHead columns={columns} />
+const headLoading = <SkeletonTableHead columns={columns} />;
 const bodyLoading = <SkeletonTableBody rowsCount={5} columnsCount={columns.length} />;
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <DataView activeState={DataViewState.loading}>
     <DataViewTable
-      aria-label='Repositories table' 
+      aria-label="Repositories table"
       ouiaId={ouiaId}
       columns={columns}
       rows={rows}

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableLoadingExample.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable, DataViewTh, DataViewTrTree } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
@@ -52,7 +52,7 @@ const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Wo
 
 const ouiaId = 'TreeTableExample';
 
-export const BasicExample: React.FunctionComponent = () => {
+export const BasicExample: FunctionComponent = () => {
   const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id });
 
   return (

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableTreeExample.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { useMemo } from 'react';
+import { FunctionComponent, useMemo } from 'react';
 import { useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { ThProps } from '@patternfly/react-table';
@@ -41,7 +41,7 @@ const sortData = (data: Repository[], sortBy: string | undefined, direction: 'as
 
 const ouiaId = 'TableExample';
 
-export const MyTable: React.FunctionComponent = () => {
+export const MyTable: FunctionComponent = () => {
   const [ searchParams, setSearchParams ] = useSearchParams();
   const { sortBy, direction, onSort } = useDataViewSort({ searchParams, setSearchParams });
   const sortByIndex = useMemo(() => COLUMNS.findIndex(item => item.key === sortBy), [ sortBy ]);
@@ -79,7 +79,7 @@ export const MyTable: React.FunctionComponent = () => {
   );
 };
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <BrowserRouter>
     <MyTable/>
   </BrowserRouter>

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/SortingExample.tsx

@@ -15,7 +15,7 @@ sortValue: 3
 propComponents: ['DataViewTableBasic', 'DataViewTableTree', 'DataViewTrTree', 'DataViewTrObject']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md
 ---
-import { useMemo } from 'react';
+import { FunctionComponent, useMemo } from 'react';
 import { BrowserRouter, useSearchParams } from 'react-router-dom';
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
 import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Title, PageSection } from '@patternfly/react-core';
 

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import DataView from './DataView';
 
@@ -11,11 +10,14 @@ const layoutItemStyling = {
 
 describe('DataView component', () => {
   test('should render correctly', () => {
-    expect(render(
-      <DataView>
-        <div style={layoutItemStyling}>Header</div>
-        <div style={layoutItemStyling}>Data representation</div>
-        <div style={layoutItemStyling}>Footer</div>
-      </DataView>)).toMatchSnapshot();
+    expect(
+      render(
+        <DataView>
+          <div style={layoutItemStyling}>Header</div>
+          <div style={layoutItemStyling}>Data representation</div>
+          <div style={layoutItemStyling}>Footer</div>
+        </DataView>
+      )
+    ).toMatchSnapshot();
   });
-});
+});

packages/module/src/DataView/DataView.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC, Children } from 'react';
 import { Stack, StackItem, StackProps } from '@patternfly/react-core';
 import { DataViewSelection, InternalContextProvider } from '../InternalContext';
 
@@ -24,19 +24,19 @@ export interface DataViewProps extends StackProps {
 
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
 
-const DataViewImplementation: React.FC<DataViewImpementationProps> = ({
+const DataViewImplementation: FC<DataViewImpementationProps> = ({
   children, ouiaId = 'DataView', ...props
 }: DataViewImpementationProps) => (
   <Stack data-ouia-component-id={`${ouiaId}-stack`} {...props}>
-    {React.Children.map(children, (child, index) => (
+    {Children.map(children, (child, index) => (
       <StackItem data-ouia-component-id={`${ouiaId}-stack-item-${index}`}>
         {child}
       </StackItem>
     ))} 
   </Stack>
 )
 
-export const DataView: React.FC<DataViewProps> = ({ children, selection, activeState, ...props }: DataViewProps) => (
+export const DataView: FC<DataViewProps> = ({ children, selection, activeState, ...props }: DataViewProps) => (
   <InternalContextProvider selection={selection} activeState={activeState} >
     <DataViewImplementation {...props}>{children}</DataViewImplementation>
   </InternalContextProvider>

packages/module/src/DataView/DataView.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter';
 import DataViewToolbar from '../DataViewToolbar';