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

README.md

@@ -3,6 +3,7 @@
 This repo contains a set of opinionated react component groups used to standardize functionality and look and feel across products. The components are based on PatternFly with some additional functionality.
 
 ### Branches
+
 `main` - PatternFly 6 implementation
 
 `v5` - PatternFly 5 implementation
@@ -14,22 +15,27 @@ This repo contains a set of opinionated react component groups used to standardi
 ---
 
 ### Migration from [RedHatInsights/frontend-components](https://github.com/RedHatInsights/frontend-components) to [patternfly/react-component-groups](https://github.com/patternfly/react-component-groups)
+
 Please see the [migration guide](./migration.md)
 
 ---
+
 ## Contribution guide
 
 ### Before adding a new component:
+
 - make sure your use case is new/complex enough to be added to this extension
 - the component should bring a value value above and beyond existing PatternFly components
 
 ### To add a new component:
+
 1. create a folder in `src/` matching its name (for example `src/MyComponent`)
 2. to the new folder add a new `.tsx` file named after the component (for example `src/MyComponent/MyComponent.tsx`)
 3. to the same folder include an `index.ts` which will export the component as a default and then all necessary interfaces
 4. if this file structure is not met, your component won't be exposed correctly
 
 #### Example component:
+
 ```
 import * as React from 'react';
 import { Content } from '@patternfly/react-core';
@@ -49,7 +55,8 @@ const useStyles = createUseStyles({
 })
 
 // do not use the named export of your component, just a default one
-const MyComponent: React.FunctionComponent<MyComponentProps> = () => {
+import { FunctionComponent } from 'react';
+const MyComponent: FunctionComponent<MyComponentProps> = () => {
   const classes = useStyles();
 
   return (
@@ -60,42 +67,49 @@ const MyComponent: React.FunctionComponent<MyComponentProps> = () => {
 };
 
 export default MyComponent;
-``` 
+```
 
 #### Index file example:
+
 ```
 export { default } from './MyComponent';
 export * from './MyComponent';
-``` 
+```
 
 #### Component directory structure example:
+
 ```
 src
 |- MyComponent
    |- index.ts
    |- MyComponent.tsx
-``` 
+```
 
 ### Component's API rules:
+
 - prop names comply with PatternFly components naming standards (`variant`, `onClick`, `position`, etc.)
 - the API is maximally simplified and all props are provided with a description
 - it is built on top of existing PatternFly types without prop omitting
 - it is well documented using the PatternFly documentation (`/packages/module/patternfly-docs/content/extensions/component-groups/examples/MyComponent/MyComponent.md`) with examples of all possible use cases (`packages/module/patternfly-docs/content/extensions/component-groups/examples/MyComponent/MyComponent[...]Example.tsx`)
 - do not unnecessarily use external libraries in your component - rather, delegate the necessary logic to the component's user using the component's API
 
 #### Component API definition example:
+
 ```
+
+import { FunctionComponent } from 'react';
+
 // when possible, extend available PatternFly types
 export interface MyComponentProps extends ButtonProps {
     customLabel: Boolean
 };
 
-export const MyComponent: React.FunctionComponent<MyComponentProps> = ({ customLabel, ...props }) => ( ... );
+export const MyComponent: FunctionComponent<MyComponentProps> = ({ customLabel, ...props }) => ( ... );
 ```
 
-
 #### Markdown file example:
-```
+
+````
 ---
 section: Component groups
 subsection: My component's category
@@ -113,36 +127,42 @@ MyComponent has been created to demo contributing to this repository.
 
 ```js file="./MyComponentExample.tsx"```
 
-```
+````
 
 #### Component usage file example: (`MyComponentExample.tsx`)
+
 ```
-import React from 'react';
+import { FunctionComponent } from 'react';
 
-const MyComponentExample: React.FunctionComponent = () => (
+const MyComponentExample: FunctionComponent = () => (
   <MyComponent customLabel="My label">
 );
 
 export default MyComponentExample;
 ```
 
 ### Sub-components:
-When adding a component for which it is advantageous to divide it into several sub-components make sure: 
+
+When adding a component for which it is advantageous to divide it into several sub-components make sure:
+
 - component and all its sub-components are located in separate files and directories straight under the `src/` folder
 - sub-components are exported and documented separately from their parent
 - parent component should provide a way to pass props to all its sub-components
 
 The aim is to enable the user of our "complex" component to use either complete or take advantage of its sub-components and manage their composition independently.
 
 ### Testing:
+
 When adding/making changes to a component, always make sure your code is tested:
-- use React Testing Library for unit testing 
+
+- use React Testing Library for unit testing
 - add unit tests to a `[ComponentName].test.tsx` file to your component's directory
 - make sure all the core functionality is covered using Cypress component or E2E tests
 - add component tests to `cypress/component/[ComponentName].cy.tsx` file and E2E tests to `cypress/e2e/[ComponentName].spec.cy.ts`
 - add `ouiaId` to the component props definition with a default value of the component name (for subcomponents, let's use `ComponentName-element-specification` naming convention e.g. `ouiaId="WarningModal-confirm-button"`)
 
 ### Styling:
+
 - for styling always use JSS
 - new classNames should be named in camelCase starting with the name of a given component and following with more details clarifying its purpose/component's subsection to which the class is applied (`actionMenu`, `actionMenuDropdown`, `actionMenuDropdownToggle`, etc.)
 - do not use `pf-v6-u-XXX` classes, use CSS variables in a custom class instead (styles for the utility classes are not bundled with the standard patternfly.css - it would require the consumer to import also addons.css)
@@ -153,10 +173,12 @@ When adding/making changes to a component, always make sure your code is tested:
 - run `npm run build`
 
 ## Development
+
 - run `npm install`
 - run `npm run start` to build and start the development server
 
 ## Testing and Linting
+
 - run `npm run test` to run the unit tests
 - run `npm run cypress:run:cp` to run Cypress component tests
 - run `npm run cypress:run:e2e` to run Cypress E2E tests
@@ -165,4 +187,3 @@ When adding/making changes to a component, always make sure your code is tested:
 ## A11y testing
 
 - run `npm run build:docs` followed by `npm run serve:docs`, then run `npm run test:a11y` in a new terminal window to run our accessibility tests for the components. Once the accessibility tests have finished running you can run `npm run serve:a11y` to locally view the generated report.
-

cypress/component/Ansible.cy.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
 import { Ansible } from '@patternfly/react-component-groups/dist/dynamic/Ansible';
 
 describe('Ansible', () => {
   it('renders supported Ansible', () => {
-    cy.mount(<Ansible />)
+    cy.mount(<Ansible />);
     cy.get('i').should('have.class', 'ansibleSupported-0-2-2');
   });
   it('renders unsupported Ansible', () => {
-    cy.mount(<Ansible isSupported={false}/>)
+    cy.mount(<Ansible isSupported={false} />);
     cy.get('i').should('have.class', 'ansibleUnsupported-0-2-3');
   });
-});
+});

cypress/component/CloseButton.cy.tsx

@@ -1,16 +1,23 @@
-import React from 'react';
 import CloseButton from '../../packages/module/dist/dynamic/CloseButton';
 
 describe('CloseButton', () => {
   /* eslint-disable no-console */
   it('renders the Close button', () => {
-    cy.mount(<CloseButton dataTestID="close-button-example" onClick={()=>{console.log('Close button clicked')}} style={{ float: 'none' }}/>)
+    cy.mount(
+      <CloseButton
+        dataTestID="close-button-example"
+        onClick={() => {
+          console.log('Close button clicked');
+        }}
+        style={{ float: 'none' }}
+      />
+    );
     cy.get('[data-test-id="close-button-example"]').should('exist');
   });
   it('should call callback on click', () => {
     const onClickSpy = cy.spy().as('onClickSpy');
-    cy.mount(<CloseButton dataTestID="close-button-example" onClick={onClickSpy}/>);
+    cy.mount(<CloseButton dataTestID="close-button-example" onClick={onClickSpy} />);
     cy.get('[data-test-id="close-button-example"]').click();
     cy.get('@onClickSpy').should('have.been.called');
   });
-})
+});

cypress/component/ErrorBoundary.cy.tsx

@@ -1,21 +1,26 @@
-import React from 'react';
 import ErrorBoundary from '../../packages/module/dist/dynamic/ErrorBoundary';
 
 describe('ErrorBoundary', () => {
   it('renders the ErrorBoundary ', () => {
-    cy.mount(<ErrorBoundary headerTitle="My app header" errorTitle="Something wrong happened"><div data-ouia-component-id="test">Test</div></ErrorBoundary>)
+    cy.mount(
+      <ErrorBoundary headerTitle="My app header" errorTitle="Something wrong happened">
+        <div data-ouia-component-id="test">Test</div>
+      </ErrorBoundary>
+    );
     cy.get('[data-ouia-component-id="test"]').should('have.text', 'Test');
   });
 
   it('should expand the details section', () => {
     const Surprise = () => {
       throw new Error('but a welcome one');
     };
-    cy.mount(<ErrorBoundary headerTitle="My app header" errorTitle="Something wrong happened">
-      <Surprise />
-    </ErrorBoundary>)
+    cy.mount(
+      <ErrorBoundary headerTitle="My app header" errorTitle="Something wrong happened">
+        <Surprise />
+      </ErrorBoundary>
+    );
 
     cy.get('[data-ouia-component-id="ErrorBoundary-toggle"').click();
     cy.get('[class="pf-v5-c-expandable-section__content"]').should('contain.text', 'Error: but a welcome one');
-  })
-})
+  });
+});

cypress/component/ErrorState.cy.tsx

@@ -1,21 +1,28 @@
-import React from 'react';
 import ErrorState from '../../packages/module/dist/dynamic/ErrorState';
-import { ActionButton } from '../../packages/module/dist/dynamic/ActionButton'
+import { ActionButton } from '../../packages/module/dist/dynamic/ActionButton';
 
 describe('ErrorState', () => {
   it('renders the Close button', () => {
-    cy.mount(<ErrorState titleText='Sample error title' bodyText='Sample error description' />);
+    cy.mount(<ErrorState titleText="Sample error title" bodyText="Sample error description" />);
     cy.get('[data-ouia-component-id="ErrorState"]').contains('Sample error title');
     cy.get('[data-ouia-component-id="ErrorState-body"]').should('have.text', 'Sample error description');
   });
 
   it('render with a custom footer', () => {
     const onClickSpy = cy.spy().as('onClickSpy');
-    cy.mount(<ErrorState titleText='Sample error title' bodyText='Sample error description' customFooter={<ActionButton variant="secondary" onClick={onClickSpy}>
-    Custom action
-    </ActionButton>}/>);
-    cy.get('button').should('have.text', "Custom action");
+    cy.mount(
+      <ErrorState
+        titleText="Sample error title"
+        bodyText="Sample error description"
+        customFooter={
+          <ActionButton variant="secondary" onClick={onClickSpy}>
+            Custom action
+          </ActionButton>
+        }
+      />
+    );
+    cy.get('button').should('have.text', 'Custom action');
     cy.get('button').click();
     cy.get('@onClickSpy').should('have.been.called');
-  })
-})
+  });
+});

cypress/component/LogSnippet.cy.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import LogSnippet from '../../packages/module/dist/dynamic/LogSnippet';
 
 describe('LogSnippet', () => {
   it('renders LogSnippet', () => {
-    cy.mount(<LogSnippet logSnippet='test test code' message='A test message'/>)
+    cy.mount(<LogSnippet logSnippet="test test code" message="A test message" />);
     cy.get('[data-ouia-component-id="LogSnippet-message"]').contains('A test message');
     cy.get('[data-ouia-component-id="LogSnippet-code-content"]').contains('test code');
   });
-});
+});

cypress/component/Maintenance.cy.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
 import Maintenance from '@patternfly/react-component-groups/dist/dynamic/Maintenance';
 
 describe('Maintenance', () => {
   it('renders Maintenance', () => {
-    cy.mount(<Maintenance />)
+    cy.mount(<Maintenance />);
     cy.get('[data-ouia-component-id="Maintenance"]').should('exist');
     cy.get('[data-ouia-component-id="Maintenance"]').contains('Maintenance in progress');
-    cy.get('[data-ouia-component-id="Maintenance-body"]').contains('We are currently undergoing scheduled maintenance and will be unavailable from 6am to 8am UTC. For more information please visit status.redhat.com.');
+    cy.get('[data-ouia-component-id="Maintenance-body"]').contains(
+      'We are currently undergoing scheduled maintenance and will be unavailable from 6am to 8am UTC. For more information please visit status.redhat.com.'
+    );
   });
-});
+});

cypress/component/MissingPage.cy.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
 import MissingPage from '@patternfly/react-component-groups/dist/dynamic/MissingPage';
 
 describe('MissingPage', () => {
   it('renders MissingPage', () => {
-    cy.mount(<MissingPage />)
-    cy.get('[data-ouia-component-id="MissingPage"]').should('exist')
+    cy.mount(<MissingPage />);
+    cy.get('[data-ouia-component-id="MissingPage"]').should('exist');
     cy.get('[data-ouia-component-id="MissingPage"]').contains('We lost that page');
-    cy.get('[data-ouia-component-id="MissingPage-body"]').contains("Let's find you a new one. Try a new search or return home.");
+    cy.get('[data-ouia-component-id="MissingPage-body"]').contains(
+      "Let's find you a new one. Try a new search or return home."
+    );
     cy.get('[data-ouia-component-id="MissingPage-home-button"]').contains('Return to homepage');
   });
-})
+});