chore(React19): Enable React 19 (#533)

Author: rebeccaalpert

.eslintrc.json

@@ -62,7 +62,7 @@
     "dot-notation": "error",
     "eqeqeq": ["error", "smart"],
     "guard-for-in": "error",
-    "indent": ["error", 2, {"SwitchCase":  1}],
+    "indent": ["error", 2, { "SwitchCase": 1 }],
     "max-classes-per-file": ["error", 1],
     "no-nested-ternary": "error",
     "no-bitwise": "error",
@@ -94,6 +94,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

@@ -1,5 +1,5 @@
 # PatternFly ChatBot
-  
+
 This PatternFly extension library provides components based on PatternFly 6 that can be used to build chatbots.
 
 ---
@@ -30,7 +30,7 @@ import '@patternfly/chatbot/dist/css/main.css';
 #### Example component:
 
 ```
-import * as React from 'react';
+import type { FunctionComponent } from 'react';
 import { Text } from '@patternfly/react-core';
 
 // do not forget to export your component's interface
@@ -40,7 +40,7 @@ export interface MyComponentProps {
 
 
 // do not use the named export of your component, just a default one
-const MyComponent: React.FunctionComponent<MyComponentProps> = () => {
+const MyComponent: FunctionComponent<MyComponentProps> = () => {
 
   return (
     <Text>
@@ -83,7 +83,7 @@ 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:
@@ -115,9 +115,9 @@ MyComponent has been created to demo contributing to this repository.
 Note: You'll need to add any imports required here in the parent folder's markdown file as well.
 
 ```
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
-const MyComponentExample: React.FunctionComponent = () => (
+const MyComponentExample: FunctionComponent = () => (
   <MyComponent customLabel="My label">
 );
 

package-lock.json

@@ -48,17 +48,15 @@
     "path-browserify": "^1.0.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@patternfly/documentation-framework": "6.8.2",
     "@patternfly/patternfly": "^6.1.0",
     "@patternfly/patternfly-a11y": "^5.0.0",
     "@types/dom-speech-recognition": "^0.0.4",
     "@types/react": "^18.2.61",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "rimraf": "^2.7.1",
     "typescript": "^5.3.3",
     "@octokit/rest": "^18.0.0",

packages/module/package.json

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, isValidElement, cloneElement, Children, FunctionComponent, ReactNode } from 'react';
 import AttachMenu from '@patternfly/chatbot/dist/dynamic/AttachMenu';
 import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
 import { Button, Divider, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
@@ -63,27 +63,27 @@ const uploadMenuItems = [
   </DropdownList>
 ];
 
-export const AttachmentMenuExample: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [userFacingMenuItems, setUserFacingMenuItems] = React.useState<React.ReactNode>([]);
+export const AttachmentMenuExample: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [userFacingMenuItems, setUserFacingMenuItems] = useState<ReactNode>([]);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
     setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
   };
 
-  const findMatchingElements = (elements: React.ReactNode[], targetValue: string) => {
-    let matchingElements = [] as React.ReactNode[];
+  const findMatchingElements = (elements: ReactNode[], targetValue: string) => {
+    let matchingElements = [] as ReactNode[];
 
     elements.forEach((element) => {
-      if (React.isValidElement(element)) {
+      if (isValidElement(element)) {
         // Check if the element's value matches the targetValue
         if (element.props.value && element.props.value.toLowerCase().includes(targetValue.toLowerCase())) {
-          matchingElements.push(React.cloneElement(element, { key: element.props.value }));
+          matchingElements.push(cloneElement(element, { key: element.props.value }));
         }
 
         // Recursively check the element's children
-        const children = React.Children.toArray(element.props.children);
+        const children = Children.toArray(element.props.children);
         matchingElements = matchingElements.concat(findMatchingElements(children, targetValue));
       }
     });

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachMenu.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { FunctionComponent, MouseEvent as ReactMouseEvent, useState } from 'react';
 import { Button, Checkbox } from '@patternfly/react-core';
 import { AttachmentEdit } from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
 
-export const AttachmentEditModalExample: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [isCompact, setIsCompact] = React.useState(false);
+export const AttachmentEditModalExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
 
-  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachmentEdit.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
 
-export const AttachmentErrorExample: React.FunctionComponent = () => (
+export const AttachmentErrorExample: FunctionComponent = () => (
   <ChatbotAlert
     variant="danger"
     // eslint-disable-next-line no-console

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachmentError.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { CSSProperties, useState, Fragment, FunctionComponent, MouseEvent, Ref } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import squareImg from './PF-social-color-square.svg';
@@ -11,10 +11,10 @@ import {
   SelectOption
 } from '@patternfly/react-core';
 
-export const BotMessageExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState<string>('Code');
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('Message content type');
+export const BotMessageExample: FunctionComponent = () => {
+  const [variant, setVariant] = useState<string>('Code');
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Message content type');
 
   /* eslint-disable indent */
   const renderContent = () => {
@@ -63,8 +63,6 @@ spec:
 Here is some JavaScript code:
 
 ~~~js
-import React from 'react';
-
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">
@@ -153,18 +151,18 @@ _Italic text, formatted with single underscores_
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
     actionLinks: (
-      <React.Fragment>
+      <Fragment>
         <AlertActionLink component="a" href="#">
           Start a new chat
         </AlertActionLink>
         <AlertActionLink component="a" href="#">
           Contact support
         </AlertActionLink>
-      </React.Fragment>
+      </Fragment>
     )
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+  const onSelect = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     setVariant(value);
     setSelected(value as string);
     setIsOpen(false);
@@ -174,7 +172,7 @@ _Italic text, formatted with single underscores_
     setIsOpen(!isOpen);
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       className="pf-v6-u-mb-md"
       ref={toggleRef}
@@ -183,7 +181,7 @@ _Italic text, formatted with single underscores_
       style={
         {
           width: '200px'
-        } as React.CSSProperties
+        } as CSSProperties
       }
     >
       {selected}

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';
 
-export const FileDetailsExample: React.FunctionComponent = () => <FileDetails fileName="test.yml" />;
+export const FileDetailsExample: FunctionComponent = () => <FileDetails fileName="test.yml" />;

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDetails.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import { useState, FunctionComponent, MouseEvent, Ref, CSSProperties } from 'react';
 import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
 import { Stack, MenuToggle, MenuToggleElement, Select, SelectList, SelectOption } from '@patternfly/react-core';
 
-export const FileDetailsLabelExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState<string>('plain');
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<string>('Variant');
+export const FileDetailsLabelExample: FunctionComponent = () => {
+  const [variant, setVariant] = useState<string>('plain');
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selected, setSelected] = useState<string>('Variant');
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
-    setVariant(value);
+  const onSelect = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setVariant(value as string);
     setSelected(value as string);
     setIsOpen(false);
   };
@@ -17,15 +17,15 @@ export const FileDetailsLabelExample: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}
       style={
         {
           width: '200px'
-        } as React.CSSProperties
+        } as CSSProperties
       }
     >
       {selected}