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} />
 );